/* MCA, New York location page (bespoke, elegant) */

const { useState: useNY, useEffect: useNYE, useRef: useNYR } = React;

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

/* Scroll-reveal wrapper, animates in on intersect, with a hard safety
   fallback so content can never get stuck invisible (deep-links, fast
   scroll, or a pinned viewport all still resolve to visible). */
function Reveal({ children, delay = 0, className = "", tag = "div" }) {
  const ref = useNYR(null);
  const [seen, setSeen] = useNY(false);
  useNYE(() => {
    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); } };
    // already in (or above) the viewport on mount → show immediately
    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);
    // safety net: never leave content hidden for long
    const t = setTimeout(reveal, 2600);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  const Tag = tag;
  return (
    <Tag ref={ref}
      className={`ny-reveal ${seen ? "ny-reveal--in" : ""} ${className}`}
      style={{ transitionDelay: seen ? `${delay}ms` : "0ms" }}>
      {children}
    </Tag>
  );
}

function NYCheck() {
  return (
    <span className="ny-acc__check" aria-hidden="true">
      <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
        <path d="M2 5.2l2 2 4-4.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
  );
}

/* ---------- Skyline motion background ----------
   A continuous Manhattan rooftop profile traced as a single stroke (the green
   "outline"), plus a faint body fill and a few twinkling windows. Built from
   simple segments so it reads as a recognizable skyline (Empire State setback,
   a triangular crown, and tall One-WTC-style antennas) without any hand-drawn
   detail. Two layers drift at different speeds for depth. */
const NY_BASE = 360;
function nySkyline(segs) {
  let x = 0;
  let line = "";
  let fill = `M 0 ${NY_BASE}`;
  const decos = [];
  const windows = [];
  segs.forEach((s, i) => {
    const top = NY_BASE - s.h;
    line += (i === 0 ? "M" : " L") + ` ${x} ${top} L ${x + s.w} ${top}`;
    fill += ` L ${x} ${top} L ${x + s.w} ${top}`;
    const cx = x + s.w / 2;
    if (s.spire === "antenna") decos.push({ t: "a", x: cx, y: top });
    else if (s.spire === "crown") decos.push({ t: "c", x: cx, y: top });
    if (s.h >= 180) {
      for (let r = 0; r < 3; r++) windows.push({ x: cx, y: top + 22 + r * 22 });
    }
    x += s.w;
  });
  fill += ` L ${x} ${NY_BASE} Z`;
  return { line, fill, width: x, decos, windows };
}

const NY_FRONT = nySkyline([
  { w: 46, h: 84 }, { w: 30, h: 150 }, { w: 40, h: 110 },
  { w: 34, h: 200 }, { w: 20, h: 248, spire: "antenna" },
  { w: 28, h: 120 }, { w: 30, h: 230, spire: "crown" }, { w: 38, h: 96 },
  { w: 26, h: 170 }, { w: 42, h: 130 }, { w: 30, h: 272, spire: "antenna" },
  { w: 36, h: 150 }, { w: 30, h: 210 }, { w: 44, h: 100 }, { w: 28, h: 185 },
  { w: 40, h: 140 }, { w: 30, h: 235, spire: "antenna" }, { w: 34, h: 120 },
  { w: 26, h: 175 }, { w: 46, h: 150 }, { w: 30, h: 200 }, { w: 40, h: 110 },
]);

const NY_BACK = nySkyline([
  { w: 34, h: 70 }, { w: 26, h: 110 }, { w: 30, h: 60 }, { w: 40, h: 130 },
  { w: 24, h: 90 }, { w: 30, h: 150 }, { w: 36, h: 80 }, { w: 28, h: 120 },
  { w: 42, h: 70 }, { w: 30, h: 140 }, { w: 34, h: 100 }, { w: 26, h: 130 },
  { w: 40, h: 80 }, { w: 30, h: 115 }, { w: 36, h: 95 }, { w: 28, h: 135 },
  { w: 40, h: 75 }, { w: 30, h: 120 },
]);

function NYSkylineLayer({ data, cls, gradId, twinkle }) {
  const Copy = ({ dx }) => (
    <g transform={`translate(${dx} 0)`}>
      <path d={data.fill} className="ny-sky__fill" fill={`url(#${gradId})`} />
      <path d={data.line} className="ny-sky__line" />
      {data.decos.map((d, i) =>
        d.t === "a" ? (
          <line key={i} x1={d.x} y1={d.y} x2={d.x} y2={d.y - 54} className="ny-sky__ant" />
        ) : (
          <polygon key={i} points={`${d.x - 9},${d.y} ${d.x + 9},${d.y} ${d.x},${d.y - 28}`} className="ny-sky__crown" />
        )
      )}
      {twinkle && data.windows.map((w, i) => (
        <rect key={i} x={w.x - 2} y={w.y} width="3.4" height="5" rx="0.6"
          className="ny-sky__win" style={{ animationDelay: `${(i * 0.43) % 4}s` }} />
      ))}
    </g>
  );
  return (
    <svg className={`ny-sky__svg ${cls}`} viewBox={`0 0 ${data.width * 2} ${NY_BASE}`}
      preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#00A5A1" stopOpacity="0.16" />
          <stop offset="55%" stopColor="#00A5A1" stopOpacity="0.03" />
          <stop offset="100%" stopColor="#00A5A1" stopOpacity="0" />
        </linearGradient>
      </defs>
      <Copy dx={0} />
      <Copy dx={data.width} />
    </svg>
  );
}

