// Hero — animated document → extracted data → emission report
function Hero({ t }) {
  const narrow = window.useNarrow(768);
  return (
    <section style={{ position: "relative", overflow: "hidden", paddingTop: narrow ? 24 : 48, paddingBottom: narrow ? 48 : 96 }}>
      {/* faint grid background */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: `linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px)`,
        backgroundSize: "64px 64px",
        maskImage: "radial-gradient(ellipse at 70% 30%, black 0%, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse at 70% 30%, black 0%, transparent 70%)",
        opacity: 0.5,
      }}/>
      <div className="wrap" style={{
        position: "relative", display: "grid",
        gridTemplateColumns: narrow ? "minmax(0, 1fr)" : "1.05fr 1fr",
        gap: narrow ? 28 : 48, alignItems: "center", paddingTop: narrow ? 28 : 64,
      }}>
        <div style={{ minWidth: 0 }}>
          <Kicker>{t.kicker}</Kicker>
          <h1 className="serif" style={{
            fontSize: narrow ? "clamp(38px, 11vw, 56px)" : "clamp(56px, 7.2vw, 104px)",
            lineHeight: 0.96,
            letterSpacing: "-0.025em",
            margin: "20px 0 24px",
            fontWeight: 400,
            textWrap: "balance",
          }}>
            {t.title_a}<br/>
            <span style={{ color: "var(--ink-3)" }}>{t.title_b}</span>{" "}
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t.title_c}</em>
          </h1>
          <p style={{ fontSize: narrow ? 16 : 18, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 520, margin: "0 0 32px", textWrap: "pretty" }}>
            {t.sub}
          </p>
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            <a href="#demo" className="btn">{t.cta} <span aria-hidden>→</span></a>
            <a href="#calc" className="btn btn-ghost">{t.cta_b}</a>
          </div>
          <div style={{ marginTop: 32, paddingTop: 18, borderTop: "1px solid var(--rule-2)", display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", animation: "pulse 1.6s ease-in-out infinite" }}/>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)" }}>{t.meta}</span>
          </div>
          <style>{`@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }`}</style>
        </div>

        {narrow ? (
          <div style={{ width: "100%", minWidth: 0, maxWidth: "100%", height: 310, position: "relative", overflow: "hidden" }}>
            <div style={{
              position: "absolute", left: "50%", top: 0, width: 640, height: 540,
              transform: "translateX(-50%) scale(0.56)", transformOrigin: "top center",
            }}>
              <HeroAnim />
            </div>
          </div>
        ) : (
          <div style={{ minWidth: 0, maxWidth: "100%" }}>
            <HeroAnim />
          </div>
        )}
      </div>
    </section>
  );
}

// Three-stage diorama: invoice → extracted rows → emission report.
// Subtle continuous animation; respects prefers-reduced-motion.
function HeroAnim() {
  const [stage, setStage] = React.useState(0);
  const [hovered, setHovered] = React.useState(null); // 0|1|2|null
  React.useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) { setStage(2); return; }
    if (hovered !== null) return; // pause auto-cycle when hovering
    let i = stage;
    const tick = () => { i = (i + 1) % 3; setStage(i); };
    const id = setInterval(tick, 2400);
    return () => clearInterval(id);
  }, [hovered]);

  const activeIndex = hovered !== null ? hovered : stage;

  return (
    <div style={{
      position: "relative",
      height: 540,
      display: "grid",
      placeItems: "center",
    }}>
      {/* Connectors */}
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 1 }}>
        <defs>
          <linearGradient id="conn" x1="0" x2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0"/>
            <stop offset="50%" stopColor="var(--accent)" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
          </linearGradient>
        </defs>
      </svg>

      {/* Document card — back-left */}
      <div onMouseEnter={() => setHovered(0)} onMouseLeave={() => setHovered(null)} style={{ position: "absolute", inset: 0 }}>
        <DocCard active={activeIndex === 0} />
      </div>
      <div onMouseEnter={() => setHovered(1)} onMouseLeave={() => setHovered(null)} style={{ position: "absolute", inset: 0 }}>
        <ExtractCard active={activeIndex === 1} />
      </div>
      <div onMouseEnter={() => setHovered(2)} onMouseLeave={() => setHovered(null)} style={{ position: "absolute", inset: 0 }}>
        <ReportCard active={activeIndex === 2} />
      </div>
    </div>
  );
}

