// ============================================================
// Festival Icon Library
// Bright, flat, vibrant SVGs. One per festival "vibe".
// Each icon is a 64x64 viewBox component for crisp rendering.
// ============================================================
/* global React */

const I = {
  saffron:  '#FF9F1C',
  marigold: '#FFB627',
  vermilion:'#E63946',
  rose:     '#FF4D6D',
  magenta:  '#D81E5B',
  gold:     '#FFD60A',
  green:    '#06A77D',
  forest:   '#0F7B5A',
  teal:     '#0FA3B1',
  peacock:  '#0077B6',
  indigo:   '#3D2C8D',
  violet:   '#7B2CBF',
  cream:    '#FFF6E5',
  white:    '#FFFFFF',
  brown:    '#7C3F00',
  charcoal: '#1A1410',
  ink:      '#0E0A07',
};

const Icons = {};

Icons.Diya = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="22" r="20" fill={I.gold} opacity="0.18" />
    <circle cx="32" cy="22" r="12" fill={I.marigold} opacity="0.4" />
    <path d="M32 8 C36 16 36 22 32 28 C28 22 28 16 32 8 Z" fill={I.vermilion} />
    <path d="M32 14 C34 19 34 23 32 27 C30 23 30 19 32 14 Z" fill={I.gold} />
    <rect x="30" y="27" width="4" height="3" fill={I.brown} />
    <path d="M10 40 Q32 56 54 40 Q50 50 32 52 Q14 50 10 40 Z" fill={I.brown} />
    <path d="M10 40 Q32 36 54 40 Q32 44 10 40 Z" fill={I.saffron} />
  </svg>
);

Icons.Holi = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="20" cy="22" r="10" fill={I.rose} />
    <circle cx="42" cy="20" r="9" fill={I.gold} />
    <circle cx="32" cy="38" r="11" fill={I.teal} />
    <circle cx="48" cy="40" r="7" fill={I.violet} />
    <circle cx="14" cy="42" r="6" fill={I.green} />
    <circle cx="8" cy="16" r="2" fill={I.magenta} />
    <circle cx="56" cy="14" r="2" fill={I.saffron} />
    <circle cx="56" cy="54" r="2" fill={I.peacock} />
    <circle cx="8" cy="54" r="2" fill={I.gold} />
    <circle cx="28" cy="10" r="1.6" fill={I.violet} />
  </svg>
);

Icons.SunHarvest = () => (
  <svg viewBox="0 0 64 64">
    {Array.from({length:12}).map((_,i) => {
      const a = (i/12) * Math.PI*2;
      const x1 = 32 + Math.cos(a)*16, y1 = 28 + Math.sin(a)*16;
      const x2 = 32 + Math.cos(a)*24, y2 = 28 + Math.sin(a)*24;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={I.marigold} strokeWidth="3" strokeLinecap="round" />;
    })}
    <circle cx="32" cy="28" r="14" fill={I.saffron} />
    <circle cx="32" cy="28" r="9" fill={I.gold} />
    <path d="M14 54 Q32 48 50 54" stroke={I.brown} strokeWidth="2" fill="none" strokeLinecap="round" />
    <ellipse cx="22" cy="52" rx="2" ry="3" fill={I.marigold} />
    <ellipse cx="32" cy="50" rx="2" ry="3" fill={I.marigold} />
    <ellipse cx="42" cy="52" rx="2" ry="3" fill={I.marigold} />
  </svg>
);

Icons.Crescent = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.indigo} />
    <path d="M28 14 A18 18 0 1 0 28 50 A14 14 0 1 1 28 14 Z" fill={I.gold} />
    <circle cx="46" cy="20" r="1.6" fill={I.cream} />
    <circle cx="50" cy="32" r="1.4" fill={I.cream} />
    <circle cx="46" cy="44" r="1.6" fill={I.cream} />
  </svg>
);

Icons.StarChristmas = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.forest} />
    <path d="M32 12 L36 26 L50 28 L40 36 L44 50 L32 42 L20 50 L24 36 L14 28 L28 26 Z" fill={I.gold} stroke={I.vermilion} strokeWidth="1.5" />
    <circle cx="32" cy="32" r="3" fill={I.vermilion} />
  </svg>
);

