// pelnomocnictwa.jsx — Landing "Pełnomocnictwa" w stylu Wariantu 2
// Eksportuje window.LandingPelnomocnictwa — wszystkie style scope'owane przez .pel-root

const P_BRAND = '#1a2c6b';
const P_BG = '#faf8f3';
const P_INK = '#15181f';
const P_MUTED = '#6b6e78';
const P_LINE = '#e8e4db';
const P_ACCENT = '#c98a3f';
const P_DISPLAY = "'Barlow Semi Condensed', system-ui, sans-serif";
const P_BODY = "'Inter', system-ui, sans-serif";

const PEL_STYLES = `
.pel-root { font-family: ${P_BODY}; color: ${P_INK}; background: ${P_BG}; -webkit-font-smoothing: antialiased; width: 1440px; }
.pel-root *, .pel-root *::before, .pel-root *::after { box-sizing: border-box; }
.pel-root em { font-style: italic; }
.pel-root a { color: inherit; }
.pel-root .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.pel-root .label-kicker { color: ${P_ACCENT}; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }

/* HEADER */
.pel-root .site-header { background: ${P_BG}; position: relative; z-index: 5; }
.pel-root .site-header .inner { padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid ${P_LINE}; max-width: 1320px; margin: 0 auto; }
.pel-root .site-header img { height: 68px; width: auto; display: block; }
.pel-root .site-header nav { display: flex; gap: 36px; font-size: 13px; font-weight: 500; color: ${P_INK}; }
.pel-root .site-header nav a { color: ${P_INK}; text-decoration: none; }
.pel-root .site-header nav a.active { color: ${P_BRAND}; position: relative; }
.pel-root .site-header nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: ${P_BRAND}; }
.pel-root .phone-block { display: flex; align-items: center; gap: 18px; }
.pel-root .phone-block .meta { text-align: right; }
.pel-root .phone-block .meta-label { font-size: 10px; color: ${P_MUTED}; letter-spacing: .1em; text-transform: uppercase; }
.pel-root .phone-block .meta-num { font-family: ${P_DISPLAY}; font-size: 16px; font-weight: 700; color: ${P_INK}; }
.pel-root .phone-btn { width: 42px; height: 42px; background: ${P_BRAND}; color: #fff; border-radius: 99px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

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

/* INTRO — kompaktowy, bez wielkiego baneru */
.pel-root .intro { background: ${P_BG}; border-bottom: 1px solid ${P_LINE}; }
.pel-root .intro .grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: end; padding: 72px 0 56px; }
.pel-root .intro h1 { font-family: ${P_DISPLAY}; font-weight: 400; font-size: 84px; line-height: .98; letter-spacing: -.03em; color: ${P_INK}; margin: 0; }
.pel-root .intro h1 em { font-style: italic; font-weight: 400; color: ${P_BRAND}; }
.pel-root .intro .lead { font-size: 16px; line-height: 1.6; color: ${P_MUTED}; margin: 0; padding-bottom: 8px; }

/* GRID OF TILES */
.pel-root .tiles-sec { background: #fff; padding: 64px 0 96px; border-bottom: 1px solid ${P_LINE}; }
.pel-root .tiles-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid ${P_LINE}; }
.pel-root .tiles-head .left { display: flex; align-items: baseline; gap: 18px; }
.pel-root .tiles-head .count { font-family: ${P_DISPLAY}; font-size: 40px; font-weight: 500; color: ${P_INK}; letter-spacing: -.02em; line-height: 1; }
.pel-root .tiles-head .count .dot { color: ${P_ACCENT}; }
.pel-root .tiles-head .count-l { font-size: 13px; color: ${P_MUTED}; letter-spacing: .04em; }
.pel-root .tiles-head .hint { font-size: 12px; color: ${P_MUTED}; max-width: 320px; text-align: right; line-height: 1.5; }

.pel-root .tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid ${P_LINE}; border-left: 1px solid ${P_LINE}; }
.pel-root .tile { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 28px; border-right: 1px solid ${P_LINE}; border-bottom: 1px solid ${P_LINE}; background: #fff; color: ${P_INK}; text-decoration: none; transition: background .18s, color .18s; min-height: 96px; }
.pel-root .tile:hover { background: ${P_BG}; }
.pel-root .tile:hover .tile-name { color: ${P_BRAND}; }
.pel-root .tile:hover .tile-arrow { color: ${P_BRAND}; opacity: 1; transform: translateX(2px); }
.pel-root .tile .tile-num { font-family: ${P_DISPLAY}; font-size: 12px; font-weight: 500; color: ${P_ACCENT}; letter-spacing: .08em; flex-shrink: 0; min-width: 28px; }
.pel-root .tile .tile-name { font-family: ${P_DISPLAY}; font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: .01em; color: ${P_INK}; text-transform: uppercase; flex: 1; transition: color .18s; }
.pel-root .tile .tile-arrow { color: ${P_MUTED}; opacity: .5; font-size: 16px; flex-shrink: 0; transition: color .18s, opacity .18s, transform .18s; }

/* INFO BAR — co znajdziesz po kliknięciu */
.pel-root .info-bar { background: ${P_BG}; padding: 56px 0; border-bottom: 1px solid ${P_LINE}; }
.pel-root .info-bar .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.pel-root .info-bar .cell { display: flex; flex-direction: column; gap: 10px; }
.pel-root .info-bar .cell .l { font-size: 11px; color: ${P_ACCENT}; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.pel-root .info-bar .cell .v { font-family: ${P_DISPLAY}; font-size: 22px; font-weight: 500; color: ${P_INK}; line-height: 1.3; }
.pel-root .info-bar .cell .d { font-size: 14px; color: ${P_MUTED}; line-height: 1.55; }

/* FOOTER */
.pel-root footer.site { background: ${P_INK}; color: #fff; padding: 60px 0 30px; }
.pel-root footer.site .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.pel-root footer.site .brand-name { font-family: ${P_DISPLAY}; font-size: 24px; font-weight: 700; letter-spacing: .06em; }
.pel-root footer.site .brand-sub { font-size: 10px; opacity: .55; letter-spacing: .18em; margin-top: 4px; }
.pel-root footer.site .brand-desc { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 20px; line-height: 1.6; max-width: 320px; }
.pel-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; }
.pel-root footer.site .col-list { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.pel-root footer.site .col-list a { color: rgba(255,255,255,.7); text-decoration: none; }
.pel-root footer.site .col-phone { font-family: ${P_DISPLAY}; font-size: 22px; font-weight: 500; }
.pel-root footer.site .col-mail { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 8px; }
.pel-root footer.site .col-hours { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 16px; line-height: 1.5; }
.pel-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); }
.pel-root footer.site .bottom a { color: inherit; text-decoration: none; }
.pel-root footer.site .bottom .links { display: flex; gap: 24px; }
`;

