// AppleHero — the landing hero.
//
// This is deliberately not the "one idea per viewport" pattern Apple uses on
// product pages. Apple can spend a full screen on a name because the reader
// already knows what an iPhone is; Sekura is unknown, and for this page type
// roughly 57% of desktop visitors never scroll past the first viewport while
// ~80% read only the headline and the first line of the subhead. So the hero
// carries the whole argument: what it does, the single control, the three
// wedges, and third-party proof — all above the fold.
//
// The three wedges are the differentiators our own competitive note
// (site-improvement-plan.md §2) identifies against demo-gated competitors:
// self-serve, public pricing, and on-prem/data sovereignty. They are stated as
// plain facts rather than adjectives because each one is checkable.

function AppleHero() {
  const { React } = window;
  const partners = window.DesignPartners || [];
  const metrics = window.TrustMetrics || [];

  const wedges = [
    'No demo call required',
    'Public pricing',
    'Runs in your environment',
  ];

  return (
    <section className="ah-hero" data-screen-label="01 Hero — scan a repository">
      <div className="ah-hero-inner">
        {/* The lock-up says which shelf we're on in three words; the headline
            below it does the competitive work. It never appears alone —
            "autonomous" and "continuous" are category words a direct competitor
            uses almost verbatim. */}
        <p className="ah-lockup">Autonomous &amp; Continuous Security</p>

        <h1 className="ah-h1">Only the vulnerabilities that are&nbsp;real.</h1>

        <p className="ah-sub">
          Sekura&rsquo;s agents attack your code and the infrastructure around it the
          way an adversary would, then hand back the short list they could
          actually exploit — each one with the working proof and a one-line fix.
        </p>

        <ul className="ah-wedges" aria-label="how Sekura works">
          {wedges.map((w) => (
            <li className="ah-wedge" key={w}>
              <window.AhCheck />
              {w}
            </li>
          ))}
        </ul>

        <window.ScanYourRepo
          variant="apple"
          defaultUrl=""
          fineprint="Your first repository is free — the full pipeline, proof-of-exploit included. Re-scan it any time. No card."
        />
      </div>

      {/* Third-party corroboration sits above the fold, next to the CTA —
          security buyers look for it before they look at features. Both the
          logos and the numbers come from data/designPartners.js and describe
          real engagements. */}
      {(partners.length > 0 || metrics.length > 0) && (
        <div className="ah-proof">
          {partners.length > 0 && (
            <React.Fragment>
              <p className="ah-proof-label ah-eyebrow">Assessed by Sekura</p>
              <ul className="ah-proof-logos" aria-label="design partners">
                {partners.map((p) => (
                  <li className="ah-proof-logo" key={p.name}>
                    {p.website ? (
                      <a href={p.website} target="_blank" rel="noopener noreferrer" aria-label={p.name}>
                        <img src={p.logo} alt={p.name} height="26" loading="lazy" />
                      </a>
                    ) : (
                      <img src={p.logo} alt={p.name} height="26" loading="lazy" />
                    )}
                  </li>
                ))}
              </ul>
            </React.Fragment>
          )}

          {metrics.length > 0 && (
            <dl className="ah-metrics">
              {metrics.map((m) => (
                <div className="ah-metric" key={m.label}>
                  <dt className="ah-metric-value">{m.value}</dt>
                  <dd className="ah-metric-label ah-small">{m.label}</dd>
                </div>
              ))}
            </dl>
          )}
        </div>
      )}
    </section>
  );
}

// Shared 16px check. Inline rather than an icon font so it inherits currentColor
// and adds no request; aria-hidden because the adjacent text carries the meaning.
function AhCheck() {
  const { React } = window;
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8.4l3.2 3.2L13 4.8" stroke="currentColor" strokeWidth="1.8"
        strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

window.AhCheck = AhCheck;
window.AppleHero = AppleHero;