const SPONSOR_DECK_NAV_ITEMS = [
  { id: "overview", label: "Overview", shortLabel: "Intro" },
  { id: "value", label: "Sponsor Value", shortLabel: "Value" },
  { id: "packages", label: "Packages", shortLabel: "Packs" },
  { id: "campaign", label: "Campaign", shortLabel: "Flow" },
  { id: "proof", label: "Recap", shortLabel: "Recap" },
  { id: "contact", label: "Contact", shortLabel: "Talk" }
];

const SPONSOR_DECK_HERO = {
  kicker: "Alpha Arena Sponsorship 2026",
  title: "Sponsor Alpha Arena Bali Side Event",
  body: "A focused side-event sponsorship path inside Coinfest week, built around community reach, livestream visibility, media recap, and finalist moments.",
  primaryCta: "View Packages",
  secondaryCta: "Request Sponsorship Availability"
};

const SPONSOR_DECK_SIGNAL_STRIP = [
  "Coinfest Week",
  "Bali Final",
  "50+ Selected Traders",
  "$100K Prize Pool",
  "Livestream Inventory",
  "Side Event Visibility",
  "Media Recap Assets",
  "APAC Trading Communities"
];

const SPONSOR_DECK_DECISION_MEMO = [
  {
    label: "Audience",
    value: "APAC traders",
    text: "A concentrated audience of active traders, creators, regional communities, and partner media."
  },
  {
    label: "Moment",
    value: "Bali final",
    text: "A produced side event gives the campaign a concrete story arc and finalist moment without turning the page into fixed venue commitments."
  },
  {
    label: "Surfaces",
    value: "4 channels",
    text: "Planned touchpoints across community, livestream, side-event visibility, media recap, and reusable proof."
  },
  {
    label: "Packages",
    value: "$10K-$50K",
    text: "A compact tier ladder from efficient community exposure to flagship side-event visibility."
  }
];

const SPONSOR_CONTACT_URL = "https://t.me/Cedric_MEXC";

const SPONSOR_DECK_METRICS = [
  {
    value: "$100K",
    label: "Prize Pool",
    text: "A winner led competition format built around visible stakes and sponsor backed moments."
  },
  {
    value: "50+",
    label: "Selected Traders",
    text: "Qualified trading talent moving from online selection into a produced Bali final."
  },
  {
    value: "APAC",
    label: "Trading Communities",
    text: "Regional trading audiences, creators, media partners, and event guests concentrated in one campaign window."
  },
  {
    value: "Aug 20 to 21",
    label: "Bali Final",
    text: "Event week timing supports pre event promotion, live exposure, and recap distribution."
  }
];

const SPONSOR_DECK_VALUES = [
  {
    label: "Audience Access",
    title: "Reach Active Trading Communities",
    text: "Alpha Arena is built around traders, creators, and regional crypto audiences with direct interest in platforms, products, liquidity, tools, and market narratives."
  },
  {
    label: "Campaign Distribution",
    title: "Show Up Before, During, And After The Final",
    text: "Sponsors can be included across qualification updates, social posts, livestream moments, side event visibility, media recaps, and post event content, with scope confirmed before launch."
  },
  {
    label: "Trust Transfer",
    title: "Attach Your Brand To A Competitive Format",
    text: "A live trading competition creates stronger brand memory than static logo placement because the sponsor appears inside stakes, performance, commentary, and winner moments."
  },
  {
    label: "Content Assets",
    title: "Leave With Reusable Proof",
    text: "Sponsors can receive a curated recap package where assets are available, such as selected photos, screenshots, clips, media links, and winner content."
  },
  {
    label: "Side Event Access",
    title: "Meet The Market In A Focused Side Event",
    text: "The Bali final creates a focused meeting point for traders, partners, creators, media, and regional communities inside the wider Coinfest week."
  },
  {
    label: "Commercial Fit",
    title: "Built For Web3, Trading, Fintech, And Consumer Crypto Brands",
    text: "The format is suitable for exchanges, wallets, trading tools, infrastructure providers, data platforms, launchpads, communities, and ecosystem brands seeking APAC visibility."
  }
];