const PEL_TOWARZYSTWA = [
  { id:'01', nazwa:'Allianz Polska S.A.',                                  folder:'01_ALLIANZ_POLSKA_SA',                           prefix:'ALLIANZ-POLSKA-SA',                    strony:2  },
  { id:'02', nazwa:'Allianz Życie Polska SA',                              folder:'02_ALLIANZ_ZYCIE_POLSKA_SA',                      prefix:'ALLIANZ-ZYCIE-POLSKA-SA',              strony:4  },
  { id:'03', nazwa:'Balcia Insurance SE, Reso Europa Service Sp. z o.o.', folder:'03_BALCIA_INSURANCE_SE_RESO_EUROPA',              prefix:'BALCIA-INSURANCE-SE-RESO-EUROPA',      strony:2  },
  { id:'04', nazwa:'Compensa TU S.A.',                                     folder:'04_COMPENSA_TU_SA',                               prefix:'COMPENSA-TU-SA',                       strony:4  },
  { id:'05', nazwa:'Ergo Hestia',                                          folder:'05_ERGO_HESTIA',                                  prefix:'ERGO-HESTIA',                          strony:5  },
  { id:'06', nazwa:'Ergo Hestia Życie',                                    folder:'06_ERGO_HESTIA_ZYCIE',                           prefix:'ERGO-HESTIA-ZYCIE',                    strony:7  },
  { id:'07', nazwa:'Generali TU SA / Proama',                              folder:'07_GENERALI_TU_SA_PROAMA',                       prefix:'GENERALI-TU-SA-PROAMA',                strony:6  },
  { id:'08', nazwa:'Generali Życie',                                       folder:null,                                              prefix:null,                                   strony:0  },
  { id:'09', nazwa:'Inter Polska SA',                                      folder:'09_INTER_POLSKA_SA',                              prefix:'INTER-POLSKA-SA',                      strony:2  },
  { id:'10', nazwa:'InterRisk TU SA VIG',                                  folder:'10_INTERRISK_TU_SA_VIG',                         prefix:'INTERRISK-TU-SA-VIG',                  strony:1  },
  { id:'11', nazwa:'Inter Życie Polska SA',                                folder:'11_INTER_ZYCIE_POLSKA_SA',                       prefix:'INTER-ZYCIE-POLSKA-SA',                strony:2  },
  { id:'12', nazwa:'Link4',                                                folder:'12_LINK4',                                        prefix:'LINK4',                                strony:6  },
  { id:'13', nazwa:'Lloyds',                                               folder:'13_LLOYDS',                                       prefix:'LLOYDS',                               strony:1  },
  { id:'14', nazwa:'Nationale-Nederlanden TU na Życie SA',                 folder:'14_NATIONALE_NEDERLANDEN_TU_NA_ZYCIE_SA',        prefix:'NATIONALE-NEDERLANDEN-TU-NA-ZYCIE-SA', strony:1  },
  { id:'15', nazwa:'PZU S.A.',                                             folder:'15_PZU_SA',                                       prefix:'PZU-SA',                               strony:7  },
  { id:'16', nazwa:'PZU Życie S.A.',                                       folder:'16_PZU_ZYCIE_SA',                                prefix:'PZU-ZYCIE-SA',                         strony:4  },
  { id:'17', nazwa:'Saltus',                                               folder:'17_SALTUS',                                       prefix:'SALTUS',                               strony:2  },
  { id:'18', nazwa:'Saltus Życie',                                         folder:'18_SALTUS_ZYCIE',                                prefix:'SALTUS-ZYCIE',                         strony:4  },
  { id:'19', nazwa:'Warta',                                                folder:'19_WARTA',                                        prefix:'WARTA',                                strony:1  },
  { id:'20', nazwa:'Warta Życie',                                          folder:'20_WARTA_ZYCIE',                                 prefix:'WARTA-ZYCIE',                          strony:2  },
  { id:'21', nazwa:'Trasti',                                               folder:'21_TRASTI',                                       prefix:'TRASTI',                               strony:2  },
  { id:'22', nazwa:'TUZ Ubezpieczenia',                                    folder:'22_TUZ_UBEZPIECZENIA',                           prefix:'TUZ-UBEZPIECZENIA',                    strony:9  },
  { id:'23', nazwa:'Uniqa TU SA',                                          folder:'23_UNIQA_TU_SA',                                 prefix:'UNIQA-TU-SA',                          strony:12 },
  { id:'24', nazwa:'Uniqa TU na Życie S.A.',                               folder:'24_UNIQA_TU_NA_ZYCIE_SA',                       prefix:'UNIQA-TU-NA-ZYCIE-SA',                 strony:1  },
  { id:'25', nazwa:'Unum Życie TUiR S.A. (Pramerica Życie TUiR S.A.)',    folder:'25_UNUM_ZYCIE_TUiR_SA_PRAMERICA',               prefix:'UNUM-ZYCIE-TUiR-SA-PRAMERICA',         strony:2  },
  { id:'26', nazwa:'Vienna Life',                                          folder:'26_VIENNA_LIFE',                                 prefix:'VIENNA-LIFE',                          strony:2  },
];

