// ============================================================
// HERO — asymmetric split: copy + live council terminal on the
// left, 3D kintsugi shard on the right. Entrance is a staggered
// cascade; the terminal types a council deliberation on loop.
// ============================================================

function CouncilTerminal({ theme }) {
  const { TypeLoop } = window;
  const lines = [
    "council.run(rubric_v4, scenario_112)",
    "claude-fable-5    4.6  reliable",
    "gpt-5.2           4.4  reliable",
    "gemini-3.1-pro    3.8  divergent — deliberating…",
    "consensus: 4.3  ·  evidence logged",
  ];
  return (
    <div
      style={{
        marginTop: 44,
        maxWidth: 480,
        borderRadius: 14,
        border: `1px solid ${theme.cardBorder}`,
        background: theme.dark ? "rgba(4,7,14,0.72)" : "rgba(250,246,234,0.8)",
        backdropFilter: "blur(10px)",
        WebkitBackdropFilter: "blur(10px)",
        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.07)",
        overflow: "hidden",
        fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          padding: "10px 16px",
          borderBottom: `1px solid ${theme.cardBorder}`,
          fontSize: 10.5,
          letterSpacing: 1.4,
          textTransform: "uppercase",
          color: theme.mute,
          fontWeight: 600,
        }}
      >
        <span
          style={{
            width: 7,
            height: 7,
            borderRadius: "50%",
            background: theme.success,
            animation: window.motionAllowed() ? "sv-breathe 2.4s ease-in-out infinite" : "none",
          }}
        />
        AI Council · live deliberation
      </div>
      <div style={{ padding: "16px 18px", fontSize: 13, lineHeight: 1.7, color: theme.sub, minHeight: 56 }}>
        <span style={{ color: theme.accent, userSelect: "none" }}>$ </span>
        <TypeLoop lines={lines} style={{ color: theme.ink }} />
      </div>
    </div>
  );
}

function Hero() {
  const theme = window.useActiveTheme();
  const [prefs] = window.usePrefs();
  const motion = !prefs.dyslexia;
  const { isMobile } = window.useViewport();
  const { KintsugiMark, SeamBackdrop, ShardHero3D, Reveal } = window;
  const Mark = ShardHero3D && window.THREE && motion ? ShardHero3D : KintsugiMark;

  return (
    <section
      id="top"
      style={{
        position: "relative",
        minHeight: isMobile ? "auto" : "100dvh",
        // Alpha gradient (not the opaque theme.heroBg) so the fixed
        // ShardField three.js backdrop shows through the hero.
        background: theme.dark
          ? "radial-gradient(ellipse at 30% 20%, rgba(26,34,68,0.85) 0%, rgba(10,16,32,0.55) 55%, rgba(6,9,18,0.2) 100%)"
          : "radial-gradient(ellipse at 30% 20%, rgba(251,245,230,0.9) 0%, rgba(243,234,208,0.7) 55%, rgba(234,217,168,0.4) 100%)",
        color: theme.ink,
        overflow: "hidden",
        paddingTop: isMobile ? 86 : 96,
      }}
    >
      <SeamBackdrop density={8} opacity={0.05} />

      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)",
          backgroundSize: "56px 56px",
          maskImage: "radial-gradient(ellipse at 30% 40%, black 20%, transparent 72%)",
          pointerEvents: "none",
        }}
      />

      <div
        style={{
          position: "relative",
          maxWidth: 1240,
          margin: "0 auto",
          padding: isMobile ? "28px 22px 64px" : "48px 48px 90px",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr",
          gap: isMobile ? 24 : 48,
          alignItems: "center",
          zIndex: 2,
        }}
      >
        <div style={{ maxWidth: 680, order: isMobile ? 2 : 1 }}>
          <Reveal delay={0}>
            <div
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 10,
                padding: "6px 14px",
                borderRadius: 999,
                background: theme.chip,
                border: `1px solid ${theme.chipBorder}`,
                color: theme.chipText,
                fontSize: 11.5,
                letterSpacing: 1.4,
                textTransform: "uppercase",
                fontWeight: 600,
                marginBottom: 30,
                fontFamily: "'JetBrains Mono', monospace",
              }}
            >
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: theme.accent, animation: window.motionAllowed() ? "sv-breathe 3s ease-in-out infinite" : "none" }} />
              The AI evaluation stack
            </div>
          </Reveal>

          <Reveal delay={90}>
            <h1
              style={{
                fontFamily: "'Lexend', sans-serif",
                fontSize: "clamp(34px, 5.2vw, 74px)",
                lineHeight: 1.02,
                fontWeight: 600,
                letterSpacing: -1.8,
                margin: "0 0 26px 0",
                textWrap: "balance",
              }}
            >
              Stop{" "}
              <window.AccentPhrase>guessing</window.AccentPhrase>{" "}
              whether your AI works.
            </h1>
          </Reveal>

          <Reveal delay={180}>
            <p
              style={{
                fontSize: isMobile ? 16 : 19,
                lineHeight: 1.55,
                color: theme.sub,
                margin: "0 0 36px 0",
                maxWidth: 560,
                textWrap: "pretty",
              }}
            >
              Shard turns subjective hunches about model quality into{" "}
              <span style={{ color: theme.ink, fontWeight: 500 }}>structured, auditable evidence</span>.
              Build rubrics, run scenarios, score with humans + AI councils, and track every result over time.
            </p>
          </Reveal>

          <Reveal delay={260}>
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <a
                href="/contact?subject=demo"
                className="sv-press"
                style={{
                  padding: "15px 28px",
                  borderRadius: 999,
                  background: theme.accent,
                  color: theme.onAccent,
                  fontSize: 15,
                  fontWeight: 600,
                  textDecoration: "none",
                  boxShadow: `0 10px 28px -12px ${theme.accent}99, inset 0 1px 0 rgba(255,255,255,0.25)`,
                  fontFamily: "inherit",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                Book a 20-min demo →
              </a>
              <a
                href="/#how"
                style={{
                  color: theme.sub,
                  fontSize: 14.5,
                  fontWeight: 500,
                  textDecoration: "none",
                  borderBottom: `1px solid ${theme.cardBorder}`,
                  paddingBottom: 2,
                }}
              >
                See how it works
              </a>
            </div>
          </Reveal>

          <Reveal delay={340}>
            <CouncilTerminal theme={theme} />
          </Reveal>
        </div>

        <Reveal delay={150} style={{ order: isMobile ? 1 : 2 }}>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              pointerEvents: "none",
            }}
          >
            <Mark size={isMobile ? 250 : 440} drawIn={motion} motion={motion} />
          </div>
        </Reveal>
      </div>

      {!isMobile && (
        <div
          style={{
            position: "absolute",
            bottom: 28,
            left: 48,
            fontSize: 11,
            letterSpacing: 1.6,
            textTransform: "uppercase",
            color: theme.sub,
            display: "flex",
            alignItems: "center",
            gap: 10,
            fontFamily: "'JetBrains Mono', monospace",
            zIndex: 5,
          }}
        >
          <span style={{ display: "inline-block", width: 28, height: 1, background: theme.accent, opacity: 0.7 }} />
          Evaluation, with evidence
        </div>
      )}
    </section>
  );
}

window.Hero = Hero;