// Integrations page content
function IntegrationsPage({ t, lang }) {
  const L = lang === "en";
  const cats = L ? [
    { k: "Banks", desc: "PSD2 · Open Banking · sync every hour", items: ["BBVA","Santander","CaixaBank","Sabadell","ING","Revolut","HSBC","Deutsche Bank"] },
    { k: "Payments", desc: "Subscriptions, one-off, refunds, fees", items: ["Stripe","PayPal","QuickBooks"] },
    { k: "ERPs & Accounting", desc: "Invoices, journal, cost centers", items: ["Holded","Odoo","SAP","Zoho","QuickBooks"] },
    { k: "Ecommerce & POS", desc: "Orders, returns, fees, SKUs", items: ["Shopify","WooCommerce","Amazon","TPV físico"] },
    { k: "Marketing & Ads", desc: "Spend, ROAS, attribution", items: ["Google Ads","Meta Ads","TikTok"] },
    { k: "Collaboration", desc: "Reports and alerts where your team works", items: ["Slack","Notion"] }
  ] : [
    { k: "Bancos", desc: "PSD2 · Open Banking · sync cada hora", items: ["BBVA","Santander","CaixaBank","Sabadell","ING","Revolut","HSBC","Deutsche Bank"] },
    { k: "Pagos", desc: "Suscripciones, one-off, reembolsos, fees", items: ["Stripe","PayPal","QuickBooks"] },
    { k: "ERPs y Contabilidad", desc: "Facturas, asientos, centros de coste", items: ["Holded","Odoo","SAP","Zoho","QuickBooks"] },
    { k: "Ecommerce y TPV", desc: "Pedidos, devoluciones, fees, SKUs", items: ["Shopify","WooCommerce","Amazon","TPV físico"] },
    { k: "Marketing y Publicidad", desc: "Gasto, ROAS, atribución", items: ["Google Ads","Meta Ads","TikTok"] },
    { k: "Colaboración", desc: "Informes y alertas donde trabaja tu equipo", items: ["Slack","Notion"] }
  ];

  return (
    <>
      <section className="hero" style={{ borderTop: "none", paddingTop: 60, paddingBottom: 40 }}>
        <div className="container">
          <div className="eyebrow"><span className="dot" />{L ? "Integrations · 40+" : "Integraciones · 40+"}</div>
          <h1 className="h1" style={{ maxWidth: 900 }}>
            {L ? "Connect your stack. " : "Conecta tu stack. "}
            <em>{L ? "Forget about" : "Olvídate de"}</em> {L ? "CSVs." : "los CSVs."}
          </h1>
          <p className="lede" style={{ maxWidth: 720 }}>
            {L
              ? "Banks, payment gateways, ERPs, POS and ad channels. NextScenario keeps every source live and reconciled, 24/7."
              : "Bancos, pasarelas de pago, ERPs, TPVs y canales de ads. NextScenario mantiene cada fuente viva y conciliada, 24/7."}
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href={window.appRegisterURL(t._lang)}>{t.cta.start}<Icon name="arrow-right" size={14} /></a>
            <a className="btn btn-ghost" href="#banks">{L ? "See banks" : "Ver bancos"}</a>
          </div>

          <div className="tickers" style={{ marginTop: 44 }}>
            <div className="ticker"><div className="ticker-label">{L ? "Native integrations" : "Integraciones nativas"}</div><div className="ticker-value num">40+</div><div className="ticker-delta pos">{L ? "growing weekly" : "crecen cada semana"}</div></div>
            <div className="ticker"><div className="ticker-label">{L ? "Data refresh" : "Refresco de datos"}</div><div className="ticker-value num">60s</div><div className="ticker-delta pos">{L ? "avg" : "medio"}</div></div>
            <div className="ticker"><div className="ticker-label">{L ? "Banks (PSD2)" : "Bancos (PSD2)"}</div><div className="ticker-value num">20+</div><div className="ticker-delta pos">ES · EU</div></div>
            <div className="ticker"><div className="ticker-label">{L ? "Setup" : "Setup"}</div><div className="ticker-value num">30m</div><div className="ticker-delta pos">{L ? "avg" : "medio"}</div></div>
          </div>
        </div>
      </section>

      {/* Banks section — highlighted */}
      <section id="banks" style={{ background: "var(--ink)", color: "var(--paper)", borderTop: "none" }}>
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{ color: "color-mix(in oklab, var(--paper) 60%, transparent)" }}>{L ? "Banks · PSD2" : "Bancos · PSD2"}</div>
              <h2 style={{ color: "var(--paper)" }}>{L ? "Every major bank, connected." : "Los principales bancos, conectados."} <em style={{ color: "var(--accent)" }}>{L ? "Live." : "En vivo."}</em></h2>
            </div>
            <p style={{ color: "color-mix(in oklab, var(--paper) 65%, transparent)" }}>
              {L
                ? "Read-only PSD2 / Open Banking access. We never move your money — only read movements, balances and cards."
                : "Acceso de sólo lectura vía PSD2 / Open Banking. Nunca movemos tu dinero: sólo leemos movimientos, saldos y tarjetas."}
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {["BBVA","Santander","CaixaBank","Sabadell","ING","Revolut","HSBC","Deutsche Bank"].map((b, i) => (
              <div key={i} className="reveal" style={{ border: "1px solid color-mix(in oklab, var(--paper) 14%, transparent)", borderRadius: 14, padding: 20, background: "color-mix(in oklab, var(--ink) 50%, black)", display: "flex", flexDirection: "column", gap: 12 }}>
                <BrandLogo brand={b} size={40} />
                <div>
                  <div style={{ fontSize: 16, fontWeight: 500 }}>{b}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "color-mix(in oklab, var(--paper) 55%, transparent)", marginTop: 2, textTransform: "uppercase", letterSpacing: "0.08em" }}>
                    PSD2 · {L ? "live sync" : "sync en vivo"}
                  </div>
                </div>
                <div style={{ fontSize: 12, color: "color-mix(in oklab, var(--paper) 70%, transparent)", display: "flex", gap: 6, alignItems: "center", marginTop: "auto" }}>
                  <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)" }} />
                  {L ? "Connected" : "Conectado"}
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 32, padding: 24, borderRadius: 14, border: "1px dashed color-mix(in oklab, var(--paper) 20%, transparent)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "color-mix(in oklab, var(--paper) 60%, transparent)" }}>
                {L ? "Don't see your bank?" : "¿No ves tu banco?"}
              </div>
              <div style={{ fontSize: 18, marginTop: 4 }}>
                {L ? "We connect any bank with PSD2 API. +600 supported across Europe." : "Conectamos cualquier banco con API PSD2. +600 soportados en Europa."}
              </div>
            </div>
            <a className="btn btn-accent" href={window.appRegisterURL(L ? "en" : "es")}>{L ? "Request your bank" : "Solicitar tu banco"}<Icon name="arrow-right" size={14} /></a>
          </div>
        </div>
      </section>

      {/* Categories */}
      {cats.filter(c => c.k !== "Banks" && c.k !== "Bancos").map((cat, i) => (
        <section key={i}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <div className="eyebrow">{cat.k}</div>
                <h2>{cat.k}</h2>
              </div>
              <p>{cat.desc}</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
              {cat.items.map((n, j) => (
                <div key={j} className="reveal" style={{ border: "1px solid var(--line)", borderRadius: 14, padding: 20, background: "color-mix(in oklab, var(--paper) 60%, white)", display: "flex", flexDirection: "column", gap: 10, minHeight: 140 }}>
                  <BrandLogo brand={n} size={36} />
                  <div style={{ fontSize: 15, fontWeight: 500, marginTop: 4 }}>{n}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--mute)", textTransform: "uppercase", letterSpacing: "0.08em" }}>{cat.k}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      ))}

      {/* Process */}
      <section>
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow">{L ? "How it works" : "Cómo funciona"}</div>
              <h2>{L ? "From zero to live P&L in 3 steps." : "De cero a P&L en vivo en 3 pasos."}</h2>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
            {[
              { n: "01", t: L ? "Connect your sources" : "Conecta tus fuentes", d: L ? "Select banks, payments, ERP and sales channels. OAuth and PSD2 approval flows in under 3 minutes each." : "Selecciona bancos, pagos, ERP y canales. Flujos OAuth y PSD2 en menos de 3 minutos cada uno." },
              { n: "02", t: L ? "We map your data" : "Mapeamos tus datos", d: L ? "Our engine reconciles invoices, movements and fees into one clean chart of accounts." : "Nuestro motor concilia facturas, movimientos y fees en un solo plan de cuentas limpio." },
              { n: "03", t: L ? "Live metrics, forever" : "Métricas en vivo, para siempre", d: L ? "Your P&L, cashflow and cohorts update every 60 seconds. Reports land in your inbox on Monday." : "Tu P&L, cashflow y cohortes se actualizan cada 60 segundos. Los informes llegan el lunes a tu bandeja." }
            ].map((s, i) => (
              <div key={i} className="feat reveal" style={{ minHeight: 220 }}>
                <div className="feat-tag">{s.n}</div>
                <div className="feat-title">{s.t}</div>
                <div className="feat-body">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}
window.IntegrationsPage = IntegrationsPage;