
// LAQO-style illustrations: thick navy outlines, mint-green accent fills.
// Style: rounded, friendly, slightly geometric. No emoji.

const NAVY = 'var(--navy)';
const MINT = 'var(--mint)';
const WHITE = '#ffffff';

// — Diamond background that the hero illustrations sit on top of
const Diamond = ({ size = 200, color = MINT }) => (
  <div
    style={{
      position: 'absolute', inset: 0,
      display: 'grid', placeItems: 'center', zIndex: 0,
    }}
  >
    <div
      style={{
        width: size, height: size,
        background: color,
        transform: 'rotate(45deg)',
        borderRadius: 24,
      }}
    />
  </div>
);

// Hero illustration: hand holding a phone showing "52 sec" — references the deck's "58 sec / 17 hours" speed
const HandPhone = ({ counter = '52', width = 360 }) => (
  <svg viewBox="0 0 360 380" width={width} style={{ overflow: 'visible' }} aria-hidden="true">
    {/* mint accent block at the wrist */}
    <rect x="50" y="320" width="120" height="38" rx="4" fill={MINT} />
    {/* hand */}
    <path
      d="M85 360 Q72 300 95 270 Q108 254 130 248 L138 244 Q138 230 130 222 Q122 212 132 204 Q144 196 156 208 L172 226 Q184 220 192 230 Q208 222 218 236 Q232 230 238 248 L246 268 Q260 264 264 282 L266 300 Q268 320 252 340 L250 360 Z"
      fill="white" stroke={NAVY} strokeWidth="4" strokeLinejoin="round"
    />
    {/* phone */}
    <rect x="118" y="20" width="180" height="280" rx="24" fill="white" stroke={NAVY} strokeWidth="5" />
    {/* phone notch */}
    <rect x="180" y="38" width="56" height="6" rx="3" fill={NAVY} />
    {/* status indicators */}
    <rect x="142" y="62" width="36" height="8" rx="4" fill={NAVY} />
    <rect x="184" y="62" width="36" height="8" rx="4" fill={MINT} />
    <rect x="226" y="62" width="36" height="8" rx="4" fill={NAVY} opacity="0.25" />
    {/* big counter */}
    <text x="208" y="200" textAnchor="middle" fontSize="92" fontWeight="800" fill={NAVY} fontFamily="inherit">
      {counter}
    </text>
    <text x="208" y="240" textAnchor="middle" fontSize="20" fontWeight="600" fill={NAVY} opacity="0.6" fontFamily="inherit">
      sek
    </text>
    {/* underline accent */}
    <line x1="166" y1="216" x2="250" y2="216" stroke={MINT} strokeWidth="5" />
  </svg>
);

// Traffic cone — mirrors the LAQO vehicle card icon
const Cone = ({ size = 130 }) => (
  <svg viewBox="0 0 160 160" width={size} height={size} aria-hidden="true">
    {/* shadow oval */}
    <ellipse cx="80" cy="142" rx="46" ry="6" fill={NAVY} opacity="0.15" />
    {/* cone body */}
    <path d="M62 36 L98 36 L122 140 L38 140 Z" fill={NAVY} stroke={NAVY} strokeWidth="3" strokeLinejoin="round" />
    {/* white stripes */}
    <path d="M58 64 L102 64 L106 80 L54 80 Z" fill="white" />
    <path d="M50 96 L110 96 L114 112 L46 112 Z" fill="white" />
    {/* tip */}
    <rect x="62" y="28" width="36" height="14" rx="4" fill={NAVY} />
  </svg>
);

