// Use case page shell — full functionality per business model.
// Renders Spanish (cfg) or English (cfgEn) content depending on the URL.
// cfgEn is optional; when missing the page falls back to cfg.
function UseCasePage({ cfg, cfgEn }) {
  const lang = (window.detectInitialLang ? window.detectInitialLang() : "es");
  const L = lang === "en";
  const c = (L && cfgEn) ? cfgEn : cfg;

  return (
    <>
      <SubNav current={c.page} />
      <section className="sub-hero" style={{ borderTop: "none" }}>
        <div className="container">
          <div className="sub-crumb">
            <a href="index.html">{L ? "Home" : "Inicio"}</a> · <a href={L ? "use-cases.html" : "casos-de-uso.html"}>{L ? "Use cases" : "Casos de uso"}</a> · <span>{c.name}</span>
          </div>
          <div className="sub-kicker">{L ? "For " + c.name : "Para " + c.name}</div>
          <h1 className="sub-h1">{c.heroPre} <em>{c.heroEm}</em> {c.heroPost} <span className="hl">{c.heroHl}</span>.</h1>
          <p className="sub-lede">{c.lede}</p>
          <div className="sub-ctas">
            <a href={window.appRegisterURL(lang)} className="btn-demo">
              <span className="btn-demo-dot" />
              <span className="btn-demo-label">{L ? "Request a demo for " + c.name : "Solicitar demo adaptada a " + c.name}</span>
              <span className="btn-demo-arrow">→</span>
            </a>
            <a className="btn btn-ghost" href={window.appRegisterURL(lang)}>{L ? "See pricing" : "Ver precios"}</a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 40 }}>
            {c.kpis.map((m, i) => (
              <div key={i} className="bigmetric"><div className="l">{m.l}</div><div className="v num">{m.v}</div><div className="sub">{m.s}</div></div>
            ))}
          </div>
        </div>
      </section>

      {/* Dashboard preview */}
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="sub-big-viz">
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20, flexWrap: "wrap", gap: 20 }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", color: "color-mix(in oklab, var(--paper) 55%, transparent)", textTransform: "uppercase" }}>Dashboard · {c.name}</div>
                <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 4 }}>{c.dashTitle}</div>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
              {c.dashKpis.map((k, i) => (
                <div key={i} style={{ border: "1px solid color-mix(in oklab, var(--paper) 12%, transparent)", borderRadius: 12, padding: 16, background: i === 0 ? "var(--accent)" : "color-mix(in oklab, var(--ink) 55%, black)", color: i === 0 ? "var(--ink)" : "var(--paper)" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.7 }}>{k.l}</div>
                  <div style={{ fontSize: 26, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em", marginTop: 4 }}>{k.v}</div>
                  <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", opacity: 0.7, marginTop: 2 }}>{k.d}</div>
                </div>
              ))}
            </div>
            <div style={{ height: 200, marginTop: 18 }}><AreaChart data={genSeries(40, 80, 12, c.seed || 3)} /></div>
          </div>
        </div>
      </section>

      {/* Capabilities */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">{L ? "Tailored capabilities" : "Funcionalidades adaptadas"}</div>
              <h2>{L ? "NextScenario for " : "NextScenario para "}<em>{c.name}</em>{L ? ", end to end." : ", de principio a fin."}</h2>
            </div>
            <p>{L ? "Not just metrics. P&L, cashflow, forecasting, automated reporting, alerts and integrations built for " : "No solo métricas. P&L, cashflow, forecast, reporting automático, alertas e integraciones pensadas para "}{c.name.toLowerCase()}.</p>
          </div>
          <div className="uc-caps">
            {c.capabilities.map((cap, i) => (
              <div key={i} className={"uc-cap " + (cap.hi ? "hi" : "")}>
                <div className="uc-cap-tag">{cap.tag}</div>
                <div className="uc-cap-title">{cap.title}</div>
                <div className="uc-cap-body">{cap.body}</div>
                <ul className="uc-cap-list">
                  {cap.bullets.map((b, j) => <li key={j}><span className="chk">✓</span>{b}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Flow */}
      <section style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">{L ? "How it works" : "Cómo funciona"}</div>
              <h2>{L ? "From your sources to your decision in " : "De tus fuentes a tu decisión en "}<em>{L ? "4 steps" : "4 pasos"}</em>.</h2>
            </div>
          </div>
          <div className="uc-flow">
            {c.flow.map((step, i) => (
              <div key={i} className="uc-flow-step">
                <div className="uc-flow-num">0{i+1}</div>
                <div className="uc-flow-title">{step.title}</div>
                <div className="uc-flow-desc">{step.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Integrations */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">{L ? "Key integrations" : "Integraciones clave"}</div>
              <h2>{L ? "Plugged into what you already use." : "Conectado con lo que ya usas."}</h2>
            </div>
            <p>{L ? "No dev work. 30+ integrations tailored to " : "Sin desarrollos. 30+ integraciones específicas para "}{c.name.toLowerCase()}.</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12 }}>
            {c.tools.map((t, i) => (
              <div key={i} style={{ padding: "20px 10px", border: "1px solid var(--line)", borderRadius: 12, background: "white", display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
                <BrandLogo name={t} size={32} />
                <span style={{ fontSize: 12, fontWeight: 500 }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Reporting & alerts */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">{L ? "Reporting and alerts" : "Reporting y alertas"}</div>
              <h2>{L ? "Each week, what matters — " : "Cada semana, lo que importa — "}<em>{L ? "without asking" : "sin pedirlo"}</em>.</h2>
            </div>
          </div>
          <div className="uc-alerts">
            <div className="uc-report">
              <div className="uc-report-head">
                <div className="uc-report-title">{L ? "Weekly report · " : "Informe semanal · "}{c.name}</div>
                <div className="uc-report-time">{L ? "Monday 9:00 · WhatsApp + Email" : "Lunes 9:00 · WhatsApp + Email"}</div>
              </div>
              <div className="uc-report-body">
                {c.report.map((r, i) => (
                  <div key={i} className="uc-report-row">
                    <span className="uc-report-l">{r.l}</span>
                    <span className="uc-report-v num">{r.v}</span>
                    <span className={"uc-report-d " + (r.pos ? "pos" : r.neg ? "neg" : "")}>{r.d}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="uc-alert-list">
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 12 }}>{L ? "Configured alerts" : "Alertas configuradas"}</div>
              {c.alerts.map((a, i) => (
                <div key={i} className={"uc-alert uc-alert-" + a.k}>
                  <span className="uc-alert-dot" />
                  <div>
                    <div className="uc-alert-t">{a.t}</div>
                    <div className="uc-alert-s">{a.s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <SubCTA title={c.ctaTitle} sub={L ? "Setup in under a day. No card. 14 days free." : "Setup en menos de un día. Sin tarjeta. 14 días gratis."} />
      <SubFooter />
    </>
  );
}
window.UseCasePage = UseCasePage;