// MCheco vehicle data + shared icons
// `photos` is an array of { tone, label } slides per vehicle for the slideshow
// ─── SWAP for Supabase in one line: ───────────────────────────────────────────
// const VEHICLES = await supabase.from('vehicles').select('*').eq('for_sale', false).then(r => r.data);
// ──────────────────────────────────────────────────────────────────────────────
const VEHICLES = [
  { id: 1,  brand: "Hyundai",    name: "Hyundai Tucson",    year: 2024, cats: ["SUV", "Familiar"], passengers: 5, transmission: "Automática", tag: "Popular",
    photos: [{ tone: "warm", label: "Tucson · exterior" }, { tone: "cream", label: "Tucson · interior" }, { tone: "dark", label: "Tucson · 3/4" }] },
  { id: 2,  brand: "Toyota",     name: "Toyota Yaris",      year: 2023, cats: ["Económico", "Sedán"], passengers: 5, transmission: "Automática", tag: null,
    photos: [{ tone: "cream", label: "Yaris · exterior" }, { tone: "warm", label: "Yaris · interior" }] },
  { id: 3,  brand: "Kia",        name: "Kia Sportage",      year: 2024, cats: ["SUV", "Premium"], passengers: 5, transmission: "Automática", tag: "Nuevo",
    photos: [{ tone: "warm", label: "Sportage · front" }, { tone: "cream", label: "Sportage · side" }, { tone: "dark", label: "Sportage · rear" }] },
  { id: 4,  brand: "Honda",      name: "Honda Civic",       year: 2023, cats: ["Sedán"], passengers: 5, transmission: "Automática", tag: null,
    photos: [{ tone: "cream", label: "Civic · exterior" }] },
  { id: 5,  brand: "Toyota",     name: "Toyota Hilux",      year: 2024, cats: ["Pickup", "4x4"], passengers: 5, transmission: "Manual", tag: "4x4",
    photos: [{ tone: "warm", label: "Hilux · exterior" }, { tone: "dark", label: "Hilux · cabina" }] },
  { id: 6,  brand: "Nissan",     name: "Nissan Sentra",     year: 2023, cats: ["Sedán", "Económico"], passengers: 5, transmission: "Automática", tag: null,
    photos: [{ tone: "cream", label: "Sentra · exterior" }, { tone: "warm", label: "Sentra · interior" }] },
  { id: 7,  brand: "Mitsubishi", name: "Mitsubishi Montero",year: 2024, cats: ["SUV", "Premium"], passengers: 7, transmission: "Automática", tag: null,
    photos: [{ tone: "warm", label: "Montero · exterior" }, { tone: "dark", label: "Montero · 3 filas" }, { tone: "cream", label: "Montero · interior" }] },
  { id: 8,  brand: "Suzuki",     name: "Suzuki Swift",      year: 2023, cats: ["Económico"], passengers: 5, transmission: "Manual", tag: "Eco",
    photos: [{ tone: "cream", label: "Swift · exterior" }] },
  { id: 9,  brand: "Toyota",     name: "Toyota Corolla",    year: 2024, cats: ["Sedán"], passengers: 5, transmission: "Automática", tag: null,
    photos: [{ tone: "cream", label: "Corolla · exterior" }, { tone: "warm", label: "Corolla · interior" }] },
  { id: 10, brand: "Hyundai",    name: "Hyundai Creta",     year: 2024, cats: ["SUV", "Familiar"], passengers: 5, transmission: "Automática", tag: "Nuevo",
    photos: [{ tone: "warm", label: "Creta · front" }, { tone: "cream", label: "Creta · interior" }, { tone: "dark", label: "Creta · rear" }] },
  { id: 11, brand: "Mazda",      name: "Mazda CX-5",        year: 2024, cats: ["SUV", "Premium"], passengers: 5, transmission: "Automática", tag: null,
    photos: [{ tone: "warm", label: "CX-5 · exterior" }, { tone: "cream", label: "CX-5 · interior" }] },
  { id: 12, brand: "Kia",        name: "Kia Picanto",       year: 2024, cats: ["Económico"], passengers: 4, transmission: "Manual", tag: "Eco",
    photos: [{ tone: "cream", label: "Picanto · exterior" }] },
];

// Derived dynamically — never hardcoded
const BRANDS = ["Todas", ...Array.from(new Set(VEHICLES.map(v => v.brand))).sort()];

const SALE_VEHICLES = [
  { id: 101, name: "Toyota RAV4", year: 2021, cats: ["SUV"], km: "62,000 km", price: "RD$ 1,650,000",
    photos: [{ tone: "warm", label: "RAV4 · exterior" }, { tone: "cream", label: "RAV4 · interior" }] },
  { id: 102, name: "Hyundai Accent", year: 2020, cats: ["Sedán", "Económico"], km: "78,000 km", price: "RD$ 685,000",
    photos: [{ tone: "cream", label: "Accent · exterior" }] },
  { id: 103, name: "Kia Rio", year: 2022, cats: ["Sedán"], km: "41,000 km", price: "RD$ 845,000",
    photos: [{ tone: "warm", label: "Rio · exterior" }, { tone: "dark", label: "Rio · interior" }] },
  { id: 104, name: "Honda CR-V", year: 2021, cats: ["SUV", "Premium"], km: "55,000 km", price: "RD$ 1,495,000",
    photos: [{ tone: "cream", label: "CR-V · exterior" }, { tone: "warm", label: "CR-V · 3/4" }, { tone: "dark", label: "CR-V · interior" }] },
];

const CATEGORIES = ["Todos", "Económico", "Sedán", "SUV", "Pickup", "Premium", "Familiar"];

const RENT_PAGE_SIZE = 6;   // 2 rows × 3 cols on desktop; 2 rows × 2 cols on mobile
const SALE_PAGE_SIZE = 2;   // 1 row × 2 cols on mobile

const WA_NUMBER = "+1 829 455 8974";
const WA_LINK = "https://wa.me/18294558974";
const IG_HANDLE = "@mcheco_rentcar";
const IG_LINK = "https://instagram.com/mcheco_rentcar";

// SVG icons
const IconWA = ({ size = 18 }) => (
  <svg className="wa-svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.3c1.4.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.2.8.9-3.1-.2-.3c-.9-1.4-1.3-3-1.3-4.6C3.5 7.3 7.3 3.5 12 3.5s8.5 3.8 8.5 8.5-3.8 8.2-8.5 8.2z"/>
  </svg>
);
const IconArrow = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  </svg>
);
const IconArrowUR = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>
  </svg>
);
const IconChevL = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="15 18 9 12 15 6"/>
  </svg>
);
const IconChevR = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="9 18 15 12 9 6"/>
  </svg>
);
const IconPin = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
  </svg>
);
const IconClock = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
  </svg>
);
const IconUsers = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
  </svg>
);
const IconCog = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
  </svg>
);
const IconIG = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
  </svg>
);
const IconCalendar = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
  </svg>
);
const IconSun = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="4"/>
    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
  </svg>
);
const IconMoon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
);

Object.assign(window, {
  VEHICLES, SALE_VEHICLES, CATEGORIES, BRANDS, RENT_PAGE_SIZE, SALE_PAGE_SIZE,
  WA_NUMBER, WA_LINK, IG_HANDLE, IG_LINK,
  IconWA, IconArrow, IconArrowUR, IconChevL, IconChevR,
  IconPin, IconClock, IconUsers, IconCog, IconIG, IconSun, IconMoon, IconCalendar
});