// Terminal-style About section with fake prompt + streaming output
function TerminalAbout() {
  const lines = [
    { kind: 'prompt', text: 'whoami' },
    { kind: 'out', text: 'brian leach · principal ai lead' },
    { kind: 'out', text: 'based in austin, tx · shipping since the dial-up era' },
    { kind: 'prompt', text: 'cat philosophy.md' },
    {
      kind: 'md',
      text:
        "The prompt is the highest-leverage file in the repo.\n\n" +
        "I wrote a kickstart spec one evening, handed it to Claude Code, and woke\n" +
        "up to a working TypeScript monorepo: 6k lines, 176 tests, 5 ADRs. The\n" +
        "code is downstream. The architecture, the verification gates, the\n" +
        "definition of done for every milestone: all of that was decided in prose\n" +
        "the night before. That's the shift I care about. The work didn't\n" +
        "disappear. It moved up the stack, into the specification.\n\n" +
        "I don't think agents replace engineers. I think they change what\n" +
        "engineering means. The job becomes: write a spec careful enough that\n" +
        "an agent can execute it, know when to verify by hand, and know when\n" +
        "to stop and say 'this isn't ready.' I documented 19 limitations in\n" +
        "claude-to-figma because shipping honest is more useful than shipping\n" +
        "polished. Same reason I wrote that managed agents aren't ready for\n" +
        "conversational use yet. The interesting part is the boundary.\n\n" +
        "15 years of consumer platforms taught me what production means.\n" +
        "The last year of building with Claude taught me what's next.",
    },
    { kind: 'prompt', text: 'echo $INTERESTS' },
    { kind: 'out', text: 'ai-native products · small teams that ship · good evals · good taste · riding singletrack · playing pinball · chasing high scores' },
    { kind: 'comment', text: '# end of file', cursor: true },
  ];

  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    if (shown >= lines.length) return;
    const delay = lines[shown].kind === 'md' ? 500 : 280;
    const id = setTimeout(() => setShown((s) => s + 1), delay);
    return () => clearTimeout(id);
  }, [shown]);

  // Trigger start when scrolled into view
  const ref = React.useRef(null);
  const [started, setStarted] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          setStarted(true);
          setShown(1);
        }
      });
    }, { threshold: 0.2 });
    io.observe(el);
    return () => io.disconnect();
  }, [started]);

  return (
    <section id="about" className="section" data-screen-label="02 About">
      <div className="section-head">
        <span className="section-num">02</span>
        <h2 className="section-title">About</h2>
        <span className="section-rule" />
      </div>

      <div className="terminal" ref={ref}>
        <div className="terminal-chrome">
          <span className="tc-dot" /><span className="tc-dot" /><span className="tc-dot" />
          <span className="terminal-title">brian@leach.sh · zsh · 96×28</span>
        </div>
        <div className="terminal-body">
          {lines.slice(0, started ? shown : 0).map((l, i) => {
            if (l.kind === 'prompt') {
              return (
                <div key={i} className="t-line">
                  <span className="t-prompt">~/brian-leach</span>
                  <span className="t-sep">❯</span>
                  <span className="t-cmd">{l.text}</span>
                  {l.cursor && <span className="caret caret-term" />}
                </div>
              );
            }
            if (l.kind === 'out') {
              return <div key={i} className="t-line t-out">{l.text}</div>;
            }
            if (l.kind === 'md') {
              return (
                <pre key={i} className="t-md">{l.text}</pre>
              );
            }
            if (l.kind === 'comment') {
              return (
                <div key={i} className="t-line t-comment">
                  <span className="t-comment-text">{l.text}</span>
                  {l.cursor && <span className="caret caret-term" />}
                </div>
              );
            }
            if (l.kind === 'grid') {
              return (
                <div key={i} className="t-grid">
                  {l.items.map((it) => (
                    <span key={it} className="t-grid-item">{it}</span>
                  ))}
                </div>
              );
            }
            return null;
          })}
        </div>
      </div>
    </section>
  );
}

window.TerminalAbout = TerminalAbout;