const HERO_VARIANTS = {
  oneperson: {
    eyebrow: 'a community, not a campaign',
    title: (
      <>“I'm just one person.<br /><span className="tgp-hero-mark"><mark>What can I do?</mark>”</span></>
    ),
    lede: (
      <>That question is exactly why we started. One person can do more than they think, and when we come together, small gestures turn into <em>something big</em>.</>
    ),
  },
  together: {
    eyebrow: 'collective energy for a better world',
    title: (
      <>One gesture is small.<br />A <span className="tgp-hero-mark"><mark>thousand together</mark></span> is not.</>
    ),
    lede: (
      <>We share stories of what a single person can do, and we prove that when good people get together, even the smallest actions <em>add up to a lot</em>.</>
    ),
  },
  care: {
    eyebrow: 'soft activism · conscious community',
    title: (
      <>You already care.<br /><span className="tgp-hero-mark"><mark>That's the hard part</mark></span> done.</>
    ),
    lede: (
      <>The Good People is a room, a story, a few small things worth trying, for everyone who wants to <em>do something</em> without burning out trying.</>
    ),
  },
};
window.HERO_VARIANTS = HERO_VARIANTS;

function Hero({ variant = 'oneperson' }) {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.oneperson;
  return (
    <section className="tgp-hero" id="top">
      <div className="tgp-hero-bg" aria-hidden="true"></div>
      <div className="tgp-hero-grain" aria-hidden="true"></div>
      <div className="tgp-hero-inner">
        <div className="tgp-eyebrow tgp-hero-eyebrow">{v.eyebrow}</div>
        <h1 className="tgp-hero-title">{v.title}</h1>
        <p className="tgp-hero-lede">{v.lede}</p>
        <div className="tgp-hero-cta">
          <a className="tgp-btn tgp-btn-primary tgp-btn-lg" href="#gathering">Save me a seat</a>
          <a className="tgp-btn tgp-btn-ghost" href="#story">read the next story →</a>
        </div>
        <div className="tgp-hero-meta">
          <span>next gathering</span>
          <span className="dot">·</span>
          <strong>Wednesday, 1st July 2026</strong>
          <span className="dot">·</span>
          <span>Aethos, Lisbon</span>
          <span className="dot">·</span>
          <span>with JACK Congo</span>
        </div>
      </div>
      <div className="tgp-hero-script">changing the world together.</div>
    </section>
  );
}
window.Hero = Hero;