// Reusable SVG decorations + icons for v2

const Squiggle = ({ color = "currentColor", size = 80 }) => (
  <svg width={size} height={size * 0.4} viewBox="0 0 100 40" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round">
    <path d="M4 20 Q 18 4, 32 20 T 60 20 T 88 20" />
  </svg>
);

const Sparkle = ({ color = "currentColor", size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill={color}>
    <path d="M16 2 L18.5 13.5 L30 16 L18.5 18.5 L16 30 L13.5 18.5 L2 16 L13.5 13.5 Z" />
  </svg>
);

const Star = ({ color = "currentColor", size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M12 2l2.7 6.3L21 9l-5 4.9 1.2 7.1L12 17.8 5.8 21l1.2-7.1L2 9l6.3-.7L12 2z"/>
  </svg>
);

const Arrow = ({ size = 18, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
);

const Burst = ({ color = "currentColor", size = 60 }) => (
  <svg width={size} height={size} viewBox="0 0 60 60" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round">
    <line x1="30" y1="4" x2="30" y2="14" />
    <line x1="30" y1="46" x2="30" y2="56" />
    <line x1="4" y1="30" x2="14" y2="30" />
    <line x1="46" y1="30" x2="56" y2="30" />
    <line x1="11" y1="11" x2="18" y2="18" />
    <line x1="42" y1="42" x2="49" y2="49" />
    <line x1="49" y1="11" x2="42" y2="18" />
    <line x1="18" y1="42" x2="11" y2="49" />
  </svg>
);

const IconNetwork = ({ size = 42 }) => (
  <svg width={size} height={size} viewBox="0 0 42 42" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
    <circle cx="21" cy="21" r="4" fill="currentColor"/>
    <circle cx="6" cy="10" r="3"/><circle cx="36" cy="10" r="3"/>
    <circle cx="6" cy="32" r="3"/><circle cx="36" cy="32" r="3"/>
    <line x1="9" y1="11" x2="17" y2="19"/>
    <line x1="33" y1="11" x2="25" y2="19"/>
    <line x1="9" y1="31" x2="17" y2="23"/>
    <line x1="33" y1="31" x2="25" y2="23"/>
  </svg>
);

const IconWarehouse = ({ size = 42 }) => (
  <svg width={size} height={size} viewBox="0 0 42 42" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 18 L21 6 L38 18 V36 H4 Z"/>
    <rect x="11" y="23" width="8" height="6"/>
    <rect x="23" y="23" width="8" height="6"/>
    <line x1="4" y1="36" x2="38" y2="36"/>
  </svg>
);

const IconLocalize = ({ size = 42 }) => (
  <svg width={size} height={size} viewBox="0 0 42 42" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
    <circle cx="21" cy="21" r="15"/>
    <ellipse cx="21" cy="21" rx="7" ry="15"/>
    <line x1="6" y1="21" x2="36" y2="21"/>
  </svg>
);

const Pouch = ({ color = "#E16A8F", accent = "#FFFFFF", label = "TULEEN", flavor = "Flavor" }) => (
  <svg viewBox="0 0 200 280" className="pouch" xmlns="http://www.w3.org/2000/svg">
    {/* Pouch silhouette */}
    <defs>
      <linearGradient id={`grad-${label}`} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={color} stopOpacity="1"/>
        <stop offset="100%" stopColor={color} stopOpacity="0.82"/>
      </linearGradient>
    </defs>
    {/* top zipper */}
    <rect x="22" y="6" width="156" height="14" rx="3" fill={color} stroke="#1A1712" strokeWidth="2"/>
    <line x1="26" y1="13" x2="174" y2="13" stroke="#1A1712" strokeWidth="0.8" strokeDasharray="3 2"/>
    {/* body */}
    <path d="M18 22 Q 18 22 24 22 L 176 22 Q 182 22 182 30 L 182 258 Q 182 268 172 268 L 28 268 Q 18 268 18 258 Z"
      fill={`url(#grad-${label})`} stroke="#1A1712" strokeWidth="2"/>
    {/* side seal lines */}
    <line x1="26" y1="30" x2="26" y2="260" stroke="#1A1712" strokeOpacity="0.3" strokeWidth="1" strokeDasharray="2 3"/>
    <line x1="174" y1="30" x2="174" y2="260" stroke="#1A1712" strokeOpacity="0.3" strokeWidth="1" strokeDasharray="2 3"/>
    {/* bottom stand */}
    <ellipse cx="100" cy="268" rx="74" ry="5" fill="#1A1712" opacity="0.18"/>
    {/* Label panel */}
    <rect x="40" y="60" width="120" height="160" rx="6" fill={accent} stroke="#1A1712" strokeWidth="1.5"/>
    {/* top tab */}
    <rect x="58" y="48" width="84" height="22" rx="3" fill={color} stroke="#1A1712" strokeWidth="1.5"/>
    <text x="100" y="63" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="10" fill={accent} letterSpacing="1">PREMIUM</text>
    {/* brand name */}
    <text x="100" y="110" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="22" fill={color} letterSpacing="-0.5">
      {label.toUpperCase()}
    </text>
    {/* decorative burst */}
    <circle cx="100" cy="140" r="18" fill={color} opacity="0.15"/>
    <circle cx="100" cy="140" r="12" fill={color}/>
    <text x="100" y="144" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="10" fill={accent} fontWeight="600">NEW</text>
    {/* flavor */}
    <text x="100" y="182" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="13" fill="#1A1712" fontWeight="500">{flavor}</text>
    {/* bottom weight */}
    <rect x="70" y="200" width="60" height="14" rx="2" fill={color} opacity="0.25"/>
    <text x="100" y="210" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontSize="8" fill="#1A1712" letterSpacing="1" fontWeight="600">NET WT. 100g</text>
  </svg>
);

Object.assign(window, { Squiggle, Sparkle, Star, Arrow, Burst, IconNetwork, IconWarehouse, IconLocalize, Pouch });
