/* MCA — Industries: Blockchain Infrastructure growth consulting (dark-only, scoped .bic-) */

const { useState: useBic, useEffect: useBicE, useRef: useBicR } = React;

function BicReveal({ children, delay = 0, className = "", tag = "div", style = {} }) {
  const ref = useBicR(null);
  const [seen, setSeen] = useBic(false);
  useBicE(() => {
    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.1, 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={`bic-reveal ${seen ? "bic-reveal--in" : ""} ${className}`}
      style={{ ...style, transitionDelay: seen ? `${delay}ms` : "0ms" }}>
      {children}
    </Tag>
  );
}

/* ---------- Hero visual: isometric infrastructure cluster (no labels) ---------- */
function BicRails() {
  const CX = 300, CY = 300;
  const HW = 58, HH = 29;
  const pos = (a, b) => [CX + (a - b) * HW, CY + (a + b) * HH];
  // towers: [a, b, halfWidth, halfHeight, height]
  const towers = [
    [0, 0, 44, 22, 96],
    [0, 1, 48, 24, 128],
    [1, 0, 48, 24, 128],
    [1, 1, 54, 27, 162],
  ];
  const box = (x, yb, hw, hh, H) => {
    const ty = yb - H;
    return {
      top: `${x},${ty - hh} ${x + hw},${ty} ${x},${ty + hh} ${x - hw},${ty}`,
      left: `${x - hw},${ty} ${x},${ty + hh} ${x},${yb + hh} ${x - hw},${yb}`,
      right: `${x + hw},${ty} ${x},${ty + hh} ${x},${yb + hh} ${x + hw},${yb}`,
    };
  };
  const sats = [
    { x: 74, y: 348, cable: "74,360 74,432 232,510" },
    { x: 300, y: 486, cable: "300,498 300,520" },
    { x: 528, y: 340, cable: "528,352 528,428 372,506" },
  ];
  const plate = (x, y, w = 34, h = 17) =>
    `${x},${y - h} ${x + w},${y} ${x},${y + h} ${x - w},${y}`;
  return (
    <svg className="bic-iso" viewBox="0 0 600 560" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <radialGradient id="bic-halo" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(0,165,161,0.5)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0)" />
        </radialGradient>
        <linearGradient id="bic-face" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(0,165,161,0.34)" />
          <stop offset="100%" stopColor="rgba(6,32,42,0.9)" />
        </linearGradient>
        <linearGradient id="bic-face2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(0,165,161,0.2)" />
          <stop offset="100%" stopColor="rgba(4,22,30,0.92)" />
        </linearGradient>
        <linearGradient id="bic-cap" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="rgba(95,240,240,0.4)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0.14)" />
        </linearGradient>
      </defs>

      <ellipse cx={CX} cy={CY + 110} rx="250" ry="120" fill="url(#bic-halo)" opacity="0.55" />

      {/* satellite cables + nodes */}
      {sats.map((s, i) => (
        <g key={i}>
          <polyline points={s.cable} fill="none" stroke="rgba(0,165,161,0.45)" strokeWidth="1.4" strokeLinejoin="round" />
          <polyline className="bic-cable" points={s.cable} fill="none" stroke="#5FF0F0" strokeWidth="1.6"
            strokeLinejoin="round" style={{ animationDelay: `${i * 0.7}s` }} />
          <polygon points={plate(s.x, s.y + 10, 36, 18)} fill="rgba(0,0,0,0.35)" opacity="0.45" />
          <polygon points={plate(s.x, s.y + 6)} fill="rgba(4,26,34,0.95)" stroke="rgba(0,165,161,0.5)" strokeWidth="1" />
          <polygon className="bic-node" points={plate(s.x, s.y)} fill="url(#bic-cap)" stroke="rgba(140,240,240,0.75)"
            strokeWidth="1.2" style={{ animationDelay: `${i * 0.8}s` }} />
        </g>
      ))}

      {/* towers, painted back to front */}
      {towers.map(([a, b, hw, hh, H], i) => {
        const [x, yb] = pos(a, b);
        const f = box(x, yb, hw, hh, H);
        const rows = Math.round(H / 22);
        return (
          <g key={i}>
            <polygon points={`${x - hw},${yb} ${x},${yb + hh} ${x + hw},${yb} ${x},${yb - hh}`} fill="rgba(0,0,0,0.4)" opacity="0.4" />
            <polygon points={f.left} fill="url(#bic-face)" stroke="rgba(120,220,230,0.35)" strokeWidth="1" />
            <polygon points={f.right} fill="url(#bic-face2)" stroke="rgba(120,220,230,0.28)" strokeWidth="1" />
            {Array.from({ length: rows }).map((_, r) => {
              const t = yb - H + 14 + r * 22;
              return (
                <g key={r} stroke="rgba(95,240,240,0.5)" strokeWidth="2.4" className="bic-node"
                  style={{ animationDelay: `${(i * 0.35 + r * 0.18).toFixed(2)}s` }}>
                  <line x1={x - hw + 8} y1={t - (hh - 4)} x2={x - 8} y2={t + 4} />
                  <line x1={x + 8} y1={t + 4} x2={x + hw - 8} y2={t - (hh - 4)} />
                </g>
              );
            })}
            <polygon points={f.top} fill="url(#bic-cap)" stroke="rgba(150,245,245,0.7)" strokeWidth="1.2" />
            <polygon points={`${x},${yb - H - hh * 0.5} ${x + hw * 0.5},${yb - H} ${x},${yb - H + hh * 0.5} ${x - hw * 0.5},${yb - H}`}
              fill="rgba(4,26,34,0.75)" stroke="rgba(95,240,240,0.55)" strokeWidth="1" />
            <g className="bic-lift" style={{ animationDelay: `${i * 0.6}s`, "--ry": "-46px" }}>
              <circle cx={x} cy={yb - H - hh} r="3.2" fill="#5FF0F0" />
            </g>
          </g>
        );
      })}
    </svg>
  );
}

