/* MCA, Homepage sections */

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Hero({ navigate }) {
  const videoRef = useRefH(null);
  const [isMobile, setIsMobile] = useStateH(
    typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
  );
  const [ended, setEnded] = useStateH(false);

  useEffectH(() => {
    const mq = window.matchMedia("(max-width: 768px)");
    const onChange = (e) => setIsMobile(e.matches);
    if (mq.addEventListener) mq.addEventListener("change", onChange);else
    mq.addListener(onChange);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", onChange);else
      mq.removeListener(onChange);
    };
  }, []);

  // Reload when source switches so the new source actually plays once
  useEffectH(() => {
    setEnded(false);
    if (videoRef.current) {
      videoRef.current.load();
      const p = videoRef.current.play();
      if (p && p.catch) p.catch(() => {});
    }
  }, [isMobile]);

  const handleScroll = () => {
    const next = document.querySelector(".hero-video + section, #services");
    if (next) window.scrollTo({ top: next.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });else
    window.scrollTo({ top: window.innerHeight, behavior: "smooth" });
  };

  return (
    <section className={"hero-video" + (ended ? " hero-video--ended" : "")}>
      <video
        ref={videoRef}
        className="hero-video__el"
        autoPlay
        muted
        loop={false}
        playsInline
        preload="auto"
        disablePictureInPicture
        onCanPlay={(e) => { const p = e.currentTarget.play(); if (p && p.catch) p.catch(() => {}); }}
        onEnded={() => setEnded(true)}
        key={isMobile ? "m" : "d"}
        src={isMobile ? "assets/hero-mobile.mp4" : "assets/hero-desktop.mp4"} />
      
      <button
        type="button"
        className="hero-video__scroll"
        onClick={handleScroll}
        aria-label="Scroll down">
        
        <span className="hero-video__scroll-arrow" aria-hidden="true">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M12 5v14M5 12l7 7 7-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </button>
    </section>);

}

function Services({ navigate }) {
  const items = [
  {
    num: "01",
    title: "AI Solutions",
    desc: "We design and deploy AI-driven solutions across sales, marketing, operations, and finance, streamlining workflows, reducing costs, and enabling data-driven growth with intelligent efficiency.",
    to: "/services/ai-solutions",
    video: "assets/svc-growth.mp4"
  },
  {
    num: "02",
    title: "Growth & Scale",
    desc: "We position companies for scalable growth across user acquisition, product strategy, brand awareness, data-driven decision-making, and strategic partnerships.",
    to: "/services/growth-scale",
    video: "assets/svc-ma.mp4"
  },
  {
    num: "03",
    title: "M&A & Capital Markets",
    desc: "We help companies prepare for capital formation, strategic partnerships, acquisitions, and long-term enterprise value creation.",
    to: null,
    video: "assets/svc-ai.mp4"
  }];

  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div className="section-head__left">
            <span className="eyebrow">STRATEGIC GROWTH FOR INNOVATIVE COMPANIES</span>
            <h2 className="h2" style={{ marginTop: 16 }}>
              Guiding Emerging Technology Companies to <span style={{ color: "#00A5A1" }}>Scale, Grow, and Lead.</span>
            </h2>
            <p className="lede">
              MCA combines strategy, execution, and deep market expertise to help companies move
              from vision to traction, from traction to scale, and from scale to long-term value.
            </p>
          </div>
        </div>

        <div className="svc-grid">
          {items.map((it) =>
          <div key={it.num} className={"svc-card" + (it.to ? "" : " svc-card--static")} onClick={it.to ? () => navigate(it.to) : undefined}>
              <div className="svc-card__media">
                <video src={it.video} autoPlay loop muted playsInline preload="auto" disablePictureInPicture></video>
                <div className="svc-card__num" style={{ opacity: "0" }}>{it.num}</div>
              </div>
              <div className="svc-card__title">{it.title}</div>
              <div className="svc-card__desc">{it.desc}</div>
              {it.to &&
              <div className="svc-card__cta">
                Learn more <Arrow />
              </div>
              }
            </div>
          )}
        </div>
      </div>
    </section>);

}

function About() {
  // Curated set of 43 partner logos, uniform sizing, lighter PNGs.
  const logoIds = [
    10,11,12,13,14,15,16,17,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
  ];
  const logoFiles = logoIds.map((n) => `assets/partners-v2/${n}.png`);

  return (
    <section className="section section--tight" id="about">
      <div className="container">
        <div className="about-centered">
          <span className="eyebrow" style={{ display: "block", marginBottom: 20 }}>About MCA</span>
          <h2 className="about-centered__title">
            A Global Advisory, Growth &amp; <span style={{ color: "#00A5A1" }}>Capital Markets Firm</span>
          </h2>
          <p className="about-centered__sub">
            Delivering specialized expertise across capital markets, ecosystem expansion, investor communications, and market positioning.
          </p>
        </div>

        <div className="trusted trusted--about">
          <div className="trusted__head">
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>TRUSTED BY</span>
            <h3 className="h3 trusted__title">Leading Technology Companies.</h3>
          </div>
          <div className="logo-wall">
            <LogoRow items={logoFiles} reverse={false} duration={120} />
          </div>
        </div>
      </div>
    </section>);

}

/* Parse a metric string like "$50B+", "5,000+", "10M+" into parts so we can
   animate the numeric portion while preserving prefix/suffix/format. */