/* ---------- Rich skyline (DARK MODE ONLY) ----------
   A taller, multi-layer parallax Manhattan skyline rendered behind the hero
   copy. Each building is a continuous teal outline with a faint body fill, a
   grid of lit/twinkling windows, and the occasional antenna or crown. Three
   layers drift at different speeds for depth. This is rendered ONLY when the
   site is in dark mode — light mode keeps the original subtle skyline above,
   completely untouched. */
const NY_BASE_R = 460;
function nySkylineRich(segs, opts) {
  const o = opts || {};
  const minWinH = o.minWinH || 110;
  const stepX = o.stepX || 16;
  const stepY = o.stepY || 22;
  let x = 0;
  let line = "";
  let fill = `M 0 ${NY_BASE_R}`;
  const decos = [];
  const windows = [];
  segs.forEach((s, i) => {
    const top = NY_BASE_R - s.h;
    line += (i === 0 ? "M" : " L") + ` ${x} ${top} L ${x + s.w} ${top}`;
    fill += ` L ${x} ${top} L ${x + s.w} ${top}`;
    const cx = x + s.w / 2;
    if (s.spire === "antenna") decos.push({ t: "a", x: cx, y: top });
    else if (s.spire === "crown") decos.push({ t: "c", x: cx, y: top });
    if (o.windows && s.h >= minWinH) {
      const cols = Math.max(2, Math.round(s.w / stepX));
      const colGap = s.w / (cols + 1);
      const rows = Math.floor((s.h - 26) / stepY);
      for (let c = 1; c <= cols; c++) {
        for (let r = 0; r < rows; r++) {
          windows.push({
            x: x + c * colGap,
            y: top + 18 + r * stepY,
            tw: ((c * 3 + r * 2 + i) % 7) === 0
          });
        }
      }
    }
    x += s.w;
  });
  fill += ` L ${x} ${NY_BASE_R} Z`;
  return { line, fill, width: x, decos, windows };
}

const NY_RFRONT = nySkylineRich([
  { w: 44, h: 124 }, { w: 30, h: 206 }, { w: 54, h: 150 }, { w: 34, h: 286, spire: "antenna" },
  { w: 40, h: 168 }, { w: 26, h: 244, spire: "crown" }, { w: 48, h: 128 }, { w: 30, h: 312, spire: "antenna" },
  { w: 44, h: 188 }, { w: 36, h: 146 }, { w: 30, h: 262 }, { w: 50, h: 138 }, { w: 28, h: 224 },
  { w: 42, h: 168 }, { w: 30, h: 330, spire: "antenna" }, { w: 46, h: 150 }, { w: 34, h: 236, spire: "crown" },
  { w: 40, h: 130 }, { w: 30, h: 204 }, { w: 52, h: 158 }, { w: 28, h: 232, spire: "antenna" }, { w: 44, h: 142 },
], { windows: true });

const NY_RBACK = nySkylineRich([
  { w: 40, h: 96 }, { w: 30, h: 158 }, { w: 36, h: 120 }, { w: 28, h: 196 }, { w: 44, h: 110 },
  { w: 30, h: 176, spire: "antenna" }, { w: 38, h: 100 }, { w: 30, h: 188 }, { w: 46, h: 124 }, { w: 30, h: 162 },
  { w: 36, h: 108 }, { w: 28, h: 200 }, { w: 42, h: 118 }, { w: 30, h: 168 }, { w: 38, h: 132 },
  { w: 30, h: 184, spire: "crown" }, { w: 44, h: 104 }, { w: 30, h: 156 },
], { windows: true, minWinH: 130 });

const NY_RFAR = nySkylineRich([
  { w: 50, h: 70 }, { w: 36, h: 112 }, { w: 44, h: 64 }, { w: 30, h: 134 }, { w: 52, h: 88 },
  { w: 34, h: 120 }, { w: 46, h: 72 }, { w: 30, h: 142 }, { w: 50, h: 80 }, { w: 36, h: 110 },
  { w: 44, h: 66 }, { w: 30, h: 128 }, { w: 52, h: 92 }, { w: 34, h: 116 },
], {});

function NYSkyRich({ data, cls, twinkle }) {
  const Copy = ({ dx }) => (
    <g transform={`translate(${dx} 0)`}>
      <path d={data.line} className="ny-sky__line" />
      {data.decos.map((d, i) =>
        d.t === "a" ? (
          <line key={"a" + i} x1={d.x} y1={d.y} x2={d.x} y2={d.y - 62} className="ny-sky__ant" />
        ) : (
          <polygon key={"c" + i} points={`${d.x - 10},${d.y} ${d.x + 10},${d.y} ${d.x},${d.y - 32}`} className="ny-sky__crown" />
        )
      )}
      {twinkle && data.windows.map((w, i) => (
        <rect key={"w" + i} x={w.x - 1.4} y={w.y} width="2.8" height="4.2"
          className={"ny-sky__gwin" + (w.tw ? " ny-sky__gwin--tw" : "")}
          style={w.tw ? { animationDelay: `${(i * 0.37) % 5}s` } : undefined} />
      ))}
    </g>
  );
  return (
    <svg className={`ny-sky__svg ${cls}`} viewBox={`0 0 ${data.width * 2} ${NY_BASE_R}`}
      preserveAspectRatio="none" aria-hidden="true">
      <Copy dx={0} />
      <Copy dx={data.width} />
    </svg>
  );
}

/* Track dark/light so we only mount the rich skyline in dark mode and never
   touch the light theme. */
function useNYDark() {
  const get = () =>
    typeof document !== "undefined" &&
    !document.documentElement.classList.contains("theme-light");
  const [dark, setDark] = useNY(get());
  useNYE(() => {
    const obs = new MutationObserver(() => setDark(get()));
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    return () => obs.disconnect();
  }, []);
  return dark;
}

