// ===== Data + Icons + Shared SVG components =====

// === Icons ===
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const paths = {
    cart: <><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M3 4h2l2.5 11.5a2 2 0 0 0 2 1.5h8a2 2 0 0 0 2-1.4L21 8H6"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></>,
    heart: <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/>,
    car: <><path d="M3 13l2-6a2 2 0 0 1 2-1.4h10a2 2 0 0 1 2 1.4l2 6"/><path d="M3 13h18v5a1 1 0 0 1-1 1h-1.5a1 1 0 0 1-1-1v-1H6.5v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><circle cx="7" cy="16" r="1"/><circle cx="17" cy="16" r="1"/></>,
    chat: <path d="M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z"/>,
    ar: <><path d="M3 7V4a1 1 0 0 1 1-1h3"/><path d="M21 7V4a1 1 0 0 0-1-1h-3"/><path d="M3 17v3a1 1 0 0 0 1 1h3"/><path d="M21 17v3a1 1 0 0 1-1 1h-3"/><circle cx="12" cy="12" r="4"/></>,
    tire: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2"/></>,
    wrench: <path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.8 2.8-2.5-2.5z"/>,
    spark: <path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4"/>,
    check: <path d="M5 12l4 4 10-10"/>,
    plus: <path d="M12 5v14M5 12h14"/>,
    minus: <path d="M5 12h14"/>,
    arrow: <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    arrowL: <><path d="M19 12H5"/><path d="M11 18l-6-6 6-6"/></>,
    arrowDown: <><path d="M12 5v14"/><path d="M6 13l6 6 6-6"/></>,
    close: <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></>,
    sliders: <><path d="M4 6h12M4 12h6M4 18h16"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="6" cy="18" r="2"/></>,
    map: <><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z"/><path d="M9 4v16M15 6v16"/></>,
    pin: <><path d="M12 21s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    truck: <><path d="M3 7h12v9H3z"/><path d="M15 11h4l2 3v2h-6"/><circle cx="7" cy="18" r="1.5"/><circle cx="18" cy="18" r="1.5"/></>,
    shield: <path d="M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z"/>,
    home: <><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></>,
    box: <><path d="M3 7l9-4 9 4-9 4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></>,
    settings: <><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.8l-.1-.1a2 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"/></>,
    logout: <><path d="M15 17l5-5-5-5"/><path d="M20 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></>,
    star: <path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z"/>,
    eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    drop: <path d="M12 2s6 8 6 13a6 6 0 0 1-12 0c0-5 6-13 6-13z"/>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></>,
    moon: <path d="M21 13A9 9 0 0 1 11 3a7 7 0 1 0 10 10z"/>,
    flag: <><path d="M4 21V4a1 1 0 0 1 1-1h12l-2 4 2 4H5"/></>,
    cam: <><path d="M3 8h4l2-3h6l2 3h4v11H3z"/><circle cx="12" cy="13" r="4"/></>,
    menu: <><path d="M4 6h16M4 12h16M4 18h16"/></>,
    phone: <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></>,
    lock: <><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    card: <><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h4"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{display:'block'}}>
      {paths[name]}
    </svg>
  );
};

