/* MCA — Dubai location page (dark-mode only, bespoke).
   Mirrors the structure of the New York page but with Dubai-specific content,
   a warmer sunset-gold accent layer, and a vertical "spire beam" motif. */

const { useState: useDB, useEffect: useDBE, useRef: useDBR } = React;

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

/* Scroll-reveal wrapper with a hard safety fallback so content never sticks
   invisible (deep-links / fast scroll / pinned viewport all resolve). */
function DBReveal({ children, delay = 0, className = "", tag = "div" }) {
  const ref = useDBR(null);
  const [seen, setSeen] = useDB(false);
  useDBE(() => {
    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={`db-reveal ${seen ? "db-reveal--in" : ""} ${className}`}
      style={{ transitionDelay: seen ? `${delay}ms` : "0ms" }}>
      {children}
    </Tag>
  );
}

function DBCheck() {
  return (
    <span className="db-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>
  );
}

/* Vertical spire beams — the recurring Dubai decoration */
function DBBeams({ className = "" }) {
  const beams = [
    { left: "12%", gold: false, dur: 8, delay: 0 },
    { left: "31%", gold: true, dur: 6.5, delay: 1.4 },
    { left: "52%", gold: false, dur: 9, delay: 0.6 },
    { left: "68%", gold: true, dur: 7.2, delay: 2.1 },
    { left: "86%", gold: false, dur: 6.8, delay: 1.1 },
  ];
  return (
    <div className={`db-beams ${className}`} aria-hidden="true">
      {beams.map((b, i) => (
        <span key={i} className={`db-beam${b.gold ? " db-beam--gold" : ""}`}
          style={{ left: b.left, animationDuration: `${b.dur}s`, animationDelay: `${b.delay}s` }} />
      ))}
    </div>
  );
}

/* ---------- Icons ---------- */
function DBWhyIcon({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const f = { fill: "currentColor", stroke: "none" };
  switch (i) {
    case 0: // Regulatory clarity — shield/check
      return (<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 2.5v6c0 4.2-3 7.4-7 9-4-1.6-7-4.8-7-9v-6z" {...p} /><path d="M8.8 12l2.2 2.2 4.2-4.6" {...p} /></svg>);
    case 1: // Institutional capital — vault/coins
      return (<svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="6" rx="7" ry="2.6" {...p} /><path d="M5 6v6c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6V6" {...p} /><path d="M5 12v5c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6v-5" {...p} /></svg>);
    case 2: // Global founders — globe + people
      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>);
    case 3: // Tokenization / RWA — token
      return (<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5" {...p} /><circle cx="12" cy="12" r="3.4" {...f} /><path d="M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3" {...p} /></svg>);
    default: // Government-backed innovation — building + spark
      return (<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h16" {...p} /><path d="M6 20V8l6-4 6 4v12" {...p} /><rect x="10" y="13" width="4" height="7" {...p} /><path d="M12 8.5v2" {...p} /></svg>);
  }
}

function DBReasonIcon({ children }) {
  return (
    <span className="db-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>
  );
}

/* ---------- Hero ---------- */
function DBHero({ navigate }) {
  const stats = [
    { n: "80+", l: "Projects across cycles" },
    { n: "Dubai → Global", l: "NY · London · Singapore · Toronto" },
  ];
  return (
    <section className="db-hero">
      <div className="db-hero__bg" aria-hidden="true">
        <div className="db-hero__photo"></div>
        <div className="db-hero__sun"></div>
        <div className="db-hero__shimmer"></div>
        <div className="db-hero__grade"></div>
        <div className="db-hero__grid"></div>
        <div className="db-hero__sweep"></div>
        <DBBeams className="db-hero__beams" />
        <div className="db-hero__scrim"></div>
      </div>
      <div className="container">
        <div className="db-hero__inner">
          <span className="db-hero__chip">
            <span className="db-hero__chip-dot"></span>
            MultiChain Advisors · Dubai
          </span>
          <h1 className="db-hero__title">
            Dubai's leading <span className="db-em">Web3 consulting</span> &amp; <span className="db-em db-em--gold">AI advisory</span> partner for capital markets.
          </h1>
          <p className="db-hero__sub">
            MCA brings institutional grade Web3, AI, and emerging technology consulting to that market, combining
            capital markets expertise, sharp strategy, and full-service execution for the ventures defining the next
            financial era. We turn ideas into execution.
          </p>
          <div className="db-hero__ctas">
            <Button variant="teal" size="lg" onClick={dbOpenForm} withArrow>Book a Strategy Call</Button>
            <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>View Case Studies</Button>
          </div>
          <div className="db-hero__stats">
            {stats.map((s, i) => (
              <div key={i} className="db-hero__stat">
                <span className="db-hero__stat-n">{s.n}</span>
                <span className="db-hero__stat-l">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Intro: Why Dubai ---------- */
function DBIntro() {
  const focus = [
    "Web3 strategy consulting & tokenization advisory",
    "AI advisory & enterprise AI transformation",
    "Web3 marketing, PR, and SEO growth systems",
    "Capital markets & institutional digital asset strategy",
    "Emerging technology adoption and execution",
  ];
  return (
    <section className="db-sec db-intro">
      <div className="container">
        <DBReveal className="db-sec__head">
          <span className="db-eyebrow">Why Dubai</span>
          <h2 className="db-h2">
            Why Web3, AI &amp; capital markets firms <span className="db-em">choose Dubai.</span>
          </h2>
        </DBReveal>
        <DBReveal delay={80}>
          <div className="db-intro__grid">
            <div className="db-intro__copy">
              <p>
                Dubai has become a global hub for Web3 consulting, blockchain innovation, AI adoption, and tokenized
                capital markets.
              </p>
              <p>
                With VARA regulation, DMCC's blockchain ecosystem, and strong institutional capital inflows, Dubai is
                where Web3 and emerging technologies move from theory to execution.
              </p>
              <p>
                MCA is a Dubai-based Web3 consulting and AI advisory firm. We help teams turn complexity into
                execution, and execution into market leadership.
              </p>
            </div>
            <div className="db-intro__list">
              {focus.map((t, i) => (
                <div key={i} className="db-focus">
                  <span className="db-focus__n">{String(i + 1).padStart(2, "0")}</span>
                  <span className="db-focus__t">{t}</span>
                </div>
              ))}
            </div>
          </div>
        </DBReveal>
      </div>
    </section>
  );
}

/* ---------- Why Dubai matters (proof grid) ---------- */
const DB_WHY = [
  { t: "Regulatory clarity", d: "VARA, DIFC, and ADGM give Web3 and digital-asset firms a clear, credible framework to build inside.", feat: true },
  { t: "Institutional capital inflows", d: "Deep, active pools of institutional and sovereign capital moving into digital assets." },
  { t: "Global founders & AI companies", d: "A dense concentration of Web3 founders and AI companies relocating to and scaling from Dubai." },
  { t: "Tokenization & RWA experimentation", d: "Real-world asset tokenization is being piloted and deployed, not just theorized." },
  { t: "Government-backed innovation", d: "State-supported ecosystems and free zones built to accelerate emerging technology." },
];
function DBWhyDubai() {
  return (
    <section className="db-sec db-whysec">
      <div className="container">
        <DBReveal className="db-sec__head">
          <span className="db-eyebrow">The case for the market</span>
          <h2 className="db-h2">
            Why Dubai matters for <span className="db-em db-em--gold">Web3, AI &amp; emerging tech.</span>
          </h2>
          <p className="db-lede">
            Dubai concentrates everything modern digital infrastructure needs, where Web3 consulting, AI advisory,
            and capital markets innovation converge into real deployment.
          </p>
        </DBReveal>
        <DBReveal delay={100}>
          <div className="db-why">
            {DB_WHY.map((w, i) => (
              <div key={i} className={"db-why__cell" + (w.feat ? " db-why__cell--feat" : "")}>
                <span className="db-why__icon"><DBWhyIcon i={i} /></span>
                <h3 className="db-why__t">{w.t}</h3>
                <p className="db-why__d">{w.d}</p>
              </div>
            ))}
          </div>
        </DBReveal>
      </div>
    </section>
  );
}

/* ---------- Services ---------- */
const DB_SERVICES = [
  {
    title: "Web3 Strategy Consulting",
    tag: "Strategy",
    problem: "Building without a strategy is how projects fail quietly. We build the full go-to-market architecture before a dollar of execution is spent: narrative, audience, positioning, and channel mix, mapped from pre-launch to post-TGE for Dubai's capital-rich, regulation-aware market.",
    includes: [
      "Go-to-market & token launch planning",
      "Positioning & messaging",
      "Competitive analysis",
      "Investor decks",
      "Growth milestone & KPI planning",
    ],
  },
  {
    title: "Capital Markets & Institutional Advisory",
    tag: "Capital",
    problem: "Institutional products need institutional rigor, and generic crypto marketing breaks on contact. We bridge TradFi credibility with Web3 fluency for the family offices, sovereign funds, and HNWIs Dubai concentrates like almost nowhere else.",
    includes: [
      "Tokenomics & business model advisory",
      "Ecosystem fit",
      "Regulatory positioning for VARA, DIFC & ADGM",
      "Capital raise advisory & warm investor introductions",
      "M&A & partnership structuring",
    ],
  },
  {
    title: "Web3 PR",
    tag: "PR",
    problem: "Narrative is infrastructure, and most agencies cover one media world, not both. We secure earned media across Tier-1 crypto and finance press, manage reputation, and represent you accurately in English and Arabic for MENA.",
    includes: [
      "Tier-1 crypto & finance placements",
      "Press strategy",
      "Founder thought leadership",
      "Crisis communications",
      "Event PR at Token2049, GITEX & Future Blockchain Summit",
      "Arabic-language PR",
    ],
  },
  {
    title: "Web3 SEO & AEO",
    tag: "Search",
    problem: "Projects that live on paid and social go fragile the moment budgets or algorithms shift. We build the organic foundation that compounds, capturing the investors, developers, and institutional buyers doing real due diligence.",
    includes: [
      "Technical SEO",
      "Web3 keyword & content strategy",
      "Whitepapers & long-form content",
      "Crypto-native backlinks",
      "Local SEO for Dubai & MENA",
      "Monthly reporting",
    ],
  },
  {
    title: "Full-Service Marketing for Capital Markets Firms",
    tag: "Marketing",
    problem: "Institutional audiences are sophisticated, skeptical, and drowning in noise. We build campaigns that satisfy compliance, earn press, and move capital, all at once.",
    includes: [
      "Institutional investor communications",
      "RWA & tokenized asset marketing",
      "Compliant content for VARA & DFSA",
      "Professional channel strategy",
      "Event sponsorship",
      "Account-based marketing",
    ],
  },
  {
    title: "Community Management & Growth",
    tag: "Community",
    problem: "Community is the moat, but moderation alone never builds one. We design, run, and activate communities that turn interest into on-chain participation and loyalty.",
    includes: [
      "Community strategy & architecture",
      "Moderation & AMAs",
      "Ambassador & KOL programs",
      "Telegram & Discord growth",
      "Sentiment monitoring & crisis response",
    ],
  },
];

function DBServiceGlyph({ i }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const g = [
    // 0 Strategy — target
    (<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>),
    // 1 Capital — coin exchange
    (<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>),
    // 2 PR — broadcast
    (<React.Fragment><path d="M4 9.5v5l9 4.5V5z" {...p} /><path d="M13 7c2 1 2 9 0 10" {...p} /><path d="M17 5c3.4 2 3.4 12 0 14" {...p} /></React.Fragment>),
    // 3 Search / AEO — magnifier
    (<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.5h5M10.5 8v5" {...p} /></React.Fragment>),
    // 4 Marketing — growth bars + arrow
    (<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>),
    // 5 Community — people network
    (<React.Fragment><circle cx="9" cy="8" r="3" {...p} /><circle cx="17.2" 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>),
  ];
  return (
    <span className="db-svc__glyph" aria-hidden="true">
      <svg width="22" height="22" viewBox="0 0 24 24">{g[i] || g[0]}</svg>
    </span>
  );
}

function DBServiceCard({ s, i }) {
  const [open, setOpen] = useDB(i === 0);
  return (
    <article className={"db-svc" + (open ? " db-svc--open" : "")}>
      <div className="db-svc__top">
        <span className="db-svc__glyph-tile"><DBServiceGlyph i={i} /></span>
        <span className="db-svc__tag">{s.tag}</span>
      </div>
      <h3 className="db-svc__title">{s.title}</h3>
      <div className="db-svc__problem">
        <span className="db-svc__plabel"><span className="db-svc__pdot"></span>The problem</span>
        <p>{s.problem}</p>
      </div>
      <button className="db-svc__toggle" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span className="db-svc__toggle-txt">{open ? "Hide what we deliver" : "What we deliver"}</span>
        <span className="db-svc__chev" aria-hidden="true"></span>
      </button>
      <div className="db-svc__incl">
        <div className="db-svc__incl-inner">
          <ul className="db-svc__list">
            {s.includes.map((it) => (<li key={it}><DBCheck />{it}</li>))}
          </ul>
        </div>
      </div>
    </article>
  );
}

function DBServices() {
  return (
    <section className="db-sec db-servicessec">
      <div className="container">
        <DBReveal className="db-sec__head">
          <span className="db-eyebrow">What we deliver</span>
          <h2 className="db-h2">
            How We Move You <span className="db-em">Forward.</span>
          </h2>
          <p className="db-lede">
            Each practice solves a specific way ambitious ventures stall in Dubai's capital-rich, regulation-aware
            market.
          </p>
        </DBReveal>
        <div className="db-svc__grid">
          {DB_SERVICES.map((s, i) => (
            <DBReveal key={i} delay={(i % 2) * 90} className="db-svc__cell">
              <DBServiceCard s={s} i={i} />
            </DBReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- MCA in Dubai (photo mosaic) ---------- */
const DB_GALLERY = [
  { src: "assets/team-life/dubai-stage.jpg", tag: "Main stage", cap: "Where capital, narrative, and the next cycle meet", area: "a" },
  { src: "assets/team-life/05.jpg", tag: "Panels", cap: "Shaping the infrastructure conversation", area: "b" },
  { src: "assets/team-life/07.jpg", tag: "Fireside", cap: "Founder-to-founder, on the record", area: "c" },
  { src: "assets/team-life/01.jpg", tag: "In the room", cap: "Operators, builders & allocators", area: "d" },
  { src: "assets/team-life/02.jpg", tag: "On the ground", cap: "Representing portfolio companies live", area: "e" },
];

function DBGallery() {
  return (
    <section className="db-sec db-gallerysec">
      <div className="container">
        <DBReveal className="db-sec__head">
          <span className="db-eyebrow">MCA in Dubai</span>
          <h2 className="db-h2">
            MCA Is Where <span className="db-em">Market Momentum Happens.</span>
          </h2>
          <p className="db-lede">
            From main-stage conferences to private investor conversations, we're on the ground in Dubai's Web3, AI,
            and capital markets ecosystem.
          </p>
        </DBReveal>
        <DBReveal delay={90}>
          <div className="db-gal">
            {DB_GALLERY.map((g, i) => (
              <figure key={i} className="db-gal__tile" style={{ gridArea: g.area }}>
                <img src={g.src} alt={g.cap} loading="lazy" />
                <span className="db-gal__frame" aria-hidden="true"></span>
                <figcaption className="db-gal__cap">
                  <span className="db-gal__txt">{g.cap}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </DBReveal>
      </div>
    </section>
  );
}

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

function DBLogoRow({ 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 DBTrusted() {
  return (
    <section className="db-sec db-trustedsec">
      <div className="container">
        <DBReveal>
          <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">
              <DBLogoRow items={DB_LOGO_FILES} reverse={false} duration={120} />
            </div>
          </div>
        </DBReveal>
      </div>
    </section>
  );
}

/* ---------- Positioning: on the ground ---------- */
function DBPositioning() {
  const events = [
    { n: "Token2049", m: "The Dubai flagship" },
    { n: "GITEX Global", m: "Enterprise & emerging tech" },
    { n: "Future Blockchain Summit", m: "Institutional Web3" },
    { n: "Private gatherings", m: "Where capital moves" },
  ];
  return (
    <section className="db-sec db-possec">
      <div className="container">
        <DBReveal className="db-sec__head">
          <span className="db-eyebrow">MCA in Dubai</span>
          <h2 className="db-h2">
            Where Web3 strategy <span className="db-em">meets execution.</span>
          </h2>
        </DBReveal>
        <DBReveal delay={80}>
          <div className="db-pos__feature">
            <div className="db-pos__body">
              <div className="db-pos__kicker">On the ground</div>
              <h3 className="db-pos__title">Proven Web3 marketing strategies in Dubai.</h3>
              <p className="db-pos__text">
                MCA operates on the ground across Dubai's most important ecosystems, including Token2049, GITEX,
                Future Blockchain Summit, and the private institutional gatherings where capital actually moves.
              </p>
              <p className="db-pos__text">
                We don't treat Dubai as a distribution channel, but as an execution market. Through precise Web3
                marketing strategies, we build presence, shape narratives, and activate the right relationships in
                real time, ensuring your positioning reaches the rooms where decisions are actually made.
              </p>
            </div>
            <div className="db-pos__side">
              <span className="db-pos__side-label">Where we activate</span>
              {events.map((e) => (
                <div key={e.n} className="db-pos__event">
                  <span className="db-pos__event-dot"></span>
                  <span className="db-pos__event-name">{e.n}</span>
                  <span className="db-pos__event-meta">{e.m}</span>
                </div>
              ))}
            </div>
          </div>
        </DBReveal>
      </div>
    </section>
  );
}

/* ---------- Why MCA ---------- */
function DBReasons() {
  const reasons = [
    { t: "Web3 + AI native strategy", d: "We operate at the intersection of Web3 consulting, AI advisory, and emerging technologies, not as an agency layer, but as strategic operators.",
      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: "80+ projects across cycles", d: "From DeFi protocols to infrastructure, AI-native startups, and capital markets firms, built and scaled through every market.",
      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-led execution", d: "We don't sell campaigns. We design systems that compound: strategy first, execution as the delivery 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" fill="currentColor" stroke="none" /></React.Fragment>) },
    { t: "Institutional & startup fluency", d: "We work with both early-stage founders and large financial institutions, and speak credibly to each.",
      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: "Dubai embedded, globally connected", d: "Local execution in Dubai with global reach across New York, London, Singapore, and APAC.",
      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>) },
    { t: "Activation that compounds", d: "We run creator and KOL programs, build community systems with performance-based distribution, and drive post-launch retention, so growth turns into measurable outcomes.",
      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>) },
  ];
  return (
    <section className="db-sec db-reasonssec">
      <div className="container">
        <DBReveal className="db-sec__head">
          <span className="db-eyebrow">Why MCA</span>
          <h2 className="db-h2">
            Why Web3 &amp; capital markets leaders <span className="db-em">choose MCA.</span>
          </h2>
        </DBReveal>
        <div className="db-reasons__grid">
          {reasons.map((r, i) => (
            <DBReveal key={i} delay={(i % 3) * 80}>
              <div className="db-reason">
                <DBReasonIcon>{r.ic}</DBReasonIcon>
                <h3 className="db-reason__title">{r.t}</h3>
                <p className="db-reason__text">{r.d}</p>
              </div>
            </DBReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function DBFinalCTA({ navigate }) {
  const tags = [
    "Web3 consulting & marketing",
    "AI advisory & enterprise AI",
    "Tokenization & capital markets",
    "Emerging technologies & digital infrastructure",
  ];
  return (
    <section className="db-final">
      <div className="container">
        <DBReveal>
          <div className="db-final__block">
            <DBBeams />
            <span className="db-eyebrow db-final__eyebrow">Build in Dubai</span>
            <h2 className="db-final__title">
              Ready to build your Web3, AI or capital markets strategy <span className="db-em db-em--gold">in Dubai?</span>
            </h2>
            <p className="db-final__sub">
              MCA partners with founders, financial institutions, and emerging technology companies. If you're
              preparing for your next raise, launch, expansion, or institutional strategy shift, we help you align
              strategy, narrative, and execution.
            </p>
            <div className="db-final__tags">
              {tags.map((t) => <span key={t} className="db-final__tag">{t}</span>)}
            </div>
            <div className="db-final__ctas">
              <Button variant="teal" size="lg" onClick={dbOpenForm} withArrow>Book a Strategy Call</Button>
              <Button variant="secondary" size="lg" onClick={() => navigate("/case-studies")}>View Case Studies</Button>
            </div>
          </div>
        </DBReveal>
      </div>
    </section>
  );
}

/* ---------- Page ---------- */
function DubaiPage({ navigate }) {
  return (
    <div className="db-page" data-screen-label="Dubai">
      <DBHero navigate={navigate} />
      <DBIntro />
      <DBWhyDubai />
      <DBServices />
      <DBGallery />
      <DBTrusted />
      <DBPositioning />
      <DBReasons />
      <DBFinalCTA navigate={navigate} />
    </div>
  );
}

Object.assign(window, { DubaiPage });