/* ---------- Hero ---------- */
function NYHero({ navigate }) {
  const dark = useNYDark();
  return (
    <section className={"ny-hero" + (dark ? " ny-hero--rich" : "")}>
      <div className="ny-hero__bg" aria-hidden="true">
        <div className="ny-hero__photo"></div>
        <div className="ny-hero__skylight"></div>
        <div className="ny-hero__grade"></div>
        <div className="ny-hero__scrim"></div>
        <div className="ny-hero__grid"></div>
        <div className="ny-hero__scan"></div>
        <div className="ny-hero__glow"></div>
      </div>
      <div className="container">
        <div className="ny-hero__inner">
          <span className="ny-hero__chip">
            <span className="ny-hero__chip-dot"></span>
            MultiChain Advisors · New York
          </span>
          <h1 className="ny-hero__title">
            Advisory for <span className="ny-em">Web3, AI</span> <span className="ny-em">&amp; Emerging Technologies.</span>
          </h1>
          <p className="ny-hero__sub">
            MCA helps founders, enterprises, financial institutions, and venture-backed startups navigate the next
            generation of technology, from Web3 strategy and tokenization to AI adoption, digital transformation, and
            capital markets innovation. Based in New York and connected across global tech hubs, we turn your ideas
            into execution.
          </p>
          <div className="ny-hero__ctas">
            <Button variant="teal" size="lg" onClick={openForm} withArrow>Book a Strategy Call</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>Our Case Studies</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- The Problem ---------- */
function NYProblem() {
  return (
    <section className="ny-sec ny-problem">
      <div className="container">
        <Reveal>
          <div className="ny-problem__frame">
            <span className="ny-problem__glow" aria-hidden="true"></span>
            <div className="ny-problem__wrap">
              <h2 className="ny-h2 ny-problem__title">
                New York Market <span className="ny-em">Rewards Precision.</span>
              </h2>
              <p className="ny-problem__copy">
                AI, tokenization, and emerging tech all sound urgent, but without structure they scatter into efforts
                that lead nowhere. The real challenge was never the technology. It's knowing what matters, what to
                ignore, and what sequence leads to execution. <strong>That's what MCA delivers.</strong>
              </p>
              <div className="ny-problem__cta">
                <Button variant="teal" size="lg" onClick={openForm} withArrow>Schedule a Free Consultation</Button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- What We Do (bento) ---------- */
function NYWhatWeDo() {
  return (
    <section className="ny-sec ny-wwd">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">What We Do</span>
          <h2 className="ny-h2">
            From strategy to execution, <span className="ny-em">New York and beyond.</span>
          </h2>
        </Reveal>
        <div className="ny-wwd__grid">
          {NY_SERVICES.map((s, i) => (
            <Reveal key={i} delay={(i % 3) * 70} className={"ny-wwd__cell" + (i === 0 ? " ny-wwd__cell--feat" : "")}>
              <article className="ny-wwd__card">
                <div className="ny-wwd__glow" aria-hidden="true"></div>
                <div className="ny-wwd__top">
                  <span className="ny-wwd__icon"><NYSvcIcon i={i} /></span>
                </div>
                <div className="ny-wwd__body">
                  <h3 className="ny-wwd__title">{s.title}</h3>
                  <p className="ny-wwd__desc">{s.desc}</p>
                </div>
                <span className="ny-wwd__line" aria-hidden="true"></span>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- The New York Web3 Landscape ---------- */
function NYLandscape() {
  const groups = [
    { n: "01", title: "Institutional Investors", desc: "Digital-asset allocations run inside hedge funds and family offices, selective, mandate-driven, and allergic to hype." },
    { n: "02", title: "TradFi Executives", desc: "Leaders at banks and asset managers building blockchain divisions, evaluating Web3 through a risk-and-compliance lens." },
    { n: "03", title: "Sophisticated Retail", desc: "A broader investment community highly informed, financially literate expecting clear business cases, and credible execution." },
  ];
  return (
    <section className="ny-sec ny-landscape">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">The New York Web3 Landscape</span>
          <h2 className="ny-h2">
            What makes New York's Web3 market different, and why your strategy <span className="ny-em">has to be too.</span>
          </h2>
          <p className="ny-lede">
            New York's Web3 market is run by three audiences that behave nothing like the retail crypto crowd.
            Reaching them takes more than reach. It takes precision.
          </p>
        </Reveal>
        <Reveal delay={100}>
          <div className="ny-aud">
            {groups.map((g) => (
              <div key={g.n} className="ny-aud__cell">
                <h3 className="ny-aud__title">{g.title}</h3>
                <p className="ny-aud__desc">{g.desc}</p>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={160}>
          <p className="ny-landscape__close">
            Success requires precise positioning, regulatory-aware messaging, and content that earns credibility
            across both crypto and traditional finance. MCA helps emerging technology companies build narratives
            that stand up to investor scrutiny, media attention, and market expectations.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- The Capital Is Already in New York ---------- */
function NYCapital() {
  const stats = [
    {
      metric: "$10T+",
      desc: "Institutional capital managed by NY firms like BlackRock, now moving into digital assets.",
      featured: true,
    },
    {
      metric: "First in the US",
      desc: "NYDFS BitLicense set the country's first state-level crypto framework. New York is the benchmark.",
    },
    {
      metric: "Wall Street is on chain",
      desc: "JPMorgan, Goldman, and BNY run active digital asset and tokenization programs, not pilots.",
    },
    {
      metric: "Fastest ETF launch ever",
      desc: "Spot Bitcoin ETFs from NY managers became some of the quickest-growing funds in history.",
    },
    {
      metric: "RWA tokenization is live",
      desc: "The first major tokenized treasury products launched from New York firms.",
    },
  ];
  return (
    <section className="ny-sec ny-capital">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">The Proof</span>
          <h2 className="ny-h2">
            The capital is <span className="ny-em">already in New York.</span>
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <div className="ny-cap">
            {stats.map((s, i) => (
              <div key={i} className={"ny-cap__cell" + (s.featured ? " ny-cap__cell--feat" : "")}>
                <div className="ny-cap__metric">{s.metric}</div>
                <p className="ny-cap__desc">{s.desc}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- What We Do ---------- */
const NY_SERVICES = [
  {
    title: "Web3 Consulting",
    desc: "Blockchain strategy, tokenomics, web3 marketing, RWA tokenization, TGE planning, ecosystem growth, and fundraising support.",
  },
  {
    title: "AI Advisory",
    desc: "AI strategy and roadmapping, generative AI adoption, enterprise integration, governance, and process automation.",
  },
  {
    title: "Capital Markets & Digital Assets",
    desc: "Institutional Web3 adoption, tokenized securities, investor relations, and market positioning.",
  },
  {
    title: "Emerging Tech",
    desc: "Agentic AI, autonomous systems, digital identity, smart contracts, and fintech innovation.",
  },
  {
    title: "Marketing & Growth",
    desc: "Thought leadership, PR, SEO/AEO, community, and executive branding.",
  },
];

function NYSvcIcon({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const f = { fill: "currentColor", stroke: "none" };
  switch (i) {
    case 0: // Web3 Consulting — node network
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="4.6" r="2.3" {...p} />
          <circle cx="5" cy="17.4" r="2.3" {...p} />
          <circle cx="19" cy="17.4" r="2.3" {...p} />
          <line x1="11.2" y1="6.7" x2="6" y2="15.3" {...p} />
          <line x1="12.8" y1="6.7" x2="18" y2="15.3" {...p} />
          <line x1="7.3" y1="17.4" x2="16.7" y2="17.4" {...p} />
          <circle cx="12" cy="12" r="2.7" {...f} />
        </svg>
      );
    case 1: // AI Advisory — spark
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M11 2.8l1.8 5.2 5.2 1.8-5.2 1.8L11 16.8l-1.8-5.2L4 9.8l5.2-1.8z" {...f} />
          <path d="M18.4 14.4l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z" {...p} />
        </svg>
      );
    case 2: // Capital Markets — ascending bars
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="3.5" y="13.5" width="4" height="7" rx="1.2" {...p} />
          <rect x="10" y="9.5" width="4" height="11" rx="1.2" {...p} />
          <rect x="16.5" y="4.5" width="4" height="16" rx="1.2" {...f} />
        </svg>
      );
    case 3: // Emerging Tech — chip with live core
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="6.5" y="6.5" width="11" height="11" rx="2.4" {...p} />
          <rect x="9.6" y="9.6" width="4.8" height="4.8" rx="1.2" {...f} />
          <line x1="9.5" y1="3.4" x2="9.5" y2="6.5" {...p} />
          <line x1="14.5" y1="3.4" x2="14.5" y2="6.5" {...p} />
          <line x1="9.5" y1="17.5" x2="9.5" y2="20.6" {...p} />
          <line x1="14.5" y1="17.5" x2="14.5" y2="20.6" {...p} />
          <line x1="3.4" y1="9.5" x2="6.5" y2="9.5" {...p} />
          <line x1="3.4" y1="14.5" x2="6.5" y2="14.5" {...p} />
          <line x1="17.5" y1="9.5" x2="20.6" y2="9.5" {...p} />
          <line x1="17.5" y1="14.5" x2="20.6" y2="14.5" {...p} />
        </svg>
      );
    default: // Marketing & Growth — growth trajectory
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3.5 16.5l5.5-5.5 3.5 3.5 8-8" {...p} />
          <path d="M15.5 6.5H20.5V11.5" {...p} />
          <circle cx="3.5" cy="16.5" r="1.9" {...f} />
        </svg>
      );
  }
}

/* ---------- MCA in New York, on the ground ---------- */
function NYPresence() {
  const cards = [
    {
      img: "assets/team-life/06.jpg",
      title: "Booths, stages & on-the-ground representation",
      text: "We design, staff, and operate event presences for portfolio companies, booth strategy, messaging, demo coordination, and post-event investor follow-up.",
    },
    {
      img: "assets/team-life/04.jpg",
      title: "Founder positioning & panels",
      text: "We brief founders before panels, position your narrative for the room, and make sure the right people leave with a reason to take the next conversation.",
    },
    {
      img: "assets/team-life/institutional-investor.jpg",
      title: "Institutional investor introductions",
      text: "We maintain ongoing relationships with hedge funds, family offices, and TradFi allocators. When we introduce, it's because the mandate genuinely fits.",
    },
  ];
  const events = ["Consensus NYC", "NFT.NYC", "ETH New York", "Digital Asset Summit", "Bloomberg Crypto Summit", "Permissionless"];
  return (
    <section className="ny-sec ny-presence">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">MCA in New York</span>
          <h2 className="ny-h2">
            On the ground where <span className="ny-em">capital moves.</span>
          </h2>
          <p className="ny-lede">
            MCA is in New York, at the events, and in the relationships that matter, and we bring our portfolio
            companies with us.
          </p>
        </Reveal>

        <Reveal delay={80}>
          <div className="ny-presence__feature">
            <div className="ny-presence__feature-media">
              <img src="assets/team-life/main-stage.jpg" alt="MCA on the main stage at a major blockchain conference" loading="lazy" />
            </div>
            <div className="ny-presence__feature-body">
              <div className="ny-presence__kicker">The flagship · Consensus NYC</div>
              <h3 className="ny-presence__feature-title">The event that sets the annual agenda.</h3>
              <p className="ny-presence__feature-text">
                Consensus is the most significant Web3 event in the North American calendar, and MCA activates at it
                with full intent. We coordinate speaking opportunities for portfolio founders, facilitate introductions
                to institutional investors and exchange representatives, and host the private, off-program conversations
                where the most significant relationships in this industry actually begin. Our clients don't just attend.
                They leave with relationships that convert.
              </p>
            </div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div className="ny-presence__cols">
            {cards.map((c, i) => (
              <article key={i} className="ny-presence__card">
                <div className="ny-presence__card-media">
                  <img src={c.img} alt={c.title} loading="lazy" />
                </div>
                <div className="ny-presence__card-body">
                  <h3 className="ny-presence__card-title">{c.title}</h3>
                  <p className="ny-presence__card-text">{c.text}</p>
                </div>
              </article>
            ))}
          </div>
        </Reveal>

        <Reveal delay={160}>
          <div className="ny-cal">
            <span className="ny-cal__label">The full NY calendar</span>
            <div className="ny-cal__events">
              {events.map((e) => <span key={e} className="ny-cal__event">{e}</span>)}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Industries We Serve ---------- */
const NY_INDUSTRIES = [
  "Financial Services",
  "Capital Markets",
  "Fintech",
  "SaaS",
  "AI Startups",
  "Blockchain Projects",
  "Venture Capital",
  "Enterprise Technology",
  "Digital Infrastructure",
];

function NYIndustryIcon({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const f = { fill: "currentColor", stroke: "none" };
  switch (i) {
    case 0: // Financial Services — columned institution
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3.5 8.5L12 3.5l8.5 5" {...p} />
          <line x1="5.5" y1="11" x2="5.5" y2="17" {...p} />
          <line x1="9.8" y1="11" x2="9.8" y2="17" {...p} />
          <line x1="14.2" y1="11" x2="14.2" y2="17" {...p} />
          <line x1="18.5" y1="11" x2="18.5" y2="17" {...p} />
          <line x1="3.5" y1="20" x2="20.5" y2="20" {...p} />
          <circle cx="12" cy="7" r="1.4" {...f} />
        </svg>
      );
    case 1: // Capital Markets — candlesticks
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <line x1="6" y1="3.5" x2="6" y2="20.5" {...p} />
          <rect x="4" y="9" width="4" height="7" rx="1" {...f} />
          <line x1="12" y1="5.5" x2="12" y2="20.5" {...p} />
          <rect x="10" y="7" width="4" height="6" rx="1" {...p} />
          <line x1="18" y1="3.5" x2="18" y2="18.5" {...p} />
          <rect x="16" y="6" width="4" height="8" rx="1" {...p} />
        </svg>
      );
    case 2: // Fintech — card with spark
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="3.2" y="6" width="17.6" height="12" rx="2.4" {...p} />
          <line x1="3.2" y1="10" x2="20.8" y2="10" {...f} />
          <path d="M3.2 10h17.6" stroke="currentColor" strokeWidth="1.5" />
          <circle cx="16.5" cy="14.5" r="1.5" {...f} />
        </svg>
      );
    case 3: // SaaS — stacked layers
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 3.4l8.4 4.1-8.4 4.1L3.6 7.5z" {...f} />
          <path d="M3.6 12l8.4 4.1 8.4-4.1" {...p} />
          <path d="M3.6 16.5l8.4 4.1 8.4-4.1" {...p} />
        </svg>
      );
    case 4: // AI Startups — spark
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M11 2.8l1.8 5.2 5.2 1.8-5.2 1.8L11 16.8l-1.8-5.2L4 9.8l5.2-1.8z" {...f} />
          <path d="M18.4 14.4l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z" {...p} />
        </svg>
      );
    case 5: // Blockchain — linked blocks
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="3.5" y="3.5" width="7" height="7" rx="1.6" {...p} />
          <rect x="13.5" y="13.5" width="7" height="7" rx="1.6" {...f} />
          <rect x="13.5" y="3.5" width="7" height="7" rx="1.6" {...p} />
          <rect x="3.5" y="13.5" width="7" height="7" rx="1.6" {...p} />
          <line x1="10.5" y1="7" x2="13.5" y2="7" {...p} />
          <line x1="7" y1="10.5" x2="7" y2="13.5" {...p} />
        </svg>
      );
    case 6: // Venture Capital — upward trajectory + seed
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3.5 17l5-5 3.5 3.5 8.5-8.5" {...p} />
          <path d="M14 7H20.5V13.5" {...p} />
          <circle cx="3.5" cy="17" r="1.9" {...f} />
        </svg>
      );
    case 7: // Enterprise Technology — server stack
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <rect x="3.8" y="3.6" width="16.4" height="6" rx="1.8" {...p} />
          <rect x="3.8" y="14.4" width="16.4" height="6" rx="1.8" {...p} />
          <circle cx="7.3" cy="6.6" r="1.2" {...f} />
          <circle cx="7.3" cy="17.4" r="1.2" {...f} />
        </svg>
      );
    default: // Digital Infrastructure — globe grid
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="8.5" {...p} />
          <ellipse cx="12" cy="12" rx="3.6" ry="8.5" {...p} />
          <line x1="3.5" y1="12" x2="20.5" y2="12" {...p} />
          <line x1="5.2" y1="7" x2="18.8" y2="7" {...p} />
          <line x1="5.2" y1="17" x2="18.8" y2="17" {...p} />
        </svg>
      );
  }
}

function NYIndustries() {
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", `${e.clientX - r.left}px`);
    e.currentTarget.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  return (
    <section className="ny-sec ny-industries">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">Who We Work With in New York</span>
          <h2 className="ny-h2">
            Industries we serve <span className="ny-em">in New York.</span>
          </h2>
          <p className="ny-lede">
            MCA works with the companies and investors driving New York's digital economy, from financial institutions
            and capital markets firms to fintech, AI startups, and blockchain projects.
          </p>
        </Reveal>
        <Reveal delay={100}>
          <div className="ny-ind__grid">
            {NY_INDUSTRIES.map((name, i) => (
              <article key={name} className="ny-ind__card" onMouseMove={onMove}>
                <span className="ny-ind__spot" aria-hidden="true"></span>
                <span className="ny-ind__icon"><NYIndustryIcon i={i} /></span>
                <h3 className="ny-ind__name">{name}</h3>
                <span className="ny-ind__line" aria-hidden="true"></span>
              </article>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Services ---------- */
const NY_SVC_OFFERINGS = [
  {
    title: "Web3 Strategy & Growth",
    tagline: "Build the foundation before you scale.",
    desc: "We define positioning, narrative, audience strategy, and go-to-market execution that align community growth with investor confidence.",
    includes: [
      "Positioning & narrative development",
      "Go-to-market strategy",
      "Audience & ecosystem mapping",
      "Competitive intelligence",
      "Token launch & growth planning",
      "Investor messaging & pitch materials",
    ],
  },
  {
    title: "Capital Markets & Institutional Advisory",
    tagline: "Bridge the gap between Web3 innovation and institutional capital.",
    desc: "We help projects structure, position, and present themselves for investors, financial institutions, and regulated markets.",
    includes: [
      "Tokenomics & business model advisory",
      "Regulatory positioning",
      "Capital raise strategy",
      "Institutional investor introductions",
      "RWA & tokenization advisory",
      "Strategic partnerships & exchange listings",
    ],
  },
  {
    title: "Web3 PR & Thought Leadership",
    tagline: "Earn credibility where it matters.",
    desc: "We secure visibility across both crypto-native and institutional financial media while building founder authority and narrative control.",
    includes: [
      "Crypto & financial media relations",
      "Tier-1 press placements",
      "Founder thought leadership",
      "Executive visibility campaigns",
      "Crisis communications",
      "Conference & event positioning",
    ],
  },
  {
    title: "Web3 SEO & AI Search Optimization",
    tagline: "Own the search layer.",
    desc: "We help projects rank across Google, AI search engines, and industry publications to attract investors, partners, and users organically.",
    includes: [
      "Technical SEO",
      "Web3 keyword strategy",
      "Content & research development",
      "Authority backlink acquisition",
      "AI Search / AEO optimization",
      "Performance reporting & analytics",
    ],
  },
  {
    title: "AI Advisory & Emerging Technology",
    tagline: "Turn emerging technologies into business advantage.",
    desc: "We help organizations evaluate, adopt, and commercialize AI, blockchain, tokenization, and next-generation digital infrastructure.",
    includes: [
      "AI strategy & implementation roadmaps",
      "Agentic AI & automation advisory",
      "Tokenization strategy",
      "Emerging technology assessments",
      "Innovation workshops",
      "Executive education & advisory",
    ],
  },
  {
    title: "Community & Ecosystem Growth",
    tagline: "Build communities that drive adoption, trust, and long-term value.",
    desc: "We create engagement systems that transform audiences into advocates.",
    includes: [
      "Community strategy",
      "Telegram & Discord management",
      "Ambassador programs",
      "KOL & ecosystem partnerships",
      "Sentiment monitoring",
      "Community growth campaigns",
    ],
  },
];

function NYServices() {
  const [open, setOpen] = useNY(0);
  return (
    <section className="ny-sec ny-services">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">What We Deliver</span>
          <h2 className="ny-h2">
            Services built for <span className="ny-em">credibility and capital.</span>
          </h2>
          <p className="ny-lede">
            Six integrated practice areas, from web3 marketing and strategy and capital markets advisory to PR,
            search, and community. Each engagement is built around what your moment actually requires.
          </p>
        </Reveal>
        <Reveal delay={80}>
          <div className="ny-acc">
            {NY_SVC_OFFERINGS.map((s, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={"ny-acc__item" + (isOpen ? " ny-acc__item--open" : "")}>
                  <button
                    className="ny-acc__head"
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    aria-expanded={isOpen}
                  >
                    <span className="ny-acc__titles">
                      <span className="ny-acc__title">{s.title}</span>
                    </span>
                    <span className="ny-acc__plus" aria-hidden="true"></span>
                  </button>
                  <div className="ny-acc__panel">
                    <div className="ny-acc__panel-inner">
                      <div className="ny-acc__body">
                        <p className="ny-acc__desc">{s.desc}</p>
                        <div>
                          <div className="ny-acc__incl-label">Includes</div>
                          <ul className="ny-acc__list">
                            {s.includes.map((it) => (
                              <li key={it}><NYCheck />{it}</li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Why MCA ---------- */
function NYReasons() {
  const reasons = [
    { t: "Web3-native, every cycle", d: "We were built inside the Web3 ecosystem and stayed inside it through every crash and breakthrough. That isn't a credential, it's pattern recognition you cannot fake.",
      ic: (<React.Fragment><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3.5v4.5h-4.5"/></React.Fragment>) },
    { t: "80+ projects, every category", d: "From Zeus Network and Wormhole to Helio and Momentum, DeFi, Layer-1s, NFTs, GameFi, infrastructure, and capital markets firms. We know what works in bull and bear.",
      ic: (<React.Fragment><rect x="3.5" y="3.5" width="7" height="7" rx="1.4"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.4"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.4"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.4"/></React.Fragment>) },
    { t: "Strategy is the product", d: "For MCA, strategy is the engagement. Everything that follows is the execution of a plan built for your moment.",
      ic: (<React.Fragment><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="1"/></React.Fragment>) },
    { t: "Both sides of the capital table", d: "We've advised founders raising their first institutional round and investors evaluating which projects deserve allocation. That bilateral fluency makes our advisory unusually effective.",
      ic: (<React.Fragment><path d="M7 4 3 8l4 4"/><path d="M3 8h13.5"/><path d="m17 20 4-4-4-4"/><path d="M21 16H7.5"/></React.Fragment>) },
    { t: "Our network is real", d: "Our introductions are warm because the relationships are real, institutional investors, financial journalists, and exchange executives who know us, trust us, and take our calls.",
      ic: (<React.Fragment><circle cx="5" cy="6" r="2.3"/><circle cx="19" cy="6" r="2.3"/><circle cx="12" cy="18" r="2.3"/><path d="M6.9 7.5 10.7 15.6M17.1 7.5 13.3 15.6M7.3 6h9.4"/></React.Fragment>) },
    { t: "NY-based, globally connected", d: "New York is where strategy gets built and relationships activated. Our global network, Dubai, London, Toronto, Singapore, APAC, is where those strategies deploy at scale.",
      ic: (<React.Fragment><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.6 2.4 14.4 0 17M12 3.5c-2.4 2.6-2.4 14.4 0 17"/></React.Fragment>) },
  ];
  return (
    <section className="ny-sec ny-reasons">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">Why MCA</span>
          <h2 className="ny-h2">
            Why founders &amp; capital markets firms <span className="ny-em">choose MCA.</span>
          </h2>
        </Reveal>
        <div className="ny-reasons__grid">
          {reasons.map((r, i) => (
            <Reveal key={i} delay={(i % 3) * 80}>
              <div className="ny-reason">
                <span className="ny-reason__icon" aria-hidden="true">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{r.ic}</svg>
                </span>
                <h3 className="ny-reason__title">{r.t}</h3>
                <p className="ny-reason__text">{r.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Who We Work With ---------- */
function NYClients() {
  const clients = [
    { t: "Web3 founders preparing for a major raise or TGE", d: "You've built something real. You need the narrative, the institutional relationships, and the market presence to ensure your next round or token event reflects the actual quality of what you've built." },
    { t: "Capital markets firms entering digital assets", d: "A bank, asset manager, family office, or institution ready to make a serious move into Web3. You can't afford a stumble in your first public communications, you need a partner who understands both your constraints and the market." },
    { t: "Established projects hitting a growth ceiling", d: "You have community and traction, but you're not breaking through to the institutional audience your product deserves. You need a strategic repositioning and a deliberate institutional outreach program." },
    { t: "International projects entering the US market", d: "You've built credibility in Dubai, Singapore, or Europe and you're ready to move in North America. You need genuine New York relationships, not an agency with a New York office that works from somewhere else." },
  ];
  return (
    <section className="ny-sec ny-clients">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">Who We Work With</span>
          <h2 className="ny-h2">The clients MCA is <span className="ny-em">built for.</span></h2>
          <p className="ny-lede">
            We don't work with every project that can write a check. We work with clients for whom the quality of the
            strategy, the integrity of the network, and the precision of execution actually matter.
          </p>
        </Reveal>
        <Reveal delay={80}>
          <div className="ny-clients__grid">
            {clients.map((c, i) => (
              <div key={i} className="ny-client">
                <span className="ny-client__num">{String(i + 1).padStart(2, "0")}</span>
                <h3 className="ny-client__title">{c.t}</h3>
                <p className="ny-client__text">{c.d}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Social proof ---------- */
/* ---------- Process ---------- */
function NYProcess() {
  const steps = [
    { t: "Strategy Session", d: "A focused, no-agenda conversation with a senior MCA strategist. We listen, ask hard questions, and share honest perspectives. You'll know more about your situation than when you started." },
    { t: "Strategic Diagnosis", d: "A comprehensive audit of your market position, competitive landscape, current narrative, and growth gaps, resulting in a clear, prioritized view of what needs to happen first, second, and third." },
    { t: "Engagement Design", d: "We design the right engagement for your situation, a full-service retainer, a defined strategy sprint, or a capital-raise advisory program. We don't upsell services you don't need." },
    { t: "Execution & Iteration", d: "The same senior people who designed the strategy stay actively involved. We measure against outcomes that matter, not vanity metrics, and iterate as conditions evolve." },
  ];
  return (
    <section className="ny-sec ny-process">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">Our Process</span>
          <h2 className="ny-h2">How an MCA engagement <span className="ny-em">works.</span></h2>
          <p className="ny-lede">
            We don't start with a proposal. We start with a conversation, because the right engagement always comes
            from understanding your actual situation, not from a pre-built service package.
          </p>
        </Reveal>
        <Reveal delay={80}>
          <div className="ny-process__rail">
            <div className="ny-process__line" aria-hidden="true"></div>
            {steps.map((s, i) => (
              <div key={i} className="ny-process__step">
                <span className="ny-process__node" aria-hidden="true"></span>
                <span className="ny-process__num">STEP {i + 1}</span>
                <h3 className="ny-process__title">{s.t}</h3>
                <p className="ny-process__text">{s.d}</p>
              </div>
            ))}
          </div>
          <div className="ny-process__cta">
            <Button variant="teal" size="lg" onClick={openForm} withArrow>Start with a Strategy Session</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const NY_FAQ = [
  { q: "How is MCA different from other Web3 consulting firms operating in New York?", a: "MCA is a strategy-led consulting firm, not a marketing execution agency. Volume-driven influencer, KOL, and social programs are legitimate services for projects that already know what they need. MCA serves a different kind of client, one who needs to get the strategy right before committing an execution budget, and for whom institutional credibility is as important as community reach. We also bring capital markets advisory, warm institutional introductions, and dual-track PR across crypto and financial media." },
  { q: "What does Web3 consulting actually cover, and how is it different from a crypto marketing agency?", a: "A crypto marketing agency is fundamentally a distribution business, it gets your message in front of audiences through social, PR, and paid channels. A Web3 consulting firm like MCA is a strategic advisory business: we help determine what the right message is, who the right audiences are, what the right channel mix is, and how to sequence go-to-market before anything goes to execution. Our practice covers tokenomics, narrative and positioning, investor relations, regulatory navigation, community architecture, and capital-raise advisory, and only then the execution that delivers it." },
  { q: "How does MCA approach institutional investor introductions in New York?", a: "We make introductions the way we'd want them made on our own behalf, with full context, genuine alignment between what the investor is looking for and what our client is building, and our own credibility behind the recommendation. We do not operate a pitch-blast service. That selectivity is what makes the introductions valuable, and what protects the long-term trust we've built with the institutional investors in our network." },
  { q: "What does Web3 SEO involve for a project targeting institutional audiences?", a: "It's different from Web3 SEO for retail crypto. The keywords are different, institutional buyers search for terms like \"tokenized treasury products,\" \"RWA investment strategy,\" and \"digital asset compliance framework.\" The content formats are different, whitepapers, research reports, and long-form editorial carry more authority than blog posts. And the backlink sources that carry weight are different. MCA's SEO is calibrated for the search behavior of high-intent, sophisticated audiences." },
  { q: "How does MCA's PR practice cover both the crypto press and the financial press?", a: "We run two parallel editorial tracks. On the crypto side, direct relationships with editors at CoinDesk, The Block, Decrypt, Cointelegraph, and Blockworks. On the financial side, relationships with reporters covering digital assets at Bloomberg, Fortune, the Financial Times, and the Wall Street Journal. Most stories can be pitched differently to both sides, positioned for the technical sophistication of a crypto reporter and the institutional context of a financial journalist." },
  { q: "Can MCA help a traditional financial institution that is new to Web3?", a: "This is one of our strongest practice areas. We work with banks, asset managers, and family offices at every stage, from early exploration and education, through market positioning and communication strategy, to a public announcement or product launch. For established institutions, the stakes of getting the first public communication wrong are high. We help develop a genuine, credible Web3 narrative that reflects what they're actually building." },
  { q: "What does a typical MCA engagement look like, and how do you structure fees?", a: "Every engagement is custom-built, so we don't publish standard pricing. Some clients work with us on ongoing strategic retainers; others engage us for defined-scope strategy sprints ahead of a fundraise, token event, or market entry. Capital markets firms often begin with an institutional advisory engagement before broader execution. The right structure depends on where you are and what the rate-limiting constraint is, which is why we always start with a strategy session before discussing scope or fees." },
];

function NYFaq() {
  const [open, setOpen] = useNY(0);
  return (
    <section className="ny-sec ny-faq">
      <div className="container">
        <Reveal className="ny-sec__head">
          <span className="ny-eyebrow">FAQ</span>
          <h2 className="ny-h2">Web3 consulting in New York, <span className="ny-em">answered.</span></h2>
        </Reveal>
        <Reveal delay={80}>
          <div className="ny-faqlist">
            {NY_FAQ.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={`ny-faqlist__item ${isOpen ? "ny-faqlist__item--open" : ""}`}>
                  <button className="ny-faqlist__btn" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                    <span>{it.q}</span>
                    <span className="ny-faqlist__plus" aria-hidden="true"></span>
                  </button>
                  <div className="ny-faqlist__panel">
                    <div className="ny-faqlist__panel-inner">
                      <div className="ny-faqlist__answer">{it.a}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Final CTA / Closing ---------- */
function NYFinalCTA({ navigate }) {
  return (
    <section className="ny-final">
      <div className="container">
        <div className="ny-final__block">
          <div className="ny-final__inner">
            <span className="ny-eyebrow ny-final__eyebrow">Built for the New York capital ecosystem</span>
            <h2 className="ny-final__title">
              Let's <span className="ny-em">talk.</span>
            </h2>
            <p className="ny-final__sub">
              If you're preparing for your next raise, launch, expansion, or institutional move, MCA is built to
              help you get it right.
            </p>
            <div className="ny-final__ctas">
              <Button variant="teal" size="lg" onClick={openForm} withArrow>Book Your Strategy Session</Button>
              <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>See case studies</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Trusted by (logo marquee, mirrors the home page) ---------- */
const NY_LOGO_IDS = [
  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 NY_LOGO_FILES = NY_LOGO_IDS.map((n) => `assets/partners-v2/${n}.png`);

function NYLogoRow({ items, reverse = false, duration = 120 }) {
  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 NYTrusted() {
  return (
    <section className="ny-sec ny-trustedsec">
      <div className="container">
        <Reveal>
          <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">
              <NYLogoRow items={NY_LOGO_FILES} reverse={false} duration={120} />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Page ---------- */
function NewYorkPage({ navigate }) {
  return (
    <div className="ny-page">
      <NYHero navigate={navigate} />
      <NYCapital />
      <NYProblem />
      <NYWhatWeDo />
      <NYLandscape />
      <NYPresence />
      <NYIndustries />
      <NYTrusted />
      <NYServices />
      <NYReasons />
      <NYFaq />
      <NYFinalCTA navigate={navigate} />
    </div>
  );
}

Object.assign(window, { NewYorkPage });