// Icons & SVG product illustrations for 모원렌탈 landing
// Globally exposed via window.

const iconProps = {
  width: 24, height: 24, viewBox: '0 0 24 24',
  fill: 'none', stroke: 'currentColor',
  strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round'
};

const I = {
  Gift: (p) => (
    <svg {...iconProps} {...p}>
      <rect x="3" y="8" width="18" height="4" rx="1"/>
      <path d="M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8"/>
      <path d="M12 8v13"/>
      <path d="M12 8H7.5a2.5 2.5 0 1 1 0-5C11 3 12 8 12 8z"/>
      <path d="M12 8h4.5a2.5 2.5 0 1 0 0-5C13 3 12 8 12 8z"/>
    </svg>
  ),
  Percent: (p) => (
    <svg {...iconProps} {...p}>
      <line x1="19" y1="5" x2="5" y2="19"/>
      <circle cx="6.5" cy="6.5" r="2.5"/>
      <circle cx="17.5" cy="17.5" r="2.5"/>
    </svg>
  ),
  Calendar: (p) => (
    <svg {...iconProps} {...p}>
      <rect x="3" y="5" width="18" height="16" rx="2"/>
      <line x1="3" y1="10" x2="21" y2="10"/>
      <line x1="8" y1="3" x2="8" y2="7"/>
      <line x1="16" y1="3" x2="16" y2="7"/>
    </svg>
  ),
  Shield: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/>
      <path d="M9 12l2 2 4-4"/>
    </svg>
  ),
  Phone: (p) => (
    <svg {...iconProps} {...p}>
      <path 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-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13 1 .37 1.94.7 2.84a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.24-1.24a2 2 0 0 1 2.11-.45c.9.33 1.84.57 2.84.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  Check: (p) => (
    <svg {...iconProps} {...p}>
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  Clock: (p) => (
    <svg {...iconProps} {...p}>
      <circle cx="12" cy="12" r="10"/>
      <polyline points="12 6 12 12 16 14"/>
    </svg>
  ),
  Coin: (p) => (
    <svg {...iconProps} {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M8 12h8M12 8v8M9 9l6 6M15 9l-6 6" opacity=".35"/>
      <text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="900" stroke="none" fill="currentColor">₩</text>
    </svg>
  ),
  Truck: (p) => (
    <svg {...iconProps} {...p}>
      <rect x="1" y="6" width="13" height="10" rx="1"/>
      <path d="M14 9h4l3 4v3h-7"/>
      <circle cx="6" cy="18" r="2"/>
      <circle cx="17" cy="18" r="2"/>
    </svg>
  ),
  Sparkle: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M12 2l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/>
    </svg>
  ),
  Drop: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M12 2.5c4 5 7 8.5 7 12a7 7 0 0 1-14 0c0-3.5 3-7 7-12z"/>
    </svg>
  ),
  Seal: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1.1 3 1.1 3-2.9 1.5-.9 3.1-3.2-.4L12 20l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1.1-3-1.1-3 2.9-1.5.9-3.1 3.2.4L12 2z"/>
      <polyline points="9 12 11 14 15 10"/>
    </svg>
  ),
  Star: (p) => (
    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <polygon points="12 2 15 9 22 10 17 14.5 18.5 21.5 12 18 5.5 21.5 7 14.5 2 10 9 9"/>
    </svg>
  ),
  X: (p) => (
    <svg {...iconProps} {...p}>
      <line x1="6" y1="6" x2="18" y2="18"/>
      <line x1="6" y1="18" x2="18" y2="6"/>
    </svg>
  ),
  ArrowRight: (p) => (
    <svg {...iconProps} {...p}>
      <line x1="4" y1="12" x2="20" y2="12"/>
      <polyline points="14 6 20 12 14 18"/>
    </svg>
  ),
  User: (p) => (
    <svg {...iconProps} {...p}>
      <circle cx="12" cy="8" r="4"/>
      <path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/>
    </svg>
  ),
  Package: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M21 8l-9-5-9 5 9 5 9-5z"/>
      <path d="M3 8v8l9 5 9-5V8"/>
      <line x1="12" y1="13" x2="12" y2="21"/>
    </svg>
  ),
  Coffee: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M4 8h13a3 3 0 0 1 0 6h-1"/>
      <path d="M4 8v7a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4V8H4z"/>
      <line x1="7" y1="2" x2="7" y2="5"/>
      <line x1="11" y1="2" x2="11" y2="5"/>
    </svg>
  ),
  ShoppingBag: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M4 7h16l-1.5 13a2 2 0 0 1-2 1.8H7.5a2 2 0 0 1-2-1.8L4 7z"/>
      <path d="M8 7V5a4 4 0 0 1 8 0v2"/>
    </svg>
  ),
  Tv: (p) => (
    <svg {...iconProps} {...p}>
      <rect x="2" y="5" width="20" height="13" rx="2"/>
      <line x1="8" y1="21" x2="16" y2="21"/>
      <line x1="12" y1="18" x2="12" y2="21"/>
    </svg>
  ),
  Wind: (p) => (
    <svg {...iconProps} {...p}>
      <path d="M3 9h12a3 3 0 1 0-3-3"/>
      <path d="M3 13h15a3 3 0 1 1-3 3"/>
      <path d="M3 17h8a2 2 0 1 0-2-2"/>
    </svg>
  ),
};

