// Sales forecast page
function ForecastPage({ t, lang }) {
  const L = lang === "en";
  const base = genSeries(18, 80, 6, 5);
  const opt = base.map((v, i) => v * (1 + i * 0.018));
  const cons = base.map((v, i) => v * (1 - i * 0.012));

  const channels = L ? [
    { n: "Stripe · Subscriptions", v: "€1.42M", g: "+42%", roas: "—" },
    { n: "Shopify · Ecommerce", v: "€820k", g: "+28%", roas: "4.2x" },
    { n: "Amazon · Marketplace", v: "€412k", g: "+18%", roas: "3.1x" },
    { n: "POS · In-store", v: "€186k", g: "+9%", roas: "—" }
  ] : [
    { n: "Stripe · Suscripciones", v: "€1.42M", g: "+42%", roas: "—" },
    { n: "Shopify · Ecommerce", v: "€820k", g: "+28%", roas: "4.2x" },
    { n: "Amazon · Marketplace", v: "€412k", g: "+18%", roas: "3.1x" },
    { n: "TPV · Tienda física", v: "€186k", g: "+9%", roas: "—" }
  ];

  return (
    <>
      <section className="hero" style={{ borderTop: "none", paddingTop: 60, paddingBottom: 40 }}>
        <div className="container">
          <div className="eyebrow"><span className="dot" />{L ? "Sales forecast" : "Forecast de ventas"}</div>
          <h1 className="h1" style={{ maxWidth: 1000 }}>
            {L ? "Predict revenue with " : "Predice ingresos con "}
            <em>{L ? "real" : "datos"}</em> {L ? "data." : "reales."}
          </h1>
          <p className="lede" style={{ maxWidth: 720 }}>
            {L ? "Base, optimistic and conservative scenarios — computed from your actual sales, pipeline and seasonality. No spreadsheets. No gut feel."
               : "Escenarios base, optimista y conservador — calculados desde tus ventas reales, pipeline y estacionalidad. Sin hojas de cálculo. Sin intuición."}
          </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="#chart">{L ? "See the forecast" : "Ver el forecast"}</a>
          </div>
        </div>
      </section>

      {/* Forecast chart */}
      <section id="chart">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow">{L ? "3 scenarios · 12 months" : "3 escenarios · 12 meses"}</div>
              <h2>{L ? "One model. Three futures." : "Un modelo. Tres futuros."}</h2>
            </div>
            <p>{L ? "Each scenario is a real simulation — not just a percentage. You can lock assumptions, break them by channel, and compare against your actuals in real time."
                   : "Cada escenario es una simulación real — no solo un porcentaje. Puedes fijar supuestos, partirlos por canal y compararlos contra tu real en vivo."}</p>
          </div>

          <div className="dash-wrap reveal" style={{ background: "var(--ink)" }}>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 20 }}>
              {[
                { n: L ? "Optimistic" : "Optimista", v: "€3.4M", c: "#D4FF3F" },
                { n: L ? "Base case" : "Base", v: "€2.9M", c: "#5B8CFF" },
                { n: L ? "Conservative" : "Conservador", v: "€2.5M", c: "rgba(255,255,255,0.5)" }
              ].map((s, i) => (
                <div key={i} style={{ padding: "10px 14px", border: "1px solid color-mix(in oklab, var(--paper) 14%, transparent)", borderRadius: 12, display: "flex", gap: 10, alignItems: "center", minWidth: 180 }}>
                  <span style={{ width: 10, height: 10, borderRadius: "50%", background: s.c }} />
                  <div>
                    <div className="dp-label">{s.n}</div>
                    <div style={{ fontSize: 22, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }}>{s.v}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ background: "color-mix(in oklab, var(--ink) 50%, black)", border: "1px solid color-mix(in oklab, var(--paper) 12%, transparent)", borderRadius: 14, padding: 20 }}>
              <svg viewBox="0 0 800 280" style={{ width: "100%", height: 280, display: "block" }}>
                {[0.25, 0.5, 0.75].map((p, i) => <line key={i} x1="0" x2="800" y1={280 * p} y2={280 * p} stroke="rgba(255,255,255,0.08)" strokeDasharray="2 4" />)}
                {/* band */}
                <path d={`${pathFromPoints(opt, 800, 280).d} L ${pathFromPoints(cons, 800, 280).d.replace(/M /, "L ").split("Q").map((p,i,a) => i===0?p:`L ${p.split(" ").slice(-2).join(" ")}`).join(" ")} Z`} fill="rgba(212,255,63,0.08)" />
                <path d={pathFromPoints(opt, 800, 280).d} fill="none" stroke="#D4FF3F" strokeWidth="2.2" strokeDasharray="5 4" />
                <path d={pathFromPoints(base, 800, 280).d} fill="none" stroke="#5B8CFF" strokeWidth="3" />
                <path d={pathFromPoints(cons, 800, 280).d} fill="none" stroke="rgba(255,255,255,0.5)" strokeWidth="2" strokeDasharray="5 4" />
                {/* "today" line */}
                <line x1="360" x2="360" y1="10" y2="270" stroke="var(--accent)" strokeDasharray="3 4" />
                <text x="366" y="20" fill="var(--accent)" fontFamily="JetBrains Mono" fontSize="11">{L ? "TODAY" : "HOY"}</text>
              </svg>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--font-mono)", fontSize: 10, color: "color-mix(in oklab, var(--paper) 55%, transparent)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4 2026</span><span>Q1</span><span>Q2</span><span>Q3</span><span>Q4 2027</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* By channel */}
      <section>
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow">{L ? "Channel breakdown" : "Desglose por canal"}</div>
              <h2>{L ? "Forecast by channel." : "Forecast por canal."}</h2>
            </div>
            <p>{L ? "Tweak growth assumptions per channel. See the impact on total revenue and cash instantly."
                   : "Ajusta supuestos de crecimiento por canal. Mira el impacto en ingresos y caja al instante."}</p>
          </div>

          <div style={{ border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 2fr", background: "var(--paper-2)", padding: "14px 20px", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--mute)" }}>
              <span>{L ? "Channel" : "Canal"}</span>
              <span>{L ? "Forecast Q4" : "Forecast Q4"}</span>
              <span>{L ? "Growth YoY" : "Crec. YoY"}</span>
              <span>ROAS</span>
              <span>{L ? "Trend" : "Tendencia"}</span>
            </div>
            {channels.map((c, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 2fr", padding: "18px 20px", borderTop: "1px solid var(--line)", alignItems: "center", fontSize: 15 }}>
                <span style={{ fontWeight: 500 }}>{c.n}</span>
                <span className="num">{c.v}</span>
                <span style={{ color: "var(--pos)", fontFamily: "var(--font-mono)" }}>{c.g}</span>
                <span className="num">{c.roas}</span>
                <span><div style={{ height: 32 }}><Sparkline data={genSeries(18, 60, 10, i + 1)} color="#0A1230" /></div></span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section>
        <div className="container">
          <div className="section-head reveal">
            <div><div className="eyebrow">{L ? "What you get" : "Qué incluye"}</div><h2>{L ? "Everything a forecast needs." : "Todo lo que un forecast necesita."}</h2></div>
          </div>
          <div className="feat-grid">
            {[
              { tag: "01", t: L ? "Seasonality-aware" : "Estacionalidad integrada", d: L ? "Model learns from 24 months of your history and adjusts for weekly, monthly and quarterly cycles." : "El modelo aprende de 24 meses de tu historia y ajusta por ciclos semanales, mensuales y trimestrales." },
              { tag: "02", t: L ? "Pipeline-backed" : "Con pipeline", d: L ? "For B2B, pulls your deals, probability and ACV from your CRM and blends with subscription run-rate." : "Para B2B, toma tus deals, probabilidad y ACV del CRM y los combina con run-rate de suscripciones.", style: "accent" },
              { tag: "03", t: L ? "Compare to actuals" : "Compara con real", d: L ? "Every week, see how actuals tracked against each scenario. Auto re-calibrates." : "Cada semana, ve cómo se comportó el real frente a cada escenario. Se recalibra solo." }
            ].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.ForecastPage = ForecastPage;