// oferta-page.jsx — uniwersalny szablon podstrony oferty (styl Wariantu 2 / „Korporacyjne").
// Eksportuje window.OfertaPage. Wymaga: window.OFERTA_DATA, window.OFERTA_CATS, window.OfertaMenu, window.OfIkona.
// Użycie:  <OfertaPage slug="komunikacyjne" />

const OFP_BRAND = '#1a2c6b';
const OFP_BG = '#faf8f3';
const OFP_INK = '#15181f';
const OFP_MUTED = '#6b6e78';
const OFP_LINE = '#e8e4db';
const OFP_ACCENT = '#c98a3f';
const OFP_DISPLAY = "'Barlow Semi Condensed', system-ui, sans-serif";
const OFP_BODY = "'Inter', system-ui, sans-serif";

const OFP_STYLES = `
.ofp-root { font-family: ${OFP_BODY}; color: ${OFP_INK}; background: ${OFP_BG}; -webkit-font-smoothing: antialiased; width: 100%; }
.ofp-root *, .ofp-root *::before, .ofp-root *::after { box-sizing: border-box; }
.ofp-root em { font-style: italic; }
.ofp-root a { color: inherit; }
.ofp-root .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.ofp-root .label-kicker { color: ${OFP_ACCENT}; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }

/* HEADER */
.ofp-root .site-header { background: ${OFP_BG}; position: relative; z-index: 50; }
.ofp-root .site-header .inner { padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid ${OFP_LINE}; max-width: 1320px; margin: 0 auto; }
.ofp-root .site-header img { height: 68px; width: auto; display: block; }
.ofp-root .site-header nav { display: flex; align-items: center; gap: 36px; font-size: 13px; font-weight: 500; color: ${OFP_INK}; }
.ofp-root .site-header nav a { color: ${OFP_INK}; text-decoration: none; }
.ofp-root .phone-block { display: flex; align-items: center; gap: 18px; }
.ofp-root .phone-block .meta { text-align: right; }
.ofp-root .phone-block .meta-label { font-size: 10px; color: ${OFP_MUTED}; letter-spacing: .1em; text-transform: uppercase; }
.ofp-root .phone-block .meta-num { font-family: ${OFP_DISPLAY}; font-size: 16px; font-weight: 700; color: ${OFP_INK}; text-decoration: none; }
.ofp-root .phone-btn { width: 42px; height: 42px; background: ${OFP_BRAND}; color: #fff; border-radius: 99px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* CRUMBS */
.ofp-root .crumbs { background: ${OFP_BG}; font-size: 12px; color: ${OFP_MUTED}; letter-spacing: .04em; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .crumbs .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.ofp-root .crumbs a { color: ${OFP_MUTED}; text-decoration: none; }
.ofp-root .crumbs .sep { opacity: .4; }
.ofp-root .crumbs .current { color: ${OFP_INK}; font-weight: 500; }

/* HERO */
.ofp-root .hero { background: ${OFP_BG}; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .hero .grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: center; padding: 80px 0 100px; }
.ofp-root .hero h1 { font-family: ${OFP_DISPLAY}; font-weight: 400; font-size: 92px; line-height: .98; letter-spacing: -.035em; color: ${OFP_INK}; margin: 0; }
.ofp-root .hero h1 em { font-style: italic; font-weight: 400; color: ${OFP_BRAND}; }
.ofp-root .hero .lead { font-size: 17px; line-height: 1.55; color: ${OFP_MUTED}; max-width: 540px; margin: 40px 0 0; }
.ofp-root .hero .ph { width: 100%; aspect-ratio: 4/5; border: 1px solid ${OFP_LINE}; border-radius: 14px; background: repeating-linear-gradient(45deg, #fff, #fff 11px, #f1ece2 11px, #f1ece2 22px); display: flex; align-items: flex-end; padding: 18px; }
.ofp-root .hero .ph code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: ${OFP_MUTED}; background: #fff; border: 1px solid ${OFP_LINE}; padding: 5px 9px; border-radius: 6px; }
.ofp-root .hero .hero-photo { width: 100%; display: block; }
.ofp-root .hero .hero-photo img { width: 100%; height: auto; display: block; }

/* STATS */
.ofp-root .stats-bar { background: #fff; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .stats-bar .wrap { padding-top: 64px; padding-bottom: 56px; }
.ofp-root .stats-bar .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ofp-root .stats-bar .item + .item { border-left: 1px solid ${OFP_LINE}; padding-left: 32px; }
.ofp-root .stats-bar .v { font-family: ${OFP_DISPLAY}; font-size: 56px; font-weight: 400; color: ${OFP_INK}; line-height: 1; letter-spacing: -.02em; }
.ofp-root .stats-bar .v .dot { color: ${OFP_ACCENT}; }
.ofp-root .stats-bar .l { font-size: 13px; color: ${OFP_MUTED}; margin-top: 10px; letter-spacing: .04em; }

/* WHY */
.ofp-root .why { background: #fff; padding: 120px 0; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .why .grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 100px; align-items: start; }
.ofp-root .why h2 { font-family: ${OFP_DISPLAY}; font-size: 52px; font-weight: 400; letter-spacing: -.025em; color: ${OFP_INK}; margin: 0; line-height: 1.06; }
.ofp-root .why h2 em { font-style: italic; color: ${OFP_BRAND}; }
.ofp-root .why .copy { font-size: 17px; line-height: 1.7; color: ${OFP_INK}; }
.ofp-root .why .copy p { margin: 0 0 24px; }
.ofp-root .why .copy .pull { font-family: ${OFP_DISPLAY}; font-size: 26px; line-height: 1.35; font-style: italic; color: ${OFP_INK}; font-weight: 400; margin: 0 0 32px; }
.ofp-root .why .bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 36px 0 0; padding-top: 32px; border-top: 1px solid ${OFP_LINE}; list-style: none; padding-left: 0; }
.ofp-root .why .bullets li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; color: ${OFP_INK}; }
.ofp-root .why .bullets li::before { content: '✓'; color: ${OFP_ACCENT}; font-weight: 700; flex: 0 0 auto; }

/* SECTION (lista / karty) */
.ofp-root .sec { padding: 120px 0; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .sec.cream { background: ${OFP_BG}; }
.ofp-root .sec.white { background: #fff; }
.ofp-root .sec .heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
.ofp-root .sec h2 { font-family: ${OFP_DISPLAY}; font-size: 52px; font-weight: 400; letter-spacing: -.025em; margin: 0; line-height: 1.05; }
.ofp-root .sec h2 em { font-style: italic; color: ${OFP_BRAND}; font-weight: 400; }
.ofp-root .sec .heading p { font-size: 15px; color: ${OFP_MUTED}; max-width: 380px; line-height: 1.6; margin: 0; }

/* CHECKLIST */
.ofp-root .clist { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid ${OFP_LINE}; border-left: 1px solid ${OFP_LINE}; background: #fff; }
.ofp-root .clist .ci { display: flex; gap: 16px; align-items: flex-start; padding: 26px 30px; border-right: 1px solid ${OFP_LINE}; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .clist .ci .nm { font-family: ${OFP_DISPLAY}; font-size: 12px; font-weight: 600; color: ${OFP_BRAND}; letter-spacing: .04em; flex: 0 0 auto; width: 26px; padding-top: 2px; }
.ofp-root .clist .ci .tx { font-size: 16px; line-height: 1.45; color: ${OFP_INK}; font-weight: 500; }

/* CARDS */
.ofp-root .cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid ${OFP_LINE}; border-left: 1px solid ${OFP_LINE}; background: #fff; }
.ofp-root .cards .card { padding: 36px 32px; border-right: 1px solid ${OFP_LINE}; border-bottom: 1px solid ${OFP_LINE}; display: flex; flex-direction: column; gap: 12px; }
.ofp-root .cards .card .num { font-family: ${OFP_DISPLAY}; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: ${OFP_BRAND}; }
.ofp-root .cards .card h3 { font-family: ${OFP_DISPLAY}; font-size: 24px; font-weight: 500; margin: 0; line-height: 1.15; color: ${OFP_INK}; }
.ofp-root .cards .card p { font-size: 14.5px; line-height: 1.6; color: ${OFP_MUTED}; margin: 0; }

/* CTA */
.ofp-root .cta-inline { background: ${OFP_BG}; padding: 80px 0; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .cta-inline .card { background: ${OFP_BRAND}; color: #fff; padding: 56px 64px; display: flex; justify-content: space-between; align-items: center; gap: 56px; position: relative; }
.ofp-root .cta-inline .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: ${OFP_ACCENT}; }
.ofp-root .cta-inline .kicker { font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.ofp-root .cta-inline h3 { font-family: ${OFP_DISPLAY}; font-size: 44px; font-weight: 400; letter-spacing: -.02em; margin: 0; line-height: 1.05; max-width: 640px; color: #fff; }
.ofp-root .cta-inline h3 em { font-style: italic; color: ${OFP_ACCENT}; }
.ofp-root .cta-inline .btns { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; align-items: stretch; min-width: 240px; }
.ofp-root .cta-inline .btn-primary { background: #fff; color: ${OFP_BRAND}; padding: 18px 28px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; }
.ofp-root .cta-inline .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 18px 28px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; }

/* OTHERS */
.ofp-root .others { background: #fff; padding: 120px 0; border-bottom: 1px solid ${OFP_LINE}; }
.ofp-root .others .heading { margin-bottom: 56px; }
.ofp-root .others h2 { font-family: ${OFP_DISPLAY}; font-size: 52px; font-weight: 400; letter-spacing: -.025em; margin: 0; line-height: 1.05; max-width: 720px; }
.ofp-root .others h2 em { font-style: italic; color: ${OFP_BRAND}; }
.ofp-root .others .heading p { font-size: 15px; color: ${OFP_MUTED}; margin-top: 16px; max-width: 540px; line-height: 1.6; }
.ofp-root .others-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid ${OFP_LINE}; border-left: 1px solid ${OFP_LINE}; }
.ofp-root .others-grid a { display: flex; align-items: center; gap: 16px; padding: 28px 28px; background: #fff; text-decoration: none; color: ${OFP_INK}; border-right: 1px solid ${OFP_LINE}; border-bottom: 1px solid ${OFP_LINE}; transition: background .2s; position: relative; }
.ofp-root .others-grid a:hover { background: #fdfcf7; }
.ofp-root .others-grid a .oi { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; border: 1px solid ${OFP_LINE}; display: flex; align-items: center; justify-content: center; }
.ofp-root .others-grid a .oi svg { width: 24px; height: 24px; }
.ofp-root .others-grid a .pre { font-size: 11px; color: ${OFP_MUTED}; letter-spacing: .04em; }
.ofp-root .others-grid a .title { font-family: ${OFP_DISPLAY}; font-size: 20px; font-weight: 600; margin-top: 2px; color: ${OFP_INK}; }
.ofp-root .others-grid a .arrow { margin-left: auto; color: ${OFP_BRAND}; opacity: .35; font-size: 16px; }

/* FOOTER */
.ofp-root footer.site { background: ${OFP_INK}; color: #fff; padding: 60px 0 30px; }
.ofp-root footer.site .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.ofp-root footer.site .brand-name { font-family: ${OFP_DISPLAY}; font-size: 24px; font-weight: 700; letter-spacing: .06em; }
.ofp-root footer.site .brand-sub { font-size: 10px; opacity: .55; letter-spacing: .18em; margin-top: 4px; }
.ofp-root footer.site .brand-desc { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 20px; line-height: 1.6; max-width: 320px; }
.ofp-root footer.site .col-head { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.ofp-root footer.site .col-list { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.ofp-root footer.site .col-list a { color: rgba(255,255,255,.7); text-decoration: none; }
.ofp-root footer.site .col-phone { font-family: ${OFP_DISPLAY}; font-size: 22px; font-weight: 500; color: #fff; text-decoration: none; }
.ofp-root footer.site .bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(255,255,255,.4); }
.ofp-root footer.site .bottom a { color: inherit; text-decoration: none; }
.ofp-root footer.site .bottom .links { display: flex; gap: 24px; }
`;