function parseMetric(str) {
  const plus = /\+$/.test(str);
  let core = str.replace(/\+$/, "").trim();
  const prefix = core.startsWith("$") ? "$" : "";
  if (prefix) core = core.slice(1);
  // Trailing unit char (B/M/K/k) gets pulled out for nicer animation
  const unitMatch = core.match(/([BMKk])$/);
  const unit = unitMatch ? unitMatch[1].toUpperCase() : "";
  if (unit) core = core.slice(0, -1);
  const hasComma = core.includes(",");
  const value = Number(core.replace(/,/g, ""));
  return { prefix, value, unit, plus, hasComma };
}

function formatMetric(parts, current) {
  const { prefix, unit, plus, hasComma } = parts;
  // Round during animation; show without decimals (matches design)
  let n = Math.round(current);
  const numStr = hasComma ? n.toLocaleString("en-US") : String(n);
  return { head: `${prefix}${numStr}${unit}`, plus };
}

function RollingDigit({ digit, delay = 0, duration = 1200 }) {
  // 0–9 stacked column; translate so target digit lands at 0.
  // We extend the column by spinning past 10 full rotations for drama, then land.
  const ref = React.useRef(null);
  const [armed, setArmed] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) {
      ref.current.style.transform = `translateY(-${digit * 10}%)`;
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {setArmed(true);io.disconnect();}
      });
    }, { threshold: 0.35 });
    io.observe(ref.current.parentElement);
    return () => io.disconnect();
  }, [digit]);

  // Render 0..9 then 0..9 again then land on digit. We just animate to digit-row.
  const rows = [];
  for (let i = 0; i < 10; i++) rows.push(<span key={i}>{i}</span>);

  const style = {
    transform: armed ? `translateY(-${digit * 10}%)` : `translateY(0)`,
    transition: `transform ${duration}ms cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms`
  };

  return (
    <span className="rolldigit">
      <span className="rolldigit__col" ref={ref} style={style}>{rows}</span>
    </span>);

}

function RollingMetric({ value }) {
  const parts = React.useMemo(() => parseMetric(value), [value]);
  // Build the displayed string (with commas), then render each char.
  // Digits become RollingDigit; non-digits render as static spans.
  const numStr = parts.hasComma ? parts.value.toLocaleString("en-US") : String(parts.value);
  let digitIdx = 0;
  const totalDigits = (numStr.match(/\d/g) || []).length;
  return (
    <span className="metric__num-anim">
      {parts.prefix && <span className="metric__pre">{parts.prefix}</span>}
      <span className="metric__digits">
        {numStr.split("").map((ch, i) => {
          if (/\d/.test(ch)) {
            const d = Number(ch);
            // stagger from left-most digit; magnitude order
            const delay = digitIdx * 80;
            const duration = 900 + digitIdx * 140;
            digitIdx++;
            return <RollingDigit key={i} digit={d} delay={delay} duration={duration} />;
          }
          return <span key={i} className="metric__sep">{ch}</span>;
        })}
      </span>
      {parts.unit && <span className="metric__unit">{parts.unit}</span>}
      {parts.plus && <em>+</em>}
    </span>);

}

function AnimatedMetric({ value }) {
  const parts = React.useMemo(() => parseMetric(value), [value]);
  const [current, setCurrent] = React.useState(0);
  const ref = React.useRef(null);
  const startedRef = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) {setCurrent(parts.value);return;}

    const start = () => {
      if (startedRef.current) return;
      startedRef.current = true;
      const target = parts.value;
      const dur = 1400; // ms
      const t0 = performance.now();
      const tick = (now) => {
        const t = Math.min(1, (now - t0) / dur);
        // easeOutCubic
        const eased = 1 - Math.pow(1 - t, 3);
        setCurrent(target * eased);
        if (t < 1) requestAnimationFrame(tick);else
        setCurrent(target);
      };
      requestAnimationFrame(tick);
    };

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {start();io.disconnect();}});
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, [parts]);

  const out = formatMetric(parts, current);
  return (
    <span ref={ref} className="metric__num-anim">
      <span>{out.head}</span>
      {out.plus && <em>+</em>}
    </span>);

}

function LogoRow({ items, reverse = false, duration = 60 }) {
  // CSS-driven marquee, runs on the compositor for buttery 100% smoothness.
  // We duplicate the items once and translate by -50% so the seam is invisible.
  const loop = [...items, ...items];
  return (
    <div className="logo-row">
      <div
        className={`logo-row__track ${reverse ? "logo-row__track--reverse" : ""}`}
        style={{ animationDuration: `${duration}s` }}>
        {loop.map((src, i) =>
        <span key={i} className="logo-row__item" aria-hidden={i >= items.length ? "true" : undefined}>
            <img src={src} alt="" loading="eager" decoding="async" draggable="false" />
          </span>
        )}
      </div>
    </div>);

}

