// altriks-hero.jsx — Hero section with 4 switchable layouts. Centerpiece preview is <HeroPipeline>.

const HERO_EYEBROW = "Autonomous purchase-order processing";
const HERO_HEADLINE = "Every purchase order, ERP‑ready in seconds.";
const HERO_SUBHEAD = "Altriks captures every incoming PO — PDF, email, or API — reads every line, and matches it to the right customer, ship-to site, and product. It checks each line against your agreed quote, so a wrong price or quantity is caught — not keyed into your ERP. Clean orders flow straight through; your team reviews the exceptions, not every order.";

function HeroEyebrow() {
  return <div className="alt-eyebrow">{HERO_EYEBROW}</div>;
}

// Conversion block: trust micro-line → primary button (jumps to the single capture form in the
// final CTA) → tertiary "watch it run" link. No duplicate form in the hero.
function scrollToJoin(e) {
  if (e) e.preventDefault();
  const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
  const sec = document.querySelector("#join");
  if (sec) sec.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "center" });
  const f = document.querySelector("#join .alt-cf__input");
  if (f) setTimeout(() => f.focus({ preventScroll: true }), reduce ? 0 : 600);
}
function HeroCTAs({ center = false }) {
  return (
    <div className="alt-hero__capture" style={{ alignItems: center ? "center" : "flex-start" }}>
      <div className="alt-hero__trust"><span className="alt-live"></span> Now onboarding design partners</div>
      <div className="alt-hero__ctas" style={{ marginTop: 22, alignItems: "center", justifyContent: center ? "center" : "flex-start" }}>
        <Button variant="primary" size="lg" href="/contact">Apply to become a design partner</Button>
        <a className="alt-hero__seehow" href="#how-it-works" style={{ marginTop: 0 }}>Watch it run <DownArrow /></a>
      </div>
    </div>
  );
}

/* Variant 1 — Vic.ai-style: copy left, 2×2 proof grid right */
function HeroStatGrid() {
  return (
    <div className="alt-hero alt-hero--grid">
      <div className="alt-hero__copy">
        <HeroEyebrow />
        <h1 className="alt-h1">{HERO_HEADLINE}</h1>
        <p className="alt-lede">{HERO_SUBHEAD}</p>
        <HeroCTAs />
      </div>
      <div className="alt-hero__stats">
        {PROOF.map((s) => (
          <div key={s.label} className="alt-statcard">
            <div className="alt-statcard__value"><CountUp text={s.value} /></div>
            <div className="alt-statcard__label">{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* Variant 2 — Centered copy, full animated product story below */
function HeroCentered() {
  return (
    <div className="alt-hero alt-hero--centered">
      <div className="alt-hero__copy alt-hero__copy--center">
        <HeroEyebrow />
        <h1 className="alt-h1">{HERO_HEADLINE}</h1>
        <p className="alt-lede">{HERO_SUBHEAD}</p>
        <HeroCTAs center />
      </div>
      <div className="alt-hero__preview">
        <HeroPipeline />
      </div>
    </div>
  );
}

/* Variant 3 — Split: copy left, live animated product story right (DEFAULT) */
function HeroSplit() {
  return (
    <div className="alt-hero alt-hero--split">
      <div className="alt-hero__copy">
        <HeroEyebrow />
        <h1 className="alt-h1">{HERO_HEADLINE}</h1>
        <p className="alt-lede">{HERO_SUBHEAD}</p>
        <HeroCTAs />
        <div className="alt-trustline">
          <span className="alt-live"></span> Autopilot on · <CountUp text="142" /> orders processed today
        </div>
      </div>
      <div className="alt-hero__mock">
        <HeroPipeline />
      </div>
    </div>
  );
}

/* Variant 4 — Bold full-width statement */
function HeroBold() {
  return (
    <div className="alt-hero alt-hero--bold">
      <HeroEyebrow />
      <h1 className="alt-h1 alt-h1--giant">
        Stop keying purchase orders.<br /><span className="alt-grad-text">Start shipping them.</span>
      </h1>
      <p className="alt-lede" style={{ margin: "24px auto 0", maxWidth: "56ch" }}>{HERO_SUBHEAD}</p>
      <HeroCTAs center />
      <div className="alt-hero__statbar">
        {PROOF.map((s) => (
          <div key={s.label} className="alt-barstat">
            <div className="alt-barstat__value"><CountUp text={s.value} /></div>
            <div className="alt-barstat__label">{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero({ variant }) {
  switch (variant) {
    case "centered": return <HeroCentered />;
    case "split": return <HeroSplit />;
    case "bold": return <HeroBold />;
    default: return <HeroStatGrid />;
  }
}

Object.assign(window, { Hero });