Icons.Pookalam = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="24" fill={I.marigold} />
    <circle cx="32" cy="32" r="19" fill={I.vermilion} />
    <circle cx="32" cy="32" r="14" fill={I.gold} />
    <circle cx="32" cy="32" r="9" fill={I.rose} />
    <circle cx="32" cy="32" r="4" fill={I.cream} />
    {[0,1,2,3,4,5,6,7].map(i => {
      const a = (i/8) * Math.PI*2;
      const x = 32 + Math.cos(a)*28, y = 32 + Math.sin(a)*28;
      return <circle key={i} cx={x} cy={y} r="3" fill={I.green} />;
    })}
  </svg>
);

Icons.Trident = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.vermilion} opacity="0.9" />
    <rect x="30" y="22" width="4" height="32" fill={I.gold} />
    <path d="M18 22 L18 14 L22 18 L22 22 Z" fill={I.gold} />
    <path d="M42 22 L42 14 L46 18 L46 22 Z" fill={I.gold} />
    <path d="M30 22 L26 10 L30 14 L34 14 L38 10 L34 22 Z" fill={I.gold} />
    <rect x="26" y="22" width="12" height="3" fill={I.gold} />
    <circle cx="32" cy="52" r="3" fill={I.marigold} />
  </svg>
);

Icons.Om = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.saffron} />
    <text x="32" y="44" textAnchor="middle" fontFamily="Tiro Devanagari Hindi, serif" fontSize="32" fill={I.vermilion} fontWeight="400">ॐ</text>
  </svg>
);

Icons.Rakhi = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="14" fill={I.vermilion} />
    <circle cx="32" cy="32" r="9" fill={I.gold} />
    <circle cx="32" cy="32" r="4" fill={I.vermilion} />
    <path d="M18 32 Q12 32 8 36" stroke={I.vermilion} strokeWidth="3" fill="none" strokeLinecap="round" />
    <path d="M18 32 Q12 32 8 30" stroke={I.gold} strokeWidth="3" fill="none" strokeLinecap="round" />
    <path d="M46 32 Q52 32 56 36" stroke={I.vermilion} strokeWidth="3" fill="none" strokeLinecap="round" />
    <path d="M46 32 Q52 32 56 30" stroke={I.gold} strokeWidth="3" fill="none" strokeLinecap="round" />
    {[0,1,2,3,4,5,6,7].map(i => {
      const a = (i/8)*Math.PI*2;
      const x = 32 + Math.cos(a)*14, y = 32 + Math.sin(a)*14;
      return <circle key={i} cx={x} cy={y} r="1.8" fill={I.gold} />;
    })}
  </svg>
);

Icons.Flute = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.peacock} />
    <rect x="14" y="32" width="36" height="5" rx="2" fill={I.gold} transform="rotate(-20 32 34)" />
    {[20,28,36,42].map((x,i) => (
      <circle key={i} cx={x} cy={32 - (x-20)*0.36} r="1.4" fill={I.brown} transform="rotate(-20 32 34)" />
    ))}
    <ellipse cx="46" cy="20" rx="6" ry="9" fill={I.teal} transform="rotate(25 46 20)" />
    <ellipse cx="46" cy="20" rx="3" ry="5" fill={I.gold} transform="rotate(25 46 20)" />
    <ellipse cx="46" cy="20" rx="1.5" ry="2.5" fill={I.indigo} transform="rotate(25 46 20)" />
  </svg>
);

Icons.Flag = () => (
  <svg viewBox="0 0 64 64">
    <rect x="10" y="14" width="44" height="12" fill="#FF9933" />
    <rect x="10" y="26" width="44" height="12" fill="#FFFFFF" />
    <rect x="10" y="38" width="44" height="12" fill="#138808" />
    <circle cx="32" cy="32" r="5" fill="none" stroke="#000080" strokeWidth="1.2" />
    {Array.from({length:12}).map((_,i) => {
      const a = (i/12) * Math.PI*2;
      const x1 = 32 + Math.cos(a)*1.5, y1 = 32 + Math.sin(a)*1.5;
      const x2 = 32 + Math.cos(a)*4.5, y2 = 32 + Math.sin(a)*4.5;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#000080" strokeWidth="0.8" />;
    })}
    <rect x="8" y="10" width="2" height="44" fill={I.brown} />
  </svg>
);