const SPONSOR_DECK_TIERS = [
  {
    key: "flagship",
    index: "01",
    title: "Flagship Sponsor",
    subtitle: "Co Presenting level",
    price: "$50,000",
    badge: "Open Package",
    tone: "red",
    quote: "The highest-visibility layer for brands that want to lead the Bali finalist moment, with final activations confirmed by category fit."
  },
  {
    key: "growth",
    index: "02",
    title: "Strategic Partner",
    subtitle: "Strategic Partner level",
    price: "$25,000",
    badge: "Open Package",
    tone: "blue",
    quote: "Built for brands that want visible APAC trader reach through a focused Bali finalist moment and a practical activation scope."
  },
  {
    key: "community",
    index: "03",
    title: "Community Partner",
    subtitle: "Community Partner level",
    price: "$10,000",
    badge: "Open Package",
    tone: "white",
    quote: "A lighter community layer for partners who need credible presence around qualification, livestream, and recap."
  }
];

const SPONSOR_DECK_COMPARISON = [
  {
    benefit: "Brand Placement",
    flagship: "+++",
    growth: "++",
    community: "+"
  },
  {
    benefit: "Social And Community",
    flagship: "+++",
    growth: "++",
    community: "+"
  },
  {
    benefit: "Media Promotion",
    flagship: "+++",
    growth: "++",
    community: "+"
  },
  {
    benefit: "Livestream Exposure",
    flagship: "+++",
    growth: "++",
    community: "+"
  },
  {
    benefit: "Side Event Visibility",
    flagship: "+++",
    growth: "++",
    community: "+"
  },
  {
    benefit: "Post Event Assets",
    flagship: "+++",
    growth: "++",
    community: "+"
  }
];

const SPONSOR_DECK_CAMPAIGN_ENGINE = [
  {
    phase: "Before Bali",
    title: "Qualification And Community Build Up",
    timing: "Pre event",
    text: "Sponsors can be included during registration, qualification updates, leaderboard stories, community pushes, and social announcements.",
    surfaces: ["Social windows", "Community updates", "Website context", "Partner pushes", "Registration traffic"]
  },
  {
    phase: "During Bali",
    title: "Live Final And Side Event Presence",
    timing: "Event week",
    text: "Sponsors gain visibility through a scoped mix of livestream overlays, host mentions, guest access support, side-event branding, and winner moments.",
    surfaces: ["Livestream", "Side event", "Guest access", "Media capture", "Winner moment"]
  },
  {
    phase: "After Bali",
    title: "Recap And Reusable Assets",
    timing: "Post event",
    text: "Sponsors can receive a curated recap package based on captured materials, media references, photos, video cuts, and useful screenshots.",
    surfaces: ["Recap content", "Media links", "Selected photos", "Screenshots", "Summary"]
  }
];

const SPONSOR_DECK_VENUE_CONTEXT = {
  title: "Bali Final During Coinfest Week",
  location: "Melasti Beach, Bali",
  hall: "F2 Main Building / Event Hall 3",
  text: "The Bali final gives sponsors an offline setting for side-event visibility, media capture, and partner meetings inside the wider Coinfest environment.",
  proofPoints: ["Beach side destination context", "Side event room context", "Venue map context", "On site capture"]
};

const SPONSOR_DECK_VENUE_IMAGES = [
  {
    src: "uploads/venue/bali-melasti-beach-venue.webp",
    label: "Destination",
    title: "Melasti Beach",
    alt: "Bali coastline and beach side event setting inspired by Melasti Beach"
  },
  {
    src: "uploads/venue/coinfest-alpha-arena-indoor-hall.webp",
    label: "Venue",
    title: "Side Event Room",
    alt: "Indoor Coinfest room with audience seating, blue lighting, bar, and check in desk"
  },
  {
    src: "uploads/venue/coinfest-alpha-arena-venue-map.webp",
    label: "Map",
    title: "Event Hall 3",
    alt: "Coinfest Asia venue map highlighting Alpha Arena location in F2 Main Building Event Hall 3"
  }
];

