/* MCA — Toronto location page (dark-mode only, bespoke).
   Structural sibling of the Dubai page: same teal system and reveal rhythm,
   with a drawn, animated CN Tower anchoring the LEFT of the hero. */

const { useState: useTR, useEffect: useTRE, useRef: useTRR } = React;

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

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

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

function TRBeams({ className = "" }) {
  const beams = [
    { left: "14%", dur: 8, delay: 0 },
    { left: "33%", dur: 6.5, delay: 1.4 },
    { left: "54%", dur: 9, delay: 0.6 },
    { left: "71%", dur: 7.2, delay: 2.1 },
    { left: "88%", dur: 6.8, delay: 1.1 },
  ];
  return (
    <div className={`tr-beams ${className}`} aria-hidden="true">
      {beams.map((b, i) => (
        <span key={i} className="tr-beam"
          style={{ left: b.left, animationDuration: `${b.dur}s`, animationDelay: `${b.delay}s` }} />
      ))}
    </div>
  );
}

/* ---------- Drawn Toronto skyline: CN Tower + the bank towers ---------- */
function trTowerGeo(tiers, cx, baseY) {
  let y = baseY;
  const L = [], R = [], ribs = [], wins = [];
  tiers.forEach((t, ti) => {
    const x0 = cx - t.w / 2, x1 = cx + t.w / 2, top = y - t.h;
    L.push([x0, y], [x0, top]);
    R.push([x1, y], [x1, top]);
    if (t.h > 26 && t.w > 16) {
      const cols = Math.max(2, Math.round(t.w / 15));
      const gap = t.w / (cols + 1);
      const rows = Math.max(1, Math.floor((t.h - 14) / 15));
      for (let c = 1; c <= cols; c++) {
        const wx = x0 + c * gap;
        ribs.push(`M ${wx} ${top + 6} L ${wx} ${y - 4}`);
        for (let r = 0; r < rows; r++) {
          wins.push({ x: wx, y: top + 10 + r * 15, tw: ((c * 4 + r * 3 + ti) % 9) === 0 });
        }
      }
    }
    y = top;
  });
  const d = "M " + L.map((p) => p.join(" ")).join(" L ") +
            " L " + R.slice().reverse().map((p) => p.join(" ")).join(" L ") + " Z";
  return { d, top: y, ribs, wins };
}

const TR_BASE_Y = 960;
/* Bay Street / financial district behind and beside the tower */
const TR_NB = [
  trTowerGeo([{ w: 58, h: 300 }, { w: 40, h: 82 }], 330, TR_BASE_Y),     // First Canadian Place
  trTowerGeo([{ w: 50, h: 236 }, { w: 32, h: 54 }], 386, TR_BASE_Y),
  trTowerGeo([{ w: 44, h: 176 }], 100, TR_BASE_Y),
  trTowerGeo([{ w: 52, h: 214 }, { w: 34, h: 48 }], 52, TR_BASE_Y),
  trTowerGeo([{ w: 38, h: 138 }], 292, TR_BASE_Y),
  trTowerGeo([{ w: 40, h: 120 }], 146, TR_BASE_Y),
];
/* Rogers Centre dome, low and wide at the tower's foot */
const TR_DOME = "M 96 960 L 96 906 A 62 52 0 0 1 220 906 L 220 960 Z";

function TRTowerShape({ geo, cls = "" }) {
  return (
    <g className={cls}>
      <path d={geo.d} className="tr-twr__body" />
      <path d={geo.ribs.join(" ")} className="tr-twr__rib" />
      <path d={geo.d} className="tr-twr__edge" />
      {geo.wins.map((w, i) => (
        <rect key={i} x={w.x - 1.4} y={w.y} width="2.8" height="4.4"
          className={"tr-twr__win" + (w.tw ? " tr-twr__win--tw" : "")}
          style={w.tw ? { animationDelay: `${(i * 0.29) % 5}s` } : undefined} />
      ))}
    </g>
  );
}

const TR_SHAFT = "M 158 960 C 184 812, 196 642, 198 486 L 222 486 C 224 642, 236 812, 262 960 Z";
const TR_SHAFT_UP = "M 200 406 L 202 332 L 218 332 L 220 406 Z";

