/* MCA — Industries: Web3 Gaming (bespoke, dark-only) */

const { useState: useGAM, useEffect: useGAME, useRef: useGAMR } = React;

function GamReveal({ children, delay = 0, className = "", tag = "div", style = {} }) {
  const ref = useGAMR(null);
  const [seen, setSeen] = useGAM(false);
  useGAME(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce || !("IntersectionObserver" in window)) { setSeen(true); return; }
    let done = false;
    const reveal = () => { if (!done) { done = true; setSeen(true); } };
    const r = el.getBoundingClientRect();
    if (r.top < (window.innerHeight || 0) + 80) { reveal(); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    const t = setTimeout(reveal, 2600);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  const Tag = tag;
  return (
    <Tag ref={ref} className={`gam-reveal ${seen ? "gam-reveal--in" : ""} ${className}`}
      style={{ ...style, transitionDelay: seen ? `${delay}ms` : "0ms" }}>
      {children}
    </Tag>
  );
}

/* ---------- Hero visual: player level-up HUD ---------- */
function GamChart() {
  const bars = [3, 4, 4, 6, 7, 6, 9, 11, 10, 13];
  const w = 560, h = 480, bw = 34, gap = 18, x0 = 44, base = 396, seg = 16, sgap = 5;
  const tops = bars.map((n, i) => [x0 + i * (bw + gap) + bw / 2, base - n * (seg + sgap) + sgap]);
  const last = tops[tops.length - 1];
  return (
    <svg className="gam-chart" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      {/* HUD corner brackets */}
      <g stroke="rgba(95,240,240,0.18)" strokeWidth="1.2" fill="none">
        <path d="M4 36V4h32M556 4h-32M556 4v32" />
        <path d="M4 444v32h32M556 476h-32M556 476v-32" />
      </g>
      {/* XP progress bar */}
      <g>
        <text x="30" y="52" fontFamily="ui-monospace, monospace" fontSize="10.5" letterSpacing="0.16em" fill="rgba(170,230,240,0.6)">PLAYER BASE · XP</text>
        <rect x="30" y="62" width="360" height="10" rx="5" fill="rgba(120,220,230,0.08)" stroke="rgba(120,220,230,0.25)" strokeWidth="1" />
        <rect x="30" y="62" width="278" height="10" rx="5" fill="rgba(0,165,161,0.55)">
          <animate attributeName="width" values="278;300;278" dur="5s" repeatCount="indefinite" />
        </rect>
        <text x="404" y="71" fontFamily="ui-monospace, monospace" fontSize="10.5" letterSpacing="0.12em" fill="rgba(170,230,240,0.75)">78%</text>
      </g>
      {/* level-up callout */}
      <g fontFamily="ui-monospace, monospace" fontSize="10.5" letterSpacing="0.12em">
        <text x={last[0] - 16} y={last[1] - 34} textAnchor="end" fill="#5FF0F0">▲ LEVEL UP</text>
        <text x={last[0] - 16} y={last[1] - 18} textAnchor="end" fill="rgba(170,230,240,0.55)">RETAINED PLAYERS</text>
      </g>
      <line x1="20" x2={w - 20} y1={base + 8} y2={base + 8} stroke="rgba(120,220,230,0.28)" strokeWidth="1" />
      {/* segmented XP-style bars */}
      {bars.map((n, i) => (
        <g key={i} className="gam-chart__bar" style={{ transformOrigin: `0 ${base + 8}px`, animationDelay: `${i * 90}ms` }}>
          {Array.from({ length: n }).map((_, k) => (
            <rect key={k} x={x0 + i * (bw + gap)} y={base - (k + 1) * (seg + sgap) + sgap} width={bw} height={seg} rx="3.5"
              fill={k === n - 1 ? "rgba(95,240,240,0.75)" : `rgba(0,165,161,${0.14 + (k / n) * 0.34})`}
              stroke="rgba(64,224,224,0.25)" strokeWidth="1" />
          ))}
        </g>
      ))}
      {/* pulse on top of final bar */}
      <g>
        <circle cx={last[0]} cy={last[1] - 4} r="4.5" fill="#00A5A1" />
        <circle cx={last[0]} cy={last[1] - 4} r="10" fill="none" stroke="rgba(0,165,161,0.5)" strokeWidth="1">
          <animate attributeName="r" from="10" to="30" dur="2.4s" repeatCount="indefinite" />
          <animate attributeName="opacity" from="0.7" to="0" dur="2.4s" repeatCount="indefinite" />
        </circle>
      </g>
      {/* level axis */}
      <g fontFamily="ui-monospace, monospace" fontSize="10.5" letterSpacing="0.14em" fill="rgba(170,230,240,0.55)">
        {bars.map((_, i) => (i % 3 === 0 || i === bars.length - 1) && (
          <text key={i} x={x0 + i * (bw + gap) + bw / 2} y={base + 32} textAnchor="middle">{"LVL " + String(i + 1).padStart(2, "0")}</text>
        ))}
        <text x="30" y={h - 18}>SEASON 01 — LAUNCH</text>
        <text x={w - 30} y={h - 18} textAnchor="end">SEASON 04 — POST-TGE</text>
      </g>
    </svg>
  );
}

const gamCall = () => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener");

/* ---------- Service line glyphs ---------- */
function GamGlyph({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.3, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "strategy": return (<svg width="36" height="36" viewBox="0 0 34 34"><circle cx="17" cy="17" r="12" {...p} /><circle cx="17" cy="17" r="6" {...p} /><circle cx="17" cy="17" r="1.6" fill="currentColor" /><path d="M17 5V1M17 33v-4M5 17H1M33 17h-4" {...p} /></svg>);
    case "players": return (<svg width="36" height="36" viewBox="0 0 34 34"><path d="M10 9h14c4.5 0 8 3.6 8 8.1 0 4.4-3.3 7.9-7.4 7.9-2.3 0-4.4-1.1-5.8-2.9h-3.6c-1.4 1.8-3.5 2.9-5.8 2.9C5.3 25 2 21.5 2 17.1 2 12.6 5.5 9 10 9z" {...p} /><path d="M10 14v6M7 17h6" {...p} /><circle cx="24" cy="15.5" r="1.5" fill="currentColor" /><circle cx="27.5" cy="19" r="1.5" fill="currentColor" /></svg>);
    case "token": return (<svg width="36" height="36" viewBox="0 0 34 34"><circle cx="13" cy="17" r="10" {...p} /><circle cx="21" cy="17" r="10" {...p} /></svg>);
    case "bd": return (<svg width="36" height="36" viewBox="0 0 34 34"><circle cx="17" cy="8" r="3.4" {...p} /><circle cx="7" cy="24" r="3.4" {...p} /><circle cx="27" cy="24" r="3.4" {...p} /><path d="M14.5 10.5L9 21M19.5 10.5L25 21M10.4 24h13.2" {...p} /></svg>);
    case "retention": return (<svg width="36" height="36" viewBox="0 0 34 34"><path d="M29 17a12 12 0 1 1-3.5-8.5" {...p} /><path d="M26 3v6h-6" {...p} /><circle cx="17" cy="17" r="1.8" fill="currentColor" /></svg>);
    default: return null;
  }
}

/* ---------- Page ---------- */
function Web3GamingPage({ navigate }) {
  const clients = [
    ["Gaimin", "Decentralized GPU-powered gaming platform. Growth and community programs supporting one of Web3 gaming's largest distribution ecosystems."],
    ["Gwardians Esports", "Web3 esports organization. Brand positioning, audience growth and partnership marketing."],
    ["KAP Games", "Blockchain game publisher. Go-to-market and community support across a multi-title portfolio."],
    ["Ludex", "Web3 gaming infrastructure. Positioning and demand generation for the developer and studio audience."],
    ["LadderCaster", "On-chain strategy game. Launch marketing, mint mechanics and player community building."],
    ["ShiFuMi", "Web3 game. Launch strategy, creator activation and community growth."],
    ["Slap City", "Web3 game. Full-funnel launch support from pre-mint mindshare to post-launch retention."],
    ["The Culture Cards", "NFT trading card project. Collection launch, collector community and secondary-market narrative."],
    ["Pocket Pull", "Live collectibles and trading card platform. Livestream programming, trust-building formats and audience growth campaigns."],
    ["Clutch", "Gaming platform. Acquisition and community programs built around player behavior."],
    ["Gameward", "Gaming rewards platform. Positioning, content and user growth."],
    ["Oak.Bet", "On-chain betting platform. Compliant-first growth strategy and community operations."],
    ["Solcasino", "Solana casino and gaming platform. Player acquisition and retention marketing in a high-competition vertical."],
    ["Studio³", "Web3 game studio. Multi-title marketing support from concept positioning to launch."],
  ];
  const clientLogos = { "Gaimin": "/assets/partners/35.png", "Slap City": "/assets/partners/33.png", "Clutch": "/assets/partners/50.png", "LadderCaster": "/assets/partners/43.png", "Ludex": "/assets/partners/39.png", "Gameward": "/assets/partners/30.png", "KAP Games": "/assets/partners/47.png", "Oak.Bet": "/assets/partners/34.png", "Solcasino": "/assets/partners/29.png", "Gwardians Esports": null, "ShiFuMi": null, "The Culture Cards": null, "Pocket Pull": null, "Studio³": null };
  const marqueeLogos = ["35", "33", "50", "43", "39", "30", "47", "34", "29"].map((n) => `/assets/partners/${n}.png`);
  const services = [
    { icon: "strategy", title: "Product Strategy & Go-to-Market", hook: "Every successful game starts with a clear commercial strategy.", desc: "We help studios define product positioning, validate market opportunities, identify player segments, refine monetisation models, and build go-to-market plans that support long-term adoption.", tags: ["Product strategy", "Go-to-market planning", "Product positioning", "Competitive analysis", "Market research", "Player personas", "Pricing strategy", "Product-market fit", "Launch planning"] },
    { icon: "players", title: "Player Acquisition & Community Growth", hook: "Player growth is more than impressions and downloads.", desc: "We design acquisition systems that combine creators, communities, guilds, paid media, SEO, PR, influencers, tournaments, referrals, and ecosystem partnerships to attract players who remain active long after launch.", tags: ["Player acquisition", "Community growth", "Creator campaigns", "Gaming influencers", "Guild partnerships", "Referral programmes", "Ambassador programmes", "Gaming PR", "SEO", "Paid acquisition"] },
    { icon: "token", title: "Tokenomics & TGE Support", hook: "Strong game economies create sustainable ecosystems.", desc: "We help projects prepare for token launches while designing token utility, reward systems, treasury strategies, and post-launch growth plans that extend well beyond launch day.", tags: ["Tokenomics consulting", "Token utility", "Reward systems", "NFT strategy", "Treasury planning", "TGE strategy", "Exchange readiness", "Launch communications", "Post-TGE growth"] },
    { icon: "bd", title: "Business Development & Ecosystem Partnerships", hook: "Growth accelerates through strategic relationships.", desc: "MCA connects projects with blockchain ecosystems, publishers, exchanges, infrastructure providers, venture funds, launchpads, creators, gaming communities, and commercial partners.", tags: ["Business development", "Publisher partnerships", "Ecosystem partnerships", "Exchange relationships", "VC introductions", "Launchpads", "Infrastructure partners", "Strategic alliances"] },
    { icon: "retention", title: "Retention & Live Operations", hook: "The most successful games continue growing after launch.", desc: "We help teams increase retention through seasonal content, tournaments, quests, reward systems, community operations, player segmentation, and ongoing optimisation.", tags: ["Retention strategy", "Live operations", "Community management", "Quests", "Seasonal campaigns", "Player loyalty", "Analytics", "Performance optimisation"] },
  ];
  const fails = ["Low player retention", "Unsustainable token economies", "Weak product positioning", "Poor creator activation", "Limited partnerships", "Short-term speculation", "Declining NFT activity", "Low community engagement", "Ineffective go-to-market execution"];
  const caps = ["Growth consulting", "Product strategy", "Go-to-market planning", "Tokenomics", "TGE support", "Business development", "Strategic partnerships", "Player acquisition", "Community growth", "Global expansion"];
  const segments = ["GameFi", "Web3 games", "NFT games", "Trading card games", "Telegram mini apps", "Mobile blockchain games", "PC & console games", "Esports organisations", "Game publishers", "Gaming infrastructure", "Digital collectibles", "Prediction markets", "Blockchain casinos", "AI gaming platforms"];
  const verticals = ["GameFi", "Tap-to-Earn", "Telegram Mini-Apps", "NFT Gaming", "Trading Card Games", "Collectibles Platforms", "Esports Organizations", "Esports Tokens", "MMORPG", "Battle Royale", "Racing", "Sports Simulations", "On-Chain Games", "Autonomous Worlds", "Gaming Guilds", "Prediction and Betting Platforms", "Casino and iGaming", "AI-Powered Games", "Game Studios and Publishers"];
  const faqs = [
    ["What is a Web3 gaming marketing agency?", "A Web3 gaming marketing agency helps blockchain game studios acquire players, launch tokens and NFTs, build guild and creator partnerships, and retain communities. Unlike traditional game marketing, it covers both the player funnel and the token holder funnel, because a Web3 game's success depends on both."],
    ["How is marketing a Web3 game different from marketing a regular crypto project?", "A crypto project markets to holders. A Web3 game markets to holders and players at the same time. The game must look fun to play and credible to hold. That means running creator, guild and app store funnels alongside mindshare, allowlist and listing programs, with retention metrics on both sides."],
    ["What does a TGE launch strategy include?", "A complete TGE strategy covers pre-launch mindshare and points programs, allowlist mechanics, exchange listing strategy, launch-day communications and a 90-day post-launch retention calendar. The 90-day plan matters most. A token generation event without a retention plan produces a one-day chart."],
    ["Can you actually move daily active users, or just impressions?", "We measure DAU, retention by cohort and paid acquisition efficiency, not just reach. Creator campaigns, guild tournaments and quest programs are all tracked to player behavior. Impressions that never convert to sessions get cut."],
    ["Do you handle guild partnerships and tournaments?", "Yes. We source and vet guilds, structure asset and reward economics, run co-marketing launches, coordinate tournaments and AMAs, and report retention by guild cohort so every partnership ties back to real player numbers."],
    ["How do you market tap-to-earn and Telegram mini-app games?", "Telegram-native distribution, viral referral loops, creator seeding and retention mechanics designed to survive the farming spike. The goal is converting the initial wave into a durable player base before emissions attract pure extractors."],
    ["Which channels drive Web3 gaming growth right now?", "Creator and streamer content, guild co-marketing, Kaito and mindshare platforms, Telegram distribution, gaming PR, app store optimization and paid mobile. The mix depends on whether the immediate goal is players, holders or both. We map channels to funnels before spending."],
    ["How do you measure ROI on Web3 game marketing?", "Player metrics: DAU, session length, cohort retention, cost per retained player. Token metrics: holder growth, holder retention, NFT floor and volume, listing performance. Distribution metrics: guild-driven retention, creator conversion, mindshare share of voice. Reporting is weekly and every metric is verifiable in player or on-chain data."],
    ["Which blockchain ecosystems do you support?", "Our team has experience working across Ethereum, Solana, Immutable, Avalanche, TON, Polygon, Base, Arbitrum, Injective, Sui, Aptos, Monad, Berachain, Linea, and other leading blockchain ecosystems."],
    ["Do you only work with GameFi projects?", "No. We support Web3 games, esports organisations, publishers, NFT platforms, gaming infrastructure, digital collectibles, prediction markets, blockchain casinos, and emerging gaming technologies."],
  ];
  const [open, setOpen] = useGAM(0);

  return (
    <div className="gam-page">
      <section className="gam-hero" data-screen-label="Web3 Gaming — Hero">
        <div className="gam-hero__bg" aria-hidden="true">
          <div className="gam-hero__blob gam-hero__blob--teal"></div>
          <div className="gam-hero__blob gam-hero__blob--deep"></div>
          <div className="gam-hero__grid"></div>
        </div>
        <div className="container gam-hero__inner">
          <div className="gam-hero__copy">
            <span className="gam-eyebrow">Web3 Gaming Growth Consulting</span>
            <h1 className="gam-hero__title"><em>Grow</em> Players.<br />​<em>Build</em> Sustainable Game Economies.<br />​<em>Scale</em> Globally.</h1>
            <p className="gam-hero__sub">MCA helps Web3 gaming studios, GameFi platforms, NFT games, esports organisations, publishers, and blockchain gaming ecosystems launch successfully, retain players, grow communities, and expand internationally. From product strategy to post-TGE growth, we become your long-term growth partner.</p>
            <div className="gam-hero__ctas">
              <Button variant="teal" size="lg" onClick={gamCall} withArrow>Book a Strategy Call</Button>
            </div>
          </div>
          <div className="gam-hero__visual"><GamChart /></div>
        </div>
      </section>

      <section className="gam-trust" data-screen-label="Trusted By">
        <div className="container">
          <GamReveal className="gam-trust__head">
            <div>
              <span className="gam-eyebrow">Track Record</span>
              <h2 className="gam-h2" style={{ maxWidth: "24ch" }}>Web3 Games and Gaming Platforms We Have <em>Launched and Grown</em></h2>
            </div>
            <div className="gam-trust__stat"><strong>30+</strong> successful gaming launches across GameFi, esports, NFT gaming, collectibles &amp; on-chain entertainment</div>
          </GamReveal>
          <div className="gam-trust__grid">
            {clients.map(([name, desc], i) => (
              <GamReveal key={name} className="gam-trust__cell" delay={(i % 3) * 60}>
                <div className="gam-trust__cell-head">
                  {clientLogos[name] ? <img className={`gam-trust__logo ${name === "Studio³" ? "gam-trust__logo--invert" : ""}`} src={clientLogos[name]} alt={name} /> : <><span className="gam-trust__mark">{name.split(" ").map((w) => w[0]).slice(0, 2).join("")}</span><span className="gam-trust__name">{name}</span></>}
                </div>
                <p className="gam-trust__desc">{desc}</p>
              </GamReveal>
            ))}
            <GamReveal className="gam-trust__cell gam-trust__cell--cta" delay={120}>
              <div className="gam-trust__name" style={{ fontSize: 19 }}>Building a Web3 Game?</div>
              <p className="gam-trust__desc">Let's accelerate your growth.</p>
              <div style={{ marginTop: "auto" }}><Button variant="teal" onClick={gamCall} withArrow>Book a Strategy Call</Button></div>
            </GamReveal>
          </div>
        </div>
      </section>

      <section className="gam-sec" data-screen-label="Services">
        <div className="container">
          <GamReveal className="gam-sec__head">
            <span className="gam-eyebrow">Web3 Gaming Growth Services</span>
            <h2 className="gam-h2">How MCA Helps Web3 Games <em>Grow.</em></h2>
          </GamReveal>
          <div className="gam-svc">
            {services.map((s, i) => (
              <GamReveal key={s.title} className="gam-svc__row" tag="div">
                <div className="gam-svc__num"><GamGlyph kind={s.icon} /></div>
                <div>
                  <h3 className="gam-svc__title">{s.title}</h3>
                  <p className="gam-svc__hook">{s.hook}</p>
                  <p className="gam-svc__desc">{s.desc}</p>
                </div>
                <div className="gam-svc__tags">{s.tags.map((t) => <span key={t} className="gam-tag">{t}</span>)}</div>
              </GamReveal>
            ))}
          </div>
        </div>
      </section>

      <section className="gam-vert" data-screen-label="Verticals We Serve">
        <div className="container">
          <GamReveal className="gam-sec__head" style={{ marginBottom: 44 }}>
            <span className="gam-eyebrow">Full Coverage</span>
            <h2 className="gam-h2">Web3 Gaming Verticals <em>We Serve.</em></h2>
          </GamReveal>
        </div>
        <div className="gam-vert__rows">
          {[verticals.slice(0, 10), verticals.slice(10)].map((row, r) => (
            <div key={r} className="gam-vert__row">
              <div className={`gam-vert__track ${r === 1 ? "gam-vert__track--reverse" : ""}`}>
                {[...row, ...row].map((v, i) => (
                  <span key={i} className="gam-vert__chip" aria-hidden={i >= row.length ? "true" : undefined}><span className="gam-vert__diamond"></span>{v}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="gam-sec gam-fail" data-screen-label="Why Web3 Games Fail">
        <div className="container">
          <GamReveal className="gam-sec__head" style={{ marginBottom: 0 }}>
            <span className="gam-eyebrow">The Problem</span>
            <h2 className="gam-h2">Why Web3 Games <em>Fail.</em></h2>
            <p className="gam-lede">Many Web3 games generate strong launch momentum but struggle to maintain growth. Common challenges include:</p>
          </GamReveal>
          <div className="gam-fail__grid">
            {fails.map((f, i) => (
              <GamReveal key={f} className="gam-fail__item" delay={(i % 3) * 80}><span className="gam-fail__dot"></span>{f}</GamReveal>
            ))}
          </div>
        </div>
      </section>

      <section className="gam-sec" data-screen-label="Our Approach">
        <div className="container">
          <GamReveal className="gam-sec__head">
            <span className="gam-eyebrow">Our Approach</span>
            <h2 className="gam-h2">How MCA Approaches Web3 <em>Gaming Growth.</em></h2>
          </GamReveal>
          <div className="gam-appr__grid">
            {[
              ["01", "Map Both Funnels Before Spending", "We define the gamer funnel and the holder funnel first. Players need proof the game is fun. Holders need proof the economy retains value. Every channel, creator and campaign is assigned to one of those two jobs before budget moves."],
              ["02", "Plan the 90 Days After Launch Before Launch", "Content cadence, tournaments, guild reporting, holder retention and second-wave acquisition are all designed pre-launch. The teams that survive their first quarter are the ones that planned it."],
              ["03", "Measure Player and Token Outcomes Together", "DAU, retention by cohort, paid acquisition efficiency, NFT floor and volume, token-holder cohorts, guild-driven retention, listings and mindshare. We report the numbers studio leadership and investors use to defend the spend."],
              ["04", "Vet Every KOL, Guild and Listing", "Gaming KOLs screened by audience quality and play history. Guilds screened by retention record. Listings screened by real buyer reach. Vanity distribution is expensive. Credible distribution compounds."],
            ].map(([n, t, d], i) => (
              <GamReveal key={n} className="gam-appr__card" delay={(i % 2) * 100}>
                <h3 className="gam-appr__title">{t}</h3>
                <p className="gam-appr__desc">{d}</p>
              </GamReveal>
            ))}
          </div>
        </div>
      </section>

      <section className="gam-sec" data-screen-label="Why MCA">
        <div className="container">
          <div className="gam-why__grid">
            <GamReveal className="gam-why__copy">
              <span className="gam-eyebrow">Why MCA</span>
              <h2 className="gam-h2">Strategy and Execution, <em>One Partner.</em></h2>
              <p>Our team works alongside founders, studios, publishers, investors, and blockchain ecosystems to build sustainable growth strategies that create measurable business outcomes.</p>
            </GamReveal>
            <GamReveal className="gam-why__panel" delay={120}>
              <h3 className="gam-why__panel-title">Our Expertise Includes</h3>
              <p className="gam-why__panel-sub">One integrated team across every commercial function of a gaming business:</p>
              <ul className="gam-caps">{caps.map((c) => <li key={c}>{c}</li>)}</ul>
            </GamReveal>
          </div>
        </div>
      </section>

      <section className="gam-sec" style={{ paddingTop: 0 }} data-screen-label="Industries We Support">
        <div className="container">
          <GamReveal className="gam-sec__head" style={{ marginBottom: 0 }}>
            <span className="gam-eyebrow">Industries We Support</span>
            <h2 className="gam-h2">Across the Blockchain <em>Gaming Ecosystem.</em></h2>
          </GamReveal>
          <GamReveal className="gam-seg__tags" tag="div" delay={100}>
            {segments.map((t) => <span key={t} className="gam-tag">{t}</span>)}
          </GamReveal>
        </div>
      </section>

      <section className="gam-sec" style={{ paddingTop: 0 }} data-screen-label="FAQ">
        <div className="container">
          <GamReveal className="gam-sec__head">
            <span className="gam-eyebrow">FAQ</span>
            <h2 className="gam-h2">Frequently Asked <em>Questions.</em></h2>
          </GamReveal>
          <div className="gam-faq">
            {faqs.map(([q, a], i) => (
              <div key={i} className={`gam-faq__item ${open === i ? "gam-faq__item--open" : ""}`}>
                <button type="button" className="gam-faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{q}</span>
                  <svg className="gam-faq__chev" width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
                </button>
                <div className="gam-faq__a"><p>{a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gam-cta" data-screen-label="Final CTA">
        <div className="gam-cta__glow" aria-hidden="true"></div>
        <div className="container">
          <span className="gam-eyebrow" style={{ position: "relative" }}>Work With MCA</span>
          <h2 className="gam-cta__title">Ready to Launch a Web3 Game <em>That Retains?</em></h2>
          <p className="gam-cta__sub">Whether you're preparing for launch, expanding into new markets, growing your player base, or building a sustainable token economy, MCA provides the strategy and execution to support every stage of growth.</p>
          <div className="gam-cta__actions">
            <Button variant="teal" size="lg" onClick={gamCall} withArrow>Book Your Free Web3 Gaming Growth Consultation</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>See Case Studies</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Web3GamingPage });