const SPONSOR_DECK_INVENTORY = [
  {
    category: "Community Distribution",
    items: ["Announcement window", "Community update inclusion", "Qualification story alignment", "Partner channel amplification", "Recap mention opportunity"]
  },
  {
    category: "Livestream And Content",
    items: ["Stream visual layer", "Lower third option", "Host mention option", "Relevant stream mention", "Highlight inclusion when suitable"]
  },
  {
    category: "Side Event Presence",
    items: ["Side event logo context", "Guest access support", "Media capture opportunity", "Roundtable fit if scheduled", "Event access support"]
  },
  {
    category: "Media And PR",
    items: ["Release inclusion option", "Media recap reference", "Interview support when relevant", "Partner media amplification", "Coverage link collection"]
  },
  {
    category: "Winner And Challenge Moments",
    items: ["Named moment option", "Partner challenge alignment", "Winner selection visibility", "Finalist quote capture", "Recap association opportunity"]
  }
];

const SPONSOR_DECK_DELIVERY = [
  {
    window: "Before Event Week",
    title: "Campaign Setup",
    deliverables: ["Sponsor onboarding", "Logo and brand asset intake", "Announcement plan", "Placement plan", "Community timing map"]
  },
  {
    window: "During Event Week",
    title: "Live Activation",
    deliverables: ["Livestream placement plan", "Side event visibility plan", "Host mention window when relevant", "Photo and video capture attempt", "Winner or challenge moment if scoped"]
  },
  {
    window: "After Event Week",
    title: "Recap Package",
    deliverables: ["Selected recap assets", "Available event photos", "Confirmed media and social links", "Available exposure screenshots", "Recap summary by final scope"]
  }
];

const SPONSOR_DECK_CTA = {
  kicker: "Sponsorship Open",
  title: "Request Sponsorship Availability",
  text: "Tell us your target market, sponsor tier, and category. The team will confirm category fit, final activation scope, available touchpoints, and next steps.",
  packet: [
    { label: "Packages", value: "$10K / $25K / $50K" },
    { label: "Window", value: "Qualification to Bali final to recap" },
    { label: "Touchpoints", value: "Community, livestream, side event, media, content" },
    { label: "Next Step", value: "Confirm tier, category, and activation scope" }
  ],
  cta: "Contact Sponsorship Team",
  href: SPONSOR_CONTACT_URL
};

function useSponsorDeckMotion() {
  React.useEffect(() => {
    const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const nodes = Array.from(document.querySelectorAll("[data-sponsor-reveal]"));

    if (!nodes.length) return undefined;

    if (reduceMotion || !("IntersectionObserver" in window)) {
      nodes.forEach((node) => node.classList.add("is-visible"));
      return undefined;
    }

    document.body.classList.add("is-sponsor-motion-ready");

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target);
      });
    }, { threshold: 0.01, rootMargin: "0px 0px 12% 0px" });

    nodes.forEach((node) => observer.observe(node));

    return () => {
      observer.disconnect();
      document.body.classList.remove("is-sponsor-motion-ready");
    };
  }, []);
}

function useSponsorDeckActiveSection() {
  const [activeSection, setActiveSection] = React.useState(SPONSOR_DECK_NAV_ITEMS[0].id);

  React.useEffect(() => {
    const sections = SPONSOR_DECK_NAV_ITEMS
      .map((item) => document.getElementById(item.id))
      .filter(Boolean);

    if (!sections.length) return undefined;

    let frame = 0;

    const resolveActiveSection = () => {
      frame = 0;

      const probe = Math.min(300, Math.max(180, window.innerHeight * 0.28));
      let nextSection = sections[0].id;
      const maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
      const scrollProgress = Math.min(1, Math.max(0, window.scrollY / maxScroll));

      sections.forEach((section) => {
        const rect = section.getBoundingClientRect();
        if (rect.top <= probe) {
          nextSection = section.id;
        }
      });

      const pageBottom = window.scrollY + window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;
      if (documentHeight - pageBottom <= 8) {
        nextSection = sections[sections.length - 1].id;
      }

      setActiveSection((currentSection) => (
        currentSection === nextSection ? currentSection : nextSection
      ));
      document.body.style.setProperty("--sponsor-scroll-progress", scrollProgress.toFixed(4));
    };

    const scheduleResolve = () => {
      if (frame) return;
      frame = window.requestAnimationFrame(resolveActiveSection);
    };

    scheduleResolve();
    window.addEventListener("scroll", scheduleResolve, { passive: true });
    window.addEventListener("resize", scheduleResolve);
    window.addEventListener("hashchange", scheduleResolve);

    return () => {
      if (frame) window.cancelAnimationFrame(frame);
      window.removeEventListener("scroll", scheduleResolve);
      window.removeEventListener("resize", scheduleResolve);
      window.removeEventListener("hashchange", scheduleResolve);
      document.body.style.removeProperty("--sponsor-scroll-progress");
    };
  }, []);

  return activeSection;
}