function Metrics() {
  const metrics = [
  { num: "$50B+", label: "Peak Enterprise Value Created for Clients" },
  { num: "80+", label: "Successful Client Engagements" },
  { num: "10M+", label: "Client Social Media Growth" },
  { num: "$150M+", label: "Total Capital Raised" },
  { num: "5M+", label: "Community Growth" },
  { num: "5,000+", label: "KOLs, Ambassadors & Influencers" }];

  return (
    <section className="section section--tight results-section">
      <div className="container">
        <div className="metrics metrics--flush">
          <div className="metrics__head">
            <div>
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)", display: "block", marginBottom: 16 }}>BUILT FOR SCALE

              </span>
              <h2 className="h2 metrics__title">
                Strategic Execution<br /><span style={{ color: "#00A5A1" }}>with Measurable Impact.</span>
              </h2>
            </div>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "rgba(255,255,255,0.5)", opacity: "0" }}>
              UPDATED Q1 ’26
            </span>
          </div>
          <div className="metrics__grid">
            {metrics.map((m, i) =>
            <div key={i} className="metric">
                <div className="metric__num">
                  <RollingMetric value={m.num} />
                </div>
                <div className="metric__label">{m.label}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function CaseStudies({ navigate, variant }) {
  const isReports = variant === "reports";
  const cases = [
  {
    slug: "momentum-no1-dex-sui",
    tag: "MOMENTUM · DEX · SUI",
    title: "Rebrand & Launching the #1 DEX on Sui",
    desc: "Strategic rebrand and ecosystem expansion on Sui, driving remarkable growth in TVL and user adoption.",
    metric: "+$460M TVL · 90 DAYS",
    image: "assets/case-studies/momentum.png",
    accent: "#2A6FDB"
  },
  {
    slug: "pyth-token-generation-event",
    tag: "PYTH · TGE · ORACLE",
    title: "Driving Pyth's Token Generation Success",
    desc: "Targeted marketing, ambassador program, and active community growth across Discord & Telegram.",
    metric: "TGE EXECUTION",
    image: "assets/case-studies/pyth.png",
    accent: "#D946C8"
  },
  {
    slug: "wormhole-multichain-visibility",
    tag: "WORMHOLE · INTEROP",
    title: "Cross-Chain Visibility & Ecosystem Growth",
    desc: "Positioning Wormhole at the center of multichain narrative: partnerships, integrations, and developer reach.",
    metric: "MULTI-CHAIN",
    image: "assets/case-studies/wormhole.png",
    accent: "#3FBFF0"
  },
  {
    slug: "linera-hyperconnected-l1",
    tag: "LINERA · LAYER 1",
    title: "Scaling the First Hyper-Connected L1",
    desc: "End-to-end strategic guidance across market positioning, ecosystem development, and community growth.",
    metric: "GTM · 12 MO",
    image: "assets/case-studies/linera.png",
    accent: "#E26A3A"
  },
  {
    slug: "kaio-institutional-rwa",
    tag: "KAIO · INSTITUTIONAL · RWA",
    title: "Scaling Institutional RWA Infrastructure",
    desc: "Leveraging KAIO's foundation, backed by global institutions, MCA enabled clearer capital formation pathways, stronger institutional narrative, and expanded ecosystem visibility across the RWA landscape.",
    metric: "INSTITUTIONAL GROWTH",
    image: "assets/case-studies/kaio.png",
    accent: "#F0C36D"
  }];

  const loop = [...cases, ...cases];
  const trackRef = useRefH(null);
  const speedRef = useRefH(50);
  const targetRef = useRefH(50);
  const xRef = useRefH(0);

  useEffectH(() => {
    let raf;
    let last = performance.now();
    const step = (now) => {
      const dt = Math.min(0.05, (now - last) / 1000);
      last = now;
      speedRef.current += (targetRef.current - speedRef.current) * Math.min(1, dt * 4);
      xRef.current -= speedRef.current * dt;
      const el = trackRef.current;
      if (el) {
        const half = el.scrollWidth / 2;
        if (half > 0) {
          if (xRef.current <= -half) xRef.current += half;
          if (xRef.current > 0) xRef.current -= half;
          el.style.transform = `translate3d(${xRef.current}px, 0, 0)`;
        }
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, []);

  const onEnter = () => {targetRef.current = 14;};
  const onLeave = () => {targetRef.current = 50;};

  return (
    <section className={`section section--tight insights-sec${isReports ? " insights-sec--reports" : ""}`} id="case-studies">
      {!isReports && (
        <div className="container">
          <div className="section-head">
            <div className="section-head__left">
              <span className="eyebrow">STRATEGIC CASE STUDIES</span>
              <h2 className="h2" style={{ marginTop: 16 }}>MCA Stepped Into Critical Moments and Turned Them Into Sustainable Growth.</h2>
            </div>
          </div>
        </div>
      )}

      <div className="insights-marquee" onMouseEnter={onEnter} onMouseLeave={onLeave}>
        <div className="insights-marquee__track" ref={trackRef}>
          {loop.map((c, i) =>
          <article key={i} className="ins-card" style={{ "--accent": c.accent, cursor: c.slug ? "pointer" : "default" }} onClick={() => c.slug && navigate("/case-studies/" + c.slug)}>
              <div className="ins-card__media">
                <img src={c.image} alt={c.tag} loading="lazy" />
              </div>
              <div className="ins-card__body">
                <div className="ins-card__meta" style={{ color: c.accent }}>{c.tag}</div>
                <h3 className="ins-card__title">{c.title}</h3>
                <div className="ins-card__metric">{c.metric}</div>
                <span className="ins-card__cta">
                  Read case
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                    <polyline points="12 5 19 12 12 19"></polyline>
                  </svg>
                </span>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function Insights({ navigate }) {
  const articles = [
  { slug: "ai-agents-agentic-workflows", title: "Introduction to AI Agents & Agentic Workflows", read: "5 MIN READ", tag: "AI · AGENTS", desc: "How agentic workflows are reshaping software, the new orchestration layer for autonomous, goal-oriented systems.", cover: "assets/blog/light-streaks.jpg", accent: "#00A5A1" },
  { slug: "crypto-m-and-a-trends-2026", title: "Crypto M&A Trends in 2026 (What Buyers Are Looking For)", read: "7 MIN READ", tag: "M&A · MARKETS", desc: "The deal patterns, valuation anchors, and structural shifts defining strategic acquisitions in this cycle.", cover: "assets/blog/station-crowd.jpg", accent: "#2A6FDB" },
  { slug: "rewiring-smb-operations-for-ma", title: "How AI is Rewiring SMB Operations for the Next Wave of M&A", read: "5 MIN READ", tag: "AI · OPERATIONS", desc: "Operating leverage from AI is reshaping middle-market exits, what acquirers now expect to see at diligence.", cover: "assets/blog/factory-cars.jpg", accent: "#E26A3A" },
  { slug: "understanding-ai-in-web3", title: "Understanding the Role of AI in Web3", read: "3 MIN READ", tag: "AI · WEB3", desc: "Where intelligence meets crypto rails, the practical use cases beyond the headlines.", cover: "assets/blog/cityscape.jpg", accent: "#D946C8" },
  { slug: "ai-x-crypto-agent-infrastructure", title: "AI x Crypto: The Rise of Agent Infrastructure", read: "6 MIN READ", tag: "INFRA · AGENTS", desc: "The stack emerging around autonomous agents, wallets, identity, and on-chain coordination primitives.", cover: "assets/blog/crane-fog.jpg", accent: "#3FBFF0" }];

  const go = (slug) => navigate(`/blog/${slug}`);

  return (
    <section className="section" id="insights">
      <div className="container">
        <div className="section-head">
          <div className="section-head__left">
            <span className="eyebrow">RESEARCH & INSIGHTS</span>
            <h2 className="h2" style={{ marginTop: 16 }}>
              Comprehensive Analysis on <span style={{ color: "#00A5A1" }}>Emerging Tech, AI, and Blockchain.</span>
            </h2>
          </div>
          <Button variant="secondary" onClick={() => navigate("/blog")} withArrow>Read all insights</Button>
        </div>

        <div className="cs-row">
          {articles.map((a, i) =>
          <article key={i} className="cs-tile" onClick={() => go(a.slug)} style={{ "--accent": a.accent }}>
              <div className="cs-tile__media">
                <img src={a.cover} alt={a.tag} loading="lazy" />
                <div className="cs-tile__media-overlay"></div>
              </div>
              <div className="cs-tile__body">
                <span className="cs-tile__tag">{a.tag}</span>
                <h3 className="cs-tile__title">{a.title}</h3>
                <p className="cs-tile__desc">{a.desc}</p>
                <div className="cs-tile__foot">
                  <span className="cs-tile__metric">{a.read}</span>
                  <span className="cs-tile__cta">
                    Read article
                    <svg width="12" height="12" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                      <path d="M4 10L10 4M10 4H5M10 4V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function TeamLife() {
  const slides = [
  {
    tag: "DUBAI · TOKEN2049",
    title: "On-stage at Token2049: capital, narrative, and the next cycle.",
    sub: "Founders, exchanges, and allocators in the same room. We translate the conversation into deal flow.",
    src: "assets/team-life/01.jpg"
  },
  {
    tag: "NEW YORK · CAPITAL FORUM",
    title: "Closed-door capital introductions for founders ready to raise.",
    sub: "Boardrooms, family offices, and strategic LPs, MCA shows up where allocation decisions are made.",
    src: "assets/team-life/02.jpg"
  },
  {
    tag: "SEOUL · KBW PANEL",
    title: "Asia ecosystem building: operators, builders, partners.",
    sub: "On the ground across APAC, opening the doors that quietly compound enterprise value.",
    src: "assets/team-life/03.jpg"
  },
  {
    tag: "LISBON · FOUNDERS DINNER",
    title: "Strategy that travels, wherever our founders need us.",
    sub: "Late-night working sessions, side-event roundtables, and the unglamorous prep behind every clean launch.",
    src: "assets/team-life/04.jpg"
  },
  {
    tag: "SINGAPORE · MAIN STAGE",
    title: "Narrative work in front of the audiences that matter.",
    sub: "We don't just write the story. We help our founders defend it in front of the rooms that decide.",
    src: "assets/team-life/05.jpg"
  },
  {
    tag: "DENVER · ETHDENVER",
    title: "Builder-side execution, founder-side judgement.",
    sub: "Two sides of the same operating system, we work both, every cycle.",
    src: "assets/team-life/06.jpg"
  },
  {
    tag: "PARIS · ECOSYSTEM SUMMIT",
    title: "Cross-chain partnerships, signed in person.",
    sub: "Some deals close in a Notion doc. The ones that move enterprise value close in a hotel lobby at 1am.",
    src: "assets/team-life/07.jpg"
  },
  {
    tag: "GLOBAL · BOARDROOMS",
    title: "Board-level capital strategy, week in and week out.",
    sub: "From governance design to launch sequencing, the work that doesn't fit on a marketing deck.",
    src: "assets/team-life/08.jpg"
  }];


  const [i, setI] = useStateH(0);
  const [paused, setPaused] = useStateH(false);
  const len = slides.length;

  useEffectH(() => {
    if (paused) return;
    const t = setTimeout(() => setI((v) => (v + 1) % len), 4800);
    return () => clearTimeout(t);
  }, [i, paused, len]);

  const go = (n) => setI((n % len + len) % len);

  const prevExpLogos = [1, 2, 3, 4, 5].map((k) => `assets/prev-experience/${k}.png`);
  const prevLogosRef = useRefH(null);
  const prevXRef = useRefH(0);
  const prevSpeedRef = useRefH(28);
  const prevTargetRef = useRefH(28);

  useEffectH(() => {
    let raf;
    let last = performance.now();
    const step = (now) => {
      const dt = Math.min(0.05, (now - last) / 1000);
      last = now;
      prevSpeedRef.current += (prevTargetRef.current - prevSpeedRef.current) * Math.min(1, dt * 3);
      prevXRef.current -= prevSpeedRef.current * dt;
      const el = prevLogosRef.current;
      if (el) {
        const half = el.scrollWidth / 2;
        if (half > 0) {
          if (prevXRef.current <= -half) prevXRef.current += half;
          if (prevXRef.current > 0) prevXRef.current -= half;
          el.style.transform = `translate3d(${prevXRef.current.toFixed(2)}px, 0, 0)`;
        }
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section className="tl">
      <div className="tl__grid">
        <div className="tl__copy">
          <h2 className="tl__title">
            Global Team Built for <em style={{ color: "#00A5A1" }}>Emerging Technology Growth.</em>
          </h2>
          <p className="tl__lede">
            We help ambitious teams accelerate growth through strategic positioning,
            market expansion, partnership development, investor relations, and
            operational execution across global markets.
          </p>

          <div
            className="tl__prev"
            onMouseEnter={() => {prevTargetRef.current = 8;}}
            onMouseLeave={() => {prevTargetRef.current = 28;}}>
            <span className="eyebrow tl__prev-eyebrow">PREVIOUS PROFESSIONAL EXPERIENCE</span>
            <div className="tl__prev-stage">
              <div className="tl__prev-track" ref={prevLogosRef}>
                {[...prevExpLogos, ...prevExpLogos].map((src, idx) =>
                <div className="tl__prev-card" key={idx}>
                    <img src={src} alt="" loading={idx < 2 ? "eager" : "lazy"} decoding="async" />
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        <div
          className="tl__card"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}>
          
          <div className="tl__stage">
            {slides.map((s, idx) =>
            <img
              key={idx}
              src={s.src}
              alt=""
              loading={idx === 0 ? "eager" : "lazy"}
              className={"tl__img" + (idx === i ? " tl__img--active" : "")} />

            )}
            <div className="tl__shade" aria-hidden="true"></div>
            <div className="tl__chip">{slides[i].tag}</div>
            <button
              type="button"
              className="tl__play"
              onClick={() => setPaused((p) => !p)}
              aria-label={paused ? "Play slideshow" : "Pause slideshow"} style={{ opacity: "0" }}>
              
              {paused ?
              <svg width="14" height="14" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="currentColor" /></svg> :
              <svg width="14" height="14" viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" fill="currentColor" style={{ opacity: "0" }} /></svg>}
            </button>
          </div>

          <div className="tl__cap">
            <div className="tl__cap-title">{slides[i].title}</div>
            <div className="tl__cap-sub">{slides[i].sub}</div>
            <div className="tl__cap-foot">
              <div className="tl__dots" role="tablist">
                {slides.map((_, idx) =>
                <button
                  key={idx}
                  role="tab"
                  aria-selected={idx === i}
                  aria-label={"Slide " + (idx + 1)}
                  className={"tl__dot" + (idx === i ? " tl__dot--active" : "")}
                  onClick={() => go(idx)} />

                )}
              </div>
              <div className="tl__count"></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Globe() {
  const N = 12;
  const DUR = 22;
  const meridians = Array.from({ length: N }, (_, i) => i);
  const latitudes = [
    { cy: -75, rx: 66, ry: 8 },
    { cy: -45, rx: 89, ry: 14 },
    { cy: 45, rx: 89, ry: 14 },
    { cy: 75, rx: 66, ry: 8 }];
  // City pins positioned by approximate continent location on the visible face
  const pins = [
    { cx: -58, cy: -22, label: "North America" },
    { cx: -8, cy: -38, label: "Europe" },
    { cx: 18, cy: -10, label: "Dubai" },
    { cx: 48, cy: -28, label: "Asia" },
    { cx: 62, cy: 48, label: "Australia" }];

  return (
    <div className="globe-stage" aria-hidden="true">
      <div className="globe-stage__halo"></div>
      <svg viewBox="-120 -120 240 240" className="globe-stage__svg">
        <defs>
          <radialGradient id="sphereFill" cx="32%" cy="26%" r="78%">
            <stop offset="0%" stopColor="#1B3D52" stopOpacity="0.7" />
            <stop offset="55%" stopColor="#0C141C" stopOpacity="0.95" />
            <stop offset="100%" stopColor="#03070A" stopOpacity="1" />
          </radialGradient>
          <radialGradient id="sphereGloss" cx="28%" cy="20%" r="42%">
            <stop offset="0%" stopColor="#9DE6E2" stopOpacity="0.22" />
            <stop offset="100%" stopColor="#9DE6E2" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="rimShade" cx="50%" cy="50%" r="50%">
            <stop offset="78%" stopColor="#000" stopOpacity="0" />
            <stop offset="100%" stopColor="#000" stopOpacity="0.55" />
          </radialGradient>
        </defs>

        {/* Sphere fill */}
        <circle r="100" fill="url(#sphereFill)" />

        {/* Latitude rings */}
        {latitudes.map((l, i) =>
        <ellipse key={i} cx="0" cy={l.cy} rx={l.rx} ry={l.ry} className="globe-latitude" />
        )}
        {/* Equator */}
        <line x1="-100" y1="0" x2="100" y2="0" className="globe-equator" />

        {/* Animated meridians */}
        {meridians.map((i) =>
        <ellipse
          key={i}
          cx="0" cy="0"
          rx="100" ry="100"
          className="globe-meridian">

            <animate
            attributeName="rx"
            values="100;0;100"
            keyTimes="0;0.5;1"
            dur={`${DUR}s`}
            begin={`${-i * DUR / N}s`}
            repeatCount="indefinite" />

            <animate
            attributeName="stroke-opacity"
            values="0.55;0.15;0.55"
            keyTimes="0;0.5;1"
            dur={`${DUR}s`}
            begin={`${-i * DUR / N}s`}
            repeatCount="indefinite" />

          </ellipse>
        )}

        {/* Gloss highlight */}
        <circle r="100" fill="url(#sphereGloss)" pointerEvents="none" />
        {/* Rim shading for sphere depth */}
        <circle r="100" fill="url(#rimShade)" pointerEvents="none" />
        {/* Outer rim line */}
        <circle r="100" fill="none" stroke="rgba(255,255,255,0.34)" strokeWidth="0.8" />

        {/* Office pins */}
        {pins.map((p, i) =>
        <g key={i} transform={`translate(${p.cx} ${p.cy})`}>
            <circle r="2.6" className="globe-pin-pulse" style={{ animationDelay: `${i * 0.5}s` }} />
            <circle r="1.7" className="globe-pin" />
          </g>
        )}
      </svg>
    </div>);

}

function Team({ navigate }) {
  const leadership = [
  { name: "Niro", role: "Founder & CEO", initial: "N", photo: "assets/team/niro.png",
    linkedin: "https://www.linkedin.com/in/nirojant/", x: "https://x.com/cryptoape" },
  { name: "Ahash", role: "COO", initial: "A", photo: "assets/team/hash.png",
    linkedin: "https://www.linkedin.com/in/hasht/", x: "https://x.com/Northernapez" },
  { name: "Ali", role: "Head of BD", initial: "A", photo: "assets/team/ali.png",
    linkedin: "https://www.linkedin.com/in/ali-mertsoy-5ab912126/", x: "https://x.com/mrunique" }];

  const team = [
  { name: "Nish", role: "Senior Strategy Consultant", initial: "N", photo: "assets/team/nish.png",
    linkedin: "https://www.linkedin.com/in/nishanth-peter-a8428b369/", x: "https://x.com/lethirdweb" },
  { name: "Serena", role: "Senior Strategy Consultant", initial: "S", photo: "assets/team/serena.png",
    linkedin: "https://www.linkedin.com/in/serena-sung/", x: "https://x.com/swingy369" },
  { name: "Danylo", role: "Senior Strategy Consultant", initial: "D", photo: "assets/team/danylo.png",
    linkedin: "https://www.linkedin.com/in/danylokravets/", x: "https://x.com/CrazyD0k" },
  { name: "Patrick", role: "Growth & Strategy Manager ", initial: "P", photo: "assets/team/patrick.png",
    linkedin: "https://www.linkedin.com/in/patrick-rocchio/", x: "https://x.com/orangeape" },
  { name: "Ani", role: "Marketing Manager", initial: "A", photo: "assets/team/ani.png",
    linkedin: "https://www.linkedin.com/in/aniharutyunyann/", x: "https://x.com/Anii_belle" },
  { name: "Reuben", role: "Graphic Designer & Animator", initial: "R", photo: "assets/team/reuben.png",
    linkedin: "https://www.linkedin.com/in/reubenarmena/" },
  { name: "Mariel", role: "EA & Admin Manager", initial: "M", photo: "assets/team/mariel.png" },
  { name: "Edo", role: "BD & Strategy Consultant", initial: "E", photo: "assets/team/edo.png",
    linkedin: "https://www.linkedin.com/in/edoardo-l-495475289/", x: "https://x.com/eddi_rei" },
  { name: "Jayson", role: "BD & Strategy Consultant", initial: "J", photo: "assets/team/jayson.png" },
  { name: "Aisha", role: "BD & Strategy Consultant", initial: "A", photo: "assets/team/aisha.png" }];

  const experience = ["Bank of Montreal", "MorganFranklin Consulting", "Grant Thornton LLP", "Poly", "CPA Canada", "Fresenius Group", "Siegfried Group", "PVH", "KPMG", "CIBC", "Kimberly-Clark", "Kucoin", "Magic Eden", "Ford", "PWC", "Accenture"];

  return (
    <section className="section section--team-dark" id="team">
      <div className="container">
        <div className="globe-header">
          <div className="globe-header__copy">
            <span className="eyebrow">ABOUT US</span>
            <h2 className="globe-header__title">
              A global team, <em>built for the next cycle.</em>
            </h2>
            <p className="globe-header__sub">
              Head office in North America, with operators across Asia, Europe, the Middle East,
              and Australia, a truly international perspective on every project we help launch and scale.
            </p>
            <ul className="globe-header__cities">
              <li>North America</li>
              <li>Europe</li>
              <li>Dubai</li>
              <li>Asia</li>
              <li>Australia</li>
            </ul>
            <div style={{ marginTop: 36 }}>
              <Button variant="secondary" onClick={() => navigate("/team")} withArrow>Meet the team</Button>
            </div>
          </div>
          <Globe />
        </div>

        <div className="team-leadership">
          {leadership.map((m, i) =>
          <div key={i} className="member member--lead">
              <div className={`member__photo ${m.photo ? "member__photo--img" : ""}`}
            style={m.photoPos ? { "--photo-pos": m.photoPos } : undefined}>
                {m.photo ? <img src={m.photo} alt={m.name} style={{ objectFit: "cover" }} /> : m.initial}
              </div>
              <div className="member__info">
                <div>
                  <div className="member__name" style={{ fontSize: 18 }}>{m.name}</div>
                  <div className="member__role">{m.role}</div>
                </div>
                <MemberSocials linkedin={m.linkedin} x={m.x} name={m.name} />
              </div>
            </div>
          )}
        </div>

        <div className="team-grid team-grid--5">
          {team.map((m, i) =>
          <div key={i} className="member">
              <div className={`member__photo ${m.photo ? "member__photo--img" : ""}`}
            style={m.photoPos ? { "--photo-pos": m.photoPos } : undefined}>
                {m.photo ? <img src={m.photo} alt={m.name}
              style={m.photoZoom ? { transform: `scale(${m.photoZoom})`, transformOrigin: "center top" } : undefined} /> : m.initial}
              </div>
              <div className="member__info">
                <div>
                  <div className="member__name">{m.name}</div>
                  <div className="member__role">{m.role}</div>
                </div>
                <MemberSocials linkedin={m.linkedin} x={m.x} name={m.name} />
              </div>
            </div>
          )}
        </div>

        <div className="team-video">
          <video
            src="assets/team-loop.mp4"
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            disablePictureInPicture>
          </video>
        </div>

        <TeamLife />
      </div>
    </section>);

}

function Testimonials() {
  const items = [
  { quote: "MCA was instrumental in shaping Momentum's early marketing strategy and positioning. They didn't just execute campaigns, they helped us define our narrative, sharpen our messaging, and build credibility in a very competitive market.", name: "Vinny", title: "CSO of Momentum", initial: "V", logo: "src/assets/logos/MMT.png", company: "Momentum" },
  { quote: "We brought MultiChain Advisors in during Cabbage's zero-to-one phase on Solana. What stood out was their full-stack approach across SEO, content, paid marketing, positioning, customers, and acquisition.", name: "Raj", title: "CBO of Stader Labs", initial: "R", logo: "src/assets/logos/StaderLabs.png", company: "Stader Labs" },
  { quote: "MultiChain Advisors has proven themselves to be a thoroughly Web3 native team covering many important verticals that made a difference in one of our biggest campaigns and TGE.", name: "Ed", title: "Growth at PYTH Network", initial: "E", logo: "src/assets/logos/Pyth.png", company: "Pyth Network" },
  { quote: "Multichain has been a trusted advisor to Helio on the BD and strategy side of the business for over 12 months. The results speak for themselves.", name: "Stjin", title: "CEO of Helio", initial: "S", logo: "src/assets/logos/Helio.png", company: "Helio" },
  { quote: "MultiChain Advisors are one of the most professional consulting teams in the space. They came in prior to our TGE launch and played a pivotal role in getting more exposure.", name: "Justin", title: "Co-Founder of Zeus Network", initial: "J", logo: "src/assets/logos/Zeus.png", company: "Zeus Network" },
  { quote: "Been working with MultiChain since Solswipe's mint, the team did extremely well, getting Solswipe out of some misunderstood FUD, and bringing us to Spaces regularly.", name: "Jon", title: "CEO of Biptap", initial: "J", logo: "src/assets/logos/Biptap.png", company: "Biptap" }];

  const loop = [...items, ...items];
  const trackRef = useRefH(null);
  const speedRef = useRefH(40); // px/sec
  const targetRef = useRefH(40);
  const xRef = useRefH(0);

  useEffectH(() => {
    let raf;
    let last = performance.now();
    const step = (now) => {
      const dt = Math.min(0.05, (now - last) / 1000);
      last = now;
      // ease toward target speed for smooth slow/resume
      speedRef.current += (targetRef.current - speedRef.current) * Math.min(1, dt * 4);
      xRef.current -= speedRef.current * dt;
      const el = trackRef.current;
      if (el) {
        const half = el.scrollWidth / 2;
        if (half > 0) {
          // wrap seamlessly, content is duplicated so -half ≡ 0
          if (xRef.current <= -half) xRef.current += half;
          if (xRef.current > 0) xRef.current -= half;
          el.style.transform = `translate3d(${xRef.current}px, 0, 0)`;
        }
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, []);

  const onEnter = () => {targetRef.current = 12;};
  const onLeave = () => {targetRef.current = 40;};

  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 48, textAlign: "center" }}>
          <span className="eyebrow">OUR TESTIMONIALS</span>
          <h2 className="h2" style={{ marginTop: 16 }}>Backed by Results.</h2>
        </div>
      </div>
      <div className="t-marquee" onMouseEnter={onEnter} onMouseLeave={onLeave}>
        <div className="t-marquee__track" ref={trackRef}>
          {loop.map((c, i) =>
          <div key={i} className="t-card">
              <p className="t-card__quote">{c.quote}</p>
              <div className="t-card__author">
                <img className="t-card__logo" src={c.logo} alt={`${c.company} logo`} loading="lazy" />
                <div>
                  <div className="t-card__name">{c.name}</div>
                  <div className="t-card__title">{c.title}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FAQ({ omit }) {
  const allItems = [
  { q: "What does an emerging technology consulting company do?", a: "An emerging technology consulting company helps founders, startups, and enterprises navigate the strategic, technical, and capital decisions required to scale in fast-moving innovation markets, from positioning and product strategy to growth systems, partnerships, and fundraising." },
  { q: "What does MCA do as a Web3 consulting company?", a: "MCA operates as an extension of your founding team. We work across strategy, growth, AI systems, and capital markets, engaging at the moments that matter most: launches, restructures, capital raises, partnerships, and exits." },
  { q: "What services does MCA provide?", a: (
    <React.Fragment>
      We operate across three integrated practice areas:
      <br /><br />
      <strong>AI Solutions</strong><br />
      We design and implement AI systems across sales, marketing, operations, and finance to improve efficiency, decision-making, and execution at scale.
      <br /><br />
      <strong>Strategy, Growth &amp; Scale</strong><br />
      We support companies with positioning, go-to-market strategy, ecosystem development, partnership building, and scalable growth systems across global markets.
      <br /><br />
      <strong>Capital Markets &amp; Advisory</strong><br />
      We provide fundraising support, M&amp;A advisory (buy- and sell-side), investor readiness, and strategic capital formation for high-growth companies.
    </React.Fragment>
  ) },
  { q: "What makes MCA different from other Web3 consulting companies?", a: "MCA is not a marketing agency. We are senior operators, ex-bankers, and Web3 natives who have shipped product, raised capital, and run real campaigns. Where agencies execute tasks, we shape strategy and stay accountable to outcomes." },
  { q: "What types of companies work with MCA?", a: "We work with companies ranging from pre-product Web3 protocols preparing for TGE, to scaled enterprises evaluating M&A and strategic exits. Most engagements sit between Series A maturity and growth-stage scale." },
  { q: "Can MCA help with capital raising?", a: "Yes. Capital strategy is one of our core practice areas. We help structure rounds across equity, token, and hybrid stacks, map and warm investors, and prepare materials and process all the way through close." },
  { q: "Does MCA help with token launch strategy and exchange positioning?", a: "Yes. MCA builds and guides token launch strategy through market positioning, exchange visibility, ecosystem growth, investor communications, liquidity awareness, and post-launch expansion. Our Web3 consulting services are designed to align token narratives with long-term business growth, stronger market perception, and sustainable ecosystem traction." },
  { q: "How does MCA measure success as a Web3 consulting company?", a: "MCA measures success through business outcomes including user acquisition, ecosystem growth, TVL expansion, wallet activity, partnership growth, investor visibility, Web3 SEO performance, revenue growth, and long-term strategic positioning." },
  { q: "Can MCA help with Web3 PR and media visibility?", a: "Yes. MCA provides Web3 PR services including media outreach, founder positioning, strategic storytelling, podcast placements, ecosystem visibility, and exposure across leading Web3 news and crypto media platforms." },
  { q: "Does MCA work with global Web3 teams?", a: "Yes. MCA works with global Web3 and AI companies across North America, Europe, Asia, and the Middle East. Our Web3 consulting services support both early-stage startups and institutional-scale organizations." },
  { q: "What clients has MCA worked with?", a: "MCA has worked with leading companies and ecosystems across Web3, AI, and digital infrastructure including projects such as Pyth Network, Momentum, Linera, Wormhole, and KAIO. As a Web3 consulting company, MCA has helped clients scale through strategic positioning, ecosystem growth, capital markets advisory, token launch strategy, exchange visibility, PR, partnerships, and investor communications. During MCA's engagement with Momentum, the protocol scaled from approximately $9M to over $460M in TVL while growing into one of the largest ecosystems on Sui in a month. MCA also worked alongside KAIO during its institutional growth and token launch expansion, helping strengthen positioning within one of the most challenging market environments." },
  { q: "Why do companies hire a Web3 consulting company like MCA?", a: "Companies hire MCA because we combine Web3 marketing, Web3 consulting services, capital raising strategy, AI advisory, M&A support, and ecosystem growth under one strategic partner. We focus on sustainable business growth rather than short-term hype cycles." },
  { q: "How much does it cost to work with a Web3 consulting company?", a: "There is no fixed pricing because effective Web3 consulting and marketing depends on your project stage, market positioning, growth objectives, and execution scope. As a Web3 consulting company and capital markets firm, MCA builds tailored strategies around each client's needs across growth and market positioning. Most companies typically invest between $15K–$100K+ per month depending on the level of support, campaign complexity, and strategic involvement required. To understand what approach makes the most sense for your company, schedule a call with the MCA team to discuss a Web3 marketing strategy aligned with your long-term goals." }];

  const [open, setOpen] = useStateH(0);
  const items = omit && omit.length ? allItems.filter((it) => !omit.includes(it.q)) : allItems;
  return (
    <section className="section section--tight" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="section-head__left">
            <span className="eyebrow">FREQUENTLY ASKED</span>
            <h2 className="h2" style={{ marginTop: 16 }}>Common Questions.</h2>
          </div>
        </div>
        <div className="faq">
          {items.map((it, i) =>
          <div key={i} className={`faq__item ${open === i ? "faq__item--open" : ""}`}>
              <button className="faq__btn" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq__plus"><span className="faq__icon"></span></span>
              </button>
              <div className="faq__answer">
                <div className="faq__answer-inner">{it.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FinalCTA({ navigate }) {
  return (
    <section className="section section--tight section--team-dark">
      <div className="container">
        <div className="cta-block">
          <div className="cta-block__inner">
            <div>
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)", display: "block", marginBottom: 16 }}>
                READY WHEN YOU ARE
              </span>
              <h2 className="cta-block__title">
                Your Growth Partners in Marketing, Scale, AI Solutions, and Capital Strategy.
              </h2>
              <p className="cta-block__sub">
                Ready to build the next stage of your company with a team that understands
                growth, technology, and market timing?
              </p>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "flex-end" }}>
              <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>
                Schedule a Free Consultation
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  Hero, Services, About, Metrics, CaseStudies, Insights, Team, TeamLife, Testimonials, FAQ, FinalCTA, Globe
});