// hero-marketing.jsx — Full-bleed marketing hero with calibrating-instrument
// build sequence on first paint. Topo contour background, mono UI.
//
// Timeline (3.6s total):
//   0.00 — page bg + topo contours fade in
//   0.30 — construction grid (circles + crosshairs) fades in
//   0.60 — hex frame draws (stroke-dash)
//   1.10 — inner hex draws + ticks pop in around perimeter
//   1.50 — needle drops in from above, finds north (+28°)
//   1.80 — center dot appears
//   1.90 — headline types in
//   2.80 — subcopy fades up + status line
//   3.00 — CTA pill border draws, then fills
//   3.40 — coordinates readout settles
//   3.60 — done; construction grid drops to ambient opacity

const HEX = "M50 4 L88 26 L88 74 L50 96 L12 74 L12 26 Z";
const HEX_INSET = "M50 14 L80 31 L80 69 L50 86 L20 69 L20 31 Z";
const HEX_PERIM = 280;
const TICKS = [[50,14,50,20],[80,31,75,34],[80,69,75,66],[50,86,50,80],[20,69,25,66],[20,31,25,34]];

// Map legacy keys to centralized tokens. Reading C.x reflects the active theme.
const C_KEY_MAP = {
  bg:       'bg',
  bgDeep:   'bg',     // dark uses #070809 (we'll keep slightly darker via override below)
  ink:      'text',
  inkMute:  'textMute',
  inkDim:   'textDim',
  amber:    'amber',
  amberDim: 'amberDim',
  pine:     'pine2',
  divider:  'border',
  panel:    'bg3',
};
const C = new Proxy({}, {
  get(_t, k) { return window.CS_TOKENS[C_KEY_MAP[k] || k]; },
});

const MONO = '"SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace';

