// Hero.jsx — full-bleed moon photography with overlaid wordmark
// The moon image lives as a framed inset on the right, with display type
// anchored to the left gutter — echoing TEF's "imagery in right column" pattern.
function Hero() {
  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '92vh',
      display: 'grid',
      gridTemplateColumns: '1fr',
      overflow: 'hidden',
      background: 'var(--void)',
    }}>
      {/* Moon image — full-bleed, dimmed, positioned lower-right */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/moon.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center 70%',
        opacity: 0.9,
      }} />
      {/* Vignette: fade top/left to pure void so type has contrast */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(135deg, rgba(7,7,10,0.95) 0%, rgba(7,7,10,0.55) 45%, rgba(7,7,10,0.1) 80%)',
      }} />
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '40%',
        background: 'linear-gradient(to bottom, transparent, rgba(7,7,10,0.85) 80%)',
      }} />

      {/* Content */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '120px 80px 80px',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        minHeight: '92vh',
      }}>
        {/* Top metadata row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--dust-300)' }}>
              <span style={{ color: 'var(--electric-2)' }}>00</span> &nbsp;— &nbsp; A studio for the improbable
            </div>
            <div className="mono" style={{ maxWidth: 380, color: 'var(--dust-400)' }}>
              Latitude 38°53'N &nbsp;·&nbsp; 240,000 mi from status quo
            </div>
          </div>
          <HeroCoords />
        </div>

        {/* Big wordmark */}
        <div style={{ position: 'relative' }}>
          <h1 className="display-xl" style={{ margin: 0 }}>
            Moonshot<span style={{ color: 'var(--electric)' }}>.</span>
          </h1>
          <p className="lede" style={{
            marginTop: 32, maxWidth: 640, color: 'var(--dust-100)',
          }}>
            We build what shouldn't work, for people willing to find out.
            A studio for high-risk, high-reward projects that live at the tail of the distribution —
            where the payoffs are non-linear and the odds are honest.
          </p>

          <div style={{ marginTop: 40, display: 'flex', gap: 12, alignItems: 'center' }}>
            <a href="#project-x" className="btn">
              See the work
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
                <path d="M3 8h10M9 4l4 4-4 4" />
              </svg>
            </a>
            <a href="#relay" className="btn btn--ghost">Open a channel</a>
            <span className="mono" style={{ marginLeft: 24, color: 'var(--fg-faint)' }}>
              → 5 missions active · 2 in quiet phase
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// Small telemetry block — fake coordinates / mission counter, top-right.
function HeroCoords() {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setT(v => v + 1), 1000);
    return () => clearInterval(id);
  }, []);
  // Deterministic "drifting" readout
  const lat = (38.897 + Math.sin(t / 7) * 0.003).toFixed(4);
  const lon = (-77.036 + Math.cos(t / 9) * 0.003).toFixed(4);
  return (
    <div style={{
      border: '1px solid var(--line-strong)',
      padding: '10px 14px',
      display: 'flex', flexDirection: 'column', gap: 4,
      fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--dust-300)',
      minWidth: 220,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span style={{ color: 'var(--fg-faint)' }}>LAT</span><span>{lat}°</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span style={{ color: 'var(--fg-faint)' }}>LON</span><span>{lon}°</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span style={{ color: 'var(--fg-faint)' }}>UPLINK</span>
        <span style={{ color: 'var(--electric)' }}>● STABLE</span>
      </div>
    </div>
  );
}

Object.assign(window, { Hero });