function useSponsorDeckHashScroll() {
  React.useEffect(() => {
    const scrollToHashTarget = () => {
      const hash = window.location.hash;
      if (!hash || hash.length <= 1) return;

      let targetId = hash.slice(1);
      try {
        targetId = decodeURIComponent(targetId);
      } catch (error) {
        return;
      }

      const target = document.getElementById(targetId);
      if (!target) return;

      window.setTimeout(() => {
        target.scrollIntoView({ block: "start", behavior: "auto" });
      }, 0);
    };

    scrollToHashTarget();
    window.addEventListener("hashchange", scrollToHashTarget);

    return () => window.removeEventListener("hashchange", scrollToHashTarget);
  }, []);
}

function SponsorDeckNav() {
  const activeSection = useSponsorDeckActiveSection();

  return (
    <header className="sponsor-deck-nav">
      <a className="sponsor-deck-brand" href="./Alpha%20Arena.html" aria-label="Back to Alpha Arena">
        <AlphaLogo size={42} color="#f7f7f2"/>
        <span>Alpha Arena | TRIV | MEXC Ventures</span>
      </a>
      <nav className="sponsor-deck-links" aria-label="Sponsor deck sections">
        {SPONSOR_DECK_NAV_ITEMS.map((item) => (
          <a
            key={item.id}
            href={`#${item.id}`}
            aria-label={item.label}
            aria-current={activeSection === item.id ? "page" : undefined}
            data-short-label={item.shortLabel}
          >
            <span>{item.label}</span>
          </a>
        ))}
      </nav>
    </header>
  );
}

