// oferta-menu.jsx — współdzielone rozwijane mega-menu „Oferta" (desktop / Wariant 2).
// Eksportuje window.OfertaMenu. Samodzielne: własne style inline, ikony i dane kategorii.
// Wstaw <OfertaMenu active={true|false} /> w <nav> dowolnej podstrony.
// Na razie wszystkie pozycje prowadzą do oferta.html — repointujemy po powstaniu osobnych podstron.

const OM_BRAND = '#1a2c6b';
const OM_INK   = '#15181f';
const OM_MUTED = '#6b6e78';
const OM_LINE  = '#e8e4db';
const OM_ACCENT = '#c98a3f';
const OM_BG    = '#faf8f3';

const OM_KATEGORIE = [
  { tytul: 'Komunikacyjne', podtytul: 'OC, AC, Assistance, Zielona Karta', ikona: 'auto', href: 'oferta-komunikacyjne.html' },
  { tytul: 'Majątkowe', podtytul: 'Dom, mieszkanie, mienie ruchome', ikona: 'dom', href: 'oferta-majatkowe.html' },
  { tytul: 'Dla biznesu', podtytul: 'OC zawodowe, majątek firmy', ikona: 'biznes', href: 'oferta-dla-biznesu.html' },
  { tytul: 'Na życie', podtytul: 'Polisy życiowe i kapitałowe', ikona: 'zycie', href: 'oferta-na-zycie.html' },
  { tytul: 'Zdrowotne', podtytul: 'Pakiety medyczne, prywatne zdrowotne', ikona: 'zdrowie', href: 'oferta-zdrowotne.html' },
  { tytul: 'NNW', podtytul: 'Następstwa nieszczęśliwych wypadków', ikona: 'osobowe', href: 'oferta-nnw.html' },
  { tytul: 'Emerytalne', podtytul: 'IKE, IKZE, PPK', ikona: 'emeryt', href: 'oferta-emerytalne.html' },
  { tytul: 'Grupowe', podtytul: 'Pakiety dla zespołów i pracowników', ikona: 'grupa', href: 'oferta-grupowe.html' },
  { tytul: 'Turystyczne', podtytul: 'Wyjazdy krajowe i zagraniczne', ikona: 'podroz', href: 'oferta-turystyczne.html' },
  { tytul: 'Korporacyjne', podtytul: 'Programy dla dużych podmiotów', ikona: 'korpo', href: 'oferta.html' },
];

function OMIkona({ kind }) {
  const sw = 1.6, c = OM_BRAND;
  const map = {
    auto: <><path d="M5 17h14M5 17v-4l2-5h10l2 5v4M5 17v2M19 17v2M8 12h8" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" /><circle cx="8" cy="17" r="1.5" fill={c} /><circle cx="16" cy="17" r="1.5" fill={c} /></>,
    dom: <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-9z" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />,
    biznes: <><rect x="3" y="7" width="18" height="13" rx="1.5" stroke={c} strokeWidth={sw} /><path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 13h18" stroke={c} strokeWidth={sw} strokeLinecap="round" /></>,
    zycie: <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" stroke={c} strokeWidth={sw} strokeLinejoin="round" />,
    zdrowie: <><path d="M12 5v14M5 12h14" stroke={c} strokeWidth={sw + 0.4} strokeLinecap="round" /><circle cx="12" cy="12" r="9" stroke={c} strokeWidth={sw} /></>,
    osobowe: <><circle cx="12" cy="8" r="3.5" stroke={c} strokeWidth={sw} /><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" stroke={c} strokeWidth={sw} strokeLinecap="round" /></>,
    emeryt: <><circle cx="12" cy="12" r="9" stroke={c} strokeWidth={sw} /><path d="M8 12l3 3 5-6" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" /></>,
    grupa: <><circle cx="8" cy="9" r="3" stroke={c} strokeWidth={sw} /><circle cx="16" cy="9" r="3" stroke={c} strokeWidth={sw} /><path d="M2 19c0-3 2.5-5 6-5s6 2 6 5M14 19c0-3 2.5-5 6-5s6 2 6 5" stroke={c} strokeWidth={sw} strokeLinecap="round" /></>,
    podroz: <><circle cx="12" cy="12" r="9" stroke={c} strokeWidth={sw} /><path d="M3 12h18M12 3c3 3 4.5 6.5 4.5 9s-1.5 6-4.5 9c-3-3-4.5-6-4.5-9S9 6 12 3z" stroke={c} strokeWidth={sw} strokeLinejoin="round" /></>,
    korpo: <><rect x="4" y="9" width="16" height="12" stroke={c} strokeWidth={sw} /><rect x="8" y="4" width="8" height="5" stroke={c} strokeWidth={sw} /><path d="M8 13h2M14 13h2M8 17h2M14 17h2" stroke={c} strokeWidth={sw} strokeLinecap="round" /></>,
  };
  return <svg viewBox="0 0 24 24" style={{ width: 36, height: 36 }} fill="none">{map[kind] || map.auto}</svg>;
}

