const { Link: Link_ab } = ReactRouterDOM;

function About() {
  useSEO({
    title: 'About Cyrion AI | Intelligence-grade Offensive Security',
    description: "Cyrion AI builds autonomous AI agents that pentest web, API, mobile, cloud and LLM surfaces continuously. Learn our mission, story and the team behind it.",
    path: '/about',
  });
  return (
    <div data-screen-label="about">
      <section className="page-hero">
        <div className="page">
          <div className="breadcrumb" style={{ marginBottom: 20 }}><Link_ab to="/">Home</Link_ab><span>/</span><span className="ink">About</span></div>
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot" />About Cyrion</div>
          <h1 className="h1" style={{ maxWidth: 820 }}>Offense, run the way an adversary actually runs it.</h1>
          <p className="body-lg" style={{ maxWidth: 640, marginTop: 22 }}>Cyrion is built by operators who spent a decade on both sides of the engagement table — running red teams, and cleaning up after real breaches. We started Cyrion because point-in-time pentests could not keep pace with how fast production environments change.</p>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <div className="prose">
            <h2>Why we exist</h2>
            <p>Traditional penetration testing gives you a snapshot: a report, once or twice a year, describing what a small human team found in a fixed window. Attack surfaces don't sit still — new endpoints ship weekly, LLM features ship daily, and adversaries probe continuously. The gap between the last pentest and the next incident is where breaches happen.</p>
            <p>Cyrion closes that gap with a swarm of offensive-AI agents that reason about your environment the way a skilled human red teamer would — chaining low-severity findings into demonstrable attack paths — but running continuously, at machine speed, with every exploit candidate validated in a sandbox before it's reported.</p>
            <blockquote>We don't sell a scanner. We sell a standing red team that never goes home.</blockquote>
            <p>Every finding Cyrion reports is a reproducible exploit, not a signature match — with the evidence trail auditors and engineering teams both need.</p>
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="page">
          <div style={{ maxWidth: 640, marginBottom: 44 }}><div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot" />Principles</div><h2 className="h2">What we hold ourselves to</h2></div>
          <div className="auto-fit-240">
            <div className="card" style={{ padding: 24 }}><div className="h3" style={{ marginBottom: 8 }}>Adversarial rigor</div><p className="body">We test the way attackers actually operate — chained, opportunistic, and unconcerned with your architecture diagrams.</p></div>
            <div className="card" style={{ padding: 24 }}><div className="h3" style={{ marginBottom: 8 }}>Auditor-ready evidence</div><p className="body">Every finding ships with reproduction steps, request logs and remediation guidance — not a severity score with no proof.</p></div>
            <div className="card" style={{ padding: 24 }}><div className="h3" style={{ marginBottom: 8 }}>Autonomous, not reckless</div><p className="body">Exploit candidates are validated against a sandbox replica before anything touches production. You control the blast radius.</p></div>
            <div className="card" style={{ padding: 24 }}><div className="h3" style={{ marginBottom: 8 }}>Built by operators</div><p className="body">Our team has run engagements against Fortune 500 and high-growth startups alike. We build the tool we always wished we had.</p></div>
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="page">
          <div style={{ maxWidth: 640, marginBottom: 44 }}><div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot" />Timeline</div><h2 className="h2">How we got here</h2></div>
          <div className="col" style={{ gap: 0 }}>
            <div className="row" style={{ gap: 24, padding: '20px 0', borderTop: '1px solid var(--line)', flexWrap: 'wrap' }}><span className="tnum accent" style={{ width: 80, flexShrink: 0 }}>2023</span><p className="body" style={{ margin: 0 }}>Founded by a group of offensive-security engineers frustrated with scanner false-positive rates and stale annual pentests.</p></div>
            <div className="row" style={{ gap: 24, padding: '20px 0', borderTop: '1px solid var(--line)', flexWrap: 'wrap' }}><span className="tnum accent" style={{ width: 80, flexShrink: 0 }}>2024</span><p className="body" style={{ margin: 0 }}>Shipped the first agent swarm capable of autonomous recon-to-exploit chaining against staging environments.</p></div>
            <div className="row" style={{ gap: 24, padding: '20px 0', borderTop: '1px solid var(--line)', flexWrap: 'wrap' }}><span className="tnum accent" style={{ width: 80, flexShrink: 0 }}>2025</span><p className="body" style={{ margin: 0 }}>Extended coverage to LLM and agentic-AI surfaces as customers began shipping production AI features faster than they could review them.</p></div>
            <div className="row" style={{ gap: 24, padding: '20px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', flexWrap: 'wrap' }}><span className="tnum accent" style={{ width: 80, flexShrink: 0 }}>2026</span><p className="body" style={{ margin: 0 }}>Building toward SOC 2 Type II and expanding the swarm to continuous cloud-configuration testing.</p></div>
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="page">
          <div style={{ maxWidth: 640, marginBottom: 44 }}><div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot" />Leadership</div><h2 className="h2">The team</h2></div>
          <div className="auto-fit-180" style={{ background: 'none', border: 'none' }}>
            {[['MK', 'Mara Kessler', 'Co-founder & CEO'], ['DO', 'Dele Osei', 'Co-founder & CTO'], ['RT', 'Ravi Thakur', 'Head of Offensive Research'], ['SL', 'Sofia Lindqvist', 'Head of Security & Compliance']].map(([tag, name, role]) => (
              <div key={tag}><div className="avatar-block">{tag}</div><div className="h3" style={{ marginTop: 14, fontSize: 16 }}>{name}</div><div className="caption" style={{ marginTop: 4 }}>{role}</div></div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)', background: 'var(--bg-deep)' }}>
        <div className="page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
          <div><div className="h3">We're hiring across research, engineering and go-to-market.</div><p className="body" style={{ marginTop: 8 }}>Open roles, benefits and our hiring process.</p></div>
          <div className="row" style={{ gap: 10 }}>
            <Link_ab className="btn btn-ghost" to="/contact">Get in touch</Link_ab>
            <Link_ab className="btn btn-primary" to="/careers">View careers →</Link_ab>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { About });