/* MCA — Industries: DeFi Protocols (bespoke, dark-only) */

const { useState: useDFI, useEffect: useDFIE, useRef: useDFIR } = React;

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

/* ---------- Line glyphs ---------- */
function DfiGlyph({ kind }) {
  const p = { stroke: "currentColor", strokeWidth: 1.3, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "strategy": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="17" r="12" {...p} /><circle cx="17" cy="17" r="6" {...p} /><circle cx="17" cy="17" r="1.6" fill="currentColor" /><path d="M17 5V1M17 33v-4M5 17H1M33 17h-4" {...p} /></svg>);
    case "product": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M17 3l12 7v14l-12 7-12-7V10z" {...p} /><path d="M17 17l12-7M17 17L5 10M17 17v14" {...p} /></svg>);
    case "token": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="13" cy="17" r="10" {...p} /><circle cx="21" cy="17" r="10" {...p} /></svg>);
    case "tge": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M5 29L23 11" {...p} /><path d="M20 6l8 8-3 1-6 4-4-4 4-6z" {...p} /><path d="M5 23v6h6" {...p} /></svg>);
    case "bd": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M4 20l6-6 5 3 6-7 5 4" {...p} /><circle cx="10" cy="14" r="1.4" fill="currentColor" /><circle cx="21" cy="10" r="1.4" fill="currentColor" /><path d="M4 27h26" {...p} /></svg>);
    case "eco": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="8" r="3.4" {...p} /><circle cx="7" cy="24" r="3.4" {...p} /><circle cx="27" cy="24" r="3.4" {...p} /><path d="M14.5 10.5L9 21M19.5 10.5L25 21M10.4 24h13.2" {...p} /></svg>);
    case "globe": return (<svg width="34" height="34" viewBox="0 0 34 34"><circle cx="17" cy="17" r="12" {...p} /><path d="M5 17h24M17 5c4 3.4 5.8 7.4 5.8 12S21 25.6 17 29c-4-3.4-5.8-7.4-5.8-12S13 8.4 17 5z" {...p} /></svg>);
    case "comms": return (<svg width="34" height="34" viewBox="0 0 34 34"><path d="M4 8h20v14H14l-6 6v-6H4z" {...p} /><path d="M9 13h10M9 17h6" {...p} /><path d="M28 12v6M30.5 10v10" {...p} /></svg>);
    default: return null;
  }
}

