// ============ TICKER ============
const TICKER_ITEMS = [
  "One shot",
  "One crown",
  "50+ contestants",
  "3 countries",
  "$100,000 prize pool",
  "Bali finals",
  "Est. Aug 2026",
  "Fortune favors the brave",
];

function Ticker() {
  const tickerLoop = TICKER_ITEMS.concat(TICKER_ITEMS);

  return (
    <section className="aa-ticker motion-ticker" aria-label="Event ticker" data-reveal="ticker">
      <div className="aa-ticker-track">
        {tickerLoop.map((item, index) => (
          <span className="aa-ticker-item" key={`${item}-${index}`}>{item}</span>
        ))}
      </div>
    </section>
  );
}
window.Ticker = Ticker;

// ============ INTRO ============
const OVERVIEW_STATS = [
  { value: 50, suffix: "+", label: "Contestants selected through regional qualification" },
  { value: 3, pad: 2, label: "Countries feeding the Bali final stage" },
  { value: 10, label: "Live pressure rounds across the season" },
];

const OVERVIEW_PILLARS = [
  {
    eyebrow: "Selection",
    title: "Regional qualifiers",
    body: "Contestants are filtered through performance, discipline, and live-market decision making before the Bali final.",
  },
  {
    eyebrow: "Format",
    title: "Public pressure",
    body: "The show is designed around visible stakes: timed rounds, leaderboard swings, and sponsor-backed audience moments.",
  },
  {
    eyebrow: "Outcome",
    title: "One crown",
    body: "The final winner takes the prize pool and the S03 crown, with partner media carrying the story across APAC.",
  },
];

function OverviewStatCard({ stat, index }) {
  const displayValue = String(stat.value).padStart(stat.pad || 0, "0");

  return (
    <div className="aa-overview-stat" data-reveal="card" data-count-trigger style={{"--reveal-delay": `${index * 90}ms`}}>
      <span
        className="aa-overview-stat-value"
        data-count={stat.value}
        data-pad={stat.pad || 0}
        data-suffix={stat.suffix || undefined}
      >
        {displayValue}{stat.suffix || ""}
      </span>
      <span className="aa-overview-stat-label">{stat.label}</span>
    </div>
  );
}

function OverviewPillar({ pillar, index }) {
  return (
    <article className="aa-overview-pillar" data-reveal="up" style={{"--reveal-delay": `${160 + index * 80}ms`}}>
      <span className="aa-pillar-eyebrow mono">{pillar.eyebrow}</span>
      <h3>{pillar.title}</h3>
      <p>{pillar.body}</p>
    </article>
  );
}

function Intro() {
  return (
    <section id="overview" className="aa-section aa-overview motion-section" aria-label="Overview" data-reveal="section" data-parallax-section>
      <div className="wrap aa-overview-wrap">
        <div className="aa-section-heading aa-overview-heading" data-reveal="up">
          <div className="sec-label">01 / Overview</div>
          <h2 className="display aa-section-title">
            <span>The battle</span>
            <span>for the throne</span>
          </h2>
          <p className="aa-section-copy">
            Alpha Arena turns trading skill into a live competitive format for APAC audiences,
            with MEXC Ventures as title sponsor and TRIV as co-host.
          </p>
        </div>

        <div className="aa-overview-board">
          <div className="aa-overview-stats">
            {OVERVIEW_STATS.map((stat, index) => (
              <OverviewStatCard key={stat.label} stat={stat} index={index}/>
            ))}
          </div>

          <div className="aa-overview-pillars">
            {OVERVIEW_PILLARS.map((pillar, index) => (
              <OverviewPillar key={pillar.title} pillar={pillar} index={index}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Intro = Intro;