// ── Animation runner ─────────────────────────────────────
function useElapsed(replayKey) {
  const [t, setT] = React.useState(0);
  const startRef = React.useRef(performance.now());
  React.useEffect(() => {
    startRef.current = performance.now();
    let raf;
    const tick = (now) => {
      setT((now - startRef.current) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [replayKey]);
  return t;
}

// ── Easing ────────────────────────────────────────────────
const ease = {
  outCubic: (t) => 1 - Math.pow(1 - t, 3),
  outQuart: (t) => 1 - Math.pow(1 - t, 4),
  outBack:  (t, s = 1.4) => 1 + (s + 1) * Math.pow(t - 1, 3) + s * Math.pow(t - 1, 2),
  inOutCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
};
const phase = (t, start, end) => Math.max(0, Math.min(1, (t - start) / (end - start)));

// ── Topo contour SVG pattern (background) ────────────────
function TopoBackground({ opacity = 0.18 }) {
  // Generate a few overlapping concentric blob fields. Use SVG paths
  // distorted just enough to feel like real terrain.
  return (
    <svg viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice"
      style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        opacity, pointerEvents: 'none',
      }}>
      <defs>
        <radialGradient id="topo-fade" cx="50%" cy="50%" r="60%">
          <stop offset="0%" stopColor="white" stopOpacity="1"/>
          <stop offset="100%" stopColor="white" stopOpacity="0.1"/>
        </radialGradient>
        <mask id="topo-mask">
          <rect width="1600" height="1000" fill="url(#topo-fade)"/>
        </mask>
      </defs>
      <g stroke={C.ink} strokeWidth="0.6" fill="none" mask="url(#topo-mask)">
        {/* Mountain field: left-center */}
        {topoRing(280, 380, 60, 0.0)}
        {topoRing(280, 380, 95, 0.05)}
        {topoRing(280, 380, 140, 0.08)}
        {topoRing(280, 380, 195, 0.12)}
        {topoRing(280, 380, 260, 0.18)}
        {topoRing(280, 380, 340, 0.25)}

        {/* Right peak */}
        {topoRing(1180, 240, 50, 0.02)}
        {topoRing(1180, 240, 85, 0.06)}
        {topoRing(1180, 240, 135, 0.1)}
        {topoRing(1180, 240, 200, 0.15)}
        {topoRing(1180, 240, 280, 0.22)}

        {/* Bottom-right ridge */}
        {topoRing(1320, 760, 70, 0.03)}
        {topoRing(1320, 760, 115, 0.07)}
        {topoRing(1320, 760, 175, 0.12)}
        {topoRing(1320, 760, 250, 0.18)}

        {/* Bottom-left valley */}
        {topoRing(180, 850, 55, 0.02)}
        {topoRing(180, 850, 95, 0.06)}
        {topoRing(180, 850, 150, 0.11)}

        {/* Faint river curve */}
        <path d="M 0 600 Q 300 540, 520 580 T 980 540 Q 1200 510, 1600 580"
          stroke={C.ink} strokeWidth="0.5" opacity="0.4"/>
        <path d="M 0 620 Q 300 560, 520 600 T 980 560 Q 1200 530, 1600 600"
          stroke={C.ink} strokeWidth="0.5" opacity="0.25"/>
      </g>
    </svg>
  );
}

// Helper: draw an irregular ellipse-blob ring at (cx,cy) radius r
function topoRing(cx, cy, r, distort) {
  // Use a wavy ellipse — sample points around a circle, perturb radius.
  const points = 24;
  let d = '';
  for (let i = 0; i <= points; i++) {
    const a = (i / points) * Math.PI * 2;
    // Deterministic perturbation
    const wobble = Math.sin(a * 3 + cx * 0.01) * distort + Math.cos(a * 5 + cy * 0.01) * distort * 0.6;
    const rr = r * (1 + wobble);
    const x = cx + Math.cos(a) * rr;
    const y = cy + Math.sin(a) * rr * 0.85;
    d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
  }
  return <path key={`${cx}-${cy}-${r}`} d={d + 'Z'}/>;
}

// ── Hex grid pattern (subtle, for top/bottom corners) ────
function HexGridCorner({ position = 'tl' }) {
  const positions = {
    tl: { top: 0, left: 0, transform: 'none' },
    tr: { top: 0, right: 0, transform: 'scaleX(-1)' },
    bl: { bottom: 0, left: 0, transform: 'scaleY(-1)' },
    br: { bottom: 0, right: 0, transform: 'scale(-1)' },
  };
  return (
    <svg width="280" height="280" viewBox="0 0 280 280"
      style={{ position: 'absolute', ...positions[position], opacity: 0.08, pointerEvents: 'none' }}>
      <defs>
        <pattern id={`hex-${position}`} x="0" y="0" width="40" height="46.19" patternUnits="userSpaceOnUse">
          <path d="M20 0 L40 11.55 L40 34.64 L20 46.19 L0 34.64 L0 11.55 Z"
            fill="none" stroke={C.ink} strokeWidth="0.4"/>
        </pattern>
        <radialGradient id={`hex-fade-${position}`} cx="0%" cy="0%" r="100%">
          <stop offset="0%" stopColor="white" stopOpacity="1"/>
          <stop offset="100%" stopColor="white" stopOpacity="0"/>
        </radialGradient>
        <mask id={`hex-mask-${position}`}>
          <rect width="280" height="280" fill={`url(#hex-fade-${position})`}/>
        </mask>
      </defs>
      <rect width="280" height="280" fill={`url(#hex-${position})`} mask={`url(#hex-mask-${position})`}/>
    </svg>
  );
}

// ── Construction grid (behind compass during build, then ambient) ─
function ConstructionGrid({ buildP, ambientOpacity = 0.06 }) {
  // buildP: 0..1 fade-in during 0.3-0.9s, then drops to ambientOpacity at 3.6s
  return (
    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"
      style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: buildP }}>
      <g stroke={C.amber} strokeWidth="0.15" strokeDasharray="0.6 0.6" opacity="0.5">
        <circle cx="50" cy="50" r="46" fill="none"/>
        <circle cx="50" cy="50" r="36" fill="none"/>
        <circle cx="50" cy="50" r="28" fill="none"/>
        <circle cx="50" cy="50" r="18" fill="none"/>
      </g>
      <g stroke={C.amber} strokeWidth="0.1" opacity="0.35">
        <line x1="50" y1="2" x2="50" y2="98"/>
        <line x1="2" y1="50" x2="98" y2="50"/>
      </g>
      <text x="62" y="22" fill={C.amber} fontSize="2" fontFamily={MONO} opacity="0.6">+28°</text>
    </svg>
  );
}

