// ============ REWARDS ============
const REWARD_PERKS = [
  {
    title: "Flights covered",
    body: "Travel support for selected finalists moving into the Bali stage.",
    accent: "blue",
  },
  {
    title: "Hotel package",
    body: "Finalist accommodation prepared around the produced event window.",
    accent: "red",
  },
  {
    title: "Media exposure",
    body: "Partner coverage before, during, and after the final.",
    accent: "neutral",
  },
  {
    title: "Sponsor moments",
    body: "Structured placements for title sponsor, co-host, and media partners.",
    accent: "neutral",
  },
];

function RewardPerk({ perk, index }) {
  return (
    <article className={`aa-reward-perk aa-reward-perk-${perk.accent}`} data-reveal="card" style={{"--reveal-delay": `${140 + index * 80}ms`}}>
      <span className="aa-reward-index mono">{String(index + 1).padStart(2, "0")}</span>
      <h3>{perk.title}</h3>
      <p>{perk.body}</p>
    </article>
  );
}

function Rewards() {
  return (
    <section id="rewards" className="aa-section aa-rewards motion-section" aria-label="Rewards" data-reveal="section" data-parallax-section>
      <div className="wrap aa-rewards-wrap">
        <div className="aa-section-heading aa-rewards-heading" data-reveal="up">
          <div className="sec-label">03 / Rewards</div>
          <h2 className="display aa-section-title">
            <span>Prize pool</span>
            <span>with teeth.</span>
          </h2>
          <p className="aa-section-copy">
            The rewards system is designed to feel immediate: cash stakes, travel support,
            on-site production, and partner visibility in one final package.
          </p>
        </div>

        <div className="aa-rewards-layout">
          <article className="aa-prize-card" data-reveal="card">
            <span className="aa-prize-kicker mono">Total Prize Pool</span>
            <div className="aa-prize-value display">
              $100K
            </div>
            <p>Winner-led season finale with the crown awarded live in Bali.</p>
          </article>

          <div className="aa-rewards-grid">
            {REWARD_PERKS.map((perk, index) => (
              <RewardPerk key={perk.title} perk={perk} index={index}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Rewards = Rewards;