// Hero — V4 brain wireframe refined. Left: copy + stats. Right: rotating SVG sphere.

function BrainSphere() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const loop = () => { setTick(t=>t+1); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const ang = tick * 0.003;
  const rings = [];
  for (let r = 0; r < 7; r++) {
    const pts = [];
    const tilt = (r - 3) * 0.16;
    for (let i = 0; i <= 72; i++) {
      const a = (i/72) * Math.PI*2;
      const x = Math.cos(a);
      const z = Math.sin(a);
      const x2 = x*Math.cos(ang) + z*Math.sin(ang);
      const z2 = -x*Math.sin(ang) + z*Math.cos(ang);
      const y = Math.sin(tilt)*0.7 + Math.sin(a*3 + r*1.3)*0.055;
      const persp = 1.8/(1.8+z2);
      pts.push({ x: x2*persp, y: y*persp, z: z2 });
    }
    rings.push(pts);
  }
  const meridians = [];
  for (let m = 0; m < 12; m++) {
    const pts = [];
    const phi = (m/12)*Math.PI*2 + ang*0.6;
    for (let i = 0; i <= 40; i++) {
      const t = (i/40)*Math.PI - Math.PI/2;
      const x = Math.cos(t)*Math.cos(phi);
      const z = Math.cos(t)*Math.sin(phi);
      const y = Math.sin(t);
      const persp = 1.8/(1.8+z);
      pts.push({ x: x*persp, y: y*persp, z });
    }
    meridians.push(pts);
  }
  const toPath = (pts) => pts.map((p,i) => `${i===0?'M':'L'}${(p.x*220+320).toFixed(1)},${(p.y*220+320).toFixed(1)}`).join(' ');
  const avgDepth = (pts) => pts.reduce((s,p)=>s+p.z,0)/pts.length;

  // Animated "pulse" dots that travel along a random meridian
  const pulseT = (tick % 140) / 140;
  const pulses = [0, 0.33, 0.66].map((offset, i) => {
    const p = (pulseT + offset) % 1;
    const meridian = meridians[(i*4) % meridians.length];
    const idx = Math.floor(p * (meridian.length-1));
    return meridian[idx];
  });

  return (
    <svg viewBox="0 0 640 640" style={{ width: '100%', height: '100%', overflow: 'visible' }}>
      <defs>
        <radialGradient id="coreGlow">
          <stop offset="0%" stopColor={FONGOS.purpleSoft} stopOpacity="0.9"/>
          <stop offset="40%" stopColor={FONGOS.purple} stopOpacity="0.3"/>
          <stop offset="100%" stopColor={FONGOS.purple} stopOpacity="0"/>
        </radialGradient>
      </defs>
      {/* Outer faint circle */}
      <circle cx="320" cy="320" r="230" fill="none" stroke={FONGOS.line} strokeWidth="1"/>
      <circle cx="320" cy="320" r="260" fill="none" stroke={FONGOS.line} strokeWidth="1" strokeDasharray="2 6"/>

      {/* Core glow */}
      <circle cx="320" cy="320" r="80" fill="url(#coreGlow)"/>

      {rings.map((r,i) => {
        const d = avgDepth(r);
        const alpha = Math.max(0.08, 0.38 - d*0.22);
        return <path key={'r'+i} d={toPath(r)} fill="none"
          stroke={FONGOS.purple} strokeOpacity={alpha} strokeWidth={0.8}/>;
      })}
      {meridians.map((m,i) => {
        const d = avgDepth(m);
        const alpha = Math.max(0.05, 0.28 - d*0.17);
        return <path key={'m'+i} d={toPath(m)} fill="none"
          stroke={FONGOS.cyan} strokeOpacity={alpha} strokeWidth={0.6}/>;
      })}
      {/* Pulses */}
      {pulses.map((p, i) => p && (
        <circle key={'p'+i}
          cx={p.x*220+320} cy={p.y*220+320} r={p.z < 0 ? 3.5 : 2.5}
          fill={FONGOS.cyanSoft} opacity={p.z < 0 ? 0.95 : 0.5}
          style={{ filter: `drop-shadow(0 0 6px ${FONGOS.cyan})` }}
        />
      ))}
      {/* Center core */}
      <circle cx="320" cy="320" r="4" fill={FONGOS.ink}/>
      <circle cx="320" cy="320" r="12" fill="none" stroke={FONGOS.ink} strokeOpacity="0.25"/>

      {/* Orbital labels */}
      <g fontFamily={FONGOS.mono} fontSize="9" fill={FONGOS.inkFaint} letterSpacing="2">
        <text x="320" y="80" textAnchor="middle">VOICE</text>
        <text x="560" y="324" textAnchor="middle">EYES</text>
        <text x="320" y="568" textAnchor="middle">HANDS</text>
        <text x="80" y="324" textAnchor="middle">BRAIN</text>
      </g>
    </svg>
  );
}

