function LiveSignal() {
  const [tick, setTick] = React.useState(0);
  const [logs, setLogs] = React.useState([
    { t: '18:42:07', tag: 'deploy', prod: 'kinship', msg: 'build #4821 · passed · 2.3s', cls: 'ok' },
    { t: '18:41:14', tag: 'infer',  prod: 'hirewise', msg: 'voice-session / sess_8af · +12s', cls: 'info' },
    { t: '18:40:02', tag: 'commit', prod: 'fitforge', msg: 'refactor: schema v3 · main', cls: 'mut' },
    { t: '18:38:55', tag: 'spec',   prod: 'jersey',   msg: 'draft · orders / bulk flow', cls: 'amber' },
    { t: '18:37:11', tag: 'note',   prod: 'studio',   msg: 'field-notes · vol.08 scheduled', cls: 'mut' },
  ]);
  React.useEffect(() => {
    const id = setInterval(() => setTick(x => x + 1), 80);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    const id = setInterval(() => {
      const pool = [
        ['deploy', 'kinship',  'build passed · 1.9s', 'ok'],
        ['infer',  'hirewise', 'tokens / 1.2k out', 'info'],
        ['commit', 'fitforge', 'fix: streak rollover', 'mut'],
        ['cron',   'jersey',   'settle / batch-run ok', 'ok'],
        ['alert',  'studio',   'queue drained · 0 jobs', 'mut'],
        ['ship',   'kinship',  'v1.4.2 → production', 'ok'],
        ['spec',   'app',      'draft / unified auth', 'amber'],
      ];
      const pick = pool[Math.floor(Math.random()*pool.length)];
      const d = new Date();
      const t = `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`;
      setLogs(l => [{ t, tag: pick[0], prod: pick[1], msg: pick[2], cls: pick[3] }, ...l].slice(0, 6));
    }, 2400);
    return () => clearInterval(id);
  }, []);

  // live bar graphs (updated on tick)
  const bars = React.useMemo(() => {
    return Array.from({ length: 32 }, (_, i) => {
      const v = 0.2 + Math.abs(Math.sin(i*0.4 + tick*0.08)) * 0.5 + Math.random()*0.08;
      return v;
    });
  }, [tick]);

  return (
    <section className="section tight live-sec" id="signal">
      <div className="container">
        <div className="sec-head">
          <div className="tag">§ 02 / Signal</div>
          <div>
            <h2>The studio, <em>live</em>.<br/>Not a landing page.</h2>
            <p className="lede">Most studios show you a polished reel. We show you the log file. Here's what the Xailos runtime looks like, right now — deploys, inferences, drafts, fixes.</p>
          </div>
        </div>

        <div className="live-grid">
          {/* Terminal feed */}
          <div className="live-term">
            <div className="term-hdr">
              <div className="dots"><i></i><i></i><i></i></div>
              <div className="title">xailos://runtime/events.log <span className="tail">— tail -f</span></div>
              <div className="stamp">live · <span className="gn">● rec</span></div>
            </div>
            <div className="term-body">
              {logs.map((l, i) => (
                <div className={`log-row r-${i}`} key={l.t + l.msg}>
                  <span className="ts">{l.t}</span>
                  <span className={`tg tg-${l.cls}`}>[{l.tag.padEnd(6,' ')}]</span>
                  <span className="pd">{l.prod.padEnd(9,' ')}</span>
                  <span className="msg">{l.msg}</span>
                </div>
              ))}
              <div className="log-row cursor-row">
                <span className="ts">&gt;</span>
                <span className="cursor">_</span>
              </div>
            </div>
          </div>

          {/* Right column — metric tiles */}
          <div className="live-metrics">
            <div className="mtile">
              <div className="mhead">Uptime · 30d</div>
              <div className="mval">99.98<span>%</span></div>
              <div className="mbars">
                {bars.slice(0,24).map((v,i) => (
                  <span key={i} style={{ height: `${Math.max(4, v*100)}%` }}
                    className={i === bars.length-1 ? 'now' : ''}/>
                ))}
              </div>
              <div className="mfoot"><span>jitter ± 40ms</span><span className="gn">● all green</span></div>
            </div>
            <div className="mtile">
              <div className="mhead">Ships · last 90d</div>
              <div className="mval">47<span> releases</span></div>
              <div className="mgrid">
                {Array.from({length: 90}).map((_,i) => {
                  const active = [0,3,6,9,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87].includes(i);
                  const hot = i === 87;
                  return <span key={i} className={`c ${active?'on':''} ${hot?'hot':''}`}/>;
                })}
              </div>
              <div className="mfoot"><span>Mon–Fri cadence</span><span>→ next Fri</span></div>
            </div>
            <div className="mtile tall">
              <div className="mhead">Inference · requests / min</div>
              <div className="mval">1,284<span> rpm</span></div>
              <div className="spark">
                <svg viewBox="0 0 300 64" preserveAspectRatio="none" width="100%" height="64">
                  <polyline fill="none" stroke="var(--live)" strokeWidth="1.3"
                    points={bars.map((v,i) => `${(i/(bars.length-1))*300},${64-v*60}`).join(' ')}/>
                  <polyline fill="none" stroke="var(--accent)" strokeWidth="1.1" strokeDasharray="2 3"
                    points={bars.map((v,i) => `${(i/(bars.length-1))*300},${64-(v*0.75+0.1)*60}`).join(' ')}/>
                  <circle cx={(bars.length-1)/(bars.length-1)*300}
                    cy={64-bars[bars.length-1]*60} r="3" fill="var(--live)"/>
                </svg>
              </div>
              <div className="mfoot mini">
                <span>p50 · 84ms</span>
                <span>p95 · 212ms</span>
                <span>p99 · 410ms</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', k: 'DISCOVER', t: <>A <em>conversation</em>, not a brief.</>, d: '30-minute call. If it’s the right fit, we write a one-page spec together — plain language, not deliverables.', badge: 'wk 01' },
    { n: '02', k: 'PROTOTYPE', t: <>A <em>thin slice</em>, fully working.</>, d: 'Week two ships a narrow, end-to-end prototype. Real auth, real database, real UI. No mock data.', badge: 'wk 02' },
    { n: '03', k: 'SHIP', t: <>Weekly <em>releases</em>, visible.</>, d: 'From week three, a release every Friday. A changelog you can point to. Invoices tied to deploys.', badge: 'wk 03+' },
    { n: '04', k: 'HAND-OFF', t: <>Yours. <em>Fully</em>.</>, d: 'Code, infra, playbook — transferred cleanly. We stay one call away, for as long as you want us.', badge: 'wk N' },
  ];
  return (
    <section className="section process-sec" id="process">
      <div className="container">
        <div className="sec-head">
          <div className="tag">§ 04 / Process</div>
          <div>
            <h2>From <em>hello</em> to <em>ship</em><br/>in four weeks.</h2>
            <p className="lede">Our process is a short, legible loop — not a funnel. You know where things stand, always.</p>
          </div>
        </div>

        <div className="process-track">
          <div className="rail">
            <span className="pulse-dot"></span>
          </div>
          {steps.map((s, i) => (
            <div className={`pstep`} key={s.n} style={{ animationDelay: `${i*120}ms` }}>
              <div className="node">
                <span className="node-dot"></span>
                <span className="node-ring"></span>
              </div>
              <div className="pbody">
                <div className="pmeta">
                  <span className="pn">{s.n}</span>
                  <span className="pk">{s.k}</span>
                  <span className="pb">◉ {s.badge}</span>
                </div>
                <div className="pt">{s.t}</div>
                <div className="pd">{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Products() {
  const cards = [
    {
      key: 'kinship',
      meta: '01 · Community SaaS',
      status: 'live', statusLabel: 'live · v1.4',
      url: 'kinship.xailos.com',
      title: <>Kinship.</>,
      desc: 'The quiet back-office for community associations — members, dues, notices, compliance, all in one place.',
    },
    {
      key: 'hirewise',
      meta: '02 · AI assistant',
      status: 'live', statusLabel: 'live · v0.9',
      url: 'hirewise.xailos.com',
      title: <><em>HireWise</em>.</>,
      desc: 'AI-guided interview prep. Real feedback on real answers — not canned scripts.',
    },
    {
      key: 'jersey',
      meta: '03 · Club ops',
      status: 'live', statusLabel: 'live · v1.1',
      url: 'jersey.xailos.com',
      title: <>Jersey.</>,
      desc: 'Jersey orders for clubs and communities. Sizes, numbers, payments — one link.',
    },
    {
      key: 'fitforge',
      meta: '04 · Workout companion',
      status: 'beta', statusLabel: 'private beta',
      url: 'fitforge.xailos.com',
      title: <><em>FitForge</em>.</>,
      desc: 'A quiet log for your training week. Knows your program, not your feed.',
    },
  ];

  const statusClass = (s) => s === 'live' ? '' : s === 'beta' ? 'beta' : 'soon';

  return (
    <section className="section" id="products">
      <div className="container">
        <div className="sec-head">
          <div className="tag">§ 01 / Products</div>
          <div>
            <h2>Four tools.<br/><em>Each</em> a product, not a platform.</h2>
            <p className="lede">We ship small, sharp software for specific verticals. Every product earns its own URL — and its own weekly release.</p>
          </div>
        </div>

        <div className="products">
          {cards.map(c => (
            <a key={c.key} href={`https://${c.url}`} className="pcard">
              <div className="hdr">
                <span>{c.meta}</span>
                <span className={`status ${statusClass(c.status)}`}>
                  <span className="d"></span>{c.statusLabel}
                </span>
              </div>
              <h3>{c.title}</h3>
              <p className="desc">{c.desc}</p>
              <div className="foot">
                <span className="url">→ {c.url}</span>
                <span className="arrow">Visit →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Capabilities() {
  const cols = [
    { num: '01', title: <>What we <em>ship</em></>, items: [
      ['Multi-tenant SaaS', 'full-stack'],
      ['AI-assisted tools', 'llm · voice'],
      ['Ops dashboards', 'b2b · b2c'],
      ['Internal automations', 'api · cron'],
    ]},
    { num: '02', title: <>How we <em>ship</em></>, items: [
      ['Weekly releases', 'every Friday'],
      ['Small teams', '1–3 people'],
      ['Talk to users', 'every week'],
      ['No meetings', 'async first'],
    ]},
    { num: '03', title: <>What we <em>use</em></>, items: [
      ['TypeScript · Go', 'production'],
      ['Postgres · SQLite', 'data'],
      ['Claude · GPT', 'inference'],
      ['Cloudflare · Fly', 'edge + compute'],
    ]},
  ];
  return (
    <section className="section tight" id="studio">
      <div className="container">
        <div className="sec-head">
          <div className="tag">§ 03 / Studio</div>
          <div>
            <h2>A studio, not<br/>a <em>team page</em>.</h2>
            <p className="lede">The studio is the hero. The products do the talking — and the release log backs them up.</p>
          </div>
        </div>
        <div className="caps">
          {cols.map(col => (
            <div className="col" key={col.num}>
              <div className="num">{col.num}</div>
              <h4>{col.title}</h4>
              <ul>
                {col.items.map(([t, s], i) => (
                  <li key={i}><span>{t}</span><span className="sm">{s}</span></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Philosophy() {
  return (
    <section className="quote" id="philosophy">
      <div className="container">
        <p className="q">
          Taste is the quiet discipline of building <em>fewer</em> things — <em>more</em> carefully.
        </p>
        <div className="cite">§ Field notes, vol. 03</div>
      </div>
    </section>
  );
}

function Principles() {
  const items = [
    ['01', <>Ship <em>weekly</em>.</>, 'A release every Friday. Momentum compounds; perfection plateaus.'],
    ['02', <>Talk to <em>users</em>.</>, 'Every feature traces back to a real conversation with a real person.'],
    ['03', <>Stay <em>small</em>.</>, 'One product, one owner. No committees. No handoffs.'],
    ['04', <>AI <em>quietly</em>.</>, 'Assist, don’t perform. If the model isn’t adding a decision, leave it out.'],
  ];
  return (
    <section className="section tight" id="principles">
      <div className="container">
        <div className="sec-head">
          <div className="tag">§ 05 / Principles</div>
          <div>
            <h2>Four rules.<br/>We don't <em>break</em> them.</h2>
          </div>
        </div>
        <div className="principles">
          {items.map(([n, t, d], i) => (
            <div className="item" key={i}>
              <div className="n">{n}</div>
              <div>
                <div className="t">{t}</div>
                <div className="d">{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Products, Capabilities, Philosophy, Principles, LiveSignal, Process });