// kontakt.jsx — Landing "Kontakt" w stylu Wariantu 2
// Eksportuje window.LandingKontakt — wszystkie style scope'owane przez .kont-root

const K2_BRAND = '#1a2c6b';
const K2_BG = '#faf8f3';
const K2_INK = '#15181f';
const K2_MUTED = '#6b6e78';
const K2_LINE = '#e8e4db';
const K2_ACCENT = '#c98a3f';
const K2_DISPLAY = "'Barlow Semi Condensed', system-ui, sans-serif";
const K2_BODY = "'Inter', system-ui, sans-serif";

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

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

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

/* INTRO */
.kont-root .intro { background: ${K2_BG}; border-bottom: 1px solid ${K2_LINE}; }
.kont-root .intro .grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: start; padding: 72px 0 40px; }
.kont-root .intro h1 { font-family: ${K2_DISPLAY}; font-weight: 400; font-size: 84px; line-height: .98; letter-spacing: -.03em; color: ${K2_INK}; margin: 0; }
.kont-root .intro h1 em { font-style: italic; font-weight: 400; color: ${K2_BRAND}; }
.kont-root .intro .lead { font-size: 16px; line-height: 1.6; color: ${K2_MUTED}; margin: 0; }

/* CHANNELS — szybkie kanały */
.kont-root .channels { background: #fff; border-bottom: 1px solid ${K2_LINE}; }
.kont-root .channels .grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid ${K2_LINE}; border-left: 1px solid ${K2_LINE}; }
.kont-root .channel { padding: 32px 28px; border-right: 1px solid ${K2_LINE}; border-bottom: 1px solid ${K2_LINE}; display: flex; flex-direction: column; gap: 8px; background: #fff; text-decoration: none; color: ${K2_INK}; transition: background .18s; }
.kont-root .channel:hover { background: ${K2_BG}; }
.kont-root .channel .l { font-size: 11px; color: ${K2_ACCENT}; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.kont-root .channel .v { font-family: ${K2_DISPLAY}; font-size: 24px; font-weight: 600; color: ${K2_INK}; line-height: 1.15; letter-spacing: -.005em; }
.kont-root .channel .d { font-size: 12.5px; color: ${K2_MUTED}; line-height: 1.5; margin-top: 4px; }

/* FORM SECTION */
.kont-root .form-sec { background: ${K2_BRAND}; color: #fff; padding: 100px 0; border-bottom: 1px solid ${K2_LINE}; }
.kont-root .form-sec .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.kont-root .form-sec .kicker { font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: 24px; }
.kont-root .form-sec h2 { font-family: ${K2_DISPLAY}; font-size: 64px; font-weight: 400; letter-spacing: -.03em; margin: 0; line-height: .98; }
.kont-root .form-sec h2 em { font-style: italic; color: ${K2_ACCENT}; }
.kont-root .form-sec .lead-l { font-size: 17px; color: rgba(255,255,255,.7); margin-top: 28px; line-height: 1.55; max-width: 480px; }
.kont-root .form-sec .pairs { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15); }
.kont-root .form-sec .pairs .l { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.kont-root .form-sec .pairs .v { font-family: ${K2_DISPLAY}; font-size: 22px; font-weight: 500; margin-top: 6px; }
.kont-root .form-sec .pairs .s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; line-height: 1.5; }

.kont-root .form-sec form { background: ${K2_BG}; color: ${K2_INK}; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.kont-root .form-sec form label { font-size: 11px; color: ${K2_MUTED}; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kont-root .form-sec form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kont-root .form-sec form input, .kont-root .form-sec form select, .kont-root .form-sec form textarea { width: 100%; margin-top: 6px; padding: 12px 0; border: 0; border-bottom: 1px solid ${K2_LINE}; font-size: 16px; font-family: inherit; box-sizing: border-box; background: transparent; outline: none; resize: none; color: ${K2_INK}; }
.kont-root .form-sec form select { padding: 12px 0; cursor: pointer; }
.kont-root .form-sec form textarea { font-family: inherit; line-height: 1.5; }
.kont-root .form-sec form button { margin-top: 8px; padding: 18px 24px; background: ${K2_INK}; color: #fff; border: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-family: inherit; cursor: pointer; }
.kont-root .form-sec form .rodo { display: flex; gap: 12px; align-items: flex-start; font-size: 10px; color: ${K2_MUTED}; line-height: 1.55; cursor: pointer; margin-top: 4px; text-transform: none; letter-spacing: normal; font-weight: 400; }
.kont-root .form-sec form .rodo input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: ${K2_BRAND}; }

/* PLACOWKI */
.kont-root .placowki-sec { background: ${K2_BG}; padding: 120px 0; border-bottom: 1px solid ${K2_LINE}; }
.kont-root .placowki-sec .heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.kont-root .placowki-sec h2 { font-family: ${K2_DISPLAY}; font-size: 48px; font-weight: 400; letter-spacing: -.015em; color: ${K2_INK}; margin: 0; line-height: 1.05; }
.kont-root .placowki-sec h2 em { font-style: italic; color: ${K2_BRAND}; }
.kont-root .placowki-sec .heading p { font-size: 15px; color: ${K2_MUTED}; max-width: 400px; line-height: 1.6; margin: 0; }

.kont-root .pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kont-root .pl-map { background: #fff; border: 1px solid ${K2_LINE}; border-radius: 16px; padding: 28px; position: sticky; top: 24px; align-self: start; }
.kont-root .pl-map .map-meta { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 12px; color: ${K2_MUTED}; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.kont-root .pl-map .map-frame { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; border: 1px solid ${K2_LINE}; }
.kont-root .pl-map .map-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.kont-root .pl-list { display: flex; flex-direction: column; gap: 10px; }
.kont-root .pl-card { background: #fff; border: 1px solid ${K2_LINE}; border-radius: 12px; padding: 20px 22px; text-decoration: none; color: ${K2_INK}; display: flex; gap: 18px; align-items: center; cursor: pointer; transition: background .18s, border-color .18s; }
.kont-root .pl-card:hover { background: ${K2_BG}; border-color: ${K2_BRAND}; }
.kont-root .pl-card .pin { width: 36px; height: 36px; border-radius: 8px; background: ${K2_BRAND}; color: #fff; display: flex; align-items: center; justify-content: center; font-family: ${K2_DISPLAY}; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.kont-root .pl-card .body { flex: 1; min-width: 0; }
.kont-root .pl-card .name { font-family: ${K2_DISPLAY}; font-size: 19px; font-weight: 600; color: ${K2_INK}; }
.kont-root .pl-card .adres { font-size: 13px; color: ${K2_MUTED}; margin-top: 2px; }
.kont-root .pl-card .lnk { color: ${K2_INK}; text-decoration: underline; text-decoration-color: ${K2_LINE}; text-underline-offset: 2px; position: relative; z-index: 1; }
.kont-root .pl-card .lnk:hover { color: ${K2_BRAND}; text-decoration-color: ${K2_BRAND}; }
.kont-root .pl-card .arr { display: inline-flex; align-items: center; gap: 5px; align-self: center; flex-shrink: 0; font-family: ${K2_BODY}; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: ${K2_BRAND}; background: ${K2_BG}; border: 1px solid ${K2_LINE}; border-radius: 99px; padding: 7px 12px; transition: all .18s; }
.kont-root .pl-card:hover .arr { background: ${K2_BRAND}; border-color: ${K2_BRAND}; color: #fff; }
.kont-root .pl-phone { margin-top: 12px; padding: 20px 22px; background: ${K2_BRAND}; color: #fff; border-radius: 12px; display: flex; align-items: center; gap: 16px; text-decoration: none; cursor: pointer; transition: filter .2s; }
.kont-root .pl-phone:hover { filter: brightness(1.12); }
.kont-root .pl-phone .ico { width: 40px; height: 40px; border-radius: 99px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.kont-root .pl-phone .l { font-size: 13px; color: rgba(255,255,255,.75); }
.kont-root .pl-phone .v { font-family: ${K2_DISPLAY}; font-size: 22px; font-weight: 700; margin-top: 2px; }

/* GODZINY + FIRMA — pasek pod placówkami */
.kont-root .meta-strip { background: #fff; border-bottom: 1px solid ${K2_LINE}; }
.kont-root .meta-strip .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-top: 1px solid ${K2_LINE}; border-left: 1px solid ${K2_LINE}; }
.kont-root .meta-strip .cell { padding: 36px 32px; border-right: 1px solid ${K2_LINE}; border-bottom: 1px solid ${K2_LINE}; display: flex; flex-direction: column; gap: 10px; }
.kont-root .meta-strip .cell .l { font-size: 11px; color: ${K2_ACCENT}; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.kont-root .meta-strip .cell .v { font-family: ${K2_DISPLAY}; font-size: 22px; font-weight: 500; color: ${K2_INK}; line-height: 1.3; }
.kont-root .meta-strip .cell .d { font-size: 13px; color: ${K2_MUTED}; line-height: 1.55; }
.kont-root .meta-strip .hours { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 14px; color: ${K2_INK}; }
.kont-root .meta-strip .hours .row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px dashed ${K2_LINE}; }
.kont-root .meta-strip .hours .row:last-child { border-bottom: 0; }
.kont-root .meta-strip .hours .day { color: ${K2_MUTED}; letter-spacing: .04em; font-weight: 600; font-size: 12.5px; }
.kont-root .meta-strip .hours .h { font-family: ${K2_DISPLAY}; font-weight: 500; }

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

const KONT_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 nieczynne', 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' },
];

function LandingKontakt() {
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', topic: '', message: '', rodo: false });
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | activation | error
  const [errorMsg, setErrorMsg] = React.useState('');

  const set = (field) => (e) => setForm(f => ({ ...f, [field]: field === 'rodo' ? e.target.checked : e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      setErrorMsg('Uzupełnij wymagane pola: imię, e-mail i wiadomość.');
      setStatus('error');
      return;
    }
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch('https://formsubmit.co/ajax/kobierzynska@witwicka.pl', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          'Imię': form.name,
          'Telefon': form.phone || '—',
          'Email': form.email,
          'Temat': form.topic || '—',
          'Wiadomość': form.message,
          'Zgoda RODO': form.rodo ? 'Tak' : 'Nie',
          _subject: `Zapytanie od ${form.name}${form.topic ? ' — ' + form.topic : ''}`,
          _captcha: 'false',
        }),
      });
      const data = await res.json();
      if (data.success === 'true' || data.success === true) {
        setStatus('ok');
      } else if (typeof data.message === 'string' && data.message.toLowerCase().includes('activation')) {
        setStatus('activation');
      } else {
        throw new Error('send_failed');
      }
    } catch (err) {
      if (err.message !== 'send_failed') {
        setErrorMsg('Brak połączenia z serwerem. Zadzwoń bezpośrednio: 501 43 44 40.');
      } else {
        setErrorMsg('Nie udało się wysłać. Spróbuj ponownie lub zadzwoń: 501 43 44 40.');
      }
      setStatus('error');
    }
  };

  return (
    <div className="kont-root">
      <style dangerouslySetInnerHTML={{ __html: KONT_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/">Pełnomocnictwa</a>
            <a href="/przydatne/">Przydatne</a>
            <a href="/kontakt/" className="active">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">Kontakt</span>
        </div>
      </div>

      {/* INTRO */}
      <section className="intro">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="label-kicker">§ Kontakt</div>
              <h1>Napisz, zadzwoń,<br /><em>wpadnij</em>.</h1>
            </div>
            <p className="lead">
              Wybierz wygodną dla siebie formę kontaktu — formularz, telefon, e-mail albo wizyta w jednej z placówek w Krakowie. Odpisuje konkretna osoba z placówki, nie automat.
            </p>
          </div>
        </div>
      </section>

      {/* CHANNELS */}
      {/* CHANNELS */}
      <section className="channels">
        <div className="grid">
          <a className="channel" href="tel:+48501434440">
            <div className="l">§ Telefon główny</div>
            <div className="v">501 43 44 40</div>
            <div className="d">Jeden numer do wszystkich placówek. Odbieramy w godzinach pracy biur.</div>
          </a>
          <a className="channel" href="#placowki" onClick={e => { e.preventDefault(); document.getElementById('placowki').scrollIntoView({ behavior: 'smooth' }); }}>
            <div className="l">§ E-mail</div>
            <div className="v">per placówka</div>
            <div className="d">Każda placówka ma własny adres — wybierz najbliższą z listy poniżej.</div>
          </a>
          <a className="channel" href="#placowki" onClick={e => { e.preventDefault(); document.getElementById('placowki').scrollIntoView({ behavior: 'smooth' }); }}>
            <div className="l">§ Placówki</div>
            <div className="v">6 lokalizacji w Krakowie</div>
            <div className="d">Wpadnij bez umawiania — przyjmie Cię najbliższy wolny doradca.</div>
          </a>
          <a className="channel" href="#formularz" onClick={e => { e.preventDefault(); document.getElementById('formularz').scrollIntoView({ behavior: 'smooth' }); }}>
            <div className="l">§ Formularz</div>
            <div className="v">Krótkie zapytanie</div>
            <div className="d">Wypełnij — oddzwonimy lub odpiszemy.</div>
          </a>
        </div>
      </section>

      {/* FORM */}
      <section id="formularz" className="form-sec">
        <div className="wrap">
          <div className="grid">
            <div>
              <div className="kicker">§ Zapytanie ofertowe</div>
              <h2>Zostaw numer.<br /><em>Oddzwonimy</em>.</h2>
              <p className="lead-l">
                Bez bota, bez automatu — odpisuje konkretny agent z konkretnej krakowskiej placówki.
              </p>
              <div className="pairs">
                <div>
                  <div className="l">Telefon główny</div>
                  <div className="v">+48 501 43 44 40</div>
                  <div className="s">Linia bezpośrednia, pn–pt 9.00–19.00.</div>
                </div>
                <div>
                  <div className="l">E-mail</div>
                  <div className="v">per placówka</div>
                  <div className="s">Wybierz adres najbliższej placówki z listy poniżej.</div>
                </div>
                <div>
                  <div className="l">Placówki</div>
                  <div className="v">6 w Krakowie</div>
                  <div className="s">Kurdwanów, Prądnik Biały, Ruczaj, Podgórze, Czyżyny, Mogilska.</div>
                </div>
                <div>
                  <div className="l">Godziny pracy</div>
                  <div className="v">9.00–19.00</div>
                  <div className="s">Poniedziałek–piątek. Soboty 9.00–14.00.</div>
                </div>
              </div>
            </div>
            <form onSubmit={handleSubmit}>
              {status === 'ok' ? (
                <div style={{ padding: '32px', background: '#f0fdf4', border: '1px solid #86efac', borderRadius: 4, textAlign: 'center' }}>
                  <div style={{ fontSize: 32, marginBottom: 12 }}>&#10003;</div>
                  <div style={{ fontSize: 18, fontWeight: 600, color: '#15181f', marginBottom: 8 }}>Wiadomość wysłana!</div>
                  <div style={{ fontSize: 14, color: '#6b6e78' }}>Odezwiemy się wkrótce. W pilnych sprawach zadzwoń: <a href="tel:+48501434440" style={{ color: '#1a2c6b' }}>501 43 44 40</a>.</div>
                </div>
              ) : status === 'activation' ? (
                <div style={{ padding: '32px', background: '#fefce8', border: '1px solid #fde047', borderRadius: 4 }}>
                  <div style={{ fontSize: 16, fontWeight: 600, color: '#15181f', marginBottom: 8 }}>Jeszcze jeden krok</div>
                  <div style={{ fontSize: 14, color: '#6b6e78', lineHeight: 1.6 }}>
                    Wysłaliśmy e-mail aktywacyjny na skrzynkę <strong>kobierzynska@witwicka.pl</strong>.
                    Sprawdź folder <strong>SPAM</strong> i kliknij link potwierdzający — następnie wyślij formularz ponownie.
                  </div>
                  <button type="button" onClick={() => setStatus('idle')} style={{ marginTop: 16, padding: '10px 20px', background: '#1a2c6b', color: '#fff', border: 'none', borderRadius: 3, cursor: 'pointer', fontSize: 14 }}>
                    Wróć do formularza
                  </button>
                </div>
              ) : (
                <>
                  <div className="row-2">
                    <div>
                      <label>Imię i nazwisko *</label>
                      <input placeholder="Jan Kowalski" value={form.name} onChange={set('name')} required />
                    </div>
                    <div>
                      <label>Telefon</label>
                      <input placeholder="+48 ___ ___ ___" value={form.phone} onChange={set('phone')} />
                    </div>
                  </div>
                  <div>
                    <label>E-mail *</label>
                    <input type="email" placeholder="jan@example.pl" value={form.email} onChange={set('email')} required />
                  </div>
                  <div>
                    <label>Czego dotyczy zapytanie</label>
                    <select value={form.topic} onChange={set('topic')}>
                      <option value="">— wybierz obszar —</option>
                      <option>Ubezpieczenia komunikacyjne (OC/AC)</option>
                      <option>Ubezpieczenia majątkowe / dom</option>
                      <option>Ubezpieczenia na życie</option>
                      <option>Ubezpieczenia dla biznesu</option>
                      <option>Ubezpieczenia korporacyjne</option>
                      <option>Pomoc przy szkodzie</option>
                      <option>Współpraca / oferta pracy</option>
                      <option>Inny temat</option>
                    </select>
                  </div>
                  <div>
                    <label>Wiadomość *</label>
                    <textarea rows={4} placeholder="Opisz krótko, w czym możemy pomóc — marka i model auta, typ nieruchomości, charakter firmy itp." value={form.message} onChange={set('message')} required />
                  </div>
                  {status === 'error' && (
                    <div style={{ fontSize: 13, color: '#b91c1c', padding: '10px 14px', background: '#fef2f2', border: '1px solid #fca5a5', borderRadius: 4 }}>
                      {errorMsg}
                    </div>
                  )}
                  <button type="submit" disabled={status === 'sending'} style={{ opacity: status === 'sending' ? 0.6 : 1, cursor: status === 'sending' ? 'wait' : 'pointer' }}>
                    {status === 'sending' ? 'Wysyłanie…' : 'Wyślij zapytanie →'}
                  </button>
                  <label className="rodo">
                    <input type="checkbox" checked={form.rodo} onChange={set('rodo')} />
                    <span>Wyrażam zgodę na przetwarzanie moich danych osobowych przez GOMAR Małgorzata Witwicka w celu kontaktu zwrotnego, zgodnie z RODO. Podanie danych jest dobrowolne, zgodę mogę wycofać w każdej chwili.</span>
                  </label>
                </>
              )}
            </form>
          </div>
        </div>
      </section>

      {/* PLACOWKI */}
      <section id="placowki" className="placowki-sec">
        <div className="wrap">
          <div className="heading">
            <div>
              <div className="label-kicker">§ Placówki</div>
              <h2>Wybierz <em>najbliższą</em>.</h2>
            </div>
            <p>6 placówek w Krakowie — wybierz najbliższą. Wpadnij na rozmowę, kawę i konkretną ofertę — bez umawiania się tygodniami z wyprzedzeniem.</p>
          </div>

          <div className="pl-grid">
            <div className="pl-map">
              <div className="map-meta">
                <span>Kraków</span>
                <span>6 lokalizacji</span>
              </div>
              <div className="map-frame">
                <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>

            <div>
              <div className="pl-list">
                {KONT_PLACOWKI.map((p, i) => {
                  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, '');
                  return (
                  <div key={i} className="pl-card" onClick={() => window.open(mapsUrl, '_blank', 'noopener')} role="link" tabIndex={0} title="Wyznacz trasę w Google Maps" style={{ opacity: p.closed ? .55 : 1 }}>
                    <div className="pin" style={{ background: p.closed ? '#9a9a9a' : undefined }}>{i + 1}</div>
                    <div className="body">
                      <div className="name">{p.dz}{p.closed ? ' — tymczasowo zamknięte' : ''}</div>
                      <div className="adres">{p.adres}</div>
                      <div className="adres" style={{ marginTop: 4 }}>{p.godz}</div>
                      <div className="adres" style={{ marginTop: 4 }}>
                        tel. <a className="lnk" href={telHref(p.tel)} onClick={(e) => e.stopPropagation()}>{p.tel}</a>
                        {p.tel2 ? <>, <a className="lnk" href={telHref(p.tel2)} onClick={(e) => e.stopPropagation()}>{p.tel2}</a></> : ''}
                        {' · '}
                        <a className="lnk" href={`mailto:${p.mail}`} onClick={(e) => e.stopPropagation()}>{p.mail}</a>
                      </div>
                    </div>
                    <a className="arr" href={mapsUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}><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>
                  );
                })}
              </div>
              <a className="pl-phone" href="tel:+48501434440">
                <div className="ico">
                  <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 className="l">Wszystkie placówki: jeden numer</div>
                  <div className="v">+48 501 43 44 40</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* META STRIP */}
      <section className="meta-strip">
        <div className="wrap">
          <div className="grid">
            <div className="cell">
              <div className="l">§ Godziny pracy biur</div>
              <div className="hours">
                <div className="row"><span className="day">Poniedziałek – piątek (zależy od placówki)</span><span className="h">9.00 – 19.00</span></div>
                <div className="row"><span className="day">Sobota (zależy od placówki)</span><span className="h">9.00 – 14.00</span></div>
                <div className="row"><span className="day">Niedziela</span><span className="h">nieczynne</span></div>
              </div>
              <div className="d">Godziny dotyczą wszystkich placówek z wyjątkiem Podgórza (tymczasowo zamknięte).</div>
            </div>
            <div className="cell">
              <div className="l">§ Dane firmy</div>
              <div className="v">GOMAR<br />Małgorzata Witwicka</div>
              <div className="d">Multiagencja ubezpieczeniowa, est. 1992.<br />Dane rejestrowe dostępne w placówkach.</div>
            </div>
            <div className="cell">
              <div className="l">§ Nadzór</div>
              <div className="v">Komisja Nadzoru Finansowego</div>
              <div className="d">Działalność agencyjna w zakresie ubezpieczeń — zgodnie z wpisem do rejestru agentów prowadzonego przez KNF.</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.LandingKontakt = LandingKontakt;