/* MCA — Industries: Layer 1 & Layer 2 growth consulting (bespoke, dark-only) */

const { useState: useL12, useEffect: useL12E, useRef: useL12R } = React;

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

/* ---------- Hero visual: isometric modular stack ---------- */
function L12Stack() {
  const CX = 340, W = 270, H = 135, T = 13;
  const hw = W / 2, hh = H / 2;
  // plane point: top vertex + a*u + b*v, u=(hw,hh) v=(-hw,hh)
  const P = (cy, a, b) => [CX + (a - b) * hw, cy - hh + (a + b) * hh];
  const face = (cy) => `${CX},${cy - hh} ${CX + hw},${cy} ${CX},${cy + hh} ${CX - hw},${cy}`;
  const slab = (cy) => ({
    top: face(cy),
    left: `${CX - hw},${cy} ${CX},${cy + hh} ${CX},${cy + hh + T} ${CX - hw},${cy + T}`,
    right: `${CX + hw},${cy} ${CX},${cy + hh} ${CX},${cy + hh + T} ${CX + hw},${cy + T}`,
  });
  const L2 = 152, L1 = 302, DA = 442;
  const bars = [0.42, 0.72, 0.34, 0.95, 0.58, 1, 0.48, 0.82, 0.38];
  const micro = [
    { dx: -98, label: "ROLLUP" },
    { dx: 0, label: "APPCHAIN" },
    { dx: 98, label: "L2" },
  ];
  const labels = [
    { cy: L2, main: "LAYER 2 · EXECUTION", sub: ["rollups · appchains", "throughput · UX"] },
    { cy: L1, main: "LAYER 1 · SETTLEMENT", sub: ["consensus · security", "liquidity · finality"] },
    { cy: DA, main: "DATA AVAILABILITY", sub: ["modular stack"] },
  ];
  const s2 = slab(L2), s1 = slab(L1), sda = slab(DA);
  return (
    <svg className="l12-stack" viewBox="0 0 600 570" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <linearGradient id="l12-top" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="rgba(0,165,161,0.24)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0.05)" />
        </linearGradient>
        <linearGradient id="l12-top-hot" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="rgba(64,224,224,0.34)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0.10)" />
        </linearGradient>
        <linearGradient id="l12-side" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(0,165,161,0.30)" />
          <stop offset="100%" stopColor="rgba(0,60,66,0.55)" />
        </linearGradient>
        <linearGradient id="l12-bar" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stopColor="rgba(0,165,161,0.35)" />
          <stop offset="100%" stopColor="rgba(95,240,240,0.95)" />
        </linearGradient>
        <radialGradient id="l12-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>
        <clipPath id="l12-clip-da"><polygon points={sda.top} /></clipPath>
      </defs>

      <ellipse cx={CX} cy={L1 + 30} rx="230" ry="105" fill="url(#l12-halo)" opacity="0.55" />

      {/* DATA AVAILABILITY slab */}
      <g>
        <polygon points={sda.left} fill="url(#l12-side)" opacity="0.5" />
        <polygon points={sda.right} fill="url(#l12-side)" opacity="0.32" />
        <polygon points={sda.top} fill="rgba(255,255,255,0.035)" stroke="rgba(255,255,255,0.16)" />
        <g clipPath="url(#l12-clip-da)" stroke="rgba(160,220,230,0.13)" strokeWidth="1">
          {[0.2, 0.4, 0.6, 0.8].map((k) => {
            const a = P(DA, k, 0), b = P(DA, k, 1), c = P(DA, 0, k), d = P(DA, 1, k);
            return <g key={k}><line x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]} /><line x1={c[0]} y1={c[1]} x2={d[0]} y2={d[1]} /></g>;
          })}
        </g>
        {[0.25, 0.5, 0.75].map((a) => [0.25, 0.5, 0.75].map((b) => {
          const p = P(DA, a, b);
          return <circle key={a + "-" + b} cx={p[0]} cy={p[1]} r="2" fill="rgba(95,240,240,0.55)" />;
        }))}
      </g>

      {/* LAYER 1 slab */}
      <g>
        <polygon points={s1.left} fill="url(#l12-side)" />
        <polygon points={s1.right} fill="url(#l12-side)" opacity="0.6" />
        <polygon points={s1.top} fill="url(#l12-top-hot)" stroke="rgba(140,240,240,0.5)" />
        <polygon points={s1.top} fill="none" stroke="rgba(95,240,240,0.35)" strokeWidth="3" className="l12-edge" />
        <g>
          {bars.map((b, i) => {
            const x = CX - 100 + i * 25;
            const h = 16 + b * 46;
            return <rect key={i} className="l12-bar" x={x} y={L1 - h} width="9" height={h} rx="2" fill="url(#l12-bar)" style={{ animationDelay: `${i * 0.13}s` }} />;
          })}
        </g>
      </g>

      {/* LAYER 2 slab */}
      <g>
        <polygon points={s2.left} fill="url(#l12-side)" opacity="0.75" />
        <polygon points={s2.right} fill="url(#l12-side)" opacity="0.45" />
        <polygon points={s2.top} fill="url(#l12-top)" stroke="rgba(120,220,230,0.4)" />
      </g>

      {/* micro rollup plates hovering above L2 */}
      {micro.map((m, i) => {
        const x = CX + m.dx, y = L2 - 34;
        const mw = 40, mh = 20;
        return (
          <g key={m.label}>
            <polygon points={`${x},${L2 - 9} ${x + 26},${L2} ${x},${L2 + 9} ${x - 26},${L2}`} fill="rgba(0,0,0,0.35)" opacity="0.5" />
            <line x1={x} y1={y + mh + 2} x2={x} y2={L2 - 2} stroke="rgba(0,165,161,0.4)" strokeWidth="1" strokeDasharray="2 4" />
            <g className="l12-float" style={{ animationDelay: `${i * 0.7}s` }}>
              <polygon points={`${x},${y - mh} ${x + mw},${y} ${x},${y + mh} ${x - mw},${y}`} fill="rgba(0,165,161,0.20)" stroke="rgba(140,240,240,0.6)" />
              {[[-16, 0], [4, -6], [4, 6], [20, 0]].map(([dx, dy], k) => <rect key={k} x={x + dx - 4} y={y + dy - 3} width="9" height="5" rx="1" fill="rgba(95,240,240,0.85)" />)}
            </g>
            <text x={x} y={y - mh - 14} textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" letterSpacing="0.2em" fill="rgba(180,235,245,0.7)">{m.label}</text>
          </g>
        );
      })}

      {/* descending batches L2 -> L1 -> DA */}
      {micro.map((m, i) => (
        <g key={"beam" + i}>
          <line x1={CX + m.dx} y1={L2 + 14} x2={CX + m.dx} y2={L1 - 6} stroke="rgba(0,165,161,0.28)" strokeWidth="1" strokeDasharray="3 6" />
          <g className="l12-pkt" style={{ animationDelay: `${i * 0.55}s`, "--d": "128px" }}>
            <polygon points={`${CX + m.dx},${L2 + 16} ${CX + m.dx + 9},${L2 + 22} ${CX + m.dx},${L2 + 28} ${CX + m.dx - 9},${L2 + 22}`} fill="#5FF0F0" />
          </g>
        </g>
      ))}
      <line x1={CX} y1={L1 + 22} x2={CX} y2={DA - 6} stroke="rgba(0,165,161,0.22)" strokeWidth="1" strokeDasharray="3 6" />
      <g className="l12-pkt" style={{ animationDelay: "1.1s", "--d": "104px" }}>
        <polygon points={`${CX},${L1 + 24} ${CX + 8},${L1 + 30} ${CX},${L1 + 36} ${CX - 8},${L1 + 30}`} fill="rgba(95,240,240,0.8)" />
      </g>

      {/* left label column */}
      <g fontFamily="ui-monospace, monospace">
        {labels.map((l) => (
          <g key={l.main}>
            <line x1="188" y1={l.cy} x2={CX - hw - 6} y2={l.cy} stroke="rgba(0,165,161,0.35)" strokeWidth="1" />
            <circle cx="188" cy={l.cy} r="2.5" fill="var(--teal, #00A5A1)" />
            <text x="178" y={l.cy - 8} textAnchor="end" fontSize="11" letterSpacing="0.2em" fill="rgba(235,252,253,0.92)">{l.main}</text>
            {l.sub.map((sv, k) => (
              <text key={sv} x="178" y={l.cy + 9 + k * 15} textAnchor="end" fontSize="9.5" letterSpacing="0.12em" fill="rgba(170,225,235,0.5)">{sv}</text>
            ))}
          </g>
        ))}
      </g>

      {/* value flow rail */}
      <g fontFamily="ui-monospace, monospace" fontSize="9.5" letterSpacing="0.16em">
        <line x1="60" y1="524" x2="540" y2="524" stroke="rgba(0,165,161,0.28)" strokeWidth="1" />
        <g className="l12-sweep"><circle cx="60" cy="524" r="3.5" fill="#5FF0F0" /></g>
        {[["DEVELOPERS", 60, "start"], ["APPLICATIONS", 300, "middle"], ["USERS · CAPITAL", 540, "end"]].map(([t, x, anc]) => (
          <g key={t}>
            <circle cx={x} cy="524" r="3" fill="rgba(0,165,161,0.9)" />
            <text x={x} y="548" textAnchor={anc} fill="rgba(0,165,161,0.9)">{t}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

function L12StageIcon({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.3, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "foundation": return (<svg width="26" height="26" viewBox="0 0 26 26"><circle cx="13" cy="13" r="9.5" {...p} /><circle cx="13" cy="13" r="4" {...p} /><circle cx="13" cy="13" r="1.3" fill="currentColor" /><path d="M13 3.5V1M13 25v-2.5M3.5 13H1M25 13h-2.5" {...p} /></svg>);
    case "testnet": return (<svg width="26" height="26" viewBox="0 0 26 26"><path d="M8 9l-4 4 4 4M18 9l4 4-4 4M15 6l-4 14" {...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>);
    default: return null;
  }
}

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

/* ---------- Data ---------- */
const L12_STAGES = [
  {
    icon: "foundation", label: "Early Network Strategy",
    forWho: "For teams establishing the commercial and strategic foundation of the ecosystem.",
    body: "MCA helps define the network's position, priority use cases, target developers, ecosystem structure, token model, capital requirements and partnership opportunities before resources are committed at scale.",
    keys: ["Positioning", "Use case priority", "Token model", "Capital plan", "Partner map"],
  },
  {
    icon: "testnet", label: "Testnet & Developer Activation",
    forWho: "For networks preparing to introduce the technology to builders and early participants.",
    body: "MCA develops the testnet strategy, developer journey, education programs, participation systems and community infrastructure needed to attract qualified users, generate feedback and convert early interest into continued contribution.",
    keys: ["Testnet strategy", "Developer journey", "Education", "Quests & points", "Community infra"],
  },
  {
    icon: "launch", label: "Mainnet & Token Launch",
    forWho: "For networks approaching a major market inflection point.",
    body: "MCA coordinates mainnet positioning, ecosystem readiness, token launch strategy, partner activation, liquidity planning, investor communications and market visibility around one launch roadmap.",
    keys: ["Launch roadmap", "Ecosystem readiness", "Liquidity planning", "Investor comms", "Market visibility"],
  },
  {
    icon: "expand", label: "Ecosystem Expansion",
    forWho: "For networks ready to scale applications, integrations, users and global relevance.",
    body: "MCA supports application onboarding, strategic partnerships, developer programs, institutional relationships, regional expansion and community participation to strengthen the network beyond its initial launch.",
    keys: ["App onboarding", "Integrations", "Developer programs", "Institutional", "Regional growth"],
  },
];

const L12_CAPS = [
  {
    n: "1", nav: "Protocol Strategy & Positioning", kicker: "Protocol Strategy and Market Positioning",
    title: "Turn Technical Differentiation Into a Clear Market Advantage",
    paras: [
      "MCA defines where the network belongs in the market, which audiences it should prioritize and why developers, applications, validators, users and investors should choose it.",
      "We translate complex protocol architecture into a technically credible and commercially relevant narrative without oversimplifying the technology.",
    ],
    items: ["Protocol and category positioning", "Competitive landscape analysis", "Technical narrative development", "Use case prioritization", "Ecosystem and audience segmentation", "Brand and communication strategy", "Founder and leadership positioning", "Website, documentation and messaging audits", "Go to market planning"],
    out: "The result is a clear position that can guide product decisions, developer acquisition, partnerships, fundraising and market communications.",
  },
  {
    n: "2", nav: "Testnet & Mainnet Go to Market", kicker: "Testnet and Mainnet Go to Market",
    title: "Convert Launch Attention Into Continued Ecosystem Activity",
    paras: [
      "Testnets and mainnets require different audiences, incentives, campaigns and success metrics.",
      "MCA creates launch strategies that move participants from awareness to education, experimentation, deployment and retained activity.",
    ],
    items: ["Testnet and incentivized testnet strategy", "Participation, points and quest system design", "User journey and conversion planning", "Mainnet launch strategy", "Launch campaign development", "Ecosystem activation calendars", "Community readiness", "Application and partner coordination", "Media and market activation", "Post launch retention programs"],
    out: "The objective is not simply to generate wallets, followers or temporary transactions. It is to create a structured path from initial participation to long-term ecosystem involvement.",
  },
  {
    n: "3", nav: "Developer Adoption & DevRel", kicker: "Developer Adoption and DevRel Strategy",
    title: "Build the Path From Developer Discovery to Deployment",
    paras: [
      "Developers do not adopt an ecosystem because of a single announcement, event or incentive. They need clear technical advantages, accessible documentation, practical education, responsive support, funding opportunities and a realistic path from experimentation to production.",
    ],
    flow: ["Discover", "Learn", "Build", "Deploy", "Grow"],
    items: ["Developer market research", "Geographic developer analysis", "Developer audience segmentation", "Documentation and onboarding reviews", "Technical education campaigns", "Developer content strategy", "University and academic programs", "Developer ambassador programs", "Bootcamps and build sessions", "SDK and tooling campaigns", "Learn to earn initiatives", "Deployment and retention programs"],
    out: "Success is measured through qualified participation, completed builds, deployed applications, integrations and continued ecosystem contribution rather than registrations alone.",
  },
  {
    n: "4", nav: "Grants, Hackathons & Builders", kicker: "Grants, Hackathons and Builder Programs",
    title: "Turn Ecosystem Funding Into Active Applications",
    paras: [
      "Grant and hackathon programs need more than prize pools and promotion. They require clear ecosystem priorities, qualified applicants, effective evaluation criteria and continued support that helps promising projects move from prototypes to live deployments.",
    ],
    items: ["Ecosystem gap analysis", "Grant category and program design", "Applicant and developer sourcing", "Program positioning", "Hackathon format and track development", "University partnerships", "Mentor, judge and speaker sourcing", "Developer acquisition campaigns", "Project evaluation frameworks", "Demo day and launch support", "Post program incubation", "Deployment support", "Ecosystem co marketing"],
    out: "The goal is to create functioning products, committed teams and long-term network value from every program.",
  },
  {
    n: "5", nav: "Ecosystem & Partnerships", kicker: "Ecosystem Expansion and Strategic Partnerships",
    title: "Build the Integrations and Relationships the Network Needs to Scale",
    paras: [
      "A blockchain ecosystem grows when applications, infrastructure providers and distribution partners have clear commercial and technical reasons to integrate.",
      "MCA treats ecosystem expansion as a structured business development function. We identify the partnerships that remove infrastructure gaps, improve the developer experience, introduce new users and generate measurable network activity.",
    ],
    items: ["Ecosystem mapping", "Anchor application targeting", "Multichain application onboarding", "Strategic partnership development", "Wallet, bridge and oracle partnerships", "Infrastructure integrations", "Stablecoin, payment and liquidity relationships", "Validator and node operator partnerships", "Exchange and custody relationships", "Institutional and enterprise partnerships", "Regional ecosystem development", "Partnership negotiation and activation", "Integration launch campaigns", "Joint marketing and distribution"],
    out: "Every opportunity is evaluated according to its strategic relevance, integration potential and contribution to the wider network.",
  },
  {
    n: "6", nav: "Tokenomics & Capital Markets", kicker: "Tokenomics, Capital Markets and Token Launch",
    title: "Align the Token, Network and Ecosystem",
    paras: [
      "MCA helps blockchain teams build the financial and strategic structures required to support capital formation, ecosystem incentives, governance, liquidity and sustainable token markets.",
    ],
    items: ["Token utility and economic design", "Token allocation strategy", "Vesting and lockup structures", "Community and ecosystem incentives", "Validator and staking economics", "Governance design", "Fundraising strategy", "Investor materials and financial models", "Investor and strategic partner outreach", "Token Generation Event planning", "Exchange listing strategy", "Market maker evaluation and selection", "Liquidity and launch sequencing", "Investor and market communications", "Post TGE growth planning"],
    out: "The token is treated as part of the network's operating model, not as a separate fundraising or marketing event.",
  },
  {
    n: "7", nav: "Community & User Growth", kicker: "Community, User Acquisition and Retention",
    title: "Build Participation That Continues Beyond the Campaign",
    paras: [
      "A large community creates value only when members understand the network, use its applications and continue contributing after incentives end.",
      "MCA develops community systems that support education, acquisition, activation and retention across every stage of network development.",
    ],
    items: ["Community architecture", "Discord and Telegram strategy", "Community management and moderation", "Community security reviews", "Regional community programs", "Ambassador and contributor programs", "Quest and acquisition campaigns", "User education", "Governance and staking participation", "Cross ecosystem activations", "KOL and creator campaigns", "Sentiment monitoring", "Retention and reactivation programs"],
    out: "Community performance is connected to ecosystem outcomes such as testnet participation, application usage, governance, staking and developer activity.",
  },
  {
    n: "8", nav: "Marketing, PR & Influence", kicker: "Marketing, PR and Market Influence",
    title: "Give Every Audience a Clear Reason to Believe in the Network",
    paras: [
      "Infrastructure projects must communicate with technical, financial, institutional and community audiences without fragmenting the narrative.",
      "MCA builds one communication strategy and adapts it to the channels and priorities of each audience.",
    ],
    items: ["Communications strategy", "Founder and leadership thought leadership", "Technical and educational content", "Social media strategy and execution", "Research led campaigns", "Earned media and public relations", "Podcasts and media tours", "KOL, analyst and ecosystem relations", "Conference positioning", "Speaking opportunities", "Side events and ecosystem activations", "Partnership and integration announcements", "Crisis communications"],
    out: "Marketing is connected directly to developer adoption, partnership development, community growth, fundraising and ecosystem participation.",
  },
];

const L12_KPIS = ["Developer registrations and active developers", "Documentation and educational engagement", "Testnet participation", "Completed quests and user journeys", "Applications and contracts deployed", "Ecosystem integrations", "Partnership pipeline and conversion", "Community activation and retention", "Governance and staking participation", "Bridge activity and liquidity", "Application usage", "Brand and narrative reach", "Campaign acquisition costs", "Conversion between growth stages"];

const L12_CONNECT = [
  ["Architecture", "Positioning", "Translate protocol advantages into a differentiated market category."],
  ["Positioning", "Developers", "Give technical teams a compelling reason and clear pathway to build."],
  ["Developers", "Deployments", "Convert education, grants and hackathons into active applications."],
  ["Deployments", "Users & Liquidity", "Support applications with partnerships, distribution and ecosystem campaigns."],
  ["Ecosystem Growth", "Token Value", "Align network participation, incentives, governance and token economics."],
  ["Traction", "Capital & Expansion", "Use measurable progress to support fundraising, partnerships and new-market entry."],
];

const L12_TYPES = ["General-purpose Layer 1 networks", "Ethereum Layer 2 rollups", "Zero-knowledge rollups", "Optimistic rollups", "Application-specific chains", "Modular blockchain networks", "Data-availability layers", "Sovereign rollups", "Cosmos and IBC ecosystems", "Move-based networks", "SVM-compatible networks", "Rollup-as-a-Service providers", "Enterprise and institutional blockchains", "Interoperability protocols", "Validator and sequencer networks", "Developer infrastructure platforms"];

const L12_APPROACH = [
  { step: "STEP 1", title: "Diagnose the Ecosystem", body: "We assess the protocol, product, market, developers, applications, community, token structure, partnerships and internal growth capabilities.", items: ["Protocol and brand audit", "Competitive benchmarking", "Ecosystem gap analysis", "Developer journey review", "Community and channel analysis", "Token and capital-market review", "Partnership pipeline analysis", "Growth-data assessment"] },
  { step: "STEP 2", title: "Build the Growth Architecture", body: "MCA creates a unified roadmap covering the network's highest-priority growth objectives. Each workstream is connected to clear responsibilities, timelines and measurable outcomes.", items: ["Market positioning", "Testnet or mainnet strategy", "Developer acquisition", "Ecosystem business development", "Grants and hackathons", "Community growth", "Capital formation", "Token launch", "Global expansion", "Marketing and communications"] },
  { step: "STEP 3", title: "Execute Across the Ecosystem", body: "MCA works alongside founders, foundations and internal teams to operate the strategy. Our team supports research, partner sourcing, campaign creation, developer programs, content, communications, community, token strategy and growth operations through one coordinated engagement.", items: [] },
  { step: "STEP 4", title: "Measure, Learn and Scale", body: "We evaluate which channels, audiences, partnerships and programs are producing meaningful results. High-performing initiatives are expanded. Underperforming activities are redesigned or removed. The strategy develops alongside the protocol and its ecosystem.", items: [] },
];

const L12_WHY = [
  ["Technical Understanding With Commercial Execution", "We understand that different blockchain architectures require different growth strategies. A ZK rollup, real-time Layer 1, application-specific chain and institutional blockchain cannot be marketed or scaled through the same generic playbook."],
  ["Strategy and Execution in One Team", "MCA does not stop after delivering a presentation. We work with internal teams to implement the roadmap across partnerships, developers, community, capital markets and communications."],
  ["Capital and Growth Are Connected", "Fundraising, token economics, ecosystem incentives, liquidity, developer adoption and market positioning are interdependent. MCA brings these areas together under one strategy."],
  ["Global Network, Regional Execution", "We help blockchain companies identify the ecosystems, markets, developers, partners, institutions and events most relevant to their expansion."],
  ["Built for Every Growth Stage", "MCA supports networks preparing for testnet, approaching mainnet, launching a token, expanding their ecosystem, entering new regions or repositioning for the next stage of growth."],
];

const L12_FAQS = [
  ["What does Layer 1 and Layer 2 growth consulting include?", "It can include protocol positioning, market research, developer adoption, testnet and mainnet planning, ecosystem partnerships, grants, hackathons, community growth, tokenomics, fundraising, TGE support, PR, events and global expansion."],
  ["When should an L1 or L2 engage MCA?", "The strongest engagement points are before an important inflection point, such as a testnet, mainnet, fundraise, token launch, ecosystem expansion, developer program or entry into a new market."],
  ["Can MCA help us attract developers?", "Yes. MCA develops developer acquisition and education strategies covering research, technical content, universities, hackathons, bootcamps, ambassadors, grants and post-program deployment support."],
  ["Can MCA support both testnet and mainnet launches?", "Yes. Testnet strategy focuses on education, experimentation, participation and feedback. Mainnet strategy connects applications, users, infrastructure, liquidity, communications and long-term retention."],
  ["Does MCA support token launches?", "Yes. MCA can support tokenomics, allocation and vesting, fundraising, launch strategy, investor materials, exchange relationships, market-maker selection, communications and post-TGE growth."],
  ["Can MCA work alongside our internal team?", "Yes. MCA can operate as an embedded strategic and execution partner or support selected workstreams where the internal team needs additional expertise, capacity or industry access."],
  ["How does MCA measure ecosystem growth?", "The KPI structure depends on the network's stage. It may include active developers, deployments, integrations, testnet activity, application usage, community participation, partner conversion, liquidity, governance, staking and retention."],
];

/* ---------- Page ---------- */
function Layer1Layer2Page({ navigate }) {
  const [stage, setStage] = useL12(0);
  const [cap, setCap] = useL12(0);
  const [faq, setFaq] = useL12(0);
  const s = L12_STAGES[stage];
  const c = L12_CAPS[cap];

  return (
    <div className="l12-page">
      <section className="l12-hero" data-screen-label="L1 & L2 — Hero">
        <div className="l12-hero__bg" aria-hidden="true">
          <div className="l12-hero__blob l12-hero__blob--teal"></div>
          <div className="l12-hero__blob l12-hero__blob--deep"></div>
          <div className="l12-grid-lines"></div>
        </div>
        <div className="container l12-hero__inner">
          <div className="l12-hero__copy">
            <span className="l12-eyebrow">Layer 1 &amp; Layer 2 Growth Consulting</span>
            <h1 className="l12-hero__title">Build the Technology. <em>Scale the Ecosystem.</em></h1>
            <p className="l12-hero__sub">MCA helps Layer 1 and Layer 2 networks turn technical innovation into developer adoption, ecosystem activity, capital, liquidity and long-term market relevance.</p>
            <p className="l12-hero__sub">From protocol positioning and testnet strategy to developer onboarding, ecosystem partnerships, token launches and global expansion, we build and operate the complete growth system around your blockchain.</p>
            <div className="l12-hero__ctas">
              <Button variant="teal" size="lg" onClick={l12Call} withArrow>Book a Strategy Call</Button>
            </div>
            <div className="l12-hero__strip">
              {["Protocol positioning", "Testnet & mainnet", "DevRel", "Grants", "Tokenomics", "Ecosystem BD"].map((t) => <span key={t} className="l12-chip">{t}</span>)}
            </div>
          </div>
          <div className="l12-hero__visual"><L12Stack /></div>
        </div>
      </section>

      <section className="l12-sec" data-screen-label="Stages">
        <div className="container">
          <L12Reveal className="l12-sec__head">
            <span className="l12-eyebrow">MCA Is a Strategic Growth Partner for Blockchain Infrastructure</span>
            <h2 className="l12-h2">Built for Every Stage of <em>Network Growth</em></h2>
          </L12Reveal>
          <L12Reveal className="l12-stages">
            <div className="l12-stages__rail" role="tablist" aria-label="Network growth stages">
              {L12_STAGES.map((st, i) => (
                <button key={st.label} type="button" role="tab" aria-selected={stage === i}
                  className={`l12-stages__tab ${stage === i ? "l12-stages__tab--on" : ""}`}
                  onClick={() => setStage(i)} onMouseEnter={() => setStage(i)}>
                  <span className="l12-stages__dot" aria-hidden="true"></span>
                  <span className="l12-stages__ico"><L12StageIcon kind={st.icon} /></span>
                  <span className="l12-stages__label">{st.label}</span>
                </button>
              ))}
            </div>
            <div className="l12-stages__panel">
              <div className="l12-stages__left l12-fade" key={"f" + stage}>
                <span className="l12-stages__step">Stage {stage + 1} / 4</span>
                <h3 className="l12-stages__name">{s.label}</h3>
                <p className="l12-stages__for">{s.forWho}</p>
              </div>
              <div className="l12-stages__right l12-fade" key={"b" + stage}>
                <p className="l12-stages__body">{s.body}</p>
                <div className="l12-stages__key">{s.keys.map((k) => <span key={k}>{k}</span>)}</div>
              </div>
            </div>
          </L12Reveal>
        </div>
      </section>

      <section className="l12-sec l12-sec--tint" data-screen-label="Growth System">
        <div className="container">
          <L12Reveal className="l12-sec__head">
            <span className="l12-eyebrow">MCA Supports Every Stage of Network Growth</span>
            <h2 className="l12-h2">One Integrated Growth System <em>for L1s and L2s</em></h2>
          </L12Reveal>
          <div className="l12-cap">
            <div className="l12-cap__index" role="tablist" aria-label="Capabilities">
              {L12_CAPS.map((x, i) => (
                <button key={x.n} type="button" role="tab" aria-selected={cap === i}
                  className={`l12-cap__item ${cap === i ? "l12-cap__item--on" : ""}`} onClick={() => setCap(i)}>
                  <span className="l12-cap__item-num">{x.n}</span>
                  <span className="l12-cap__item-title">{x.nav}</span>
                </button>
              ))}
            </div>
            <div className="l12-cap__panel l12-fade" key={cap}>
              <span className="l12-cap__kicker">{c.n} — {c.kicker}</span>
              <h3 className="l12-cap__title">{c.title}</h3>
              {c.paras.map((p, i) => <p key={i}>{p}</p>)}
              {c.flow && (
                <div className="l12-cap__flow">
                  {c.flow.map((f, i) => (
                    <React.Fragment key={f}>
                      <span>{f}</span>
                      {i < c.flow.length - 1 && <i>→</i>}
                    </React.Fragment>
                  ))}
                </div>
              )}
              <div className="l12-cap__listlabel">Our work includes</div>
              <ul className="l12-cap__list">{c.items.map((it) => <li key={it}>{it}</li>)}</ul>
              <div className="l12-cap__out">{c.out}</div>
            </div>
          </div>
        </div>
      </section>

      <section className="l12-sec" data-screen-label="Growth Intelligence">
        <div className="container">
          <L12Reveal className="l12-sec__head">
            <span className="l12-eyebrow">Growth Intelligence and Ecosystem Operations</span>
            <h2 className="l12-h2">Measure What Creates <em>Long-Term Network Value</em></h2>
            <p className="l12-lede">MCA creates the operating structure required to understand where ecosystem growth is accelerating, where conversion is slowing and where resources should be redirected. Depending on the network stage, we track:</p>
          </L12Reveal>
        </div>
        <div className="l12-marquee" aria-hidden="true">
          <div className="l12-marquee__track">
            {[...L12_KPIS, ...L12_KPIS].map((k, i) => (
              <span className="l12-pill" key={i}>{k}</span>
            ))}
          </div>
        </div>

      </section>

      <section className="l12-sec l12-sec--tint" data-screen-label="What We Connect">
        <div className="container">
          <L12Reveal className="l12-sec__head">
            <span className="l12-eyebrow">Strategic Support Across the Full Network Lifecycle</span>
            <h2 className="l12-h2">What We <em>Connect</em></h2>
            <p className="l12-lede">MCA brings together growth strategy, ecosystem business development, developer adoption, capital markets, tokenomics, community, communications and global expansion under one coordinated roadmap.</p>
          </L12Reveal>
          <div className="l12-connect">
            {L12_CONNECT.map(([a, b, d], i) => (
              <L12Reveal key={a + b} className="l12-connect__row" delay={i * 50}>
                <div className="l12-connect__pair">
                  <span className="l12-connect__a">{a}</span>
                  <svg className="l12-connect__arrow" width="46" height="12" viewBox="0 0 46 12" aria-hidden="true">
                    <defs>
                      <linearGradient id="l12-arrow" x1="0" y1="0" x2="1" y2="0">
                        <stop offset="0%" stopColor="rgba(0,165,161,0.15)" />
                        <stop offset="100%" stopColor="#40E0E0" />
                      </linearGradient>
                    </defs>
                    <path d="M1 6H37" stroke="url(#l12-arrow)" strokeWidth="1.2" strokeLinecap="round" />
                    <path d="M32.5 2.2L37.6 6l-5.1 3.8" fill="none" stroke="#40E0E0" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span className="l12-connect__b">{b}</span>
                </div>
                <p className="l12-connect__desc">{d}</p>
              </L12Reveal>
            ))}
          </div>
        </div>
      </section>

      <Metrics />

      <section className="l12-sec" data-screen-label="Networks We Support">
        <div className="container">
          <L12Reveal className="l12-sec__head">
            <span className="l12-eyebrow">Coverage</span>
            <h2 className="l12-h2">Layer 1 and Layer 2 <em>Networks We Support</em></h2>
            <p className="l12-lede">MCA works with emerging and established blockchain infrastructure companies, including:</p>
          </L12Reveal>
          <div className="l12-types">
            {L12_TYPES.map((t, i) => <L12Reveal key={t} className="l12-type" delay={(i % 4) * 50}>{t}</L12Reveal>)}
          </div>
        </div>
      </section>

      <section className="l12-sec l12-sec--tint" data-screen-label="Approach">
        <div className="container">
          <L12Reveal className="l12-sec__head">
            <span className="l12-eyebrow">Engagement Model</span>
            <h2 className="l12-h2">How MCA Approaches <em>L1 and L2 Growth</em></h2>
          </L12Reveal>
          <div className="l12-appr">
            {L12_APPROACH.map((a, i) => (
              <L12Reveal key={a.step} className="l12-appr__card" delay={(i % 2) * 90}>
                <span className="l12-appr__step">{a.step}</span>
                <h3 className="l12-appr__title">{a.title}</h3>
                <p>{a.body}</p>
                {a.items.length > 0 && <ul className="l12-appr__list">{a.items.map((it) => <li key={it}>{it}</li>)}</ul>}
              </L12Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="l12-case" data-screen-label="Case Study — Linera">
        <div className="container l12-case__grid">
          <L12Reveal>
            <span className="l12-eyebrow">Client Case Study</span>
            <img className="l12-case__logo" src="/assets/case-studies/linera-wordmark.png" alt="Linera" />
            <h2 className="l12-case__title">Linera: Building Growth Infrastructure for a <em>Real-Time Layer 1</em></h2>
            <p>Linera is a Layer 1 blockchain built around a microchain architecture designed for highly scalable, real-time Web3 applications. The team engaged MCA to support testnet strategy, developer adoption, ecosystem partnerships, community building, social growth, public relations and brand development.</p>
            <div style={{ marginTop: 30 }}><Button variant="teal" onClick={() => navigate("/case-studies")} withArrow>See Case Studies</Button></div>
          </L12Reveal>
          <L12Reveal className="l12-case__panel" delay={120}>
            <h3 className="l12-case__panel-title">The Result</h3>
            <p>MCA helped Linera establish the strategic and operational infrastructure required to move from technical innovation toward broader ecosystem adoption. The engagement connected:</p>
            <ul className="l12-case__chain">
              {["Protocol positioning", "Testnet planning", "Developer acquisition", "Ecosystem partnerships", "Community activation", "Social growth", "PR and events"].map((x) => <li key={x}>{x}</li>)}
            </ul>
          </L12Reveal>
        </div>
      </section>

      <section className="l12-sec" data-screen-label="Why MCA">
        <div className="container">
          <L12Reveal className="l12-sec__head">
            <span className="l12-eyebrow">Why MCA</span>
            <h2 className="l12-h2">Why Blockchain Networks <em>Choose MCA</em></h2>
          </L12Reveal>
          <div className="l12-why">
            {L12_WHY.map(([t, d], i) => (
              <L12Reveal key={t} className="l12-why__card" delay={(i % 3) * 90}>
                <div className="l12-why__title">{t}</div>
                <p>{d}</p>
              </L12Reveal>
            ))}
            <L12Reveal className="l12-why__card" delay={90}>
              <div className="l12-why__title" style={{ marginTop: "auto" }}>Ready to Map Your Network's Growth System?</div>
              <p>Every engagement is built around your architecture, stage and ecosystem priorities.</p>
              <div><Button variant="teal" onClick={l12Call} withArrow>Book a Strategy Call</Button></div>
            </L12Reveal>
          </div>
        </div>
      </section>

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

      <section className="l12-cta" data-screen-label="Final CTA">
        <div className="l12-cta__glow" aria-hidden="true"></div>
        <div className="container">
          <span className="l12-eyebrow" style={{ position: "relative" }}>Work With MCA</span>
          <h2 className="l12-cta__title">Building the Next Layer of <em>Blockchain Infrastructure?</em></h2>
          <p className="l12-cta__sub">MCA helps Layer 1 and Layer 2 teams build the strategy, ecosystem and market infrastructure required to move from technical innovation to sustainable adoption.</p>
          <div className="l12-cta__actions">
            <Button variant="teal" size="lg" onClick={l12Call} withArrow>Talk to MCA About Your Network</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>See Case Studies</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Layer1Layer2Page });