// House — mirrors imovina card
const House = ({ size = 130 }) => (
  <svg viewBox="0 0 160 160" width={size} height={size} aria-hidden="true">
    {/* base */}
    <rect x="36" y="78" width="88" height="62" fill="white" stroke={NAVY} strokeWidth="4" />
    {/* roof */}
    <path d="M28 80 L80 36 L132 80 Z" fill={NAVY} />
    {/* chimney */}
    <rect x="104" y="46" width="12" height="22" fill={NAVY} />
    {/* door */}
    <rect x="70" y="106" width="20" height="34" fill={NAVY} />
    {/* windows */}
    <rect x="46" y="90" width="18" height="14" fill={NAVY} />
    <rect x="96" y="90" width="18" height="14" fill={NAVY} />
    {/* window shutters lines */}
    <line x1="55" y1="90" x2="55" y2="104" stroke="white" strokeWidth="2" />
    <line x1="105" y1="90" x2="105" y2="104" stroke="white" strokeWidth="2" />
    <line x1="46" y1="97" x2="64" y2="97" stroke="white" strokeWidth="2" />
    <line x1="96" y1="97" x2="114" y2="97" stroke="white" strokeWidth="2" />
  </svg>
);

// Plane — putno
const Plane = ({ size = 130 }) => (
  <svg viewBox="0 0 160 160" width={size} height={size} aria-hidden="true">
    <path
      d="M22 90 L60 78 L96 30 Q104 22 112 30 Q120 38 112 46 L82 86 L96 124 L86 128 L66 100 L46 108 L42 122 L34 124 L30 108 L18 100 Z"
      fill="white" stroke={NAVY} strokeWidth="4" strokeLinejoin="round"
    />
    <circle cx="90" cy="56" r="6" fill={NAVY} />
  </svg>
);

// Card with euro (manje voziš, manje plaćaš style)
const CarEuro = ({ size = 120 }) => (
  <svg viewBox="0 0 200 160" width={size} aria-hidden="true">
    <circle cx="100" cy="80" r="74" fill="white" />
    {/* car body */}
    <path
      d="M40 110 Q42 84 64 80 L90 78 Q104 64 122 64 L140 64 Q156 72 162 92 L168 110 Q172 118 162 122 L42 122 Q34 118 40 110 Z"
      fill={MINT} stroke={NAVY} strokeWidth="3.5" strokeLinejoin="round"
    />
    {/* windows */}
    <path d="M92 78 Q104 68 120 68 L138 68 Q150 74 154 88 L100 88 Z" fill="white" stroke={NAVY} strokeWidth="3" />
    {/* wheels */}
    <circle cx="68" cy="122" r="14" fill="white" stroke={NAVY} strokeWidth="4" />
    <circle cx="146" cy="122" r="14" fill="white" stroke={NAVY} strokeWidth="4" />
    {/* euro */}
    <circle cx="48" cy="50" r="22" fill="white" stroke={NAVY} strokeWidth="3.5" />
    <text x="48" y="58" textAnchor="middle" fontSize="26" fontWeight="800" fill={NAVY} fontFamily="inherit">€</text>
    {/* motion lines */}
    <line x1="174" y1="76" x2="194" y2="76" stroke={NAVY} strokeWidth="3.5" strokeLinecap="round" />
    <line x1="174" y1="90" x2="188" y2="90" stroke={MINT} strokeWidth="3.5" strokeLinecap="round" />
  </svg>
);

// Confetti / nagrade icon — LaqoPrevent style
const Confetti = ({ size = 120 }) => (
  <svg viewBox="0 0 200 180" width={size} aria-hidden="true">
    <circle cx="100" cy="90" r="78" fill="white" />
    {/* party popper */}
    <path d="M60 150 L40 160 L36 132 L78 110 Z" fill={MINT} stroke={NAVY} strokeWidth="3.5" strokeLinejoin="round" />
    <path d="M60 150 L78 110 L92 124 L96 156 Z" fill="white" stroke={NAVY} strokeWidth="3.5" strokeLinejoin="round" />
    {/* stars */}
    {[
      [110, 50], [148, 64], [126, 82], [160, 96], [142, 116], [108, 76]
    ].map(([x, y], i) => (
      <g key={i} transform={`translate(${x} ${y})`}>
        <line x1="-6" y1="0" x2="6" y2="0" stroke={NAVY} strokeWidth="2.5" />
        <line x1="0" y1="-6" x2="0" y2="6" stroke={NAVY} strokeWidth="2.5" />
        <line x1="-4" y1="-4" x2="4" y2="4" stroke={NAVY} strokeWidth="2.5" />
      </g>
    ))}
    <circle cx="124" cy="44" r="5" fill={MINT} />
    <circle cx="158" cy="78" r="4" fill={NAVY} />
    <circle cx="172" cy="116" r="5" fill={MINT} />
    <circle cx="118" cy="142" r="4" fill={NAVY} />
  </svg>
);

