// Shared small components.

const { useState, useEffect, useRef, useMemo, useCallback } = React;

function fmt(n) {
  return "$" + Math.round(n).toLocaleString("en-US");
}

function fmtAr(n) {
  // Arabic-Indic digits
  return "$" + Math.round(n).toLocaleString("ar-EG");
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal]:not(.in)");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.2, rootMargin: "0px 0px -10% 0px" }
    );
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  });
}

// Counter that animates 0 → target on viewport entry, once.
function useCounter(target, { duration = 1200, decimals = 0 } = {}) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  const [done, setDone] = useState(false);
  useEffect(() => {
    if (!ref.current || done) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (!e.isIntersecting) return;
          io.disconnect();
          const start = performance.now();
          const ease = (t) => 1 - Math.pow(1 - t, 3);
          const tick = (now) => {
            const p = Math.min(1, (now - start) / duration);
            setVal(target * ease(p));
            if (p < 1) requestAnimationFrame(tick);
            else setDone(true);
          };
          requestAnimationFrame(tick);
        });
      },
      { threshold: 0.4 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [target, duration, done]);
  return [ref, decimals ? val.toFixed(decimals) : Math.round(val)];
}

// Counter for arbitrary text with leading number — preserves formatting like "20–35%" / "1,000+"
function AnimatedStat({ text, duration = 1200, prefix = "" }) {
  // Extract first number from text
  const match = String(text).match(/(\d[\d,.]*)/);
  if (!match) return <span>{text}</span>;
  const raw = match[1];
  const target = parseFloat(raw.replace(/,/g, ""));
  const before = text.slice(0, match.index);
  const after = text.slice(match.index + raw.length);
  const [ref, val] = useCounter(target, { duration });
  const formatted = raw.includes(",") ? Math.round(val).toLocaleString("en-US") : Math.round(val);
  return <span ref={ref}>{before}{formatted}{after}</span>;
}

// Primary brand mark — spinning globe (Globe Loader design v2,
// 2026-05-26) + "CHINA · BRIDGE" wordmark. Same identity as the
// freight site. Renders via d3-geo + topojson loaded from CDN in
// index.html; topology fetched once and shared across nav + footer.
const _MENA_SET = new Set([
  "Saudi Arabia", "Yemen", "Oman", "United Arab Emirates", "Qatar", "Kuwait",
  "Bahrain", "Iraq", "Jordan", "Lebanon", "Syria", "Israel",
  "Palestine", "Turkey",
]);
let _worldPromise = null;
function _loadWorld() {
  if (_worldPromise) return _worldPromise;
  if (typeof d3 === "undefined" || typeof topojson === "undefined") {
    return Promise.reject(new Error("d3/topojson not loaded"));
  }
  _worldPromise = fetch("/data/countries-110m.json")
    .then((r) => r.json())
    .then((world) => {
      const countriesObj = world.objects.countries;
      const landObj = world.objects.land;
      const countries = topojson.feature(world, countriesObj);
      const land = topojson.feature(world, landObj);
      const borders = topojson.mesh(world, countriesObj, (a, b) => a !== b);
      const china = countries.features.find((f) => (f.properties || {}).name === "China") || null;
      const mena = {
        type: "FeatureCollection",
        features: countries.features.filter((f) => _MENA_SET.has((f.properties || {}).name)),
      };
      return { land, borders, china, mena };
    });
  return _worldPromise;
}

// Whirl band + lane seeds mirror the freight-side GlobeLoader so
// both surfaces animate identically.
const _WHIRL_SEED = [
  { r: 86, speed:  0.45, span: 0.95, w: 1.1, dash: [3, 5],   a: 0.55 },
  { r: 92, speed: -0.32, span: 1.20, w: 0.9, dash: [2, 4.5], a: 0.42 },
  { r: 98, speed:  0.22, span: 0.75, w: 0.8, dash: [1.5, 4], a: 0.30 },
];
const _LANES = [
  { r: 86,  speed:  0.45, phase: 0.0 },
  { r: 93,  speed: -0.32, phase: 2.1 },
  { r: 100, speed:  0.22, phase: 4.0 },
];