// ── Compass (built progressively) ─────────────────────────
function CompassBuilding({ t, scrollAngle = 0 }) {
  // Frame draw: 0.6 - 1.1
  const frameP = phase(t, 0.6, 1.1);
  const frameOff = (1 - ease.outCubic(frameP)) * HEX_PERIM;

  // Inner hex: 1.1 - 1.4
  const innerP = phase(t, 1.1, 1.4);

  // Ticks: 1.0 - 1.6 staggered
  const tickP = (i) => phase(t, 1.0 + i * 0.05, 1.0 + i * 0.05 + 0.25);

  // Needle drop + find north: 1.5 - 2.1
  const needleP = phase(t, 1.5, 2.1);
  const needleScale = ease.outBack(needleP);
  const baseAngle = -90 + ease.outCubic(needleP) * (28 + 90);
  // After build completes, scroll-driven angle takes over (additive)
  const buildDone = t >= 2.1;
  const needleAngle = buildDone ? 28 + scrollAngle : baseAngle;

  // Center dot: 1.7
  const dotP = phase(t, 1.7, 1.95);

  return (
    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"
      style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
      <path d={HEX} fill="none" stroke={C.ink} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"
        strokeDasharray={HEX_PERIM} strokeDashoffset={frameOff}/>
      <path d={HEX_INSET} fill="none" stroke={C.ink} strokeWidth="0.5" strokeLinejoin="round"
        opacity={0.4 * innerP}/>
      <g stroke={C.ink} strokeWidth="1" strokeLinecap="round" opacity="0.7">
        {TICKS.map(([x1, y1, x2, y2], i) => {
          const p = tickP(i);
          return (
            <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
              opacity={p}/>
          );
        })}
      </g>
      {needleP > 0 && (
        <g transform={`rotate(${needleAngle} 50 50)`}>
          <path d="M50 26 L52.4 50 L50 53 L47.6 50 Z" fill={C.amber} opacity={Math.min(1, needleP * 1.5)}/>
          <path d="M50 74 L47.6 50 L50 47 L52.4 50 Z" fill={C.ink} opacity={0.7 * Math.min(1, needleP * 1.5)}/>
        </g>
      )}
      {dotP > 0 && <circle cx="50" cy="50" r={1.4 * dotP} fill={C.ink}/>}
    </svg>
  );
}

// ── Typewriter headline ──────────────────────────────────
function HeadlineTyped({ t }) {
  const lines = [
    { text: 'GET THE CAMPSITE', start: 1.9, dur: 0.6 },
    { text: "THAT'S ALWAYS TAKEN.", start: 2.3, dur: 0.7 },
  ];
  return (
    <div style={{
      fontFamily: MONO, fontWeight: 600,
      fontSize: 'clamp(40px, 6vw, 84px)',
      lineHeight: 1, letterSpacing: '-0.01em',
      color: C.ink, textTransform: 'uppercase',
    }}>
      {lines.map((line, i) => {
        const p = phase(t, line.start, line.start + line.dur);
        const charsToShow = Math.floor(p * line.text.length);
        const showCaret = p > 0 && p < 1;
        return (
          <div key={i} style={{ minHeight: '1em' }}>
            <span>{line.text.slice(0, charsToShow)}</span>
            {showCaret && <span style={{
              display: 'inline-block', width: '0.05em', height: '0.85em',
              background: C.amber, verticalAlign: '-0.1em', marginLeft: '0.05em',
              animation: 'cursor-blink 0.6s steps(2, start) infinite',
            }}/>}
          </div>
        );
      })}
    </div>
  );
}

