// pages/hero-variants.jsx — three distinct hero treatments

// ─── A: EDITORIAL ──────────────────────────────────────────────
// Brand-faithful: gigantic headline broken across lines, with
// circular image-cutout pills inline. Subtle parallax on scroll.

function HeroEditorial() {
  const heroRef = React.useRef(null);
  const [scrollY, setScrollY] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const motionOn = document.documentElement.getAttribute('data-motion') !== '0';
  const p = motionOn ? Math.min(scrollY * 0.18, 60) : 0;

  return (
    <section ref={heroRef} style={{ paddingTop: 64, paddingBottom: 100, position: "relative", overflow: "hidden" }}>
      <div className="wrap">
        {/* avatar + meta */}
        <div style={{
          display: "flex", alignItems: "center", gap: 14, marginBottom: 36,
          justifyContent: "center"
        }} className="reveal">
          <AvatarStack />
          <span style={{ color: "var(--ink-3)", fontSize: 15 }}>
            Built for owners who are doing everything.
          </span>
        </div>

        {/* Huge editorial statement */}
        <h1 className="display" style={{
          margin: "0 auto", textAlign: "center", maxWidth: 1180,
          display: "flex", flexDirection: "column", alignItems: "center",
          gap: "0.04em", lineHeight: 0.98,
          fontSize: "clamp(40px, 6.4vw, 96px)",
          transform: motionOn ? `translateY(${-p * 0.2}px)` : "none"
        }}>
          <span className="hl-line reveal" style={{
            display: "flex", alignItems: "center", justifyContent: "center",
            gap: "0.22em", flexWrap: "wrap"
          }}>
            <span>Your</span>
            <ImgPill label="team" tint="orange" />
            <span>should only do the work</span>
          </span>
          <span className="hl-line reveal" style={{
            "--rd": ".08s",
            display: "flex", alignItems: "center", justifyContent: "center",
            gap: "0.22em", flexWrap: "wrap"
          }}>
            <span style={{ color: "var(--ink-4)" }}>that grows your</span>
            <ImgPill label="business" tint="teal" />
          </span>
          <span className="hl-line reveal" style={{
            "--rd": ".16s",
            display: "flex", alignItems: "center", justifyContent: "center",
            gap: "0.22em", flexWrap: "wrap"
          }}>
            <span>We automate</span>
            <span className="serif-i" style={{ fontWeight: 400 }}>everything</span>
            <ImgPill label="else" tint="ink" />
          </span>
        </h1>

        <p className="reveal" style={{
          "--rd": ".24s",
          textAlign: "center", maxWidth: 620, margin: "44px auto 0",
          color: "var(--ink-3)", fontSize: 19, lineHeight: 1.5
        }}>
          Still copy-pasting data, chasing leads manually, and doing the same task for the 40th time this&nbsp;month? We build the system that "<span className="serif-i" style={{ fontSize: 21 }}>kills it permanently</span>" — and you never touch it again.
        </p>

        <div className="reveal" style={{
          "--rd": ".32s",
          display: "flex", gap: 14, justifyContent: "center", marginTop: 36
        }}>
          <a href="#book" className="btn">
            Book a free assessment <Arrow />
          </a>
          <a href="workflows.html" className="btn btn-ghost">
            See our workflows
          </a>
        </div>

        <div className="reveal" style={{
          "--rd": ".36s",
          textAlign: "center", marginTop: 22,
          color: "var(--ink-3)", fontSize: 14, lineHeight: 1.5
        }}>
          80+ Australian businesses · All automations live within 3&nbsp;weeks.
        </div>

        {/* meta row */}
        <div className="reveal" style={{
          "--rd": ".4s",
          marginTop: 60, display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)", gap: 24,
          borderTop: "1px solid var(--line)", paddingTop: 24
        }}>
          {[
            ["80+", "automations shipped"],
            ["9 min", "average setup per workflow node"],
            ["12 hrs", "saved per week, per client"],
            ["97%", "client satisfaction rate"]
          ].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em" }}>{n}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ImgPill({ label, tint }) {
  // placeholder circular image — striped SVG with mono label
  const tints = {
    orange: { bg: "var(--accent)", fg: "#fff" },
    teal: { bg: "var(--teal)", fg: "var(--bg)" },
    ink: { bg: "var(--ink)", fg: "var(--bg)" }
  };
  const c = tints[tint] || tints.orange;
  return (
    <span style={{
      display: "inline-grid", placeItems: "center", flexShrink: 0,
      width: "0.74em", height: "0.74em", borderRadius: "50%",
      background: c.bg, color: c.fg,
      overflow: "hidden", position: "relative",
      boxShadow: "0 8px 28px color-mix(in oklab, currentColor 30%, transparent)"
    }} aria-hidden="true">
      <svg width="100%" height="100%" viewBox="0 0 100 100" style={{ position: "absolute", inset: 0, opacity: 0.18 }}>
        <defs>
          <pattern id={`stripe-${label}`} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
            <rect width="2" height="6" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100" height="100" fill={`url(#stripe-${label})`} />
      </svg>
      <span style={{
        position: "relative", zIndex: 1,
        fontFamily: "var(--f-mono)", fontSize: "0.16em", fontWeight: 500,
        letterSpacing: "0.05em", textTransform: "uppercase"
      }}>{label}</span>
    </span>
  );
}

function AvatarStack() {
  const tones = ["#E8D5C4", "#B8A99A", "#8B7E70", "#4A4039"];
  return (
    <div style={{ display: "flex", marginLeft: 6 }}>
      {tones.map((c, i) => (
        <div key={i} style={{
          width: 34, height: 34, borderRadius: "50%",
          background: `linear-gradient(135deg, ${c}, color-mix(in oklab, ${c} 70%, #000))`,
          border: "2px solid var(--bg)",
          marginLeft: i === 0 ? 0 : -10,
          position: "relative"
        }}>
          <div style={{
            position: "absolute", inset: 6, borderRadius: "50%",
            background: `radial-gradient(circle at 35% 30%, color-mix(in oklab, ${c} 60%, #fff) 0%, ${c} 50%, color-mix(in oklab, ${c} 60%, #000) 100%)`
          }}></div>
        </div>
      ))}
    </div>
  );
}

// ─── B: WORKFLOW MESH ──────────────────────────────────────────
// Animated SVG constellation of 16 workflow nodes with pulsing data flow.

function HeroMesh() {
  return (
    <section style={{ paddingTop: 56, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.1fr",
          gap: 60, alignItems: "center"
        }}>
          {/* Left: statement */}
          <div className="reveal">
            <div className="kicker" style={{ marginBottom: 24 }}>
              <span style={{
                display: "inline-block", width: 6, height: 6, borderRadius: "50%",
                background: "var(--accent)", marginRight: 8, verticalAlign: "middle"
              }}></span>
              16 workflows · live constellation
            </div>
            <h1 className="display" style={{ margin: 0, fontSize: "clamp(48px, 6.4vw, 96px)" }}>
              Every Tuesday, your team does <span className="serif-i" style={{ color: "var(--accent)" }}>84 things</span> a robot could&nbsp;do.
            </h1>
            <p style={{ marginTop: 30, fontSize: 19, color: "var(--ink-3)", lineHeight: 1.5, maxWidth: 520 }}>
              We map the workflows your business has accidentally invented, then
              quietly retire the ones nobody actually wants to do.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
              <a href="#book" className="btn">
                Book a free assessment <Arrow />
              </a>
              <a href="workflows.html" className="btn btn-ghost">
                Browse all 16
              </a>
            </div>
          </div>

          {/* Right: animated mesh */}
          <div style={{ position: "relative", minHeight: 540 }}>
            <WorkflowMesh />
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkflowMesh() {
  // Polar layout: central "Owner" node, ring of 16 workflow nodes
  const N = 16;
  const radius = 220;
  const cx = 280, cy = 280;
  const wf = window.WHITEN_DATA.workflows.slice(0, N);
  const pts = wf.map((w, i) => {
    const a = (i / N) * Math.PI * 2 - Math.PI / 2;
    return { x: cx + Math.cos(a) * radius, y: cy + Math.sin(a) * radius, w };
  });

  const motionOn = document.documentElement.getAttribute('data-motion') !== '0';
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!motionOn) return;
    let raf;
    const loop = () => { setTick(t => t + 1); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [motionOn]);

  const [hovered, setHovered] = React.useState(null);

  return (
    <div style={{ position: "relative", width: "100%", aspectRatio: "1 / 1", maxWidth: 560, margin: "0 auto" }}>
      <svg viewBox="0 0 560 560" style={{ width: "100%", height: "100%", overflow: "visible" }}>
        <defs>
          <radialGradient id="hub-glow">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity=".25" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </radialGradient>
        </defs>

        {/* faint backdrop rings */}
        {[80, 140, 200, 260].map(r => (
          <circle key={r} cx={cx} cy={cy} r={r} fill="none"
            stroke="var(--line)" strokeWidth="1" strokeDasharray="2 4" opacity=".5" />
        ))}

        {/* glow under hub */}
        <circle cx={cx} cy={cy} r="180" fill="url(#hub-glow)" />

        {/* lines from hub to each node */}
        {pts.map((p, i) => (
          <line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y}
            stroke={hovered === i ? "var(--accent)" : "var(--line)"}
            strokeWidth={hovered === i ? 1.5 : 1}
            opacity={hovered === null || hovered === i ? 1 : 0.25}
          />
        ))}

        {/* traveling particles */}
        {motionOn && pts.map((p, i) => {
          const phase = ((tick * 0.5 + i * 8) % 100) / 100;
          const x = cx + (p.x - cx) * phase;
          const y = cy + (p.y - cy) * phase;
          return (
            <circle key={`p-${i}`} cx={x} cy={y} r="2.5"
              fill="var(--accent)"
              opacity={1 - phase * 0.9} />
          );
        })}

        {/* hub */}
        <circle cx={cx} cy={cy} r="42" fill="var(--ink)" />
        <circle cx={cx} cy={cy} r="42" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity=".4">
          {motionOn && <animate attributeName="r" values="42;60;42" dur="3s" repeatCount="indefinite" />}
          {motionOn && <animate attributeName="opacity" values=".5;0;.5" dur="3s" repeatCount="indefinite" />}
        </circle>
        <text x={cx} y={cy + 4} textAnchor="middle" fill="var(--bg)"
          fontSize="11" fontFamily="var(--f-mono)" fontWeight="500">YOU</text>

        {/* nodes */}
        {pts.map((p, i) => {
          const isHover = hovered === i;
          return (
            <g key={i}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{ cursor: "pointer" }}>
              <circle cx={p.x} cy={p.y} r={isHover ? 14 : 10}
                fill={isHover ? "var(--accent)" : "var(--bg-elev)"}
                stroke={isHover ? "var(--accent)" : "var(--ink-4)"}
                strokeWidth="1.5"
                style={{ transition: "all .2s" }} />
              <text x={p.x} y={p.y + 3} textAnchor="middle"
                fontSize="9" fontFamily="var(--f-mono)"
                fill={isHover ? "#fff" : "var(--ink-3)"}>
                {p.w.num}
              </text>
              {isHover && (
                <g>
                  <rect x={p.x - 90} y={p.y + 18} width="180" height="48" rx="8"
                    fill="var(--ink)" />
                  <text x={p.x} y={p.y + 36} textAnchor="middle" fontSize="11" fontWeight="600" fill="var(--bg)">
                    {p.w.name}
                  </text>
                  <text x={p.x} y={p.y + 52} textAnchor="middle" fontSize="10" fontFamily="var(--f-mono)"
                    fill="color-mix(in oklab, var(--bg) 60%, transparent)">
                    {p.w.saves}
                  </text>
                </g>
              )}
            </g>
          );
        })}
      </svg>
    </div>
  );
}

