/* ============================================================
   Shared SVG art: brand logo, product illustrations, client logos
============================================================ */

/* --- Brand Logo (Israeli flag inspired mark) --- */
const BrandLogo = ({ size = 48 }) => (
  <svg viewBox="0 0 48 38" width={size} height={size * 38/48} fill="none">
    {/* Top stripe */}
    <rect x="0" y="2" width="48" height="3" fill="#0B2D5C" />
    {/* Bottom stripe */}
    <rect x="0" y="33" width="48" height="3" fill="#0B2D5C" />
    {/* Star of David - simplified two triangles */}
    <g transform="translate(24,19)">
      <polygon points="0,-9 7.79,4.5 -7.79,4.5" fill="none" stroke="#0B2D5C" strokeWidth="2" strokeLinejoin="round" />
      <polygon points="0,9 7.79,-4.5 -7.79,-4.5" fill="none" stroke="#D62839" strokeWidth="2" strokeLinejoin="round" />
    </g>
  </svg>
);

const BrandMark = ({ size = 38 }) => (
  <svg viewBox="0 0 48 38" width={size} height={size * 38/48} fill="none">
    <rect x="0" y="2" width="48" height="3" fill="#0B2D5C" />
    <rect x="0" y="33" width="48" height="3" fill="#0B2D5C" />
    <g transform="translate(24,19)">
      <polygon points="0,-9 7.79,4.5 -7.79,4.5" fill="none" stroke="#0B2D5C" strokeWidth="2" strokeLinejoin="round" />
      <polygon points="0,9 7.79,-4.5 -7.79,-4.5" fill="none" stroke="#D62839" strokeWidth="2" strokeLinejoin="round" />
    </g>
  </svg>
);