function OfertaMenu({ active = false }) {
  const [open, setOpen] = React.useState(false);
  const closeTimer = React.useRef(null);
  const show = () => { clearTimeout(closeTimer.current); setOpen(true); };
  const hide = () => { closeTimer.current = setTimeout(() => setOpen(false), 120); };
  return (
    <div style={{ position: 'relative' }} onMouseEnter={show} onMouseLeave={hide}>
      <a href="/oferta" style={{ color: (open || active) ? OM_BRAND : OM_INK, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, position: 'relative' }}>
        Oferta
        <svg width="9" height="9" viewBox="0 0 10 10" fill="none" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s', marginTop: 1 }}>
          <path d="M1.5 3.5L5 7l3.5-3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        {active && <span style={{ position: 'absolute', left: 0, right: 14, bottom: -8, height: 2, background: OM_BRAND }}></span>}
      </a>
      <div style={{
        position: 'absolute', top: 'calc(100% + 18px)', left: '50%', transform: open ? 'translateX(-50%) translateY(0)' : 'translateX(-50%) translateY(-6px)',
        width: 620, background: '#fff', border: `1px solid ${OM_LINE}`, borderRadius: 14, boxShadow: '0 24px 60px -20px rgba(15,29,74,.28), 0 4px 12px rgba(15,29,74,.06)',
        padding: 14, opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none', transition: 'opacity .18s ease, transform .18s ease', zIndex: 80,
      }}>
        <div style={{ position: 'absolute', top: -7, left: '50%', marginLeft: -7, width: 13, height: 13, background: '#fff', borderLeft: `1px solid ${OM_LINE}`, borderTop: `1px solid ${OM_LINE}`, transform: 'rotate(45deg)' }}></div>
        <div style={{ padding: '6px 10px 12px', borderBottom: `1px solid ${OM_LINE}`, marginBottom: 8 }}>
          <span style={{ fontSize: 11, color: OM_ACCENT, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600 }}>§ Nasze ubezpieczenia</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 2 }}>
          {OM_KATEGORIE.map((k, i) => (
            <a key={i} href={k.href} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 10px', borderRadius: 9, textDecoration: 'none', color: OM_INK, transition: 'background .15s', minWidth: 0 }}
               onMouseEnter={(e) => e.currentTarget.style.background = OM_BG}
               onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <span style={{ flex: '0 0 auto', width: 34, height: 34, borderRadius: 8, border: `1px solid ${OM_LINE}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ display: 'flex', transform: 'scale(.72)' }}><OMIkona kind={k.ikona} /></span>
              </span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: 'block', fontWeight: 600, fontSize: 13.5, color: OM_INK }}>{k.tytul}</span>
                <span style={{ display: 'block', fontSize: 11.5, color: OM_MUTED, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{k.podtytul}</span>
              </span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

window.OfertaMenu = OfertaMenu;
window.OfIkona = OMIkona;