Icons.GudiPot = () => (
  <svg viewBox="0 0 64 64">
    <rect x="30" y="6" width="4" height="36" fill={I.brown} />
    <path d="M22 16 Q22 8 32 8 Q42 8 42 16 L40 22 L24 22 Z" fill={I.gold} />
    <path d="M22 14 Q32 22 42 14 L44 28 Q32 36 20 28 Z" fill={I.vermilion} />
    <path d="M22 18 Q32 24 42 18" stroke={I.gold} strokeWidth="1.5" fill="none" />
    <ellipse cx="22" cy="42" rx="4" ry="9" fill={I.green} transform="rotate(-30 22 42)" />
    <ellipse cx="32" cy="44" rx="4" ry="9" fill={I.forest} />
    <ellipse cx="42" cy="42" rx="4" ry="9" fill={I.green} transform="rotate(30 42 42)" />
    <circle cx="32" cy="36" r="6" fill={I.brown} />
  </svg>
);

Icons.Drum = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.forest} />
    <ellipse cx="32" cy="32" rx="18" ry="10" fill={I.brown} />
    <ellipse cx="14" cy="32" rx="3" ry="10" fill={I.cream} />
    <ellipse cx="50" cy="32" rx="3" ry="10" fill={I.cream} />
    {[18,24,30,36,42].map((x,i) => (
      <line key={i} x1={x} y1={22} x2={x} y2={42} stroke={I.gold} strokeWidth="1.2" />
    ))}
    <line x1="8" y1="14" x2="20" y2="26" stroke={I.brown} strokeWidth="2.5" strokeLinecap="round" />
  </svg>
);

Icons.Feather = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.vermilion} />
    <path d="M22 50 Q24 30 32 14 Q40 30 42 50 Q32 46 22 50 Z" fill={I.gold} />
    <path d="M32 14 L32 50" stroke={I.brown} strokeWidth="1.5" />
    {[18,24,30,36,42].map((y,i) => (
      <React.Fragment key={i}>
        <line x1="32" y1={y} x2={32 - (50-y)*0.35} y2={y + 3} stroke={I.forest} strokeWidth="1.2" />
        <line x1="32" y1={y} x2={32 + (50-y)*0.35} y2={y + 3} stroke={I.forest} strokeWidth="1.2" />
      </React.Fragment>
    ))}
    <circle cx="20" cy="52" r="2" fill={I.peacock} />
    <circle cx="44" cy="52" r="2" fill={I.green} />
  </svg>
);

Icons.Moon = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.indigo} />
    <circle cx="32" cy="32" r="14" fill={I.cream} />
    <circle cx="28" cy="28" r="2.5" fill={I.cream} opacity="0.5" stroke={I.indigo} strokeWidth="0.4" />
    <circle cx="36" cy="34" r="2" fill={I.cream} opacity="0.5" stroke={I.indigo} strokeWidth="0.4" />
    <circle cx="30" cy="38" r="1.5" fill={I.cream} opacity="0.5" stroke={I.indigo} strokeWidth="0.4" />
    <g stroke={I.gold} strokeWidth="0.6" opacity="0.7">
      {[20,24,28,32,36,40,44].map(x => <line key={x} x1={x} y1="18" x2={x} y2="46" />)}
      {[20,24,28,32,36,40,44].map(y => <line key={y} x1="18" y1={y} x2="46" y2={y} />)}
    </g>
  </svg>
);