function Hero() {
  return (
    <section id="hero" style={{
      position: 'relative', padding: '80px 40px 100px', overflow: 'hidden',
      borderBottom: `1px solid ${FONGOS.line}`,
    }}>
      {/* Ambient lighting */}
      <div style={{
        position: 'absolute', top: '40%', left: '65%',
        transform: 'translate(-50%,-50%)', width: 900, height: 900,
        background: `radial-gradient(circle, ${FONGOS.purple}1f 0%, transparent 55%)`,
        pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', top: '60%', right: -120,
        width: 500, height: 500,
        background: `radial-gradient(circle, ${FONGOS.cyan}12 0%, transparent 60%)`,
        pointerEvents: 'none',
      }}/>

      <div className="fg-hero-grid" style={{
        display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 40,
        maxWidth: 1320, margin: '0 auto', alignItems: 'center',
        minHeight: 640,
      }}>
        <div>
          <Chip>PRIVATE BETA · INVITE ONLY · WINDOWS TODAY</Chip>
          <Headline size={76} style={{ margin: '32px 0 28px' }}>
            An autonomous agent<br/>
            that uses your computer<br/>
            <span style={{
              color: FONGOS.purpleSoft, fontWeight: 300,
              textShadow: `0 0 32px ${FONGOS.purple}99`,
            }}>instead of</span> you.
          </Headline>
          <p style={{ fontSize: 19, color: FONGOS.ink, maxWidth: 480, lineHeight: 1.5, margin: '0 0 14px', fontWeight: 300 }}>
            You work. He notices. He remembers. When he's sure, he helps.
          </p>
          <p style={{
            fontFamily: FONGOS.mono, fontSize: 12, letterSpacing: '0.06em',
            color: FONGOS.inkFaint, maxWidth: 480, lineHeight: 1.7, margin: 0,
          }}>
            not your assistant. a teammate who pays attention when you don't.
          </p>

          <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
            <a href="#install" style={{
              padding: '13px 20px', background: FONGOS.ink, color: FONGOS.bg,
              fontSize: 13, fontWeight: 500, textDecoration: 'none',
              fontFamily: FONGOS.sans, letterSpacing: 0.2,
            }}>try the beta →</a>
            <a href="#moments" style={{
              padding: '13px 20px', color: FONGOS.ink, fontSize: 13, fontWeight: 500,
              textDecoration: 'none', fontFamily: FONGOS.sans, letterSpacing: 0.2,
              border: `1px solid ${FONGOS.lineStrong}`,
            }}>watch him think →</a>
          </div>

          <div className="fg-stats" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
            marginTop: 44, paddingTop: 28, borderTop: `1px solid ${FONGOS.line}`,
          }}>
            {[['1,428','rules he learned'],['18,525','memories he keeps'],['732','goals he formed'],['2,988','tools he ran']].map(([k,v]) => (
              <div key={v}>
                <div style={{ fontFamily: FONGOS.mono, fontSize: 22, color: FONGOS.ink, fontWeight: 500 }}>{k}</div>
                <div style={{ fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.18em', color: FONGOS.inkFaint, textTransform: 'uppercase', marginTop: 6 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', aspectRatio: '1/1', maxWidth: 620, margin: '0 auto', width: '100%' }}>
          <BrainSphere/>
        </div>
      </div>

      {/* Scroll hint */}
      <div style={{
        position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.25em',
        color: FONGOS.inkFaint, textTransform: 'uppercase',
      }}>
        <span>keep scrolling</span>
        <svg width="10" height="14" viewBox="0 0 10 14" style={{ animation: 'fongosArrow 1.8s ease-in-out infinite' }}>
          <path d="M5 0v12M1 8l4 4 4-4" stroke={FONGOS.inkFaint} strokeWidth="1" fill="none"/>
        </svg>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, BrainSphere });