/* MCA, Growth & Scale page (bespoke) */

const { useState: useSG, useEffect: useEG, useRef: useRG } = React;

/* ---------- Hero visual: orbiting growth signals ---------- */
function GrowthOrbit() {
  // Concentric arcs with traveling dots, represents channels compounding around a brand
  const rings = [
    { r: 180, dur: 18, dots: 1, opacity: 0.6 },
    { r: 260, dur: 28, dots: 2, opacity: 0.5 },
    { r: 340, dur: 38, dots: 2, opacity: 0.4 },
    { r: 430, dur: 52, dots: 3, opacity: 0.32 },
  ];
  return (
    <svg className="gs-orbit" viewBox="-500 -300 1000 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <radialGradient id="gs-core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(64,224,224,0.95)" />
          <stop offset="45%" stopColor="rgba(0,180,190,0.35)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0)" />
        </radialGradient>
      </defs>

      {/* hairline grid */}
      <g className="gs-orbit__grid" stroke="rgba(150,225,235,0.10)" strokeWidth="1">
        {[-400, -300, -200, -100, 0, 100, 200, 300, 400].map((y) => (
          <line key={"h" + y} x1="-500" y1={y} x2="500" y2={y} />
        ))}
        {[-500, -400, -300, -200, -100, 0, 100, 200, 300, 400, 500].map((x) => (
          <line key={"v" + x} x1={x} y1="-300" x2={x} y2="300" />
        ))}
      </g>

      {/* core glow */}
      <circle cx="0" cy="0" r="150" fill="url(#gs-core)" />

      {/* rings */}
      {rings.map((ring, i) => (
        <g key={i} style={{ opacity: ring.opacity }}>
          <circle cx="0" cy="0" r={ring.r} fill="none" stroke="rgba(120,220,230,0.32)" strokeWidth="1" />
          <g className="gs-orbit__spin" style={{ animationDuration: ring.dur + "s", animationDirection: i % 2 === 0 ? "normal" : "reverse" }}>
            {Array.from({ length: ring.dots }).map((_, k) => {
              const angle = (k / ring.dots) * Math.PI * 2;
              const x = Math.cos(angle) * ring.r;
              const y = Math.sin(angle) * ring.r;
              return (
                <g key={k} transform={`translate(${x}, ${y})`}>
                  <circle r="16" fill="rgba(64,224,224,0.22)" />
                  <circle r="4.5" fill="#5FF0F0" />
                </g>
              );
            })}
          </g>
        </g>
      ))}

      {/* labels on outer ring */}
      <g className="gs-orbit__labels" fontFamily="ui-monospace, monospace" fontSize="11" letterSpacing="0.18em" fill="rgba(170,230,240,0.6)">
        <text x="0" y="-440" textAnchor="middle">POSITIONING</text>
        <text x="430" y="0" textAnchor="middle">CHANNELS</text>
        <text x="0" y="455" textAnchor="middle">COMMUNITY</text>
        <text x="-430" y="0" textAnchor="middle">PARTNERS</text>
      </g>

      {/* center mark */}
      <g>
        <circle cx="0" cy="0" r="6" fill="#00A5A1" />
        <circle cx="0" cy="0" r="14" fill="none" stroke="rgba(0,165,161,0.45)" strokeWidth="1">
          <animate attributeName="r" from="14" to="42" dur="2.6s" repeatCount="indefinite" />
          <animate attributeName="opacity" from="0.7" to="0" dur="2.6s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}

/* ---------- Hero ---------- */
function GSHero({ navigate }) {
  return (
    <section className="gs-hero">
      <div className="gs-hero__bg" aria-hidden="true">
        <div className="gs-hero__blob gs-hero__blob--teal" />
        <div className="gs-hero__blob gs-hero__blob--deep" />
        <div className="gs-hero__blob gs-hero__blob--tealSoft" />
        <div className="gs-hero__grain" />
        <GrowthOrbit />
        <div className="gs-hero__veil" />
      </div>

      <div className="container gs-hero__inner">
        <h1 className="gs-hero__title">
          Growth, <em>structured.</em>
          <span className="gs-hero__title-line">Scale, engineered.</span>
        </h1>

        <p className="gs-hero__sub">
          We design and operate the systems that move capital, talent, and customers toward
          you, positioning, GTM, ecosystem, community, content, and the data layer that
          compounds them.
        </p>

        <div className="gs-hero__ctas">
          <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>Schedule a Free Consultation</Button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: The Growth Mandate ---------- */
function GrowthMandate({ navigate }) {
  const items = [
    { icon: "chart", title: "Marketing, Branding & Distribution (Online & IRL)",
      desc: "We help great companies show up where it matters, online and in real life. Through data-backed strategy, strong visuals, and meaningful storytelling, we transform businesses into magnetic brands with loyal communities." },
    { icon: "handshake", title: "BD & Partnerships",
      desc: "MCA connects you with the right partners, from investors and strategic operators to distribution and media platforms. We make relationship-building simple and strategic, helping your business form collaborations that unlock long-term value." },
    { icon: "people", title: "User Acquisition, Growth Hacking & Growth Metrics",
      desc: "We help teams design smart growth engines, build funnels, and track what truly moves the needle. Whether you're scaling users or improving retention, we bring data-driven strategies that deliver sustainable, measurable growth." },
    { icon: "nodes", title: "KOLs, Ambassadors & Community Curation",
      desc: "We design and execute high-impact ambassador and creator programs that build credibility, drive excitement, and deliver real reach. From vetting and onboarding to activation and content strategy, we help communities grow stronger and more engaged." },
  ];
  return (
    <section className="section gs-mandate">
      <div className="container">
        <div className="gs-mandate__grid">
          {items.map((it, i) => (
            <div key={i} className="gs-mandate__card">
              <div className="gs-mandate__icon"><GSGlyph kind={it.icon} /></div>
              <div className="gs-mandate__cardTitle">{it.title}</div>
              <p className="gs-mandate__cardDesc">{it.desc}</p>
            </div>
          ))}
        </div>

        <div className="gs-mandate__ctas">
          <Button variant="primary" onClick={() => {
            document.getElementById("gs-system")?.scrollIntoView({ behavior: "smooth", block: "start" });
          }} withArrow>See the System</Button>
          <Button variant="secondary" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")}>Book a Call</Button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: The Growth System (bento) ---------- */
function GrowthSystem() {
  const cards = [
    { n: "01", title: "Positioning & Narrative",
      desc: "Sharpen the story that moves capital, talent, and customers. Messaging architecture, proof points, and the language your team can actually carry.",
      span: "lg", icon: "compass" },
    { n: "02", title: "Go-to-Market",
      desc: "Channel strategy, pricing, ICP refinement, and integrated launch campaigns that respect the buyer you actually have.",
      span: "md", icon: "rocket" },
    { n: "03", title: "Ecosystem & BD",
      desc: "Partnerships, integrations, and co-marketing across protocols, exchanges, and platforms, relationships engineered, not hoped for.",
      span: "md", icon: "nodes" },
    { n: "04", title: "Community Growth",
      desc: "Real Discord, Telegram, and ambassador motion, not vanity engagement. Programs designed for retention, not just reach.",
      span: "md", icon: "people" },
    { n: "05", title: "Brand & Content",
      desc: "Editorial-quality content, design, and thought leadership that signals seriousness and earns the long-form attention you want.",
      span: "md", icon: "spark" },
    { n: "06", title: "Data-Driven Scale",
      desc: "Growth analytics, experiment cadence, and the dashboards that make the next decision obvious, not the next dashboard.",
      span: "lg", icon: "chart" },
  ];
  return (
    <section className="section gs-system" id="gs-system">
      <div className="container">
        <div className="gs-system__head">
          <span className="eyebrow">THE SYSTEM</span>
          <h2 className="h2 gs-system__title">
            How We Drive <em>Growth</em>
          </h2>
          <p className="lede gs-system__lede">
            A connected framework that aligns positioning, distribution, partnerships,
            community, and data to create durable market momentum.
          </p>
        </div>

        <div className="gs-bento">
          {cards.map((c, i) => (
            <div key={i} className={`gs-bento__card gs-bento__card--${c.span}`}>
              <div className="gs-bento__top">
                <span className="gs-bento__glyph" aria-hidden="true">
                  <GSGlyph kind={c.icon} />
                </span>
              </div>
              <div className="gs-bento__title">{c.title}</div>
              <p className="gs-bento__desc">{c.desc}</p>
              <div className="gs-bento__hover">
                <span>EXPLORE</span>
                <ArrowUpRight />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function GSGlyph({ kind }) {
  switch (kind) {
    case "compass":
      return (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <circle cx="20" cy="20" r="13" stroke="currentColor" strokeWidth="1.2" />
          <path d="M14 26l4-12 8 4-12 8z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
        </svg>
      );
    case "rocket":
      return (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M20 6c6 4 9 10 9 18l-9 4-9-4c0-8 3-14 9-18z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
          <circle cx="20" cy="17" r="3" stroke="currentColor" strokeWidth="1.2" />
          <path d="M16 28l-3 6M24 28l3 6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
        </svg>
      );
    case "nodes":
      return (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <circle cx="20" cy="20" r="3" stroke="currentColor" strokeWidth="1.2" />
          <circle cx="8" cy="10" r="3" stroke="currentColor" strokeWidth="1.2" />
          <circle cx="32" cy="10" r="3" stroke="currentColor" strokeWidth="1.2" />
          <circle cx="8" cy="30" r="3" stroke="currentColor" strokeWidth="1.2" />
          <circle cx="32" cy="30" r="3" stroke="currentColor" strokeWidth="1.2" />
          <path d="M10 12l8 6M30 12l-8 6M10 28l8-6M30 28l-8-6" stroke="currentColor" strokeWidth="1" />
        </svg>
      );
    case "people":
      return (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <circle cx="14" cy="15" r="4" stroke="currentColor" strokeWidth="1.2" />
          <circle cx="26" cy="15" r="4" stroke="currentColor" strokeWidth="1.2" />
          <path d="M6 30c1.5-4 4.5-6 8-6s6.5 2 8 6M18 30c1.5-4 4.5-6 8-6s6.5 2 8 6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
        </svg>
      );
    case "spark":
      return (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M20 6l3 11 11 3-11 3-3 11-3-11-11-3 11-3z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
        </svg>
      );
    case "chart":
      return (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M6 32V8M6 32h28" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
          <path d="M10 26l6-10 6 4 10-14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="22" cy="20" r="1.5" fill="currentColor" />
          <circle cx="32" cy="6" r="1.5" fill="currentColor" />
        </svg>
      );
    case "handshake":
      return (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M4 14l6-3 7 4 6-1 7 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M20 18l-4 4a2 2 0 003 3l3-3 3 3a2 2 0 003-3l-5-5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M30 18v8M10 11v9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
        </svg>
      );
    default:
      return null;
  }
}

/* ---------- Section: Operators + ecosystem marquee ---------- */
function GrowthOperators() {
  const pillars = [
    { title: "Operator-Led",
      desc: "Senior growth operators who have built, launched, and scaled, not consultants paraphrasing a deck. We work in your tools, with your team." },
    { title: "Ecosystem-Native",
      desc: "Embedded across L1s, L2s, exchanges, infra, and the funds behind them. We open the doors that founder-led BD can't open alone." },
    { title: "Outcome-Aligned",
      desc: "Scoped to leverage points, not to retainer length. The success metric is your growth curve, not our hours." },
  ];
  const partners = ["Solana", "Wormhole", "Pyth", "Stader", "Magic Eden", "Linera", "Kucoin", "OKX", "MMT", "Helio", "Zeus", "Kaio", "Polygon", "Arbitrum", "Base", "Sui", "Aptos", "Ethena"];
  return (
    <section className="section gs-ops">
      <div className="container">
        <div className="gs-ops__head">
          <span className="eyebrow">THE TEAM BEHIND IT</span>
          <h2 className="h2 gs-ops__title">
            Senior operators. <em>Ecosystem coverage.</em>
          </h2>
          <p className="lede gs-ops__lede">
            We work alongside founders as a senior team, not as agency throughput. Every
            engagement runs with a partner-level operator at the wheel.
          </p>
        </div>

        <div className="gs-ops__grid">
          {pillars.map((p, i) => (
            <div key={i} className="gs-ops__pillar">
              <div className="gs-ops__pTitle">{p.title}</div>
              <p className="gs-ops__pDesc">{p.desc}</p>
            </div>
          ))}
        </div>

        <div className="gs-stack">
          <div className="gs-stack__label">ECOSYSTEM PARTNERS &amp; COVERAGE</div>
          <div className="gs-stack__row">
            <div className="gs-stack__track">
              {[...partners, ...partners].map((s, i) => (
                <span key={i} className="gs-stack__pill">
                  <span className="gs-stack__pillDot" />{s}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: How We Engage ---------- */
function GrowthEngagement() {
  const blocks = [
    {
      title: "Narrative, Brand & Market Presence",
      audience: "For Web3 companies building authority, credibility, and category leadership.",
      desc: "We help projects define what they stand for and make the market believe it.",
      bullets: [
        "Brand positioning & narrative architecture",
        "Core messaging & story development",
        "Social media strategy & execution",
        "PR strategy, media positioning & outreach",
        "Email systems for retention & activation",
        "Website & landing page conversion design",
        "Creative direction (design, motion, visuals)",
        "IP development (mascots, storytelling assets)",
        "Thought leadership & speaker positioning",
      ],
    },
    {
      title: "Growth, Partnerships & Capital Expansion",
      audience: "For projects scaling reach, liquidity, and strategic ecosystem value.",
      desc: "We connect projects to the right people and turn relationships into outcomes.",
      bullets: [
        "Partnership strategy & ecosystem expansion",
        "KOL / influencer strategy, onboarding & activation",
        "Investor narrative & fundraising positioning",
        "Pitch decks & capital raise storytelling",
        "Strategic outreach to funds, angels & partners",
        "Market intelligence & sentiment tracking",
        "Ecosystem events & co-marketing activations",
        "Advisory support for growth strategy & positioning",
      ],
    },
    {
      title: "Token, Product & Community Growth",
      audience: "For Web3 launches focused on adoption, retention, and long-term network value.",
      desc: "We align product, token, and community into a single growth engine.",
      bullets: [
        "TGE strategy & launch execution",
        "Tokenomics review & optimization",
        "Token utility design & narrative alignment",
        "Airdrop, rewards & incentive systems",
        "Community growth & onboarding systems",
        "Retention & engagement loops",
        "User acquisition funnels for Web3 growth",
        "Whale / holder engagement strategy",
        "Behavioral analytics & performance reporting",
      ],
    },
  ];
  return (
    <section className="section gs-engage">
      <div className="container">
        <div className="gs-engage__head">
          <span className="eyebrow">SCALE ENGINE SYSTEM</span>
          <h2 className="h2 gs-engage__title">
            Growth Strategies, Trusted Networks <em>&amp; Execution Support.</em>
          </h2>
          <p className="lede gs-engage__lede">
            A full-spectrum growth framework that aligns strategic direction, trusted
            partnerships, and operational execution to accelerate visibility, authority,
            and conversion at scale.
          </p>
        </div>

        <div className="gs-engage__grid">
          {blocks.map((b, i) => (
            <div key={i} className="gs-engage__card">
              <h3 className="gs-engage__cTitle">{b.title}</h3>
              <p className="gs-engage__cAudience">{b.audience}</p>
              <p className="gs-engage__cDesc">{b.desc}</p>
              <ul className="gs-engage__list">
                {b.bullets.map((bl, j) => (
                  <li key={j}>
                    <span className="gs-engage__check" aria-hidden="true">
                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                        <path d="M2 5l2 2 4-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </span>
                    {bl}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: The Method (4-step timeline) ---------- */
function GrowthMethod() {
  const steps = [
    { n: "01", title: "Diagnose",
      desc: "Map the leverage, where the next 10x is sitting, blocked by positioning, channel, or capital structure." },
    { n: "02", title: "Sharpen",
      desc: "Tighten the story, the ICP, and the proof points. Build the language your whole team can carry into market." },
    { n: "03", title: "Operate",
      desc: "Run the channels, partnerships, and programs that actually move the metric, quarter by quarter, on cadence." },
    { n: "04", title: "Compound",
      desc: "Hand the engine off, fully instrumented, with the dashboards and operating rituals to keep compounding." },
  ];
  return (
    <section className="section gs-method">
      <div className="container">
        <div className="gs-method__head">
          <span className="eyebrow">THE METHOD</span>
          <h2 className="h2 gs-method__title">
            How We <em>Operate.</em>
          </h2>
          <p className="lede gs-method__lede">
            A four-stage cadence, short enough to feel momentum, long enough for compounding
            to take hold.
          </p>
        </div>

        <div className="gs-method__rail">
          <div className="gs-method__line" aria-hidden="true" />
          {steps.map((s, i) => (
            <div key={i} className="gs-method__step">
              <div className="gs-method__node" aria-hidden="true">
                <span className="gs-method__nodeRing" />
                <span className="gs-method__nodeDot" />
              </div>
              <div className="gs-method__sTitle">{s.title}</div>
              <p className="gs-method__sDesc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Donut (social growth) ---------- */
function GSProofDonut({ frac, value, label }) {
  const r = 46;
  const C = 2 * Math.PI * r;
  const dash = Math.max(0, Math.min(1, frac)) * C;
  return (
    <div className="gs-proof__donut">
      <svg viewBox="0 0 120 120" className="gs-proof__donutSvg" aria-hidden="true">
        <circle cx="60" cy="60" r={r} fill="none" stroke="var(--proof-track)" strokeWidth="13" />
        <circle
          cx="60" cy="60" r={r} fill="none"
          stroke="var(--teal)" strokeWidth="13" strokeLinecap="round"
          strokeDasharray={`${dash} ${C - dash}`}
          transform="rotate(-90 60 60)"
        />
      </svg>
      <div className="gs-proof__donutVal">{value}</div>
      <div className="gs-proof__donutLabel">{label}</div>
    </div>
  );
}

/* ---------- TVL line chart ---------- */
function GSProofTVL() {
  // points normalized to a 480x190 plot, y inverted
  const pts = [
    { x: 40,  y: 178, lbl: "1" },
    { x: 145, y: 150, lbl: "7" },
    { x: 250, y: 120, lbl: "14" },
    { x: 355, y: 58,  lbl: "21" },
    { x: 460, y: 26,  lbl: "30" },
  ];
  const line = pts.map((p) => `${p.x},${p.y}`).join(" ");
  const area = `40,190 ${line} 460,190`;
  const yTicks = [
    { y: 26,  t: "$500M" },
    { y: 67,  t: "$400M" },
    { y: 108, t: "$300M" },
    { y: 149, t: "$200M" },
    { y: 190, t: "$100M" },
  ];
  return (
    <svg viewBox="0 0 500 230" className="gs-proof__tvlSvg" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="gsTvlFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(0,165,161,0.32)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0)" />
        </linearGradient>
      </defs>
      {yTicks.map((t, i) => (
        <g key={i}>
          <line x1="40" y1={t.y} x2="492" y2={t.y} stroke="var(--proof-grid)" strokeWidth="1" />
          <text x="0" y={t.y + 4} className="gs-proof__tvlYlbl">{t.t}</text>
        </g>
      ))}
      <polygon points={area} fill="url(#gsTvlFill)" />
      <polyline points={line} fill="none" stroke="var(--teal)" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
      {pts.map((p, i) => (
        <circle key={i} cx={p.x} cy={p.y} r={i === pts.length - 1 ? 5 : 3.5}
          fill={i === pts.length - 1 ? "var(--teal)" : "#04080B"} stroke="var(--teal)" strokeWidth="2" />
      ))}
      <text x="466" y="16" className="gs-proof__tvlCallout" textAnchor="end">$460M peak TVL</text>
      {pts.map((p, i) => (
        <text key={"x" + i} x={p.x} y="222" textAnchor="middle" className="gs-proof__tvlXlbl">{p.lbl} APR</text>
      ))}
    </svg>
  );
}

/* ---------- Section: Proof in numbers ---------- */
function GrowthProof() {
  const stats = [
    { label: "TOTAL CLIENT CAPITAL RAISED", value: "$150M+", accent: true },
    { label: "PEAK ENTERPRISE VALUE CREATED", value: "$50B+" },
    { label: "CLIENTS LAUNCHED SUCCESSFULLY", value: "80+" },
    { label: "CLIENT SOCIAL GROWTH DRIVEN", value: "10M+" },
  ];
  const reach = [
    { label: "Investors & founders", value: "1000+" },
    { label: "PR & media outlets", value: "500+" },
    { label: "KOLs & ambassadors", value: "2000+" },
  ];
  const socials = [
    { frac: 0.55, value: "+40K", label: "TELEGRAM" },
    { frac: 0.74, value: "+430K", label: "TWITTER" },
    { frac: 0.9, value: "+3M", label: "WEBSITE TRAFFIC" },
  ];
  return (
    <section className="section gs-proof">
      <div className="container">
        <div className="gs-proof__head">
          <span className="eyebrow">IMPACT IN NUMBERS</span>
          <h2 className="h2 gs-proof__title">
            Results We've <span className="gs-proof__hl">Driven.</span>
          </h2>
          <p className="lede gs-proof__lede">
            The metrics reflect what we've helped build: capital deployment, audience
            expansion, and long-term value creation for emerging leaders.
          </p>
        </div>

        <div className="gs-proof__bento">
          {/* big stats */}
          <div className="gs-proof__statGrid">
            {stats.map((s, i) => (
              <div key={i} className={"gs-proof__stat" + (s.accent ? " gs-proof__stat--accent" : "")}>
                <div className="gs-proof__statLabel">{s.label}</div>
                <div className="gs-proof__statVal">{s.value}</div>
              </div>
            ))}
          </div>

          {/* right rail */}
          <div className="gs-proof__rail">
            <div className="gs-proof__panel gs-proof__reach">
              {reach.map((r, i) => (
                <div key={i} className="gs-proof__reachRow">
                  <span className="gs-proof__reachLabel">{r.label}</span>
                  <span className="gs-proof__reachVal">{r.value}</span>
                </div>
              ))}
            </div>

            <div className="gs-proof__panel gs-proof__socials">
              <div className="gs-proof__panelHead">CLIENT SOCIAL GROWTH · 30 DAYS</div>
              <div className="gs-proof__donuts">
                {socials.map((s, i) => (
                  <GSProofDonut key={i} {...s} />
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* row 2: TVL + note */}
        <div className="gs-proof__row2">
          <div className="gs-proof__panel gs-proof__tvl">
            <div className="gs-proof__panelHead">
              CLIENT TVL GROWTH
              <span className="gs-proof__tvlTag">+612% in 30 days</span>
            </div>
            <GSProofTVL />
          </div>
          <div className="gs-proof__panel gs-proof__note">
            <div className="gs-proof__noteLabel">THE ENGINE ROOM</div>
            <p className="gs-proof__noteText">
              The growth engine behind Web3 leaders like <strong>Pyth</strong>,{" "}
              <strong>Zeus</strong>, <strong>Wormhole</strong>, <strong>Linera</strong>,{" "}
              <strong>Momentum</strong> &amp; more.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section: The Growth & Scale System (layered) ---------- */
function WhyGrowth() {
  const layers = [
    {
      n: "01",
      title: "Intelligence & Positioning Layer",
      lead: "We start by decoding everything.",
      desc: "Full channel audit, narrative breakdown, competitor mapping, and audience intelligence. We identify where attention is going, and where your brand can own it. Platforms are prioritized based on impact, not noise.",
      glyph: "compass",
    },
    {
      n: "02",
      title: "Voice Architecture & Content Engine",
      lead: "We design the system your brand speaks through.",
      desc: "A sharp, recognizable voice. A structured content calendar. Modular creative assets. Platform-native playbooks. Everything documented into a living operating system built for scale, not guesswork.",
      glyph: "spark",
    },
    {
      n: "03",
      title: "Execution & Distribution Flywheel",
      lead: "We turn strategy into constant output.",
      desc: "High-frequency content shipping across all priority platforms. Creator and community amplification activated for reach acceleration. Real-time reactive content to ride cultural moments as they happen.",
      glyph: "nodes",
    },
    {
      n: "04",
      title: "Performance Optimization & Scale Loop",
      lead: "We don't just post, we evolve.",
      desc: "Weekly deep analysis across engagement, reach, follower growth, and conversions. Weak formats are eliminated fast. Winning patterns are doubled down on and scaled across channels until they become systems, not experiments.",
      glyph: "chart",
    },
  ];
  return (
    <section className="section gs-why">
      <div className="gs-gss__halo" aria-hidden="true" />
      <div className="container gs-gss">
        <div className="gs-gss__intro">
          <span className="eyebrow gs-why__eyebrow">THE SYSTEM</span>
          <h2 className="h2 gs-gss__title">
            The MCA Growth &amp; Scale <em>System</em>
          </h2>
          <p className="gs-gss__sub">
            How MCA drives attention, culture, and compounding growth.
          </p>
        </div>

        <ol className="gs-gss__rail">
          <span className="gs-gss__spine" aria-hidden="true" />
          {layers.map((l, i) => (
            <li key={i} className="gs-gss__layer">
              <div className="gs-gss__node" aria-hidden="true">
                <span className="gs-gss__nodeNum">{l.n}</span>
              </div>
              <div className="gs-gss__card">
                <div className="gs-gss__cardHead">
                  <span className="gs-gss__glyph" aria-hidden="true"><GSGlyph kind={l.glyph} /></span>
                </div>
                <h3 className="gs-gss__layerTitle">{l.title}</h3>
                <p className="gs-gss__lead">{l.lead}</p>
                <p className="gs-gss__desc">{l.desc}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------- Section: Ecosystems we operate in ---------- */
function GrowthEcosystems() {
  const ecosystems = ["DePIN", "L1s & L2s", "DeFi", "AI x Crypto", "Consumer", "RWA", "Infra", "Gaming", "Wallets", "Exchanges", "Stablecoins", "Restaking"];
  return (
    <section className="section gs-eco">
      <div className="container">
        <div className="gs-eco__head">
          <span className="eyebrow">REACH</span>
          <h2 className="h2 gs-eco__title">
            Ecosystems We <em>Operate In.</em>
          </h2>
          <p className="lede gs-eco__lede">
            We work across the categories shaping the next cycle. If you are building in one
            of them, or alongside one, we have already been in the room.
          </p>
        </div>

        <div className="gs-eco__grid">
          {ecosystems.map((e, idx) => (
            <div key={idx} className="gs-eco__cell">
              <span className="gs-eco__cellName">{e}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function GSFinalCTA({ navigate }) {
  return (
    <section className="section section--tight gs-final">
      <div className="container">
        <div className="gs-final__block">
          <div className="gs-final__grid" aria-hidden="true">
            {Array.from({ length: 6 * 12 }).map((_, i) => <span key={i} />)}
          </div>
          <div className="gs-final__inner">
            <span className="eyebrow gs-final__eyebrow">READY WHEN YOU ARE</span>
            <h2 className="gs-final__title">
              The Next Stage of Growth <em>Is Operating, Not Waiting.</em>
            </h2>
            <p className="gs-final__sub">
              If you're ready to operate the system instead of running the campaign, we're
              ready to work with you.
            </p>
            <div className="gs-final__ctas">
              <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>
                Schedule a Free Consultation
              </Button>
              <Button variant="secondary" size="lg" onClick={() => navigate("/reports")}>
                See case studies
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Page composition ---------- */
function GrowthScalePage({ navigate }) {
  return (
    <React.Fragment>
      <GSHero navigate={navigate} />
      <GrowthMandate navigate={navigate} />
      <GrowthSystem />
      <GrowthOperators />
      <GrowthEngagement />
      <GrowthProof />
      <WhyGrowth />
      <GrowthEcosystems />
      <GSFinalCTA navigate={navigate} />
    </React.Fragment>
  );
}

Object.assign(window, { GrowthScalePage });