// ==== About ==========================================================
function About() {
  return (
    <section id="about" className="scene" data-screen-label="02 About">
      <div className="scene-head">
        <div className="eyebrow">About</div>
        <h2>
          Half researcher. Half engineer.<br />
          <em>Both before noon.</em>
        </h2>
        <p className="lede">
          I write production code for problems that don&rsquo;t have a textbook yet.
        </p>
      </div>

      <div className="about-grid">
        <div>
          <div className="lead lift-cap">
            Most agentic AI lives in demos and slide decks. Mine lives in production &mdash; where an autonomous agent is the strangest insider on the org chart: brilliant, tireless, and one poisoned instruction from disaster. I architect the runtime that lets it move fast while every action stays scoped, logged, and provable &mdash; closing the gap between what an agent <em>can</em> do and what it should be <em>allowed</em> to.
          </div>

          <div className="body" style={{marginTop: 32}}>
            <p>
              At <b style={{color:"var(--ink)"}}>Eli Lilly</b> I lead the Agentic AI &amp; Security platform &mdash; a four-tier multi-agent stack that autonomously resolves 800+ tickets a month across 25 platform services, plus the enterprise MCP gateway: 8 servers, 130+ AI-callable tools, 7 layers of defense. I authored the Enterprise Agentic Identity Framework and the CyberWay standard for security-first AI connectors.
            </p>
            <p>
              The security half is the point. I design and audit against the agentic threat model the rest of the field is only now standardizing &mdash; the <b style={{color:"var(--ink)"}}>OWASP Top 10 for Agentic Applications</b>, <b style={{color:"var(--ink)"}}>CSA MAESTRO</b>, <b style={{color:"var(--ink)"}}>MITRE ATLAS</b> and the <b style={{color:"var(--ink)"}}>NIST AI RMF</b> &mdash; closing prompt injection, identity abuse, memory poisoning, A2A exploitation and the untraceability gap with controls that actually run in production.
            </p>
            <p>
              Before that I was a founding engineer at <b style={{color:"var(--ink)"}}>SuperAGI</b> &mdash; the open-source agent framework that crossed <b style={{color:"var(--ink)"}}>21,000 GitHub stars</b> and 15k developers &mdash; and a Samsung Research intern designing optimization algorithms for 5G mobile edge computing.
            </p>
            <p>
              Now I&rsquo;m shipping <b style={{color:"var(--ink)"}}>MANTIS</b> (open-source autonomous SOC, 55K LOC, NullCon AI Paper of the Year), <b style={{color:"var(--ink)"}}>AEGIS</b> (production runtime governance for agents), <b style={{color:"var(--ink)"}}>Agent Forensics</b> (forensically sound attribution of agent actions &mdash; Halpern&ndash;Pearl causality, EU AI Act audit controls), and <b style={{color:"var(--ink)"}}>AgentBridge</b> (OpenAI Agents SDK &times; MCP reference) &mdash; distilling a Fortune-500 GenAI rollout into a turnkey toolkit for AI startups.
            </p>
          </div>
        </div>

        <div className="right-col">
          <div className="photo-slot tick-frame" style={{aspectRatio: "4 / 5", marginBottom: 18, padding: 0, overflow: "hidden"}}>
            <img src="assets/portrait.jpeg" alt="Ayush Kumar" style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}} />
          </div>
          <div>
            <div className="spec-card"><span className="k">Role</span><span className="v">Lead Architect &mdash; Agentic AI &amp; Security</span></div>
            <div className="spec-card"><span className="k">Org</span><span className="v">Eli Lilly and Company</span></div>
            <div className="spec-card"><span className="k">Prior</span><span className="v">SuperAGI &middot; Samsung Research</span></div>
            <div className="spec-card"><span className="k">Edu</span><span className="v">BMS College of Engineering &mdash; CGPA 9.2/10</span></div>
            <div className="spec-card"><span className="k">Based</span><span className="v">Bangalore &mdash; open to relocation</span></div>
            <div className="spec-card"><span className="k">Stack</span><span className="v">Python &middot; TypeScript &middot; Rust &middot; Claude SDK &middot; MCP &middot; AWS</span></div>
            <div className="spec-card"><span className="k">Reading</span><span className="v">Multi-agent runtimes &middot; NHI governance &middot; post-LLM observability</span></div>
          </div>
        </div>
      </div>

      <NumbersStrip />
    </section>
  );
}

function NumbersStrip() {
  return (
    <div style={{
      marginTop: 96,
      paddingTop: 36,
      borderTop: "1px solid var(--panel-stroke)",
      display: "grid",
      gridTemplateColumns: "repeat(6, minmax(0, 1fr))",
      gap: 32,
    }} className="numbers-strip">
      {AYUSH.NUMBERS.map((n, i) => (
        <div key={i} className="stat">
          <div className="v">{n.v}</div>
          <div className="l">{n.l}</div>
        </div>
      ))}
      <style>{`
        @media (max-width: 880px) {
          .numbers-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { About });