// Product illustration — stylized water purifier/appliance
const ProductArt = ({ variant = 'purifier', accent = '#00a3e0' }) => {
  const variants = {
    purifier: (
      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id={`pg1-${accent}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#f8fafd"/>
            <stop offset="100%" stopColor="#d9e5ee"/>
          </linearGradient>
        </defs>
        <rect x="30" y="14" width="60" height="90" rx="10" fill={`url(#pg1-${accent})`} stroke="#c3cad8" strokeWidth="1.5"/>
        <rect x="38" y="24" width="44" height="24" rx="4" fill="#0a1330"/>
        <text x="60" y="40" textAnchor="middle" fontSize="7" fill="#fff" fontFamily="sans-serif" fontWeight="700">모원</text>
        <circle cx="60" cy="66" r="9" fill="#fff" stroke={accent} strokeWidth="2"/>
        <path d="M60 61c2 3 3.5 4.5 3.5 6.5a3.5 3.5 0 1 1-7 0C56.5 65.5 58 64 60 61z" fill={accent}/>
        <rect x="46" y="82" width="28" height="12" rx="3" fill="#fff" stroke="#c3cad8"/>
        <circle cx="52" cy="88" r="2" fill={accent}/>
        <circle cx="60" cy="88" r="2" fill="#c3cad8"/>
        <circle cx="68" cy="88" r="2" fill="#c3cad8"/>
      </svg>
    ),
    ice: (
      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="pg2" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#eff6fc"/>
            <stop offset="100%" stopColor="#c5dbea"/>
          </linearGradient>
        </defs>
        <rect x="26" y="10" width="68" height="100" rx="12" fill="url(#pg2)" stroke="#b0c4d4" strokeWidth="1.5"/>
        <rect x="34" y="20" width="52" height="20" rx="4" fill="#0a1330"/>
        <circle cx="44" cy="30" r="3" fill="#00a3e0"/>
        <rect x="52" y="28" width="28" height="4" rx="1" fill="#fff" opacity=".5"/>
        <rect x="36" y="50" width="48" height="38" rx="6" fill="#fff" stroke="#b0c4d4" strokeWidth="1.2"/>
        <path d="M50 62l4 4 4-4M50 70l4 4 4-4" stroke="#00a3e0" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
        <circle cx="70" cy="68" r="6" fill={accent} opacity=".25"/>
        <circle cx="70" cy="68" r="3" fill={accent}/>
      </svg>
    ),
    bidet: (
      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="pg3" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#fafcfe"/>
            <stop offset="100%" stopColor="#d5dfe8"/>
          </linearGradient>
        </defs>
        <path d="M22 50c0-8 6-14 14-14h48c8 0 14 6 14 14v24c0 8-6 14-14 14H36c-8 0-14-6-14-14V50z" fill="url(#pg3)" stroke="#b0c4d4" strokeWidth="1.5"/>
        <rect x="30" y="40" width="36" height="8" rx="4" fill="#0a1330"/>
        <rect x="36" y="42" width="14" height="4" rx="1" fill={accent} opacity=".8"/>
        <circle cx="84" cy="62" r="12" fill="#fff" stroke="#b0c4d4"/>
        <circle cx="84" cy="62" r="4" fill={accent}/>
        <rect x="30" y="60" width="40" height="20" rx="6" fill="#fff" stroke="#b0c4d4"/>
        <circle cx="40" cy="70" r="3" fill="#e5edf2"/>
        <circle cx="50" cy="70" r="3" fill={accent}/>
        <circle cx="60" cy="70" r="3" fill="#e5edf2"/>
      </svg>
    ),
    air: (
      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="pg4" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#f5f9fc"/>
            <stop offset="100%" stopColor="#cfdde9"/>
          </linearGradient>
        </defs>
        <rect x="28" y="10" width="64" height="100" rx="14" fill="url(#pg4)" stroke="#b0c4d4" strokeWidth="1.5"/>
        <circle cx="60" cy="56" r="26" fill="#fff" stroke="#b0c4d4"/>
        <circle cx="60" cy="56" r="20" fill="none" stroke={accent} strokeWidth="1.5" strokeDasharray="3 4"/>
        <circle cx="60" cy="56" r="6" fill={accent}/>
        <rect x="38" y="92" width="44" height="10" rx="3" fill="#0a1330"/>
        <circle cx="46" cy="97" r="2" fill={accent}/>
        <rect x="52" y="95" width="26" height="4" rx="1" fill="#fff" opacity=".3"/>
      </svg>
    ),
  };
  return variants[variant] || variants.purifier;
};

// Hero product visual — large water purifier with water splash
const HeroVisual = () => (
  <svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg" style={{width:'100%',height:'100%'}}>
    <defs>
      <linearGradient id="heroBody" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#ffffff"/>
        <stop offset="100%" stopColor="#d6e3ed"/>
      </linearGradient>
      <radialGradient id="heroGlow" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#ffd87a" stopOpacity=".6"/>
        <stop offset="100%" stopColor="#ffd87a" stopOpacity="0"/>
      </radialGradient>
    </defs>
    <ellipse cx="120" cy="110" rx="100" ry="100" fill="url(#heroGlow)"/>
    {/* body */}
    <rect x="72" y="28" width="96" height="158" rx="14" fill="url(#heroBody)" stroke="rgba(255,255,255,.6)" strokeWidth="1.5"/>
    {/* screen */}
    <rect x="84" y="40" width="72" height="34" rx="6" fill="#0a1330"/>
    <text x="120" y="58" textAnchor="middle" fill="#fff" fontSize="10" fontFamily="'Paperlogy', sans-serif" fontWeight="900" letterSpacing="-.02em">모원</text>
    <rect x="94" y="62" width="52" height="6" rx="2" fill="#00a3e0" opacity=".85"/>
    {/* spout */}
    <rect x="96" y="84" width="48" height="20" rx="4" fill="#fff" stroke="#b0c4d4"/>
    <rect x="112" y="98" width="16" height="8" rx="2" fill="#6b7487"/>
    {/* water drops */}
    <circle cx="120" cy="120" r="3" fill="#00a3e0"/>
    <circle cx="120" cy="130" r="2.5" fill="#00a3e0" opacity=".7"/>
    <circle cx="120" cy="140" r="2" fill="#00a3e0" opacity=".5"/>
    {/* controls */}
    <circle cx="92" cy="128" r="7" fill="#fff" stroke="#b0c4d4"/>
    <circle cx="92" cy="128" r="3" fill="#ff3b4c"/>
    <circle cx="148" cy="128" r="7" fill="#fff" stroke="#b0c4d4"/>
    <circle cx="148" cy="128" r="3" fill="#00a3e0"/>
    {/* glass */}
    <path d="M92 170 L148 170 L142 200 L98 200 Z" fill="#fff" fillOpacity=".3" stroke="rgba(255,255,255,.7)" strokeWidth="1.2"/>
    <path d="M98 180 L142 180" stroke="#00a3e0" strokeWidth="2" opacity=".8"/>
    <path d="M100 184 L140 184" stroke="#00a3e0" strokeWidth="1.5" opacity=".5"/>
    {/* sparkles */}
    <g fill="#ffd87a">
      <path d="M36 60 l3 -8 l3 8 l8 3 l-8 3 l-3 8 l-3 -8 l-8 -3 z" opacity=".8"/>
      <path d="M202 90 l2 -5 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 z" opacity=".9"/>
      <path d="M46 150 l2 -4 l2 4 l4 2 l-4 2 l-2 4 l-2 -4 l-4 -2 z" opacity=".7"/>
    </g>
  </svg>
);

// Card brand colors palette
const cardDesigns = [
  { gradient: 'linear-gradient(135deg, #1a5490 0%, #0d3a6b 100%)', brand: 'KB국민' },
  { gradient: 'linear-gradient(135deg, #0055a5 0%, #003b7a 100%)', brand: '우리카드' },
  { gradient: 'linear-gradient(135deg, #1428a0 0%, #0a1870 100%)', brand: 'SAMSUNG' },
  { gradient: 'linear-gradient(135deg, #00857e 0%, #005f5a 100%)', brand: '하나카드' },
  { gradient: 'linear-gradient(135deg, #004ea2 0%, #002e66 100%)', brand: 'IBK기업' },
  { gradient: 'linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)', brand: '현대카드' },
  { gradient: 'linear-gradient(135deg, #ee2d24 0%, #a81812 100%)', brand: 'LotteCard' },
  { gradient: 'linear-gradient(135deg, #0046ff 0%, #002dc1 100%)', brand: '신한카드' },
];

Object.assign(window, { I, ProductArt, HeroVisual, cardDesigns });
