// wspolpraca.jsx — Landing "Współpraca" w stylu Wariantu 2
// Eksportuje window.LandingWspolpraca — wszystkie style scope'owane przez .wsp-root

const W_BRAND = '#1a2c6b';
const W_BG = '#faf8f3';
const W_INK = '#15181f';
const W_MUTED = '#6b6e78';
const W_LINE = '#e8e4db';
const W_ACCENT = '#c98a3f';
const W_DISPLAY = "'Barlow Semi Condensed', system-ui, sans-serif";
const W_BODY = "'Inter', system-ui, sans-serif";

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

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

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

/* HERO */
.wsp-root .hero { background: ${W_BG}; border-bottom: 1px solid ${W_LINE}; position: relative; overflow: hidden; }
.wsp-root .hero .grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: center; padding: 80px 0 100px; }
.wsp-root .hero h1 { font-family: ${W_DISPLAY}; font-weight: 400; font-size: 96px; line-height: .98; letter-spacing: -.035em; color: ${W_INK}; margin: 0; }
.wsp-root .hero h1 em { font-style: italic; font-weight: 400; color: ${W_BRAND}; }
.wsp-root .hero .lead { font-size: 17px; line-height: 1.55; color: ${W_MUTED}; max-width: 540px; margin: 40px 0 0; }
.wsp-root .hero .image-col { position: relative; align-self: stretch; }
.wsp-root .hero .image-col img { width: 100%; height: auto; display: block; }

/* STATS strip — mirrors homepage V2Stats */
.wsp-root .stats { background: #fff; border-bottom: 1px solid ${W_LINE}; }
.wsp-root .stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 64px 0 56px; }
.wsp-root .stats .cell { padding-left: 0; }
.wsp-root .stats .cell + .cell { border-left: 1px solid ${W_LINE}; padding-left: 32px; }
.wsp-root .stats .n { font-family: ${W_DISPLAY}; font-size: 56px; font-weight: 400; color: ${W_INK}; line-height: 1; letter-spacing: -.02em; }
.wsp-root .stats .n .dot { color: ${W_ACCENT}; }
.wsp-root .stats .l { font-size: 13px; color: ${W_MUTED}; margin-top: 10px; letter-spacing: .04em; }

/* DOSKONALENIE (why) */
.wsp-root .why { background: #fff; padding: 120px 0; border-bottom: 1px solid ${W_LINE}; }
.wsp-root .why .grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 100px; align-items: start; }
.wsp-root .why h2 { font-family: ${W_DISPLAY}; font-size: 56px; font-weight: 400; letter-spacing: -.025em; color: ${W_INK}; margin: 0; line-height: 1.05; }
.wsp-root .why h2 em { font-style: italic; color: ${W_BRAND}; }
.wsp-root .why .copy { font-size: 17px; line-height: 1.7; color: ${W_INK}; }
.wsp-root .why .copy p { margin: 0 0 24px; }
.wsp-root .why .copy .pull { font-family: ${W_DISPLAY}; font-size: 26px; line-height: 1.35; font-style: italic; color: ${W_INK}; font-weight: 400; margin: 0 0 32px; }
.wsp-root .why .bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 36px 0 0; padding-top: 32px; border-top: 1px solid ${W_LINE}; list-style: none; padding-left: 0; }
.wsp-root .why .bullets li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; color: ${W_INK}; }
.wsp-root .why .bullets li::before { content: '✓'; color: ${W_ACCENT}; font-weight: 700; flex: 0 0 auto; }

