// Shared icons + atoms used across the three directions.
// All icons are stroke-based SVG, currentColor-driven so they tint by theme.

const Icon = ({ d, size = 22, stroke = 1.6, fill = 'none', children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    {d && <path d={d} />}
    {children}
  </svg>
);

const Icons = {
  lock:    (p) => <Icon size={p.size} stroke={p.stroke}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></Icon>,
  unlock:  (p) => <Icon size={p.size} stroke={p.stroke}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 7.5-2"/></Icon>,
  fan:     (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="12" cy="12" r="2"/><path d="M12 10c-1-3 .5-6 3-6s3 3 2 5M14 12c3-1 6 .5 6 3s-3 3-5 2M12 14c1 3-.5 6-3 6s-3-3-2-5M10 12c-3 1-6-.5-6-3s3-3 5-2"/></Icon>,
  engine:  (p) => <Icon size={p.size} stroke={p.stroke}><path d="M5 9h2V7h4v2h4V7h2v2h2v6h-2v2h-4v-2H8l-3 3v-3H3v-6h2z"/></Icon>,
  horn:    (p) => <Icon size={p.size} stroke={p.stroke}><path d="M11 5L5 9H3v6h2l6 4V5z"/><path d="M15 9a4 4 0 0 1 0 6"/><path d="M18 6a8 8 0 0 1 0 12"/></Icon>,
  flash:   (p) => <Icon size={p.size} stroke={p.stroke}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></Icon>,
  fuel:    (p) => <Icon size={p.size} stroke={p.stroke}><path d="M4 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16"/><path d="M3 21h13"/><path d="M15 8h2a2 2 0 0 1 2 2v7a2 2 0 0 0 2 2"/><path d="M7 7h5"/></Icon>,
  battery: (p) => <Icon size={p.size} stroke={p.stroke}><rect x="3" y="7" width="16" height="10" rx="2"/><path d="M21 11v2"/><path d="M7 10v4M11 10v4"/></Icon>,
  tire:    (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/></Icon>,
  map:     (p) => <Icon size={p.size} stroke={p.stroke}><path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z"/><path d="M9 4v14M15 6v14"/></Icon>,
  pin:     (p) => <Icon size={p.size} stroke={p.stroke}><path d="M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></Icon>,
  wrench:  (p) => <Icon size={p.size} stroke={p.stroke}><path d="M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 1 5.4-5.4l-2.5 2.5-1.4-1.4 2.5-2.5z"/></Icon>,
  bell:    (p) => <Icon size={p.size} stroke={p.stroke}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8"/><path d="M10 21a2 2 0 0 0 4 0"/></Icon>,
  user:    (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></Icon>,
  car:     (p) => <Icon size={p.size} stroke={p.stroke}><path d="M5 17h14"/><path d="M5 17v-4l2-5h10l2 5v4"/><circle cx="8" cy="17" r="2"/><circle cx="16" cy="17" r="2"/></Icon>,
  chev:    (p) => <Icon size={p.size} stroke={p.stroke}><path d="M9 6l6 6-6 6"/></Icon>,
  chevDown:(p) => <Icon size={p.size} stroke={p.stroke}><path d="M6 9l6 6 6-6"/></Icon>,
  chevUp:  (p) => <Icon size={p.size} stroke={p.stroke}><path d="M6 15l6-6 6 6"/></Icon>,
  plus:    (p) => <Icon size={p.size} stroke={p.stroke}><path d="M12 5v14M5 12h14"/></Icon>,
  close:   (p) => <Icon size={p.size} stroke={p.stroke}><path d="M6 6l12 12M18 6L6 18"/></Icon>,
  menu:    (p) => <Icon size={p.size} stroke={p.stroke}><path d="M4 7h16M4 12h16M4 17h16"/></Icon>,
  search:  (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></Icon>,
  arrow:   (p) => <Icon size={p.size} stroke={p.stroke}><path d="M5 12h14M13 5l7 7-7 7"/></Icon>,
  sos:     (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16v.1"/></Icon>,
  doc:     (p) => <Icon size={p.size} stroke={p.stroke}><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></Icon>,
  wallet:  (p) => <Icon size={p.size} stroke={p.stroke}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M16 14h2"/></Icon>,
  globe:   (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></Icon>,
  gear:    (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8L4.2 7a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></Icon>,
  qmark:   (p) => <Icon size={p.size} stroke={p.stroke}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-1 .4-1.5 1-1.5 2"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></Icon>,
  check:   (p) => <Icon size={p.size} stroke={p.stroke}><path d="M5 13l4 4L19 7"/></Icon>,
  signal:  (p) => <Icon size={p.size} stroke={p.stroke}><path d="M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0"/><circle cx="12" cy="19" r="1" fill="currentColor"/></Icon>,
  thermo:  (p) => <Icon size={p.size} stroke={p.stroke}><path d="M10 14V5a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0z"/></Icon>,
  charge:  (p) => <Icon size={p.size} stroke={p.stroke}><path d="M13 3l-8 11h6l-1 7 8-11h-6l1-7z"/></Icon>,
  oil:     (p) => <Icon size={p.size} stroke={p.stroke}><path d="M12 3l5 7a5 5 0 1 1-10 0z"/></Icon>,
};

// Top-down minimal car silhouette (used by Find My Car + status hero).
function CarTopdown({ width = 180, color = '#7B1B1B', stroke = '#fff', strokeOpacity = 0.08 }) {
  return (
    <svg width={width} viewBox="0 0 100 200" fill="none" style={{ display: 'block' }}>
      {/* body */}
      <path d="M20 30 Q22 18 35 14 L65 14 Q78 18 80 30 L82 80 L82 150 Q80 180 65 186 L35 186 Q20 180 18 150 L18 80 Z"
            fill={color} stroke={stroke} strokeOpacity={strokeOpacity} strokeWidth="1"/>
      {/* hood crease */}
      <path d="M30 32 L40 24 L60 24 L70 32" stroke="rgba(0,0,0,0.25)" strokeWidth="1.2" fill="none"/>
      {/* windshield */}
      <path d="M28 60 L30 40 L70 40 L72 60 Z" fill="rgba(0,0,0,0.55)"/>
      {/* roof glass */}
      <rect x="28" y="62" width="44" height="62" rx="6" fill="rgba(0,0,0,0.4)"/>
      {/* rear window */}
      <path d="M28 126 L30 152 L70 152 L72 126 Z" fill="rgba(0,0,0,0.5)"/>
      {/* mirrors */}
      <ellipse cx="16" cy="50" rx="4" ry="6" fill={color}/>
      <ellipse cx="84" cy="50" rx="4" ry="6" fill={color}/>
      {/* headlights */}
      <path d="M22 22 L30 18 L30 24 L22 28 Z" fill="rgba(255,240,200,0.85)"/>
      <path d="M78 22 L70 18 L70 24 L78 28 Z" fill="rgba(255,240,200,0.85)"/>
      {/* tail lights */}
      <rect x="22" y="172" width="9" height="6" rx="1" fill="rgba(220,60,60,0.7)"/>
      <rect x="69" y="172" width="9" height="6" rx="1" fill="rgba(220,60,60,0.7)"/>
    </svg>
  );
}

// Side-view silhouette (used in service / cards).
function CarSide({ width = 200, color = '#7B1B1B', muted = false }) {
  const c = muted ? 'rgba(255,255,255,0.18)' : color;
  return (
    <svg width={width} viewBox="0 0 240 90" fill="none" style={{ display: 'block' }}>
      <path d="M10 70 Q10 60 18 58 L40 56 Q52 38 78 36 L150 36 Q180 36 200 52 L220 56 Q232 58 232 68 L232 74 L10 74 Z" fill={c}/>
      <path d="M60 56 Q72 42 90 42 L140 42 Q160 42 174 56 Z" fill="rgba(0,0,0,0.55)"/>
      <path d="M118 42 L118 56" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
      <circle cx="60" cy="74" r="14" fill="#111"/><circle cx="60" cy="74" r="6" fill="#333"/>
      <circle cx="190" cy="74" r="14" fill="#111"/><circle cx="190" cy="74" r="6" fill="#333"/>
    </svg>
  );
}

// Tiny KPI ring (used in vehicle status grids).
function Ring({ pct = 70, size = 64, stroke = 6, color = '#E03B3B', track = 'rgba(255,255,255,0.08)', label }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <circle cx={size/2} cy={size/2} r={r} stroke={track} strokeWidth={stroke} fill="none"/>
      <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} fill="none"
              strokeLinecap="round" strokeDasharray={c}
              strokeDashoffset={c * (1 - pct/100)}
              transform={`rotate(-90 ${size/2} ${size/2})`}/>
      {label && (
        <text x="50%" y="50%" textAnchor="middle" dominantBaseline="central"
              style={{ fontSize: size * 0.28, fontWeight: 600, fill: 'currentColor', fontFamily: 'inherit' }}>
          {label}
        </text>
      )}
    </svg>
  );
}

// Map placeholder — abstract street grid for Find My Car backgrounds.
function MapBg({ dark = true, hue = 'cool' }) {
  const base = dark ? '#13181E' : '#E8E2D6';
  const road = dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.08)';
  const major = dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.14)';
  const water = dark ? '#0F2030' : '#BDD9E8';
  const park = dark ? '#13251A' : '#CFE0C6';
  return (
    <svg width="100%" height="100%" viewBox="0 0 400 700" preserveAspectRatio="xMidYMid slice"
         style={{ position: 'absolute', inset: 0 }}>
      <rect width="400" height="700" fill={base}/>
      {/* park */}
      <path d="M-20 380 Q120 340 180 420 Q220 480 140 540 Q40 580 -20 520 Z" fill={park}/>
      {/* river / lake (Hồ Gươm-ish) */}
      <ellipse cx="290" cy="220" rx="110" ry="55" fill={water} transform="rotate(-18 290 220)"/>
      {/* grid roads */}
      {[60, 130, 230, 340, 460, 560].map((y) => (
        <line key={'h'+y} x1="-30" y1={y} x2="430" y2={y} stroke={road} strokeWidth="14"/>
      ))}
      {[40, 130, 240, 320, 380].map((x) => (
        <line key={'v'+x} x1={x} y1="-30" x2={x} y2="730" stroke={road} strokeWidth="10"/>
      ))}
      {/* major */}
      <line x1="-30" y1="450" x2="430" y2="450" stroke={major} strokeWidth="18"/>
      <line x1="180" y1="-30" x2="180" y2="730" stroke={major} strokeWidth="16"/>
      {/* building blocks */}
      {[
        [50,90,40,30],[100,90,60,30],[200,90,80,30],[300,90,50,30],
        [50,160,40,60],[100,160,60,40],[200,260,30,40],[260,260,30,40],
        [50,260,40,60],[100,260,40,60],[40,490,90,50],[200,490,50,60],
        [260,490,80,50],[50,580,60,40],[150,580,80,40],[260,580,90,50],
      ].map(([x,y,w,h], i) => (
        <rect key={i} x={x} y={y} width={w} height={h}
              fill={dark ? 'rgba(255,255,255,0.045)' : 'rgba(0,0,0,0.06)'} rx="2"/>
      ))}
    </svg>
  );
}

// Bar / progress used everywhere.
function Bar({ pct = 70, color, bg = 'rgba(255,255,255,0.08)', h = 6, radius = 999 }) {
  return (
    <div style={{ width: '100%', height: h, background: bg, borderRadius: radius, overflow: 'hidden' }}>
      <div style={{ width: pct + '%', height: '100%', background: color, borderRadius: radius,
                    transition: 'width .35s cubic-bezier(.4,0,.2,1)' }}/>
    </div>
  );
}

// Hook: tick a number toward target over ~600ms (used for fuel/lock changes).
function useAnimatedNumber(target, ms = 500) {
  const [v, setV] = React.useState(target);
  React.useEffect(() => {
    const start = v, t0 = performance.now();
    let raf;
    const loop = (t) => {
      const k = Math.min(1, (t - t0) / ms);
      const e = 1 - Math.pow(1 - k, 3);
      setV(start + (target - start) * e);
      if (k < 1) raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return v;
}

Object.assign(window, { Icon, Icons, CarTopdown, CarSide, Ring, MapBg, Bar, useAnimatedNumber });


// Mazda wing mark, extracted from assets/logos/logo.svg. Fill is
// currentColor so callers can tint it via the wrapping element's color.
const LOGO_VIEWBOX = "88.03 -21.90 773.94 640.12";
const LOGO_PATH = "M 475.3778,-1.142e-7 C 401.97604,-1.142e-7 339.75019,11.50826 283.21267,37.263334 246.53243,53.97281 211.6543,77.364635 180.60282,110.46307 c -16.19086,17.25799 -33.69628,42.24844 -44.28413,64.71322 -23.83479,50.57139 -26.38531,90.79109 -26.38531,122.20056 0,17.84083 0.12232,34.39479 4.84641,59.38129 3.63447,19.22335 9.91237,40.10321 20.67034,62.82225 36.86376,77.85052 105.00351,120.12418 147.00256,139.10718 56.96485,25.74727 118.25604,37.62223 192.92511,37.62223 74.66898,0 135.65356,-11.60412 192.4952,-37.62223 35.36942,-16.18954 108.05003,-57.69569 146.62259,-139.10718 25.09714,-52.9699 25.57103,-100.36602 25.57103,-122.20354 0,-33.11852 -2.95742,-73.09412 -26.5481,-122.20056 C 777.97625,101.19156 715.82116,59.909231 667.43876,37.751924 611.65919,12.206921 548.7795,-1.1419988e-7 475.3778,-1.142e-7 Z m 0,32.1515561142 c 62.30452,0 115.97916,11.016888 164.04413,35.07388 42.02317,21.032864 75.73803,49.352184 97.27789,81.836924 0,0 -66.74379,33.48451 -100.18812,50.14687 -18.57843,9.256 -78.12687,39.52816 -88.2004,48.7807 -12.10861,11.12197 -25.34685,30.21911 -33.98517,42.58623 -13.18067,18.8703 -26.49122,38.96593 -39.308,58.21719 -12.89826,-19.0885 -26.2179,-39.34689 -39.39854,-58.21719 -8.63826,-12.36712 -21.00358,-30.68815 -34.00325,-42.62841 -5.82581,-5.35105 -37.80646,-23.80221 -87.62131,-48.62997 L 213.09514,149.02921 C 237.44271,113.85878 268.88067,88.258353 310.90383,67.225436 358.96884,43.168498 413.07326,32.151556 475.3778,32.151556 Z M 769.83449,222.42795 c 8.27602,20.08373 11.85521,48.00826 11.85521,74.9489 0,49.68765 -9.64098,87.68948 -28.98498,124.04321 -8.2266,15.46053 -20.89026,34.52199 -37.96001,52.32425 -19.13456,19.9558 -44.10858,39.72885 -74.64429,54.98424 -48.27825,24.11938 -100.77906,35.43274 -164.72262,35.43274 -63.94362,0 -117.09557,-11.36079 -165.23396,-35.27289 -59.12022,-29.36739 -94.21233,-72.54799 -113.00233,-107.79406 -18.04159,-33.84236 -28.9397,-71.52791 -28.9397,-123.71749 0,-26.94064 3.87753,-55.0008 11.77372,-74.92177 42.83018,18.12162 85.21032,36.44417 127.34552,55.87091 50.81144,23.42682 82.93895,40.39537 89.44587,46.19611 10.64585,9.49047 27.27411,31.99575 32.29631,38.84969 13.74001,18.75128 27.15272,37.35802 40.65306,56.25383 h 10.43473 c 13.5004,-18.89581 27.13701,-37.73348 40.78581,-56.25383 5.44019,-7.38197 20.97619,-28.64502 30.92107,-37.51063 8.05068,-7.17703 36.02193,-22.41183 90.9839,-47.75234 42.1353,-19.42662 84.16246,-37.55925 126.99269,-55.68087 z";
function Logo({ size = 64, color }) {
  return (
    <svg width={size} height={size * 640 / 774} viewBox={LOGO_VIEWBOX}
         fill={color || 'currentColor'} style={{ display: 'block' }}>
      <path d={LOGO_PATH}/>
    </svg>
  );
}
Object.assign(window, { Logo });