// Gallery, About, Contact, Cookies, GDPR, NotFound

function PageGallery() {
  const [filter, setFilter] = useState('all');
  const [lightbox, setLightbox] = useState(null);
  const sections = useMemo(() => Array.from(new Set(GALLERY.map(g => g.section))), []);
  const items = filter === 'all' ? GALLERY : GALLERY.filter(g => g.section === filter);

  return (
    <>
      <div className="page-head">
        <div className="container">
          <div className="page-head__crumbs">
            <Link to="/">Start</Link> <Icon name="chevron-right" size={11}/> <span>Galeria</span>
          </div>
          <div className="page-head__title">
            <h1>Salony, hurtownia,<br/>i pełka <em style={{ color: 'var(--brand)', fontStyle: 'italic', fontWeight: 380 }}>asortymentu</em>.</h1>
            <p className="page-head__lede">
              Trzy adresy, jeden zespół. Zajrzyj — może łatwiej Ci będzie wybrać kolor,
              kiedy zobaczysz, jak nasz salon wygląda od środka.
            </p>
          </div>
        </div>
      </div>

      <section className="section section--tight">
        <div className="container">
          <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
            <button className={'gal-pill' + (filter === 'all' ? ' is-active' : '')}
              onClick={() => setFilter('all')}>Wszystkie ({GALLERY.length})</button>
            {sections.map(s => (
              <button key={s} className={'gal-pill' + (filter === s ? ' is-active' : '')}
                onClick={() => setFilter(s)}>{s} ({GALLERY.filter(g => g.section === s).length})</button>
            ))}
          </div>

          <div className="gal-masonry">
            {items.map((g, i) => (
              <button key={g.id} className="gal-card" onClick={() => setLightbox(i)}
                style={{ gridRow: `span ${(i % 4 === 0 || i % 4 === 3) ? 2 : 1}` }}>
                <GalleryPlaceholder section={g.section} idx={i}/>
                <div className="gal-card__overlay">
                  <Icon name="maximize" size={20}/>
                </div>
                <div className="gal-card__cap">
                  <span className="text-mono" style={{ fontSize: 10, letterSpacing: '0.16em',
                    textTransform: 'uppercase', opacity: 0.6 }}>{g.section}</span>
                  <span style={{ display: 'block', fontWeight: 500, marginTop: 4 }}>{g.alt}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {lightbox !== null && (
        <div className="gal-lightbox" onClick={() => setLightbox(null)}>
          <button className="gal-lightbox__close" onClick={() => setLightbox(null)}>
            <Icon name="x" size={20}/>
          </button>
          <button className="gal-lightbox__nav gal-lightbox__nav--prev"
            onClick={(e) => { e.stopPropagation(); setLightbox((lightbox - 1 + items.length) % items.length); }}>
            <Icon name="chevron-left" size={24}/>
          </button>
          <div className="gal-lightbox__inner" onClick={e => e.stopPropagation()}>
            <GalleryPlaceholder section={items[lightbox].section} idx={lightbox} large/>
            <div style={{ padding: 24, color: '#fff' }}>
              <div className="text-mono" style={{ fontSize: 11, letterSpacing: '0.16em',
                opacity: 0.6, textTransform: 'uppercase' }}>{items[lightbox].section}</div>
              <h3 style={{ fontSize: 26, color: '#fff', marginTop: 6 }}>{items[lightbox].alt}</h3>
            </div>
          </div>
          <button className="gal-lightbox__nav gal-lightbox__nav--next"
            onClick={(e) => { e.stopPropagation(); setLightbox((lightbox + 1) % items.length); }}>
            <Icon name="chevron-right" size={24}/>
          </button>
        </div>
      )}

      <style>{`
        .gal-pill {
          padding: 8px 14px; font-size: 13px; font-weight: 500;
          background: var(--bg-elev); border: var(--hairline);
          border-radius: 999px; color: var(--ink-2);
          transition: 160ms ease;
        }
        .gal-pill:hover { border-color: var(--ink); color: var(--ink); }
        .gal-pill.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
        .gal-masonry {
          display: grid; grid-template-columns: repeat(4, 1fr);
          grid-auto-rows: 200px; gap: 12px;
        }
        .gal-card {
          position: relative; overflow: hidden;
          border-radius: var(--r-md); border: var(--hairline);
          background: var(--bg-tint);
          padding: 0; cursor: pointer;
        }
        .gal-card__overlay {
          position: absolute; inset: 0;
          background: rgba(20,17,13,0.4);
          display: grid; place-items: center;
          color: #fff; opacity: 0; transition: 200ms ease;
        }
        .gal-card:hover .gal-card__overlay { opacity: 1; }
        .gal-card__cap {
          position: absolute; left: 14px; right: 14px; bottom: 14px;
          color: #fff; text-align: left;
          opacity: 0; transform: translateY(8px); transition: 200ms ease;
          z-index: 1;
        }
        .gal-card:hover .gal-card__cap { opacity: 1; transform: translateY(0); }
        .gal-lightbox {
          position: fixed; inset: 0; z-index: 99;
          background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
          display: grid; place-items: center;
          padding: 40px;
        }
        .gal-lightbox__inner {
          max-width: 1100px; width: 100%;
          background: #1a1a1a; border-radius: var(--r-lg); overflow: hidden;
        }
        .gal-lightbox__close, .gal-lightbox__nav {
          position: absolute; width: 44px; height: 44px; border-radius: 999px;
          border: 0; background: rgba(255,255,255,0.1); color: #fff;
          display: grid; place-items: center; backdrop-filter: blur(8px);
          transition: 200ms ease;
        }
        .gal-lightbox__close { top: 24px; right: 24px; }
        .gal-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
        .gal-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
        .gal-lightbox__close:hover, .gal-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
        @media (max-width: 980px) { .gal-masonry { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .gal-masonry { grid-template-columns: 1fr; } }
      `}</style>
    </>
  );
}

function GalleryPlaceholder({ section, idx, large }) {
  // Stylized placeholder — paint splash composition based on index
  const palettes = [
    ['#E5BE01', '#F44611', '#AF2B1E'],
    ['#2271B3', '#3F888F', '#FDF4E3'],
    ['#4C9141', '#84C3BE', '#293133'],
    ['#924E7D', '#E5BE01', '#FDF4E3'],
    ['#293133', '#FDF4E3', '#FF7514'],
  ];
  const p = palettes[idx % palettes.length];
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(135deg, ${p[0]} 0%, ${p[0]} 40%, ${p[1]} 40%, ${p[1]} 70%, ${p[2]} 70%)`,
      display: 'grid', placeItems: 'center'
    }}>
      <div style={{
        width: large ? '40%' : '50%', aspectRatio: '1',
        background: 'rgba(255,255,255,0.92)', borderRadius: 999,
        display: 'grid', placeItems: 'center', textAlign: 'center', padding: 16,
        boxShadow: '0 30px 60px -20px rgba(0,0,0,0.4)'
      }}>
        <div>
          <Icon name={['paint', 'building', 'palette'][idx % 3]} size={large ? 64 : 32}
            stroke={1.2} style={{ color: '#14110d', marginBottom: 8 }}/>
          <div className="text-mono" style={{ fontSize: large ? 14 : 9, letterSpacing: '0.12em',
            color: '#14110d', textTransform: 'uppercase' }}>{section}</div>
        </div>
      </div>
    </div>
  );
}

// ============= ABOUT =============
function PageAbout() {
  const milestones = [
    { year: '1990', title: 'Pierwszy sklep', desc: 'Andrzej Pałyszka i Stanisław Kaczka otwierają punkt z farbami przy Przemysłowej 12 w Bełchatowie.' },
    { year: '1998', title: 'Hurtownia', desc: 'Powstaje magazyn obsługujący ekipy malarskie i firmy budowlane z całego powiatu.' },
    { year: '2007', title: 'Drugi salon', desc: 'Otwarcie punktu na Os. Słonecznym — pierwszy salon detaliczny z mieszalnikiem RAL.' },
    { year: '2014', title: 'Radomsko', desc: 'Trzeci oddział, partnerstwo strategiczne z Tikkurila Polska.' },
    { year: '2020', title: 'Online', desc: 'Pierwszy katalog cyfrowy z kalkulatorem zużycia farby i zamówieniami B2B.' },
    { year: '2025', title: 'Dziś', desc: '20 osób w trzech oddziałach. 1850 receptur RAL, 2400 produktów na stanie.' },
  ];

  return (
    <>
      <div className="page-head">
        <div className="container">
          <div className="page-head__crumbs">
            <Link to="/">Start</Link> <Icon name="chevron-right" size={11}/> <span>O firmie</span>
          </div>
          <div className="page-head__title">
            <h1>Trzydzieści<br/>pięć lat <em style={{ color: 'var(--brand)', fontStyle: 'italic', fontWeight: 380 }}>w jednym</em><br/>kolorze.</h1>
            <p className="page-head__lede">
              Rodzinna firma F.H.U. Pałyszka &amp; Kaczka. Zaczęliśmy w 1990 roku w starym sklepie
              spożywczym przy Przemysłowej. Dziś jesteśmy autoryzowanym dystrybutorem
              Tikkurila i Beckers w regionie łódzkim.
            </p>
          </div>
        </div>
      </div>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-8)',
            alignItems: 'start' }}>
            <div>
              <span className="eyebrow">Nasze wartości</span>
              <h2 className="h-section" style={{ marginTop: 16, marginBottom: 32 }}>
                Robimy <em>jedną</em> rzecz, <br/>ale solidnie.
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24,
                fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                <p>
                  Nasza firma działa od 1990 roku. Obsługujemy klientów z Bełchatowa, Radomska
                  i całego regionu łódzkiego. Specjalizujemy się w sprzedaży farb, lakierów,
                  tynków strukturalnych i akcesoriów malarskich — dla domu, dla wykonawców
                  i dla przemysłu.
                </p>
                <p>
                  W naszej ofercie znajdziesz produkty od czołowych światowych producentów —
                  Tikkurila, Beckers, Dulux, Dekoral, Teknos, Sika. Mamy własne mieszalniki
                  do farb dekoracyjnych i przemysłowych, dobierzemy każdy odcień na podstawie
                  kodu RAL, NCS lub Twojej próbki.
                </p>
                <p>
                  Co nas wyróżnia? Trzy rzeczy: kompetentni pracownicy z 20-letnim stażem,
                  szybka realizacja zamówień i indywidualne podejście do każdego projektu —
                  niezależnie od tego, czy malujesz pokój dziecka, czy halę produkcyjną.
                </p>
              </div>
            </div>

            <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { icon: 'building', t: 'Trzy oddziały', d: 'Bełchatów × 2, Radomsko' },
                { icon: 'users', t: '20 osób', d: 'średni staż 11 lat' },
                { icon: 'palette', t: '1850 odcieni', d: 'wzornik RAL Classic + Design' },
                { icon: 'truck', t: '3 busy', d: 'dostawa do 30 km tego samego dnia' },
                { icon: 'award', t: 'Autoryzacja', d: 'Tikkurila / Beckers Premium' },
              ].map((s, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 16, alignItems: 'center',
                  padding: 20, background: 'var(--bg-elev)',
                  border: 'var(--hairline)', borderRadius: 'var(--r-md)'
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12,
                    background: 'var(--brand-soft)', color: 'var(--brand)',
                    display: 'grid', placeItems: 'center'
                  }}>
                    <Icon name={s.icon} size={20}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15 }}>{s.t}</div>
                    <div className="text-3" style={{ fontSize: 13 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </aside>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-tint)' }}>
        <div className="container">
          <div style={{ marginBottom: 48 }}>
            <span className="eyebrow">Linia czasu</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>Trzydzieści pięć lat, krok po kroku.</h2>
          </div>
          <div className="timeline">
            {milestones.map((m, i) => (
              <div key={m.year} className="timeline__item">
                <div className="timeline__year">{m.year}</div>
                <div className="timeline__dot"/>
                <div className="timeline__body">
                  <h3 style={{ fontSize: 24, marginBottom: 8 }}>{m.title}</h3>
                  <p className="text-2" style={{ fontSize: 14, lineHeight: 1.55, maxWidth: '46ch' }}>{m.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .timeline { position: relative; padding-left: 24px; }
          .timeline::before {
            content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
            width: 1px; background: var(--line-2);
          }
          .timeline__item {
            display: grid; grid-template-columns: 100px 1fr; gap: 32px;
            padding-block: 24px; align-items: start; position: relative;
          }
          .timeline__year {
            font-family: var(--font-display); font-size: 32px; font-weight: 470;
            font-style: italic; color: var(--brand); line-height: 1;
          }
          .timeline__dot {
            position: absolute; left: -29px; top: 32px;
            width: 11px; height: 11px; border-radius: 999px;
            background: var(--brand); border: 3px solid var(--bg-tint);
          }
        `}</style>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ marginBottom: 48 }}>
            <span className="eyebrow">Marki, którym ufamy</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>Dziesięciu partnerów. Lat partnerstwa: ponad 200.</h2>
          </div>
          <div className="partners-grid">
            {PARTNERS.map(p => (
              <div key={p.name} className="partner-card">
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500,
                  letterSpacing: '-0.02em'
                }}>{p.name}</div>
                <div className="text-mono text-3" style={{ fontSize: 10, letterSpacing: '0.14em',
                  textTransform: 'uppercase', marginTop: 4 }}>{p.tier}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .partners-grid {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
            border-block: var(--hairline);
          }
          .partner-card {
            padding: 32px;
            border-right: var(--hairline);
            border-bottom: var(--hairline);
            transition: 200ms ease;
          }
          .partner-card:hover { background: var(--bg-tint); }
          .partner-card:nth-child(5n) { border-right: 0; }
          .partner-card:nth-last-child(-n+5):not(:nth-child(-n+5)) { border-bottom: 0; }
          @media (max-width: 720px) {
            .partners-grid { grid-template-columns: repeat(2, 1fr); }
            .partner-card:nth-child(5n) { border-right: var(--hairline); }
            .partner-card:nth-child(2n) { border-right: 0; }
          }
        `}</style>
      </section>
    </>
  );
}

// ============= CONTACT =============
function PageContact() {
  return (
    <>
      <div className="page-head">
        <div className="container">
          <div className="page-head__crumbs">
            <Link to="/">Start</Link> <Icon name="chevron-right" size={11}/> <span>Kontakt</span>
          </div>
          <div className="page-head__title">
            <h1>Trzy biura,<br/>jeden <em style={{ color: 'var(--brand)', fontStyle: 'italic', fontWeight: 380 }}>numer</em>.</h1>
            <p className="page-head__lede">
              Zadzwoń, napisz, albo wpadnij — kawa stoi, doradca czeka.
              W weekend dostępny dyżurny numer awaryjny dla budów.
            </p>
          </div>
        </div>
      </div>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'var(--space-7)' }}>
            <div>
              <h2 style={{ fontSize: 32, marginBottom: 24 }}>Napisz do nas</h2>
              <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div>
                    <label className="label">Imię i nazwisko</label>
                    <input className="input" placeholder="Jan Kowalski"/>
                  </div>
                  <div>
                    <label className="label">Telefon</label>
                    <input className="input" placeholder="500 123 456"/>
                  </div>
                </div>
                <div>
                  <label className="label">E-mail</label>
                  <input className="input" type="email" placeholder="jan@example.com"/>
                </div>
                <div>
                  <label className="label">Czego dotyczy zapytanie?</label>
                  <select className="select" defaultValue="produkt">
                    <option value="produkt">Pytanie o produkt</option>
                    <option value="b2b">Współpraca B2B / cennik</option>
                    <option value="wycena">Wycena projektu</option>
                    <option value="reklamacja">Reklamacja</option>
                    <option value="inne">Inne</option>
                  </select>
                </div>
                <div>
                  <label className="label">Wiadomość</label>
                  <textarea className="input" rows={6}
                    placeholder="Maluję mieszkanie 64 m², szukam farby do kuchni z plamoodpornością…"
                    style={{ resize: 'vertical', fontFamily: 'inherit' }}/>
                </div>
                <label style={{ display: 'flex', gap: 10, fontSize: 13, color: 'var(--ink-2)',
                  alignItems: 'start', marginTop: 8 }}>
                  <input type="checkbox" defaultChecked style={{ accentColor: 'var(--brand)', marginTop: 3 }}/>
                  <span>Wyrażam zgodę na przetwarzanie danych osobowych zgodnie z <Link to="/rodo" style={{ textDecoration: 'underline' }}>polityką RODO</Link>.</span>
                </label>
                <button type="submit" className="btn btn--primary btn--lg"
                  style={{ alignSelf: 'flex-start', marginTop: 8 }}>
                  Wyślij wiadomość <Icon name="arrow-right" size={16}/>
                </button>
              </form>
            </div>

            <aside>
              <h2 style={{ fontSize: 32, marginBottom: 24 }}>Adresy</h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {BRANCHES.map(b => <BranchCardCompact key={b.id} b={b}/>)}
              </div>

              <div style={{
                marginTop: 32, padding: 24,
                background: 'var(--ink)', color: 'var(--bg)',
                borderRadius: 'var(--r-lg)'
              }}>
                <div className="text-mono" style={{ fontSize: 11, letterSpacing: '0.16em',
                  opacity: 0.6, textTransform: 'uppercase', marginBottom: 12 }}>
                  Awaria na budowie?
                </div>
                <h3 style={{ fontSize: 22, color: '#fff', marginBottom: 6 }}>Numer dyżurny weekend</h3>
                <a href="tel:+48502263652" style={{
                  fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 500,
                  color: 'var(--accent)', display: 'block', marginTop: 4
                }}>502 263 652</a>
                <p style={{ fontSize: 13, marginTop: 8, color: 'rgba(255,255,255,0.7)' }}>
                  Sob–Niedz 9:00–18:00. Zamówienia awaryjne, doradztwo telefoniczne.
                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </>
  );
}

function BranchCardCompact({ b }) {
  return (
    <div className="card" style={{ padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
        <h3 style={{ fontSize: 20 }}>{b.name}</h3>
        <span className="chip">{b.role}</span>
      </div>
      <p className="text-3" style={{ fontSize: 12, marginBottom: 16 }}>{b.note}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
        <span style={{ display: 'flex', gap: 8 }}>
          <Icon name="pin" size={14} style={{ color: 'var(--brand)', marginTop: 2 }}/>
          {b.address}
        </span>
        <span style={{ display: 'flex', gap: 8 }}>
          <Icon name="phone" size={14} style={{ color: 'var(--brand)', marginTop: 2 }}/>
          <a href={b.phoneHref} style={{ fontWeight: 600 }}>{b.phone}</a>
        </span>
        <span style={{ display: 'flex', gap: 8 }}>
          <Icon name="clock" size={14} style={{ color: 'var(--brand)', marginTop: 2 }}/>
          <span>{b.weekdays} · {b.saturday}</span>
        </span>
      </div>
    </div>
  );
}

// ============= COOKIES / GDPR =============
function PageCookies() {
  return (
    <>
      <div className="page-head">
        <div className="container">
          <div className="page-head__crumbs">
            <Link to="/">Start</Link> <Icon name="chevron-right" size={11}/> <span>Polityka cookies</span>
          </div>
          <div className="page-head__title">
            <h1>Polityka<br/><em style={{ color: 'var(--brand)', fontStyle: 'italic', fontWeight: 380 }}>cookies</em>.</h1>
            <p className="page-head__lede">
              Wyjaśniamy, jakie ciasteczka używamy, po co i jak nimi zarządzasz.
              Bez prawniczego żargonu — w punktach.
            </p>
          </div>
        </div>
      </div>
      <section className="section">
        <div className="container" style={{ maxWidth: 880 }}>
          <LegalSection no="01" title="Co to są cookies" body={
            "Pliki cookies (ciasteczka) to małe fragmenty tekstu, które serwer naszej strony zapisuje na Twoim urządzeniu, kiedy odwiedzasz farby-belchatow.pl. Pomagają one zapamiętać Twoje preferencje (np. wybrany oddział) i mierzyć ruch w sklepie."
          }/>
          <LegalSection no="02" title="Rodzaje cookies, których używamy" body={
            <ul style={{ paddingLeft: 20, lineHeight: 1.8 }}>
              <li><strong>Niezbędne</strong> — bez nich strona nie działa (sesja, koszyk, logowanie B2B).</li>
              <li><strong>Funkcjonalne</strong> — zapamiętują wybrany oddział, ostatnio oglądane produkty.</li>
              <li><strong>Analityczne</strong> — Google Analytics 4. Anonimowo, IP zanonimizowane.</li>
              <li><strong>Marketingowe</strong> — Meta Pixel, Google Ads. Tylko za zgodą.</li>
            </ul>
          }/>
          <LegalSection no="03" title="Jak nimi zarządzać" body={
            "W każdej chwili możesz zmienić swoje preferencje klikając łącze »Ustawienia cookies« w stopce strony. Możesz też wyłączyć ciasteczka w ustawieniach swojej przeglądarki — niektóre funkcje strony mogą wówczas nie działać poprawnie."
          }/>
          <LegalSection no="04" title="Kontakt" body={
            <>Pytania? Napisz na <a href="mailto:rodo@palyszka-kaczka.pl" style={{ textDecoration: 'underline' }}>rodo@palyszka-kaczka.pl</a> albo zadzwoń: 44 633 56 25.</>
          }/>
        </div>
      </section>
    </>
  );
}

function PageGDPR() {
  return (
    <>
      <div className="page-head">
        <div className="container">
          <div className="page-head__crumbs">
            <Link to="/">Start</Link> <Icon name="chevron-right" size={11}/> <span>RODO</span>
          </div>
          <div className="page-head__title">
            <h1>Twoje dane<br/>są <em style={{ color: 'var(--brand)', fontStyle: 'italic', fontWeight: 380 }}>twoje</em>.</h1>
            <p className="page-head__lede">
              Klauzula informacyjna RODO. Co zbieramy, po co, na jak długo, i jak to wszystko cofnąć.
            </p>
          </div>
        </div>
      </div>
      <section className="section">
        <div className="container" style={{ maxWidth: 880 }}>
          <LegalSection no="01" title="Administrator" body={
            "Administratorem Twoich danych osobowych jest F.H.U. Andrzej Pałyszka & Stanisław Kaczka Sp.j., NIP 769-00-12-345, z siedzibą przy ul. Przemysłowej 12, 97-400 Bełchatów."
          }/>
          <LegalSection no="02" title="Cel przetwarzania" body={
            <ul style={{ paddingLeft: 20, lineHeight: 1.8 }}>
              <li>Realizacja zamówienia, dostawa i fakturowanie (art. 6 ust. 1 lit. b RODO)</li>
              <li>Obsługa zgłoszeń kontaktowych i reklamacji (art. 6 ust. 1 lit. b/c RODO)</li>
              <li>Marketing własnych produktów — newsletter (art. 6 ust. 1 lit. a RODO, zgoda)</li>
              <li>Obrona przed roszczeniami i archiwizacja (art. 6 ust. 1 lit. f RODO)</li>
            </ul>
          }/>
          <LegalSection no="03" title="Twoje prawa" body={
            <ul style={{ paddingLeft: 20, lineHeight: 1.8 }}>
              <li>Prawo dostępu, sprostowania, usunięcia danych</li>
              <li>Prawo ograniczenia przetwarzania i przenoszenia</li>
              <li>Prawo wniesienia sprzeciwu wobec przetwarzania</li>
              <li>Prawo cofnięcia zgody w dowolnym momencie</li>
              <li>Prawo skargi do PUODO (Prezes Urzędu Ochrony Danych Osobowych)</li>
            </ul>
          }/>
          <LegalSection no="04" title="Czas przechowywania" body={
            "Dane przechowujemy tylko tak długo, jak to potrzebne — najczęściej przez okres realizacji umowy plus 5 lat (zgodnie z przepisami podatkowymi). Dane marketingowe — do momentu cofnięcia zgody."
          }/>
        </div>
      </section>
    </>
  );
}

function LegalSection({ no, title, body }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '60px 1fr',
      gap: 32, paddingBlock: 32,
      borderTop: 'var(--hairline)', alignItems: 'start'
    }}>
      <div className="text-mono" style={{
        fontSize: 13, letterSpacing: '0.16em', color: 'var(--brand)',
        fontWeight: 600, paddingTop: 4
      }}>{no}</div>
      <div>
        <h3 style={{ fontSize: 28, marginBottom: 16 }}>{title}</h3>
        <div className="text-2" style={{ fontSize: 15, lineHeight: 1.65 }}>{body}</div>
      </div>
    </div>
  );
}

// ============= 404 =============
function PageNotFound() {
  return (
    <section className="section section--loose">
      <div className="container" style={{ textAlign: 'center', maxWidth: 720 }}>
        <span className="eyebrow" style={{ justifyContent: 'center' }}>Błąd 404</span>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(80px, 14vw, 200px)',
          fontWeight: 460, letterSpacing: '-0.04em', lineHeight: 0.9,
          marginTop: 24, marginBottom: 24
        }}>
          Pusta <em style={{ color: 'var(--brand)', fontStyle: 'italic', fontWeight: 380 }}>puszka</em>.
        </h1>
        <p className="lede" style={{ margin: '0 auto 40px', textAlign: 'center' }}>
          Tej strony nie ma w naszym katalogu — może została przeniesiona albo nigdy
          jej nie było. Wróć do startu albo otwórz katalog kolorów.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Link to="/" className="btn btn--primary btn--lg">
            Wróć do strony głównej
          </Link>
          <Link to="/katalog" className="btn btn--ghost btn--lg">
            Otwórz katalog
          </Link>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  PageGallery, PageAbout, PageContact, PageCookies, PageGDPR, PageNotFound
});