function _UnusedHeroAnimRest() { return null; }

function CardShell({ children, style, active, label }) {
  return (
    <div style={{
      position: "absolute",
      background: "var(--paper)",
      border: "1px solid var(--rule)",
      borderRadius: 10,
      boxShadow: active
        ? "0 30px 60px -20px rgba(20,20,15,0.25), 0 8px 24px -8px rgba(20,20,15,0.18)"
        : "0 12px 30px -10px rgba(20,20,15,0.12)",
      transition: "transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .8s, border-color .4s",
      borderColor: active ? "var(--ink-2)" : "var(--rule)",
      ...style,
    }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "9px 12px", borderBottom: "1px solid var(--rule-2)",
        fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.08em",
        textTransform: "uppercase", color: "var(--ink-3)",
      }}>
        <span>{label}</span>
        <span style={{ display: "flex", gap: 4 }}>
          <i style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rule)" }}/>
          <i style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--rule)" }}/>
          <i style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "var(--accent)" : "var(--rule)" }}/>
        </span>
      </div>
      {children}
    </div>
  );
}

function DocCard({ active }) {
  return (
    <CardShell active={active} label="ENERGY-INVOICE-Q3.PDF · ÖRNEK"
      style={{
        width: 280, top: 30, left: "0%",
        transform: active ? "translate(0, 0) rotate(-3deg)" : "translate(-12px, 6px) rotate(-5deg)",
        zIndex: active ? 3 : 1,
      }}>
      <div style={{ padding: "14px 16px", fontSize: 11, color: "var(--ink-2)", lineHeight: 1.6 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
          <div style={{ fontFamily: "Inter", fontWeight: 600, fontSize: 13, color: "var(--ink)" }}>
            [ENERJİ TEDARİKÇİSİ] · Sanayi Tarifesi
          </div>
          <span className="mono" style={{ fontSize: 8.5, color: "var(--ink-4)", letterSpacing: "0.1em", border: "1px solid var(--rule)", padding: "1px 4px", borderRadius: 2 }}>ÖRNEK</span>
        </div>
        <Row label="Müşteri No" v="304-9928"/>
        <Row label="Dönem" v="01.07.2025 – 30.09.2025"/>
        <Row label="Tüketim" v={<Highlight active={active}>2.847.392 kWh</Highlight>}/>
        <Row label="Birim Fiyat" v="₺ 2,184/kWh"/>
        <Row label="Tutar" v="₺ 6.220.064"/>
        <div style={{ height: 1, background: "var(--rule-2)", margin: "8px 0" }}/>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {Array.from({ length: 5 }).map((_, i) => (
            <span key={i} style={{ height: 6, width: 30 + (i % 3) * 20, background: "var(--rule-2)", borderRadius: 2 }}/>
          ))}
        </div>
      </div>
    </CardShell>
  );
}

function Row({ label, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "3px 0" }}>
      <span style={{ color: "var(--ink-3)" }}>{label}</span>
      <span style={{ fontFamily: "JetBrains Mono, monospace", color: "var(--ink)" }}>{v}</span>
    </div>
  );
}

function Highlight({ active, children }) {
  return (
    <span style={{
      background: active ? "var(--accent-soft)" : "transparent",
      outline: active ? "1px solid var(--accent)" : "1px solid transparent",
      outlineOffset: 1,
      color: active ? "var(--accent)" : "inherit",
      padding: "0 4px",
      borderRadius: 2,
      transition: "background .4s, outline-color .4s, color .4s",
    }}>{children}</span>
  );
}

