// icons.jsx — line icons for products + UI

const stroke = 'currentColor';
const sw = 1.4;

function IconAuto({ size = 28 }) {
  return (
    <span style={{
      display: 'inline-block',
      width: size,
      height: size,
      background: 'currentColor',
      WebkitMaskImage: 'url(assets/icons/car.png)',
      maskImage: 'url(assets/icons/car.png)',
      WebkitMaskSize: 'contain',
      maskSize: 'contain',
      WebkitMaskRepeat: 'no-repeat',
      maskRepeat: 'no-repeat',
      WebkitMaskPosition: 'center',
      maskPosition: 'center',
      verticalAlign: 'middle',
    }} />
  );
}

function IconResidencial({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 15 L16 6 L27 15" />
      <path d="M7 14 v12 a1 1 0 0 0 1 1 h16 a1 1 0 0 0 1 -1 v-12" />
      <path d="M13 27 v-7 h6 v7" />
    </svg>
  );
}

function IconEmpresarial({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 27 L6 9 a1 1 0 0 1 1 -1 h11 a1 1 0 0 1 1 1 v18" />
      <path d="M19 27 L19 15 a1 1 0 0 1 1 -1 h5 a1 1 0 0 1 1 1 v12" />
      <path d="M6 27 L26 27" />
      <path d="M9 13 h2 M14 13 h2 M9 17 h2 M14 17 h2 M9 21 h2 M14 21 h2" />
      <path d="M22 18 h1 M22 22 h1" />
    </svg>
  );
}

function IconVida({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 16 h5 l2 -4 l3 8 l3 -10 l3 8 l2 -2 h6" />
    </svg>
  );
}

function IconViagem({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 18 L13 16 L11 8 L13.5 7.5 L19 15 L26 13 a1.5 1.5 0 0 1 0 3 L8 21 L5 21 Z" />
      <path d="M6 25 h20" />
    </svg>
  );
}

function IconArrow({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8 h10 M9 4 L13 8 L9 12" />
    </svg>
  );
}

function IconWhatsApp({ size = 20, color = 'currentColor' }) {
  // Flatart-style: outlined speech bubble + handset, chunky rounded strokes.
  // Attribution: https://www.flaticon.com/free-icons/whatsapp — Whatsapp icons by flatart_icons.
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none"
         stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
         style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      {/* Bubble outline with tail at bottom-left */}
      <path d="M5.4 26.6 L7.5 21.2 A11 11 0 1 1 11.6 25.4 Z" />
      {/* Handset inside */}
      <path d="M13 11.5 C13 11 13.3 10.7 13.8 10.7 L15 10.7 C15.5 10.7 15.9 11 16 11.5 L16.5 13.5 C16.6 14 16.4 14.4 16 14.7 L15 15.3 C15.8 17 17 18.2 18.7 19 L19.3 18 C19.6 17.6 20 17.4 20.5 17.5 L22.5 18 C23 18.1 23.3 18.5 23.3 19 L23.3 20.2 C23.3 20.7 23 21 22.5 21 C17.2 21 13 16.8 13 11.5 Z" />
    </svg>
  );
}

function IconMenu({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" stroke={stroke} strokeWidth={1.6} strokeLinecap="round">
      <path d="M4 7 h14 M4 15 h14" />
    </svg>
  );
}

function IconClose({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 22 22" fill="none" stroke={stroke} strokeWidth={1.6} strokeLinecap="round">
      <path d="M5 5 L17 17 M17 5 L5 17" />
    </svg>
  );
}

function IconCheck({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8.5 L6.5 12 L13 4.5" />
    </svg>
  );
}

function IconPlus({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth={1.6} strokeLinecap="round">
      <path d="M8 3 v10 M3 8 h10" />
    </svg>
  );
}

Object.assign(window, { IconAuto, IconResidencial, IconEmpresarial, IconVida, IconViagem, IconArrow, IconWhatsApp, IconMenu, IconClose, IconCheck, IconPlus });