// Camera icon (Ne tipkaš, pošalješ sliku)
const Camera = ({ size = 120 }) => (
  <svg viewBox="0 0 160 140" width={size} aria-hidden="true">
    <rect x="20" y="38" width="120" height="86" rx="14" fill={MINT} stroke={NAVY} strokeWidth="4" />
    <path d="M58 38 L66 24 L96 24 L104 38 Z" fill="white" stroke={NAVY} strokeWidth="4" strokeLinejoin="round" />
    <circle cx="80" cy="80" r="22" fill="white" stroke={NAVY} strokeWidth="4" />
    <circle cx="80" cy="80" r="10" fill={NAVY} />
    <circle cx="124" cy="56" r="4" fill={NAVY} />
  </svg>
);

// AI chip icon
const Chip = ({ size = 120 }) => (
  <svg viewBox="0 0 160 140" width={size} aria-hidden="true">
    <rect x="40" y="30" width="80" height="80" rx="10" fill={MINT} stroke={NAVY} strokeWidth="4" />
    <rect x="56" y="46" width="48" height="48" rx="4" fill="white" stroke={NAVY} strokeWidth="3" />
    <text x="80" y="80" textAnchor="middle" fontSize="22" fontWeight="800" fill={NAVY} fontFamily="inherit">AI</text>
    {/* legs */}
    {[0,1,2,3].map(i => (
      <g key={i}>
        <line x1={50 + i*20} y1="30" x2={50 + i*20} y2="20" stroke={NAVY} strokeWidth="4" />
        <line x1={50 + i*20} y1="110" x2={50 + i*20} y2="120" stroke={NAVY} strokeWidth="4" />
        <line x1="40" y1={40 + i*20} x2="30" y2={40 + i*20} stroke={NAVY} strokeWidth="4" />
        <line x1="120" y1={40 + i*20} x2="130" y2={40 + i*20} stroke={NAVY} strokeWidth="4" />
      </g>
    ))}
  </svg>
);

// Shield with infinity (Doživotna vrijednost)
const ShieldInfinity = ({ size = 120 }) => (
  <svg viewBox="0 0 160 160" width={size} aria-hidden="true">
    <path d="M80 18 L132 36 L132 80 Q132 116 80 142 Q28 116 28 80 L28 36 Z"
      fill={MINT} stroke={NAVY} strokeWidth="4" strokeLinejoin="round" />
    {/* infinity */}
    <path d="M52 80 Q52 66 64 66 Q72 66 80 80 Q88 94 96 94 Q108 94 108 80 Q108 66 96 66 Q88 66 80 80 Q72 94 64 94 Q52 94 52 80 Z"
      fill="white" stroke={NAVY} strokeWidth="4" strokeLinejoin="round" />
  </svg>
);

