/* global React, Sparkline, useTicker, fmt, usd */

/* HEXA-V — Direction A: HERO
   Asymmetric layout: huge manifesto type on left, dense live console on right */

const A_Hero = () => {
  const revenue = useTicker(1284512, 0.004, 1400);
  const acos = useTicker(11.4, 0.01, 1700);
  const orders = useTicker(8421, 0.006, 1900);

  // sparkline data
  const sparkA = React.useMemo(() => Array.from({ length: 40 }, (_, i) => 50 + Math.sin(i / 3) * 18 + Math.random() * 8), []);
  const sparkB = React.useMemo(() => Array.from({ length: 40 }, (_, i) => 50 + Math.cos(i / 4) * 22 + Math.random() * 6), []);
  const sparkC = React.useMemo(() => Array.from({ length: 40 }, (_, i) => 30 + i * 0.6 + Math.random() * 4), []);

  return (
    <div style={{ position: "relative", overflow: "hidden" }}>
      {/* hex pattern bg */}
      <div className="hexpattern" style={{ position: "absolute", inset: 0, opacity: 0.5 }} />
      <div className="scanlines" style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />

      {/* Blob morph glows */}
      <div className="blob blob-accent" style={{ position: "absolute", right: -80, top: -80, width: 520, height: 520 }} />
      <div className="blob blob-lava"   style={{ position: "absolute", left: "20%", bottom: -120, width: 380, height: 380, animationDelay: "-3s" }} />

      {/* money drift — subtle */}
      <MoneyRain count={6} opacity={0.28} />

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 0 }} className="hexa-hero-grid">
        {/* LEFT — manifesto */}
        <div style={{ padding: "80px 32px 64px 32px", borderRight: "1px solid var(--line)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }} className="slide-up">
            <span className="tag"><span className="dot"></span>OPS PLATFORM · 2026</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--fg-2)", letterSpacing: "0.14em" }}>// HEXA-V/MK-IV</span>
          </div>

          <h1 className="display hexa-hero-h1" style={{
            fontSize: 88, lineHeight: 0.95, letterSpacing: "-0.035em",
            margin: "44px 0 0 0", fontWeight: 700, textWrap: "balance"
          }}>
            <span className="slide-up d1" style={{ display: "block" }}>Stop leaking</span>
            <span className="slide-up d2" style={{ display: "block" }}>money to your</span>
            <span className="slide-up d3" style={{ display: "block", color: "#2563eb" }}>marketplace</span><span className="slide-up d3" style={{ display: "inline-block" }}>.</span>
          </h1>

          <p className="slide-up d4" style={{ fontSize: 17, lineHeight: 1.55, color: "var(--fg-1)", maxWidth: 520, marginTop: 32 }}>
            HEXA-V is the operating system for serious marketplace sellers. PPC agents claw back ad spend, Profit OS reconciles the fourteen places fees hide, and Sales Intel defends every dollar of revenue — one console, no spreadsheets, no Tuesday-night fire drills.
          </p>

          <div className="slide-up d5" style={{ display: "flex", gap: 12, marginTop: 40 }}>
            <a href={(window.HEXA || {}).SIGNUP_URL || "#"} className="btn btn-primary btn-block" style={{ textDecoration: "none", backgroundColor: "#2563eb" }}>Deploy in 6 minutes →</a>
            <a href={(window.HEXA || {}).WATCH_URL || "#watch-demo"} className="btn btn-block" style={{ textDecoration: "none" }}>▶ Watch Demo</a>
          </div>

          {/* trust strip */}
          <div className="slide-up d5 hexa-hero-trust" style={{ marginTop: 56, display: "flex", gap: 36, alignItems: "center" }}>
            <div>
              <div className="display" style={{ fontSize: 28, fontWeight: 700, color: "var(--good)" }}>$184M+</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--fg-2)", letterSpacing: "0.14em", textTransform: "uppercase" }}>recovered for tenants</div>
            </div>
            <div style={{ width: 1, height: 36, background: "var(--line)" }} />
            <div>
              <div className="display" style={{ fontSize: 28, fontWeight: 700 }}>$2.4B</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--fg-2)", letterSpacing: "0.14em", textTransform: "uppercase" }}>GMV under management</div>
            </div>
            <div style={{ width: 1, height: 36, background: "var(--line)" }} />
            <div>
              <div className="display" style={{ fontSize: 28, fontWeight: 700 }}>−34%</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--fg-2)", letterSpacing: "0.14em", textTransform: "uppercase" }}>median ACoS, 60d</div>
            </div>
          </div>
        </div>

        {/* RIGHT — live console */}
        <div style={{ padding: "48px 32px", display: "flex", flexDirection: "column", gap: 16 }} className="hexa-hero-right burst burst-2">
          {/* console header */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--fg-2)" }}>// COMMAND BRIDGE · DEMO_TENANT</span>
            <div style={{ display: "flex", gap: 8 }}>
              <span className="tag"><span className="dot"></span>LIVE</span>
              <span className="tag">2.4s LAG</span>
            </div>
          </div>

          {/* big stat tiles */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
            <A_Tile label="GROSS / 24H" value={usd(revenue)} delta="+8.4%" spark={sparkA} good />
            <A_Tile label="BLENDED ACoS" value={acos.toFixed(2) + "%"} delta="−2.1pp" spark={sparkB} good />
            <A_Tile label="UNITS OUT" value={fmt(Math.round(orders))} delta="+312" spark={sparkC} good />
          </div>

          {/* agent feed */}
          <div className="card" style={{ padding: 0 }}>
            <span className="card-corner tl"></span>
            <span className="card-corner tr"></span>
            <span className="card-corner bl"></span>
            <span className="card-corner br"></span>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 16px", borderBottom: "1px solid var(--line)" }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--fg-2)" }}>AGENT FEED · LAST 18 MIN</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>● 7 ACTIONS</span>
            </div>
            <div className="mono" style={{ fontSize: 12, padding: 16, lineHeight: 1.85, color: "var(--fg-1)" }}>
              <A_LogLine t="14:02:11" tag="PPC" text={<>raised bid <b>SKU/PYRA-019</b> · keyword <i>“insulated bottle 32oz”</i> · <span style={{ color: "var(--accent)" }}>+$0.18 → $1.42</span></>} />
              <A_LogLine t="14:01:54" tag="INV" text={<>flagged <b>SKU/NRD-2204</b> · 9 days of cover · auto-PO drafted</>} />
              <A_LogLine t="14:00:08" tag="PROFIT" text={<>negative margin alert · <b>SKU/RNN-088</b> · fulfillment fee +$0.43 since 12-May</>} />
              <A_LogLine t="13:58:30" tag="PPC" text={<>paused 14 keywords · ACoS &gt; 64% · campaign <i>SP/Auto/PYRA</i></>} />
              <A_LogLine t="13:55:02" tag="SALES" text={<>Featured Offer recovered · <b>SKU/OAK-441</b> · 22m of loss</>} />
              <A_LogLine t="13:52:41" tag="PPC" text={<>negated 6 search terms · saving est. <span style={{ color: "var(--accent)" }}>$184 / wk</span></>} />
              <A_LogLine t="13:50:18" tag="OPS" text={<>nightly forecast complete · 14 SKUs on watch</>} />
            </div>
          </div>
        </div>
      </div>
    </div>);

};

const A_Tile = ({ label, value, delta, spark, good }) =>
<div className="card" style={{ padding: 16 }}>
    <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--fg-2)" }}>{label}</div>
    <div className="display flick" style={{ fontSize: 30, fontWeight: 700, marginTop: 6, letterSpacing: "-0.02em" }}>{value}</div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 6 }}>
      <span className="mono" style={{ ...{ fontSize: 11, color: good ? "var(--good)" : "var(--bad)" }, color: "rgb(197, 119, 34)" }}>{delta}</span>
      <Sparkline values={spark} w={80} h={22} />
    </div>
  </div>;


const A_LogLine = ({ t, tag, text }) => {
  const tagColors = { PPC: "var(--accent)", INV: "#6cf", PROFIT: "#f8d56e", SALES: "var(--good)", OPS: "var(--fg-2)" };
  return (
    <div style={{ display: "grid", gridTemplateColumns: "62px 70px 1fr", gap: 12 }}>
      <span style={{ color: "var(--fg-3)" }}>{t}</span>
      <span style={{ color: tagColors[tag] || "var(--fg-2)" }}>[{tag}]</span>
      <span>{text}</span>
    </div>);

};

window.A_Hero = A_Hero;