function LandingPelnomocnictwa() {
  return (
    <div className="pel-root">
      <style dangerouslySetInnerHTML={{ __html: PEL_STYLES }} />

      {/* HEADER */}
      <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 />
            <a href="/wspolpraca/">Współpraca</a>
            <a href="/pelnomocnictwa/" className="active">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" style={{ textDecoration: 'none', color: 'inherit' }}>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>

      {/* CRUMBS */}
      <div className="crumbs">
        <div className="wrap">
          <a href="/">Strona główna</a>
          <span className="sep">/</span>
          <span className="current">Pełnomocnictwa</span>
        </div>
      </div>

      {/* INTRO — bez baneru, od razu nagłówek */}
      <section className="intro">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="label-kicker">§ Pełnomocnictwa</div>
              <h1>Nasze<br /><em>pełnomocnictwa</em>.</h1>
            </div>
            <p className="lead">
              Dokumenty potwierdzające uprawnienia GOMAR Witwicka do reprezentowania klientów wobec poszczególnych towarzystw ubezpieczeniowych. Kliknij wybraną nazwę, aby otworzyć podstronę z dokumentem do pobrania.
            </p>
          </div>
        </div>
      </section>

      {/* TILES */}
      <section className="tiles-sec">
        <div className="wrap">
          <div className="tiles-head">
            <div className="left">
              <div className="label-kicker" style={{ margin: 0 }}>§ Lista aktywnych pełnomocnictw</div>
            </div>
            <div className="hint">Lista aktualizowana na bieżąco. Brakuje towarzystwa, z którym chcesz pracować? Zadzwoń — sprawdzimy.</div>
          </div>

          <div className="tiles-grid">
            {PEL_TOWARZYSTWA.map((item, i) => (
              <a key={item.id} className="tile" href={`/pelnomocnictwo/?id=${item.id}`} target="_blank" rel="noopener">
                <span className="tile-num">{String(i + 1).padStart(2, '0')}.</span>
                <span className="tile-name">{item.nazwa}</span>
                <span className="tile-arrow" aria-hidden="true">→</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* INFO BAR — jak korzystać */}
      <section className="info-bar">
        <div className="wrap">
          <div className="grid">
            <div className="cell">
              <div className="l">§ Co znajdziesz</div>
              <div className="v">Skan pełnomocnictwa</div>
              <div className="d">Po kliknięciu otwiera się skan dokumentu w pełnym rozmiarze — można go zapisać lub wydrukować.</div>
            </div>
            <div className="cell">
              <div className="l">§ Aktualizacja</div>
              <div className="v">Sukcesywnie</div>
              <div className="d">Dokumenty wymieniamy, gdy otrzymujemy nową wersję z centrali danego towarzystwa.</div>
            </div>
            <div className="cell">
              <div className="l">§ Pytania</div>
              <div className="v">501 43 44 40</div>
              <div className="d">Nie widzisz towarzystwa lub potrzebujesz weryfikacji — zadzwoń do najbliższej placówki.</div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <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.LandingPelnomocnictwa = LandingPelnomocnictwa;