// HomeHero — Section 1 of the landing page (issue #1). The primary value
// proposition. Answers, in order: what is Sekura, what problem it solves, why
// organizations use it, and what makes it different from traditional tools.
// Deliberately content-first (no live-scan animation) so a first-time visitor
// understands the offer within a few seconds. The animated live-scan demo now
// lives on /product/proof-not-probability/.

function HomeHero() {
  const { React } = window;

  // The four differentiators — the "what makes it different" answer, kept
  // tight so the eye can scan them in one pass.
  const diffs = [
    {
      k: 'proof',
      title: 'Proof, not probability',
      body: 'Every finding is verified by actually exploiting it — and ships with a working proof. No severity scores to second-guess.',
    },
    {
      k: 'noise',
      title: 'A short list, not a flood',
      body: 'If it cannot be exploited, it is not reported. You get the handful of issues that are real instead of thousands of theoretical alerts.',
    },
    {
      k: 'continuous',
      title: 'Continuous, not point-in-time',
      body: 'Specialized AI agents run the whole attack surface every hour — covering what a $30k–$150k manual pentest does, on a schedule.',
    },
    {
      k: 'private',
      title: 'Runs in your environment',
      body: 'Deploy in your CI runner or behind your firewall. Your source code and AI processing never leave your control.',
    },
  ];

  return (
    <section className="home-hero" data-screen-label="01 Hero — what is Sekura">
      <div className="home-hero-noise" aria-hidden="true" />
      <div className="home-hero-inner">
        <div className="home-hero-eyebrow">
          <span className="home-hero-dot" />
          autonomous penetration testing
        </div>

        <h1 className="home-hero-h1">
          Find the vulnerabilities that can actually be exploited —
          and get the <em>proof</em>.
        </h1>

        <p className="home-hero-lede">
          Sekura is an autonomous penetration testing platform. Specialized AI
          agents probe your applications the way an attacker would — finding,
          chaining, and exploiting real weaknesses across code, runtime, AI, and
          cryptography. Traditional tools bury you in thousands of unverified
          alerts. Sekura returns a short, ranked list of issues it has proven are
          exploitable, each with the exact request, payload, and response that
          demonstrates it.
        </p>

        <div className="home-hero-cta-row">
          <a href="#scan" className="cta cta--primary">
            scan your repo — free <span className="cta-arrow">→</span>
          </a>
          <a href="/product/" className="cta cta--ghost">
            see how it works <span className="cta-arrow">→</span>
          </a>
        </div>

        <ul className="home-hero-diffs" aria-label="what makes Sekura different">
          {diffs.map((d) => (
            <li className={`home-hero-diff home-hero-diff--${d.k}`} key={d.k}>
              <h2 className="home-hero-diff-title">{d.title}</h2>
              <p className="home-hero-diff-body">{d.body}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

window.HomeHero = HomeHero;