/* --- Product illustrations for category cards --- */
const Prod = {
  Flags: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="pf-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#dde7f3" />
          <stop offset="100%" stopColor="#c8d6e8" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#pf-bg)" />
      {/* poles */}
      <rect x="60" y="20" width="2" height="120" fill="#6b7280" />
      <rect x="100" y="14" width="2" height="126" fill="#6b7280" />
      <rect x="140" y="22" width="2" height="118" fill="#6b7280" />
      {/* flags - Israeli */}
      <g>
        <path d="M62 22 L92 28 L92 58 L62 52 Z" fill="#f9fafb" stroke="#cbd5e1" strokeWidth="0.5" />
        <rect x="62" y="26" width="30" height="3" fill="#0B2D5C" transform="skewY(8)" />
        <rect x="62" y="48" width="30" height="3" fill="#0B2D5C" transform="skewY(8)" />
        <polygon points="74,36 78,42 70,42" fill="none" stroke="#0B2D5C" strokeWidth="0.8" transform="skewY(8) translate(0,-2)" />
        <polygon points="74,44 78,38 70,38" fill="none" stroke="#0B2D5C" strokeWidth="0.8" transform="skewY(8) translate(0,-2)" />
      </g>
      <g>
        <path d="M102 16 L132 22 L132 52 L102 46 Z" fill="#f9fafb" stroke="#cbd5e1" strokeWidth="0.5" />
        <rect x="102" y="20" width="30" height="3" fill="#0B2D5C" transform="skewY(8)" />
        <rect x="102" y="42" width="30" height="3" fill="#0B2D5C" transform="skewY(8)" />
        <polygon points="114,30 118,36 110,36" fill="none" stroke="#0B2D5C" strokeWidth="0.8" transform="skewY(8) translate(0,-2)" />
        <polygon points="114,38 118,32 110,32" fill="none" stroke="#0B2D5C" strokeWidth="0.8" transform="skewY(8) translate(0,-2)" />
      </g>
      <g>
        <path d="M142 24 L172 30 L172 60 L142 54 Z" fill="#f9fafb" stroke="#cbd5e1" strokeWidth="0.5" />
        <rect x="142" y="28" width="30" height="3" fill="#0B2D5C" transform="skewY(8)" />
        <rect x="142" y="50" width="30" height="3" fill="#0B2D5C" transform="skewY(8)" />
      </g>
    </svg>
  ),
  Beach: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="pb-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#dceaf7" />
          <stop offset="100%" stopColor="#bdd1ea" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#pb-bg)" />
      {/* beach flags - teardrop shapes */}
      <g>
        <path d="M40 30 Q70 50 60 110 L62 130 L60 110 Q70 50 40 30 Z" fill="#fff" stroke="#cbd5e1" />
        <text x="50" y="80" textAnchor="middle" fill="#0B2D5C" fontSize="10" fontWeight="700">LOGO</text>
      </g>
      <g>
        <path d="M95 22 Q125 42 115 115 L117 135 L115 115 Q125 42 95 22 Z" fill="#0B2D5C" />
        <text x="105" y="80" textAnchor="middle" fill="#fff" fontSize="10" fontWeight="700">BRAND</text>
      </g>
      <g>
        <path d="M150 30 Q180 50 170 110 L172 130 L170 110 Q180 50 150 30 Z" fill="#D62839" />
        <text x="160" y="80" textAnchor="middle" fill="#fff" fontSize="10" fontWeight="700">SALE</text>
      </g>
      <rect x="59" y="125" width="4" height="14" fill="#475569" />
      <rect x="114" y="130" width="4" height="14" fill="#475569" />
      <rect x="169" y="125" width="4" height="14" fill="#475569" />
    </svg>
  ),
  Rollup: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="pr-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#dde7f3" />
          <stop offset="100%" stopColor="#c8d6e8" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#pr-bg)" />
      {/* 3 rollups */}
      <g transform="translate(30,20)">
        <rect x="0" y="0" width="40" height="100" fill="#fff" stroke="#cbd5e1" />
        <rect x="3" y="6" width="34" height="10" fill="#0B2D5C" />
        <rect x="3" y="22" width="20" height="2" fill="#94a3b8" />
        <rect x="3" y="28" width="34" height="2" fill="#94a3b8" />
        <rect x="3" y="34" width="28" height="2" fill="#94a3b8" />
        <circle cx="20" cy="60" r="8" fill="#D62839" opacity="0.7" />
        <rect x="-2" y="100" width="44" height="6" fill="#475569" />
      </g>
      <g transform="translate(80,15)">
        <rect x="0" y="0" width="40" height="106" fill="#0B2D5C" />
        <rect x="3" y="6" width="34" height="14" fill="#fff" opacity="0.95" />
        <rect x="3" y="24" width="34" height="2" fill="#fff" opacity="0.6" />
        <rect x="3" y="30" width="28" height="2" fill="#fff" opacity="0.6" />
        <rect x="3" y="36" width="20" height="2" fill="#fff" opacity="0.6" />
        <circle cx="20" cy="65" r="10" fill="#D62839" />
        <rect x="-2" y="106" width="44" height="6" fill="#475569" />
      </g>
      <g transform="translate(130,22)">
        <rect x="0" y="0" width="40" height="98" fill="#fff" stroke="#cbd5e1" />
        <rect x="3" y="6" width="34" height="10" fill="#D62839" />
        <rect x="3" y="22" width="28" height="2" fill="#94a3b8" />
        <rect x="3" y="28" width="34" height="2" fill="#94a3b8" />
        <rect x="3" y="34" width="20" height="2" fill="#94a3b8" />
        <rect x="3" y="60" width="34" height="24" fill="#dde7f3" />
        <rect x="-2" y="98" width="44" height="6" fill="#475569" />
      </g>
    </svg>
  ),
  TShirt: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="pt-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#e9eef5" />
          <stop offset="100%" stopColor="#d0dbeb" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#pt-bg)" />
      {[
        { x: 30, fill: '#fff', stroke: '#cbd5e1', logoFill: '#D62839' },
        { x: 80, fill: '#0B2D5C', stroke: null, logoFill: '#fff' },
        { x: 130, fill: '#D62839', stroke: null, logoFill: '#fff' },
      ].map((s, i) => (
        <g key={i} transform={`translate(${s.x}, 30)`}>
          <path
            d="M10 5 L20 0 Q25 0 25 6 L35 12 L33 22 L28 20 L28 80 L2 80 L2 20 L-3 22 L-5 12 L5 6 Q5 0 10 0 Z"
            fill={s.fill}
            stroke={s.stroke || 'none'}
            strokeWidth="0.5"
          />
          <circle cx="15" cy="40" r="6" fill={s.logoFill} />
        </g>
      ))}
    </svg>
  ),
  Sign: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="ps-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1f1a14" />
          <stop offset="100%" stopColor="#3a2e22" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#ps-bg)" />
      {/* wall */}
      <rect x="0" y="100" width="200" height="50" fill="#2a221a" />
      {/* large signage */}
      <g transform="translate(40, 35)">
        <rect x="0" y="0" width="120" height="55" rx="3" fill="#D6A847" opacity="0.9" />
        <text x="60" y="35" textAnchor="middle" fill="#0B2D5C" fontSize="22" fontWeight="800" letterSpacing="2">LOGO</text>
      </g>
      {/* glow */}
      <ellipse cx="100" cy="62" rx="80" ry="10" fill="#D6A847" opacity="0.15" />
    </svg>
  ),
  Tablecloth: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="ptc-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#dde7f3" />
          <stop offset="100%" stopColor="#c8d6e8" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#ptc-bg)" />
      {/* table */}
      <path d="M20 50 L180 50 L180 75 L195 140 L5 140 Z" fill="#0B2D5C" />
      <path d="M20 50 L180 50 L180 75 L5 140 Z" fill="#0B2D5C" opacity="0.85" />
      {/* logo center */}
      <circle cx="100" cy="100" r="22" fill="#fff" opacity="0.95" />
      <circle cx="100" cy="100" r="10" fill="#D62839" />
      <rect x="96" y="78" width="8" height="44" fill="#fff" />
    </svg>
  ),
  Promo: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="ppr-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#e9eef5" />
          <stop offset="100%" stopColor="#d0dbeb" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#ppr-bg)" />
      {/* pens */}
      <g transform="translate(28, 50)">
        <rect x="0" y="0" width="100" height="10" rx="2" fill="#0B2D5C" />
        <polygon points="100,0 110,5 100,10" fill="#94a3b8" />
        <rect x="20" y="2" width="40" height="6" fill="#fff" opacity="0.3" />
      </g>
      <g transform="translate(40, 70)">
        <rect x="0" y="0" width="100" height="10" rx="2" fill="#D62839" />
        <polygon points="100,0 110,5 100,10" fill="#94a3b8" />
      </g>
      {/* notebook */}
      <g transform="translate(80, 30)">
        <rect x="0" y="0" width="60" height="40" rx="3" fill="#0B2D5C" />
        <rect x="3" y="3" width="54" height="34" rx="2" fill="none" stroke="#fff" strokeWidth="0.5" opacity="0.4" />
        <text x="30" y="24" textAnchor="middle" fill="#fff" fontSize="9" fontWeight="700">LOGO</text>
      </g>
      {/* mug */}
      <g transform="translate(30, 95)">
        <rect x="0" y="0" width="30" height="35" rx="3" fill="#fff" stroke="#cbd5e1" />
        <path d="M30 8 Q42 12 30 24" fill="none" stroke="#cbd5e1" strokeWidth="2" />
        <circle cx="15" cy="18" r="6" fill="#D62839" />
      </g>
    </svg>
  ),
  Event: () => (
    <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="pev-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2a1014" />
          <stop offset="100%" stopColor="#4a1018" />
        </linearGradient>
      </defs>
      <rect width="200" height="150" fill="url(#pev-bg)" />
      {/* red carpet */}
      <polygon points="20,140 60,90 140,90 180,140" fill="#D62839" />
      <line x1="90" y1="90" x2="78" y2="140" stroke="#8a1820" strokeWidth="0.5" />
      <line x1="110" y1="90" x2="122" y2="140" stroke="#8a1820" strokeWidth="0.5" />
      {/* stanchions */}
      <circle cx="60" cy="92" r="3" fill="#d4af37" />
      <rect x="58" y="92" width="4" height="40" fill="#d4af37" />
      <circle cx="140" cy="92" r="3" fill="#d4af37" />
      <rect x="138" y="92" width="4" height="40" fill="#d4af37" />
      {/* backdrop */}
      <rect x="50" y="30" width="100" height="60" fill="#0B2D5C" />
      <circle cx="100" cy="58" r="16" fill="#fff" opacity="0.9" />
      <text x="100" y="63" textAnchor="middle" fill="#0B2D5C" fontSize="11" fontWeight="800">2026</text>
      <text x="100" y="82" textAnchor="middle" fill="#fff" fontSize="6" letterSpacing="2">SUMMIT</text>
    </svg>
  ),
};

