// variant-2.jsx — Wariant 2: Editorial / luźny / białe tła, granat jako akcent
// Eksportuje window.Variant2

const V2_BRAND = '#1a2c6b';
const V2_BRAND_DEEP = '#0f1d4a';
const V2_BG = '#faf8f3'; // ciepłe kremowe tło
const V2_INK = '#15181f';
const V2_MUTED = '#6b6e78';
const V2_LINE = '#e8e4db';
const V2_ACCENT = '#c98a3f';

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

// Placówki — dane z oryginału witwicka.pl/kontakt/. Podgórze tymczasowo zamknięte.
const V2_PLACOWKI = [
  { dz: 'Kurdwanów',     adres: 'ul. Bojki 2',         godz: 'pn–pt 9.00–19.00, sb 9.00–14.00', tel: '(12) 659-92-93', tel2: '513 120 883', mail: 'bojki@witwicka.pl' },
  { dz: 'Prądnik Biały', adres: 'ul. Mackiewicza 18',  godz: 'pn–pt 9.00–19.00, sb 9.00–14.00', tel: '513 120 882',     mail: 'mackiewicza@witwicka.pl' },
  { dz: 'Ruczaj',        adres: 'ul. Kobierzyńska 93', godz: 'pn–pt 9.00–19.00, sb 9.00–14.00', tel: '(12) 266-40-98', tel2: '513 120 881', mail: 'kobierzynska@witwicka.pl' },
  { dz: 'Podgórze',      adres: 'ul. Wielicka 28a',    godz: 'tymczasowo zamknięte',            tel: '502 980 070',     mail: 'wielicka@witwicka.pl', closed: true },
  { dz: 'Czyżyny',       adres: 'ul. Sołtysowska 12B', godz: 'pn–pt 9.00–19.00, sb 9.00–14.00', tel: '(12) 292-41-59', tel2: '513 120 880', mail: 'soltysowska@witwicka.pl' },
  { dz: 'Mogilska',      adres: 'ul. Mogilska 120B',   godz: 'pn–pt 9.00–17.00, sb nieczynne',  tel: '504 405 080',     mail: 'mogilska@witwicka.pl' },
];

