// ============ HERO ============
const HERO_FIRST_VIEW_PATH = "uploads/reference-slices/aa-hero-trophy-crop.webp";
const SPONSOR_DECK_URL = "https://apacaaevent.vercel.app/Sponsor%20Deck.html";

const HERO_METRICS = [
  { label: "Edition", text: "S03" },
  { label: "Contestants", value: 50, suffix: "+" },
  { label: "Countries", value: 3, pad: 2 },
  { label: "Prize Pool", text: "$100,000" },
  { label: "Final", text: "Bali" },
];

function StickyNav() {
  const links = [
    { href: "#overview", label: "Overview" },
    { href: "#program", label: "Program" },
    { href: "#rewards", label: "Rewards" },
    { href: "#join", label: "Join" },
    { href: "#partners", label: "Partners" },
    { href: "#register", label: "Register" },
  ];

  return (
    <nav className="site-sticky-nav" aria-label="Primary navigation">
      <a className="site-sticky-brand" href="#top" aria-label="Alpha Arena home">
        <AlphaLogo size={42} color="#f4f6fb"/>
        <span className="site-sticky-brand-text">
          <span>Alpha</span>
          <span>Arena</span>
        </span>
      </a>

      <div className="site-sticky-links">
        {links.map((link) => (
          <a key={link.href} className="site-sticky-link" href={link.href} data-nav-target={link.href}>
            {link.label}
          </a>
        ))}
      </div>

      <a className="site-sticky-partner" href={SPONSOR_DECK_URL} aria-label="Become a Partner">
        <span>Partner Deck</span>
        <svg width="18" height="12" viewBox="0 0 18 12" fill="none" aria-hidden="true">
          <path d="M0 6H16M11 1L16 6L11 11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"/>
        </svg>
      </a>
    </nav>
  );
}

function HeroMetric({ metric }) {
  const shouldCount = Number.isFinite(metric.value);
  const displayValue = metric.text
    ? metric.text
    : `${metric.prefix || ""}${String(metric.value).padStart(metric.pad || 0, "0")}${metric.suffix || ""}`;

  return (
    <div className="hero-metric-item">
      <span className="hero-metric-label">{metric.label}</span>
      <span
        className="hero-metric-value"
        data-count={shouldCount ? metric.value : undefined}
        data-prefix={metric.prefix || undefined}
        data-suffix={metric.suffix || undefined}
        data-pad={metric.pad || undefined}
      >
        {displayValue}
      </span>
    </div>
  );
}

function HeroMetricStrip() {
  return (
    <div className="hero-metric-strip" data-count-trigger aria-label="Alpha Arena event metrics">
      {HERO_METRICS.map((metric) => (
        <HeroMetric key={metric.label} metric={metric}/>
      ))}
    </div>
  );
}

function HeroMedia() {
  return (
    <div className="aa-hero-media" aria-hidden="true">
      <img
        className="aa-hero-crown-image"
        src={HERO_FIRST_VIEW_PATH}
        width="2120"
        height="1168"
        alt=""
        fetchPriority="high"
        decoding="async"
      />
      <div className="aa-hero-shadow"/>
      <div className="aa-hero-grid"/>
    </div>
  );
}

function Hero() {
  return (
    <section className="aa-hero motion-hero" id="top" aria-label="Alpha Arena" data-reveal="hero" data-parallax-section>
      <HeroMedia/>

      <div className="aa-hero-shell">
        <div className="aa-hero-copy" data-reveal="up">
          <div className="aa-hero-kicker mono">
            <span>Global Trading Tournament</span>
            <span>S03</span>
            <span>Bali Finals</span>
          </div>

          <h1 className="aa-hero-title display">
            <span>Alpha</span>
            <span>Arena</span>
          </h1>

          <div className="aa-hero-actions">
            <a className="aa-button aa-button-primary" href="#register">
              Enter The Arena
              <svg viewBox="0 0 20 12" aria-hidden="true">
                <path d="M0 6H18M13 1L18 6L13 11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"/>
              </svg>
            </a>
            <a className="aa-button aa-button-secondary" href="#program">
              View Program
            </a>
          </div>
        </div>

        <div className="aa-hero-status" data-reveal="card" style={{"--reveal-delay": "120ms"}} aria-label="Event status">
          <div className="aa-status-row">
            <span className="aa-status-dot"/>
            <span className="mono">Qualification Open</span>
          </div>
          <div className="aa-status-title">Final landing window</div>
          <div className="aa-status-value">Est. Aug 2026</div>
          <div className="aa-status-divider"/>
          <div className="aa-status-meta">
            <span>Bali</span>
            <span>50+ contestants</span>
            <span>$100K prize pool</span>
          </div>
        </div>
      </div>

      <HeroMetricStrip/>
    </section>
  );
}

window.StickyNav = StickyNav;
window.Hero = Hero;