function BrandGlobe({ size = 72, whirlBands = 3, laneMarkers = 3, spinSpeed = 28 }) {
  const canvasRef = React.useRef(null);
  const dataRef = React.useRef(null);

  React.useEffect(() => {
    let cancelled = false;
    _loadWorld().then((world) => {
      if (!cancelled) dataRef.current = world;
    }).catch(() => {/* d3 not loaded yet — sphere outline still renders */});
    return () => { cancelled = true; };
  }, []);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas.width = size * dpr;
    canvas.height = size * dpr;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    ctx.scale(dpr, dpr);

    const center = size / 2;
    const scale = center / 100; // whirl/lane radii are in the 200×200 design grid
    const projection = d3.geoOrthographic()
      .scale(size * 0.36)
      .translate([center, center])
      .clipAngle(90);
    const path = d3.geoPath(projection, ctx);

    // Theme: bone outlines on the dark auto surface.
    const FG = "#efe9dd";
    const FG_RGB = "239,233,221";
    const SPHERE = "rgba(239,233,221,0.05)";
    const LAND = "rgba(239,233,221,0.08)";
    const GRAT = "rgba(239,233,221,0.10)";
    const HALO = "rgba(11,11,11,0.85)";

    const CHINA_LON = 110, CHINA_LAT = -28;
    const start = performance.now();
    let raf = 0;

    function drawWhirl(elapsed) {
      const n = Math.max(0, Math.min(3, whirlBands));
      if (n === 0) return;
      const tt = elapsed / 1000;
      ctx.save();
      for (let i = 0; i < n; i++) {
        const b = _WHIRL_SEED[i];
        const rot = tt * b.speed + i * 1.7;
        ctx.beginPath();
        ctx.setLineDash(b.dash);
        ctx.lineDashOffset = -tt * 8;
        ctx.arc(center, center, b.r * scale, rot, rot + b.span);
        ctx.strokeStyle = `rgba(${FG_RGB},${b.a})`;
        ctx.lineWidth = b.w;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(center, center, b.r * scale, rot + Math.PI, rot + Math.PI + b.span * 0.55);
        ctx.strokeStyle = `rgba(${FG_RGB},${b.a * 0.45})`;
        ctx.stroke();
      }
      ctx.setLineDash([]);
      ctx.restore();
    }

    function drawMarkers(elapsed) {
      const n = Math.max(0, Math.min(3, laneMarkers));
      if (n === 0) return;
      const tt = elapsed / 1000;
      for (let i = 0; i < n; i++) {
        const lane = _LANES[i];
        const ang = lane.phase + tt * lane.speed;
        const dir = Math.sign(lane.speed) || 1;
        const radius = lane.r * scale;
        // Tapered trail behind the dot
        const trailLen = 0.55;
        const segs = 3;
        for (let s = 0; s < segs; s++) {
          const a0 = ang - dir * ((trailLen * s) / segs);
          const a1 = ang - dir * ((trailLen * (s + 1)) / segs);
          const alpha = 0.55 * (1 - s / segs);
          ctx.beginPath();
          ctx.arc(center, center, radius, Math.min(a0, a1), Math.max(a0, a1));
          ctx.strokeStyle = `rgba(${FG_RGB},${alpha})`;
          ctx.lineWidth = 1.4 - s * 0.35;
          ctx.lineCap = "round";
          ctx.stroke();
        }
        const x = center + Math.cos(ang) * radius;
        const y = center + Math.sin(ang) * radius;
        ctx.beginPath();
        ctx.arc(x, y, 3.1, 0, Math.PI * 2);
        ctx.strokeStyle = HALO; ctx.lineWidth = 0.8; ctx.stroke();
        ctx.beginPath();
        ctx.arc(x, y, 2.0, 0, Math.PI * 2);
        ctx.fillStyle = FG; ctx.fill();
      }
    }

    const tick = (now) => {
      const elapsed = now - start;
      projection.rotate([CHINA_LON + (elapsed / 1000) * spinSpeed, CHINA_LAT]);
      ctx.clearRect(0, 0, size, size);

      // Whirl bands BEHIND globe so arcs hug the sphere.
      drawWhirl(elapsed);

      // Sphere disk
      ctx.beginPath(); path({ type: "Sphere" });
      ctx.fillStyle = SPHERE; ctx.fill();

      const d = dataRef.current;
      if (d) {
        ctx.beginPath(); path(d3.geoGraticule10());
        ctx.strokeStyle = GRAT; ctx.lineWidth = 0.5; ctx.stroke();

        ctx.beginPath(); path(d.land);
        ctx.fillStyle = LAND; ctx.fill();

        // MENA highlight — warm sand under borders
        if (d.mena) {
          ctx.beginPath(); path(d.mena);
          ctx.fillStyle = "rgba(230,193,120,0.55)"; ctx.fill();
        }

        // China — PRC flag red
        if (d.china) {
          ctx.beginPath(); path(d.china);
          ctx.fillStyle = "#DE2910"; ctx.fill();
        }

        ctx.beginPath(); path(d.borders);
        ctx.strokeStyle = FG; ctx.lineWidth = 0.55; ctx.lineJoin = "round"; ctx.stroke();

        ctx.beginPath(); path(d.land);
        ctx.strokeStyle = FG; ctx.lineWidth = 0.7; ctx.stroke();
      }

      // Sphere outline (crisp horizon)
      ctx.beginPath(); path({ type: "Sphere" });
      ctx.strokeStyle = FG; ctx.lineWidth = 0.9; ctx.stroke();

      // Lane markers IN FRONT so dots ride over the globe edge.
      drawMarkers(elapsed);

      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [size, whirlBands, laneMarkers, spinSpeed]);

  return (
    <canvas
      ref={canvasRef}
      style={{ width: size, height: size, display: "block", flexShrink: 0 }}
      aria-label="Loading"
      role="img"
    />
  );
}