// ── Animated coordinate readout ──────────────────────────
function CoordinatesReadout({ t }) {
  // 2.0-3.4s: spins random digits, then locks
  const p = phase(t, 2.0, 3.4);
  const target = { lat: 'N 37.74°', lng: 'W 119.57°' };
  const digit = (final, prog, idx) => {
    if (prog >= 1) return final;
    if (final === ' ' || final === '.' || final === '°' || final === 'N' || final === 'W') return final;
    const localStart = idx * 0.07;
    const localP = Math.max(0, Math.min(1, (prog - localStart) / 0.25));
    if (localP >= 1) return final;
    if (localP <= 0) return Math.floor(Math.random() * 10).toString();
    return Math.floor(Math.random() * 10).toString();
  };
  const spin = (str) => str.split('').map((ch, i) => digit(ch, p, i)).join('');
  return (
    <div style={{
      fontFamily: MONO, fontSize: 11, color: p < 1 ? C.amber : C.inkDim,
      letterSpacing: 1.5, opacity: p > 0.05 ? 1 : 0,
      transition: 'color 0.3s', display: 'flex', gap: 14,
    }}>
      <span>{spin(target.lat)}</span>
      <span style={{ opacity: 0.4 }}>·</span>
      <span>{spin(target.lng)}</span>
      {p >= 1 && (
        <>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ color: C.pine }}>● LOCKED</span>
        </>
      )}
    </div>
  );
}

// ── CTA pill (border draws → fills) ──────────────────────
function CTA({ t }) {
  const borderP = phase(t, 3.0, 3.4);
  const fillP = phase(t, 3.4, 3.7);
  return (
    <button style={{
      position: 'relative', height: 52,
      padding: '0 28px',
      background: fillP > 0 ? `rgba(232, 163, 61, ${fillP})` : 'transparent',
      border: `1px solid ${C.amber}`,
      borderRadius: 4,
      color: fillP > 0.5 ? C.bg : C.amber,
      fontFamily: MONO, fontSize: 12, fontWeight: 600, letterSpacing: 1.8,
      textTransform: 'uppercase', cursor: 'pointer',
      opacity: borderP, transition: 'transform 0.2s',
      clipPath: borderP < 1 ? `inset(0 ${100 - borderP * 100}% 0 0)` : 'none',
    }}
    onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-1px)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
      Start watching ↗
    </button>
  );
}

// ── Status badge (top of hero, small) ────────────────────
function StatusLine({ t }) {
  const p = phase(t, 2.8, 3.2);
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      fontFamily: MONO, fontSize: 11, letterSpacing: 1.5,
      color: C.inkMute, opacity: p,
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: 3, background: C.amber,
        boxShadow: `0 0 8px ${C.amber}`,
        animation: 'pulse-pine 1.6s ease-in-out infinite',
      }}/>
      <span>RECREATION.GOV WATCHER · PRIVATE BETA</span>
    </div>
  );
}