function BicStageIcon({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.3, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "define": return (<svg width="26" height="26" viewBox="0 0 26 26"><circle cx="13" cy="13" r="9.5" {...p} /><path d="M13 3.5v19M3.5 13h19" {...p} /></svg>);
    case "launch": return (<svg width="26" height="26" viewBox="0 0 26 26"><path d="M4 22L16 10" {...p} /><path d="M14 4l8 8-3 1-5 4-4-4 4-6z" {...p} /><path d="M4 17v5h5" {...p} /></svg>);
    case "expand": return (<svg width="26" height="26" viewBox="0 0 26 26"><circle cx="13" cy="6" r="2.8" {...p} /><circle cx="5" cy="20" r="2.8" {...p} /><circle cx="21" cy="20" r="2.8" {...p} /><path d="M11 8.4L6.6 17.4M15 8.4l4.4 9M8 20h10" {...p} /></svg>);
    case "lead": return (<svg width="26" height="26" viewBox="0 0 26 26"><path d="M3 20h20M6 20V11M13 20V5M20 20v-7" {...p} /></svg>);
    default: return null;
  }
}

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

/* ---------- Data ---------- */
const BIC_LOGOS = [
  10,11,12,13,14,15,16,18,19,20,21,22,23,24,25,26,27,28,29,
  30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,
  72,74,75,77,80,83
].map((n) => `/assets/partners-v2/${n}.png`);

function BicDoIcon({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "dev": return (<svg width="28" height="28" viewBox="0 0 28 28"><path d="M10 10l-4 4 4 4M18 10l4 4-4 4M16 7l-4 14" {...p} /></svg>);
    case "position": return (<svg width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="10" {...p} /><circle cx="14" cy="14" r="4.5" {...p} /><circle cx="14" cy="14" r="1.4" fill="currentColor" /></svg>);
    case "integrate": return (<svg width="28" height="28" viewBox="0 0 28 28"><circle cx="9" cy="14" r="5.5" {...p} /><circle cx="19" cy="14" r="5.5" {...p} /></svg>);
    case "content": return (<svg width="28" height="28" viewBox="0 0 28 28"><circle cx="12.5" cy="12.5" r="7.5" {...p} /><path d="M18 18l5 5M9 12.5h7M12.5 9v7" {...p} /></svg>);
    case "community": return (<svg width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="7" r="3" {...p} /><circle cx="6" cy="20" r="3" {...p} /><circle cx="22" cy="20" r="3" {...p} /><path d="M12 9.6L7.6 17.6M16 9.6l4.4 8M9 20h10" {...p} /></svg>);
    case "launch": return (<svg width="28" height="28" viewBox="0 0 28 28"><path d="M5 23L17 11" {...p} /><path d="M15 5l8 8-3 1-5 4-4-4 4-9z" {...p} /><path d="M5 18v5h5" {...p} /></svg>);
    default: return null;
  }
}