// Wordmark = globe + "CHINA · BRIDGE" caps, identical to the freight site.
function Wordmark({ small = false }) {
  const px = small ? 56 : 76;
  const fontSize = small ? 12 : 15;
  const gap = small ? 10 : 12;
  return (
    <div style={{ display: "flex", alignItems: "center", gap }}>
      <BrandGlobe size={px} whirlBands={2} laneMarkers={2} spinSpeed={20} />
      <span
        style={{
          fontFamily: "var(--sans)",
          fontWeight: 500,
          fontSize,
          letterSpacing: "0.32em",
          textIndent: "0.32em",
          color: "var(--bone)",
          whiteSpace: "nowrap",
          lineHeight: 1,
          textTransform: "uppercase",
        }}
        aria-label="China Bridge"
      >
        CHINA · BRIDGE
      </span>
    </div>
  );
}

// Inline car silhouette — a stylized side view (placeholder until real photos)
function CarSilhouette({ palette = ["#1d3aa8", "#0c1530"], variant = "sedan" }) {
  const [c1, c2] = palette;
  const id = useMemo(() => "g" + Math.random().toString(36).slice(2, 8), []);
  // simple sedan / suv profile
  const isSUV = variant.toLowerCase().includes("suv");
  const isWagon = variant.toLowerCase().includes("brake");
  const roofY = isSUV ? 38 : isWagon ? 40 : 44;
  return (
    <svg viewBox="0 0 320 140" style={{ width: "100%", height: "100%", display: "block" }} preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={c1} stopOpacity="0.95" />
          <stop offset="100%" stopColor={c2} stopOpacity="0.95" />
        </linearGradient>
        <linearGradient id={id + "g"} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.18" />
          <stop offset="100%" stopColor="#fff" stopOpacity="0.02" />
        </linearGradient>
      </defs>
      {/* ground reflection */}
      <ellipse cx="160" cy="118" rx="120" ry="6" fill="#000" opacity="0.55" />
      {/* body */}
      <path
        d={`M 30 100
            L 60 100
            C 64 86, 80 78, 100 78
            L 130 78
            L 150 ${roofY}
            L 210 ${roofY}
            L 240 78
            L 260 78
            C 280 78, 290 88, 295 100
            L 305 100
            C 310 100, 312 105, 308 110
            L 35 110
            C 28 110, 26 104, 30 100 Z`}
        fill={`url(#${id})`}
        stroke="rgba(255,255,255,0.06)"
        strokeWidth="0.5"
      />
      {/* windows */}
      <path
        d={`M 105 80
            C 108 70, 118 64, 130 64
            L 148 64
            L 165 ${roofY + 4}
            L 195 ${roofY + 4}
            L 212 64
            L 235 64
            C 245 64, 252 70, 254 80 Z`}
        fill={`url(#${id}g)`}
        opacity="0.7"
      />
      {/* window divider */}
      <line x1="180" y1="64" x2="180" y2="80" stroke="rgba(255,255,255,0.18)" strokeWidth="1" />
      {/* wheels */}
      <circle cx="92" cy="108" r="14" fill="#0a0a0b" />
      <circle cx="92" cy="108" r="9" fill="#1a1a1f" stroke="rgba(255,255,255,0.12)" strokeWidth="0.5" />
      <circle cx="92" cy="108" r="3" fill="#2a2a30" />
      <circle cx="232" cy="108" r="14" fill="#0a0a0b" />
      <circle cx="232" cy="108" r="9" fill="#1a1a1f" stroke="rgba(255,255,255,0.12)" strokeWidth="0.5" />
      <circle cx="232" cy="108" r="3" fill="#2a2a30" />
      {/* headlight glow */}
      <ellipse cx="305" cy="92" rx="6" ry="2" fill="#fff5d8" opacity="0.6" />
      <ellipse cx="32" cy="92" rx="3" ry="1.5" fill="#ff5e5e" opacity="0.5" />
    </svg>
  );
}