/* --- Client logos (simplified institutional marks) --- */
const ClientLogos = {
  TLV: () => (
    <svg viewBox="0 0 120 60" fill="currentColor">
      <circle cx="22" cy="30" r="14" fill="none" stroke="currentColor" strokeWidth="1.2" />
      <path d="M22 18 L22 42 M14 30 L30 30" stroke="currentColor" strokeWidth="1.2" />
      <text x="44" y="28" fontSize="9" fontWeight="700">עיריית</text>
      <text x="44" y="42" fontSize="11" fontWeight="800">תל אביב יפו</text>
    </svg>
  ),
  Hadera: () => (
    <svg viewBox="0 0 120 60" fill="currentColor">
      <path d="M14 16 L28 16 L28 40 L14 40 Z M22 16 L22 12 L18 12 Z" fill="none" stroke="currentColor" strokeWidth="1.2" />
      <text x="38" y="30" fontSize="14" fontWeight="800">הדרה</text>
      <text x="38" y="44" fontSize="7" letterSpacing="1">עיר עם אנרגיה</text>
    </svg>
  ),
  IDF: () => (
    <svg viewBox="0 0 120 60" fill="currentColor">
      <g transform="translate(60,30)">
        <polygon points="0,-16 13.8,8 -13.8,8" fill="none" stroke="currentColor" strokeWidth="1.4" />
        <polygon points="0,16 13.8,-8 -13.8,-8" fill="none" stroke="currentColor" strokeWidth="1.4" />
        <text y="3" textAnchor="middle" fontSize="6" fontWeight="700">צה״ל</text>
      </g>
    </svg>
  ),
  Police: () => (
    <svg viewBox="0 0 120 60" fill="currentColor">
      <path d="M60 12 L74 22 L74 36 Q74 46 60 50 Q46 46 46 36 L46 22 Z" fill="none" stroke="currentColor" strokeWidth="1.4" />
      <text x="60" y="34" textAnchor="middle" fontSize="6" fontWeight="700">משטרת</text>
      <text x="60" y="42" textAnchor="middle" fontSize="6" fontWeight="700">ישראל</text>
    </svg>
  ),
  University: () => (
    <svg viewBox="0 0 120 60" fill="currentColor">
      <rect x="36" y="20" width="48" height="6" fill="currentColor" />
      <polygon points="60,12 84,20 36,20" fill="currentColor" />
      <rect x="42" y="28" width="3" height="14" fill="currentColor" />
      <rect x="52" y="28" width="3" height="14" fill="currentColor" />
      <rect x="62" y="28" width="3" height="14" fill="currentColor" />
      <rect x="72" y="28" width="3" height="14" fill="currentColor" />
      <rect x="36" y="44" width="48" height="3" fill="currentColor" />
    </svg>
  ),
  Govt: () => (
    <svg viewBox="0 0 120 60" fill="currentColor">
      <path d="M60 12 L70 22 L66 22 L66 38 L74 38 L74 46 L46 46 L46 38 L54 38 L54 22 L50 22 Z" fill="currentColor" />
    </svg>
  ),
  Health: () => (
    <svg viewBox="0 0 120 60" fill="currentColor">
      <circle cx="60" cy="30" r="16" fill="none" stroke="currentColor" strokeWidth="1.4" />
      <rect x="55" y="22" width="10" height="16" fill="currentColor" />
      <rect x="50" y="27" width="20" height="6" fill="currentColor" />
    </svg>
  ),
};

Object.assign(window, { BrandLogo, BrandMark, Prod, ClientLogos });
