/* MCA — Industries: Trading & Exchanges (bespoke, dark-only) */

const { useState: useTEX, useEffect: useTEXE, useRef: useTEXR } = React;

function TexReveal({ children, delay = 0, className = "", tag = "div", style = {} }) {
  const ref = useTEXR(null);
  const [seen, setSeen] = useTEX(false);
  useTEXE(() => {
    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={`tex-reveal ${seen ? "tex-reveal--in" : ""} ${className}`}
      style={{ ...style, transitionDelay: seen ? `${delay}ms` : "0ms" }}>
      {children}
    </Tag>
  );
}

/* ---------- Line glyphs ---------- */
function TexGlyph({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.3, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "acq": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M4 22l7-7 5 4 8-11" {...p} /><path d="M24 8h4v4" {...p} /><path d="M4 28h26" {...p} /><circle cx="11" cy="15" r="1.4" fill="currentColor" /><circle cx="16" cy="19" r="1.4" fill="currentColor" /></svg>);
    case "liq": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M17 4C17 4 7 14 7 21a10 10 0 0 0 20 0C27 14 17 4 17 4z" {...p} /><path d="M12 21a5 5 0 0 0 5 5" {...p} /></svg>);
    case "list": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="17" r="13" {...p} /><path d="M4 17h26M17 4c3.4 3.6 5 8 5 13s-1.6 9.4-5 13c-3.4-3.6-5-8-5-13s1.6-9.4 5-13z" {...p} /></svg>);
    case "ret": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M28 8a13 13 0 1 0 2 8" {...p} /><path d="M30 6v6h-6" {...p} /><circle cx="17" cy="17" r="3" {...p} /></svg>);
    case "user": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="12" r="5.5" {...p} /><path d="M6 29c1.5-6 5.6-9 11-9s9.5 3 11 9" {...p} /></svg>);
    case "vol": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M4 28V18M12 28V8M20 28V14M28 28V4" {...p} /></svg>);
    case "partner": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="11" cy="11" r="6" {...p} /><circle cx="23" cy="23" r="6" {...p} /><path d="M15 15l4 4" {...p} /></svg>);
    case "depth": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M4 26l6-4 5 3 5-8 5 5 4-3" {...p} /><path d="M4 30h26" {...p} /></svg>);
    case "globe": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="17" r="12" {...p} /><path d="M5 17h24M17 5c4 3.4 5.8 7.4 5.8 12S21 25.6 17 29c-4-3.4-5.8-7.4-5.8-12S13 8.4 17 5z" {...p} /></svg>);
    case "launch": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M17 3c5 2 8 7 8 13l-3 8H12l-3-8c0-6 3-11 8-13z" {...p} /><circle cx="17" cy="13" r="2.6" {...p} /><path d="M12 26l-3 5M22 26l3 5" {...p} /></svg>);
    case "inst": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M4 13L17 5l13 8" {...p} /><path d="M6 13v13M12 13v13M22 13v13M28 13v13" {...p} /><path d="M3 29h28" {...p} /></svg>);
    case "token": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="13" cy="17" r="10" {...p} /><circle cx="21" cy="17" r="10" {...p} /></svg>);
    default: return null;
  }
}