function TRCNTower() {
  const tipY = 84;
  return (
    <svg className="tr-hero__tower" viewBox="0 0 420 980" preserveAspectRatio="xMidYMax meet" aria-hidden="true">
      <defs>
        <linearGradient id="trTwrFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#00A5A1" stopOpacity="0.24" />
          <stop offset="58%" stopColor="#00A5A1" stopOpacity="0.07" />
          <stop offset="100%" stopColor="#00A5A1" stopOpacity="0.01" />
        </linearGradient>
        <linearGradient id="trSpireFill" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stopColor="#00A5A1" stopOpacity="0.5" />
          <stop offset="100%" stopColor="#7FF3EF" stopOpacity="0.95" />
        </linearGradient>
        <linearGradient id="trTwrLift" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stopColor="#00A5A1" stopOpacity="0" />
          <stop offset="70%" stopColor="#2FE7E1" stopOpacity="0.42" />
          <stop offset="100%" stopColor="#2FE7E1" stopOpacity="0" />
        </linearGradient>
        <radialGradient id="trHorizon" cx="0.5" cy="1" r="0.75">
          <stop offset="0%" stopColor="#2FE7E1" stopOpacity="0.16" />
          <stop offset="55%" stopColor="#00A5A1" stopOpacity="0.07" />
          <stop offset="100%" stopColor="#00A5A1" stopOpacity="0" />
        </radialGradient>
        <clipPath id="trTwrClip"><path d={TR_SHAFT} /></clipPath>
      </defs>
      <ellipse cx="210" cy="960" rx="300" ry="200" fill="url(#trHorizon)" />
      {TR_NB.map((g, i) => <TRTowerShape key={i} geo={g} cls="tr-twr--far" />)}
      <g className="tr-twr--mid">
        <path d={TR_DOME} className="tr-twr__body" />
        <path d={TR_DOME} className="tr-twr__edge" />
        <path d="M 110 908 A 52 44 0 0 1 206 908" className="tr-twr__rib" />
        <path d="M 128 884 A 30 26 0 0 1 188 884" className="tr-twr__rib" />
        <path d="M 96 936 L 220 936" className="tr-twr__rib" />
      </g>
      {/* main shaft */}
      <path d={TR_SHAFT} className="tr-twr__body" />
      <path d="M 176 960 C 196 812, 204 642, 205 486 M 244 960 C 224 812, 216 642, 215 486 M 210 960 L 210 486" className="tr-twr__rib" />
      <path d={TR_SHAFT} className="tr-twr__edge" />
      <g clipPath="url(#trTwrClip)">
        <rect className="tr-twr__climb" x="190" y="900" width="40" height="10" rx="5" />
        <rect className="tr-twr__lift" x="150" y="820" width="120" height="150" />
      </g>
      {/* main pod: sloped underside, deck, upper ring */}
      <path d="M 198 486 L 146 452 L 274 452 L 222 486 Z" className="tr-twr__pod" />
      <path d="M 146 452 L 150 424 L 270 424 L 274 452 Z" className="tr-twr__pod" />
      <path d="M 150 438 L 270 438" className="tr-twr__deck" />
      <path d="M 146 452 L 274 452" className="tr-twr__glow" />
      {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
        <rect key={i} x={158 + i * 13} y="429" width="6" height="5"
          className={"tr-twr__win" + (i % 3 === 0 ? " tr-twr__win--tw" : "")}
          style={i % 3 === 0 ? { animationDelay: `${i * 0.5}s` } : undefined} />
      ))}
      <path d="M 162 424 L 166 406 L 254 406 L 258 424 Z" className="tr-twr__pod" />
      <path d={TR_SHAFT_UP} className="tr-twr__body" />
      <path d={TR_SHAFT_UP} className="tr-twr__edge" />
      {/* sky pod */}
      <path d="M 186 332 L 189 304 L 231 304 L 234 332 Z" className="tr-twr__pod" />
      <path d="M 189 318 L 231 318" className="tr-twr__deck" />
      {/* antenna */}
      <polygon className="tr-twr__spirefill" points="204,304 216,304 212,178 208,178" />
      <line x1="210" y1="178" x2="210" y2={tipY} className="tr-twr__spire" />
      <line x1="203" y1="212" x2="217" y2="212" className="tr-twr__deck" />
      <circle className="tr-twr__halo" cx="210" cy={tipY} r="10" />
      <circle className="tr-twr__tip" cx="210" cy={tipY} r="2.8" />
    </svg>
  );
}

