/* Hero — clean, generous, single product shot. Copy verbatim from the brief. */
const { Button, Eyebrow } = window.AIScanDesignSystem_81b9d1;
const CarbonIcon = window.CarbonIcon;

function Hero() {
  return (
    <section className="ls-hero" id="top">
      <div className="ls-hero__inner">
        <div className="ls-hero__copy">
          <Eyebrow>AI Scan · by AAI Labs</Eyebrow>
          <h1 className="ls-hero__h1">Find out where AI actually fits your business.</h1>
          <p className="ls-hero__sub">
            AI Scan interviews your team, then hands you a clear, prioritized map of
            where AI will move the needle, and where it won't.
          </p>
          <div className="ls-hero__cta">
            <Button variant="primary" size="lg" className="aisn-btn--scan" href="#book" data-cta="book-scan" data-cta-location="hero" data-ph-event="book_scan_click">Book a scan</Button>
            <Button variant="secondary" size="lg" href="#how-it-works" data-cta="see-how-it-works" data-cta-location="hero" data-ph-event="see_how_click">See how it works</Button>
          </div>
          <div className="ls-hero__meta">
            <span><strong>~10 days</strong> end to end</span>
            <span className="ls-hero__sep" />
            <span><strong>GDPR</strong> compliant · de-identified</span>
          </div>
        </div>
        <div className="ls-hero__visual">
          {React.createElement(window.ReportMock)}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;