// EV silhouette with rim light, headlight bars, reflective floor — Option A
function EVSilhouette() {
  return (
    <svg viewBox="0 0 900 520" preserveAspectRatio="xMidYMid meet" style={{ width: "100%", height: "100%", display: "block" }} aria-hidden="true">
      <defs>
        <linearGradient id="evbody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a1a1f" />
          <stop offset="50%" stopColor="#0e0e10" />
          <stop offset="100%" stopColor="#050506" />
        </linearGradient>
        <linearGradient id="evrim" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#e8732e" stopOpacity="0" />
          <stop offset="35%" stopColor="#e8732e" stopOpacity="0.85" />
          <stop offset="70%" stopColor="#ffb27a" stopOpacity="1" />
          <stop offset="100%" stopColor="#e8732e" stopOpacity="0" />
        </linearGradient>
        <linearGradient id="evfloor" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0a0a0b" stopOpacity="0" />
          <stop offset="40%" stopColor="#0a0a0b" stopOpacity="0.6" />
          <stop offset="100%" stopColor="#0a0a0b" stopOpacity="1" />
        </linearGradient>
        <radialGradient id="underglow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#e8732e" stopOpacity="0.55" />
          <stop offset="60%" stopColor="#e8732e" stopOpacity="0.08" />
          <stop offset="100%" stopColor="#e8732e" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="evwindow" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#26262d" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#0a0a0b" stopOpacity="0.95" />
        </linearGradient>
        <filter id="rimblur" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="1.4" />
        </filter>
        <filter id="lightblur" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2.2" />
        </filter>
      </defs>

      {/* under-car warm glow on floor */}
      <ellipse className="ev-underglow" cx="450" cy="395" rx="320" ry="42" fill="url(#underglow)" />

      {/* reflection (mirrored car, faded) */}
      <g transform="translate(0,790) scale(1,-1)" opacity="0.22">
        <path
          d="M 130 360
             C 160 320, 220 300, 280 296
             L 360 220
             C 380 200, 420 192, 460 192
             L 560 192
             C 600 192, 640 208, 660 232
             L 720 296
             C 760 300, 790 320, 810 356
             L 130 360 Z"
          fill="url(#evbody)"
        />
      </g>

      {/* car body — sleek EV sedan / shooting brake silhouette */}
      <g>
        {/* main body */}
        <path
          d="M 130 360
             C 160 320, 220 300, 280 296
             L 360 220
             C 380 200, 420 192, 460 192
             L 560 192
             C 600 192, 640 208, 660 232
             L 720 296
             C 760 300, 790 320, 810 356
             C 815 372, 805 384, 790 384
             L 150 384
             C 130 384, 122 374, 130 360 Z"
          fill="url(#evbody)"
        />

        {/* greenhouse / window */}
        <path
          d="M 300 296
             C 320 250, 360 226, 400 222
             L 555 222
             C 590 224, 620 244, 640 280
             L 660 296
             L 300 296 Z"
          fill="url(#evwindow)"
        />
        {/* window pillar (b-pillar suggestion) */}
        <line x1="478" y1="222" x2="478" y2="296" stroke="rgba(0,0,0,0.6)" strokeWidth="1.2" />

        {/* shoulder rim light — top edge along roof to hood */}
        <path
          d="M 280 296
             L 360 220
             C 380 200, 420 192, 460 192
             L 560 192
             C 600 192, 640 208, 660 232
             L 720 296"
          fill="none"
          stroke="url(#evrim)"
          strokeWidth="2.4"
          strokeLinecap="round"
          filter="url(#rimblur)"
        />
        {/* sharp inner highlight */}
        <path
          d="M 360 220
             C 380 200, 420 192, 460 192
             L 560 192
             C 600 192, 640 208, 660 232"
          fill="none"
          stroke="rgba(255,210,170,0.9)"
          strokeWidth="0.9"
        />

        {/* belt-line crease (subtle) */}
        <path
          d="M 180 332 L 800 332"
          stroke="rgba(232,115,46,0.08)"
          strokeWidth="1"
        />

        {/* front (right) headlight — thin horizontal bar */}
        <g className="ev-headlight">
          <rect x="772" y="334" width="36" height="3" rx="1.5" fill="#ffb27a" filter="url(#lightblur)" opacity="0.8" />
          <rect x="772" y="334" width="36" height="2" rx="1" fill="#fff1de" />
          {/* projection beam */}
          <path d="M 808 335 L 870 326 L 870 344 Z" fill="#e8732e" opacity="0.18" />
        </g>

        {/* rear (left) light bar — same modern signature */}
        <g className="ev-headlight">
          <rect x="132" y="334" width="32" height="3" rx="1.5" fill="#e8732e" filter="url(#lightblur)" opacity="0.55" />
          <rect x="132" y="334" width="32" height="2" rx="1" fill="#ffb27a" opacity="0.85" />
        </g>

        {/* wheels — flush, modern EV aero look */}
        <g>
          {/* rear */}
          <circle cx="240" cy="384" r="36" fill="#050506" />
          <circle cx="240" cy="384" r="26" fill="#16161a" stroke="rgba(255,255,255,0.06)" strokeWidth="0.5" />
          <circle cx="240" cy="384" r="14" fill="#0e0e10" />
          {/* aero spokes */}
          <g stroke="rgba(255,255,255,0.05)" strokeWidth="1" fill="none">
            <line x1="240" y1="362" x2="240" y2="406" />
            <line x1="222" y1="370" x2="258" y2="398" />
            <line x1="222" y1="398" x2="258" y2="370" />
            <line x1="218" y1="384" x2="262" y2="384" />
          </g>
          <circle cx="240" cy="384" r="3" fill="#1a1a1f" />
          {/* subtle rim light on top of wheel */}
          <path d="M 214 380 A 26 26 0 0 1 266 380" fill="none" stroke="rgba(232,115,46,0.35)" strokeWidth="0.8" />

          {/* front */}
          <circle cx="700" cy="384" r="36" fill="#050506" />
          <circle cx="700" cy="384" r="26" fill="#16161a" stroke="rgba(255,255,255,0.06)" strokeWidth="0.5" />
          <circle cx="700" cy="384" r="14" fill="#0e0e10" />
          <g stroke="rgba(255,255,255,0.05)" strokeWidth="1" fill="none">
            <line x1="700" y1="362" x2="700" y2="406" />
            <line x1="682" y1="370" x2="718" y2="398" />
            <line x1="682" y1="398" x2="718" y2="370" />
            <line x1="678" y1="384" x2="722" y2="384" />
          </g>
          <circle cx="700" cy="384" r="3" fill="#1a1a1f" />
          <path d="M 674 380 A 26 26 0 0 1 726 380" fill="none" stroke="rgba(232,115,46,0.35)" strokeWidth="0.8" />
        </g>

        {/* underbody soft warm glow strip */}
        <ellipse cx="470" cy="384" rx="240" ry="3" fill="#e8732e" opacity="0.35" filter="url(#lightblur)" />
      </g>

      {/* reflective floor fade */}
      <rect x="0" y="384" width="900" height="136" fill="url(#evfloor)" />
      {/* horizon hairline */}
      <line x1="0" y1="384" x2="900" y2="384" stroke="rgba(255,255,255,0.05)" strokeWidth="0.5" />
    </svg>
  );
}