Icons.River = () => (
  <svg viewBox="0 0 64 64">
    <rect x="6" y="14" width="52" height="42" fill={I.peacock} rx="3" />
    <path d="M6 24 Q16 20 26 24 T46 24 T58 24" stroke={I.cream} strokeWidth="1.6" fill="none" opacity="0.7" />
    <path d="M6 32 Q16 28 26 32 T46 32 T58 32" stroke={I.cream} strokeWidth="1.6" fill="none" opacity="0.5" />
    <path d="M6 40 Q16 36 26 40 T46 40 T58 40" stroke={I.cream} strokeWidth="1.6" fill="none" opacity="0.4" />
    <ellipse cx="32" cy="22" rx="6" ry="2" fill={I.brown} />
    <path d="M32 12 C34 16 34 19 32 22 C30 19 30 16 32 12 Z" fill={I.gold} />
    <circle cx="32" cy="14" r="6" fill={I.gold} opacity="0.3" />
  </svg>
);

Icons.Chariot = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.saffron} />
    <path d="M16 38 L16 26 Q32 8 48 26 L48 38 Z" fill={I.vermilion} />
    <path d="M30 8 L34 8 L32 18 Z" fill={I.gold} />
    <rect x="16" y="36" width="32" height="6" fill={I.gold} />
    <circle cx="22" cy="48" r="6" fill={I.brown} stroke={I.gold} strokeWidth="1.5" />
    <circle cx="42" cy="48" r="6" fill={I.brown} stroke={I.gold} strokeWidth="1.5" />
    {[0,1,2,3,4,5].map(i => {
      const a = (i/6) * Math.PI*2;
      return <line key={i} x1={22} y1={48} x2={22+Math.cos(a)*5} y2={48+Math.sin(a)*5} stroke={I.gold} strokeWidth="0.8" />;
    })}
    {[0,1,2,3,4,5].map(i => {
      const a = (i/6) * Math.PI*2;
      return <line key={i+'b'} x1={42} y1={48} x2={42+Math.cos(a)*5} y2={48+Math.sin(a)*5} stroke={I.gold} strokeWidth="0.8" />;
    })}
  </svg>
);

Icons.Trishul = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.indigo} />
    <rect x="30.5" y="14" width="3" height="34" fill={I.gold} />
    <path d="M22 18 L24 8 L28 14 Z" fill={I.gold} />
    <path d="M42 18 L40 8 L36 14 Z" fill={I.gold} />
    <path d="M28 14 L32 4 L36 14 Z" fill={I.gold} />
    <rect x="22" y="18" width="20" height="3" fill={I.gold} />
    <path d="M28 32 L36 32 L34 36 L30 36 Z" fill={I.cream} />
    <path d="M28 40 L36 40 L34 36 L30 36 Z" fill={I.cream} />
  </svg>
);

Icons.Bodhi = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.marigold} />
    <path d="M32 12 C20 20 20 36 32 50 C44 36 44 20 32 12 Z" fill={I.forest} />
    <path d="M32 12 L32 50" stroke={I.gold} strokeWidth="1" />
    {[16,22,28,34,40,46].map(y => (
      <line key={y} x1="32" y1={y} x2={32 + Math.sin((50-y)/40)*10} y2={y + 2} stroke={I.gold} strokeWidth="0.6" />
    ))}
    {[16,22,28,34,40,46].map(y => (
      <line key={y+'b'} x1="32" y1={y} x2={32 - Math.sin((50-y)/40)*10} y2={y + 2} stroke={I.gold} strokeWidth="0.6" />
    ))}
    <circle cx="32" cy="52" r="2" fill={I.brown} />
  </svg>
);

Icons.Khanda = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.indigo} />
    <circle cx="32" cy="32" r="14" fill="none" stroke={I.gold} strokeWidth="2.5" />
    <path d="M20 14 L22 50 L18 50 Z" fill={I.gold} />
    <path d="M44 14 L42 50 L46 50 Z" fill={I.gold} />
    <rect x="30" y="14" width="4" height="36" fill={I.gold} />
    <path d="M28 14 L32 6 L36 14 Z" fill={I.gold} />
  </svg>
);

Icons.Star = () => (
  <svg viewBox="0 0 64 64">
    <circle cx="32" cy="32" r="22" fill={I.magenta} />
    <path d="M32 12 L37 27 L52 27 L40 36 L44 51 L32 42 L20 51 L24 36 L12 27 L27 27 Z" fill={I.gold} />
  </svg>
);

