// ============ HOW TO JOIN ============
const JOIN_STEPS = [
  {
    number: "01",
    title: "Apply",
    body: "Submit your trader profile through the registration contact and confirm regional eligibility.",
  },
  {
    number: "02",
    title: "Qualify",
    body: "Enter the selection window, prove consistency, and move up through the live leaderboard.",
  },
  {
    number: "03",
    title: "Compete",
    body: "Join the produced Bali final with host segments, partner media, and the S03 crown on stage.",
  },
];

function JoinStep({ step, index }) {
  return (
    <article className="aa-join-step" data-reveal="card" style={{"--reveal-delay": `${index * 90}ms`}}>
      <span className="aa-join-step-number display">{step.number}</span>
      <div>
        <h3>{step.title}</h3>
        <p>{step.body}</p>
      </div>
    </article>
  );
}

function HowToJoin() {
  return (
    <section id="join" className="aa-section aa-join motion-section" aria-label="How to join" data-reveal="section" data-loop-fade-start>
      <div className="wrap aa-join-wrap">
        <div className="aa-section-heading aa-join-heading" data-reveal="up">
          <div className="sec-label">04 / How To Join</div>
          <h2 className="display aa-section-title">
            <span>Earn the</span>
            <span>final seat.</span>
          </h2>
          <p className="aa-section-copy">
            The path is intentionally direct: apply, qualify, then compete under live conditions
            when the season lands in Bali.
          </p>
        </div>

        <div className="aa-join-stage">
          <div className="aa-join-portrait" aria-hidden="true">
            <img src="uploads/how-to-join-portrait.png" alt="" loading="lazy" decoding="async"/>
          </div>
          <div className="aa-join-steps">
            {JOIN_STEPS.map((step, index) => (
              <JoinStep key={step.number} step={step} index={index}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.HowToJoin = HowToJoin;

// ============ SPONSORS / MEDIA ============
const LEADERSHIP_SPONSOR_SLOTS = [
  { name: "MEXC Ventures", meta: "Title Sponsor", status: "Title Sponsor", confirmed: true, emphasis: true, logo: "uploads/sponsor-logos/mexc-ventures-white.png" },
  { name: "TRIV", meta: "Co-host", status: "Co-host", confirmed: true, emphasis: true },
];

const FEATURED_STRATEGY_SPONSOR_SLOTS = [
  { name: "BeInCrypto", meta: "Strategy Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/beincrypto-white.png" },
  { name: "WuBlockchain", meta: "Strategy Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/wublockchain-white.png" },
  { name: "ChainCatcher", meta: "Strategy Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/chaincatcher.png" },
  { name: "RootData", meta: "Strategy Partner", status: "Strategy Partner", confirmed: true },
  { name: "Tencent Cloud", meta: "Strategy Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/sponsor-logos/tencent-cloud-white.svg" },
];

const STRATEGY_SPONSOR_SLOTS = FEATURED_STRATEGY_SPONSOR_SLOTS;

const CONFIRMED_MEDIA_PARTNER_SLOTS = [
  { name: "BlockBeats", meta: "Media Partner", status: "Strategy Partner", confirmed: true },
  { name: "BlockTempo", meta: "Media Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/blocktempo-white.png" },
  { name: "Bitcoin.com", meta: "Media Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/bitcoin-com.png", logoClass: "sponsor-logo-img-monochrome" },
  { name: "PA News", meta: "Media Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/panews-white.png" },
  { name: "Odaily", meta: "Media Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/odaily-white.png" },
  { name: "TechFlow", meta: "Media Partner", status: "Strategy Partner", confirmed: true, logo: "uploads/media-logos/techflow-white.svg" },
];

const MEDIA_PARTNER_SLOTS = CONFIRMED_MEDIA_PARTNER_SLOTS;

const MEDIA_LOGOS = [
  { name: "BlockTempo", src: "uploads/media-logos/blocktempo.png" },
  { name: "Bitcoin.com", src: "uploads/media-logos/bitcoin-com.png" },
  { name: "PA News", src: "uploads/media-logos/panews-white.png" },
  { name: "Odaily", src: "uploads/media-logos/odaily-white.png", logoClass: "media-logo-img-darken" },
  { name: "TechFlow", src: "uploads/media-logos/techflow-white.svg", logoClass: "media-logo-img-darken" },
];

const CONFIRMED_PARTNER_STATUSES = ["Confirmed", "Strategy Partner"];

function SponsorCard({ name, meta, status = "To Be Announced", confirmed = false, emphasis = false, logo, logoClass = "", revealIndex = 0 }) {
  const isEmphasis = emphasis || meta === "Title Sponsor" || meta === "Title Slot";
  const isConfirmed = confirmed || CONFIRMED_PARTNER_STATUSES.includes(status);
  const hasLogo = Boolean(logo);

  return (
    <div className={`sponsor-card motion-card${isEmphasis ? " sponsor-card-title" : ""}${isConfirmed ? " sponsor-card-confirmed" : ""}${hasLogo ? " sponsor-card-logo" : ""}`} aria-label={`${name} ${meta}`} data-reveal="card" style={{"--reveal-delay": `${revealIndex * 55}ms`}}>
      <span className="sponsor-card-meta mono">{meta}</span>
      {hasLogo ? (
        <span className="sponsor-logo-lockup" aria-hidden="true">
          <img className={`sponsor-logo-img ${logoClass}`.trim()} src={logo} alt="" loading="lazy" decoding="async"/>
        </span>
      ) : null}
      <span className="sponsor-card-name">{name}</span>
      <span className="sponsor-card-status mono">{status}</span>
    </div>
  );
}

function MediaLogo({ name, src, logoClass = "", revealIndex = 0 }) {
  return (
    <div className="media-logo-item" aria-label={name} data-reveal="card" style={{"--reveal-delay": `${revealIndex * 35}ms`}}>
      {src ? (
        <img className={`media-logo-img ${logoClass}`.trim()} src={src} alt={name} loading="lazy" decoding="async"/>
      ) : (
        <span className="media-logo-text">{name}</span>
      )}
    </div>
  );
}

function PartnerGroup({ eyebrow, title, className = "", children }) {
  return (
    <div className={`partner-group ${className}`.trim()} data-reveal="up">
      <div className="partner-group-heading">
        <span className="partner-group-eyebrow mono">{eyebrow}</span>
        <h3 className="display partner-group-title">{title}</h3>
      </div>
      {children}
    </div>
  );
}

function Sponsors() {
  const mediaLoop = MEDIA_LOGOS.concat(MEDIA_LOGOS);

  return (
    <section id="partners" className="sponsors-section" data-reveal="section">
      <div className="sponsors-atmosphere" aria-hidden="true"/>

      <div className="wrap sponsors-wrap">
        <div className="partners-heading" data-reveal="up">
          <div className="sec-label">05 / Partners</div>
          <h2 className="display partners-title brand-display" aria-label="Alpha Arena Bali 2026 Sponsors">
            <span className="partners-title-kicker">Alpha Arena Bali / Est. Aug 2026</span>
            <span className="partners-title-word">Sponsors</span>
          </h2>
          <a className="sponsors-action mono" href="./Sponsor%20Deck.html">
            Become A Sponsor
            <span className="sponsors-action-icon" aria-hidden="true">
              <svg viewBox="0 0 20 20" focusable="false">
                <path d="M5 10H14M10.5 6.5L14 10L10.5 13.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"/>
              </svg>
            </span>
          </a>
        </div>

        <PartnerGroup eyebrow="01 / Leadership" title="Title Sponsor / Co-host" className="partner-group-leadership">
          <div className="sponsor-grid sponsor-grid-leadership">
            {LEADERSHIP_SPONSOR_SLOTS.map((sponsor, index) => (
              <SponsorCard key={sponsor.name} name={sponsor.name} meta={sponsor.meta} status={sponsor.status} confirmed={sponsor.confirmed} emphasis={sponsor.emphasis} logo={sponsor.logo} logoClass={sponsor.logoClass} revealIndex={index}/>
            ))}
          </div>
        </PartnerGroup>

        {STRATEGY_SPONSOR_SLOTS.length > 0 && (
          <PartnerGroup eyebrow="02 / Strategy" title="Strategy Partners" className="partner-group-strategy">
            <div className="sponsor-grid sponsor-grid-main">
              {STRATEGY_SPONSOR_SLOTS.map((sponsor, index) => (
                <SponsorCard key={sponsor.slotKey || sponsor.name} name={sponsor.name} meta={sponsor.meta} status={sponsor.status} confirmed={sponsor.confirmed} emphasis={sponsor.emphasis} logo={sponsor.logo} logoClass={sponsor.logoClass} revealIndex={index}/>
              ))}
            </div>
          </PartnerGroup>
        )}

        <div className="partners-heading partners-heading-secondary" data-reveal="up">
          <h3 className="display partners-title partners-title-small brand-display" aria-label="Alpha Arena Bali 2026 Media Partner">
            <span className="partners-title-kicker">Alpha Arena Bali / Est. Aug 2026</span>
            <span className="partners-title-word">Media Partner</span>
          </h3>
        </div>

        <div className="sponsor-grid media-partner-grid">
          {MEDIA_PARTNER_SLOTS.map((partner, index) => (
            <SponsorCard key={partner.slotKey || partner.name} name={partner.name} meta={partner.meta} status={partner.status} confirmed={partner.confirmed} emphasis={partner.emphasis} logo={partner.logo} logoClass={partner.logoClass} revealIndex={index}/>
          ))}
        </div>

        <div className="media-section" data-reveal="up">
          <h3 className="display partners-title media-section-title brand-display" aria-label="Media">
            <span className="partners-title-word">Media</span>
          </h3>
          <div className="media-carousel" aria-label="Alpha Arena media">
            <div className="media-carousel-track">
              {mediaLoop.map((media, index) => (
                <MediaLogo key={`${media.name}-${index}`} name={media.name} src={media.src} logoClass={media.logoClass} revealIndex={index % MEDIA_LOGOS.length}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Sponsors = Sponsors;

// ============ CTA / REGISTER ============
const CTA_CROWN_VIDEO_PATH = "uploads/cta-loop-202604191006.mp4";
const CTA_CROWN_VIDEO_FALLBACK_PATH = "uploads/cta-loop-202604191006-lite.mp4";
const CTA_CROWN_POSTER_PATH = "uploads/cta-loop-poster.webp";

function CrownVideo({ className }) {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    video.muted = true;
    video.defaultMuted = true;
    video.playsInline = true;
    video.loop = true;

    const attemptPlay = () => {
      const playPromise = video.play();
      if (playPromise && typeof playPromise.catch === "function") {
        playPromise.catch(() => {});
      }
    };

    const handleCanPlay = () => {
      attemptPlay();
    };

    const handleVisibility = () => {
      if (!document.hidden) attemptPlay();
    };

    video.addEventListener("canplay", handleCanPlay);
    video.addEventListener("loadeddata", handleCanPlay);
    document.addEventListener("visibilitychange", handleVisibility);
    attemptPlay();

    return () => {
      video.removeEventListener("canplay", handleCanPlay);
      video.removeEventListener("loadeddata", handleCanPlay);
      document.removeEventListener("visibilitychange", handleVisibility);
    };
  }, []);

  return (
    <video
      ref={videoRef}
      className={className}
      data-animated-media="crown-video"
      autoPlay
      muted
      loop
      playsInline
      preload="auto"
      poster={CTA_CROWN_POSTER_PATH}
      disablePictureInPicture
      aria-hidden="true"
    >
      <source src={`${CTA_CROWN_VIDEO_PATH}?v=2`} type="video/mp4" />
      <source src={`${CTA_CROWN_VIDEO_FALLBACK_PATH}?v=2`} type="video/mp4" />
    </video>
  );
}

function CTA() {
  return (
    <section id="register" className="cta-section aa-cta" data-reveal="section">
      <div className="wrap aa-cta-wrap">
        <div className="aa-cta-copy" data-reveal="up">
          <div className="cta-kicker mono">Registration / Open Now</div>
          <h2 className="display cta-title brand-display" aria-label="Enter the arena.">
            <span className="cta-title-line cta-title-line-light">Enter the</span>
            <span className="cta-title-line cta-title-line-red">Arena.</span>
          </h2>
          <p className="condensed cta-subtitle">Fortune favors the brave.</p>

          <a href="https://t.me/Cedric_MEXC" className="btn-primary cta-contact-button" data-reveal="up" style={{"--reveal-delay": "90ms"}}>
            Contact Us
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" aria-hidden="true">
              <path d="M0 6H18M13 1L18 6L13 11" stroke="currentColor" strokeWidth="1.8"/>
            </svg>
          </a>

          <div className="cta-meta mono" data-reveal="up" style={{"--reveal-delay": "180ms"}}>
            <span className="cta-meta-item">
              <span className="cta-meta-dot cta-meta-dot-red" aria-hidden="true"/>
              Qualification / Open Now
            </span>
            <span className="cta-meta-item">
              <span className="cta-meta-dot cta-meta-dot-blue" aria-hidden="true"/>
              Final / Est. Aug 2026 / Bali
            </span>
            <span className="cta-meta-item">
              <span className="cta-meta-dot cta-meta-dot-light" aria-hidden="true"/>
              Limited Seats / First Come
            </span>
          </div>
        </div>

        <div className="aa-cta-media" data-reveal="card" style={{"--reveal-delay": "160ms"}}>
          <CrownVideo className="cta-reference-video"/>
        </div>
      </div>
    </section>
  );
}
window.CTA = CTA;

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap site-footer-wrap">
        <div className="site-footer-brand">
          <AlphaLogo size={36} color="#f4f6fb"/>
          <div>
            <div className="display site-footer-title">Alpha Arena</div>
            <div className="mono site-footer-meta">Aug 2026 / S03</div>
          </div>
        </div>
        <div className="mono site-footer-copy">
          Copyright 2026 / Fortune Favors The Brave
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;