// ─── C: TERMINAL ───────────────────────────────────────────────
// Live agent terminal feed beside an editorial serif statement.

function HeroTerminal() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "1.05fr 1fr",
          gap: 60, alignItems: "center"
        }}>
          <div className="reveal">
            <div className="kicker" style={{ marginBottom: 28 }}>
              <span style={{
                display: "inline-block", width: 6, height: 6, borderRadius: "50%",
                background: "#22c55e", marginRight: 8, verticalAlign: "middle",
                boxShadow: "0 0 8px #22c55e"
              }}></span>
              03 agents online · 47 workflows running
            </div>
            <h1 className="display" style={{ margin: 0, fontSize: "clamp(56px, 7vw, 112px)" }}>
              We retire <br />
              <span className="serif-i" style={{ fontWeight: 400 }}>the busywork.</span><br />
              <span style={{ color: "var(--accent)" }}>Quietly.</span>
            </h1>
            <p style={{ marginTop: 30, fontSize: 19, color: "var(--ink-3)", lineHeight: 1.5, maxWidth: 480 }}>
              Bespoke AI &amp; automation for mid-market ops teams.
              Agents that handle the back-office while your people do the work that compounds.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
              <a href="#book" className="btn">
                Book a free assessment <Arrow />
              </a>
              <a href="how-it-works.html" className="btn btn-ghost">
                How it works
              </a>
            </div>
          </div>

          <div className="reveal" style={{ "--rd": ".15s" }}>
            <AgentTerminal />
          </div>
        </div>
      </div>
    </section>
  );
}