/* ---------- Hero ---------- */
function TRHero({ navigate }) {
  const stats = [
    { n: "80+", l: "Companies advised across cycles" },
    { n: "Toronto → Global", l: "NY · London · Dubai · Singapore" },
  ];
  return (
    <section className="tr-hero">
      <div className="tr-hero__bg" aria-hidden="true">
        <div className="tr-hero__sun"></div>
        <div className="tr-hero__grid"></div>
        <TRBeams className="tr-hero__beams" />
        <TRCNTower />
        <div className="tr-hero__shimmer"></div>
        <div className="tr-hero__sweep"></div>
        <div className="tr-hero__scrim"></div>
      </div>
      <div className="container">
        <div className="tr-hero__inner">
          <span className="tr-hero__chip">
            <span className="tr-hero__chip-dot"></span>
            MultiChain Advisors · Toronto
          </span>
          <h1 className="tr-hero__title">
            Growth Consulting for <span className="tr-em">Emerging Technology</span>
          </h1>
          <p className="tr-hero__sub">
            MCA helps ambitious technology companies build, launch, finance, and scale.
          </p>
          <p className="tr-hero__sub">
            From growth strategy and capital markets to product launches, global expansion, financial advisory,
            partnerships, and marketing, we connect every critical function around one clear commercial roadmap.
          </p>
          <div className="tr-hero__ctas">
            <Button variant="teal" size="lg" onClick={trOpenForm} withArrow>Book a Strategy Call</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>View Case Studies</Button>
          </div>
          <p className="tr-hero__note">Toronto-based. Globally connected. Built for emerging technology.</p>
          <div className="tr-hero__stats">
            {stats.map((s, i) => (
              <div key={i} className="tr-hero__stat">
                <span className="tr-hero__stat-n">{s.n}</span>
                <span className="tr-hero__stat-l">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- One growth partner ---------- */
const TR_CAPS = [
  "Growth & business strategy",
  "Capital markets & fundraising",
  "CFO & financial advisory",
  "Product strategy & commercialization",
  "Product launches & market rollouts",
  "Tokenomics & TGE support",
  "Regional & global expansion",
  "Business development & partnerships",
  "Marketing, branding & social media",
  "Influencer & industry network activation",
  "Conferences, events & in-person business development",
  "PR & media",
];
function TRIntegrated() {
  return (
    <section className="tr-sec tr-intro">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">What we deliver</span>
          <h2 className="tr-h2">
            Your <span className="tr-em">Growth Partners.</span>
          </h2>
          <p className="tr-lede">
            MCA brings institutional grade growth strategy consulting, capital markets expertise, and full-service
            execution to the ventures defining Canada's Web3 and emerging technology era.
          </p>
          <p className="tr-lede">
            MCA operates across the full company lifecycle, from early product strategy and fundraising to
            international expansion, financial governance, and M&amp;A preparation.
          </p>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- Why Toronto ---------- */
const TR_WHY = [
  { t: "15,000+ technology startups", d: "Operating inside Toronto's innovation ecosystem, the densest concentration of emerging technology companies in Canada.", feat: true },
  { t: "Fastest-growing talent pool", d: "Adding more technology workers than most major US hubs, year after year." },
  { t: "A globally ranked AI ecosystem", d: "Anchored by the Vector Institute and the University of Toronto." },
  { t: "Canada's financial centre", d: "The institutional capital and regulatory maturity serious technology companies need." },
  { t: "A record of regulated innovation", d: "Including the world's first Bitcoin ETF: proof of how quickly Canadian institutions adopt emerging technology." },
  { t: "North America's most diverse city", d: "A natural bridge from a company built here to markets everywhere else." },
];
function TRWhyIcon({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const f = { fill: "currentColor", stroke: "none" };
  switch (i) {
    case 0: return (<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h16" {...p} /><path d="M7 20V9l5-4 5 4v11" {...p} /><rect x="10.5" y="14" width="3" height="6" {...p} /></svg>);
    case 1: return (<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.2" {...p} /><circle cx="17" cy="9.6" r="2.3" {...p} /><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" {...p} /><path d="M15.2 14.3c2.6.2 4.5 2.2 4.5 4.7" {...p} /></svg>);
    case 2: return (<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2" {...p} /><circle cx="12" cy="12" r="1.6" {...f} /><path d="M10 3.5v3M14 3.5v3M10 17.5v3M14 17.5v3M3.5 10h3M3.5 14h3M17.5 10h3M17.5 14h3" {...p} /></svg>);
    case 3: return (<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 20h17" {...p} /><path d="M5 20V10M9.7 20V10M14.3 20V10M19 20V10" {...p} /><path d="M12 3.5 20.5 8h-17z" {...p} /></svg>);
    case 4: return (<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5" {...p} /><path d="M9.6 9.2c0-1 1-1.7 2.4-1.7s2.4.7 2.4 1.7-1.1 1.6-2.4 1.6-2.4.7-2.4 1.8 1 1.9 2.4 1.9 2.4-.8 2.4-1.9" {...p} /><path d="M12 5.6v12.8" {...p} /></svg>);
    default: return (<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5" {...p} /><path d="M3.5 12h17" {...p} /><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" {...p} /></svg>);
  }
}
function TRWhyToronto() {
  return (
    <section className="tr-sec tr-whysec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">Why Toronto</span>
          <h2 className="tr-h2">
            Why Toronto is Canada's most important <span className="tr-em">technology market.</span>
          </h2>
          <p className="tr-lede">
            Toronto is Canada's financial capital and its technology capital. That combination creates a market
            opportunity that is genuinely rare in the global landscape.
          </p>
        </TRReveal>
        <TRReveal delay={100}>
          <div className="tr-why">
            {TR_WHY.map((w, i) => (
              <div key={i} className={"tr-why__cell" + (w.feat ? " tr-why__cell--feat" : "")}>
                <span className="tr-why__icon"><TRWhyIcon i={i} /></span>
                <h3 className="tr-why__t">{w.t}</h3>
                <p className="tr-why__d">{w.d}</p>
              </div>
            ))}
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- Services ---------- */
const TR_SERVICES = [
  {
    title: "Capital Markets Support",
    tag: "Capital",
    problem: "We prepare emerging technology companies for the capital markets: fundraising strategy, investor materials, financial modeling, and guidance through raises and strategic transactions. Our team has advised founders raising their first institutional round and institutions evaluating technology allocations, so we know exactly what the other side of the table is looking for.",
    includes: [
      "Fundraising strategy and raise preparation",
      "Investor decks, data rooms, and financial models",
      "Warm investor introductions across Canada and globally",
      "M&A and strategic transaction advisory",
      "Grant and non-dilutive funding strategy",
    ],
  },
  {
    title: "CFO and Financial Advisory Support",
    tag: "Finance",
    problem: "Financial advisory, analysis, and extrapolation. CFO services, strategic planning, budgeting, and cost analysis for founders who need to know exactly where the business stands and exactly where it is headed. One financial function connected to every stage of the company lifecycle.",
    includes: [
      "Fractional CFO services and financial leadership",
      "Strategic planning, budgeting, and forecasting",
      "Cost analysis and unit economics",
      "Board and investor reporting infrastructure",
      "Financial readiness for raises, audits, and exits",
    ],
  },
  {
    title: "Product Launch and Rollout",
    tag: "Launch",
    problem: "A launch is a milestone, not a finish line. We sequence every launch for maximum market impact and build the post-launch engine that sustains momentum after the initial attention fades.",
    includes: [
      "Launch sequencing and rollout planning",
      "Beta, waitlist, and early access program design",
      "Cross-channel launch campaign execution",
      "Launch communications and press strategy",
      "Post-launch iteration and growth measurement",
    ],
  },
  {
    title: "Regional and Global Expansion",
    tag: "Expansion",
    problem: "We help Canadian technology companies expand internationally and international companies enter Canada, with localized go-to-market strategy, regional partnerships, and on-the-ground presence across a network spanning Toronto, New York, London, Dubai, and Singapore.",
    includes: [
      "Market entry strategy for Canada and international markets",
      "Localized positioning, messaging, and channel strategy",
      "Regional partnership and ecosystem development",
      "Regulatory and cultural context for each target market",
      "Introductions across our global network",
    ],
  },
  {
    title: "IRL Events, Conferences, and BD Partnerships",
    tag: "Events",
    problem: "The outcomes that matter most in this market are decided in conversations: at conferences, private dinners, and meetings across Bay Street. MCA designs and runs full event execution and brings clients directly into the rooms where relationships form.",
    includes: [
      "Event strategy, booth design, and stage positioning",
      "Live demo coordination and founder briefing",
      "Private roundtables with targeted investors and partners",
      "Business development and partnership structuring",
      "Structured post-event follow-up designed for conversion",
    ],
  },
  {
    title: "Marketing, Branding, and Social Media",
    tag: "Marketing",
    problem: "Full-service marketing built for technical products and discerning audiences. We translate deep technology into narratives that customers, investors, and press actually understand, and tie every campaign to measurable outcomes rather than vanity metrics.",
    includes: [
      "Brand identity and messaging systems",
      "Content strategy and thought leadership programs",
      "Social media strategy and management",
      "SEO, AEO, and organic search authority building",
      "Media placements across technology and financial press",
      "Demand generation and performance reporting",
    ],
  },
];

function TRServiceGlyph({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const g = [
    (<React.Fragment><circle cx="8" cy="8" r="4.5" {...p} /><path d="M16.5 21a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z" {...p} /><path d="M6.4 8h3.2M8 6.4v3.2M14.9 16.5h3.2" {...p} /></React.Fragment>),
    (<React.Fragment><path d="M4 20V4h11l5 5v11z" {...p} /><path d="M15 4v5h5" {...p} /><path d="M8 16.5l2.6-3 2.2 2 2.9-4" {...p} /></React.Fragment>),
    (<React.Fragment><circle cx="12" cy="12" r="8.5" {...p} /><circle cx="12" cy="12" r="3.6" {...p} /><path d="M12 1.5v3.4M12 19.1v3.4M22.5 12h-3.4M4.9 12H1.5" {...p} /></React.Fragment>),
    (<React.Fragment><path d="M13.5 3.5c3.5 1 6 4.5 6 9 0 1.6-.3 3-1 4.4l-3-1.6" {...p} /><path d="M9.5 20.5c-3.5-1-6-4.5-6-9 0-4.6 3.4-8 7.8-8" {...p} /><path d="m12 8-3 4h6l-3 4" {...p} /></React.Fragment>),
    (<React.Fragment><circle cx="12" cy="12" r="8.5" {...p} /><path d="M3.5 12h17" {...p} /><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" {...p} /></React.Fragment>),
    (<React.Fragment><rect x="3.5" y="6" width="17" height="14" rx="2" {...p} /><path d="M3.5 10.5h17M8 3.5v4M16 3.5v4" {...p} /><circle cx="12" cy="15" r="1.6" fill="currentColor" stroke="none" /></React.Fragment>),
    (<React.Fragment><path d="M4 20V11M10 20v-6M16 20V8" {...p} /><path d="M3.5 8.5 9 5l4 2.5 6.5-4.5" {...p} /><path d="M16 3h3.5V6.5" {...p} /></React.Fragment>),
  ];
  return (
    <span className="tr-svc__glyph" aria-hidden="true">
      <svg width="22" height="22" viewBox="0 0 24 24">{g[i] || g[0]}</svg>
    </span>
  );
}

function TRServiceCard({ s, i }) {
  return (
    <article className="tr-svc">
      <div className="tr-svc__top">
        <span className="tr-svc__glyph-tile"><TRServiceGlyph i={i} /></span>
        <h3 className="tr-svc__title">{s.title}</h3>
      </div>
      <p className="tr-svc__desc tr-svc__desc--hidden">{s.problem}</p>
      <ul className="tr-svc__list">
        {s.includes.map((it) => (<li key={it}><TRCheck />{it}</li>))}
      </ul>
    </article>
  );
}

function TRServices() {
  return (
    <section className="tr-sec tr-servicessec">
      <div className="container">
        <TRReveal className="tr-sec__head tr-sec__head--empty">
        </TRReveal>
        <div className="tr-svc__grid">
          {TR_SERVICES.map((s, i) => (
            <TRReveal key={i} delay={(i % 3) * 90} className="tr-svc__cell">
              <TRServiceCard s={s} i={i} />
            </TRReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Sectors ---------- */
const TR_SECTORS = [
  "Artificial Intelligence (AI)", "Robotics", "Biotech and HealthTech", "Software Development and SaaS",
  "FinTech and Blockchain", "CleanTech", "Manufacturing Technology", "Engineering and Product Development",
];
function TRSectors() {
  return (
    <section className="tr-sec tr-sectorssec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">Sectors we serve</span>
          <h2 className="tr-h2">
            Helping Canada's <span className="tr-em">innovation economy</span> grow.
          </h2>
          <p className="tr-lede">
            We proudly support technology companies across Canada, from early-stage startups to established
            businesses, operating in:
          </p>
        </TRReveal>
        <TRReveal delay={80}>
          <div className="tr-marq">
            <div className="tr-marq__track">
              {[...TR_SECTORS.slice(0, 4), ...TR_SECTORS.slice(0, 4), ...TR_SECTORS.slice(0, 4), ...TR_SECTORS.slice(0, 4)].map((s, i) => (
                <span key={i} className="tr-sector"><span className="tr-sector__dot"></span>{s}</span>
              ))}
            </div>
          </div>
          <div className="tr-marq">
            <div className="tr-marq__track tr-marq__track--rev">
              {[...TR_SECTORS.slice(4), ...TR_SECTORS.slice(4), ...TR_SECTORS.slice(4), ...TR_SECTORS.slice(4)].map((s, i) => (
                <span key={i} className="tr-sector"><span className="tr-sector__dot"></span>{s}</span>
              ))}
            </div>
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- MCA in Toronto (city feature blocks) ---------- */
const TR_CITY = [
  {
    t: "Embedded in Canada's business and capital markets ecosystem",
    p: [
      "With our team based in Canada, MCA operates within this ecosystem and helps clients connect with the investors, institutions, partners, and industry leaders relevant to their growth.",
    ],
  },
  {
    t: "Turning events into business opportunities",
    p: [
      "MCA helps clients approach these events with a clear commercial strategy: speaking opportunities, investor and partner meetings, media engagement, private roundtables, and high-value conversations outside the official programme.",
    ],
  },
  {
    t: "Full conference and event execution",
    p: [
      "MCA manages on-the-ground event execution from planning through follow-up.",
      "Our support can include booth strategy and messaging, live product demonstrations, founder preparation, presentation materials, meeting coordination, media opportunities, and structured follow-up with investors, partners, and prospects.",
    ],
  },
  {
    t: "Connecting Canadian companies to global capital",
    p: [
      "MCA connects Canadian companies with international capital, partners, and growth opportunities through a global network spanning New York, London, Dubai, Singapore, and other key markets.",
      "We also support international companies entering Canada with local market positioning, strategic partnerships, event representation, and trusted access to Toronto's business and institutional networks.",
    ],
  },
];
function TRCityIcon({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const g = [
    (<React.Fragment><circle cx="9" cy="8" r="3.2" {...p} /><circle cx="17" cy="9.6" r="2.3" {...p} /><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" {...p} /><path d="M15.2 14.3c2.6.2 4.5 2.2 4.5 4.7" {...p} /></React.Fragment>),
    (<React.Fragment><rect x="3.5" y="6" width="17" height="14" rx="2" {...p} /><path d="M3.5 10.5h17M8 3.5v4M16 3.5v4" {...p} /><path d="m9.5 15 1.8 1.8 3.2-3.4" {...p} /></React.Fragment>),
    (<React.Fragment><path d="M4 20V9l8-4.5L20 9v11" {...p} /><path d="M3 20h18" {...p} /><path d="M9.5 20v-5h5v5" {...p} /><path d="M12 4.5V2" {...p} /></React.Fragment>),
    (<React.Fragment><circle cx="12" cy="12" r="8.5" {...p} /><path d="M3.5 12h17" {...p} /><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" {...p} /></React.Fragment>),
  ];
  return (
    <span className="tr-city__icon" aria-hidden="true">
      <svg width="22" height="22" viewBox="0 0 24 24">{g[i] || g[0]}</svg>
    </span>
  );
}
function TRCity() {
  return (
    <section className="tr-sec tr-citysec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">On the ground</span>
          <h2 className="tr-h2">
            MCA in <span className="tr-em">Toronto.</span>
          </h2>
        </TRReveal>
        <div className="tr-city">
          {TR_CITY.map((c, i) => (
            <TRReveal key={i} delay={(i % 2) * 90}>
              <div className="tr-city__cell">
                <TRCityIcon i={i} />
                <h3 className="tr-city__t">{c.t}</h3>
                {c.p.map((t, j) => <p key={j}>{t}</p>)}
                {c.note && <p className="tr-city__note">{c.note}</p>}
              </div>
            </TRReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Toronto gallery ---------- */
const TR_PHOTOS = [
  { src: "/assets/toronto/10.jpg", cap: "Where Crypto Is Headed Next · Toronto Tech Week" },
  { src: "/assets/toronto/02.jpeg", cap: "Toronto Tech Week · founders & operators" },
  { src: "/assets/toronto/03.jpeg", cap: "CADD & Coffee · institutional panel" },
  { src: "/assets/toronto/04.jpeg", cap: "IEEE Toronto · industry roundtable" },
  { src: "/assets/toronto/05.jpeg", cap: "Blockchain Futurist Conference · Canada Crypto Week" },
  { src: "/assets/toronto/06.jpeg", cap: "Main stage · AI infra onchain panel" },
  { src: "/assets/toronto/07.jpeg", cap: "Team Canada Trade Mission" },
  { src: "/assets/toronto/08.jpeg", cap: "MOU signing · Team Canada Trade Mission" },
  { src: "/assets/toronto/09.jpeg", cap: "On the record · conference media" },
  { src: "/assets/toronto/01.jpeg", cap: "Strategy sessions with client teams" },
];
function TRGallery() {
  return (
    <section className="tr-sec tr-gallerysec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">In the room</span>
          <h2 className="tr-h2">
            Stages, roundtables, and the rooms <span className="tr-em">where deals start.</span>
          </h2>
        </TRReveal>
        <TRReveal delay={80}>
          <div className="tr-marq tr-photomarq">
            <div className="tr-marq__track">
              {[...TR_PHOTOS.slice(0, 5), ...TR_PHOTOS.slice(0, 5)].map((p, i) => (
                <figure key={i} className="tr-gal__tile">
                  <img src={p.src} alt={p.cap} loading="lazy" />
                  <figcaption className="tr-gal__cap">{p.cap}</figcaption>
                </figure>
              ))}
            </div>
          </div>
          <div className="tr-marq tr-photomarq">
            <div className="tr-marq__track tr-marq__track--rev">
              {[...TR_PHOTOS.slice(5), ...TR_PHOTOS.slice(5)].map((p, i) => (
                <figure key={i} className="tr-gal__tile">
                  <img src={p.src} alt={p.cap} loading="lazy" />
                  <figcaption className="tr-gal__cap">{p.cap}</figcaption>
                </figure>
              ))}
            </div>
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

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

function TRLogoRow({ 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 TRTrusted() {
  return (
    <section className="tr-sec tr-trustedsec">
      <div className="container">
        <TRReveal>
          <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">
              <TRLogoRow items={TR_ROW_A} reverse={false} duration={120} />
              <TRLogoRow items={TR_ROW_B} reverse={true} duration={140} />
            </div>
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

function TRProof() {
  return (
    <div className="tr-proof">
      <Metrics />
      <TRTrusted />
    </div>
  );
}

/* ---------- Why MCA ---------- */
function TRReasonIcon({ children }) {
  return (
    <span className="tr-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">{children}</svg>
    </span>
  );
}
function TRReasons() {
  const reasons = [
    { t: "Technology-native, not an agency that pivoted", d: "MCA was built inside the emerging technology ecosystem. Our advisors have taken products to market through multiple cycles, advised companies through launches and raises, and built growth engines from zero.",
      ic: (<React.Fragment><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" fill="currentColor" stroke="none" /><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" /></React.Fragment>) },
    { t: "Proven across 80+ companies", d: "Our portfolio spans AI, blockchain infrastructure, fintech, and emerging technology companies at every stage. We know what works at launch, what sustains after it, and the difference between lasting traction and a peak that fades.",
      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 first, always", d: "We do not sell execution packages. Every engagement begins with a deep strategic diagnosis of your market position, competitive landscape, and growth gaps, so the execution that follows compounds rather than dissipates.",
      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" fill="currentColor" stroke="none" /></React.Fragment>) },
    { t: "Data-driven growth, not hype-driven noise", d: "Toronto's audience is analytically literate. Institutional investors run models and technical buyers read documentation. We build around qualified pipeline, retention, conversion, and capital raised.",
      ic: (<React.Fragment><path d="M3 17l5-5 3.5 3.5L20 7" /><path d="M15 7h5v5" /><circle cx="8" cy="12" r="1.1" fill="currentColor" stroke="none" /><circle cx="11.5" cy="15.5" r="1.1" fill="currentColor" stroke="none" /></React.Fragment>) },
    { t: "We understand both sides of the capital table", d: "Our team has advised founders raising their first institutional round and institutions evaluating technology allocations. That bilateral fluency makes our capital markets 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: "Toronto-embedded. Globally connected.", d: "Local relationships, regulatory knowledge, and event activation in Toronto, with a global network across New York, London, Dubai, and Singapore so clients are never limited to the Canadian market.",
      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="tr-sec tr-reasonssec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">Why MCA</span>
          <h2 className="tr-h2">
            Why founders and institutions <span className="tr-em">choose MCA in Toronto.</span>
          </h2>
        </TRReveal>
        <div className="tr-reasons__grid">
          {reasons.map((r, i) => (
            <TRReveal key={i} delay={(i % 3) * 80}>
              <div className="tr-reason">
                <TRReasonIcon>{r.ic}</TRReasonIcon>
                <h3 className="tr-reason__title">{r.t}</h3>
                <p className="tr-reason__text">{r.d}</p>
              </div>
            </TRReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Who we work with ---------- */
const TR_CLIENTS = [
  { t: "AI, robotics, and biotech companies ready to scale", d: "You have a working product and early traction. What you need now is capital markets readiness, financial infrastructure, and a go-to-market engine built by people who have done this across market cycles." },
  { t: "Founders preparing for a major raise", d: "You have built something real and you are approaching the moment when narrative and investor access matter most. You need a complete strategic foundation, a credible story, sound financials, and introductions to the right investors." },
  { t: "Enterprises and financial institutions adopting emerging technology", d: "You are a bank, asset manager, or established enterprise ready to make a considered move into AI, digital assets, or emerging technology. You need a partner who understands the institutional environment and the technology ecosystem, without confusing the two." },
  { t: "International companies entering the Canadian market", d: "You have credibility in New York, London, Dubai, or Singapore and you are ready to establish a presence in Canada. You need a partner with genuine Toronto relationships and Canadian market fluency." },
  { t: "Established companies hitting a growth ceiling", d: "You have traction and a real product, but growth has plateaued and you are not breaking through to the institutional audience or media profile you deserve. You need a strategic repositioning, not a louder version of the same marketing." },
];
function TRClients() {
  return (
    <section className="tr-sec tr-clientssec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">Who we work with</span>
          <h2 className="tr-h2">
            The clients MCA is <span className="tr-em">built for in Toronto.</span>
          </h2>
          <p className="tr-lede">
            MCA works with a specific kind of client, one for whom the quality of the strategy, the integrity of the
            network, and the precision of the execution genuinely matter.
          </p>
        </TRReveal>
        <TRReveal delay={80}>
          <div className="tr-clients">
            {TR_CLIENTS.map((c, i) => (
              <div key={i} className="tr-client">
                <h3 className="tr-client__t"><span className="tr-client__n">{String(i + 1).padStart(2, "0")}</span>{c.t}</h3>
                <p className="tr-client__d">{c.d}</p>
              </div>
            ))}
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- Quotes ---------- */
const TR_QUOTES = [
  { q: "MultiChain Advisors has proven themselves to be a thoroughly native team covering many important verticals that made a difference in one of our biggest campaigns and launches. They get the big picture, and are endlessly creative when it comes to tactics, no matter the hurdles. Recommended for those looking for a bespoke approach towards marketing and branding.", w: "Technology client" },
  { q: "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.", w: "Momentum" },
  { q: "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: reaching 100k users and a seed raise of $3.3M from leading VCs.", w: "Helio" },
];
function TRQuotes() {
  return (
    <section className="tr-sec tr-quotessec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">Social proof</span>
          <h2 className="tr-h2">
            What technology leaders <span className="tr-em">say about MCA.</span>
          </h2>
        </TRReveal>
        <div className="tr-quotes">
          {TR_QUOTES.map((q, i) => (
            <TRReveal key={i} delay={i * 80}>
              <div className="tr-quote">
                <span className="tr-quote__mark" aria-hidden="true">&ldquo;</span>
                <p className="tr-quote__txt">{q.q}</p>
                <span className="tr-quote__who">{q.w}</span>
              </div>
            </TRReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Process ---------- */
const TR_STEPS = [
  { t: "Strategy session", d: "A focused conversation with a senior MCA strategist. We listen, we ask hard questions, and we share honest perspectives. By the end, you will have a clearer view of your market position than when you started." },
  { t: "Strategic diagnosis", d: "A comprehensive audit of your competitive landscape, positioning, audience segmentation, financial readiness, and growth gaps, resulting in a prioritized view of what needs to happen first, second, and third." },
  { t: "Engagement design", d: "We design the right structure for your situation: full-service retainer, strategy sprint, capital markets advisory, CFO support, launch program, or a combination. We do not upsell services you do not need." },
  { t: "Execution and iteration", d: "Our team executes with the same senior people who designed the strategy involved throughout. We track performance against outcomes that matter and iterate as your company evolves and the market moves." },
];
function TRStepIcon({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const g = [
    (<React.Fragment><path d="M20 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" {...p} /></React.Fragment>),
    (<React.Fragment><circle cx="10.5" cy="10.5" r="6.5" {...p} /><path d="M15.4 15.4 21 21" {...p} /><path d="M8 10.5h5" {...p} /></React.Fragment>),
    (<React.Fragment><path d="M4 20V4h11l5 5v11z" {...p} /><path d="M15 4v5h5" {...p} /><path d="M8.5 13.5h7M8.5 17h4.5" {...p} /></React.Fragment>),
    (<React.Fragment><path d="M3 17l5-5 3.5 3.5L20 7" {...p} /><path d="M15 7h5v5" {...p} /></React.Fragment>),
  ];
  return (
    <span className="tr-step__n" aria-hidden="true">
      <svg width="20" height="20" viewBox="0 0 24 24">{g[i] || g[0]}</svg>
    </span>
  );
}
function TRProcess({ navigate }) {
  return (
    <section className="tr-sec tr-processsec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">Our process</span>
          <h2 className="tr-h2">
            How an MCA <span className="tr-em">Engagement Works</span>
          </h2>
          <p className="tr-lede">
            Every MCA engagement begins with a clear understanding of your business, current position, growth
            objectives, and the challenges standing between you and the next stage.
          </p>
        </TRReveal>
        <div className="tr-steps">
          {TR_STEPS.map((s, i) => (
            <TRReveal key={i} delay={(i % 4) * 70}>
              <div className="tr-step">
                <TRStepIcon i={i} />
                <h3 className="tr-step__t">{s.t}</h3>
                <p className="tr-step__d">{s.d}</p>
              </div>
            </TRReveal>
          ))}
        </div>
        <TRReveal delay={120}>
          <div className="tr-hero__ctas" style={{ marginTop: "38px" }}>
            <Button variant="teal" size="lg" onClick={trOpenForm} withArrow>Start With a Strategy Session</Button>
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function TRFinalCTA({ navigate }) {
  const tags = [
    "Growth strategy consulting",
    "Capital markets support",
    "CFO & financial advisory",
    "Product launch & expansion",
  ];
  return (
    <section className="tr-final">
      <div className="container">
        <TRReveal>
          <div className="tr-final__block">
            <TRBeams />
            <span className="tr-eyebrow tr-final__eyebrow">Build in Toronto</span>
            <h2 className="tr-final__title">
              Ready to build your growth engine <span className="tr-em">in Toronto?</span>
            </h2>
            <p className="tr-final__sub">
              From growth strategy consulting and capital markets support to product launch and full-service
              marketing, MCA delivers the expertise, the network, and the execution that Toronto's most ambitious
              technology companies trust to get it right the first time.
            </p>
            <div className="tr-final__tags">
              {tags.map((t) => <span key={t} className="tr-final__tag">{t}</span>)}
            </div>
            <div className="tr-final__ctas">
              <Button variant="teal" size="lg" onClick={trOpenForm} withArrow>Book Your Strategy Session</Button>
              <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>View Case Studies</Button>
            </div>
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const TR_FAQ = [
  { q: "What does MCA do in Toronto?", a: "MCA (MultiChain Advisors) is a Toronto-based emerging technology consulting firm serving AI, robotics, biotech, and technology companies across Canada. MCA provides capital markets support, CFO and financial advisory support, product strategy, product launch and rollout, regional and global expansion, IRL events, conferences and BD partnerships, and marketing, branding, and social media." },
  { q: "What is an emerging technology consulting firm?", a: "An emerging technology consulting firm helps companies building frontier technology grow: acquiring customers, raising capital, entering new markets, and scaling revenue. MCA is a consulting firm that also executes, and the sequence matters. Every engagement begins with a strategic diagnosis of your market position, competitive landscape, and growth gaps before a single execution decision is made." },
  { q: "Does MCA provide CFO and financial advisory services?", a: "Yes. MCA provides fractional CFO services, strategic planning, budgeting, cost analysis, and financial modeling for founders who need to know exactly where the business stands and where it is headed. One financial function connected to every stage of the company lifecycle, from grants through M&A." },
  { q: "What is included in MCA's capital markets support?", a: "MCA's capital markets support covers fundraising strategy, investor decks and data rooms, financial modeling, warm investor introductions across Canada and globally, M&A and strategic transaction advisory, and grant and non-dilutive funding strategy." },
  { q: "How does MCA support product launch and rollout?", a: "MCA sequences launches for maximum market impact: positioning and narrative, launch communications and press, beta and early access programs, cross-channel campaign execution, and the post-launch measurement and iteration that sustains momentum after the initial attention fades." },
  { q: "How does MCA support regional and global expansion?", a: "MCA supports expansion with localized go-to-market strategy, regional partnerships, media networks, and on-the-ground presence across Toronto, New York, London, Dubai, and Singapore. We help Canadian companies go global and international companies enter Canada." },
  { q: "How is MCA different from a marketing agency?", a: "Marketing agencies are execution businesses. They deliver campaigns to a strategy someone else has already decided on. MCA is a growth consulting firm, which means we start one step earlier: we help you determine the right strategy before committing any execution budget, and we pair that strategy with capital markets and financial advisory capabilities no agency offers." },
  { q: "Can MCA help an enterprise or financial institution adopting emerging technology?", a: "Yes. We work with banks, asset managers, and established enterprises at every stage of technology adoption, from early landscape education through the strategy and communications infrastructure required for a public product launch. We help institutions build an authentic, credible technology narrative that reflects what they are actually building." },
  { q: "How do I start working with MCA?", a: "Book a strategy session. A senior MCA strategist will assess your product, stage, and goals, and by the end of the conversation you will have a clearer view of your market position, whether or not you choose to work with us.", link: { label: "Book a strategy session", href: TR_FORM } },
];
function TRFaq() {
  const [open, setOpen] = useTR(0);
  return (
    <section className="tr-sec tr-faqsec">
      <div className="container">
        <TRReveal className="tr-sec__head">
          <span className="tr-eyebrow">FAQ</span>
          <h2 className="tr-h2">
            Emerging technology consulting <span className="tr-em">in Toronto.</span>
          </h2>
        </TRReveal>
        <TRReveal delay={70}>
          <div className="tr-faq">
            {TR_FAQ.map((f, i) => (
              <div key={i} className={"tr-faq__item" + (open === i ? " tr-faq__item--open" : "")}>
                <button className="tr-faq__q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                  {f.q}<span className="tr-faq__sign" aria-hidden="true"></span>
                </button>
                <div className="tr-faq__a">
                  <div className="tr-faq__a-inner">
                    <p>{f.a}</p>
                    {f.link && (
                      <a className="tr-faq__link" href={f.link.href} target="_blank" rel="noopener">
                        {f.link.label}<span aria-hidden="true">→</span>
                      </a>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- Closing ---------- */
function TRClosing({ navigate }) {
  return (
    <section className="tr-closing">
      <div className="container">
        <TRReveal>
          <div className="tr-closing__inner">
            <span className="tr-eyebrow">Toronto</span>
            <h2 className="tr-closing__title">
              Toronto is building the next generation of technology companies. <span className="tr-em">Let's make sure yours leads it.</span>
            </h2>
            <p className="tr-closing__sub">
              MCA partners with the founders, enterprises, and institutions building the next chapter of Canada's
              innovation economy, from Toronto and across every market that matters.
            </p>
            <div className="tr-closing__ctas">
              <Button variant="teal" size="lg" onClick={trOpenForm} withArrow>Start the Conversation</Button>
              <Button variant="secondary" size="lg" onClick={() => navigate("/contact")}>Contact the Team</Button>
            </div>
          </div>
        </TRReveal>
      </div>
    </section>
  );
}

/* ---------- Page ---------- */
function TorontoPage({ navigate }) {
  return (
    <div className="tr-page" data-screen-label="Toronto">
      <TRHero navigate={navigate} />
      <TRIntegrated />
      <TRServices />
      <TRSectors />
      <TRGallery />
      <TRCity />
      <TRProof />
      <TRProcess navigate={navigate} />
      <TRFaq />
      <TRFinalCTA navigate={navigate} />
    </div>
  );
}

Object.assign(window, { TorontoPage });