const BIC_DO = [
  ["dev", "Developer Adoption and Ecosystem Growth", "Developers judge infrastructure in the first thirty minutes. We make those thirty minutes count. Docs positioning, developer content, integration narratives, hackathon presence, builder community programs, and technical thought leadership that turns curious developers into shipped integrations."],
  ["position", "Positioning and Narrative Architecture", "Infrastructure is judged on what it enables, not what it claims. We build positioning around your real differentiators: coverage, reliability, speed, cost, and ecosystem depth. Then we make that positioning inescapable across every channel your buyers actually use."],
  ["integrate", "Integration and Partnership Amplification", "Every new chain deployment, protocol integration, and ecosystem partnership is a growth event. We turn integration announcements into compounding mindshare: co-marketing programs, joint content, ecosystem spotlights, and distribution across both communities."],
  ["content", "Content, SEO, and GEO", "Infrastructure decisions start with a search or an AI query. We build the content layer that wins both: long-form technical content, comparison and category pages, answer-engine optimization, and editorial programs that make your protocol the default reference in its category."],
  ["community", "Community and Mindshare", "Sustained infrastructure growth requires a community that defends the protocol when you are not in the room. We build and operate community programs across X, Discord, and Telegram, run ambassador and contributor initiatives, and manage mindshare campaigns that keep your protocol in the daily conversation."],
  ["launch", "Launch and Token Event Support", "Mainnet launches, token generation events, and major upgrades demand coordinated execution across PR, KOLs, community, and content. We run the full launch room: narrative, calendar, channel orchestration, and post-launch momentum programs."],
];

const BIC_VERTICALS = ["Oracles and Data Networks", "Interoperability and Bridging", "RPC and Node Platforms", "Layer 1 and Layer 2 Chains", "Payments and Settlement Rails", "DePIN Networks", "Wallet and Account Infrastructure", "Restaking and Security Layers", "ZK and Proving Systems", "Developer Tooling"];

const BIC_PROOF = [
  ["Pyth Network", "/assets/partners-v2/16.png", "Oracles & market data", "MCA served as a long-term growth partner to Pyth Network, one of the most widely integrated oracle networks in Web3. Over an extended engagement we supported ecosystem growth, integration amplification, content and narrative development, and sustained community and mindshare programs as the network expanded across chains and asset classes."],
  ["Wormhole", "/assets/partners-v2/25.png", "Interoperability", "MCA partnered with Wormhole to support ecosystem positioning and growth for one of the most important interoperability layers in the industry, amplifying its role as connective tissue across major chains and applications."],
  ["Alchemy", "/assets/partners-v2/21.png", "Developer platform", "MCA worked with Alchemy, the developer platform powering a large share of Web3 applications, supporting growth initiatives aimed at the builders and teams who depend on reliable node and API infrastructure."],
  ["Zeus Network", "/assets/partners-v2/20.png", "BTC · SOL interoperability", "MCA supported Zeus Network in positioning and growing its Bitcoin and Solana interoperability infrastructure, helping translate deeply technical architecture into a narrative developers and communities could rally behind."],
  ["Helio, DeCharge & Cudis", null, "Payments · DePIN · wearables", "Across payments infrastructure, DePIN energy networks, and wearable-powered wellness networks, MCA has helped emerging infrastructure teams find their category wedge, build community, and convert early traction into durable ecosystems."],
];

