/* global React */
window.Hero = function Hero({ onCta }) {
  return (
    <section className="hero" id="top">
      <div className="hero-inner">
        <EyebrowRow kicker="§ Mimren — 2026" right="Built for owner-led companies" />
        <h1 className="hero-title">
          Find where AI<br />
          <span className="hero-italic">actually helps. </span>
          <span className="hero-accent">Then build it.</span>
        </h1>
        <p className="hero-lead">
          We work with owner-led companies to find the handful of places AI is
          worth the trouble — and then build it into the tools your team already uses.
          No transformation programmes. No 80-slide decks.
        </p>
        <div className="hero-actions">
          <Button onClick={onCta}>Book a 45-min call</Button>
          <TextLink href="#services">See how we work</TextLink>
        </div>
        <div className="hero-meta">
          <div className="meta-col">
            <Eyebrow>Typical project</Eyebrow>
            <span className="meta-num">6–12 weeks</span>
          </div>
          <div className="meta-col">
            <Eyebrow>Team size</Eyebrow>
            <span className="meta-num">2 seniors</span>
          </div>
          <div className="meta-col">
            <Eyebrow>You keep</Eyebrow>
            <span className="meta-num">The code</span>
          </div>
        </div>
      </div>
    </section>
  );
};