// Hero backdrop — minimal: just a soft warm halo behind the car
function HeroBackdrop() {
  return (
    <div className="hero-img" aria-hidden="true">
      <div className="hero-grid" />
    </div>
  );
}

window.useReveal = useReveal;
window.useCounter = useCounter;
window.AnimatedStat = AnimatedStat;
window.LogoMark = LogoMark;
window.Wordmark = Wordmark;
window.CarSilhouette = CarSilhouette;
window.HeroBackdrop = HeroBackdrop;
window.EVSilhouette = EVSilhouette;

// Brand wordmarks — drawn as text in each brand's typographic style.
// Restrained, monochrome bone color so they read as editorial labels not stickers.
function BrandMark({ id, color = "var(--bone)" }) {
  const common = { fill: color };
  switch (id) {
    case "byd-seal":
    case "byd-atto-3":
      return (
        <svg viewBox="0 0 120 28" height="22" aria-label="BYD" style={{ display: "block" }}>
          <text x="0" y="22" {...common} style={{ fontFamily: "var(--sans)", fontSize: 24, fontWeight: 700, letterSpacing: "0.06em" }}>BYD</text>
        </svg>
      );
    case "zeekr-001":
      return (
        <svg viewBox="0 0 140 28" height="20" aria-label="ZEEKR" style={{ display: "block" }}>
          <text x="0" y="22" {...common} style={{ fontFamily: "var(--sans)", fontSize: 22, fontWeight: 500, letterSpacing: "0.32em" }}>ZEEKR</text>
        </svg>
      );
    case "hongqi-h5":
      return (
        <svg viewBox="0 0 160 28" height="20" aria-label="HONGQI" style={{ display: "block" }}>
          <text x="0" y="22" {...common} style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", letterSpacing: "0.06em" }}>Hongqi</text>
        </svg>
      );
    case "geely-coolray":
      return (
        <svg viewBox="0 0 140 28" height="20" aria-label="GEELY" style={{ display: "block" }}>
          <text x="0" y="22" {...common} style={{ fontFamily: "var(--sans)", fontSize: 20, fontWeight: 600, letterSpacing: "0.22em" }}>GEELY</text>
        </svg>
      );
    default:
      return null;
  }
}
window.BrandMark = BrandMark;
window.fmt = fmt;
window.fmtAr = fmtAr;