// ============================================================
// ROBSEEK — Hero archetypes (per-page)
// HeroPhilosophy   — schematic / cream surface (LayerStack as hero)
// HeroNOVA       — product-as-hero (tilted campaign console)
// HeroInvestors  — data-as-hero (ticker + KPI grid + sparkline)
//
// Each takes the same props as <Hero>: eyebrow, title, lede, primary, secondary, badge.
// They share .hero-arc scaffold; per-archetype CSS lives in components.css.
// ============================================================

function HeroArcShell({ className, children }) {
  return (
    <section className={`hero-arc ${className || ''}`}>
      {className === 'hero-philosophy' && <div className="hero-philosophy__bg" aria-hidden/>}
      <div className="rs-container">
        <div className="hero-arc__row">{children}</div>
      </div>
    </section>
  );
}

function HeroArcLHS({ eyebrow, title, lede, primary, secondary, badge }) {
  return (
    <div className="hero-arc__lhs">
      {eyebrow && <div className="hero-arc__eb">{eyebrow}</div>}
      <h1 className="hero-arc__h">{title}</h1>
      {lede && <p className="hero-arc__lede">{lede}</p>}
      <div className="hero-arc__cta">
        {primary && (
          <a href={primary.href} className="rs-btn rs-btn--primary">
            {primary.label} <Icon.arrow/>
          </a>
        )}
        {secondary && (
          <a href={secondary.href} className="rs-btn rs-btn--ghost">{secondary.label}</a>
        )}
      </div>
      {badge && <div className="hero-arc__badge">{badge}</div>}
    </div>
  );
}

// ============ PHILOSOPHY — institutional, layer stack on dark ============
function HeroPhilosophy(props) {
  const layers = [
    { k: '04', t: 'APPLICATIONS', sub: 'NOVA AI · Commerce · Lifecycle' },
    { k: '03', t: 'AI ENGINE',    sub: 'Generative · Optimization · Inference' },
    { k: '02', t: 'EDGE & DATA',  sub: 'Privacy-first · Normalization' },
    { k: '01', t: 'TERMINALS',    sub: 'Hardware · Screens · Robotics' },
  ];
  return (
    <HeroArcShell className="hero-philosophy">
      <HeroArcLHS {...props}/>
      <div className="hero-arc__rhs">
        <div className="hero-philosophy__stack">
          <svg viewBox="0 0 600 360" role="img" aria-label="Layer stack">
            {layers.map((l, i) => (
              <g key={l.k} transform={`translate(40, ${30 + i * 78})`}>
                <rect x="0" y="0" width="520" height="62" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.14)"/>
                <rect x="0" y="0" width="6" height="62" fill="var(--rs-red)"/>
                <text x="22" y="26" fontFamily="JetBrains Mono" fontSize="11" letterSpacing="2" fill="var(--rs-red)">[{l.k}]</text>
                <text x="22" y="48" fontFamily="Space Grotesk" fontSize="18" fontWeight="600" fill="var(--rs-white)">{l.t}</text>
                <text x="320" y="38" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.6" fill="var(--rs-gray-1)">{l.sub}</text>
                {i < 3 && <line x1="260" y1="62" x2="260" y2="78" stroke="var(--rs-red)" strokeWidth="1.5"/>}
              </g>
            ))}
            <g stroke="var(--rs-red)" strokeWidth="1.5" fill="none">
              <path d="M20 10 L40 10 M20 10 L20 30"/>
              <path d="M580 10 L560 10 M580 10 L580 30"/>
              <path d="M20 350 L40 350 M20 350 L20 330"/>
              <path d="M580 350 L560 350 M580 350 L580 330"/>
            </g>
          </svg>
        </div>
      </div>
    </HeroArcShell>
  );
}

// ============ NOVA — product-as-hero ============
function HeroNOVA(props) {
  return (
    <HeroArcShell className="hero-nova">
      <HeroArcLHS {...props}/>
      <div className="hero-arc__rhs">
        <div className="hero-nova__prod">
          <div className="hero-nova__bar">
            <span className="hero-nova__dot live"/>
            <span className="hero-nova__dot"/>
            <span className="hero-nova__dot"/>
            <small>NOVA · CAMPAIGN / SAMPLE</small>
            <span className="hero-nova__live">AUTO-OPTIMIZING</span>
          </div>
          <div className="hero-nova__body">
            <div className="hero-nova__nav">
              <div>Overview</div>
              <div className="act">Variants</div>
              <div>Audience</div>
              <div>Measure</div>
              <div>Reports</div>
            </div>
            <div className="hero-nova__main">
              <div className="hero-nova__title">Three variants · in continuous A/B</div>
              <div className="hero-nova__variants">
                {[
                  { k: 'A · WINNING', win: true },
                  { k: 'B', win: false },
                  { k: 'C', win: false },
                ].map((v, i) => (
                  <div key={i} className={"hero-nova__var" + (v.win ? ' win' : '')}>
                    <div className="hero-nova__canvas">[CR · 16:9]</div>
                    <div className="hero-nova__var-k">{v.k}</div>
                    <div className="hero-nova__var-bar"><b/></div>
                  </div>
                ))}
              </div>
              <div className="hero-nova__log">● <b>[OPTIMIZE]</b> reallocating toward winning variant</div>
              <div className="hero-nova__log">● <b>[INFER]</b> audience and daypart routed to creative</div>
            </div>
          </div>
        </div>
      </div>
    </HeroArcShell>
  );
}

// (HeroInvestors, HeroSolutions, HeroMarkets archetypes removed —
//  data-as-hero, scenario-strip, and phased-map heroes are out of scope
//  under the current public-disclosure discipline. Investors / Services /
//  Markets pages now use the base <Hero> primitive.)

// ============ CAREERS — manifesto as hero ============
function HeroCareers(props) {
  const { eyebrow, title, lede, primary, secondary, badge } = props;
  return (
    <section className="hero-arc hero-careers" style={{ position: 'relative' }}>
      <div className="hero-careers__brackets" aria-hidden="true"><i></i><i></i></div>
      <div className="hero-arc__inner rs-container">
        <div className="hero-arc__row">
          <div className="hero-arc__lhs">
            {eyebrow && <div className="hero-arc__eb">[{eyebrow}]</div>}
            <div className="hero-careers__rule" aria-hidden="true"></div>
            {title && <h1 className="hero-arc__h">{title}</h1>}
            {lede && <p className="hero-arc__lede">{lede}</p>}
            {(primary || secondary) && (
              <div className="hero-arc__cta">
                {primary && (
                  <a href={primary.href} className="rs-btn rs-btn--primary">
                    {primary.label} <Icon.arrow/>
                  </a>
                )}
                {secondary && (
                  <a href={secondary.href} className="rs-btn rs-btn--ghost">
                    {secondary.label}
                  </a>
                )}
              </div>
            )}
            {badge && <div className="hero-arc__badge">{badge}</div>}
          </div>
        </div>
      </div>
    </section>
  );
}

// (HeroPress archetype removed — Press is now folded into Investors → News,
//  no standalone newsroom hero is in use.)

Object.assign(window, { HeroPhilosophy, HeroNOVA, HeroCareers });