function OfertaPage({ slug }) {
  const d = window.OFERTA_DATA[slug];
  const cats = window.OFERTA_CATS;
  if (!d) return <div style={{ padding: 40 }}>Brak danych dla: {slug}</div>;

  const titleFull = d.h1.join(' ');
  // „Pozostała oferta" — kategorie inne niż bieżąca; Best Doctors tylko przy zdrowiu/życiu
  let base = cats.filter(c => c.slug !== 'best-doctors' && c.slug !== slug);
  let others = (slug === 'zdrowotne' || slug === 'zycie')
    ? [cats.find(c => c.slug === 'best-doctors'), ...base]
    : base;
  others = others.slice(0, 9);
  const footerOferta = cats.filter(c => c.slug !== 'best-doctors').slice(0, 5);

  let secBg = 'cream';
  return (
    <div className="ofp-root">
      <style dangerouslySetInnerHTML={{ __html: OFP_STYLES }} />

      <header className="site-header">
        <div className="inner">
          <a href="/"><img src="/assets/logo-gomar.png" alt="GOMAR Witwicka — Ubezpieczenia" /></a>
          <nav>
            <a href="/">Strona główna</a>
            <span>O nas</span>
            <OfertaMenu active={true} />
            <a href="/wspolpraca/">Współpraca</a>
            <a href="/pelnomocnictwa/">Pełnomocnictwa</a>
            <a href="/przydatne/">Przydatne</a>
            <a href="/kontakt/">Kontakt</a>
          </nav>
          <div className="phone-block">
            <div className="meta">
              <div className="meta-label">Linia bezpośrednia</div>
              <a className="meta-num" href="tel:+48501434440">501 43 44 40</a>
            </div>
            <a className="phone-btn" href="tel:+48501434440" aria-label="Zadzwoń">
              <svg viewBox="0 0 24 24" width="16" height="16" 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>
            </a>
          </div>
        </div>
      </header>

      <div className="crumbs">
        <div className="wrap">
          <a href="/">Strona główna</a>
          <span className="sep">/</span>
          <a href="/oferta/">Oferta</a>
          <span className="sep">/</span>
          <span className="current">{titleFull}</span>
        </div>
      </div>

      <section className="hero">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="label-kicker">§ {d.kicker}</div>
              <h1>{d.h1[0]}<br /><em>{d.h1[1]}</em>.</h1>
              <p className="lead">{d.lead}</p>
            </div>
            <div className="image-col">
              {d.heroImg
                ? <span className="hero-photo"><img src={d.heroImg} alt={titleFull} /></span>
                : <div className="ph"><code>zdjęcie: {titleFull.toLowerCase()}</code></div>}
            </div>
          </div>
        </div>
      </section>

      <section className="stats-bar">
        <div className="wrap">
          <div className="grid">
            <div className="item"><div className="v">1992<span className="dot">.</span></div><div className="l">rok założenia firmy</div></div>
            <div className="item"><div className="v">1998<span className="dot">.</span></div><div className="l">w branży ubezpieczeniowej</div></div>
            <div className="item"><div className="v">25+</div><div className="l">agentów na pełen etat</div></div>
            <div className="item"><div className="v">6</div><div className="l">placówek w Krakowie</div></div>
          </div>
        </div>
      </section>

      <section className="why">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="label-kicker">§ Dlaczego warto</div>
              <h2 dangerouslySetInnerHTML={{ __html: d.why.h2 }} />
            </div>
            <div className="copy">
              {d.why.pull && <p className="pull" dangerouslySetInnerHTML={{ __html: d.why.pull }} />}
              {d.why.paras.map((p, i) => <p key={i}>{p}</p>)}
              {d.why.bullets && (
                <ul className="bullets">
                  {d.why.bullets.map((b, i) => <li key={i} dangerouslySetInnerHTML={{ __html: b }} />)}
                </ul>
              )}
            </div>
          </div>
        </div>
      </section>

      {d.sections.map((s, si) => {
        const bg = secBg; secBg = secBg === 'cream' ? 'white' : 'cream';
        return (
          <section key={si} className={'sec ' + bg}>
            <div className="wrap">
              <div className="heading">
                <div>
                  <div className="label-kicker">§ {s.kicker}</div>
                  <h2 dangerouslySetInnerHTML={{ __html: s.h2 }} />
                </div>
                {s.note && <p>{s.note}</p>}
              </div>
              {s.type === 'checklist' ? (
                <div className="clist">
                  {s.items.map((it, i) => (
                    <div key={i} className="ci">
                      <span className="nm">{String(i + 1).padStart(2, '0')}</span>
                      <span className="tx">{it}</span>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="cards">
                  {s.items.map((it, i) => (
                    <div key={i} className="card">
                      <span className="num">{String(i + 1).padStart(2, '0')}.</span>
                      <h3>{it.title}</h3>
                      <p>{it.desc}</p>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </section>
        );
      })}

      <section className="cta-inline">
        <div className="wrap">
          <div className="card">
            <div>
              <div className="kicker">§ Następny krok</div>
              <h3>Chcesz poznać szczegóły tej oferty? <em>Zacznijmy od rozmowy.</em></h3>
            </div>
            <div className="btns">
              <a className="btn-primary" href="/kontakt/">Umów rozmowę <span aria-hidden="true">→</span></a>
              <a className="btn-ghost" href="tel:+48501434440">+48 501 43 44 40</a>
            </div>
          </div>
        </div>
      </section>

      <section className="others">
        <div className="wrap">
          <div className="heading">
            <div className="label-kicker">§ Pozostała oferta</div>
            <h2>Sprawdź <em>nasze inne ubezpieczenia</em>.</h2>
            <p>Każdą grupę produktów układamy tak samo — pod konkretną sytuację klienta, nie pod szablon.</p>
          </div>
          <div className="others-grid">
            {others.map((c) => (
              <a key={c.slug} href={c.href}>
                <span className="oi"><OfIkona kind={c.ikona} /></span>
                <span>
                  <span className="pre">Ubezpieczenia</span>
                  <span className="title" style={{ display: 'block' }}>{c.title}</span>
                </span>
                <span className="arrow">→</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <footer style={{ background: '#15181f', 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>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,.6)', marginTop: 20, lineHeight: 1.6, maxWidth: 320 }}>
                Rodzinna multiagencja z&#160;Krakowa. Działamy od 1992 roku, w&#160;branży ubezpieczeniowej od 1998. Ponad 25 agentów, 6 placówek w&#160;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>
                <a href="/kontakt/" style={{ color: 'rgba(255,255,255,.7)', textDecoration: 'none' }}>Kontakt</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: "'Barlow Semi Condensed', sans-serif", 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"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" fill="#15181f"/></svg>
                </a>
                <a href="https://www.linkedin.com/company/gomar-ubezpieczenia-witwicka/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn GOMAR Witwicka" style={{ display: 'inline-flex', width: 36, height: 36, background: '#fff', borderRadius: '50%', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', flexShrink: 0, marginLeft: 8 }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" fill="#15181f"/><rect x="2" y="9" width="4" height="12" fill="#15181f"/><circle cx="4" cy="4" r="2" fill="#15181f"/></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>
    </div>
  );
}

window.OfertaPage = OfertaPage;