// Landing hero — dark, cinematic. Reuses the Labs Spirograph (blend="screen" so it
// glows on near-black) and PhaseChip. The RAOR loop art is the hero object.

const HERO_STATS = [
  { num: '7', label: 'maturity levels' },
  { num: '5', label: 'Voltron Ai Agents' },
  { num: '1', label: 'One Close Loop System' },
  { num: '< 90 days', label: 'Learning Cycle' },
];

const HERO_COPY_DEFAULTS = {
  heroKicker: 'AIOps orchestration · v0.9 beta',
  heroTitle: '',
  heroAccent: 'Start you Ai Operation Engine.',
  heroLead: "The promise of AI is not intelligence — it is execution at compounding rate.",
  ctaPrimary: 'Sign up free',
  ctaSecondary: 'Explore the labs',
};

const LandingHero = ({ onExploreLabs, onJoinPilot, copy }) => {
  const c = { ...HERO_COPY_DEFAULTS, ...(copy || {}) };
  return (
  <header id="top" className="lp-hero lp-hero-gearloop" data-screen-label="Landing Hero">
    <GearLoopBG />
    <div className="lp-hero-scrim" />

    <div className="lp-wrap lp-hero-inner">
      <div className="lp-hero-copy">
        <div className="lp-kicker mono">
          <span className="lp-kicker-dot" /> {c.heroKicker}
        </div>
        <h1 className="lp-hero-title">
          {c.heroTitle && <React.Fragment>{c.heroTitle.split(/(intelligence)/i).map((p, i) =>
            /^intelligence$/i.test(p) ? <s className="lp-strike" key={i}>{p}</s> : p
          )}<br /></React.Fragment>}
          <span className="lp-grad-text">{c.heroAccent}</span>
        </h1>
        <p className="lp-hero-lead text-pretty">
          {c.heroLead.split(/(bends?)/i).map((p, i) =>
            /^bends?$/i.test(p) ? <span className="lp-bend" key={i}>{p}</span> : p
          )}
        </p>
        <div className="lp-hero-cta">
          <button className="lp-btn lp-btn-primary lp-btn-lg" onClick={onJoinPilot} type="button">
            <I.Sparkles size={15} /> {c.ctaPrimary}
          </button>
          <button className="lp-btn lp-btn-ghost-light lp-btn-lg" onClick={onExploreLabs}>
            <I.Lab size={15} /> {c.ctaSecondary}
          </button>
        </div>
        <div className="lp-hero-stats">
          {HERO_STATS.map((s, i) => (
            <div className="lp-stat" key={s.label}>
              <div className="lp-stat-num mono tabular">{s.num}</div>
              <div className="lp-stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </header>
  );
};

Object.assign(window, { LandingHero, HERO_STATS, HERO_COPY_DEFAULTS });