// Hero.jsx — KPI6 hero.
// Bi-tonal split layout: paper-left (copy+CTAs) / navy-right (numbered manifesto frame).
// This is the most distinctive moment of the site — the "split" reads as
// "research bridging insight (paper) and product (navy)".

function Hero() {
  return (
    <section className="kpi-hero" id="top" data-screen-label="Hero">
      <div className="kpi-hero-grid">
        {/* LEFT — paper side, all the copy */}
        <div className="kpi-hero-paper">
          <div className="kpi-hero-paper-inner">
            <div className="kpi-eyebrow">Frontier AI for marketing research</div>

            <h1 className="kpi-hero-h1">
              At the frontier of <em>consumer research.</em> Now generative.
            </h1>

            <p className="kpi-lead kpi-hero-sub">
              Generative AI is rewriting how marketing research works. KPI6 is how
              you put it to work — the generative AI and digital-twin technology
              redefining the field, in the hands of a team that's lived at the
              frontier of consumer research from the start.
            </p>

            <div className="kpi-hero-ctas">
              <a href="#contact" className="kpi-btn kpi-btn-primary">Talk to us</a>
              <a href="#what-we-do" className="kpi-btn kpi-btn-ghost">See what we do</a>
            </div>

            <div className="kpi-hero-micro">
              <span className="kpi-tick" aria-hidden="true"></span>
              Research, products and training — generative end to end.
            </div>
          </div>
        </div>

        {/* RIGHT — navy side, structural manifesto frame */}
        <aside className="kpi-hero-ink on-ink" aria-hidden="true">
          <HeroDotMatrix />
          <div className="kpi-hero-ink-inner">
            <div className="kpi-hero-ink-top">
              <span className="kpi-numbered">— 01</span>
              <span className="kpi-numbered">KPI6 · RESEARCH</span>
            </div>

            <div className="kpi-hero-ink-stack">
              <div className="kpi-hero-stat">
                <div className="kpi-numbered">From</div>
                <div className="kpi-hero-stat-from">Weeks</div>
              </div>
              <div className="kpi-hero-stat-divider"></div>
              <div className="kpi-hero-stat">
                <div className="kpi-numbered">To</div>
                <div className="kpi-hero-stat-to">Hours</div>
              </div>
            </div>

            <div className="kpi-hero-ink-bottom">
              <div className="kpi-hero-modes">
                <div className="kpi-hero-mode"><span className="kpi-mono">01</span> Research, done by us</div>
                <div className="kpi-hero-mode"><span className="kpi-mono">02</span> The products, in your hands</div>
                <div className="kpi-hero-mode"><span className="kpi-mono">03</span> Training &amp; advisory</div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });