// Burger House — flat vector illustrations used as product imagery
// Stylized, abstract, NOT brand-specific

const BurgerIllo = ({ size = 200, accent = 'var(--accent)' }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    {/* Bun top */}
    <path d="M30 92 Q 100 20 170 92 Z" fill="#d49a52" />
    <circle cx="80" cy="62" r="2" fill="#fff8e6" />
    <circle cx="115" cy="55" r="2" fill="#fff8e6" />
    <circle cx="135" cy="70" r="2" fill="#fff8e6" />
    <circle cx="65" cy="78" r="2" fill="#fff8e6" />
    {/* Lettuce */}
    <path d="M28 100 L 172 100 L 168 110 Q 150 115 130 108 Q 110 116 90 108 Q 70 116 50 108 Q 36 113 32 110 Z" fill="#6b9b3f" />
    {/* Cheese */}
    <path d="M30 116 L 170 116 L 174 124 L 26 124 Z" fill="#e8b842" />
    {/* Patty */}
    <rect x="28" y="124" width="144" height="16" rx="3" fill="#5a3a22" />
    {/* Bun bottom */}
    <path d="M30 140 L 170 140 Q 168 168 100 168 Q 32 168 30 140 Z" fill="#c98a44" />
  </svg>
);

const ChickenIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    <ellipse cx="100" cy="100" rx="78" ry="62" fill="#e6b878" />
    <ellipse cx="100" cy="100" rx="60" ry="46" fill="#d49a52" opacity=".6" />
    <circle cx="70" cy="85" r="3" fill="#a86a2f" />
    <circle cx="130" cy="92" r="3" fill="#a86a2f" />
    <circle cx="100" cy="115" r="3" fill="#a86a2f" />
    <circle cx="80" cy="120" r="2" fill="#a86a2f" />
    <circle cx="120" cy="78" r="2" fill="#a86a2f" />
  </svg>
);

const FriesIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    {/* Carton */}
    <path d="M50 110 L 150 110 L 142 175 L 58 175 Z" fill="#c1410f" />
    <rect x="50" y="105" width="100" height="12" fill="#a8350a" />
    {/* Fries */}
    {[60, 72, 84, 96, 108, 120, 132].map((x, i) => (
      <rect key={i} x={x} y={50 + (i % 3) * 8} width="8" height={70 - (i % 3) * 8} fill="#f4c95a" />
    ))}
  </svg>
);

const DrinkIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    <path d="M70 60 L 130 60 L 138 175 L 62 175 Z" fill="#e8e3d6" />
    <ellipse cx="100" cy="60" rx="30" ry="6" fill="#c4bcae" />
    <rect x="95" y="30" width="6" height="35" fill="#c1410f" />
    <ellipse cx="98" cy="32" rx="6" ry="3" fill="#c1410f" />
  </svg>
);

const DessertIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    <path d="M70 100 L 130 100 L 124 175 L 76 175 Z" fill="#f4ede0" />
    <ellipse cx="100" cy="100" rx="34" ry="8" fill="#e4dfd4" />
    {/* Soft serve */}
    <path d="M70 100 Q 70 70 85 65 Q 90 45 100 50 Q 115 40 118 60 Q 132 65 130 100 Z" fill="#fff8e6" />
    <circle cx="100" cy="58" r="4" fill="#c1410f" />
  </svg>
);

const SaladIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    <ellipse cx="100" cy="120" rx="78" ry="42" fill="#f4ede0" />
    <ellipse cx="100" cy="115" rx="68" ry="34" fill="#6b9b3f" />
    <circle cx="80" cy="105" r="6" fill="#c1410f" />
    <circle cx="120" cy="120" r="6" fill="#c1410f" />
    <circle cx="100" cy="100" r="5" fill="#e8b842" />
    <circle cx="115" cy="105" r="4" fill="#8aa84a" />
    <circle cx="85" cy="120" r="4" fill="#8aa84a" />
  </svg>
);

const BreakfastIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    <ellipse cx="100" cy="115" rx="60" ry="14" fill="#d4a878" />
    <ellipse cx="100" cy="100" rx="60" ry="14" fill="#e6b878" />
    <ellipse cx="100" cy="85" rx="60" ry="14" fill="#f4c95a" />
    <circle cx="100" cy="80" r="14" fill="#fff8e6" />
    <circle cx="100" cy="80" r="6" fill="#f4a932" />
  </svg>
);

const KidsIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    <rect x="45" y="60" width="110" height="115" rx="6" fill="#c1410f" />
    <path d="M55 60 Q 60 30 80 35 Q 90 20 100 30 Q 115 18 125 35 Q 145 28 150 60 Z" fill="#e8b842" />
    <circle cx="80" cy="105" r="6" fill="#fff" />
    <circle cx="120" cy="105" r="6" fill="#fff" />
    <path d="M82 130 Q 100 145 118 130" stroke="#fff" strokeWidth="4" fill="none" strokeLinecap="round" />
  </svg>
);

const SauceIllo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block' }}>
    <ellipse cx="100" cy="135" rx="60" ry="14" fill="#e8b842" />
    <ellipse cx="100" cy="125" rx="60" ry="14" fill="#f4c95a" />
    <rect x="95" y="60" width="10" height="65" fill="#f4c95a" />
    <rect x="85" y="55" width="30" height="10" rx="2" fill="#a8350a" />
  </svg>
);

const ILLOS = {
  burger: BurgerIllo,
  chicken: ChickenIllo,
  fries: FriesIllo,
  drink: DrinkIllo,
  dessert: DessertIllo,
  salad: SaladIllo,
  breakfast: BreakfastIllo,
  kids: KidsIllo,
  sauce: SauceIllo,
};

const Illo = ({ kind = 'burger', size = 200 }) => {
  const C = ILLOS[kind] || BurgerIllo;
  return <C size={size} />;
};

Object.assign(window, { Illo, BurgerIllo, ChickenIllo, FriesIllo, DrinkIllo, DessertIllo, SaladIllo, BreakfastIllo, KidsIllo, SauceIllo });