function AgentTerminal() {
  const lines = [
    { t: "13:42:08", kind: "sys",   text: "agent.lead-triage running on incoming lead #4821" },
    { t: "13:42:09", kind: "think", text: "score: 87 / industry: SaaS / size: 80–200" },
    { t: "13:42:09", kind: "act",   text: "→ enriched via Clearbit + Apollo" },
    { t: "13:42:10", kind: "act",   text: "→ routed to acct-exec ::marc.l" },
    { t: "13:42:10", kind: "out",   text: "draft reply queued — 3 sentences, calm tone" },
    { t: "13:43:11", kind: "sys",   text: "agent.ar-follow-up sweeping Xero" },
    { t: "13:43:12", kind: "think", text: "4 invoices past 30d · risk: low-2" },
    { t: "13:43:12", kind: "act",   text: "→ 4 nudges scheduled (Tuesday 10am)" },
    { t: "13:44:02", kind: "sys",   text: "agent.competitor-watch · weekly digest ready" },
    { t: "13:44:02", kind: "out",   text: "posted to #strat-mon-am · 6 items, 1 flagged" }
  ];

  const motionOn = document.documentElement.getAttribute('data-motion') !== '0';
  const [shown, setShown] = React.useState(motionOn ? 0 : lines.length);
  React.useEffect(() => {
    if (!motionOn) return;
    setShown(0);
    let i = 0;
    const id = setInterval(() => {
      i++;
      setShown(i);
      if (i >= lines.length) clearInterval(id);
    }, 420);
    return () => clearInterval(id);
  }, [motionOn]);

  const kindColor = {
    sys: "var(--ink-4)",
    think: "var(--teal)",
    act: "var(--ink-2)",
    out: "var(--accent)"
  };

  return (
    <div style={{
      background: "var(--ink)", color: "var(--bg)",
      borderRadius: 18, padding: 0, overflow: "hidden",
      boxShadow: "0 30px 80px color-mix(in oklab, var(--ink) 30%, transparent), 0 1px 0 color-mix(in oklab, var(--bg) 20%, transparent) inset",
      fontFamily: "var(--f-mono)", fontSize: 13
    }}>
      {/* header */}
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "12px 16px",
        borderBottom: "1px solid color-mix(in oklab, var(--bg) 12%, transparent)"
      }}>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ff5f57" }}></span>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#febc2e" }}></span>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#28c840" }}></span>
        <span style={{ marginLeft: 12, color: "color-mix(in oklab, var(--bg) 50%, transparent)", fontSize: 12 }}>
          whitenapp · agents — live
        </span>
        <span style={{ marginLeft: "auto", color: "#22c55e", fontSize: 11, letterSpacing: ".1em" }}>● LIVE</span>
      </div>

      {/* feed */}
      <div style={{ padding: "18px 18px 22px", display: "flex", flexDirection: "column", gap: 8, minHeight: 380 }}>
        {lines.slice(0, shown).map((ln, i) => (
          <div key={i} style={{ display: "flex", gap: 12, opacity: motionOn ? 0 : 1, animation: motionOn ? "tl-in .4s ease forwards" : "none" }}>
            <span style={{ color: "color-mix(in oklab, var(--bg) 35%, transparent)", flexShrink: 0 }}>{ln.t}</span>
            <span style={{ color: kindColor[ln.kind], textTransform: "uppercase", fontSize: 11, fontWeight: 600, flexShrink: 0, width: 50 }}>{ln.kind}</span>
            <span style={{ color: "color-mix(in oklab, var(--bg) 92%, transparent)" }}>{ln.text}</span>
          </div>
        ))}
        {motionOn && shown < lines.length && (
          <div style={{ width: 8, height: 14, background: "var(--accent)", animation: "blink 1s steps(2) infinite" }}></div>
        )}
      </div>

      <style>{`
        @keyframes tl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
        @keyframes blink { 50% { opacity: 0; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { HeroEditorial, HeroMesh, HeroTerminal });