// === Detailed tire SVG ===
const TireSVG = ({ size = 360, brand = 'RUTA', model = '', spec = '', accent = '#fdb827' }) => {
  return (
    <svg viewBox="0 0 400 400" width={size} height={size} style={{display:'block'}}>
      <defs>
        <radialGradient id="tireOuter" cx="35%" cy="32%">
          <stop offset="0%" stopColor="#3a3a3a"/>
          <stop offset="55%" stopColor="#161616"/>
          <stop offset="100%" stopColor="#050505"/>
        </radialGradient>
        <radialGradient id="rimGrad" cx="40%" cy="40%">
          <stop offset="0%" stopColor="#d8d8d8"/>
          <stop offset="60%" stopColor="#6d6d6d"/>
          <stop offset="100%" stopColor="#2a2a2a"/>
        </radialGradient>
        <radialGradient id="hubGrad" cx="40%" cy="40%">
          <stop offset="0%" stopColor="#999"/>
          <stop offset="100%" stopColor="#1a1a1a"/>
        </radialGradient>
        <filter id="softShadow"><feGaussianBlur stdDeviation="6"/></filter>
      </defs>
      {/* Ground shadow */}
      <ellipse cx="200" cy="370" rx="170" ry="14" fill="#000" opacity="0.5" filter="url(#softShadow)"/>
      {/* Outer rubber */}
      <circle cx="200" cy="200" r="190" fill="url(#tireOuter)"/>
      {/* Tread blocks (radial ticks) */}
      {Array.from({length: 60}).map((_, i) => {
        const a = (i * 6) * Math.PI / 180;
        const x1 = 200 + Math.cos(a) * 190;
        const y1 = 200 + Math.sin(a) * 190;
        const x2 = 200 + Math.cos(a) * 158;
        const y2 = 200 + Math.sin(a) * 158;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#000" strokeWidth="2" opacity="0.85"/>;
      })}
      {/* Tread groove ring */}
      <circle cx="200" cy="200" r="172" fill="none" stroke="#0a0a0a" strokeWidth="6"/>
      <circle cx="200" cy="200" r="158" fill="none" stroke="#2a2a2a" strokeWidth="1.5"/>
      {/* Sidewall */}
      <circle cx="200" cy="200" r="155" fill="#0e0e0e"/>
      {/* Brand text on sidewall (curved) */}
      <defs>
        <path id="brandArc" d="M 60 200 A 140 140 0 0 1 340 200" fill="none"/>
        <path id="modelArc" d="M 80 200 A 120 120 0 0 0 320 200" fill="none"/>
      </defs>
      <text fill={accent} fontFamily="Antonio, sans-serif" fontSize="22" fontWeight="700" letterSpacing="2">
        <textPath href="#brandArc" startOffset="50%" textAnchor="middle">{brand}</textPath>
      </text>
      <text fill="#888" fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="3">
        <textPath href="#modelArc" startOffset="50%" textAnchor="middle">{spec || model}</textPath>
      </text>
      {/* Inner ring before rim */}
      <circle cx="200" cy="200" r="118" fill="#1a1a1a"/>
      <circle cx="200" cy="200" r="118" fill="none" stroke="#000" strokeWidth="3"/>
      {/* Rim outer */}
      <circle cx="200" cy="200" r="112" fill="url(#rimGrad)"/>
      {/* Spokes - 5 spoke design */}
      {Array.from({length: 5}).map((_, i) => {
        const a = (i * 72 - 90);
        return (
          <g key={i} transform={`rotate(${a} 200 200)`}>
            <path d="M 200 100 L 215 120 L 210 195 L 190 195 L 185 120 Z" fill="url(#rimGrad)" stroke="#1a1a1a" strokeWidth="1"/>
            <path d="M 195 105 L 205 105 L 207 195 L 193 195 Z" fill="#888" opacity="0.5"/>
          </g>
        );
      })}
      {/* Hub */}
      <circle cx="200" cy="200" r="32" fill="url(#hubGrad)"/>
      <circle cx="200" cy="200" r="32" fill="none" stroke="#000" strokeWidth="2"/>
      {/* Hub center logo */}
      <circle cx="200" cy="200" r="20" fill="#0a0a0a"/>
      <text x="200" y="206" textAnchor="middle" fill={accent} fontFamily="Antonio, sans-serif" fontSize="16" fontWeight="700">R</text>
      {/* Lug nuts */}
      {Array.from({length: 5}).map((_, i) => {
        const a = (i * 72) * Math.PI / 180;
        const x = 200 + Math.cos(a) * 60;
        const y = 200 + Math.sin(a) * 60;
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="6" fill="#1a1a1a"/>
            <circle cx={x} cy={y} r="4" fill="#444"/>
          </g>
        );
      })}
      {/* Highlight */}
      <ellipse cx="170" cy="140" rx="60" ry="20" fill="#fff" opacity="0.05"/>
    </svg>
  );
};

