// About page — 2-column at wide widths: sticky sidebar + prose column.
// Full-width certs grid at the bottom.
const About = ({ onNav }) => {
  const certs = [
    { id: 'ccnp',    name: 'CCNP Enterprise',          issuer: 'Cisco',             year: '2023', expires: '2026-08', img: 'assets/badges/ccnp.png' },
    { id: 'sec',     name: 'Security+ (ce)',           issuer: 'CompTIA',           year: '2021', expires: '2027-03', img: 'assets/badges/sec-plus.png' },
    { id: 'net',     name: 'Network+ (ce)',            issuer: 'CompTIA',           year: '2019', expires: '2027-03', img: 'assets/badges/net-plus.png' },
    { id: 'aplus',   name: 'A+ (ce)',                  issuer: 'CompTIA',           year: '2018', expires: '2027-03', img: 'assets/badges/a-plus.png' },
    { id: 'ccav',    name: 'CCA-V · Virtualization',   issuer: 'Citrix',            year: '2020', expires: 'no expiry', img: 'assets/badges/cca-v.png' },
    { id: 'extreme', name: 'Extreme Switching · Admin', issuer: 'Extreme Networks', year: '2022', expires: 'no expiry', img: 'assets/badges/extreme-switching.png' },
    { id: 'lfs',     name: 'Intro to Linux · LFS101',  issuer: 'Linux Foundation',  year: '2019', expires: 'no expiry', img: 'assets/badges/linux-foundation.png' },
  ];

  const sidebarItems = [
    ['based',   "Somewhere the power doesn't flicker."],
    ['stack',   'Python · Claude · Langfuse · MCP · Ollama · Postgres · pgvector'],
    ['writing', '24 entries · 6 with companion labs'],
    ['reach',   'hi@buildwithmodels.com'],
    ['alias',   '@mjenkins'],
  ];

  return (
    <PageShell topPath="~/about" topCurrent="./cat about.md" nav="about" onNav={onNav}>
      <style>{`
        .bwm-about-grid { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding: 48px 0 0; }
        @media (max-width: 900px) { .bwm-about-grid { grid-template-columns: 1fr; gap: 32px; } }
        .bwm-about-side { position: sticky; top: 24px; align-self: start; }
        @media (max-width: 900px) { .bwm-about-side { position: static; } }
      `}</style>

      <div className="bwm-about-grid">
        {/* ——— Sidebar ——— */}
        <aside className="bwm-about-side" style={{ fontFamily: 'var(--mono)' }}>
          <div style={{ fontSize: 11, color: 'var(--brass)', marginBottom: 14 }}>
            ~/about.md
            <div style={{ color: 'var(--fg-dimmer)', fontSize: 10, marginTop: 4 }}>last edit 2026-04-18</div>
          </div>

          <h1 style={{ fontSize: 30, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 14px', color: 'var(--fg)' }}>
            # whoami
          </h1>

          {/* Portrait — duotone filtered to match the terminal aesthetic */}
          <div style={{ border: '1px solid var(--rule)', background: 'var(--ink-2)', marginBottom: 18, width: 240 }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px',
              borderBottom: '1px solid var(--rule)', fontFamily: 'var(--mono)', fontSize: 10,
              color: 'var(--fg-dimmer)', letterSpacing: '0.08em', textTransform: 'uppercase',
            }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: '#b85c3a' }} />
              <div style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--brass)' }} />
              <div style={{ width: 6, height: 6, borderRadius: 3, background: '#7a8f5a' }} />
              <span style={{ marginLeft: 6 }}>portrait.jpg</span>
              <span style={{ flex: 1 }} />
              <span>1×1 · rgb</span>
            </div>
            <div style={{ position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden', background: 'var(--ink-3)' }}>
              <img src="assets/portrait.jpg" alt="Mike Jenkins" style={{
                width: '100%', height: '100%', objectFit: 'cover',
                filter: 'grayscale(1) contrast(1.08) brightness(0.92) sepia(0.45) hue-rotate(-8deg) saturate(1.1)',
                mixBlendMode: 'normal',
              }} />
              {/* scanline + vignette overlay for CRT/terminal feel */}
              <div style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px)',
                mixBlendMode: 'multiply',
              }} />
              <div style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%)',
              }} />
              {/* corner tick marks */}
              <div style={{ position: 'absolute', top: 6, left: 6, width: 10, height: 10, borderTop: '1px solid var(--brass)', borderLeft: '1px solid var(--brass)' }} />
              <div style={{ position: 'absolute', top: 6, right: 6, width: 10, height: 10, borderTop: '1px solid var(--brass)', borderRight: '1px solid var(--brass)' }} />
              <div style={{ position: 'absolute', bottom: 6, left: 6, width: 10, height: 10, borderBottom: '1px solid var(--brass)', borderLeft: '1px solid var(--brass)' }} />
              <div style={{ position: 'absolute', bottom: 6, right: 6, width: 10, height: 10, borderBottom: '1px solid var(--brass)', borderRight: '1px solid var(--brass)' }} />
            </div>
            <div style={{
              padding: '8px 10px', borderTop: '1px solid var(--rule)',
              fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--fg-dimmer)',
              display: 'flex', justifyContent: 'space-between',
            }}>
              <span>mike.jenkins</span>
              <span style={{ color: 'var(--brass)' }}>◉ online</span>
            </div>
          </div>

          <div style={{ fontSize: 13, color: 'var(--fg-dim)', lineHeight: 1.55, fontStyle: 'italic', borderLeft: '2px solid var(--brass)', paddingLeft: 12, marginBottom: 24 }}>
            Mike Jenkins. Data Center Manager. 17 years of infrastructure experience. Now building with models.
          </div>

          <div style={{ borderTop: '1px solid var(--rule)', fontSize: 11, color: 'var(--fg-dim)' }}>
            {sidebarItems.map(([k, v]) => (
              <div key={k} style={{
                display: 'grid', gridTemplateColumns: '72px 1fr', gap: 10,
                padding: '10px 0', borderBottom: '1px dashed var(--rule)',
              }}>
                <div style={{ color: 'var(--brass)', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', paddingTop: 2 }}>{k}</div>
                <div style={{ lineHeight: 1.55 }}>{v}</div>
              </div>
            ))}
          </div>
        </aside>

        {/* ——— Prose column ——— */}
        <article style={{ fontFamily: 'var(--mono)', maxWidth: 720 }}>
          <h2 style={{ fontSize: 18, color: 'var(--brass)', marginTop: 0, marginBottom: 14, letterSpacing: '-0.02em' }}>§ 01 — the long version</h2>
          <p style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.8, margin: '0 0 16px' }}>
            I spent seventeen years making servers stop breaking. Rack-and-stack, then
            config-management, then Kubernetes, then the unholy yaml gauntlet that sits
            underneath every modern cloud. It was honest work. Computers that don't come back
            up at 3am are not a fun thing to be responsible for.
          </p>
          <p style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.8, margin: '0 0 16px' }}>
            In late 2022 I paid twenty dollars for ChatGPT and spent the next two years
            pretending I could still focus on anything else. I could not. The thing people
            kept calling "a toy" could read a stack trace faster than I could, and it was
            obviously going to be how software got built in the future I was going to live in.
          </p>

          <h2 style={{ fontSize: 18, color: 'var(--brass)', marginTop: 32, marginBottom: 14, letterSpacing: '-0.02em' }}>§ 02 — the transition</h2>
          <p style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.8, margin: '0 0 16px' }}>
            So I did the thing you are supposed to do. I built. I broke things on purpose.
            I read everything IndyDevDan and Simon Willison put online. I stopped reading
            about prompt engineering after I realized the word "prompt" was a synonym for
            "interface" and went back to first principles.
          </p>
          <p style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.8, margin: '0 0 16px' }}>
            The infrastructure instincts turned out to be a superpower. The problems in AI
            production — reliability, observability, cost, deployment, retries, graceful
            degradation — are the exact problems I've been solving my whole career. The
            models are new. The operational reality isn't.
          </p>

          <h2 style={{ fontSize: 18, color: 'var(--brass)', marginTop: 32, marginBottom: 14, letterSpacing: '-0.02em' }}>§ 03 — why this site exists</h2>
          <p style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.8, margin: '0 0 16px' }}>
            I want to work on AI systems full-time. This site is my interview. Every article
            has a companion repo. Every claim is measurable. If you're hiring AI engineers,
            you already have enough résumés. You don't have enough people who ship.
          </p>
        </article>
      </div>

      {/* ——— Certifications — full-width band ——— */}
      <section style={{ padding: '56px 0 72px' }}>
        <SectionHead cmd="ls -la ~/certs/" count={certs.length} file={`${certs.length} active · verifiable on request`} />
        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${certs.length}, minmax(0, 1fr))`,
          border: '1px solid var(--rule)', background: 'var(--ink)',
        }}>
          {certs.map((c, i) => (
            <div key={c.id} style={{
              padding: 18,
              borderRight: i < certs.length - 1 ? '1px solid var(--rule)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 12,
              fontFamily: 'var(--mono)',
            }}>
              <div style={{
                position: 'relative', aspectRatio: '1 / 1', width: '100%',
                border: '1px dashed var(--rule)', background: 'var(--ink-2)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden',
              }}>
                <img src={`${c.img}?v=2`} alt={c.name}
                  onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.nextSibling.style.display = 'flex'; }}
                  style={{ maxWidth: '82%', maxHeight: '82%', objectFit: 'contain' }} />
                <div style={{
                  display: 'none', position: 'absolute', inset: 0,
                  flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
                  color: 'var(--fg-dimmer)', fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase',
                }}>
                  <div style={{ width: 54, height: 54, border: '2px solid var(--brass)', borderRadius: 27, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brass)', fontSize: 15, fontWeight: 700 }}>
                    {c.name.split(' ').map(w => w[0]).slice(0, 2).join('')}
                  </div>
                  <span>badge.png</span>
                </div>
                <div style={{ position: 'absolute', top: 6, right: 6, fontSize: 9, color: 'var(--fg-dimmer)', letterSpacing: '0.08em' }}>
                  #{String(i + 1).padStart(2, '0')}
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ color: '#7a8f5a', fontSize: 10 }}>●</span>
                <span style={{ fontSize: 9, color: 'var(--fg-dimmer)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>active</span>
                <span style={{ flex: 1 }} />
                <span style={{ fontSize: 10, color: 'var(--fg-dimmer)' }}>{c.year}</span>
              </div>
              <div>
                <div style={{ fontSize: 12, color: 'var(--fg)', fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 4, lineHeight: 1.3 }}>{c.name}</div>
                <div style={{ fontSize: 10, color: 'var(--fg-dim)' }}>{c.issuer}</div>
              </div>
              <div style={{
                marginTop: 'auto', paddingTop: 8, borderTop: '1px dashed var(--rule)',
                display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'var(--fg-dimmer)',
              }}>
                <span>exp {c.expires}</span>
                <span style={{ color: 'var(--brass)' }}>→ verify</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </PageShell>
  );
};

window.About = About;