const BIC_STAGES = [
  {
    icon: "define", label: "Market Definition",
    forWho: "For teams determining where the product belongs and which market opportunity to pursue first.",
    body: "MCA supports product positioning, market research, customer segmentation, use-case prioritization, competitive analysis, business-model development and capital planning.",
    keys: ["Positioning", "Market research", "Segmentation", "Use-case priority", "Capital planning"],
  },
  {
    icon: "launch", label: "Product and Integration Launch",
    forWho: "For companies bringing infrastructure to developers, protocols or enterprise customers.",
    body: "MCA develops the launch narrative, developer onboarding, partnership pipeline, community readiness, technical content and distribution strategy required to support adoption.",
    keys: ["Launch narrative", "Developer onboarding", "Partner pipeline", "Technical content", "Distribution"],
  },
  {
    icon: "expand", label: "Commercial Expansion",
    forWho: "For products with early traction that need a more repeatable customer and integration engine.",
    body: "MCA supports sales strategy, strategic accounts, partner-led distribution, ecosystem expansion, customer retention and regional market entry.",
    keys: ["Sales strategy", "Strategic accounts", "Partner-led growth", "Retention", "Regional entry"],
  },
  {
    icon: "lead", label: "Market Leadership",
    forWho: "For established infrastructure companies expanding their category, product portfolio or global relevance.",
    body: "MCA supports category leadership, institutional partnerships, corporate strategy, founder visibility, ecosystem influence, capital markets and new growth initiatives.",
    keys: ["Category leadership", "Institutional", "Corporate strategy", "Founder visibility", "Capital markets"],
  },
];