// === Car silhouette SVG ===
const CarSilhouette = ({ size = 160, type = 'sedan', color = 'currentColor' }) => {
  const types = {
    sedan: <path d="M20 70 L40 50 L70 45 L100 42 L140 42 L165 50 L180 70 L185 80 L180 90 L165 90 L160 80 C160 70, 145 70, 145 80 L60 80 C60 70, 45 70, 45 80 L20 90 L15 80 L15 75 Z M70 50 L100 47 L100 65 L70 65 Z M105 47 L140 50 L155 65 L105 65 Z" fill={color}/>,
    suv: <path d="M20 80 L25 50 L50 40 L150 40 L175 50 L185 60 L190 80 L190 92 L175 92 L170 82 C170 72, 155 72, 155 82 L55 82 C55 72, 40 72, 40 82 L20 92 L15 85 Z M55 47 L100 45 L100 65 L55 65 Z M105 45 L150 47 L165 65 L105 65 Z" fill={color}/>,
    pickup: <path d="M10 80 L15 55 L40 50 L80 48 L80 70 L160 70 L165 55 L170 50 L185 55 L195 80 L195 92 L175 92 L170 82 C170 72, 155 72, 155 82 L55 82 C55 72, 40 72, 40 82 L10 92 Z M50 55 L80 53 L80 67 L50 67 Z" fill={color}/>,
    hatch: <path d="M25 75 L35 55 L65 45 L120 42 L155 50 L175 65 L180 80 L180 90 L165 90 L160 80 C160 70, 145 70, 145 80 L60 80 C60 70, 45 70, 45 80 L25 90 L20 80 Z M65 50 L100 47 L100 65 L65 65 Z M105 47 L140 50 L155 65 L105 65 Z" fill={color}/>,
    sport: <path d="M20 75 L40 55 L75 50 L100 47 L140 50 L170 55 L185 70 L190 80 L185 88 L170 88 L165 78 C165 70, 152 70, 152 78 L62 78 C62 70, 49 70, 49 78 L20 88 L15 80 Z M75 53 L100 50 L100 63 L75 63 Z M105 50 L140 53 L155 63 L105 63 Z" fill={color}/>,
    truck: <path d="M5 80 L10 55 L25 45 L70 45 L80 60 L80 75 L195 75 L195 92 L175 92 L170 82 C170 72, 155 72, 155 82 L55 82 C55 72, 40 72, 40 82 L5 92 Z M30 50 L65 50 L75 65 L30 65 Z" fill={color}/>,
  };
  return (
    <svg viewBox="0 0 200 100" width={size} height={size * 0.5} style={{display:'block'}}>
      {types[type] || types.sedan}
      {/* wheels */}
      <circle cx="50" cy="85" r="11" fill="#0a0a0a"/>
      <circle cx="50" cy="85" r="7" fill="#444"/>
      <circle cx="50" cy="85" r="3" fill={color}/>
      <circle cx="160" cy="85" r="11" fill="#0a0a0a"/>
      <circle cx="160" cy="85" r="7" fill="#444"/>
      <circle cx="160" cy="85" r="3" fill={color}/>
    </svg>
  );
};

// === Tire photo helper — picks one of two real photos + a glow color based on use/accent ===
const tirePhotoFor = (tire) => {
  if (tire.use === 'offroad') return { src: 'assets/tire-offroad.png', glow: '#c98a1a', glow2: '#5a3a05' };
  if (tire.use === 'sport') return { src: 'assets/tire-sport.png', glow: '#c93a3a', glow2: '#3a0a0a' };
  // city / highway / others — alternate by id parity for visual variety
  const id = parseInt((tire.id || 't0').replace(/\D/g, '')) || 0;
  if (id % 2 === 0) return { src: 'assets/tire-sport.png', glow: '#2a5f9e', glow2: '#08152b' };
  return { src: 'assets/tire-offroad.png', glow: '#6b6e3a', glow2: '#1a1c08' };
};

