// Sections 5–7: Architecture rings, Comparison table, Proof/Transparency

// ─── ARCHITECTURE ─────────────────────────────────────────────────
function Architecture() {
  const [hover, setHover] = React.useState('brain');
  const processes = {
    voice:   { r: 280, label: 'VOICE',   col: FONGOS.cyanSoft,
               desc: 'Listens and speaks. Natural back-and-forth, ~180ms response. Runs on your machine \u2014 nothing you say leaves.' },
    eyes:    { r: 220, label: 'EYES',    col: FONGOS.cyan,
               desc: 'Watches your screen natively. Reads windows, dialogs, text fields as structured content \u2014 not screenshots. Password fields and sensitive apps are never observed.' },
    brain:   { r: 150, label: 'BRAIN',   col: FONGOS.purpleSoft,
               desc: 'Where he thinks. Plans, reasons, catches his own mistakes, forms goals. A small local model handles the routine; a larger cloud model is available when you allow it.' },
    workers: { r: 80,  label: 'HANDS',   col: FONGOS.purple,
               desc: 'Where he acts. Writes files, runs code, opens apps, dispatches parallel work. Every action is approvable; every action is reversible.' },
  };

  // Event dots traveling between rings
  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 events = [
    { from: 280, to: 80,  phase: 0.0, color: FONGOS.cyanSoft, angle: 30 },
    { from: 220, to: 150, phase: 0.33, color: FONGOS.cyan, angle: 120 },
    { from: 150, to: 80,  phase: 0.66, color: FONGOS.purpleSoft, angle: 200 },
    { from: 80,  to: 280, phase: 0.5, color: FONGOS.cyan, angle: 340 },
    { from: 150, to: 220, phase: 0.15, color: FONGOS.purpleSoft, angle: 90 },
  ];

  return (
    <section id="architecture" style={{
      padding: '140px 40px', borderBottom: `1px solid ${FONGOS.line}`, position: 'relative',
      background: `radial-gradient(ellipse 80% 60% at center, ${FONGOS.cyan}08 0%, transparent 70%)`,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionLabel num="05" name="Architecture"/>
        <div className="fg-arch-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, marginBottom: 48, flexWrap: 'wrap' }}>
          <Headline size={56}>
            Four senses.<br/>One nervous system.
          </Headline>
          <p style={{ fontSize: 14, color: FONGOS.inkDim, maxWidth: 360, margin: 0, lineHeight: 1.55 }}>
            Voice to hear you. Eyes to see your screen. A brain that plans and corrects itself. Hands that act — always with your approval.
          </p>
        </div>

        <div className="fg-arch-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 60, alignItems: 'center' }}>
          {/* Rings */}
          <div style={{ position: 'relative', aspectRatio: '1/1', maxWidth: 640, margin: '0 auto', width: '100%' }}>
            <svg viewBox="0 0 640 640" style={{ width: '100%', height: '100%' }}>
              <defs>
                <radialGradient id="archCore">
                  <stop offset="0%" stopColor={FONGOS.purpleSoft} stopOpacity="0.7"/>
                  <stop offset="60%" stopColor={FONGOS.purple} stopOpacity="0.1"/>
                  <stop offset="100%" stopColor={FONGOS.purple} stopOpacity="0"/>
                </radialGradient>
              </defs>
              <circle cx="320" cy="320" r="140" fill="url(#archCore)"/>
              {Object.entries(processes).map(([k, p]) => {
                const isH = hover === k;
                return (
                  <g key={k}>
                    <circle cx="320" cy="320" r={p.r} fill="none"
                      stroke={isH ? p.col : FONGOS.lineStrong}
                      strokeWidth={isH ? 1.5 : 1}
                      strokeOpacity={isH ? 0.9 : 0.5}
                      strokeDasharray={k === 'voice' ? '3 6' : k === 'eyes' ? '2 4' : 'none'}
                      style={{ cursor: 'pointer', transition: 'all 0.2s' }}
                      onMouseEnter={()=>setHover(k)}
                    />
                    {/* Label on ring */}
                    <text
                      x={320} y={320 - p.r - 10}
                      textAnchor="middle" fontFamily={FONGOS.mono} fontSize="11"
                      fill={isH ? p.col : FONGOS.inkDim} letterSpacing="3"
                      style={{ cursor: 'pointer' }}
                      onMouseEnter={()=>setHover(k)}
                    >{p.label}</text>
                    {/* Sense chip on right */}
                    <g transform={`translate(${320 + p.r + 6}, 320)`}>
                      <rect x="0" y="-8" width="52" height="16" fill={FONGOS.bg2} stroke={FONGOS.line}/>
                      <text x="26" y="3" textAnchor="middle" fontFamily={FONGOS.mono} fontSize="9" fill={FONGOS.inkFaint}>
                        {['hears','sees','thinks','acts'][['voice','eyes','brain','workers'].indexOf(k)]}
                      </text>
                    </g>
                  </g>
                );
              })}

              {/* Event pulses traveling along rings */}
              {events.map((e, i) => {
                const t = ((tick * 0.008 + e.phase) % 1);
                const ang = (e.angle + t * 360) * Math.PI / 180;
                const r = e.from;
                const x = 320 + r * Math.cos(ang);
                const y = 320 + r * Math.sin(ang);
                return (
                  <circle key={i} cx={x} cy={y} r="3" fill={e.color}
                    style={{ filter: `drop-shadow(0 0 6px ${e.color})` }}/>
                );
              })}

              {/* Center core */}
              <circle cx="320" cy="320" r="22" fill={FONGOS.bg} stroke={FONGOS.purpleSoft} strokeWidth="1"/>
              <circle cx="320" cy="320" r="6" fill={FONGOS.ink}/>
              <text x="320" y="380" textAnchor="middle" fontFamily={FONGOS.mono} fontSize="10" fill={FONGOS.inkFaint} letterSpacing="2">CORE · MEMORY</text>
            </svg>
          </div>

          {/* Detail panel */}
          <div style={{ background: FONGOS.surface, border: `1px solid ${FONGOS.line}`, padding: 28 }}>
            <div style={{
              fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.2em',
              color: processes[hover].col, textTransform: 'uppercase', marginBottom: 14,
            }}>SENSE · {processes[hover].label}</div>
            <div style={{ fontSize: 24, fontWeight: 300, color: FONGOS.ink, letterSpacing: '-0.02em', marginBottom: 16, textTransform: 'lowercase' }}>
              his {processes[hover].label.toLowerCase()}
            </div>
            <p style={{ fontSize: 14, color: FONGOS.inkDim, lineHeight: 1.6, margin: '0 0 20px' }}>
              {processes[hover].desc}
            </p>
            <div style={{ borderTop: `1px solid ${FONGOS.line}`, paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                ['runs on', 'your machine'],
                ['privacy', hover === 'eyes' ? 'passwords redacted' : hover === 'voice' ? 'nothing uploaded' : 'yours alone'],
                ['approval', hover === 'workers' ? 'every action' : hover === 'brain' ? 'high-risk only' : 'not needed'],
              ].map(([k,v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontFamily: FONGOS.mono, fontSize: 11 }}>
                  <span style={{ color: FONGOS.inkFaint, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{k}</span>
                  <span style={{ color: FONGOS.ink }}>{v}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 20, fontFamily: FONGOS.mono, fontSize: 10, color: FONGOS.inkFaint, textAlign: 'center' }}>
              hover a ring to inspect
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── COMPARISON ───────────────────────────────────────────────────
function Compare() {
  const rows = [
    ['Remembers across sessions',      'no',      'limited',  'forever'],
    ['Runs on your hardware',          'no',      'no',       'yes'],
    ['Sees your screen',               'no',      'no',       'yes'],
    ['Forms his own goals',            'no',      'no',       'yes'],
    ['Gets cheaper over time',         'no',      'no',       'yes'],
    ['Works offline',                  'no',      'no',       'yes'],
    ['Setup time',                     '0 min',   '0 min',    '~30 min'],
  ];
  const cell = (v) => {
    if (v === 'yes') return <span style={{ color: FONGOS.good, fontFamily: FONGOS.mono, fontSize: 13 }}>✓ yes</span>;
    if (v === 'no') return <span style={{ color: FONGOS.inkFaint, fontFamily: FONGOS.mono, fontSize: 13 }}>— no</span>;
    if (v === 'limited') return <span style={{ color: FONGOS.warn, fontFamily: FONGOS.mono, fontSize: 13 }}>~ limited</span>;
    if (v === 'forever') return <span style={{ color: FONGOS.good, fontFamily: FONGOS.mono, fontSize: 13, fontWeight: 500 }}>✓ forever</span>;
    return <span style={{ color: FONGOS.ink, fontFamily: FONGOS.mono, fontSize: 13 }}>{v}</span>;
  };
  return (
    <section id="compare" style={{
      padding: '120px 40px', borderBottom: `1px solid ${FONGOS.line}`,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionLabel num="06" name="Honest comparison"/>
        <div className="fg-cmp-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, marginBottom: 48, flexWrap: 'wrap' }}>
          <Headline size={56}>Not "better than ChatGPT."<br/>Just different.</Headline>
          <p style={{ fontSize: 14, color: FONGOS.inkDim, maxWidth: 360, margin: 0, lineHeight: 1.55 }}>
            Fongos is not a drop-in replacement. He costs you ~30 minutes of setup and a capable machine. If that trade doesn't make sense for you, it doesn't.
          </p>
        </div>

        <div style={{ border: `1px solid ${FONGOS.line}`, overflowX: 'auto' }}>
          <table style={{
            width: '100%', borderCollapse: 'collapse', fontSize: 14, color: FONGOS.ink,
            minWidth: 640,
          }}>
            <thead>
              <tr style={{ borderBottom: `1px solid ${FONGOS.line}`, background: FONGOS.surface }}>
                <th style={{ textAlign: 'left', padding: '18px 20px', fontWeight: 400, fontSize: 11, letterSpacing: '0.2em', color: FONGOS.inkFaint, textTransform: 'uppercase' }}>capability</th>
                <th style={{ textAlign: 'left', padding: '18px 20px', fontWeight: 500, fontSize: 13, color: FONGOS.inkDim }}>ChatGPT / Copilot</th>
                <th style={{ textAlign: 'left', padding: '18px 20px', fontWeight: 500, fontSize: 13, color: FONGOS.inkDim }}>Claude Desktop</th>
                <th style={{ textAlign: 'left', padding: '18px 20px', fontWeight: 500, fontSize: 13, color: FONGOS.purpleSoft,
                  background: `linear-gradient(180deg, ${FONGOS.purple}18, transparent)` }}>Fongos</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i) => (
                <tr key={i} style={{ borderBottom: i < rows.length-1 ? `1px solid ${FONGOS.line}` : 'none' }}>
                  <td style={{ padding: '16px 20px', color: FONGOS.ink }}>{row[0]}</td>
                  <td style={{ padding: '16px 20px' }}>{cell(row[1])}</td>
                  <td style={{ padding: '16px 20px' }}>{cell(row[2])}</td>
                  <td style={{ padding: '16px 20px', background: `linear-gradient(90deg, ${FONGOS.purple}0a, transparent)` }}>{cell(row[3])}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ─── PROOF / TRANSPARENCY ────────────────────────────────────────
function Proof() {
  // Simulated live stats — tick up occasionally
  const [stats, setStats] = React.useState({
    rules: 1428, msgs: 18525, agents: 43, skills: 424, tools: 29,
    lastImprov: '2m ago',
  });
  React.useEffect(() => {
    const id = setInterval(() => {
      setStats(s => ({
        ...s,
        rules: s.rules + (Math.random() < 0.15 ? 1 : 0),
        msgs: s.msgs + (Math.random() < 0.5 ? Math.floor(Math.random()*3) : 0),
      }));
    }, 2000);
    return () => clearInterval(id);
  }, []);

  const fmt = (n) => n.toLocaleString();

  return (
    <section id="proof" style={{
      padding: '120px 40px', borderBottom: `1px solid ${FONGOS.line}`, position: 'relative',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionLabel num="07" name="Proof"/>
        <Headline size={56} style={{ marginBottom: 56, maxWidth: 700 }}>
          Live, from the actual system.<br/>
          <span style={{ color: FONGOS.inkDim }}>Updated as it thinks.</span>
        </Headline>

        <div className="fg-proof" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
          background: FONGOS.line, border: `1px solid ${FONGOS.line}`, marginBottom: 40,
        }}>
          {[
            { k: 'rules',   v: fmt(stats.rules),       l: 'learned rules', sub: 'up 14 this week' },
            { k: 'msgs',    v: fmt(stats.msgs),        l: 'memories',      sub: 'oldest · oct 2024' },
            { k: 'agents',  v: `${stats.agents}`,      l: 'agents active', sub: `${stats.skills} skills · ${stats.tools} tools` },
            { k: 'imp',     v: stats.lastImprov,       l: 'last self-improvement', sub: 'rule #1,428 accepted' },
          ].map((s) => (
            <div key={s.k} style={{
              background: FONGOS.bg, padding: '28px 24px',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: 14, right: 14,
                width: 6, height: 6, borderRadius: '50%', background: FONGOS.cyan,
                boxShadow: `0 0 8px ${FONGOS.cyan}`,
                animation: 'fongosPulse 1.8s ease-in-out infinite',
              }}/>
              <div style={{ fontFamily: FONGOS.mono, fontSize: 34, color: FONGOS.ink, fontWeight: 300, letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{ fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.2em', color: FONGOS.inkFaint, textTransform: 'uppercase', marginTop: 10 }}>{s.l}</div>
              <div style={{ fontFamily: FONGOS.mono, fontSize: 10, color: FONGOS.purpleSoft, marginTop: 6 }}>{s.sub}</div>
            </div>
          ))}
        </div>

        <div className="fg-proof-links" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1,
          background: FONGOS.line, border: `1px solid ${FONGOS.line}`,
        }}>
          {[
            { t: 'Request early access', s: 'private beta · limited seats', href: '#install', icon: '→' },
            { t: 'Read the case studies', s: 'real sessions · real audits · real outcomes', href: '#', icon: '◆' },
          ].map((l) => (
            <a key={l.t} href={l.href} style={{
              background: FONGOS.bg, padding: '24px 28px', textDecoration: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{
                  width: 40, height: 40, border: `1px solid ${FONGOS.line}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: FONGOS.mono, color: FONGOS.purpleSoft,
                }}>{l.icon}</div>
                <div>
                  <div style={{ color: FONGOS.ink, fontSize: 16 }}>{l.t}</div>
                  <div style={{ fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.15em', color: FONGOS.inkFaint, textTransform: 'uppercase', marginTop: 4 }}>{l.s}</div>
                </div>
              </div>
              <span style={{ color: FONGOS.inkDim, fontFamily: FONGOS.mono }}>→</span>
            </a>
          ))}
        </div>

        <p style={{
          textAlign: 'center', marginTop: 56, fontSize: 13,
          color: FONGOS.inkFaint, fontStyle: 'italic', maxWidth: 720, margin: '56px auto 0',
          lineHeight: 1.6,
        }}>
          designed, built, and running on a fongos instance<br/>
          that watched it happen
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Architecture, Compare, Proof });