// Financial models page
function FinancialModelsPage({ t, lang }) {
  const L = lang === "en";
  return (
    <>
      <section className="hero" style={{ borderTop: "none", paddingTop: 60, paddingBottom: 40 }}>
        <div className="container">
          <div className="eyebrow"><span className="dot" />{L ? "Financial models" : "Modelos financieros"}</div>
          <h1 className="h1" style={{ maxWidth: 1000 }}>
            {L ? "P&L and cashflow, " : "P&L y cashflow, "}
            <em>{L ? "automated" : "automatizados"}</em>.
            <span className="hl" style={{ marginLeft: 8 }}>{L ? "No Excel." : "Sin Excel."}</span>
          </h1>
          <p className="lede" style={{ maxWidth: 720 }}>
            {L ? "Stop waiting for your accountant's month-end. NextScenario builds your income statement and cashflow model live from your real data — reconciled, categorised and always one source of truth."
               : "Deja de esperar al cierre de la gestoría. NextScenario construye tu cuenta de resultados y tu modelo de cashflow en vivo, a partir de tus datos reales: conciliados, categorizados y en una única fuente de verdad."}
          </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="#pl">{L ? "See P&L model" : "Ver modelo P&L"}</a>
          </div>
        </div>
      </section>

      {/* P&L model */}
      <section id="pl">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow">{L ? "P&L · Income statement" : "Cuenta de resultados · P&L"}</div>
              <h2>{L ? "A living income statement." : "Una cuenta de resultados viva."}</h2>
            </div>
            <p>{L ? "Revenue, COGS, OPEX, EBITDA — by entity, currency and segment. Drill from any line down to the underlying invoice or transaction."
                   : "Ingresos, COGS, OPEX, EBITDA — por entidad, divisa y segmento. Navega desde cualquier línea hasta la factura o movimiento original."}</p>
          </div>

          <div className="dash-wrap reveal" style={{ background: "var(--ink)" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 }}>
              <div className="dash-panel">
                <div className="dp-label" style={{ marginBottom: 14 }}>{L ? "Q1 2026 · Consolidated" : "Q1 2026 · Consolidado"}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, display: "flex", flexDirection: "column", gap: 8, color: "color-mix(in oklab, var(--paper) 88%, transparent)" }}>
                  {[
                    ["Net revenue", "+ 1,238,550", "", true],
                    ["  Subscriptions", "   842,100", "", false],
                    ["  One-off", "   312,450", "", false],
                    ["  Other", "    84,000", "", false],
                    ["COGS", "−   346,800", "", true],
                    ["Gross profit", "=   891,750", "72%", true, "accent"],
                    ["OPEX", "−   609,390", "", true],
                    ["  Personnel", "   355,200", "", false],
                    ["  Marketing", "   187,200", "", false],
                    ["  Tech & tools", "    66,990", "", false],
                    ["EBITDA", "=   282,360", "22.8%", true, "accent"]
                  ].map((r, i) => (
                    <div key={i} style={{
                      display: "flex", justifyContent: "space-between",
                      paddingBottom: 6,
                      borderBottom: r[3] ? "1px dashed color-mix(in oklab, currentColor 20%, transparent)" : "none",
                      color: r[4] === "accent" ? "var(--accent)" : r[3] ? "var(--paper)" : "color-mix(in oklab, var(--paper) 65%, transparent)",
                      fontWeight: r[4] === "accent" ? 600 : 400
                    }}>
                      <span>{r[0]}</span>
                      <span style={{ display: "flex", gap: 18, fontVariantNumeric: "tabular-nums" }}>
                        <span>€ {r[1]}</span>
                        <span style={{ color: "var(--accent)", minWidth: 44, textAlign: "right" }}>{r[2]}</span>
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div className="dash-panel">
                  <div className="dp-label">{L ? "Revenue vs. last year" : "Ingresos vs. año pasado"}</div>
                  <div className="dp-big num">+34%</div>
                  <div style={{ height: 80, marginTop: 6 }}>
                    <AreaChart data={genSeries(24, 80, 10, 5)} />
                  </div>
                </div>
                <div className="dash-panel">
                  <div className="dp-label">{L ? "Margin evolution" : "Evolución del margen"}</div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginTop: 8 }}>
                    <div><div className="dp-label">{L ? "Gross" : "Bruto"}</div><div className="num" style={{ fontSize: 22 }}>72%</div></div>
                    <div><div className="dp-label">EBITDA</div><div className="num" style={{ fontSize: 22, color: "var(--accent)" }}>22.8%</div></div>
                    <div><div className="dp-label">{L ? "Net" : "Neto"}</div><div className="num" style={{ fontSize: 22 }}>17.3%</div></div>
                  </div>
                  <div style={{ height: 50, marginTop: 10 }}>
                    <Bars data={[58, 62, 64, 67, 70, 71, 72]} color="#D4FF3F" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features of the model */}
      <section>
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow">{L ? "What's inside" : "Qué hay dentro"}</div>
              <h2>{L ? "A real model, not a dashboard." : "Un modelo real, no solo un dashboard."}</h2>
            </div>
          </div>
          <div className="feat-grid">
            {[
              { tag: "01", t: L ? "Multi-entity & currency" : "Multi-entidad y divisa", d: L ? "Consolidate subsidiaries across countries, with automatic FX and intercompany elimination." : "Consolida filiales entre países, con FX automático y eliminación de movimientos intercompany." },
              { tag: "02", t: L ? "Chart of accounts" : "Plan de cuentas", d: L ? "Spanish PGC, IFRS or custom. Map accounts once, reuse everywhere." : "PGC español, IFRS o personalizado. Mapea una vez, reutiliza en todo." },
              { tag: "03", t: L ? "Cost allocation" : "Reparto de costes", d: L ? "Split OPEX by product, team or cohort. See the true margin of each revenue stream." : "Reparte OPEX por producto, equipo o cohorte. Descubre el margen real de cada línea de ingresos.", style: "accent" },
              { tag: "04", t: L ? "Scenarios & what-if" : "Escenarios y what-if", d: L ? "Duplicate the model, tweak assumptions, compare side-by-side." : "Duplica el modelo, cambia supuestos, compáralos en paralelo." },
              { tag: "05", t: L ? "Audit trail" : "Trazabilidad", d: L ? "Every line drills down to the source invoice, payout or journal entry." : "Cada línea llega hasta la factura, pago o asiento original.", style: "dark" },
              { tag: "06", t: L ? "Export anywhere" : "Exporta a donde quieras", d: L ? "CSV, Excel, Google Sheets, A3, Sage, Contasol or your BI via API." : "CSV, Excel, Google Sheets, A3, Sage, Contasol o tu BI vía API." }
            ].map((f, i) => (
              <div key={i} className={"feat reveal " + (f.style || "")}>
                <div className="feat-tag">{f.tag}</div>
                <div className="feat-title">{f.t}</div>
                <div className="feat-body">{f.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}
window.FinancialModelsPage = FinancialModelsPage;