function SponsorDeckHero() {
  const videoRef = React.useRef(null);

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

    const playHeroVideo = () => {
      video.muted = true;
      const playRequest = video.play();
      if (playRequest && typeof playRequest.catch === "function") {
        playRequest.catch(() => {});
      }
    };

    playHeroVideo();
    video.addEventListener("canplay", playHeroVideo);
    video.addEventListener("loadeddata", playHeroVideo);

    return () => {
      video.removeEventListener("canplay", playHeroVideo);
      video.removeEventListener("loadeddata", playHeroVideo);
    };
  }, []);

  return (
    <section id="overview" className="sponsor-deck-hero">
      <video
        ref={videoRef}
        className="sponsor-deck-hero-video"
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        poster="uploads/venue/bali-sponsor-loop-poster.webp"
        aria-hidden="true"
      >
        <source src="uploads/venue/bali-sponsor-loop-20260617-mobile.webm" type="video/webm" media="(max-width: 760px)"/>
        <source src="uploads/venue/bali-sponsor-loop-20260617-web.webm" type="video/webm" media="(min-width: 761px)"/>
        <source src="uploads/venue/bali-sponsor-loop-20260617-mobile.mp4" type="video/mp4" media="(max-width: 760px)"/>
        <source src="uploads/venue/bali-sponsor-loop-20260617-web.mp4" type="video/mp4"/>
      </video>
      <div className="sponsor-deck-hero-scrim" aria-hidden="true"/>
      <div className="wrap sponsor-deck-hero-inner">
        <div className="sponsor-deck-hero-copy" data-sponsor-reveal>
          <div className="sponsor-deck-kicker">{SPONSOR_DECK_HERO.kicker}</div>
          <h1 className="sponsor-deck-title" aria-label={SPONSOR_DECK_HERO.title}>
            <span>Sponsor</span>
            <span><em>Alpha Arena</em></span>
            <span><strong>Bali Side Event</strong></span>
          </h1>
          <p className="sponsor-deck-hero-body">{SPONSOR_DECK_HERO.body}</p>
          <div className="sponsor-deck-cover-actions">
            <a className="btn-primary" href="#packages">{SPONSOR_DECK_HERO.primaryCta}</a>
            <a className="btn-ghost" href={SPONSOR_CONTACT_URL} target="_blank" rel="noopener">{SPONSOR_DECK_HERO.secondaryCta}</a>
          </div>
        </div>

        <aside className="sponsor-deck-brief" aria-label="Sponsor campaign summary" data-sponsor-reveal style={{ "--reveal-delay": "110ms" }}>
          <div className="sponsor-deck-brief-mark">
            <div>
              <span>Presented with</span>
              <div className="sponsor-deck-brief-partners">
                <b>TRIV</b>
                <img src="uploads/sponsor-logos/mexc-ventures-white.png" alt="MEXC Ventures" width="2560" height="239"/>
              </div>
            </div>
            <strong>Open sponsor cycle</strong>
          </div>
          <dl>
            <div>
              <dt>Format</dt>
              <dd>Online qualification to Bali final</dd>
            </div>
            <div>
              <dt>Budget</dt>
              <dd>$10K to $50K</dd>
            </div>
            <div>
              <dt>Final</dt>
              <dd>Aug 20 to 21 / Bali</dd>
            </div>
          </dl>
        </aside>

        <div className="sponsor-deck-metrics" aria-label="Alpha Arena sponsorship metrics">
          {SPONSOR_DECK_METRICS.map((metric, index) => (
            <article key={metric.label} className="sponsor-deck-metric" data-sponsor-reveal style={{ "--reveal-delay": `${160 + index * 45}ms` }}>
              <strong>{metric.value}</strong>
              <span>{metric.label}</span>
              <p>{metric.text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SponsorDeckSignalStrip() {
  const stripItems = SPONSOR_DECK_SIGNAL_STRIP.concat(SPONSOR_DECK_SIGNAL_STRIP);

  return (
    <section className="sponsor-deck-signal-strip" aria-label="Sponsor campaign signals">
      <div className="sponsor-deck-signal-track">
        {stripItems.map((item, index) => (
          <span key={`${item}-${index}`}>{item}</span>
        ))}
      </div>
    </section>
  );
}

function SponsorDeckDecisionMemo() {
  return (
    <section className="sponsor-deck-section sponsor-deck-memo" aria-label="Sponsor decision memo">
      <div className="wrap sponsor-deck-memo-wrap">
        <div className="sponsor-deck-memo-copy" data-sponsor-reveal>
          <div className="sponsor-deck-kicker">00 / Sponsor Decision Memo</div>
          <h2 className="sponsor-deck-section-title">What a sponsor can align with.</h2>
          <p>
            Not a passive logo grid. Alpha Arena packages a competitive trading story into
            a sponsorable side-event campaign with audience, livestream, content, and recap scope.
          </p>
        </div>
        <div className="sponsor-deck-memo-grid" aria-label="Sponsor decision summary">
          {SPONSOR_DECK_DECISION_MEMO.map((item, index) => (
            <article key={item.label} className="sponsor-deck-memo-card" data-sponsor-reveal style={{ "--reveal-delay": `${index * 55}ms` }}>
              <span>{item.label}</span>
              <strong>{item.value}</strong>
              <p>{item.text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SponsorDeckSectionHeading({ kicker, title, text, wide }) {
  return (
    <div className={`sponsor-deck-section-heading${wide ? " is-wide" : ""}`} data-sponsor-reveal>
      <div className="sponsor-deck-kicker">{kicker}</div>
      <h2 className="sponsor-deck-section-title">{title}</h2>
      {text ? <p>{text}</p> : null}
    </div>
  );
}

function SponsorDeckSponsorValue() {
  return (
    <section id="value" className="sponsor-deck-section sponsor-deck-value">
      <div className="wrap">
        <SponsorDeckSectionHeading
          kicker="01 / Sponsor Value"
          title="Why Sponsors Should Care"
          text="The deck starts with commercial value: audience, distribution, trust, content proof, side-event access, and category fit."
          wide
        />

        <div className="sponsor-deck-value-grid">
          {SPONSOR_DECK_VALUES.map((item, index) => (
            <article key={item.label} className="sponsor-deck-value-card" data-sponsor-reveal style={{ "--reveal-delay": `${index * 55}ms` }}>
              <span>{item.label}</span>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SponsorDeckPackageCard({ tier, index }) {
  return (
    <article className={`sponsor-deck-package is-${tier.tone}${tier.unavailable ? " is-disabled" : ""}`} data-sponsor-reveal style={{ "--reveal-delay": `${index * 70}ms` }}>
      <div className="sponsor-deck-package-top">
        <span>{tier.badge}</span>
        <strong>{tier.index}</strong>
      </div>
      <div className="sponsor-deck-package-title">
        <h3>{tier.title}</h3>
        <em>{tier.subtitle}</em>
      </div>
      <div className="sponsor-deck-package-price">{tier.price}</div>
      <blockquote className="sponsor-deck-package-quote">{tier.quote}</blockquote>
    </article>
  );
}

function SponsorDeckPackages() {
  return (
    <section id="packages" className="sponsor-deck-section sponsor-deck-packages">
      <div className="wrap">
        <SponsorDeckSectionHeading
          kicker="02 / Sponsorship Packages"
          title="Sponsorship Packages"
          text="Three active side-event packages are open now, from community presence to flagship visibility."
          wide
        />

        <div className="sponsor-deck-package-grid">
          {SPONSOR_DECK_TIERS.map((tier, index) => <SponsorDeckPackageCard key={tier.key} tier={tier} index={index}/>)}
        </div>

        <div className="sponsor-deck-comparison" data-sponsor-reveal>
          <div className="sponsor-deck-comparison-head">
            <div>
              <span>Indicative scope</span>
              <strong>Package Direction</strong>
            </div>
            <a href={SPONSOR_CONTACT_URL} target="_blank" rel="noopener">Confirm Availability</a>
          </div>
          <div className="sponsor-deck-comparison-table" role="table" aria-label="Sponsor package comparison">
            <div className="sponsor-deck-comparison-row is-head" role="row">
              <div role="columnheader">Benefit</div>
              <div role="columnheader">Flagship</div>
              <div role="columnheader">Strategic</div>
              <div role="columnheader">Community</div>
            </div>
            {SPONSOR_DECK_COMPARISON.map((row) => (
              <div key={row.benefit} className="sponsor-deck-comparison-row" role="row">
                <div role="rowheader">{row.benefit}</div>
                <div role="cell"><span className="sponsor-deck-comparison-symbol">{row.flagship}</span></div>
                <div role="cell"><span className="sponsor-deck-comparison-symbol">{row.growth}</span></div>
                <div role="cell"><span className="sponsor-deck-comparison-symbol">{row.community}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SponsorDeckCampaignEngine() {
  return (
    <section id="campaign" className="sponsor-deck-section sponsor-deck-campaign">
      <div className="wrap">
        <SponsorDeckSectionHeading
          kicker="03 / Campaign Engine"
          title="Campaign Engine"
          text="One sponsor campaign framework across qualification, Bali final, and post event distribution."
          wide
        />

        <div className="sponsor-deck-campaign-grid">
          {SPONSOR_DECK_CAMPAIGN_ENGINE.map((step, index) => (
            <article key={step.phase} className="sponsor-deck-campaign-card" data-sponsor-reveal style={{ "--reveal-delay": `${index * 70}ms` }}>
              <div className="sponsor-deck-campaign-meta">
                <span>{step.phase}</span>
                <strong>{step.timing}</strong>
              </div>
              <h3>{step.title}</h3>
              <p>{step.text}</p>
              <div className="sponsor-deck-chip-list" aria-label={`${step.phase} sponsor surfaces`}>
                {step.surfaces.map((surface) => <span key={surface}>{surface}</span>)}
              </div>
            </article>
          ))}
        </div>

        <article className="sponsor-deck-venue-proof" data-sponsor-reveal>
          <div className="sponsor-deck-venue-proof-copy">
            <span>Bali Final Venue Proof</span>
            <h3>{SPONSOR_DECK_VENUE_CONTEXT.title}</h3>
            <dl>
              <div>
                <dt>Location</dt>
                <dd>{SPONSOR_DECK_VENUE_CONTEXT.location}</dd>
              </div>
              <div>
                <dt>Hall</dt>
                <dd>{SPONSOR_DECK_VENUE_CONTEXT.hall}</dd>
              </div>
            </dl>
            <p>{SPONSOR_DECK_VENUE_CONTEXT.text}</p>
            <div className="sponsor-deck-chip-list" aria-label="Venue proof points">
              {SPONSOR_DECK_VENUE_CONTEXT.proofPoints.map((point) => <span key={point}>{point}</span>)}
            </div>
          </div>
          <div className="sponsor-deck-venue-proof-media">
            {SPONSOR_DECK_VENUE_IMAGES.map((image, index) => (
              <figure key={image.src} className={index === 2 ? "is-map" : ""}>
                <img src={image.src} alt={image.alt} width="1672" height="941" loading="lazy" decoding="async"/>
                <figcaption>
                  <span>{image.label}</span>
                  <strong>{image.title}</strong>
                </figcaption>
              </figure>
            ))}
          </div>
        </article>
      </div>
    </section>
  );
}

function SponsorDeckInventory() {
  return (
    <section id="inventory" className="sponsor-deck-section sponsor-deck-inventory">
      <div className="wrap">
        <SponsorDeckSectionHeading
          kicker="04 / Sponsor Touchpoints"
          title="Sponsor Touchpoints"
          text="Potential touchpoints across community, broadcast, side-event moments, media, and post event recap."
          wide
        />

        <div className="sponsor-deck-inventory-grid">
          {SPONSOR_DECK_INVENTORY.map((group, index) => (
            <article key={group.category} className="sponsor-deck-inventory-card" data-sponsor-reveal style={{ "--reveal-delay": `${index * 45}ms` }}>
              <h3>{group.category}</h3>
              <ul>
                {group.items.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SponsorDeckDeliveryProof() {
  return (
    <section id="proof" className="sponsor-deck-section sponsor-deck-delivery">
      <div className="wrap">
        <SponsorDeckSectionHeading
          kicker="05 / Scope And Recap"
          title="Scope And Recap"
          text="Final recap assets are based on the confirmed package scope and what is captured during the campaign."
          wide
        />

        <div className="sponsor-deck-delivery-board">
          {SPONSOR_DECK_DELIVERY.map((step, index) => (
            <article key={step.window} className="sponsor-deck-delivery-step" data-sponsor-reveal style={{ "--reveal-delay": `${index * 70}ms` }}>
              <div className="sponsor-deck-delivery-index">
                <span>{step.window}</span>
                <strong>{step.title}</strong>
              </div>
              <ul className="sponsor-deck-delivery-list">
                {step.deliverables.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SponsorDeckCTA() {
  return (
    <section id="contact" className="sponsor-deck-final">
      <div className="wrap sponsor-deck-final-inner">
        <div className="sponsor-deck-final-copy" data-sponsor-reveal>
          <div className="sponsor-deck-kicker">{SPONSOR_DECK_CTA.kicker}</div>
          <h2 className="sponsor-deck-final-title">{SPONSOR_DECK_CTA.title}</h2>
          <p>{SPONSOR_DECK_CTA.text}</p>
        </div>
        <div className="sponsor-deck-final-panel" data-sponsor-reveal style={{ "--reveal-delay": "120ms" }}>
          <div className="sponsor-deck-final-panel-head">
            <span>Sponsor desk</span>
            <strong>Open now</strong>
          </div>
          <div className="sponsor-deck-final-packet" aria-label="Sponsor decision packet">
            {SPONSOR_DECK_CTA.packet.map((item) => (
              <div key={item.label}>
                <span>{item.label}</span>
                <strong>{item.value}</strong>
              </div>
            ))}
          </div>
          <div className="sponsor-deck-final-action">
            <a className="btn-primary" href={SPONSOR_DECK_CTA.href} target="_blank" rel="noopener">{SPONSOR_DECK_CTA.cta}</a>
            <span>Alpha Arena | TRIV | MEXC Ventures sponsorship desk</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function SponsorDeckApp() {
  useSponsorDeckMotion();
  useSponsorDeckHashScroll();

  return (
    <>
      <SponsorDeckNav/>
      <main className="sponsor-deck-root">
        <SponsorDeckHero/>
        <SponsorDeckSignalStrip/>
        <SponsorDeckDecisionMemo/>
        <SponsorDeckSponsorValue/>
        <SponsorDeckPackages/>
        <SponsorDeckCampaignEngine/>
        <SponsorDeckInventory/>
        <SponsorDeckDeliveryProof/>
        <SponsorDeckCTA/>
      </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<SponsorDeckApp/>);