// === Tire data ===
const TIRES = [
  { id: 't01', brand: 'Michelin', name: 'Pilot Sport 5', tagline: 'Adrenalina sobre asfalto', tags: ['Deportivo'], use: 'sport', price: 4890, sizes: ['205/55R16','225/45R17','235/40R18','245/40R19'], stock: 'in', dna: { wet: 92, dry: 95, noise: 60, life: 70, fuel: 65 }, accent: '#fdb827', rating: 4.8, reviews: 412 },
  { id: 't02', brand: 'Continental', name: 'PremiumContact 7', tagline: 'Confort y silencio', tags: ['Premium','Confort'], use: 'city', price: 3690, sizes: ['185/65R15','195/65R15','205/55R16','215/55R17'], stock: 'in', dna: { wet: 88, dry: 86, noise: 92, life: 88, fuel: 86 }, accent: '#ff8a00', rating: 4.7, reviews: 287 },
  { id: 't03', brand: 'Bridgestone', name: 'Turanza T005', tagline: 'Larga vida, suave manejo', tags: ['Touring'], use: 'highway', price: 3290, sizes: ['175/65R14','185/65R15','205/55R16','215/55R17'], stock: 'in', dna: { wet: 84, dry: 82, noise: 80, life: 90, fuel: 88 }, accent: '#6ab7ff', rating: 4.6, reviews: 198 },
  { id: 't04', brand: 'Pirelli', name: 'P Zero', tagline: 'OEM de las hipercars', tags: ['Deportivo','Premium'], use: 'sport', price: 6190, sizes: ['225/35R19','245/35R20','275/30R20','295/30R21'], stock: 'low', dna: { wet: 90, dry: 98, noise: 50, life: 60, fuel: 60 }, accent: '#ff4d4d', rating: 4.9, reviews: 521 },
  { id: 't05', brand: 'Goodyear', name: 'Wrangler Duratrac', tagline: 'Off-road sin compromisos', tags: ['Off-road','SUV'], use: 'offroad', price: 5290, sizes: ['265/70R17','275/65R18','285/70R17','35x12.5R20'], stock: 'in', dna: { wet: 78, dry: 80, noise: 50, life: 85, fuel: 55 }, accent: '#7dd87d', rating: 4.7, reviews: 342 },
  { id: 't06', brand: 'Michelin', name: 'CrossClimate 2', tagline: 'Todo el año, todo el clima', tags: ['Todo clima'], use: 'city', price: 4190, sizes: ['185/65R15','195/65R15','205/55R16','215/60R16'], stock: 'in', dna: { wet: 94, dry: 84, noise: 82, life: 84, fuel: 80 }, accent: '#fdb827', rating: 4.8, reviews: 376 },
  { id: 't07', brand: 'Yokohama', name: 'Advan Sport V107', tagline: 'Pista y calle', tags: ['Deportivo'], use: 'sport', price: 5490, sizes: ['235/40R18','245/40R19','255/35R19','275/35R20'], stock: 'in', dna: { wet: 86, dry: 94, noise: 58, life: 65, fuel: 62 }, accent: '#9c5fff', rating: 4.7, reviews: 156 },
  { id: 't08', brand: 'Hankook', name: 'Ventus Prime 4', tagline: 'Valor + rendimiento', tags: ['Touring','Económico'], use: 'city', price: 2490, sizes: ['185/65R15','195/65R15','205/55R16','215/55R17'], stock: 'in', dna: { wet: 82, dry: 80, noise: 84, life: 82, fuel: 84 }, accent: '#ff8a00', rating: 4.4, reviews: 234 },
  { id: 't09', brand: 'BFGoodrich', name: 'All-Terrain T/A KO2', tagline: 'El clásico off-road', tags: ['Off-road','4x4'], use: 'offroad', price: 5890, sizes: ['265/70R17','275/65R18','285/75R16','315/70R17'], stock: 'in', dna: { wet: 80, dry: 82, noise: 55, life: 88, fuel: 58 }, accent: '#7dd87d', rating: 4.8, reviews: 489 },
  { id: 't10', brand: 'Continental', name: 'SportContact 7', tagline: 'Precisión en cada curva', tags: ['Deportivo','Premium'], use: 'sport', price: 5990, sizes: ['225/40R18','235/35R19','245/35R20','275/30R21'], stock: 'low', dna: { wet: 92, dry: 96, noise: 60, life: 68, fuel: 64 }, accent: '#ff4d4d', rating: 4.9, reviews: 178 },
  { id: 't11', brand: 'Pirelli', name: 'Scorpion Verde', tagline: 'SUV con conciencia', tags: ['SUV','Eco'], use: 'city', price: 4790, sizes: ['215/65R16','225/60R17','235/60R18','255/55R18'], stock: 'in', dna: { wet: 86, dry: 84, noise: 86, life: 86, fuel: 90 }, accent: '#7dd87d', rating: 4.6, reviews: 203 },
  { id: 't12', brand: 'Bridgestone', name: 'Potenza Sport', tagline: 'El nuevo benchmark', tags: ['Deportivo'], use: 'sport', price: 5290, sizes: ['225/40R18','235/35R19','245/40R19','265/35R19'], stock: 'in', dna: { wet: 88, dry: 94, noise: 62, life: 72, fuel: 66 }, accent: '#fdb827', rating: 4.8, reviews: 267 },
];