function ExtractCard({ active }) {
  return (
    <CardShell active={active} label="GRENDEX · EXTRACTION QUEUE"
      style={{
        width: 320, top: 130, left: "30%",
        transform: active ? "translate(0,0) rotate(0deg)" : "translate(0,4px) rotate(-1deg)",
        zIndex: active ? 3 : 2,
      }}>
      <div style={{ padding: "12px 14px" }}>
        {[
          { f: "kWh consumption", val: "2,847,392", conf: 99, src: "p.4 · table 2" },
          { f: "Period start",    val: "2025-07-01", conf: 99, src: "p.1 · header" },
          { f: "Period end",      val: "2025-09-30", conf: 99, src: "p.1 · header" },
          { f: "Facility ID",     val: "TR-KOC-0042", conf: 87, src: "p.1 · footer", review: true },
          { f: "Grid factor",     val: "0.4421 kgCO₂/kWh", conf: 100, src: "TEİAŞ 2024" },
        ].map((r, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "1fr auto auto",
            gap: 10, padding: "7px 0",
            borderBottom: i < 4 ? "1px solid var(--rule-2)" : "none",
            fontSize: 11, alignItems: "center",
          }}>
            <div>
              <div style={{ color: "var(--ink-2)", fontFamily: "Inter", fontWeight: 500 }}>{r.f}</div>
              <div className="mono" style={{ color: "var(--ink-4)", fontSize: 9.5, marginTop: 2 }}>{r.src}</div>
            </div>
            <div className="mono" style={{ color: "var(--ink)" }}>{r.val}</div>
            <div className="mono" style={{
              fontSize: 10,
              color: r.review ? "var(--warn)" : (r.conf > 95 ? "var(--ink-3)" : "var(--warn)"),
              minWidth: 36, textAlign: "right",
            }}>
              {r.review ? "REVIEW" : `${r.conf}%`}
            </div>
          </div>
        ))}
        {/* compute beam when active */}
        {active && (
          <div style={{
            marginTop: 8, height: 4, borderRadius: 2,
            background: "var(--rule-2)", overflow: "hidden",
          }}>
            <div style={{
              height: "100%", width: "40%", background: "var(--accent)",
              animation: "scan 2.2s ease-in-out infinite",
            }}/>
          </div>
        )}
        <style>{`
          @keyframes scan { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
          @keyframes bbox { 0% { opacity: 0; transform: scale(.94) } 100% { opacity: 1; transform: scale(1) } }
        `}</style>
      </div>
    </CardShell>
  );
}

function ReportCard({ active }) {
  return (
    <CardShell active={active} label="TSRS · METRICS & TARGETS · Q3 2025"
      style={{
        width: 300, bottom: 12, right: "0%",
        transform: active ? "translate(0,0) rotate(2deg)" : "translate(12px, 8px) rotate(4deg)",
        zIndex: active ? 3 : 1,
      }}>
      <div style={{ padding: "14px 16px" }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase" }}>Scope 2 · Location-based</div>
        <div className="serif" style={{ fontSize: 38, lineHeight: 1, margin: "4px 0 2px", letterSpacing: "-0.02em" }}>
          1.258,9 <span style={{ fontSize: 14, color: "var(--ink-3)" }}>tCO₂e</span>
        </div>
        <div style={{ fontSize: 11, color: "var(--ink-3)" }}>Q3 2025 · 1 facility · location-based</div>

        {/* mini bars */}
        <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 60, marginTop: 16 }}>
          {[0.3, 0.45, 0.4, 0.6, 0.55, 0.7, 0.8, 0.65, 0.75, 0.9, 0.85, 1].map((h, i) => (
            <div key={i} style={{
              flex: 1, height: `${h * 100}%`,
              background: i === 8 ? "var(--accent)" : "var(--rule)",
              borderRadius: 1,
              animation: active ? `grow 1.2s ${i * 0.04}s both ease-out` : "none",
              transformOrigin: "bottom",
            }}/>
          ))}
        </div>
        <div className="mono" style={{ fontSize: 9, color: "var(--ink-4)", display: "flex", justifyContent: "space-between", marginTop: 6 }}>
          <span>OCA</span><span>EYL '25</span>
        </div>

        {/* footer ribbon */}
        <div style={{
          marginTop: 14, padding: "8px 10px",
          background: "var(--bg-2)", borderRadius: 6,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 10.5,
        }}>
          <span className="mono" style={{ color: "var(--ink-3)", letterSpacing: "0.06em" }}>TSRS-2 · 29-32(c)</span>
          <span className="mono" style={{ color: "var(--accent)" }}>READY ✓</span>
        </div>
        <style>{`@keyframes grow { from { transform: scaleY(0) } to { transform: scaleY(1) } }`}</style>
      </div>
    </CardShell>
  );
}

window.Hero = Hero;