const FESTIVAL_RULES = [
  { kw: /republic day|independence day|gandhi jayanti/i, icon: 'Flag', tint: '#FF9933' },
  { kw: /diwali|deepavali|tihar|deepotsav|kartik purnima|dev deepavali/i, icon: 'Diya', tint: '#FFB627' },
  { kw: /holi|rangapanchami|dol jatra|dol purnima/i, icon: 'Holi', tint: '#FF4D6D' },
  { kw: /pongal|sankranti|lohri|magh bihu|bhogali|makar/i, icon: 'SunHarvest', tint: '#FF9F1C' },
  { kw: /eid|ramadan|ramazan|muharram|milad|shab|barat|jumu/i, icon: 'Crescent', tint: '#FFD60A' },
  { kw: /christmas|easter|epiphany/i, icon: 'StarChristmas', tint: '#FFD60A' },
  { kw: /navroz|nowruz|parsi new year|jamshedi/i, icon: 'SunHarvest', tint: '#0FA3B1' },
  { kw: /onam|vishu|thiruvonam|atham/i, icon: 'Pookalam', tint: '#E63946' },
  { kw: /navratri|durga puja|dussehra|vijayadashami|kullu|mysuru/i, icon: 'Trident', tint: '#E63946' },
  { kw: /ganesh chaturthi|vinayaka|ganesh visarjan/i, icon: 'Om', tint: '#FF9F1C' },
  { kw: /raksha bandhan|rakhi|narali/i, icon: 'Rakhi', tint: '#FFD60A' },
  { kw: /janmashtami|gokulashtami|krishna|dahi handi/i, icon: 'Flute', tint: '#0077B6' },
  { kw: /ugadi|gudi padwa|puthandu|baisakhi|vaisakhi|chaitra/i, icon: 'GudiPot', tint: '#FF9F1C' },
  { kw: /bihu|rongali|kongali/i, icon: 'Drum', tint: '#06A77D' },
  { kw: /hornbill|wangala|sekrenyi|nongkrem|ali|aoling|losar|kharchi|behdienkhlam|chapchar|moatsu|tulsi vivah/i, icon: 'Feather', tint: '#E63946' },
  { kw: /karva chauth|sharad purnima|kojagari|teej|purnima/i, icon: 'Moon', tint: '#3D2C8D' },
  { kw: /kumbh|magh mela|chhath|kartik snan|ganga|godavari/i, icon: 'River', tint: '#0077B6' },
  { kw: /rath yatra|jagannath|puri/i, icon: 'Chariot', tint: '#FF9F1C' },
  { kw: /shivratri|mahashivratri|shivaratri|lingaraj/i, icon: 'Trishul', tint: '#3D2C8D' },
  { kw: /buddha|wesak|vesak|bodhi|tihar|losar/i, icon: 'Bodhi', tint: '#FFB627' },
  { kw: /guru|gurpurab|guru nanak|baisakhi|hola mohalla|khalsa/i, icon: 'Khanda', tint: '#FFD60A' },
  { kw: /harvest|crop|agricultur/i, icon: 'SunHarvest', tint: '#FF9F1C' },
];

function pickIcon(festival) {
  const name = festival.name || '';
  for (const rule of FESTIVAL_RULES) {
    if (rule.kw.test(name)) return rule;
  }
  const t = (festival.type || '').toLowerCase();
  if (t.includes('harvest') || t.includes('agricultur')) return { icon: 'SunHarvest', tint: '#FF9F1C' };
  if (t.includes('tribal')) return { icon: 'Feather', tint: '#E63946' };
  if (t.includes('religious')) return { icon: 'Om', tint: '#FF9F1C' };
  if (t.includes('cultural')) return { icon: 'Star', tint: '#D81E5B' };
  return { icon: 'Star', tint: '#D81E5B' };
}

function FestivalIcon({ festival, size = 28, style }) {
  const rule = pickIcon(festival);
  const Component = Icons[rule.icon] || Icons.Star;
  return (
    <span style={{
      display: 'inline-block',
      width: size,
      height: size,
      filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.5))',
      ...style,
    }}>
      <Component />
    </span>
  );
}

window.LOF_Icons = { Icons, FestivalIcon, pickIcon, FESTIVAL_RULES };