/* ---------- Hero visual: depth chart / order book ---------- */
function TexDepth() {
  const W = 640, H = 440, base = 360, left = 40, right = W - 40, top = 80;
  const N = 22;
  // Upward-trending growth line: rises from 0 (bottom-left) to growth (top-right)
  const pts = [];
  let noise = 0;
  for (let i = 0; i <= N; i++) {
    const t = i / N;
    noise += (Math.random() - 0.42) * 10;
    const trend = Math.pow(t, 0.92);           // steady climb
    const y = base - trend * (base - top) - noise * 0.5;
    const x = left + t * (right - left);
    pts.push([x, Math.max(top, Math.min(base, y))]);
  }
  const line = pts.map(p => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
  const area = `${left},${base} ${line} ${right},${base}`;
  // Milestone markers along the growth curve
  const marks = [
    { i: 4, label: "$40M TVL" },
    { i: 11, label: "$180M TVL" },
    { i: N, label: "$460M TVL" },
  ].map(m => ({ ...m, x: pts[m.i][0], y: pts[m.i][1], end: m.i === N }));
  const bars = Array.from({ length: 18 }, (_, i) => {
    const t = i / 17;
    const up = Math.random() > 0.32;
    const h = 26 + Math.random() * 100;
    const y = base - t * (base - top) * 0.85 - h - Math.random() * 40;
    return { x: left + i * ((right - left) / 17), h, up, y: Math.max(top - 30, y) };
  });
  return (
    <svg className="tex-depth" viewBox="0 0 640 440" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <linearGradient id="tex-bidfill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="rgba(0,165,161,.42)" /><stop offset="100%" stopColor="rgba(0,165,161,0)" /></linearGradient>
      </defs>
      {/* candlesticks (volume backdrop) */}
      <g opacity="0.5">
        {bars.map((b, i) => (
          <g key={i}>
            <line x1={b.x} y1={b.y - 14} x2={b.x} y2={b.y + b.h + 14} stroke={b.up ? "rgba(0,165,161,.5)" : "rgba(120,150,160,.4)"} strokeWidth="1" />
            <rect className="tex-depth__bar" style={{ animationDelay: `${i * 55}ms` }} x={b.x - 7} y={b.y} width="14" height={b.h} rx="2" fill={b.up ? "rgba(0,165,161,.55)" : "rgba(120,150,160,.32)"} stroke={b.up ? "rgba(95,240,240,.5)" : "rgba(150,170,180,.4)"} strokeWidth="1" />
          </g>
        ))}
      </g>
      {/* growth curve */}
      <polygon points={area} fill="url(#tex-bidfill)" />
      <polyline className="tex-depth__tick" points={line} fill="none" stroke="#5FF0F0" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
      {/* milestone markers */}
      <g fontFamily="ui-monospace, monospace" fontSize="11" letterSpacing="0.08em">
        {marks.map((m, i) => (
          <g key={i}>
            <circle cx={m.x} cy={m.y} r={m.end ? 5.5 : 4} fill={m.end ? "#5FF0F0" : "#0b1416"} stroke="#5FF0F0" strokeWidth="2" />
            <text x={m.x} y={m.y - 14} textAnchor={m.end ? "end" : "middle"} fill={m.end ? "#5FF0F0" : "rgba(200,240,242,.85)"} fontWeight={m.end ? 600 : 400}>{m.label}</text>
          </g>
        ))}
      </g>
      {/* baseline */}
      <line x1="24" y1={base} x2={W - 24} y2={base} stroke="rgba(255,255,255,.12)" strokeWidth="1" />
      <g fontFamily="ui-monospace, monospace" fontSize="10.5" letterSpacing="0.14em" fill="rgba(170,230,240,.6)">
        <text x="34" y={base + 22}>0</text>
      </g>
    </svg>
  );
}

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

function TexCarousel({ images }) {
  const [idx, setIdx] = React.useState(0);
  const n = images.length;
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % n), 4200);
    return () => clearInterval(t);
  }, [n]);
  return (
    <div className="tex-carousel">
      <div className="tex-carousel__track" style={{ transform: `translateX(-${idx * 100}%)` }}>
        {images.map((im, i) => (
          <div className="tex-carousel__slide" key={i}><img src={im.src} alt={im.alt} /></div>
        ))}
      </div>
      <button className="tex-carousel__arw tex-carousel__arw--l" onClick={() => setIdx(i => (i - 1 + n) % n)} aria-label="Previous">‹</button>
      <button className="tex-carousel__arw tex-carousel__arw--r" onClick={() => setIdx(i => (i + 1) % n)} aria-label="Next">›</button>
      <div className="tex-carousel__dots">
        {images.map((_, i) => (
          <button key={i} className={"tex-carousel__dot" + (i === idx ? " is-on" : "")} onClick={() => setIdx(i)} aria-label={`Slide ${i + 1}`} />
        ))}
      </div>
    </div>
  );
}