function BicStepGlyph({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.3, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "audit":
      return (<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5" {...p} /><path d="M15.5 15.5L21 21" {...p} /></svg>);
    case "plan":
      return (<svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 20l7-7 4 4 7-9" {...p} /><circle cx="10" cy="13" r="1.6" {...p} /></svg>);
    case "ship":
      return (<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2.4" {...p} /><circle cx="4.5" cy="6" r="2" {...p} /><circle cx="19.5" cy="6" r="2" {...p} /><circle cx="12" cy="21" r="0" {...p} /><path d="M6.2 7.2l4.1 3.4M17.8 7.2l-4.1 3.4M12 14.4V20" {...p} /></svg>);
    default:
      return (<svg width="24" height="24" viewBox="0 0 24 24"><path d="M4 20V12M10 20V6M16 20v-6M22 20V3" {...p} /></svg>);
  }
}

const BIC_ENGAGE = [
  { glyph: "audit", step: "STEP 1", title: "Audit and Growth Gap Analysis", body: "A deep audit of your positioning, developer funnel, content footprint, community health, and competitive field. You receive a ranked list of your highest-impact growth levers.", items: [] },
  { glyph: "plan", step: "STEP 2", title: "Strategy and GTM Design", body: "A custom go-to-market playbook covering narrative, channel mix, content architecture, partnership pipeline, launch calendar, and a KPI framework aligned with your internal reporting.", items: [] },
  { glyph: "ship", step: "STEP 3", title: "Execution", body: "MCA's specialist team runs the system: content ships, integrations amplify, community grows, KOL and PR programs land, and launch moments execute on schedule.", items: [] },
  { glyph: "scale", step: "STEP 4", title: "Optimization and Scale", body: "Weekly tracking, monthly board-ready reporting, and a standing cadence where underperforming channels get cut and winning loops get scaled.", items: [] },
];

const BIC_WHY = [
  ["We Are Consultants Who Execute", "Most agencies execute without strategy. Most consultancies strategize without execution. MCA does both under one roof, which is why our clients keep us for years."],
  ["We Have Operated at Every Layer of the Stack", "From node platforms to oracles to interoperability to payments to DePIN, we have grown infrastructure at every tier. We already speak your architecture."],
  ["We Optimize for Adoption, Not Applause", "Impressions do not integrate SDKs. Every program we run is accountable to adoption metrics your leadership team actually cares about."],
  ["We Are Built for Emerging Technology", "MCA is an emerging technology growth firm operating across Web3, AI, robotics, and biotech. Infrastructure teams get a partner fluent in where the entire technology landscape is heading, not just where crypto was last cycle."],
];

const BIC_TAX = [
  ["01", "Developer and Application Infrastructure", ["APIs and SDKs", "RPC and node platforms", "Developer tooling", "Smart contract platforms", "Indexing and query infrastructure", "Account abstraction", "Wallet and identity infrastructure"]],
  ["02", "Data and Computation", ["Oracle networks", "Data-provider networks", "Decentralized compute", "Storage infrastructure", "Zero-knowledge infrastructure", "Proving and verification systems", "Artificial intelligence infrastructure"]],
  ["03", "Interoperability and Network Connectivity", ["Cross-chain messaging", "Bridges", "Interoperability protocols", "Settlement infrastructure", "Data-availability networks", "Rollup infrastructure", "Shared security systems"]],
  ["04", "Financial and Transaction Infrastructure", ["Payment infrastructure", "Stablecoin infrastructure", "Liquidity and settlement systems", "Custody and key management", "Market and trading infrastructure", "Institutional blockchain rails"]],
  ["05", "Decentralized Physical Infrastructure", ["Energy and charging networks", "Wireless and connectivity networks", "Hardware-enabled networks", "Health and wellness networks", "Sensor and data networks", "Real-world infrastructure coordination"]],
];

const BIC_FAQS = [
  ["What kinds of infrastructure does MCA work with?", "Oracles, interoperability protocols, RPC and node platforms, chains, payments rails, DePIN networks, wallet infrastructure, restaking layers, ZK systems, and developer tooling."],
  ["Which Web3 infrastructure companies has MCA worked with?", "MCA has supported leading infrastructure and technology companies including Alchemy, Zeus Network, Wormhole, Pyth Network, DeCharge, Helio and Cudis Wellness. Our experience spans developer platforms, interoperability, oracle and data infrastructure, payments, decentralized physical infrastructure and consumer-connected networks."],
  ["Do you work with early-stage infrastructure teams?", "Yes. We work with teams from pre-launch positioning through mainnet, token events, and multi-year ecosystem growth."],
  ["How can MCA help blockchain infrastructure companies attract developers, integrations and customers?", "MCA builds the complete adoption journey, from market awareness and technical education to product evaluation, integration, deployment and long-term usage. We also identify strategic protocols, ecosystems, enterprises and distribution partners that can accelerate product adoption and commercial growth."],
  ["When should a Web3 infrastructure company engage MCA?", "The best time to engage MCA is before an important growth stage, such as launching a product, entering a new market, expanding developer adoption, building an integration pipeline, raising capital or preparing for a token launch. MCA can also help companies with strong technology but stalled commercial growth build a clearer and more repeatable growth system."],
  ["How does MCA build go-to-market strategies for blockchain infrastructure companies?", "MCA begins by analyzing the product, target users, competitive landscape, business model and strongest market opportunities. We then build a practical go-to-market strategy covering positioning, priority use cases, developer onboarding, customer acquisition, strategic integrations, partnerships and market expansion."],
  ["Can you support a launch or token generation event?", "Yes. We run full launch rooms covering narrative, PR, KOLs, community, and content, with post-launch momentum programs built in."],
];

/* ---------- Page ---------- */
function BlockchainInfraPage({ navigate }) {
  const [stage, setStage] = useBic(0);
  const [faq, setFaq] = useBic(0);
  const s = BIC_STAGES[stage];

  return (
    <div className="bic-page">
      <section className="bic-hero" data-screen-label="Infrastructure — Hero">
        <div className="bic-hero__bg" aria-hidden="true">
          <div className="bic-hero__blob bic-hero__blob--teal"></div>
          <div className="bic-hero__blob bic-hero__blob--deep"></div>
          <div className="bic-grid-lines"></div>
        </div>
        <div className="container bic-hero__inner">
          <div className="bic-hero__copy">
            <span className="bic-eyebrow">Blockchain Infrastructure Growth Consulting</span>
            <h1 className="bic-hero__title">Growth Strategy Consulting for <em>Blockchain Infrastructure</em></h1>
            <p className="bic-hero__sub">MCA helps blockchain infrastructure companies turn powerful technology into developer adoption, ecosystem integrations, strategic partnerships, customers and sustainable market leadership.</p>
            <p className="bic-hero__sub">We work across positioning, product strategy, go-to-market, business development, developer growth, capital markets, community and global expansion to build the complete commercial system surrounding the infrastructure.</p>
            <div className="bic-hero__ctas">
              <Button variant="teal" size="lg" onClick={bicCall} withArrow>Build Your Growth Strategy With MCA</Button>
            </div>
          </div>
          <div className="bic-hero__visual"><BicRails /></div>
        </div>
      </section>

      <section className="bic-sec" data-screen-label="Proof">
        <div className="container">
          <BicReveal className="bic-sec__head">
            <span className="bic-eyebrow">Proof</span>
            <h2 className="bic-h2">Long-Term Partnerships with <em>Market Leaders</em></h2>
            <p className="bic-lede">Infrastructure growth compounds over quarters, not weeks. That is why the strongest names in the stack keep MCA on as a standing growth partner rather than a project vendor.</p>
          </BicReveal>
          <div className="bic-proof">
            {BIC_PROOF.map(([n, logo, tag, d], i) => (
              <BicReveal key={n} className="bic-proof__card" delay={(i % 3) * 90}>
                <span className="bic-proof__tag">{tag}</span>
                {logo ? <img className="bic-proof__logo" src={logo} alt={n} /> : <div className="bic-proof__name">{n}</div>}
                <p>{d}</p>
              </BicReveal>
            ))}
            <BicReveal className="bic-proof__card bic-proof__card--cta" delay={180}>
              <div className="bic-proof__name">Building a Web3 infrastructure product?</div>
              <p>Book a call with MCA advisors.</p>
              <Button variant="teal" onClick={bicCall} withArrow>Book a Call</Button>
            </BicReveal>
          </div>
        </div>
      </section>

      <section className="bic-sec" data-screen-label="What We Do">
        <div className="container">
          <BicReveal className="bic-sec__head">
            <span className="bic-eyebrow">What We Do</span>
            <h2 className="bic-h2">A Full Growth System for <em>Infrastructure Companies</em></h2>
          </BicReveal>
          <div className="bic-do">
            {BIC_DO.map(([n, t, d], i) => (
              <BicReveal key={n} className="bic-do__card" delay={(i % 3) * 90}>
                <span className="bic-do__ico"><BicDoIcon kind={n} /></span>
                <div className="bic-do__title">{t}</div>
                <p>{d}</p>
              </BicReveal>
            ))}
          </div>
        </div>
      </section>

      <section className="bic-sec" data-screen-label="Growth Journey">
        <div className="container">
          <BicReveal className="bic-sec__head">
            <span className="bic-eyebrow">From Infrastructure Product to Market Platform</span>
            <h2 className="bic-h2">MCA Supports Every Stage of the <em>Growth Journey</em></h2>
          </BicReveal>
          <BicReveal className="bic-stages">
            <div className="bic-stages__rail" role="tablist" aria-label="Growth journey stages">
              {BIC_STAGES.map((st, i) => (
                <button key={st.label} type="button" role="tab" aria-selected={stage === i}
                  className={`bic-stages__tab ${stage === i ? "bic-stages__tab--on" : ""}`}
                  onClick={() => setStage(i)} onMouseEnter={() => setStage(i)}>
                  <span className="bic-stages__dot" aria-hidden="true"></span>
                  <span className="bic-stages__ico"><BicStageIcon kind={st.icon} /></span>
                  <span className="bic-stages__label">{st.label}</span>
                </button>
              ))}
            </div>
            <div className="bic-stages__panel">
              <div className="bic-stages__left bic-fade" key={"f" + stage}>
                <span className="bic-stages__step">Stage {stage + 1} / 4</span>
                <h3 className="bic-stages__name">{s.label}</h3>
                <p className="bic-stages__for">{s.forWho}</p>
              </div>
              <div className="bic-stages__right bic-fade" key={"b" + stage}>
                <p className="bic-stages__body">{s.body}</p>
                <div className="bic-stages__key">{s.keys.map((k) => <span key={k}>{k}</span>)}</div>
              </div>
            </div>
          </BicReveal>
        </div>
      </section>

      <section className="bic-sec bic-sec--tint" data-screen-label="Verticals">
        <div className="container">
          <BicReveal className="bic-sec__head">
            <span className="bic-eyebrow">Who We Serve</span>
            <h2 className="bic-h2">Infrastructure Verticals <em>We Grow</em></h2>
            <p className="bic-lede">MCA works across the infrastructure that enables applications, assets, data and transactions to operate across blockchain ecosystems.</p>
          </BicReveal>
        </div>
        <div className="bic-marquee" aria-hidden="true">
          <div className="bic-marquee__track">
            {[...BIC_VERTICALS, ...BIC_VERTICALS].map((t, i) => <span className="bic-pill" key={i}>{t}</span>)}
          </div>
        </div>
        <div className="container">
          <div className="bic-tax" style={{ marginTop: 56 }}>
            {BIC_TAX.map(([n, t, items], i) => (
              <BicReveal key={n} className="bic-tax__col" delay={(i % 5) * 70}>
                <div className="bic-tax__title">{t}</div>
                <ul className="bic-tax__list">{items.map((it) => <li key={it}>{it}</li>)}</ul>
              </BicReveal>
            ))}
          </div>
        </div>
      </section>

      <Metrics />

      <section className="bic-sec bic-sec--tint" data-screen-label="Trusted By">
        <div className="container">
          <BicReveal className="bic-sec__head">
            <span className="bic-eyebrow">Proof of Work</span>
            <h2 className="bic-h2">Trusted by the Infrastructure <em>Powering Web3</em></h2>
          </BicReveal>
          <BicReveal className="logo-wall bic-logowall">
            <LogoRow items={BIC_LOGOS} duration={140} />
          </BicReveal>
        </div>
      </section>


      <section className="bic-sec" data-screen-label="Engagement">
        <div className="container">
          <BicReveal className="bic-sec__head">
            <span className="bic-eyebrow">Engagement</span>
            <h2 className="bic-h2">How an Engagement <em>Runs</em></h2>
          </BicReveal>
          <div className="bic-appr">
            {BIC_ENGAGE.map((a, i) => (
              <BicReveal key={a.step} className="bic-appr__card" delay={(i % 2) * 90}>
                <span className="bic-appr__badge" aria-hidden="true"><BicStepGlyph kind={a.glyph} /></span>
                <h3 className="bic-appr__title" style={{ marginTop: 0 }}>{a.title}</h3>
                <p>{a.body}</p>
              </BicReveal>
            ))}
          </div>
        </div>
      </section>

      <section className="bic-sec" data-screen-label="FAQ">
        <div className="container">
          <BicReveal className="bic-sec__head">
            <span className="bic-eyebrow">FAQ</span>
            <h2 className="bic-h2">Frequently Asked <em>Questions.</em></h2>
          </BicReveal>
          <div className="bic-faq">
            {BIC_FAQS.map(([q, a], i) => (
              <div key={i} className={`bic-faq__item ${faq === i ? "bic-faq__item--open" : ""}`}>
                <button type="button" className="bic-faq__q" onClick={() => setFaq(faq === i ? -1 : i)} aria-expanded={faq === i}>
                  <span>{q}</span>
                  <svg className="bic-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="bic-faq__a"><p>{a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bic-cta" data-screen-label="Final CTA">
        <div className="bic-cta__glow" aria-hidden="true"></div>
        <div className="container">
          <span className="bic-eyebrow" style={{ position: "relative" }}>Work With MCA</span>
          <h2 className="bic-cta__title">Ready to Grow Real <em>Infrastructure Adoption?</em></h2>
          <p className="bic-cta__sub">MCA helps blockchain infrastructure companies build the positioning, partnerships, developer systems, capital strategy and commercial engine required to become essential parts of the digital economy.</p>
          <div className="bic-cta__actions">
            <Button variant="teal" size="lg" onClick={bicCall} withArrow>Talk to MCA About Your Infrastructure</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>See Case Studies</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BlockchainInfraPage });