function TypedLine({ text, speed = 38, onDone, className = '' }) {
  const [out, setOut] = React.useState('');
  React.useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i++;
      setOut(text.slice(0, i));
      if (i >= text.length) {
        clearInterval(id);
        onDone && onDone();
      }
    }, speed);
    return () => clearInterval(id);
  }, [text]);
  return <span className={className}>{out}</span>;
}

function Hero({ onOpenPalette }) {
  const [step, setStep] = React.useState(0);
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="dot-live" /> <span>principal ai lead · austin, tx</span>
          </div>
          <h1 className="display">
            <span className="display-line">
              <TypedLine text="Brian Leach." speed={55} onDone={() => setStep(1)} />
              {step < 1 && <span className="caret" />}
            </span>
            {step >= 1 && (
              <span className="display-line muted">
                <TypedLine text="I build agents and the teams that ship them." speed={30} onDone={() => setStep(2)} />
                {step < 2 && <span className="caret" />}
              </span>
            )}
          </h1>

          <p className="lede">
            I write production agents, drive AI adoption across engineering orgs,
            and lead the teams that ship them. Currently
            Principal AI Lead at <em>Rugiet</em>, where I drove company-wide
            AI adoption, built a clinical intake agent inside HIPAA boundaries,
            and shipped a React Native app in 24 days with agentic workflows.
            Before that, 15 years of consumer platforms at
            <em> HelloFresh</em>, <em>Factor</em>, <em>Orbitz</em> and
            <em> Expedia</em>. I want to do this work where the models
            themselves get built.
          </p>

          <div className="hero-actions">
            <button className="btn btn-primary" onClick={onOpenPalette}>
              <span>Open command palette</span>
              <kbd className="kbd-inline">⌘K</kbd>
            </button>
            <a className="btn btn-ghost" href="#work">
              See the work <span aria-hidden>→</span>
            </a>
          </div>

          <div className="hero-meta">
            <div className="meta-row">
              <span className="meta-k">current</span>
              <span className="meta-v">Principal AI Lead · Rugiet (telehealth)</span>
            </div>
            <div className="meta-row">
              <span className="meta-k">recent</span>
              <span className="meta-v">React Native mobile app shipped in 24 days</span>
            </div>
            <div className="meta-row">
              <span className="meta-k">before</span>
              <span className="meta-v">$300M+ customer value delivered at HelloFresh</span>
            </div>
          </div>
        </div>

        <aside className="hero-aside">
          <div className="card card-now">
            <div className="card-head">
              <span className="tag">
                <span className="dot-live" /> now
              </span>
              <span className="muted mono small">updated apr 2026</span>
            </div>
            <ul className="now-list">
              <li><span className="now-k">building</span> an AI conversational intake agent for clinical assessments</li>
              <li><span className="now-k">running</span> weekly "AI Vibe Chat" to level up the whole eng org</li>
              <li><span className="now-k">measuring</span> DORA: 48-hr shipping cycles @ 95% success</li>
              <li><span className="now-k">shipped</span> Rugiet rebrand, live Q1 2026</li>
              <li><span className="now-k">shipped</span> React Native iOS app in 24 days with agentic workflows</li>
            </ul>
          </div>

          <Avatar size={120} />
        </aside>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.TypedLine = TypedLine;