// heroes.jsx — four hero directions for the FRAMEDROP featured story
// Exports to window: Hero (dispatcher)

function HeroBadge() {
  return <span className="hero-badge"><i className="live-dot" /> Cover Story · Launch Week</span>;
}

function CtaRow({ primary = 'Read the review' }) {
  return (
    <div className="hero-cta">
      <a className="btn btn-primary" href="#latest">{primary} <Icon name="arrow" size={16} /></a>
      <a className="btn btn-ghost" href="#latest"><Icon name="play" size={15} /> Watch verdict</a>
    </div>
  );
}

// 1 ── SPLIT: text left, key art right
function HeroSplit({ f }) {
  return (
    <section className="hero hero-split">
      <div className="hero-text">
        <HeroBadge />
        <h1 className="hero-title">{f.title}</h1>
        <p className="hero-dek">{f.dek}</p>
        <CtaRow />
        <Meta {...f.meta} />
      </div>
      <div className="hero-art">
        <Placeholder label={'// ' + f.art} />
        <span className="hero-score"><b>{f.score}</b><i>/ 10 · Editor's pick</i></span>
      </div>
    </section>
  );
}

// 2 ── SPOTLIGHT: full-bleed art, text overlaid bottom-left
function HeroSpotlight({ f }) {
  return (
    <section className="hero hero-spotlight">
      <Placeholder label={'// ' + f.art} tall />
      <div className="spot-scrim" />
      <div className="spot-content">
        <HeroBadge />
        <h1 className="hero-title">{f.title}</h1>
        <p className="hero-dek">{f.dek}</p>
        <div className="spot-bottom">
          <CtaRow />
          <span className="hero-score big"><b>{f.score}</b><i>/ 10</i></span>
        </div>
      </div>
    </section>
  );
}

// 3 ── EDITORIAL: centered headline up top, wide art below
function HeroEditorial({ f }) {
  return (
    <section className="hero hero-editorial">
      <div className="ed-head">
        <HeroBadge />
        <h1 className="hero-title">{f.title}</h1>
        <p className="hero-dek">{f.dek}</p>
        <Meta {...f.meta} />
        <CtaRow />
      </div>
      <div className="ed-art">
        <Placeholder label={'// ' + f.art} ratio="21 / 8" />
        <span className="hero-score"><b>{f.score}</b><i>/ 10</i></span>
      </div>
    </section>
  );
}

// 4 ── SHOWCASE: big featured left + two up-next stacked right
function HeroShowcase({ f, upNext }) {
  return (
    <section className="hero hero-showcase">
      <div className="show-main">
        <Placeholder label={'// ' + f.art} tall />
        <div className="show-scrim" />
        <div className="show-main-text">
          <HeroBadge />
          <h1 className="hero-title">{f.title}</h1>
          <p className="hero-dek">{f.dek}</p>
          <CtaRow />
        </div>
        <span className="hero-score"><b>{f.score}</b><i>/ 10</i></span>
      </div>
      <aside className="show-side">
        <span className="eyebrow">// up_next</span>
        {upNext.map((u) => (
          <a key={u.id} className="show-item" href="#latest">
            <div className="show-item-art"><Placeholder label={'// ' + u.title} ratio="16 / 10" /></div>
            <div className="show-item-body">
              <span className={'tag tag-' + u.tag.toLowerCase().replace(/\s/g, '')}>{u.tag}</span>
              <h4>{u.title}</h4>
              <span className="show-item-meta">{u.genre} · {u.date}</span>
            </div>
          </a>
        ))}
      </aside>
    </section>
  );
}

function Hero({ layout, featured, upNext }) {
  if (layout === 'spotlight') return <HeroSpotlight f={featured} />;
  if (layout === 'editorial') return <HeroEditorial f={featured} />;
  if (layout === 'showcase') return <HeroShowcase f={featured} upNext={upNext} />;
  return <HeroSplit f={featured} />;
}

Object.assign(window, { Hero });