// pages-home.jsx

function HomePage({ go, tweaks }) {
  return (
    <main className="page" data-screen-label="01 Home">
      <section className="hero shell hero--centered">
        <HeroBlock variant={tweaks.heroVariant} />
      </section>
    </main>
  );
}

function HeroBlock({ variant }) {
  if (variant === "marquee") {
    return <BrandMarquee />;
  }
  if (variant === "type") {
    return (
      <h1 className="eg-display hero-display hero-display--center">
        Stories<br /><em>for</em> the evolving<br />global audience.
      </h1>
    );
  }
  // default: wordmark — original SVG file, referenced directly
  return (
    <div className="hero-wordmark">
      <img className="logo-mark" src={window.__resources.r_esme_grace_logo} alt="Esme Grace" />
    </div>
  );
}

function BrandMarquee() {
  const phrases = [
    { text: "Esme", em: "Grace" },
    { text: "Production", em: "Finance" },
    { text: "LA · AU", em: "UK" },
    { text: "Prestige", em: "Film" },
    { text: "Limited", em: "Series" }
  ];
  return (
    <div className="hero-marquee hero-marquee--tight">
      <div className="hero-marquee-track">
        {Array(2).fill(0).map((_, k) => (
          <span key={k}>
            {phrases.map((p, i) => (
              <React.Fragment key={i}>
                <span>{p.text} <em>{p.em}</em></span>
                <span className="dot"></span>
              </React.Fragment>
            ))}
          </span>
        ))}
      </div>
    </div>
  );
}

function HeroMetaItem({ label, value }) {
  return (
    <div className="hero-meta-item">
      <div className="eg-label eg-label--mute">{label}</div>
      <div className="hero-meta-value">{value}</div>
    </div>
  );
}

Object.assign(window, { HomePage });