/* ---------- Page ---------- */
function TradingExchangesPage({ navigate }) {
  const facts = [
    "DEXs, perps protocols, exchanges, on-ramps and crypto payment platforms served",
    "Full stack in one team: positioning, trader acquisition, liquidity design, listings, community and retention",
    "Trader acquisition tracked wallet by wallet, cohort by cohort",
    "Toronto-based global team with a global exchange, market maker and KOL network",
  ];
  const mmtStats = [
    { n: "+$460M", l: "TVL grown from zero to $460 million in three months, climbing into the top ranks of Sui DEXs." },
    { n: "+$26B", l: "Cumulative swap volume grown from zero to $26 billion in the same window." },
    { n: "$453,700", l: "First-round capital commitments from KOLs, raised directly through MCA's network." },
    { n: <>#1 <em>tier</em></>, l: "Sustained top-ranked creator presence on Kaito's mindshare leaderboard." },
    { n: <>Multi-<em>x</em></>, l: "Token valuation far outpaced the early raise, closing the funding gap at launch." },
    { n: "4 channels", l: "Fast-growing community across X, Discord, Telegram and LinkedIn." },
  ];
  const phases = [
    ["The starting point", "From MSafe to a Sui DEX", "Momentum needed to transform MSafe, a multi-sig wallet product, into a competitive DEX built for the Sui ecosystem: a full rebrand, a credible go-to-market strategy, and a tokenomics model built to win liquidity and volume against established competitors."],
    ["Phase one", "Credibility", "MCA anchored Momentum's narrative on the ve(3,3) model, drawing on the proven success of similar designs on other networks. The phase communicated the strength of investor backing, spotlighted the founding team's credentials, and educated the market on why ve(3,3) outperforms traditional AMM exchanges."],
    ["Phase two", "Market share", "The engagement shifted to aggressive growth, positioning Momentum to outcompete rival Sui DEXs through deeper liquidity and strategic partnerships. MCA restructured the airdrop into a tiered leaderboard incentive system that rewards real usage — shifting behavior from short-term farming to durable protocol engagement."],
    ["Distribution", "The right voices", "A curated network of top-tier KOLs and ambassadors, several onboarded through MCA relationships, carried the narrative across content, community and campaigns, producing the sustained #1-tier Kaito presence. MCA also negotiated media placements and secured direct capital commitments from aligned KOLs."],
  ];
  const delivered = [
    "Full brand repositioning from wallet product to category-defining DEX",
    "Two-phase go-to-market strategy and narrative architecture",
    "Tokenomics and airdrop redesign around sustainable, tiered incentives",
    "KOL sourcing, onboarding, campaign management and capital raising",
    "Strategic partnership identification and negotiation",
    "Press and media strategy, including negotiated distribution terms",
  ];
  const clients = [
    ["Momentum", "MMT", "Transformed from a multi-sig wallet product into the leading ve(3,3) DEX challenger on Sui. End-to-end engagement: $460M TVL and $26B swap volume from zero in three months, a $453,700 KOL raise and multi-x token valuation growth.", null],
    ["MoonPay", "MP", "Global fiat-to-crypto infrastructure powering on-ramps and off-ramps for hundreds of platforms. Growth and positioning support for one of the most recognized names in crypto payments.", null],
    ["MoonPay Commerce", "MC", "MoonPay's merchant payments platform for accepting crypto at checkout. Go-to-market and adoption programs for the commerce product line.", null],
    ["Bitrefill", "BR", "The largest platform for living on crypto, with gift cards, top-ups and bill payments across thousands of merchants. Audience growth and positioning in the crypto spending category.", null],
    ["Cabbage", "CB", "Crypto platform. Positioning, acquisition and community growth support.", null],
    ["Tessera", "TS", "Trading and ownership platform. Growth strategy and market positioning.", null],
  ];
  const requirements = ["Sustainable user acquisition", "Higher trading activity", "Better liquidity", "Institutional credibility", "Strong token ecosystems", "Strategic partnerships", "Geographic expansion", "Product adoption", "Long-term retention"];
  const pillars = [
    { icon: "acq", t: "Acquisition That Hits the Order Book", d: "Every channel is mapped to the trader journey: discovery, wallet connect, first trade, retained trader, power user. KOLs vetted by wallet history and trade quality. SEO built around the high-intent queries traders actually search. Telegram funnels that convert in-feed. The metric is funded wallets trading, not impressions." },
    { icon: "liq", t: "Liquidity Programs Built to Compound", d: "A single trading competition moves volume for a week. We design points seasons, fee rebates, referral trees and trader tiers as one interlocking system, and run market maker introductions and depth campaigns alongside them so spreads tighten while traders arrive. Incentives are modeled against emissions so the program earns liquidity instead of renting it." },
    { icon: "list", t: "Listings as Distribution", d: "For a DEX, distribution means Jupiter, 1inch, ParaSwap and the wallets traders already live in. For a token or CEX, it means tier-1 listing prep, narrative and BD introductions. We build the integration roadmap, run the launch campaigns and connect you to the aggregator, wallet and exchange teams that actually move flow." },
    { icon: "ret", t: "Retention Measured in Cohorts", d: "Acquiring a trader is expensive. Keeping one is a system: trader rooms, alpha channels, VIP tiers, weekly leaderboards, lifecycle communications and winback sequences after losses. We report 7-day, 30-day and 90-day retained-trader cohorts, because member counts do not pay fees." },
  ];
  const services = [
    { icon: "user", t: "User Acquisition", d: "Acquire higher-quality retail and professional traders through multi-channel growth strategies designed for long-term retention rather than short-term traffic spikes." },
    { icon: "vol", t: "Trading Volume Growth", d: "Campaigns that increase active traders, repeat usage and transaction frequency instead of vanity metrics. Exchanges derive value from network effects: deeper liquidity attracts more traders, and more traders improve liquidity." },
    { icon: "partner", t: "Partnership Development", d: "Secure integrations, ecosystem collaborations, wallet partnerships, token listings, payment providers, institutional relationships and strategic commercial alliances." },
    { icon: "depth", t: "Liquidity Growth", d: "Support liquidity expansion through ecosystem development, launch strategies, partner onboarding and coordinated market growth initiatives." },
    { icon: "globe", t: "Global Market Expansion", d: "Market-entry strategies for Europe, the Middle East, Asia, North America and emerging crypto markets, with localized growth plans." },
    { icon: "launch", t: "Product Launch Strategy", d: "Launch new exchanges, trading products, perpetual markets, payment solutions, staking products, loyalty programs or new platform features with structured go-to-market execution." },
    { icon: "inst", t: "Institutional Positioning", d: "Position your business for market makers, funds, payment providers, fintech partners, banks and enterprise customers through stronger commercial messaging and relationship building." },
    { icon: "token", t: "Token Launch Support", d: "For exchanges launching native utility tokens, MCA supports pre-TGE positioning, exchange readiness, community strategy, ecosystem partnerships, launch coordination and post-TGE growth." },
  ];
  const verticals = ["Perps DEXs", "Spot DEXs", "DEX Aggregators", "Centralized Exchanges", "OTC & Block-Trading Desks", "Prediction Markets", "Options Protocols", "Trading Bots & Copy Trading", "On-Ramps & Off-Ramps", "Crypto Payments & Commerce", "Crypto Spending Platforms", "Trading Infrastructure"];
  const steps = [
    ["Discovery & Audit", "Deep audit across on-chain volume, trader cohorts, listing footprint, KOL exposure, organic search visibility, community health and competitor positioning. You receive a growth-gap report with the top three levers ranked by expected impact."],
    ["Strategy & GTM Design", "A custom playbook covering positioning, channel mix, KOL tiering, listing roadmap, incentive design and a quarterly KPI framework. Your team owns the playbook. We own execution."],
    ["Execution & Distribution", "KOL waves activate, points seasons launch, listings get pitched, Telegram funnels go live and market maker introductions open. One channel, one weekly stand-up, one roadmap."],
    ["Optimization & Scaling", "Weekly tracking on wallet growth, TVL, daily active traders, 30-day retention, cumulative volume and fee revenue. Underperforming channels get cut. Winning loops get scaled. Monthly board-ready reporting."],
  ];
  const faqs = [
    ["What is a crypto exchange marketing agency?", "A crypto exchange marketing agency helps DEXs, perps protocols and centralized exchanges acquire traders, grow trading volume, win listings and integrations, and retain active users. The work spans trader acquisition, liquidity incentive design, listing strategy and community operations, measured in on-chain outcomes rather than reach."],
    ["How do you drive trader acquisition instead of just impressions?", "Every channel is tracked to the order book. KOL campaigns are measured by wallets connected and first trades placed. SEO targets high-intent queries traders search before choosing a venue. Telegram funnels convert directly from feed to onboarding. Channels that produce impressions without funded wallets get cut."],
    ["Can you grow volume without burning incentives?", "Yes, if incentives are designed as a system. Points seasons, fee rebates, referral trees and trader tiers should interlock so each program feeds the next, and emissions should be modeled against retained volume before launch. The goal is liquidity your venue earns and keeps, not liquidity it rents for a season."],
    ["Do you handle listings on exchanges, aggregators and wallets?", "Yes. For DEXs that means aggregator integrations like Jupiter, 1inch and ParaSwap and wallet placements like Phantom and MetaMask. For tokens and CEX listings it means preparation, narrative and introductions to the BD teams that move flow, plus the launch-day campaign around the listing itself."],
    ["How long until a trading venue sees results?", "Audit and strategy take the first month. Acquisition and listing campaigns typically show measurable wallet and volume movement within the first quarter of execution. Liquidity programs and retention systems compound over two to three quarters. We set the KPI timeline in the playbook so expectations are explicit before spend begins."],
    ["How do you measure ROI for trading platforms?", "Trader metrics: wallet connects, first trades, cost per retained trader, cohort retention at 7, 30 and 90 days. Venue metrics: TVL, daily volume, depth and spread improvement, effective fee revenue. Distribution metrics: listing and integration flow, creator-driven conversion. Everything ties to on-chain data your team can verify independently."],
    ["Can you support a TGE or listing day specifically?", "Yes. We run the full launch architecture: pre-TGE mindshare, allowlist and points mechanics, listing coordination, launch-day run of show and the 90-day post-launch calendar that holds volume after the first spike."],
    ["Do you work with crypto payment and commerce platforms too?", "Yes. On-ramps, off-ramps, merchant payments and crypto spending platforms sit on the same value chain as trading venues, and we run acquisition, positioning and retention programs for them with the same on-chain measurement discipline."],
  ];
  const [open, setOpen] = useTEX(0);

  return (
    <div className="tex-page">
      <section className="tex-hero" data-screen-label="Trading & Exchanges — Hero">
        <div className="tex-hero__bg" aria-hidden="true">
          <div className="tex-hero__blob tex-hero__blob--teal"></div>
          <div className="tex-hero__blob tex-hero__blob--deep"></div>
          <div className="tex-hero__grain"></div>
        </div>
        <div className="container tex-hero__inner">
          <div className="tex-hero__copy">
            <span className="tex-eyebrow">Trading &amp; Exchange Growth Consulting</span>
            <h1 className="tex-hero__title">Trader <em>Acquisition,</em><br />Liquidity <em>Growth</em> &amp;<br />Listing <em>Strategy.</em></h1>
            <p className="tex-hero__sub">MCA helps DEXs, perps protocols, exchanges and crypto payment platforms acquire traders, grow liquidity, win listings and retain volume.</p>
            <div className="tex-hero__ctas">
              <Button variant="teal" size="lg" onClick={texCall} withArrow>Book a Strategy Call</Button>
            </div>
          </div>
          <div className="tex-hero__visual"><TexDepth /></div>
        </div>
      </section>

      <section className="tex-sec tex-clients" data-screen-label="Services">
        <div className="container">
          <TexReveal className="tex-sec__head">
            <span className="tex-eyebrow">Growth Consulting Built Around Revenue</span>
            <h2 className="tex-h2">Growth Services for <em>Trading Platforms &amp; Exchanges</em></h2>
          </TexReveal>
          <div className="tex-svc__grid">
            {services.map((s, i) => (
              <TexReveal key={s.t} className="tex-svc__card" delay={(i % 3) * 80}>
                <div className="tex-svc__icon"><TexGlyph kind={s.icon} /></div>
                <div className="tex-svc__title">{s.t}</div>
                <p className="tex-svc__desc">{s.d}</p>
              </TexReveal>
            ))}
            <TexReveal className="tex-svc__card tex-svc__card--cta" delay={160}>
              <div className="tex-svc__title">Building a trading platform or exchange?</div>
              <p className="tex-svc__desc">Book a consultation with MCA advisors to accelerate your growth.</p>
              <div className="tex-svc__cta-btn"><Button variant="teal" onClick={texCall} withArrow>Book a Consultation</Button></div>
            </TexReveal>
          </div>
        </div>
      </section>

      <section className="tex-sec tex-feat" data-screen-label="Featured Growth Story — Momentum">
        <div className="tex-feat__glow" aria-hidden="true"></div>
        <div className="container">
          <TexReveal>
            <span className="tex-eyebrow">Featured Growth Story</span>
            <div className="tex-feat__head">
              <h2 className="tex-feat__title">Helping Launch and Scale <em>Momentum (MMT)</em></h2>
            </div>
            <p className="tex-feat__lede">Momentum went from a multi-signature wallet product to the leading ve(3,3) DEX challenger on Sui, backed by an end-to-end MCA engagement across brand, go-to-market, tokenomics, partnerships and media.</p>
          </TexReveal>

          <div className="tex-stats">
            {mmtStats.map((s, i) => (
              <TexReveal key={i} className="tex-stat" delay={(i % 3) * 80}>
                <div className="tex-stat__n">{s.n}</div>
                <div className="tex-stat__l">{s.l}</div>
              </TexReveal>
            ))}
          </div>

          <TexReveal>
            <div className="tex-showcase">
              <TexCarousel images={[
                { src: "/assets/momentum/kaito-30d.png", alt: "Kaito mindshare leaderboard showing Momentum in the top ranks over 30 days" },
                { src: "/assets/momentum/kaito-6m.png", alt: "Kaito creator leaderboard for Momentum over six months" },
              ]} />
              <div className="tex-delivered tex-delivered--side">
                <div className="tex-delivered__t">What MCA delivered</div>
                <ul className="tex-delivered__list tex-delivered__list--stack">{delivered.map((d, i) => <li key={i}>{d}</li>)}</ul>
              </div>
            </div>
          </TexReveal>
        </div>
      </section>

      <section className="tex-sec tex-clients" data-screen-label="Clients">
        <div className="container">
          <TexReveal className="tex-sec__head" style={{ marginBottom: 0 }}>
            <span className="tex-eyebrow">Clients</span>
            <h2 className="tex-h2">Trading Companies <em>We've Helped Scale</em></h2>
            <p className="tex-lede">MCA partnered with exchanges, payment infrastructure providers, and trading platforms to accelerate commercial growth, user acquisition, and global expansion.</p>
          </TexReveal>
          <div className="tex-clients__grid">
            {clients.map(([name, mark, desc, logo], i) => (
              <TexReveal key={name} className="tex-client" delay={(i % 3) * 80}>
                <div className="tex-client__head">
                  {logo ? <img className="tex-client__logo" src={logo} alt={name} /> : <span className="tex-client__name">{name}</span>}
                </div>
                <p className="tex-client__desc">{desc}</p>
              </TexReveal>
            ))}
          </div>
          <div className="tex-marquee">
            <div className="tex-marquee__tag">Our Impact</div>
            <div className="tex-marquee__viewport">
              <div className="tex-marquee__track">
                {[...requirements, ...requirements].map((r, i) => <span key={i} className="tex-marquee__chip">{r}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="tex-sec" style={{ paddingTop: 40 }} data-screen-label="Why MCA">
        <div className="container">
          <TexReveal className="tex-sec__head">
            <span className="tex-eyebrow">Why MCA</span>
            <h2 className="tex-h2">The MCA <em>Growth Framework.</em></h2>
          </TexReveal>
          <div className="tex-pillars">
            {pillars.map((p, i) => (
              <TexReveal key={p.t} className="tex-pillar" delay={(i % 2) * 90}>
                <div className="tex-pillar__icon"><TexGlyph kind={p.icon} /></div>
                <div className="tex-pillar__t">{p.t}</div>
                <p className="tex-pillar__d">{p.d}</p>
              </TexReveal>
            ))}
          </div>
        </div>
      </section>

      <section className="tex-sec tex-verticals" data-screen-label="Verticals">
        <div className="container">
          <TexReveal className="tex-sec__head" style={{ marginBottom: 0 }}>
            <span className="tex-eyebrow">Coverage</span>
            <h2 className="tex-h2">Trading and Payments <em>Verticals We Serve</em></h2>
          </TexReveal>
          <TexReveal>
            <div className="tex-vmarquee">
              <div className="tex-vtrack">
                {[...verticals, ...verticals].map((v, i) => <span key={i} className="tex-vtag" aria-hidden={i >= verticals.length ? "true" : undefined}>{v}</span>)}
              </div>
            </div>
          </TexReveal>
        </div>
      </section>

      <section className="tex-sec" data-screen-label="Process">
        <div className="container">
          <TexReveal className="tex-sec__head">
            <span className="tex-eyebrow">How a Growth Engagement Works</span>
            <h2 className="tex-h2">From Strategy <em>to Scale.</em></h2>
          </TexReveal>
          <div className="tex-steps">
            {steps.map(([t, d], i) => (
              <TexReveal key={t} className="tex-step" delay={(i % 4) * 70}>
                <div className="tex-step__n"></div>
                <div className="tex-step__t">{t}</div>
                <p className="tex-step__d">{d}</p>
              </TexReveal>
            ))}
          </div>
        </div>
      </section>

      <section className="tex-sec tex-clients" style={{ paddingTop: 0, background: "none", border: "none" }} data-screen-label="FAQ">
        <div className="container">
          <TexReveal className="tex-sec__head">
            <span className="tex-eyebrow">FAQ</span>
            <h2 className="tex-h2">Frequently Asked Questions About <em>Trading Venue Growth.</em></h2>
          </TexReveal>
          <div className="tex-faq">
            {faqs.map(([q, a], i) => (
              <div key={i} className={`tex-faq__item ${open === i ? "tex-faq__item--open" : ""}`}>
                <button type="button" className="tex-faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{q}</span>
                  <svg className="tex-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="tex-faq__a"><p>{a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="tex-cta" data-screen-label="Final CTA">
        <div className="tex-cta__glow" aria-hidden="true"></div>
        <div className="container">
          <span className="tex-eyebrow" style={{ position: "relative" }}>Work With MCA</span>
          <h2 className="tex-cta__title">Ready to Grow Traders, Volume and <em>Depth?</em></h2>
          <p className="tex-cta__sub">Book a call. We start with a free trading venue audit covering on-chain volume, trader cohorts, listing footprint, KOL exposure, organic visibility and competitor positioning, then rank your three biggest growth levers by expected impact.</p>
          <div className="tex-cta__actions">
            <Button variant="teal" size="lg" onClick={texCall} withArrow>Book a Strategy Call</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>See Case Studies</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { TradingExchangesPage });