/* OFFER LIST (Co oferujemy partnerom) */
.wsp-root .offer { background: ${W_BG}; padding: 120px 0; border-bottom: 1px solid ${W_LINE}; }
.wsp-root .offer .heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; }
.wsp-root .offer h2 { font-family: ${W_DISPLAY}; font-size: 56px; font-weight: 400; letter-spacing: -.025em; margin: 0; line-height: 1.05; }
.wsp-root .offer h2 em { font-style: italic; color: ${W_BRAND}; font-weight: 400; }
.wsp-root .offer .heading p { font-size: 15px; color: ${W_MUTED}; max-width: 380px; line-height: 1.6; margin: 0; }
.wsp-root .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid ${W_LINE}; border-left: 1px solid ${W_LINE}; background: #fff; }
.wsp-root .offer-card { padding: 36px 32px 36px 36px; border-right: 1px solid ${W_LINE}; border-bottom: 1px solid ${W_LINE}; background: #fff; display: flex; flex-direction: column; gap: 14px; position: relative; transition: background .2s; }
.wsp-root .offer-card:hover { background: #fdfcf7; }
.wsp-root .offer-card .num { font-family: ${W_DISPLAY}; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: ${W_BRAND}; }
.wsp-root .offer-card h3 { font-family: ${W_DISPLAY}; font-size: 24px; font-weight: 500; margin: 0; line-height: 1.2; letter-spacing: -.005em; color: ${W_INK}; }
.wsp-root .offer-card h3 em { font-style: italic; color: ${W_BRAND}; font-weight: 400; }
.wsp-root .offer-card p { font-size: 14.5px; line-height: 1.6; color: ${W_MUTED}; margin: 0; }
.wsp-root .offer-card .arrow { position: absolute; top: 32px; right: 32px; color: ${W_BRAND}; opacity: .25; font-size: 16px; }

/* CTA INLINE */
.wsp-root .cta-inline { background: ${W_BG}; padding: 80px 0; border-bottom: 1px solid ${W_LINE}; }
.wsp-root .cta-inline .card { background: ${W_BRAND}; color: #fff; padding: 56px 64px; display: flex; justify-content: space-between; align-items: center; gap: 56px; position: relative; }
.wsp-root .cta-inline .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: ${W_ACCENT}; }
.wsp-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; }
.wsp-root .cta-inline h3 { font-family: ${W_DISPLAY}; font-size: 40px; font-weight: 400; letter-spacing: -.02em; margin: 0; line-height: 1.1; max-width: 640px; color: #fff; }
.wsp-root .cta-inline h3 em { font-style: italic; color: ${W_ACCENT}; }
.wsp-root .cta-inline .btns { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; align-items: stretch; min-width: 240px; }
.wsp-root .cta-inline .btn-primary { background: #fff; color: ${W_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; font-family: ${W_BODY}; }
.wsp-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; }

/* JOB TILES — kompaktowa sekcja oferty pracy */
.wsp-root .job-tiles { background: #fff; padding: 120px 0; border-bottom: 1px solid ${W_LINE}; }
.wsp-root .job-tiles .heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; }
.wsp-root .job-tiles h2 { font-family: ${W_DISPLAY}; font-size: 56px; font-weight: 400; letter-spacing: -.025em; margin: 0; line-height: 1.05; color: ${W_INK}; }
.wsp-root .job-tiles h2 em { font-style: italic; color: ${W_BRAND}; font-weight: 400; }
.wsp-root .job-tiles .heading p { font-size: 15px; color: ${W_MUTED}; max-width: 420px; line-height: 1.6; margin: 0; }
.wsp-root .job-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid ${W_LINE}; border-left: 1px solid ${W_LINE}; background: ${W_BG}; }
.wsp-root .job-grid .offer-card { background: ${W_BG}; border-right: 1px solid ${W_LINE}; border-bottom: 1px solid ${W_LINE}; transition: background .2s; }
.wsp-root .job-grid .offer-card:hover { background: #fff; }

/* KONTAKT */
.wsp-root .kontakt-sec { background: ${W_BRAND}; color: #fff; padding: 100px 0; }
.wsp-root .kontakt-sec .grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; }
.wsp-root .kontakt-sec .kicker { font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: 24px; }
.wsp-root .kontakt-sec h2 { font-family: ${W_DISPLAY}; font-size: 72px; font-weight: 400; letter-spacing: -.03em; margin: 0; line-height: .98; }
.wsp-root .kontakt-sec h2 em { font-style: italic; color: ${W_ACCENT}; }
.wsp-root .kontakt-sec .lead { font-size: 17px; color: rgba(255,255,255,.7); margin-top: 28px; line-height: 1.55; max-width: 480px; }
.wsp-root .kontakt-sec .row { margin-top: 40px; display: flex; gap: 48px; }
.wsp-root .kontakt-sec .row .l { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.wsp-root .kontakt-sec .row .v { font-family: ${W_DISPLAY}; font-size: 26px; font-weight: 500; margin-top: 6px; }
.wsp-root .kontakt-sec form { background: ${W_BG}; color: ${W_INK}; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.wsp-root .kontakt-sec form label { font-size: 11px; color: ${W_MUTED}; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.wsp-root .kontakt-sec form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wsp-root .kontakt-sec form input, .wsp-root .kontakt-sec form select, .wsp-root .kontakt-sec form textarea { width: 100%; margin-top: 6px; padding: 12px 0; border: 0; border-bottom: 1px solid ${W_LINE}; font-size: 16px; font-family: inherit; box-sizing: border-box; background: transparent; outline: none; resize: none; color: ${W_INK}; }
.wsp-root .kontakt-sec form textarea { font-family: inherit; line-height: 1.5; }
.wsp-root .kontakt-sec form button { margin-top: 8px; padding: 18px 24px; background: ${W_INK}; color: #fff; border: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-family: inherit; cursor: pointer; }
.wsp-root .kontakt-sec form .rodo { display: flex; gap: 12px; align-items: flex-start; font-size: 11.5px; color: ${W_MUTED}; line-height: 1.5; cursor: pointer; margin-top: 4px; }
.wsp-root .kontakt-sec form .rodo input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: ${W_BRAND}; }

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

const WSP_BENEFITS = [
  { num: '01', tytul: 'Bezpośrednie rozliczanie', desc: 'W naszej firmie, w jednej z pięciu placówek na terenie Krakowa.' },
  { num: '02', tytul: 'Sieć rośnie poza Kraków', desc: 'W niedalekiej przyszłości otwarcie kolejnych punktów partnerskich poza stolicą Małopolski.' },
  { num: '03', tytul: 'Szeroka gama produktów', desc: 'Sprzedaż produktów największych towarzystw ubezpieczeniowych pracujących z multiagencjami.' },
  { num: '04', tytul: 'Profesjonalne szkolenia', desc: 'Szkolenia organizowane specjalnie dla naszych pracowników i podmiotów współpracujących, dostosowane do aktualnych potrzeb.' },
  { num: '05', tytul: 'Łatwiejsza współpraca z ubezpieczycielami', desc: 'Ograniczenie do minimum procedur związanych z rozliczeniami z towarzystwami ubezpieczeniowymi.' },
  { num: '06', tytul: 'Wsparcie merytoryczne', desc: 'Dedykowany kontakt do osoby, która zna produkty i procedury — bez infolinii i automatów.' },
  { num: '07', tytul: 'Promocja działalności', desc: 'Promocja działalności wynikająca z przynależności do jednej z największych multiagencji ubezpieczeniowych w Małopolsce.' },
  { num: '08', tytul: 'Godne wynagrodzenie', desc: 'Wysokie stawki prowizyjne oraz grono przyjaznych współpracowników nastawionych na wspólny sukces.' },
];

// Lokalizacje placówek wymienione na podstronie Współpraca w oryginale.
// Pełne adresy znajdują się na podstronie Kontakt (kontakt.jsx).
const WSP_PLACOWKI = [
  { nr: 1, name: 'Ruczaj' },
  { nr: 2, name: 'Kurdwanów' },
  { nr: 3, name: 'Czyżyny' },
  { nr: 4, name: 'Prądnik Biały' },
];

function LandingWspolpraca() {
  return (
    <div className="wsp-root">
      <style dangerouslySetInnerHTML={{ __html: WSP_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/" className="active">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" 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">Współpraca</span>
        </div>
      </div>

      {/* HERO */}
      <section className="hero">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="label-kicker">§ Dla agentów i multiagencji</div>
              <h1>Współpracuj<br />z <em>najlepszymi</em>.</h1>
              <p className="lead">
                Multiagencja Małgorzaty Witwickiej jest trwałym punktem na mapie ubezpieczeń majątkowych i życiowych w województwie małopolskim. Otwieramy się na nowe partnerstwa i ludzi, którzy chcą rozwijać się w branży.
              </p>
            </div>
            <div className="image-col">
              <img src="/assets/wspolpraca-zespol.webp" alt="Zespół GOMAR — współpraca" />
            </div>
          </div>
        </div>
      </section>

      {/* STATS — same rhythm as homepage */}
      <section className="stats">
        <div className="wrap">
          <div className="grid">
            <div className="cell"><div className="n">1992<span className="dot">.</span></div><div className="l">rok założenia firmy</div></div>
            <div className="cell"><div className="n">25+</div><div className="l">agentów na pełen etat</div></div>
            <div className="cell"><div className="n">6</div><div className="l">placówek w Krakowie</div></div>
            <div className="cell"><div className="n">1998<span className="dot">.</span></div><div className="l">od kiedy w branży ubezpieczeniowej</div></div>
          </div>
        </div>
      </section>

      {/* DOSKONALENIE */}
      <section className="why">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="label-kicker">§ Ciągłe doskonalenie</div>
              <h2>Ponad 30 lat w branży — i dalej <em>uczymy się</em> rynku.</h2>
            </div>
            <div className="copy">
              <p className="pull">
                „Ponad trzydzieści lat w branży to z pewnością duży atut, a wciąż odnoszone sukcesy stanowią o nieustannym rozwoju firmy."
              </p>
              <p>
                Nasza agencja jest zaufanym partnerem biznesowym dla wielu — zarówno małych, jak i większych firm w całym województwie. Sześć lokalizacji w Krakowie umożliwia szybki kontakt, kompetentni pracownicy służą fachową pomocą, a przepływ informacji jest optymalnie udoskonalony.
              </p>
              <ul className="bullets">
                <li>Trwały punkt na mapie ubezpieczeń majątkowych i życiowych</li>
                <li>Zaufany partner biznesowy dla firm w całej Małopolsce</li>
                <li>Sześć lokalizacji w Krakowie — szybki kontakt</li>
                <li>Sprawny przepływ informacji w całym zespole</li>
                <li>Bardzo dobra reputacja — można nas sprawdzić</li>
                <li>Ugruntowana pozycja na lokalnym rynku</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* OFFER (Co oferujemy partnerom) */}
      <section className="offer">
        <div className="wrap">
          <div className="heading">
            <div>
              <div className="label-kicker">§ Ugruntowana pozycja</div>
              <h2>Podmiotom, które nawiążą z nami współpracę, <em>oferujemy</em>:</h2>
            </div>
            <p>Naszym celem jest nawiązywanie współpracy z multiagencjami w całym regionie. Poniżej osiem rzeczy, które masz po naszej stronie — od pierwszego dnia.</p>
          </div>

          <div className="offer-grid">
            {WSP_BENEFITS.map(b => (
              <article key={b.num} className="offer-card">
                <span className="arrow">→</span>
                <span className="num">{b.num}.</span>
                <h3>{b.tytul}</h3>
                <p>{b.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-inline">
        <div className="wrap">
          <div className="card">
            <div>
              <div className="kicker">§ Dla agentów ubezpieczeniowych</div>
              <h3>Jesteś agentem? <em>Świetnie orientujesz się w branży ubezpieczeniowej?</em></h3>
            </div>
            <div className="btns">
              <a className="btn-primary" href="/kontakt/">Kontaktuj się z nami <span aria-hidden="true">→</span></a>
              <a className="btn-ghost" href="tel:+48501434440">+48 501 43 44 40</a>
            </div>
          </div>
        </div>
      </section>

      {/* OFERTA PRACY — kompaktowe kafelki */}
      <section id="oferta-pracy" className="job-tiles">
        <div className="wrap">
          <div className="heading">
            <div>
              <div className="label-kicker">§ Oferta pracy</div>
              <h2>Szukamy <em>do zespołu</em>.</h2>
            </div>
            <p>Zatrudniamy już 20 agentów na pełnym etacie w pięciu krakowskich biurach. Szukamy ludzi z doświadczeniem w branży ubezpieczeniowej, którzy chcą spełniać się w bezpośredniej pracy z klientem.</p>
          </div>

          <div className="job-grid">
            <article className="offer-card">
              <span className="arrow">→</span>
              <span className="num">01.</span>
              <h3>Opis <em>stanowiska</em></h3>
              <p>Bezpośrednia obsługa klientów w multiagencji — doradztwo w zakresie oferowanych produktów i aktywna sprzedaż. Praca biurowa, nie akwizycja.</p>
            </article>
            <article className="offer-card">
              <span className="arrow">→</span>
              <span className="num">02.</span>
              <h3>Czego <em>oczekujemy</em></h3>
              <p>Minimum 12-miesięczne doświadczenie w sprzedaży ubezpieczeń, otwartość na bezpośredni kontakt z klientem, gotowość do rozwoju w branży.</p>
            </article>
            <article className="offer-card">
              <span className="arrow">→</span>
              <span className="num">03.</span>
              <h3>Co <em>oferujemy</em></h3>
              <p>Pełny etat na umowę o pracę, rozbudowany system premiowania, szerokie szkolenia, benefity pozapłacowe i dobra atmosfera pracy.</p>
            </article>
          </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.LandingWspolpraca = LandingWspolpraca;