// Mega-menu „Oferta" — rozwija się po najechaniu, prowadzi do podstron z poszczególnymi ubezpieczeniami.
// Na razie wszystkie pozycje prowadzą do oferta.html — repointujemy, gdy powstaną osobne podstrony.
function V2OfertaMenu({ font }) {
  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}>
      <span style={{ color: open ? V2_BRAND : V2_INK, display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', userSelect: 'none' }}>
        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>
      </span>
      <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 ${V2_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: 50,
      }}>
        <div style={{ position: 'absolute', top: -7, left: '50%', marginLeft: -7, width: 13, height: 13, background: '#fff', borderLeft: `1px solid ${V2_LINE}`, borderTop: `1px solid ${V2_LINE}`, transform: 'rotate(45deg)' }}></div>
        <div style={{ padding: '6px 10px 12px', borderBottom: `1px solid ${V2_LINE}`, marginBottom: 8 }}>
          <span style={{ fontSize: 11, color: V2_ACCENT, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600 }}>§ Nasze ubezpieczenia</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 2 }}>
          {V2_KATEGORIE.map((k) => (
            <a key={k.num} href={k.href} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 10px', borderRadius: 9, textDecoration: 'none', color: V2_INK, transition: 'background .15s', minWidth: 0 }}
               onMouseEnter={(e) => e.currentTarget.style.background = V2_BG}
               onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <span style={{ flex: '0 0 auto', width: 34, height: 34, borderRadius: 8, border: `1px solid ${V2_LINE}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ display: 'flex', transform: 'scale(.72)' }}><V2Ikona kind={k.ikona} /></span>
              </span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: 'block', fontWeight: 600, fontSize: 13.5, color: V2_INK }}>{k.tytul}</span>
                <span style={{ display: 'block', fontSize: 11.5, color: V2_MUTED, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{k.podtytul}</span>
              </span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

function V2Header({ font }) {
  return (
    <header style={{ background: V2_BG, position: 'relative', zIndex: 50, borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '24px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href="/"><img src="assets/logo-gomar.png" alt="GOMAR Witwicka — Ubezpieczenia" style={{ height: 68, width: 'auto', display: 'block' }} /></a>
        </div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 36, fontSize: 13, fontWeight: 500, color: V2_INK }}>
          <a href="/" style={{ color: V2_BRAND, textDecoration: 'none' }}>Strona główna</a>
          <V2OfertaMenu font={font} />
          {[['Współpraca','/wspolpraca/'],['Pełnomocnictwa','/pelnomocnictwa/'],['Przydatne','/przydatne/'],['Kontakt','/kontakt/']].map(([it, href], i) => (
            <a key={i} href={href} style={{ color: V2_INK, textDecoration: 'none' }}>{it}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 10, color: V2_MUTED, letterSpacing: '.1em', textTransform: 'uppercase' }}>Linia bezpośrednia</div>
            <a href="tel:+48501434440" style={{ fontFamily: font.display, fontSize: 16, fontWeight: 700, color: V2_INK, textDecoration: 'none' }}>501 43 44 40</a>
          </div>
          <a href="tel:+48501434440" style={{ width: 42, height: 42, background: V2_BRAND, color: '#fff', borderRadius: 99, display: 'flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }}>📞</a>
        </div>
      </div>
    </header>
  );
}

function V2Hero({ font }) {
  return (
    <section style={{ background: V2_BG, position: 'relative', overflow: 'hidden', borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '80px 40px 100px', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <h1 style={{ fontFamily: font.display, fontWeight: 400, fontSize: 96, lineHeight: .98, letterSpacing: '-.035em', color: V2_INK, margin: 0 }}>
              Bezpieczeństwo<br />
              Twojej rodziny i firmy<br />
              w <em style={{ fontStyle: 'italic', fontWeight: 400, color: V2_BRAND }}>dobrych rękach</em>.
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: V2_MUTED, maxWidth: 540, margin: '40px 0 0' }}>
              GOMAR Małgorzata Witwicka — rodzinna multiagencja z Krakowa. Ponad 25 agentów na pełen etat w 6 placówkach na terenie miasta. Doradzamy, ubezpieczamy i pomagamy w razie szkody.
            </p>
          </div>

          <div style={{ position: 'relative', alignSelf: 'stretch' }}>
            <div style={{ position: 'relative' }}>
              <img src="assets/social-blob-2.webp" alt="Klienci GOMAR — rodzina i firma" style={{ width: '100%', height: 'auto', display: 'block' }} />
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

// Pasek statystyk — pełnoszeroka biała sekcja, łączy się z V2Marquee
function V2Stats({ font }) {
  return (
    <section style={{ background: '#fff' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '64px 40px 56px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {[
          { n: '1992', l: 'rok założenia firmy' },
          { n: '1998', l: 'od kiedy w branży ubezpieczeniowej' },
          { n: '25+', l: 'agentów na pełen etat' },
          { n: '6', l: 'placówek w Krakowie' },
        ].map((s, i) => (
          <div key={i} style={{ borderLeft: i > 0 ? `1px solid ${V2_LINE}` : 'none', paddingLeft: i > 0 ? 32 : 0 }}>
            <div style={{ fontFamily: font.display, fontSize: 56, fontWeight: 400, color: V2_INK, lineHeight: 1, letterSpacing: '-.02em' }}>{s.n}<span style={{ color: V2_ACCENT }}>.</span></div>
            <div style={{ fontSize: 13, color: V2_MUTED, marginTop: 10, letterSpacing: '.04em' }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Lista logotypów towarzystw (pliki w assets/logos/). [plik, alt]
const V2_LOGOS = [
  ['PZU', 'PZU'], ['Warta', 'Warta'], ['Allianz', 'Allianz'], ['Ergo-Hestia', 'Ergo Hestia'], ['Compensa', 'Compensa'],
  ['Generali', 'Generali'], ['Uniqa', 'Uniqa'], ['InterRisk', 'InterRisk'], ['Inter-Polska', 'Inter Polska'], ['Link4', 'Link4'],
  ['Nationale-Nederlanden', 'Nationale-Nederlanden'], ['Saltus', 'Saltus'], ['TUZ', 'TUZ'], ['Unum', 'Unum'], ['Proama', 'Proama'],
  ['HDI', 'HDI'], ['MTU', 'MTU'], ['Europa', 'Europa Ubezpieczenia'], ['Colonnade', 'Colonnade'], ['Macif', 'Macif'],
  ['Reso', 'Reso'], ['Leadenhall', 'Leadenhall'], ['Gefion', 'Gefion'], ['Bacca', 'Bacca'], ['Polisa-Zycie', 'Polisa-Życie'], ['Viener', 'Wiener']
];

// Marquee z logotypami towarzystw — płynne, wolne przesuwanie w pętli (pauza na hover).
function V2Marquee({ font }) {
  const row = [...V2_LOGOS, ...V2_LOGOS];
  const dur = V2_LOGOS.length * 2.4; // s — wolne, dostojne tempo
  return (
    <div style={{ background: '#fff', borderTop: `1px solid ${V2_LINE}`, borderBottom: `1px solid ${V2_LINE}`, overflow: 'hidden', position: 'relative' }}>
      <style>{`@keyframes v2marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}.v2marq-track{animation:v2marq ${dur}s linear infinite}.v2marq-wrap:hover .v2marq-track{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.v2marq-track{animation:none}}`}</style>
      <div style={{ borderBottom: `1px solid ${V2_LINE}` }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '14px 40px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: V2_MUTED, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600 }}>
          <span>§ Współpracujemy z największymi towarzystwami ubezpieczeniowymi</span>
          <div style={{ flex: 1, height: 1, background: V2_LINE }}></div>
        </div>
      </div>
      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 140, background: 'linear-gradient(to right, #fff 40%, transparent 100%)', zIndex: 2, pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 140, background: 'linear-gradient(to left, #fff 40%, transparent 100%)', zIndex: 2, pointerEvents: 'none' }} />
        <div className="v2marq-wrap" style={{ overflow: 'hidden' }}>
          <div className="v2marq-track" style={{ display: 'flex', width: 'max-content', alignItems: 'center' }}>
            {row.map(([file, alt], i) => (
              <div key={i} style={{ flex: '0 0 auto', padding: '22px 26px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <img src={`assets/logos/${file}.png`} alt={alt} style={{ height: 192, width: 'auto', objectFit: 'contain', display: 'block' }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function V2Ikona({ kind }) {
  const sw = 1.6;
  const c = V2_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 V2Kategorie({ font }) {
  return (
    <section style={{ background: V2_BG, padding: '120px 0', borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 40 }}>
          <div>
            <div style={{ color: V2_ACCENT, fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>§ Oferta</div>
            <h2 style={{ fontFamily: font.display, fontSize: 48, fontWeight: 600, letterSpacing: '-.015em', color: V2_INK, margin: 0, lineHeight: 1.05 }}>
              Wszystkie ubezpieczenia,<br />jakich potrzebujesz — <em style={{ fontStyle: 'italic', color: V2_BRAND, fontWeight: 500 }}>w jednym miejscu</em>.
            </h2>
          </div>
          <p style={{ fontSize: 15, color: V2_MUTED, maxWidth: 360, lineHeight: 1.55 }}>
            Pracujemy z 18 towarzystwami — porównujemy oferty i wybieramy najkorzystniejszą dla Ciebie. Bez zobowiązań.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {V2_KATEGORIE.map((k, i) => (
            <a key={k.num} href={k.href} style={{ background: '#fff', borderRadius: 12, padding: '24px 20px', textDecoration: 'none', color: V2_INK, border: `1px solid ${V2_LINE}`, transition: 'all .2s', display: 'flex', flexDirection: 'column', gap: 12, minHeight: 160, position: 'relative' }}>
              <V2Ikona kind={k.ikona} />
              <div style={{ marginTop: 'auto' }}>
                <div style={{ fontWeight: 600, fontSize: 15.5, color: V2_INK }}>{k.tytul}</div>
                <div style={{ fontSize: 12.5, color: V2_MUTED, marginTop: 4, lineHeight: 1.35 }}>{k.podtytul}</div>
              </div>
              <span style={{ position: 'absolute', top: 20, right: 20, color: V2_BRAND, opacity: .35, fontSize: 14 }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function V2ONas({ font }) {
  return (
    <section style={{ background: '#fff', padding: '140px 0', borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 100, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 40 }}>
          <div style={{ fontSize: 11, color: V2_MUTED, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 24 }}>§ O nas — 1992 → dziś</div>
          <h2 style={{ fontFamily: font.display, fontSize: 56, fontWeight: 400, letterSpacing: '-.025em', color: V2_INK, margin: 0, lineHeight: 1.05 }}>
            Małgorzata, Marek i <em style={{ fontStyle: 'italic', color: V2_BRAND }}>34 lata</em> słuchania klientów.
          </h2>
          <div style={{ marginTop: 40, position: 'relative' }}>
            <img src="assets/wlasciciele-blob.webp" alt="Małgorzata i Marek Witwiccy" style={{ width: '100%', height: 'auto', display: 'block' }} />
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: `1px solid ${V2_LINE}` }}>
              <div style={{ fontSize: 11, color: V2_MUTED, letterSpacing: '.1em', textTransform: 'uppercase' }}>Założyciele</div>
              <div style={{ fontFamily: font.display, fontSize: 18, fontWeight: 500, color: V2_INK, marginTop: 4 }}>Małgorzata i Marek Witwiccy</div>
            </div>
          </div>
        </div>

        <div>
          <div style={{ fontSize: 18, lineHeight: 1.7, color: V2_INK, fontFamily: font.display, fontWeight: 400 }}>
            <p style={{ margin: '0 0 32px', fontSize: 26, lineHeight: 1.3, fontStyle: 'italic', color: V2_INK, fontWeight: 400 }}>
              Jesteśmy firmą rodzinną — etyka i profesjonalizm są wyznacznikiem naszej pracy. Ponad 30 lat doświadczenia i ponad 25 profesjonalistów zatrudnionych na pełen etat.
            </p>
          </div>

          {/* Timeline — tylko fakty potwierdzone w oryginałowym serwisie i aktualnościach */}
          <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 0, borderLeft: `1px solid ${V2_LINE}`, paddingLeft: 32 }}>
            {[
              { rok: '1992', wyd: 'Założenie firmy GOMAR',                 opis: 'Małgorzata i Marek Witwiccy startują z działalnością w Krakowie.' },
              { rok: '1998', wyd: 'Wejście w branżę ubezpieczeniową',     opis: 'Pierwsze partnerstwa z towarzystwami ubezpieczeniowymi.' },
              { rok: '2020', wyd: 'Otwarcie punktu partnerskiego Warty',  opis: '17 czerwca 2020 r. — pierwsza dedykowana placówka partnerska Warty w Krakowie, przy ul. Mogilskiej 120B.' },
              { rok: '2022', wyd: 'Jubileusz 30-lecia',                   opis: 'GOMAR Witwicka obchodzi 30 lat działalności na rynku ubezpieczeniowym.' },
              { rok: '2026', wyd: 'Dziś — ponad 30 lat, ponad 25 agentów', opis: 'Wciąż firma rodzinna. Wciąż lokalna.' },
            ].map((t, i) => (
              <div key={i} style={{ position: 'relative', paddingBottom: 28 }}>
                <div style={{ position: 'absolute', left: -38, top: 6, width: 12, height: 12, borderRadius: 99, background: i === 4 ? V2_ACCENT : V2_BRAND }}></div>
                <div style={{ fontFamily: font.display, fontSize: 14, color: V2_BRAND, fontWeight: 600, letterSpacing: '.04em' }}>{t.rok}</div>
                <div style={{ fontFamily: font.display, fontSize: 22, color: V2_INK, fontWeight: 500, marginTop: 4, lineHeight: 1.25 }}>{t.wyd}</div>
                <div style={{ fontSize: 14.5, color: V2_MUTED, marginTop: 8, lineHeight: 1.55, maxWidth: 480 }}>{t.opis}</div>
              </div>
            ))}
          </div>

          {/* Dane rejestrowe firmy. */}
          <div style={{ marginTop: 36, padding: '24px 28px', background: V2_BG, border: `1px solid ${V2_LINE}`, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <div style={{ fontSize: 11, color: V2_MUTED, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>NIP</div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 15, color: V2_INK, marginTop: 4 }}>675-157-72-52</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: V2_MUTED, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>REGON</div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 15, color: V2_INK, marginTop: 4 }}>366451740</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: V2_MUTED, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>KRS</div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 15, color: V2_INK, marginTop: 4 }}>0000660924</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: V2_MUTED, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>Wpis KNF</div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 15, color: V2_INK, marginTop: 4 }}>11234666/A</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function V2PlacCard({ p, i, font }) {
  const [hover, setHover] = React.useState(false);
  const mapsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent('GOMAR Witwicka, ' + p.adres + ', Kraków')}`;
  const telHref = (t) => 'tel:+48' + t.replace(/\D/g, '');
  const lnk = { color: V2_INK, textDecoration: 'underline', textDecorationColor: V2_LINE, textUnderlineOffset: '2px' };
  return (
    <div onClick={() => window.open(mapsUrl, '_blank', 'noopener')} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} role="link" tabIndex={0} title="Wyznacz trasę w Google Maps"
      style={{ background: '#fff', border: `1px solid ${hover ? V2_BRAND : V2_LINE}`, borderRadius: 12, padding: '20px 22px', color: V2_INK, display: 'flex', gap: 18, alignItems: 'center', cursor: 'pointer', transition: 'border-color .18s, background .18s', opacity: p.closed ? .55 : 1 }}>
      <div style={{ width: 36, height: 36, borderRadius: 8, background: p.closed ? V2_MUTED : V2_BRAND, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: font.display, fontWeight: 700, fontSize: 16, flexShrink: 0, color: '#fff' }}>{i + 1}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: font.display, fontSize: 19, fontWeight: 600, color: V2_INK }}>{p.dz}{p.closed ? ' — tymczasowo zamknięte' : ''}</div>
        <div style={{ fontSize: 13, color: V2_MUTED, marginTop: 2 }}>{p.adres}</div>
        <div style={{ fontSize: 13, color: V2_MUTED, marginTop: 4 }}>{p.godz}</div>
        <div style={{ fontSize: 13, color: V2_MUTED, marginTop: 4 }}>
          tel. <a href={telHref(p.tel)} onClick={(e) => e.stopPropagation()} style={lnk}>{p.tel}</a>
          {p.tel2 ? <>, <a href={telHref(p.tel2)} onClick={(e) => e.stopPropagation()} style={lnk}>{p.tel2}</a></> : ''}
          {' · '}
          <a href={`mailto:${p.mail}`} onClick={(e) => e.stopPropagation()} style={lnk}>{p.mail}</a>
        </div>
      </div>
      <a href={mapsUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}
        style={{ flexShrink: 0, alignSelf: 'center', display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: font.body, fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', textDecoration: 'none', color: hover ? '#fff' : V2_BRAND, background: hover ? V2_BRAND : V2_BG, border: `1px solid ${hover ? V2_BRAND : V2_LINE}`, borderRadius: 99, padding: '7px 12px', transition: 'all .18s' }}>
        <svg viewBox="0 0 24 24" width="12" height="12" fill="none"><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" /><circle cx="12" cy="10" r="2.2" stroke="currentColor" strokeWidth="1.8" /></svg>Dojazd
      </a>
    </div>
  );
}

function V2Placowki({ font }) {
  return (
    <section id="placowki-v2" style={{ background: V2_BG, padding: '120px 0', borderBottom: `1px solid ${V2_LINE}`, position: 'relative' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px', position: 'relative' }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div style={{ color: V2_ACCENT, fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>§ Placówki</div>
          <h2 style={{ fontFamily: font.display, fontSize: 48, fontWeight: 600, letterSpacing: '-.015em', color: V2_INK, margin: 0, lineHeight: 1.05 }}>
            Wybierz swoją <em style={{ fontStyle: 'italic', color: V2_BRAND, fontWeight: 500 }}>najbliższą</em>.
          </h2>
          <p style={{ fontSize: 16, color: V2_MUTED, marginTop: 16, lineHeight: 1.6, maxWidth: 540 }}>
            6 placówek w Krakowie. Wpadnij na rozmowę, kawę i konkretną ofertę — bez umawiania się tygodniami z wyprzedzeniem.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'start' }}>
          {/* Mapa Google — żywa, osadzona */}
          <div style={{ background: '#fff', border: `1px solid ${V2_LINE}`, borderRadius: 16, padding: 28, position: 'sticky', top: 24, alignSelf: 'start' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20, fontSize: 12, color: V2_MUTED, letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600 }}>
              <span>Kraków</span>
              <span>6 lokalizacji</span>
            </div>
            <div style={{ position: 'relative', aspectRatio: '1/1', borderRadius: 12, overflow: 'hidden', border: `1px solid ${V2_LINE}` }}>
              <iframe title="Mapa placówek GOMAR — Kraków" src="https://www.google.com/maps?q=gomar+ubezpieczenia+krak%C3%B3w&output=embed" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, display: 'block' }} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
            </div>
          </div>

          {/* Lista placówek — jasne karty */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {V2_PLACOWKI.map((p, i) => (
              <V2PlacCard key={i} p={p} i={i} font={font} />
            ))}
            <div style={{ marginTop: 12, padding: '20px 22px', background: V2_BRAND, color: '#fff', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 40, height: 40, borderRadius: 99, background: 'rgba(255,255,255,.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none"><path d="M5 4h4l2 5-3 2a11 11 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" /></svg>
              </div>
              <div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,.75)' }}>Wszystkie placówki: jeden numer</div>
                <a href="tel:+48501434440" style={{ fontFamily: font.display, fontSize: 22, fontWeight: 700, marginTop: 2, color: '#fff', textDecoration: 'none', display: 'inline-block' }}>+48 501 43 44 40</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function V2Towarzystwa({ font }) {
  const list = ['PZU', 'WARTA', 'ALLIANZ', 'ERGO HESTIA', 'COMPENSA', 'GENERALI', 'UNIQA', 'INTERRISK', 'INTER POLSKA', 'LINK4', 'LLOYD’S', 'NATIONALE-NEDERLANDEN', 'SALTUS', 'TRASTI', 'TUZ', 'UNUM', 'VIENNA LIFE', 'BALCIA'];
  return (
    <section style={{ background: V2_BG, padding: '60px 0', borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: V2_MUTED, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 24 }}>
          <span>§ Współpracujemy z największymi towarzystwami ubezpieczeniowymi</span>
          <div style={{ flex: 1, height: 1, background: V2_LINE }}></div>
          <span>Niezależna multiagencja</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, border: `1px solid ${V2_LINE}`, background: '#fff' }}>
          {list.map((t, i) => {
            const rows = Math.ceil(list.length / 6);
            const lastRow = Math.floor(i / 6) === rows - 1;
            return (
              <div key={i} style={{ padding: '28px 16px', borderRight: (i+1) % 6 !== 0 ? `1px solid ${V2_LINE}` : 'none', borderBottom: lastRow ? 'none' : `1px solid ${V2_LINE}`, textAlign: 'center', fontFamily: font.display, fontWeight: 500, fontSize: 14, color: V2_MUTED, letterSpacing: '.06em' }}>{t}</div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function V2Opinie({ font }) {
  const opinie = [
    { name: 'Pan Grzegorz', meta: 'Kraków · zawodowy kierowca', text: 'Zapisałem się do PASJO i chętnie polecę. Zawiera to, na czym mi zależy — ochronę dziecka, mnie i moich bliskich. Potrzebowałem ochrony, gdyby coś się stało.' },
    { name: 'Pani Wiola', meta: 'Nauczycielka · Kraków', text: 'Niedawno straciłam pracę i ochronę ubezpieczeniową. Udało się znaleźć ofertę PASJO i uzyskać ciągłość ubezpieczenia indywidualnie. Co ważne — za mniejsze pieniądze.' },
  ];
  return (
    <section style={{ background: '#fff', padding: '120px 0', borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div>
            <div style={{ fontSize: 11, color: V2_MUTED, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 24 }}>§ Opinie klientów</div>
            <h2 style={{ fontFamily: font.display, fontSize: 56, fontWeight: 400, letterSpacing: '-.025em', color: V2_INK, margin: 0, lineHeight: 1.05 }}>
              Klienci, którzy <em style={{ fontStyle: 'italic', color: V2_BRAND }}>wracają</em>.
            </h2>
          </div>
          <div style={{ fontSize: 13, color: V2_MUTED }}>Zobacz wszystkie →</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${V2_LINE}` }}>
          {opinie.map((o, i) => (
            <div key={i} style={{ padding: 48, borderRight: i === 0 ? `1px solid ${V2_LINE}` : 'none', display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: font.display, fontSize: 80, color: V2_BRAND, lineHeight: .5, opacity: .25, marginBottom: 24 }}>"</div>
              <p style={{ fontFamily: font.display, fontSize: 22, lineHeight: 1.4, color: V2_INK, fontWeight: 400, margin: 0, fontStyle: 'italic' }}>{o.text}</p>
              <div style={{ marginTop: 'auto', paddingTop: 36 }}>
                <div style={{ display: 'flex', gap: 2, marginBottom: 12 }}>{[1,2,3,4,5].map(s => <span key={s} style={{ color: V2_ACCENT, fontSize: 14 }}>★</span>)}</div>
                <div style={{ fontWeight: 600, fontSize: 14.5, color: V2_INK }}>{o.name}</div>
                <div style={{ fontSize: 13, color: V2_MUTED, marginTop: 2 }}>{o.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function V2Wyroznienia({ font }) {
  // Galeria — placeholdery do podmiany na realne zdjęcia. Bez podpisów — prowadzi obraz.
  const awards = [
    { src: 'assets/nagrody/01_2026_Gala-nagrody/gala-2026_nagroda-1.jpg',           alt: 'Nagroda — Gala 2026 (1)' },
    { src: 'assets/nagrody/01_2026_Gala-nagrody/gala-2026_dyplom-skan.jpg',          alt: 'Dyplom — Gala Nagrody 2026' },
    { src: 'assets/nagrody/01_2026_Gala-nagrody/gala-2026_zdjecie-grupowe.jpg',      alt: 'Zdjęcie grupowe — Gala 2026' },
    { src: 'assets/nagrody/02_2024_Gala-grudniowa/nagroda-UNIQA-2024_zdjecie-1.jpg', alt: 'Nagroda UNIQA 2024' },
    { src: 'assets/nagrody/02_2024_Gala-grudniowa/nagroda-WARTA-2024.jpg',           alt: 'Nagroda Warta 2024' },
    { src: 'assets/nagrody/02_2024_Gala-grudniowa/gala-2024_dyplom-skan.jpg',        alt: 'Dyplom — Gala Grudniowa 2024' },
    { src: 'assets/nagrody/03_2023_Rekomendacje/rekomendacja-2023.jpg',              alt: 'Rekomendacja 2023' },
    { src: 'assets/nagrody/04_2022_Dyplomy-skany/dyplom-skan-2022_nr1.jpg',          alt: 'Dyplom 2022' },
    { src: 'assets/nagrody/05_2019_Nagroda-Ergo-Hestia/nagroda-ErgoHestia-skan.jpg', alt: 'Nagroda Ergo Hestia 2019' },
    { src: 'assets/nagrody/08_2019_Dyplomy-oryginaly/dyplom-oryginal-1.jpg',         alt: 'Dyplom oryginalny 2019' },
    { src: 'assets/nagrody/12_Archiwum_2018/zdjecie-archiwum-2018_01.jpg',           alt: 'Archiwum 2018' },
    { src: 'assets/nagrody/11_Archiwum_2017/zdjecie-archiwum-2017_01.jpg',           alt: 'Archiwum 2017' },
  ];
  const scrollRef = React.useRef(null);
  const scrollBy = (dx) => { if (scrollRef.current) scrollRef.current.scrollBy({ left: dx, behavior: 'smooth' }); };
  const stats = [
    { n: '30+', l: 'lat działalności', dot: true },
    { n: 'liczne', l: 'dyplomy i statuetki' },
    { n: '18+', l: 'współpracujących towarzystw' },
    { n: '1992', l: 'od kiedy nas wyróżniają' },
  ];
  return (
    <section style={{ background: '#fff', padding: '120px 0', borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 40 }}>
          <div>
            <div style={{ color: V2_ACCENT, fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>§ Wyróżnienia</div>
            <h2 style={{ fontFamily: font.display, fontSize: 56, fontWeight: 400, letterSpacing: '-.025em', color: V2_INK, margin: 0, lineHeight: 1.05 }}>
              30+ lat <em style={{ fontStyle: 'italic', color: V2_BRAND }}>uznania</em>.
            </h2>
          </div>
          <a href="#" style={{ color: V2_INK, fontSize: 13, fontWeight: 600, textDecoration: 'none', borderBottom: `1.5px solid ${V2_INK}`, paddingBottom: 4 }}>Zobacz wszystkie →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', background: V2_BG, border: `1px solid ${V2_LINE}`, marginBottom: 48 }}>
          {stats.map((s, i) => (
            <div key={i} style={{ padding: '32px 28px', borderRight: i < stats.length - 1 ? `1px solid ${V2_LINE}` : 'none' }}>
              <div style={{ fontFamily: font.display, fontSize: 44, fontWeight: 400, color: V2_INK, lineHeight: 1, letterSpacing: '-.02em' }}>{s.n}{s.dot && <span style={{ color: V2_ACCENT }}>.</span>}</div>
              <div style={{ fontSize: 12.5, color: V2_MUTED, marginTop: 12, letterSpacing: '.04em' }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 20, gap: 40 }}>
          <div style={{ fontSize: 13, color: V2_MUTED, maxWidth: 520, lineHeight: 1.55 }}>Wybrane dyplomy, statuetki i certyfikaty z ostatnich lat. Pełna galeria w sekcji <em style={{ color: V2_BRAND }}>Przydatne</em>.</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button onClick={() => scrollBy(-600)} aria-label="Poprzednie" style={{ width: 44, height: 44, border: `1px solid ${V2_LINE}`, background: '#fff', color: V2_INK, cursor: 'pointer', fontSize: 16 }}>←</button>
            <button onClick={() => scrollBy(600)}  aria-label="Następne"   style={{ width: 44, height: 44, border: `1px solid ${V2_LINE}`, background: '#fff', color: V2_INK, cursor: 'pointer', fontSize: 16 }}>→</button>
          </div>
        </div>

        <div ref={scrollRef} style={{ overflowX: 'auto', overflowY: 'hidden', scrollSnapType: 'x mandatory', padding: '8px 0 16px', marginLeft: -8 }}>
          <div style={{ display: 'inline-flex', gap: 24, padding: '0 8px' }}>
            {awards.map((a, i) => (
              <a key={i} href={a.src} target="_blank" rel="noopener noreferrer" style={{ flex: '0 0 auto', width: 280, scrollSnapAlign: 'start', background: '#fff', border: `1px solid ${V2_LINE}`, padding: 16, display: 'flex', flexDirection: 'column', gap: 14, textDecoration: 'none', color: V2_INK }}>
                <div style={{ aspectRatio: '3 / 4', background: V2_BG, position: 'relative', overflow: 'hidden', border: `1px solid ${V2_LINE}` }}>
                  <img src={a.src} alt={a.alt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function V2Aktualnosci({ font }) {
  const items = [
    { data: 'Maj 2023',     kat: 'Wydarzenie', tytul: 'Wielki Finał GOMAR Koszykarskiej Ligi Szkolnej', lead: 'Finał ligi koszykarskiej z udziałem szkół z Krakowa.',                 ph: 'turniej' },
    { data: 'Lipiec 2022',  kat: 'Jubileusz',  tytul: '30-lecie GOMAR',                                        lead: 'Z radością i wielką dumą informujemy, że Gomar Witwicka obchodzi 30 lat działalności.',           ph: '30 lat' },
    { data: 'Czerwiec 2020', kat: 'Otwarcie',  tytul: 'Otwarcie punktu partnerskiego Warty w Krakowie',         lead: '17 czerwca 2020 r. w biurze przy ul. Mogilskiej 120B uruchomiliśmy pierwszą placówkę partnerską Warty.', ph: 'biuro Mogilska 120B' },
  ];
  const lineCol = V2_LINE;
  const card = (a, i) => (
    <a key={i} href="#" style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none', color: V2_INK, background: '#fff', borderRight: `1px solid ${lineCol}`, borderBottom: `1px solid ${lineCol}`, transition: 'background .2s' }}
       onMouseEnter={e => e.currentTarget.style.background = V2_BG}
       onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
      <div style={{ aspectRatio: '16 / 10', background: V2_BG, position: 'relative', overflow: 'hidden', borderBottom: `1px solid ${lineCol}` }}>
        <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(45deg, transparent 0 14px, rgba(26,44,107,.04) 14px 15px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: V2_BRAND, opacity: .55, letterSpacing: '.08em', textTransform: 'uppercase', padding: '6px 12px', background: 'rgba(255,255,255,.85)', border: `1px solid ${lineCol}` }}>{a.ph}</div>
        </div>
      </div>
      <div style={{ padding: '24px 28px 28px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 11, color: V2_MUTED, letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 600 }}>
          <span style={{ color: V2_BRAND }}>{a.kat}</span>
          <span style={{ width: 4, height: 4, background: V2_ACCENT, borderRadius: 99 }} aria-hidden="true"></span>
          <span>{a.data}</span>
        </div>
        <h3 style={{ fontFamily: font.display, fontSize: 22, fontWeight: 500, color: V2_INK, margin: 0, lineHeight: 1.2, letterSpacing: '-.005em' }}>{a.tytul}</h3>
        <p style={{ fontSize: 14, color: V2_MUTED, lineHeight: 1.55, margin: 0 }}>{a.lead}</p>
        <div style={{ marginTop: 'auto', paddingTop: 8, fontSize: 11, color: V2_BRAND, letterSpacing: '.12em', textTransform: 'uppercase', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Czytaj więcej <span aria-hidden="true">→</span></div>
      </div>
    </a>
  );
  return (
    <section style={{ background: '#fff', padding: '120px 0', borderBottom: `1px solid ${V2_LINE}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 40 }}>
          <div>
            <div style={{ color: V2_ACCENT, fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>§ Aktualności</div>
            <h2 style={{ fontFamily: font.display, fontSize: 56, fontWeight: 400, letterSpacing: '-.025em', color: V2_INK, margin: 0, lineHeight: 1.05 }}>
              Co u nas <em style={{ fontStyle: 'italic', color: V2_BRAND }}>słychać</em>.
            </h2>
          </div>
          <a href="#" style={{ color: V2_INK, fontSize: 13, fontWeight: 600, textDecoration: 'none', borderBottom: `1.5px solid ${V2_INK}`, paddingBottom: 4 }}>Wszystkie wpisy →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: `1px solid ${lineCol}`, borderLeft: `1px solid ${lineCol}` }}>
          {items.map(card)}
        </div>
      </div>
    </section>
  );
}

function V2Kontakt({ font }) {
  return (
    <section style={{ background: V2_BRAND, color: '#fff', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'center', position: 'relative' }}>
        <div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,.55)', letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 24 }}>§ Kontakt</div>
          <h2 style={{ fontFamily: font.display, fontSize: 80, fontWeight: 400, letterSpacing: '-.03em', margin: 0, lineHeight: .98 }}>
            Zostaw numer.<br /><em style={{ fontStyle: 'italic', color: V2_ACCENT }}>Oddzwonimy</em>.
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,.7)', marginTop: 32, lineHeight: 1.55, maxWidth: 520 }}>
            Bez bota, bez automatu. Dzwoni do Ciebie konkretny agent z konkretnej krakowskiej placówki.
          </p>
          <div style={{ marginTop: 56, display: 'flex', gap: 56 }}>
            <div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,.5)', letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>Telefon</div>
              <a href="tel:+48501434440" style={{ fontFamily: font.display, fontSize: 28, fontWeight: 500, marginTop: 8, color: 'inherit', textDecoration: 'none', display: 'inline-block' }}>501 43 44 40</a>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,.5)', letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600 }}>E-mail</div>
              <div style={{ fontFamily: font.display, fontSize: 18, fontWeight: 500, marginTop: 8, lineHeight: 1.35 }}>per placówka<br /><span style={{ fontSize: 13, color: 'rgba(255,255,255,.55)', fontFamily: V2_INK ? 'inherit' : undefined }}>bojki@, mackiewicza@, kobierzynska@, soltysowska@witwicka.pl</span></div>
            </div>
          </div>
        </div>
        <form style={{ background: V2_BG, color: V2_INK, padding: 40, display: 'flex', flexDirection: 'column', gap: 18 }} onSubmit={e => e.preventDefault()}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <label style={{ fontSize: 11, color: V2_MUTED, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase' }}>Imię</label>
              <input placeholder="Jan Kowalski" style={{ width: '100%', marginTop: 6, padding: '12px 0', border: 0, borderBottom: `1px solid ${V2_LINE}`, fontSize: 16, fontFamily: 'inherit', boxSizing: 'border-box', background: 'transparent', outline: 'none' }} />
            </div>
            <div>
              <label style={{ fontSize: 11, color: V2_MUTED, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase' }}>Telefon</label>
              <input placeholder="+48 ___ ___ ___" style={{ width: '100%', marginTop: 6, padding: '12px 0', border: 0, borderBottom: `1px solid ${V2_LINE}`, fontSize: 16, fontFamily: 'inherit', boxSizing: 'border-box', background: 'transparent', outline: 'none' }} />
            </div>
          </div>
          <div>
            <label style={{ fontSize: 11, color: V2_MUTED, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase' }}>E-mail</label>
            <input type="email" placeholder="jan@example.pl" style={{ width: '100%', marginTop: 6, padding: '12px 0', border: 0, borderBottom: `1px solid ${V2_LINE}`, fontSize: 16, fontFamily: 'inherit', boxSizing: 'border-box', background: 'transparent', outline: 'none' }} />
          </div>
          <div>
            <label style={{ fontSize: 11, color: V2_MUTED, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase' }}>Wiadomość</label>
            <textarea rows={3} placeholder="W czym możemy pomóc?" style={{ width: '100%', marginTop: 6, padding: '12px 0', border: 0, borderBottom: `1px solid ${V2_LINE}`, fontSize: 16, fontFamily: 'inherit', boxSizing: 'border-box', background: 'transparent', outline: 'none', resize: 'none', color: V2_INK, lineHeight: 1.5 }} />
          </div>
          <button type="submit" style={{ marginTop: 8, padding: '18px 24px', background: V2_INK, color: '#fff', border: 0, fontSize: 13, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', fontFamily: 'inherit', cursor: 'pointer' }}>Wyślij →</button>
          <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 11.5, color: V2_MUTED, lineHeight: 1.5, cursor: 'pointer', marginTop: 4 }}>
            <input type="checkbox" style={{ width: 16, height: 16, marginTop: 1, flexShrink: 0, accentColor: V2_BRAND }} />
            <span>Wyrażam zgodę na przetwarzanie moich danych osobowych przez GOMAR Małgorzata Witwicka w celach marketingowych i kontaktu zwrotnego, zgodnie z RODO. Podanie danych jest dobrowolne, a zgodę mogę wycofać w każdej chwili.</span>
          </label>
        </form>
      </div>
    </section>
  );
}

function V2Footer({ font }) {
  return (
    <footer style={{ background: V2_INK, color: '#fff', padding: '60px 0 30px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 48 }}>
          <div>
            <a href="/"><img src="/assets/logo-gomar-white.png" alt="GOMAR Witwicka — Ubezpieczenia" style={{ height: 64, width: 'auto', display: 'block' }} /></a>
            <div style={{ display: 'none' }}>UBEZPIECZENIA · EST. 1992</div>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,.6)', marginTop: 20, lineHeight: 1.6, maxWidth: 320 }}>
              Rodzinna multiagencja z Krakowa. Działamy od 1992 roku, w branży ubezpieczeniowej od 1998. Ponad 25 agentów, 6 placówek w Krakowie.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,.4)', letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>Firma</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13.5 }}>
              <a href="/" style={{ color: 'rgba(255,255,255,.7)', textDecoration: 'none' }}>Strona główna</a>
              <a href="/#o-nas" style={{ color: 'rgba(255,255,255,.7)', textDecoration: 'none' }}>O nas</a>
              <a href="/wspolpraca" style={{ color: 'rgba(255,255,255,.7)', textDecoration: 'none' }}>Współpraca</a>
              <a href="/pelnomocnictwa" style={{ color: 'rgba(255,255,255,.7)', textDecoration: 'none' }}>Pełnomocnictwa</a>
              <a href="/przydatne" style={{ color: 'rgba(255,255,255,.7)', textDecoration: 'none' }}>Przydatne</a>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,.4)', letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>Kontakt</div>
            <a href="tel:+48501434440" style={{ fontFamily: font.display, fontSize: 22, fontWeight: 500, color: 'inherit', textDecoration: 'none' }}>501 43 44 40</a>
            <div style={{ marginTop: 16 }}>
              <a href="https://www.facebook.com/ubezpieczeniawitwicka" target="_blank" rel="noopener noreferrer" aria-label="Facebook GOMAR Witwicka" style={{ display: 'inline-flex', width: 36, height: 36, background: '#fff', borderRadius: '50%', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', flexShrink: 0 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" fill={V2_INK}/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 60, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.1)', display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'rgba(255,255,255,.4)' }}>
          <div>© 1992–2026 GOMAR Małgorzata Witwicka · NIP 675-157-72-52 · KRS 0000660924 · KNF 11234666/A</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span><a href="/polityka-bezpieczenstwa-gomar" style={{ color: 'inherit', textDecoration: 'none' }}>Polityka Bezpieczeństwa GOMAR sp. z o.o.</a> <a href="/polityka-bezpieczenstwa-fhu" style={{ color: 'inherit', textDecoration: 'none' }}>oraz FHU GOMAR</a></span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function Variant2({ font: _ignored }) {
  // Wariant 2 ma własną, dedykowaną typografię niezależnie od globalnego tweaka:
  // — Barlow Semi Condensed jako font główny (nagłówki, dane kluczowe)
  // — Inter jako font do mniej istotnych treści (podpisy, opisy, body)
  const font = {
    display: "'Barlow Semi Condensed', system-ui, sans-serif",
    body: "'Inter', system-ui, sans-serif",
  };
  return (
    <div style={{ fontFamily: font.body, color: V2_INK, background: V2_BG }}>
      <V2Header font={font} />
      <V2Hero font={font} />
      <V2Stats font={font} />
      <V2Marquee font={font} />
      <V2Kategorie font={font} />
      <V2ONas font={font} />
      <V2Placowki font={font} />
      {/* <V2Aktualnosci font={font} /> — chwilowo wyłączone */}
      <V2Wyroznienia font={font} />
      <V2Kontakt font={font} />
      <V2Footer font={font} />
    </div>
  );
}

window.Variant2 = Variant2;