// P&L England — shared illustrations & icons
// CSS-rendered fruit/produce as SVGs so we don't need photo assets.
// User can swap these for real photography later.

const Icon = {
  Arrow: ({size=16, className=''}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
      <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  ArrowDown: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Plus: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  Minus: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 12h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  Check: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M4 12l5 5L20 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Whatsapp: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M19.05 4.91A10 10 0 0 0 4.07 18.49L3 22l3.61-1.05A10 10 0 1 0 19.05 4.9zm-7 15.4a8.3 8.3 0 0 1-4.22-1.15l-.3-.18-2.14.62.63-2.09-.2-.32A8.32 8.32 0 1 1 21 13a8.27 8.27 0 0 1-9 8.31zm4.57-6.23c-.25-.13-1.48-.73-1.71-.81s-.4-.13-.56.13-.65.81-.79.97-.29.2-.54.07a6.83 6.83 0 0 1-3.36-2.94c-.25-.43.25-.4.72-1.34a.45.45 0 0 0 0-.43c-.07-.13-.56-1.36-.77-1.86s-.41-.42-.56-.43h-.48a.93.93 0 0 0-.67.31 2.83 2.83 0 0 0-.88 2.1A4.91 4.91 0 0 0 8 11.66a11.27 11.27 0 0 0 4.32 3.82c1.61.69 2.24.75 3.04.63a2.58 2.58 0 0 0 1.7-1.2 2.1 2.1 0 0 0 .15-1.2c-.06-.11-.23-.18-.48-.3z"/>
    </svg>
  ),
  Mail: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.6"/>
    </svg>
  ),
  Pin: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 22s7-7.58 7-13a7 7 0 1 0-14 0c0 5.42 7 13 7 13z" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="12" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.6"/>
    </svg>
  ),
  Plane: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M3.5 14.5l4-1 6.5 5.5-1 1.5L9 16l-3.5 2L3 16l3-2-2.5-2z M14 11l7-7-1-1-7 7-3-1-1 1 3 2v3l1 1 1-3 3-2-3-1z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
    </svg>
  ),
  Doc: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z M14 3v6h6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
    </svg>
  ),
  Truck: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M1 7h13v9H1z M14 10h4l3 3v3h-7z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <circle cx="6" cy="18" r="2" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="18" cy="18" r="2" stroke="currentColor" strokeWidth="1.6"/>
    </svg>
  ),
  Leaf: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M3 21c0-9 6-15 18-18-1 12-7 18-18 18z M3 21c4-4 8-7 13-9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Shield: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Globe: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M3 12h18 M12 3a14 14 0 0 1 0 18 M12 3a14 14 0 0 0 0 18" stroke="currentColor" strokeWidth="1.6"/>
    </svg>
  ),
  Tag: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M20.59 13.41l-7.18 7.18a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <circle cx="7" cy="7" r="1.4" fill="currentColor"/>
    </svg>
  ),
  X: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  Menu: ({size=20}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M4 7h16M4 17h16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  Search: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  Download: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 4v12M6 11l6 6 6-6M4 20h16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

// Stylised produce illustrations using SVG. Used as photo placeholders.
const Produce = {
  Peach: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="peach-g" cx="35%" cy="30%">
          <stop offset="0%" stopColor="#FFCB8A"/>
          <stop offset="50%" stopColor="#F39A5C"/>
          <stop offset="100%" stopColor="#C9522A"/>
        </radialGradient>
      </defs>
      <ellipse cx="60" cy="65" rx="42" ry="40" fill="url(#peach-g)"/>
      <path d="M60 25 C 56 22, 50 22, 48 26" stroke="#1F3D2E" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M48 26 C 42 16, 30 18, 32 28 C 38 30, 46 28, 48 26z" fill="#4A8B5C"/>
      <path d="M62 50 C 64 65, 56 80, 50 90" stroke="#A8401E" strokeWidth="1.5" fill="none" opacity="0.5"/>
    </svg>
  ),
  Cherry: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="cherry-g" cx="35%" cy="35%">
          <stop offset="0%" stopColor="#E8485A"/>
          <stop offset="100%" stopColor="#8E1A1F"/>
        </radialGradient>
      </defs>
      <path d="M60 20 C 50 35, 40 50, 42 65" stroke="#3A2418" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <path d="M60 20 C 70 35, 80 45, 78 60" stroke="#3A2418" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <path d="M60 20 C 70 14, 85 18, 90 12" stroke="#4A8B5C" strokeWidth="3" fill="none" strokeLinecap="round"/>
      <ellipse cx="78" cy="68" rx="20" ry="22" fill="url(#cherry-g)"/>
      <ellipse cx="42" cy="74" rx="20" ry="22" fill="url(#cherry-g)"/>
      <ellipse cx="73" cy="62" rx="6" ry="4" fill="#FFB8C2" opacity="0.5"/>
      <ellipse cx="37" cy="68" rx="6" ry="4" fill="#FFB8C2" opacity="0.5"/>
    </svg>
  ),
  Lemon: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="lemon-g" cx="35%" cy="35%">
          <stop offset="0%" stopColor="#FFEC8A"/>
          <stop offset="100%" stopColor="#D9A030"/>
        </radialGradient>
      </defs>
      <ellipse cx="60" cy="60" rx="44" ry="34" fill="url(#lemon-g)" transform="rotate(-15 60 60)"/>
      <circle cx="48" cy="50" r="2" fill="#A87010" opacity="0.4"/>
      <circle cx="68" cy="55" r="2" fill="#A87010" opacity="0.4"/>
      <circle cx="56" cy="68" r="2" fill="#A87010" opacity="0.4"/>
      <circle cx="78" cy="68" r="2" fill="#A87010" opacity="0.4"/>
      <path d="M14 40 C 8 35, 4 38, 4 30" stroke="#4A8B5C" strokeWidth="3" fill="none"/>
      <ellipse cx="14" cy="38" rx="6" ry="3" fill="#4A8B5C" transform="rotate(-30 14 38)"/>
    </svg>
  ),
  Strawberry: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="straw-g" cx="35%" cy="40%">
          <stop offset="0%" stopColor="#F45B4D"/>
          <stop offset="100%" stopColor="#A8201A"/>
        </radialGradient>
      </defs>
      <path d="M30 45 C 30 80, 50 105, 60 105 C 70 105, 90 80, 90 45 C 90 40, 75 35, 60 35 C 45 35, 30 40, 30 45z" fill="url(#straw-g)"/>
      <g fill="#3A2418">
        <ellipse cx="44" cy="55" rx="2" ry="3" transform="rotate(-20 44 55)"/>
        <ellipse cx="60" cy="60" rx="2" ry="3"/>
        <ellipse cx="76" cy="55" rx="2" ry="3" transform="rotate(20 76 55)"/>
        <ellipse cx="50" cy="72" rx="2" ry="3" transform="rotate(-15 50 72)"/>
        <ellipse cx="68" cy="72" rx="2" ry="3" transform="rotate(15 68 72)"/>
        <ellipse cx="60" cy="85" rx="2" ry="3"/>
      </g>
      <path d="M40 42 L 50 25 L 55 38 L 60 22 L 65 38 L 70 25 L 80 42 Z" fill="#3D6B3F"/>
      <path d="M55 25 L 60 12 L 65 25" stroke="#3D6B3F" strokeWidth="3" fill="none" strokeLinecap="round"/>
    </svg>
  ),
  Pepper: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="pep-g" cx="40%" cy="35%">
          <stop offset="0%" stopColor="#F03B26"/>
          <stop offset="100%" stopColor="#8A1A0E"/>
        </radialGradient>
      </defs>
      <path d="M40 40 C 30 50, 28 75, 40 90 C 50 100, 70 100, 80 90 C 92 75, 90 50, 80 40 C 75 35, 70 38, 60 38 C 50 38, 45 35, 40 40 z" fill="url(#pep-g)"/>
      <path d="M50 40 C 50 32, 60 28, 70 32 L 75 25 L 60 22 L 50 28 Z" fill="#3D6B3F"/>
      <path d="M60 22 L 60 14" stroke="#3D6B3F" strokeWidth="4" strokeLinecap="round"/>
      <path d="M55 50 C 52 60, 52 75, 55 85" stroke="#FFD8C8" strokeWidth="3" fill="none" opacity="0.4" strokeLinecap="round"/>
    </svg>
  ),
  Tomato: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="tom-g" cx="40%" cy="40%">
          <stop offset="0%" stopColor="#F04B33"/>
          <stop offset="100%" stopColor="#A02218"/>
        </radialGradient>
      </defs>
      <ellipse cx="60" cy="65" rx="40" ry="36" fill="url(#tom-g)"/>
      <path d="M60 32 L 50 22 L 60 28 L 70 22 L 65 30 L 78 26 L 70 34 L 80 36 L 68 38 L 60 32 L 52 38 L 40 36 L 50 34 L 42 26 Z" fill="#3D6B3F"/>
      <ellipse cx="50" cy="55" rx="6" ry="3" fill="#FFB8A0" opacity="0.4"/>
    </svg>
  ),
  Grape: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="grape-g" cx="35%" cy="35%">
          <stop offset="0%" stopColor="#7A4A8C"/>
          <stop offset="100%" stopColor="#3A1F47"/>
        </radialGradient>
      </defs>
      <path d="M50 20 L 55 35" stroke="#6B4520" strokeWidth="2.5" strokeLinecap="round"/>
      <path d="M40 25 C 50 22, 60 18, 70 22" stroke="#4A8B5C" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {[
        [42,42],[58,42],[74,42],
        [50,55],[66,55],
        [42,68],[58,68],[74,68],
        [50,82],[66,82],
        [58,94]
      ].map(([x,y],i)=>(
        <circle key={i} cx={x} cy={y} r="10" fill="url(#grape-g)"/>
      ))}
    </svg>
  ),
  Apple: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="apple-g" cx="35%" cy="35%">
          <stop offset="0%" stopColor="#7AB85A"/>
          <stop offset="100%" stopColor="#3A6B2A"/>
        </radialGradient>
      </defs>
      <path d="M30 50 C 25 80, 40 100, 60 100 C 80 100, 95 80, 90 50 C 88 38, 75 32, 65 38 C 60 40, 60 40, 55 38 C 45 32, 32 38, 30 50z" fill="url(#apple-g)"/>
      <path d="M60 38 C 60 30, 62 22, 68 18" stroke="#5A3818" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <path d="M65 22 C 75 18, 85 22, 88 12 C 80 12, 70 14, 65 22z" fill="#4A8B5C"/>
    </svg>
  ),
  Mango: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="man-g" cx="35%" cy="40%">
          <stop offset="0%" stopColor="#FFD05E"/>
          <stop offset="50%" stopColor="#F08A3C"/>
          <stop offset="100%" stopColor="#C04D2A"/>
        </radialGradient>
      </defs>
      <path d="M22 60 C 22 35, 50 22, 80 32 C 100 40, 100 75, 80 92 C 55 105, 22 90, 22 60z" fill="url(#man-g)"/>
      <path d="M82 28 C 80 22, 88 20, 92 22" stroke="#3D6B3F" strokeWidth="3" fill="none" strokeLinecap="round"/>
      <ellipse cx="40" cy="50" rx="8" ry="4" fill="#FFE8A8" opacity="0.5"/>
    </svg>
  ),
  Cucumber: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <linearGradient id="cuc-g" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#5A8B3A"/>
          <stop offset="100%" stopColor="#2A4A20"/>
        </linearGradient>
      </defs>
      <path d="M20 80 C 15 65, 25 40, 50 25 C 75 15, 100 25, 100 40 C 100 50, 90 55, 80 55 C 70 60, 60 70, 50 80 C 40 95, 25 95, 20 80z" fill="url(#cuc-g)"/>
      <g stroke="#3A6B2A" strokeWidth="1" fill="none" opacity="0.5">
        <path d="M30 75 L 32 73"/>
        <path d="M40 70 L 42 68"/>
        <path d="M50 60 L 52 58"/>
        <path d="M60 50 L 62 48"/>
        <path d="M70 42 L 72 40"/>
      </g>
    </svg>
  ),
  Onion: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <defs>
        <radialGradient id="oni-g" cx="40%" cy="40%">
          <stop offset="0%" stopColor="#E8C088"/>
          <stop offset="100%" stopColor="#9E6428"/>
        </radialGradient>
      </defs>
      <path d="M30 60 C 30 95, 50 105, 60 105 C 70 105, 90 95, 90 60 C 90 38, 75 30, 60 30 C 45 30, 30 38, 30 60z" fill="url(#oni-g)"/>
      <path d="M52 30 C 52 22, 50 18, 48 12 M58 30 C 58 22, 60 16, 60 10 M64 30 C 64 22, 68 18, 70 14" stroke="#3D6B3F" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M60 60 L 60 100 M48 65 L 52 100 M72 65 L 68 100" stroke="#7A4818" strokeWidth="0.8" fill="none" opacity="0.4"/>
    </svg>
  ),
  Broccoli: ({size=120}) => (
    <svg width={size} height={size} viewBox="0 0 120 120">
      <path d="M55 70 L 50 105 L 70 105 L 65 70" fill="#E8DCB8"/>
      <g fill="#3D6B3F">
        <circle cx="40" cy="45" r="14"/>
        <circle cx="60" cy="38" r="16"/>
        <circle cx="80" cy="48" r="14"/>
        <circle cx="50" cy="60" r="12"/>
        <circle cx="72" cy="62" r="13"/>
        <circle cx="60" cy="52" r="12"/>
      </g>
      <g fill="#5A9B5C" opacity="0.7">
        <circle cx="38" cy="42" r="4"/>
        <circle cx="58" cy="35" r="4"/>
        <circle cx="78" cy="45" r="4"/>
      </g>
    </svg>
  ),
};

Object.assign(window, { Icon, Produce });
