// Home page — Terminal Hybrid with brutalist stat strip and tag pills
// Hero variants controlled by THEME.heroVariant

const Home = ({ theme, onNav }) => {
  const variant = theme.heroVariant || 'palette';

  const ascii = `  ┌─────────────────────────────────────────────────────────────────┐
  │  build w/ models · v0.1.0 · a lab by mike jenkins               │
  │                                                                 │
  │  ██████╗ ██╗    ██╗███╗   ███╗                                  │
  │  ██╔══██╗██║    ██║████╗ ████║   Data Center Manager            │
  │  ██████╔╝██║ █╗ ██║██╔████╔██║   now building with models       │
  │  ██╔══██╗██║███╗██║██║╚██╔╝██║                                  │
  │  ██████╔╝╚███╔███╔╝██║ ╚═╝ ██║   17 years · and counting        │
  │  ╚═════╝  ╚══╝╚══╝ ╚═╝     ╚═╝                                  │
  └─────────────────────────────────────────────────────────────────┘`;

  // Palette hero — command prompt with quick actions
  const PaletteHero = () => {
    const [query, setQuery] = React.useState('latest');
    const cmds = [['l', 'latest', 'writing'], ['w', 'writing/', 'writing'], ['p', 'projects/', 'projects'], ['a', 'about', 'about'], ['t', 'tags --all', 'writing'], ['r', 'rss.xml', null], ['s', 'subscribe', null], ['?', 'help', null]];
    return (
      <div style={{ padding: '20px 24px', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', background: 'var(--ink-2)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--mono)', fontSize: 13 }}>
          <span style={{ color: 'var(--brass)' }}>❯</span>
          <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            style={{ flex: 1, background: 'var(--ink-3)', border: '1px solid var(--rule)', color: 'var(--fg)', fontFamily: 'inherit', fontSize: 13, padding: '8px 12px', outline: 'none' }}
            placeholder="type a command — 'latest', 'lab', 'about', or search..."
          />
          <span style={{ color: 'var(--fg-dimmer)', fontSize: 10 }}>⏎ to run</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 14 }}>
          {cmds.map(([k, c, dest]) => (
            <button key={c} onClick={() => dest && onNav(dest)} style={{
              padding: '10px 12px', background: 'var(--ink-3)', border: '1px solid var(--rule)',
              color: 'var(--fg-dim)', fontSize: 11, textAlign: 'left', fontFamily: 'var(--mono)',
              cursor: 'pointer',
            }}>
              <span style={{ color: 'var(--brass)', marginRight: 8 }}>[{k}]</span>{c}
            </button>
          ))}
        </div>
      </div>
    );
  };

  // Boot hero — typing animation boot sequence
  const BootHero = () => {
    const [lines, setLines] = React.useState(0);
    const boot = [
      '[ OK ] loading identity... github.com/mjenkinsx9',
      '[ OK ] mounting /writing .......................... 24 entries',
      '[ OK ] mounting /lab ............................... 17 repos',
      '[ OK ] attaching langfuse.observer ................. ready',
      '[ OK ] warming embeddings cache .................... ready',
      '[ OK ] all systems nominal',
      '',
      '> welcome. the lab is open.',
    ];
    React.useEffect(() => {
      if (lines < boot.length) { const t = setTimeout(() => setLines(l => l + 1), 180); return () => clearTimeout(t); }
    }, [lines]);
    return (
      <div style={{ padding: '24px', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', background: 'var(--ink-2)', fontFamily: 'var(--mono)', fontSize: 12, minHeight: 220 }}>
        {boot.slice(0, lines).map((l, i) => {
          const isOk = l.startsWith('[ OK ]');
          const text = isOk ? l.slice(6).trimStart() : l;
          return (
            <div key={i} style={{ color: isOk ? 'var(--fg-dim)' : l.startsWith('>') ? 'var(--brass)' : 'var(--fg-dimmer)', lineHeight: 1.8 }}>
              {text}
              {isOk && <span style={{ color: '#7a8f5a', marginLeft: 8 }}>[ OK ]</span>}
            </div>
          );
        })}
        {lines < boot.length && <span style={{ display: 'inline-block', width: 8, height: 14, background: 'var(--brass)', verticalAlign: 'middle', animation: 'bwmBlink 1.1s step-end infinite' }} />}
      </div>
    );
  };

  // Manifesto hero — plain, direct statement
  const ManifestoHero = () => (
    <div style={{ padding: '48px 24px', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--brass)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 20 }}>// manifesto</div>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 22, lineHeight: 1.45, fontWeight: 500, letterSpacing: '-0.02em', maxWidth: 680, color: 'var(--fg)' }}>
        I am tired of AI demos. I want AI <span style={{ color: 'var(--brass)' }}>infrastructure</span> — code
        that runs on a Tuesday, fails in a specific way, gets fixed, and
        ships. Everything here is that. Every concept has a <span style={{ color: 'var(--brass)' }}>companion lab</span>.
        Every claim is <span style={{ color: 'var(--brass)' }}>measurable</span>.
      </div>
    </div>
  );

  return (
    <PageShell topPath="~" topCurrent="./home" nav="home" onNav={onNav}
      fullBleedChildren={null}>
      <style>{`@keyframes bwmBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }`}</style>

      <div style={{ padding: '28px 0 12px', color: 'var(--brass)', fontFamily: 'var(--mono)', fontSize: 11, lineHeight: 1.3, whiteSpace: 'pre', overflow: 'hidden' }}>
        {ascii}
      </div>

      {variant === 'palette' && <PaletteHero />}
      {variant === 'boot' && <BootHero />}
      {variant === 'manifesto' && <ManifestoHero />}

      <StatStrip stats={[
        ['articles', '24', '+3 this month', 'published'],
        ['lab repos', '17', '+1 this week', 'shipped'],
        ['stars', '1.2k', '↑ 14% / 30d', 'github'],
        ['subscribers', '892', '+48 this week', 'newsletter'],
      ]} />

      <section style={{ padding: '32px 0' }}>
        <SectionHead cmd="tail -f ~/writing/*.md" count={6} file="~/writing" />
        {[
          ['2026-04-18', '14:32', 'the agentic loop, explained by its failure modes', ['agents', 'patterns'], true, '14 min'],
          ['2026-04-11', '09:04', 'hybrid search in three lines — and a thousand tradeoffs', ['rag'], true, '11 min'],
          ['2026-04-02', '16:18', 'langfuse in production: what i actually use it for', ['infra'], false, '8 min'],
          ['2026-03-25', '11:47', 'structured output is a contract, not a format', ['fundamentals'], true, '9 min'],
          ['2026-03-18', '22:11', 'ollama on a laptop: granite-4b vs llama-3.2-3b, measured', ['oss'], true, '16 min'],
          ['2026-03-10', '08:03', 'why i stopped writing eval code by hand', ['rag'], false, '7 min'],
        ].map(([d, t, title, tags, lab, rt]) => (
          <a key={title} onClick={() => onNav('article')} style={{
            display: 'grid', gridTemplateColumns: '160px 1fr auto', gap: 20, padding: 'var(--pad-row)',
            borderBottom: '1px dashed var(--rule)', alignItems: 'baseline', cursor: 'pointer', textDecoration: 'none',
          }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-dimmer)' }}>
              [{d} {t}]
            </div>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 14, color: 'var(--fg)', fontWeight: 500, marginBottom: 6 }}>
                {title}
              </div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                {tags.map(tg => <Tag key={tg}>#{tg}</Tag>)}
                {lab && <LabBadge />}
              </div>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--fg-dimmer)' }}>{rt} →</div>
          </a>
        ))}
      </section>

      <section style={{ padding: '32px 0', borderTop: '1px solid var(--rule)' }}>
        <SectionHead cmd="cat ~/lab/featured/README.md" file="~/lab/the-claw-machine" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.03em', marginBottom: 12, color: 'var(--fg)' }}>
              # The Claw Machine
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--fg-dim)', lineHeight: 1.8, marginBottom: 20 }}>
              A multi-agent orchestrator that tries, fails, and retries with different
              strategies until it retrieves what you asked for. Written to understand
              how failure compounds — and when a good planner should stop.
            </div>
            <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
              {['python', 'claude', 'langfuse', 'mcp'].map(t => <Tag key={t}>{t}</Tag>)}
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-dimmer)' }}>
              → github.com/<span style={{ color: 'var(--brass)' }}>mjenkins/the-claw-machine</span> · 284★ · MIT
            </div>
          </div>
          <CodeBlock
            filename="quickstart.py"
            language="python"
            style={(theme && theme.codeStyle) || 'traditional'}
            code={`from claw import Machine
from claw.tools import slack, calendar

m = Machine(
    goal="summarize tuesday's standup",
    tools=[slack, calendar],
    budget=0.05,  # dollars
)
result = m.run()`}
          />
        </div>
      </section>
    </PageShell>
  );
};

window.Home = Home;