// ── Replay control ───────────────────────────────────────
function ReplayBtn({ onReplay }) {
  const { mobile } = window.useViewport();
  // On mobile, hide once user scrolls past hero — replay is desktop polish.
  const [visible, setVisible] = React.useState(true);
  React.useEffect(() => {
    if (!mobile) return;
    const onScroll = () => setVisible(window.scrollY < window.innerHeight * 0.85);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [mobile]);
  if (mobile && !visible) return null;
  return (
    <button onClick={onReplay} style={{
      position: 'fixed', bottom: mobile ? 14 : 24, right: mobile ? 14 : 24,
      height: 32, padding: '0 12px', display: 'inline-flex', alignItems: 'center', gap: 6,
      background: 'rgba(11, 13, 15, 0.7)', backdropFilter: 'blur(8px)',
      border: `1px solid ${C.divider}`, borderRadius: 4,
      color: C.inkMute, fontFamily: MONO, fontSize: 10, fontWeight: 600,
      letterSpacing: 1.2, cursor: 'pointer', textTransform: 'uppercase',
      zIndex: 50,
    }}>
      <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
        <path d="M3 8a5 5 0 0 1 8.5-3.5L13 6M13 6V3M13 6h-3M13 8a5 5 0 0 1-8.5 3.5L3 10M3 10v3M3 10h3"
          stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      Replay
    </button>
  );
}

// ── Scroll hook for needle drive ─────────────────────────
function useScrollY() {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
}

// ── Hero ──────────────────────────────────────────────────
function Hero() {
  if (window.useTokens) window.useTokens(); // re-render on theme change
  const { mobile } = window.useViewport();
  const [replayKey, setReplayKey] = React.useState(0);
  const t = useElapsed(replayKey);
  const scrollY = useScrollY();
  const TOTAL = 3.7;
  // Needle spins as we scroll: 1 full rotation per ~600px scrolled.
  const scrollAngle = scrollY * (360 / 600);

  // Construction grid: fades in 0.3-0.9, holds at full until 3.6, then drops to ambient 0.06
  const gridFadeIn = phase(t, 0.3, 0.9);
  const gridSettle = phase(t, 3.4, 3.7);
  const gridOpacity = (gridFadeIn) * (1 - gridSettle * 0.85);

  // Topo bg: fades in 0.0-0.5
  const topoP = phase(t, 0.0, 0.6);

  // Subcopy fade
  const subP = phase(t, 2.8, 3.3);

  return (
    <>
    <div style={{
      position: 'relative', width: '100%', minHeight: '100vh',
      background: C.bgDeep,
      overflow: 'hidden',
      color: C.ink, fontFamily: MONO,
    }}>
      {/* Background topo contours */}
      <div style={{ opacity: topoP }}>
        <TopoBackground opacity={0.18}/>
      </div>

      {/* Hex corner accents — desktop only (visual noise on mobile) */}
      {!mobile && <HexGridCorner position="tl"/>}
      {!mobile && <HexGridCorner position="br"/>}

      {/* Top rail: brand mark + nav — hidden because SiteNav covers it.
          Kept removable for readers, suppressed on mobile to reduce paint. */}
      {!mobile && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0,
          padding: '24px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          zIndex: 10, opacity: phase(t, 0.0, 0.4),
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <svg width="24" height="24" viewBox="0 0 100 100">
              <path d={HEX} fill="none" stroke={C.ink} strokeWidth="3" strokeLinejoin="round"/>
              <path d={HEX_INSET} fill="none" stroke={C.ink} strokeWidth="1" strokeLinejoin="round" opacity="0.4"/>
              <g transform="rotate(28 50 50)">
                <path d="M50 22 L54 50 L50 56 L46 50 Z" fill={C.amber}/>
                <path d="M50 78 L46 50 L50 44 L54 50 Z" fill={C.ink} opacity="0.7"/>
              </g>
              <circle cx="50" cy="50" r="2.5" fill={C.ink}/>
            </svg>
            <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: 2, color: C.ink }}>
              CAMPSITE SNIPER
            </span>
          </div>
          <div style={{ display: 'flex', gap: 32, fontSize: 10, letterSpacing: 1.5, color: C.inkMute }}>
            <a style={navLink}>HOW IT WORKS</a>
            <a style={navLink}>PRICING</a>
            <a style={navLink}>FAQ</a>
            <a style={{ ...navLink, color: C.amber }}>LOG IN</a>
          </div>
        </div>
      )}

      {/* Center stage */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: mobile ? '72px 18px 56px' : '80px 40px',
      }}>
        {/* Compass + construction grid stage */}
        <div style={{
          position: 'relative',
          width: mobile ? 'min(220px, 60vw)' : 'min(380px, 40vw)',
          aspectRatio: '1',
          marginBottom: mobile ? 32 : 56,
        }}>
          <ConstructionGrid buildP={gridOpacity}/>
          <CompassBuilding t={t} scrollAngle={scrollAngle}/>
        </div>

        {/* Status line */}
        <div style={{ marginBottom: mobile ? 16 : 24 }}>
          <StatusLine t={t}/>
        </div>

        {/* Headline */}
        <div style={{ textAlign: 'center', marginBottom: mobile ? 18 : 24 }}>
          <HeadlineTyped t={t}/>
        </div>

        {/* Subcopy */}
        <div style={{
          maxWidth: 560, textAlign: 'center', marginBottom: mobile ? 28 : 36,
          fontSize: mobile ? 13.5 : 15, color: C.inkMute, lineHeight: 1.6,
          opacity: subP, transform: `translateY(${(1 - subP) * 8}px)`,
          transition: 'transform 0.3s',
          fontFamily: MONO,
        }}>
          Pin one site. Or every lakefront site with a 35ft driveway across
          central Oregon. We watch Recreation.gov and ping the moment any
          match opens.
        </div>

        {/* CTA + coords */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: mobile ? 18 : 24 }}>
          <CTA t={t}/>
          <CoordinatesReadout t={t}/>
        </div>
      </div>

      {/* Bottom rail — hidden on mobile (collides with replay + scroll cue) */}
      {!mobile && (
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '20px 40px', display: 'flex', justifyContent: 'space-between',
          fontSize: 9.5, color: C.inkDim, letterSpacing: 1.2,
          opacity: phase(t, 3.0, 3.5) * 0.6, zIndex: 6,
        }}>
          <span>v1.0 · BUILT FOR THE LONG WAIT</span>
          <span>{(28 + scrollAngle).toFixed(0)}° N</span>
        </div>
      )}

      {/* Bottom fade into next section + scroll cue */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: 120,
        background: `linear-gradient(to bottom, transparent, ${C.bgDeep})`,
        pointerEvents: 'none', zIndex: 5,
      }}/>
      <div style={{
        position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        opacity: phase(t, 3.4, 3.8) * 0.7,
        zIndex: 6,
        animation: 'scroll-cue 2.2s ease-in-out infinite',
      }}>
        <div style={{
          fontFamily: MONO, fontSize: 9.5, letterSpacing: 2,
          color: C.inkDim,
        }}>
          SCROLL
        </div>
        <svg width="10" height="14" viewBox="0 0 10 14" fill="none">
          <path d="M5 1 V13 M1 9 L5 13 L9 9" stroke={C.inkDim} strokeWidth="1.2"
            strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>

      <style>{`
        @keyframes cursor-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
        @keyframes pulse-pine { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }
        @keyframes scroll-cue {
          0%, 100% { transform: translate(-50%, 0); }
          50% { transform: translate(-50%, 6px); }
        }
      `}</style>
    </div>
    <ReplayBtn onReplay={() => setReplayKey(k => k + 1)}/>
    </>
  );
}

const navLink = {
  color: C.inkMute, fontFamily: MONO, fontSize: 10, fontWeight: 500,
  letterSpacing: 1.5, textTransform: 'uppercase', cursor: 'pointer',
  textDecoration: 'none',
};

window.MarketingHero = Hero;
// Auto-render only if no host page has claimed the root (legacy Marketing Hero.html)
if (!window.__CS_PAGE_RENDERED__) {
  window.__CS_PAGE_RENDERED__ = true;
  // Defer to allow other modules (HowItWorks/Pricing/FAQ/Footer) to register
  setTimeout(() => {
    const el = document.getElementById('root');
    if (el && !el.__rendered) {
      el.__rendered = true;
      ReactDOM.createRoot(el).render(
        <>
          <Hero/>
          {window.HowItWorks ? <window.HowItWorks/> : null}
          {window.Pricing ? <window.Pricing/> : null}
          {window.FAQ ? <window.FAQ/> : null}
          {window.Footer ? <window.Footer/> : null}
        </>
      );
    }
  }, 0);
}