/* ---------- Hero visual: liquidity network ---------- */
function DfiNetwork() {
  const rings = [
    { r: 120, dur: 20, dots: 2, o: 0.55 },
    { r: 190, dur: 32, dots: 3, o: 0.42 },
    { r: 260, dur: 46, dots: 3, o: 0.3 },
  ];
  return (
    <svg className="dfi-flow" viewBox="-320 -300 640 600" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <defs>
        <radialGradient id="dfi-core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(64,224,224,0.9)" />
          <stop offset="45%" stopColor="rgba(0,180,190,0.3)" />
          <stop offset="100%" stopColor="rgba(0,165,161,0)" />
        </radialGradient>
      </defs>
      <circle cx="0" cy="0" r="100" fill="url(#dfi-core)" />
      {rings.map((ring, i) => (
        <g key={i} style={{ opacity: ring.o }}>
          <circle cx="0" cy="0" r={ring.r} fill="none" stroke="rgba(120,220,230,0.32)" strokeWidth="1" />
          <g className="dfi-flow__spin" style={{ animationDuration: ring.dur + "s", animationDirection: i % 2 === 0 ? "normal" : "reverse" }}>
            {Array.from({ length: ring.dots }).map((_, k) => {
              const a = (k / ring.dots) * Math.PI * 2;
              return (
                <g key={k} transform={`translate(${Math.cos(a) * ring.r}, ${Math.sin(a) * ring.r})`}>
                  <circle r="13" fill="rgba(64,224,224,0.2)" />
                  <circle r="4" fill="#5FF0F0" />
                </g>
              );
            })}
          </g>
        </g>
      ))}
      <g fontFamily="ui-monospace, monospace" fontSize="10.5" letterSpacing="0.16em" fill="rgba(170,230,240,0.55)">
        <text x="0" y="-278" textAnchor="middle">LIQUIDITY</text>
        <text x="272" y="4" textAnchor="start">USERS</text>
        <text x="0" y="290" textAnchor="middle">PARTNERS</text>
        <text x="-272" y="4" textAnchor="end">BUILDERS</text>
      </g>
      <g>
        <circle cx="0" cy="0" r="5" fill="#00A5A1" />
        <circle cx="0" cy="0" r="12" fill="none" stroke="rgba(0,165,161,0.45)" strokeWidth="1">
          <animate attributeName="r" from="12" to="36" dur="2.6s" repeatCount="indefinite" />
          <animate attributeName="opacity" from="0.7" to="0" dur="2.6s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}

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

/* ---------- Page ---------- */
function DefiProtocolsPage({ navigate }) {
  const services = [
    { icon: "strategy", title: "Growth Strategy", desc: "Every engagement begins with your business, product, market, competitors, and long-term objectives. We build strategic roadmaps that align commercial priorities, product development, partnerships, and measurable outcomes: sustainable growth systems, not awareness campaigns." },
    { icon: "product", title: "Product Strategy", desc: "Technology only creates value when customers understand why it matters. We define product positioning, refine messaging, identify target markets, strengthen product-market fit, and communicate clear differentiation in competitive markets." },
    { icon: "token", title: "Tokenomics Consulting", desc: "Token utility, governance design, incentive mechanisms, treasury strategy, emissions planning, and staking models. Economic structures that reinforce adoption and support long-term protocol growth." },
    { icon: "tge", title: "TGE Support", desc: "A Token Generation Event is one milestone in a much larger journey. We support the full lifecycle: strategic preparation, investor readiness, ecosystem communications, exchange coordination, launch planning, and post-launch growth." },
    { icon: "bd", title: "Business Development", desc: "Strategic relationships create sustainable distribution. We build meaningful partnerships across L1 and L2 ecosystems, infrastructure providers, wallets, custodians, institutions, exchanges, accelerators, and complementary protocols." },
    { icon: "eco", title: "Ecosystem Growth", desc: "Strong ecosystems generate stronger network effects. We drive expansion through partnership development, integrations, developer engagement, community initiatives, and ecosystem activation programs." },
    { icon: "globe", title: "Regional & Global Expansion", desc: "Adoption is global, but every market has unique dynamics. We help you prioritise regions, establish local partnerships, and adapt go-to-market across North America, Europe, the Middle East, Asia, and Latin America." },
    { icon: "comms", title: "Marketing & Communications", desc: "We develop integrated marketing campaigns that support product launches, ecosystem growth, and user adoption through media relations, PR, KOL and ambassador programs, influencer partnerships, thought leadership, content strategy, and high impact communications." },
  ];
  const clients = [
    ["Lender Labs", "Commercial strategy, market positioning, partnership development, and ecosystem expansion within decentralized lending."],
    ["SharkyFi", "Growth strategy, strategic partnerships, ecosystem expansion, and business development within the Solana DeFi ecosystem."],
    ["Clone Protocol", "Strategic consulting focused on product positioning, commercial growth, ecosystem development, and partnership strategy."],
    ["Texture Finance", "Growth initiatives across product positioning, business development, and ecosystem expansion in liquid staking and structured finance."],
    ["Nodo", "Commercial strategy, partnership development, market expansion, and long-term business growth with the founding team."],
    ["Pool Party", "Product positioning, community growth initiatives, ecosystem engagement, and protocol adoption."],
    ["Orbit", "Strategic advisory across commercial expansion, business development, and ecosystem partnerships."],
    ["Nukem", "Strategic positioning, commercial growth planning, and ecosystem development."],
    ["Kaio", "Growth consulting, product strategy, go-to-market planning, partnership development, and ecosystem expansion."],
    ["DefiTuna", "Business development, strategic partnerships, commercial growth, and ecosystem expansion across Solana."],
    ["Stader Labs", "Strategic growth initiatives, ecosystem partnerships, and expansion for one of the industry's leading staking infrastructure providers."],
    ["Portals", "Commercial strategy, partnership development, product positioning, and ecosystem growth."],
  ];
  const clientLogos = { "Lender Labs": "/assets/partners/37.png", "SharkyFi": "/assets/partners/48.png", "Texture Finance": "/assets/partners/32.png", "Pool Party": "/assets/partners/36.png", "Orbit": "/assets/partners/45.png", "Kaio": "/assets/partners/18.png", "DefiTuna": "/assets/partners/12.png", "Stader Labs": "/assets/partners/15.png", "Portals": "/assets/partners/49.png", "Nukem": null, "Clone Protocol": null, "Nodo": null };
  const caps = ["Growth Consulting", "Product Strategy", "Tokenomics Consulting", "TGE Support", "Business Development", "Strategic Partnerships", "Ecosystem Growth", "Regional Expansion", "Go-to-Market Strategy", "Founder Advisory"];
  const faqs = [
    ["What is DeFi growth consulting?", "DeFi growth consulting helps blockchain companies develop sustainable strategies across product positioning, tokenomics, partnerships, business development, ecosystem expansion, go-to-market planning, and long-term commercial growth."],
    ["When should a DeFi company engage MCA?", "The greatest value is often created before major milestones such as fundraising, product launches, ecosystem expansion, Token Generation Events, or international market entry. We also work with established protocols looking to accelerate adoption, strengthen partnerships, or unlock new growth opportunities."],
    ["Do you only support projects launching tokens?", "No. We work with companies throughout every stage of growth, from early product development and market validation to post-launch expansion and ecosystem maturity."],
    ["Does MCA provide execution as well as consulting?", "Yes. Our engagements combine strategic advisory with hands-on support across partnerships, business development, go-to-market execution, ecosystem growth, product strategy, and regional expansion."],
    ["What kinds of DeFi protocols do you work with?", "Teams from pre-launch through mature governance, across lending, DEXs, stables, LSTs, RWAs, and structured products. The common thread is a team that wants the numbers underneath the narrative to be real."],
  ];
  const [open, setOpen] = useDFI(0);

  return (
    <div className="dfi-page">
      <section className="dfi-hero" data-screen-label="DeFi Protocols — Hero">
        <div className="dfi-hero__bg" aria-hidden="true">
          <div className="dfi-hero__blob dfi-hero__blob--teal"></div>
          <div className="dfi-hero__blob dfi-hero__blob--deep"></div>
          <div className="dfi-hero__grain"></div>
        </div>
        <div className="container dfi-hero__inner">
          <div className="dfi-hero__copy">
            <span className="dfi-eyebrow">DeFi Protocols</span>
            <h1 className="dfi-hero__title">Strategic Growth for DeFi Protocols Building <em>Onchain Finance.</em></h1>
            <p className="dfi-hero__sub">Long-term success depends on product strategy, sustainable tokenomics, ecosystem partnerships, market positioning, institutional readiness, and the ability to continuously acquire users, developers, liquidity, and strategic partners.</p>
            <p className="dfi-hero__sub">MCA combines strategy with execution, enabling ambitious DeFi protocols to strengthen adoption, expand their ecosystem, and establish long-term market leadership.</p>
            <div className="dfi-hero__ctas">
              <Button variant="teal" size="lg" onClick={dfiCall} withArrow>Schedule a Strategy Call</Button>
            </div>
          </div>
          <div className="dfi-hero__visual"><DfiNetwork /></div>
        </div>
      </section>

      <section className="dfi-sec" data-screen-label="Next Phase">
        <div className="container">
          <div className="dfi-phase__grid">
            <DfiReveal className="dfi-phase__copy">
              <span className="dfi-eyebrow">Growth Consulting for Every DeFi Business Model</span>
              <h2 className="dfi-h2">Expertise Across the <em>DeFi Ecosystem</em></h2>
              <p>From consumer DeFi applications to institutional financial infrastructure, every segment of decentralized finance presents unique growth opportunities and commercial challenges.</p>
              <p>MCA partners with founders across the DeFi ecosystem, helping protocols build scalable growth strategies, strengthen market positioning, develop strategic partnerships, and accelerate adoption.</p>
            </DfiReveal>
            <DfiReveal className="dfi-phase__aside" delay={120}>
              <div>
                <div className="dfi-phase__aside-label">Where we operate</div>
                <div className="dfi-phase__tags">
                  {["DEXs", "Lending Markets", "Liquid Staking", "Real-World Assets", "Derivatives", "Structured Finance", "Prediction Markets", "Institutional Infrastructure"].map((t, i) => <span key={t} className="dfi-tag" style={{ transitionDelay: `${i * 40}ms` }}>{t}</span>)}
                </div>
              </div>
            </DfiReveal>
          </div>
        </div>
      </section>

      <section className="dfi-sec dfi-chal" data-screen-label="Challenges">
        <div className="container">
          <div className="dfi-chal__grid">
            <DfiReveal>
              <span className="dfi-eyebrow">The Problem</span>
              <h2 className="dfi-h2">Technically Exceptional. <em>Commercially Stuck.</em></h2>
              <p className="dfi-lede">Many technically exceptional projects struggle to achieve meaningful adoption. These are not isolated marketing challenges. They are business growth challenges that require strategic thinking across every function of the company.</p>
              <div className="dfi-chal__note"><p style={{ margin: 0 }}><strong>MCA addresses the commercial challenges</strong> that prevent technically exceptional protocols from becoming market leaders, helping founders build scalable businesses through strategic growth consulting, business development, tokenomics, ecosystem expansion, and global market execution.</p><div style={{ marginTop: 20 }}><Button variant="teal" onClick={dfiCall} withArrow>Talk to Our Experts</Button></div></div>
            </DfiReveal>
            <DfiReveal delay={120}>
              <ul className="dfi-chal__list">
                <li>Innovative products launch without clearly communicating their value proposition.</li>
                <li>Sophisticated token models fail to support long-term participation.</li>
                <li>Business development becomes reactive instead of strategic.</li>
                <li>Communities lose momentum after launch.</li>
                <li>Institutional opportunities remain difficult to unlock.</li>
                <li>Expansion into new markets happens without local expertise or ecosystem relationships.</li>
              </ul>
            </DfiReveal>
          </div>
        </div>
      </section>

      <section className="dfi-sec" data-screen-label="Services">
        <div className="container">
          <DfiReveal className="dfi-sec__head">
            <span className="dfi-eyebrow">How We Help DeFi Companies Scale</span>
            <h2 className="dfi-h2">DeFi Growth Consulting<br /><em>End to End.</em></h2>
          </DfiReveal>
          <div className="dfi-svc__grid">
            {services.map((s, i) => (
              <DfiReveal key={s.title} className="dfi-svc__card" delay={(i % 3) * 90}>
                <div className="dfi-svc__icon"><DfiGlyph kind={s.icon} /></div>
                <div className="dfi-svc__title">{s.title}</div>
                <p className="dfi-svc__desc">{s.desc}</p>
              </DfiReveal>
            ))}
            <DfiReveal className="dfi-svc__card" delay={90} tag="div">
              <div className="dfi-svc__title" style={{ marginTop: "auto" }}>Ready to Map Your Growth System?</div>
              <p className="dfi-svc__desc">Every engagement is tailored to your objectives, business model, and stage of growth.</p>
              <div><Button variant="teal" onClick={dfiCall} withArrow>Schedule a Strategy Call</Button></div>
            </DfiReveal>
          </div>
        </div>
      </section>

      <section className="dfi-sec dfi-clients" data-screen-label="Protocols">
        <div className="container">
          <DfiReveal className="dfi-sec__head" style={{ marginBottom: 0 }}>
            <span className="dfi-eyebrow">Track Record</span>
            <h2 className="dfi-h2">Trusted by Leading <em>DeFi Protocols</em></h2>
            <p className="dfi-lede">MCA has partnered with DeFi companies across multiple blockchain ecosystems, supporting founders through product launches, Token Generation Events, ecosystem expansion, partnership development, and international growth.</p>
          </DfiReveal>
          <div className="dfi-clients__grid">
            {clients.map(([name, desc], i) => (
              <DfiReveal key={name} className="dfi-client" delay={(i % 3) * 80}>
                <div className="dfi-client__head">
                  {clientLogos[name] ? <img className="dfi-client__logo" src={clientLogos[name]} alt={name} /> : <><span className="dfi-client__mark">{name.split(" ").map((w) => w[0]).slice(0, 2).join("")}</span><span className="dfi-client__name">{name}</span></>}
                </div>
                <p className="dfi-client__desc">{desc}</p>
              </DfiReveal>
            ))}
          </div>
          <p className="dfi-clients__foot">Our experience spans lending, staking, structured finance, decentralized trading, real-world assets, and next-generation financial infrastructure.</p>
        </div>
      </section>

      <Metrics />

      <section className="dfi-sec" data-screen-label="Why MCA">
        <div className="container">
          <div className="dfi-why__grid">
            <DfiReveal className="dfi-why__copy">
              <span className="dfi-eyebrow">Why MCA</span>
              <h2 className="dfi-h2">A Strategy Built Around <em>Your Business</em></h2>
              <p>Every DeFi company follows a different growth journey. A lending protocol faces different commercial challenges than a decentralized exchange; a liquid staking platform requires a different strategy than an institutional RWA platform.</p>
              <p>MCA builds bespoke growth strategies that reflect each client's unique business model, market position, ecosystem, tokenomics, and long term vision.</p>
              <p><strong>The result:</strong> stronger commercial execution, better strategic decisions, and sustainable business growth beyond the next milestone.</p>
            </DfiReveal>
            <DfiReveal className="dfi-why__panel" delay={120}>
              <h3 className="dfi-why__panel-title">One Integrated Model</h3>
              <p className="dfi-why__panel-sub">Our team works directly with founders and leadership teams, combining expertise across:</p>
              <ul className="dfi-caps">{caps.map((c) => <li key={c}>{c}</li>)}</ul>
              <p className="dfi-why__panel-note">Every growth initiative supports broader business objectives, creating stronger companies rather than isolated marketing campaigns.</p>
            </DfiReveal>
          </div>
        </div>
      </section>

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

      <section className="dfi-cta" data-screen-label="Final CTA">
        <div className="dfi-cta__glow" aria-hidden="true"></div>
        <div className="container">
          <span className="dfi-eyebrow" style={{ position: "relative" }}>Work With MCA</span>
          <h2 className="dfi-cta__title">Build the Next Generation of <em>DeFi.</em></h2>
          <p className="dfi-cta__sub">Scale your DeFi business with expert growth strategy, TGE support, product positioning, ecosystem expansion, and global market execution. Build sustainable growth with MCA.</p>
          <div className="dfi-cta__actions">
            <Button variant="teal" size="lg" onClick={dfiCall} withArrow>Schedule a Strategy Call</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>See Case Studies</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { DefiProtocolsPage });