const BRANDS = ['Michelin','Continental','Bridgestone','Pirelli','Goodyear','Yokohama','Hankook','BFGoodrich'];

const USE_LABELS = {
  sport: 'Deportivo',
  city: 'Ciudad',
  highway: 'Carretera',
  offroad: 'Off-road',
};

const RIM_SIZES = [14, 15, 16, 17, 18, 19, 20, 21];

const CAR_BRANDS = [
  { name: 'Volkswagen', models: ['Jetta','Tiguan','Golf','Vento','Polo','Taos','Amarok'] },
  { name: 'Nissan', models: ['Versa','Sentra','Kicks','March','Frontier','X-Trail'] },
  { name: 'Toyota', models: ['Corolla','Yaris','Hilux','RAV4','Hiace','Tacoma'] },
  { name: 'Honda', models: ['Civic','CR-V','HR-V','Accord','Pilot'] },
  { name: 'Mazda', models: ['Mazda3','CX-5','CX-30','MX-5','Mazda6'] },
  { name: 'Chevrolet', models: ['Aveo','Cavalier','Onix','Trax','Cheyenne','Camaro'] },
  { name: 'Ford', models: ['Figo','EcoSport','Mustang','F-150','Bronco','Ranger'] },
  { name: 'Kia', models: ['Rio','Forte','Sportage','Sorento','Seltos','K3'] },
];

const SHOPS = [
  { id: 's1', name: 'RUTA Polanco', addr: 'Av. Presidente Masaryk 287', dist: '2.1 km', slots: 'amplios' },
  { id: 's2', name: 'RUTA Roma Norte', addr: 'Colima 168, Col. Roma Nte.', dist: '3.8 km', slots: 'medio' },
  { id: 's3', name: 'RUTA Santa Fe', addr: 'Av. Vasco de Quiroga 3800', dist: '12 km', slots: 'amplios' },
  { id: 's4', name: 'RUTA Coyoacán', addr: 'División del Norte 2810', dist: '9.4 km', slots: 'pocos' },
];

const SERVICES = [
  { id: 'inst', name: 'Instalación', sub: 'Monta tus 4 llantas con balanceo dinámico', price: 480, num: '01' },
  { id: 'align', name: 'Alineación', sub: 'Ajuste de geometría con láser 3D', price: 690, num: '02' },
  { id: 'rot', name: 'Rotación', sub: 'Rotación + revisión de presiones', price: 290, num: '03' },
  { id: 'bal', name: 'Balanceo', sub: 'Balanceo dinámico de las 4 ruedas', price: 390, num: '04' },
  { id: 'flat', name: 'Reparación de poncha', sub: 'Vulcanizado profesional, garantía 12 meses', price: 250, num: '05' },
  { id: 'pres', name: 'Nitrógeno + presión', sub: 'Llenado con N₂ y monitoreo TPMS', price: 180, num: '06' },
];

// Currency
const fmt = (n) => '$' + n.toLocaleString('es-MX', { minimumFractionDigits: 0 });

// === Real tire photo with subtle motion + dramatic glow ===
// Modes:
//   default → static, rotates ~30° on hover
//   drift   → continuous slow side-to-side horizontal drift (for hero)
const TirePhoto = ({ tire, drift = false, hoverable = true, showWatermark = false }) => {
  const photo = tirePhotoFor(tire);
  return (
    <div
      className={'tire-photo ' + (hoverable ? 'tire-photo-hover ' : '') + (drift ? 'tire-photo-drift ' : '')}
      style={{
        width: '100%', height: '100%',
        '--glow-1': photo.glow,
        '--glow-2': photo.glow2,
      }}>
      <div className="tire-photo-glow"></div>
      <div className="tire-photo-spin">
        <img src={photo.src} alt={tire.name} draggable="false"/>
      </div>
      {showWatermark && (
        <div className="tire-photo-wm">
          <span>{tire.brand.toUpperCase()}</span>
          <span className="dot">·</span>
          <span>{tire.sizes[0]}</span>
        </div>
      )}
    </div>
  );
};

// Expose globals
Object.assign(window, {
  Icon, TireSVG, CarSilhouette, TirePhoto, tirePhotoFor,
  TIRES, BRANDS, USE_LABELS, RIM_SIZES, CAR_BRANDS, SHOPS, SERVICES,
  fmt,
});