// ============ PROGRAM ============
const PROGRAM_ACTS = [
  {
    number: "01",
    eyebrow: "Opening heat",
    title: "Live stream qualifier",
    body: "A fast-moving qualification stage built around clean decision making, risk control, and visible leaderboard pressure.",
    image: "uploads/program/act-01.jpg",
    meta: ["Remote", "Leaderboard", "Selection"],
  },
  {
    number: "02",
    eyebrow: "Bali stage",
    title: "Live event final",
    body: "Top contestants move into a produced arena format with timed rounds, host commentary, and partner media coverage.",
    image: "uploads/program/act-02.jpg",
    meta: ["Bali", "Finalists", "Live audience"],
  },
  {
    number: "03",
    eyebrow: "Winner night",
    title: "After party and crown",
    body: "The season closes with the crown ceremony, sponsor moments, and media capture for the winning story.",
    image: "uploads/program/act-03.jpg",
    meta: ["Crown", "Partners", "Media"],
  },
];

function ProgramAct({ act, index }) {
  return (
    <article className="aa-program-act" data-reveal="card" style={{"--reveal-delay": `${index * 110}ms`}}>
      <div className="aa-program-number display">{act.number}</div>
      <div className="aa-program-copy">
        <span className="aa-program-eyebrow mono">{act.eyebrow}</span>
        <h3>{act.title}</h3>
        <p>{act.body}</p>
        <div className="aa-program-meta">
          {act.meta.map((item) => (
            <span key={item}>{item}</span>
          ))}
        </div>
      </div>
      <div className="aa-program-media">
        <img src={act.image} alt={`${act.title} scene`} loading="lazy" decoding="async"/>
      </div>
    </article>
  );
}

function Program() {
  return (
    <section id="program" className="aa-section aa-program motion-section" aria-label="Program" data-reveal="section" data-parallax-section>
      <div className="wrap aa-program-wrap">
        <div className="aa-section-heading aa-program-heading" data-reveal="up">
          <div className="sec-label">02 / The Program</div>
          <h2 className="display aa-section-title">
            <span>Three acts.</span>
            <span>One crown.</span>
          </h2>
        </div>

        <div className="aa-program-list">
          {PROGRAM_ACTS.map((act, index) => (
            <ProgramAct key={act.number} act={act} index={index}/>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Program = Program;