// SVG icons used across the site.
const Icon = ({ d, size = 20, ...rest }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor"
       strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {typeof d === 'string' ? <path d={d} /> : d}
  </svg>
);

const Truck = (p) => <Icon {...p} d={<><path d="M3 7h11v9H3z"/><path d="M14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></>} />;
const MapPin = (p) => <Icon {...p} d={<><path d="M12 22s8-7.58 8-13a8 8 0 1 0-16 0c0 5.42 8 13 8 13z"/><circle cx="12" cy="9" r="3"/></>} />;
const Shield = (p) => <Icon {...p} d={<><path d="M12 22s8-3 8-10V5l-8-3-8 3v7c0 7 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></>} />;
const Clock = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>} />;
const HeadsetIcon = (p) => <Icon {...p} d={<><path d="M4 14a8 8 0 1 1 16 0v4a2 2 0 0 1-2 2h-1v-6h3"/><path d="M4 14v4a2 2 0 0 0 2 2h1v-6H4"/></>} />;
const BoltIcon = (p) => <Icon {...p} d={<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>} />;
const PriceTag = (p) => <Icon {...p} d={<><path d="M20 12 12 4H4v8l8 8z"/><circle cx="8.5" cy="8.5" r="1.2"/></>} />;
const ArrowRight = (p) => <Icon {...p} d="M5 12h14M13 6l6 6-6 6" />;
const ArrowLeft = (p) => <Icon {...p} d="M19 12H5M11 6l-6 6 6 6" />;
const Check = (p) => <Icon {...p} d="m5 12 5 5 9-11" />;
const ChevPlus = (p) => <Icon {...p} d="M12 5v14M5 12h14" />;
const Phone = (p) => <Icon {...p} d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>;
const WhatsApp = (p) => (
  <svg viewBox="0 0 24 24" width={p.size || 26} height={p.size || 26} fill="currentColor" {...p}>
    <path d="M17.6 14.3c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.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.3 3.1c.2.2 2.2 3.3 5.3 4.7.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2"/>
  </svg>
);
const Box = (p) => <Icon {...p} d={<><path d="m3 7 9 5 9-5"/><path d="m21 7-9-5-9 5v10l9 5 9-5z"/><path d="M12 12v10"/></>} />;
const Sofa = (p) => <Icon {...p} d={<><path d="M3 14v-3a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v3"/><path d="M21 14h-2a2 2 0 0 0-2 2v2H7v-2a2 2 0 0 0-2-2H3v6h2v-2h14v2h2z"/></>} />;
const Building = (p) => <Icon {...p} d={<><path d="M4 22V4h10v18"/><path d="M14 11h6v11"/><path d="M8 9h2M8 13h2M8 17h2M17 15h.01M17 19h.01"/></>} />;
const Star = (p) => (
  <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="currentColor" {...p}>
    <path d="m12 17.3-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z" />
  </svg>
);
const Snail = (p) => <Icon {...p} d={<><circle cx="13" cy="13" r="6"/><path d="M13 7V3M3 13h4M21 13a8 8 0 0 0-14-5"/></>} />;
const Plane = (p) => <Icon {...p} d="M2 16l9-3-3 9 2-2 3-6 8-3-2-2-7 1-6-7-2 2 4 6-6 3z" />;
const Rocket = (p) => <Icon {...p} d={<><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2 0-2.8a2 2 0 0 0-3 0z"/><path d="M12 15 9 12a14 14 0 0 1 2-7 8 8 0 0 1 7-3 8 8 0 0 1-3 7 14 14 0 0 1-3 6z"/><path d="M9 12H5l3-3h4M15 12v4l3-3v-4"/></>} />;
const Globe = (p) => <Icon {...p} d={<><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"/></>} />;
const FileCheck = (p) => <Icon {...p} d={<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 14l2 2 4-4"/></>} />;
const Lock = (p) => <Icon {...p} d={<><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>} />;
const Users = (p) => <Icon {...p} d={<><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></>} />;
const Sparkle = (p) => <Icon {...p} d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" />;
const Mail = (p) => <Icon {...p} d={<><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>} />;
const User = (p) => <Icon {...p} d={<><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></>} />;
const Female = (p) => <Icon {...p} d={<><circle cx="12" cy="8" r="5"/><path d="M12 13v8M9 18h6"/></>} />;
const Male = (p) => <Icon {...p} d={<><circle cx="10" cy="14" r="5"/><path d="m14 10 6-6M14 4h6v6"/></>} />;
const Eye = (p) => <Icon {...p} d={<><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>} />;

// AJM brand mark — twin chevrons (red + blue) inspired by the company logo.
// Optimized for dark backgrounds — slightly brighter tones so the mark glows.
const AJMLogo = ({ size = 28 }) => (
  <svg viewBox="0 0 32 32" width={size} height={size} aria-label="AJM" role="img">
    <defs>
      <linearGradient id="ajm-red" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#f5333b"/>
        <stop offset="1" stopColor="#c8151c"/>
      </linearGradient>
      <linearGradient id="ajm-blue" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#3b7bff"/>
        <stop offset="1" stopColor="#173b8a"/>
      </linearGradient>
    </defs>
    {/* Red chevron (back) */}
    <path d="M3 6 L13 6 L21 16 L13 26 L3 26 L11 16 Z" fill="url(#ajm-red)"/>
    {/* Blue chevron (front) */}
    <path d="M11 6 L21 6 L29 16 L21 26 L11 26 L19 16 Z" fill="url(#ajm-blue)"/>
    {/* Glossy highlight */}
    <path d="M11 6 L21 6 L24 9 L14 9 Z" fill="rgba(255,255,255,0.25)"/>
  </svg>
);

Object.assign(window, {
  Icon, Truck, MapPin, Shield, Clock, HeadsetIcon, BoltIcon, PriceTag,
  ArrowRight, ArrowLeft, Check, ChevPlus, Phone, WhatsApp, Box, Sofa, Building,
  Star, Snail, Plane, Rocket, Globe, FileCheck, Lock, Users, Sparkle,
  Mail, User, Female, Male, Eye, AJMLogo,
});
