function Hero({ onPrimaryCTA }) {
  // Animated KPIs (count-up on mount)
  return (
    <section style={{
      background: PALETTE.navy, color: PALETTE.paper,
      position: "relative", overflow: "hidden",
      borderBottom: `1px solid ${PALETTE.ruleInverse}`,
    }}>
      {/* subtle annotated chart-line bg from design system chart style */}
      <div style={{ position: "absolute", inset: 0, opacity: 1 }}>
        <HeroChartPattern/>
      </div>
      {/* radial fade so headline always reads */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 70% 60% at 30% 50%, rgba(10,25,41,0.35) 0%, rgba(10,25,41,0.1) 60%, rgba(10,25,41,0) 100%)",
        pointerEvents: "none",
      }}></div>

      <div style={{
        position: "relative", maxWidth: 1200, margin: "0 auto",
        padding: "84px 32px 0",
      }} className="vst-section">

        {/* Eyebrow row with status dot */}
        <div className="vst-reveal" style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28, flexWrap: "wrap" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999, background: PALETTE.amber500,
              boxShadow: `0 0 0 3px rgba(255,160,0,0.18)`,
            }}/>
            <Eyebrow color={PALETTE.amber500}>VS-Trade Intelligence · Founding Issue · May 2026</Eyebrow>
          </div>
          <span style={{ height: 12, width: 1, background: PALETTE.ruleInverse }}/>
          <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "rgba(250,249,245,.55)", letterSpacing: ".04em" }}>
            R003 · MX-AI-2026-Q1 · LIVE
          </span>
        </div>

        <h1 className="vst-hero-h1 vst-reveal" style={{
          fontFamily: "'Source Serif 4', serif",
          fontSize: 68,
          fontWeight: 600,
          lineHeight: 1.04,
          letterSpacing: "-.025em",
          margin: 0,
          maxWidth: 1080,
          color: PALETTE.paper,
          textWrap: "balance",
          animationDelay: "60ms",
        }}>
          Mexico's AI-compute import flows,{" "}
          <span style={{ color: "rgba(250,249,245,.62)" }}>named entity by named entity.</span>
        </h1>

        <p className="vst-reveal" style={{
          fontFamily: "Inter, sans-serif", fontSize: 18, lineHeight: 1.65,
          color: "rgba(250,249,245,.78)", maxWidth: 680, marginTop: 26, marginBottom: 0,
          animationDelay: "120ms",
        }}>
          Quarterly research reports for boutique consultancies, PE/VC analysts, and corporate
          strategy teams. We disambiguate every importer, footnote every estimate, and disclose
          coverage on every chart.
        </p>

        <div className="vst-reveal" style={{ display: "flex", gap: 16, alignItems: "center", marginTop: 32, flexWrap: "wrap", animationDelay: "180ms" }}>
          <PrimaryButton onClick={onPrimaryCTA}>
            Read free LM3 <span className="vst-link-arrow">→</span>
          </PrimaryButton>
          <a href="#methodology" style={{
            fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 600,
            color: PALETTE.paper, textDecoration: "none", padding: "12px 4px",
            borderBottom: `1px solid rgba(250,249,245,.3)`,
          }}>See methodology <span className="vst-link-arrow">→</span></a>
        </div>

        {/* KPI trio */}
        <div
          className="vst-grid-3"
          style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            marginTop: 80, borderTop: `1px solid ${PALETTE.ruleInverse}`,
            paddingTop: 0, marginBottom: 0,
          }}
        >
          <KpiCell
            label="Mexico AI server imports · 2024 — 2026 YTD"
            value="USD 329.56B"
            sub="Aggregate, customs-declared"
            delim
          />
          <KpiCell
            label="2025 YoY growth"
            value="+64.9%"
            sub="vs 2024 baseline"
            up
            delim
          />
          <KpiCell
            label="Named importers in LM3"
            value="100"
            sub="Disambiguated, ranked"
          />
        </div>

        {/* live ticker */}
        <div style={{
          marginTop: 0, paddingTop: 0,
          borderTop: `1px solid ${PALETTE.ruleInverse}`,
          paddingBottom: 0, paddingTop: 14, paddingBottom: 18,
          display: "flex", alignItems: "center", gap: 16,
          fontFamily: "JetBrains Mono, monospace", fontSize: 11,
          color: "rgba(250,249,245,.55)", letterSpacing: ".02em",
          overflow: "hidden",
        }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
            <span style={{ width: 6, height: 6, background: PALETTE.green, borderRadius: 999 }}/>
            <span style={{ color: "rgba(250,249,245,.78)" }}>LIVE</span>
          </span>
          <div className="scroll-x" style={{ overflow: "hidden", flex: 1 }}>
            <div className="vst-ticker-track" style={{ whiteSpace: "nowrap", display: "inline-flex", gap: 28 }}>
              {[...Array(2)].map((_, k) => (
                <span key={k} style={{ display: "inline-flex", gap: 28 }}>
                  <Tick label="LIVE 42B" value="" up/>
                  <Tick label="HS 8471" value="+12.4%" up/>
                  <Tick label="COMPANY-A" value="USD 0.98B" up/>
                  <Tick label="HS 8517.62" value="+8.1%" up/>
                  <Tick label="COMPANY-B" value="USD 0.74B" up/>
                  <Tick label="COMPANY-C" value="USD 0.61B" up/>
                  <Tick label="COMPANY-D" value="USD 0.55B" up/>
                  <Tick label="COMPANY-E" value="−2.1%" down/>
                  <Tick label="HS 8542.31" value="+22.7%" up/>
                  <Tick label="HS 8542.32" value="+18.3%" up/>
                  <Tick label="COMPANY-F" value="USD 0.49B" up/>
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function KpiCell({ label, value, sub, up, delim }) {
  return (
    <div style={{
      padding: "28px 28px 28px 24px",
      borderRight: delim ? `1px solid ${PALETTE.ruleInverse}` : "none",
      position: "relative",
    }}>
      <div style={{
        position: "absolute", left: 0, top: 32, bottom: 32, width: 2, background: PALETTE.amber500,
      }}/>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 10.5, fontWeight: 600,
        letterSpacing: ".14em", textTransform: "uppercase",
        color: "rgba(250,249,245,.6)", marginBottom: 12,
      }}>{label}</div>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 44, fontWeight: 600,
        fontVariantNumeric: "tabular-nums", letterSpacing: "-.018em",
        color: PALETTE.paper, lineHeight: 1,
      }}>{value}</div>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 13, marginTop: 10,
        color: up ? "#3FD17A" : "rgba(250,249,245,.6)",
        fontVariantNumeric: "tabular-nums",
      }}>{sub}</div>
    </div>
  );
}

function Tick({ label, value, up, down }) {
  const color = up ? "#3FD17A" : down ? "#FF7766" : "rgba(250,249,245,.7)";
  return (
    <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
      <span style={{ color: "rgba(250,249,245,.6)" }}>{label}</span>
      <span style={{ color, fontWeight: 500 }}>{value}</span>
      <span style={{ color: PALETTE.ruleInverse }}>·</span>
    </span>
  );
}

window.Hero = Hero;