// Voice waveform
const VoiceWave = ({ size = 120 }) => (
  <svg viewBox="0 0 200 120" width={size} aria-hidden="true">
    <circle cx="100" cy="60" r="56" fill="white" />
    <circle cx="100" cy="60" r="20" fill={MINT} stroke={NAVY} strokeWidth="3.5" />
    <path d="M94 50 L94 70 M100 44 L100 76 M106 50 L106 70" stroke={NAVY} strokeWidth="3" strokeLinecap="round" />
    {/* waves */}
    {[40, 56, 68, 80].map((d, i) => (
      <g key={i}>
        <path d={`M${100-d-12} 60 Q${100-d} ${60-12+i*2} ${100-d+12} 60`} fill="none" stroke={NAVY} strokeWidth="3" opacity={1 - i*0.18} />
        <path d={`M${100+d-12} 60 Q${100+d} ${60-12+i*2} ${100+d+12} 60`} fill="none" stroke={NAVY} strokeWidth="3" opacity={1 - i*0.18} />
      </g>
    ))}
  </svg>
);

// Document vault
const Vault = ({ size = 120 }) => (
  <svg viewBox="0 0 160 140" width={size} aria-hidden="true">
    <rect x="32" y="20" width="96" height="108" rx="8" fill="white" stroke={NAVY} strokeWidth="4" />
    <circle cx="80" cy="74" r="22" fill={MINT} stroke={NAVY} strokeWidth="3.5" />
    <circle cx="80" cy="74" r="6" fill={NAVY} />
    <line x1="80" y1="74" x2="80" y2="58" stroke={NAVY} strokeWidth="3" strokeLinecap="round" />
    <line x1="80" y1="74" x2="92" y2="74" stroke={NAVY} strokeWidth="3" strokeLinecap="round" />
    <rect x="46" y="34" width="20" height="4" fill={NAVY} />
    <rect x="94" y="34" width="20" height="4" fill={NAVY} />
    <line x1="46" y1="110" x2="114" y2="110" stroke={NAVY} strokeWidth="3" />
    <line x1="46" y1="118" x2="90" y2="118" stroke={NAVY} strokeWidth="3" opacity="0.4" />
  </svg>
);

// Crashed car for claims
const ClaimsCar = ({ size = 140 }) => (
  <svg viewBox="0 0 220 140" width={size} aria-hidden="true">
    <circle cx="110" cy="70" r="64" fill="white" />
    <path d="M30 100 Q34 80 56 76 L80 74 Q98 60 118 60 L150 60 Q170 70 178 96 L184 110 Q186 118 178 120 L30 120 Q24 116 30 100 Z"
      fill={MINT} stroke={NAVY} strokeWidth="3.5" strokeLinejoin="round" />
    <path d="M82 74 Q98 64 116 64 L148 64 Q162 70 168 84 L92 84 Z" fill="white" stroke={NAVY} strokeWidth="3" />
    <circle cx="60" cy="120" r="12" fill="white" stroke={NAVY} strokeWidth="4" />
    <circle cx="160" cy="120" r="12" fill="white" stroke={NAVY} strokeWidth="4" />
    {/* dent */}
    <path d="M178 96 L196 88 L186 100 L202 100" stroke="#FF6F4D" strokeWidth="3" fill="none" strokeLinecap="round" />
    <circle cx="200" cy="92" r="6" fill="#FF6F4D" />
  </svg>
);

// WhatsApp-ish chat icon
const Chat = ({ size = 120 }) => (
  <svg viewBox="0 0 160 140" width={size} aria-hidden="true">
    <path d="M30 30 L130 30 Q140 30 140 40 L140 92 Q140 102 130 102 L70 102 L46 124 L46 102 L30 102 Q20 102 20 92 L20 40 Q20 30 30 30 Z"
      fill={MINT} stroke={NAVY} strokeWidth="4" strokeLinejoin="round" />
    <circle cx="58" cy="66" r="5" fill={NAVY} />
    <circle cx="80" cy="66" r="5" fill={NAVY} />
    <circle cx="102" cy="66" r="5" fill={NAVY} />
  </svg>
);

window.Illustrations = {
  Diamond, HandPhone, Cone, House, Plane, CarEuro, Confetti,
  Camera, Chip, ShieldInfinity, VoiceWave, Vault, ClaimsCar, Chat,
};
