/* global React */
const PC = {
  bg: 'rgb(6,11,24)',
  bgDeep: 'rgb(21,19,49)',
  gold: '#E6C79C',
  lavender: 'rgb(186,171,212)',
  muted: 'rgb(78,70,114)',
  white: 'rgb(255,255,255)'
};

// Tri-state cache: undefined = loading, null = fetch failed (use fallback), object = ready.
const _policyCache = { cookies: undefined, polityka: undefined };
function _loadPolicy(key) {
  if (_policyCache[key] !== undefined) return Promise.resolve(_policyCache[key]);
  return fetch('/api/public/content?type=pages&key=' + key, { credentials: 'include' })
    .then((r) => r.json())
    .then(({ item }) => {
      _policyCache[key] = item?.content || null;
      try { window.dispatchEvent(new CustomEvent('luna-policy-loaded', { detail: { key } })); } catch (_) {}
      return _policyCache[key];
    })
    .catch(() => { _policyCache[key] = null; return null; });
}

function PolicyPage({ kind }) {
  const dbKey = kind === 'cookies' ? 'cookies' : 'polityka';
  const [, tick] = React.useState(0);
  React.useEffect(() => {
    _loadPolicy(dbKey).then(() => tick((t) => t + 1));
    const f = (e) => { if (e.detail?.key === dbKey) tick((t) => t + 1); };
    window.addEventListener('luna-policy-loaded', f);
    return () => window.removeEventListener('luna-policy-loaded', f);
  }, [dbKey]);
  const dbData = _policyCache[dbKey];
  // Use DB content if it has the expected shape; otherwise fall back to in-file defaults.
  const fallback = kind === 'cookies' ? COOKIES_CONTENT : PRIVACY_CONTENT;
  const data = (dbData && dbData.sections) ? dbData : fallback;
  return (
    <>
      <section style={{
        position: 'relative', background: PC.bg,
        padding: '180px 24px 80px', overflow: 'hidden'
      }}>
        <div style={{
          position: 'relative', maxWidth: 912, margin: '0 auto',
          display: 'flex', flexDirection: 'column', gap: 24
        }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: PC.muted
          }}>{data.tag}</div>
          <h1 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 52,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: PC.white
          }}>{data.title}</h1>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.7, color: PC.lavender
          }}>{data.lead}</p>
        </div>
      </section>
      <section style={{ background: PC.bg, padding: '40px 24px 80px' }}>
        <div style={{
          maxWidth: 912, margin: '0 auto',
          display: 'flex', flexDirection: 'column', gap: 32
        }}>
          {data.sections.map((s, i) =>
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <h2 style={{
                margin: 0, fontFamily: 'Nunito', fontSize: 22, fontWeight: 600,
                color: PC.white, letterSpacing: '-0.01em'
              }}>{s.h}</h2>
              {s.paragraphs.map((p, j) =>
                <p key={j} style={{
                  margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.75,
                  color: PC.lavender
                }}>{p}</p>
              )}
              {s.list &&
                <ul style={{
                  margin: 0, paddingLeft: 0, listStyle: 'none',
                  display: 'flex', flexDirection: 'column', gap: 10
                }}>
                  {s.list.map((item, k) =>
                    <li key={k} style={{
                      position: 'relative', paddingLeft: 26,
                      fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6, color: PC.lavender
                    }}>
                      <span style={{
                        position: 'absolute', left: 0, top: '0.55em',
                        width: 7, height: 7, borderRadius: '50%', background: PC.gold
                      }} />
                      {item}
                    </li>
                  )}
                </ul>
              }
            </div>
          )}
          <p style={{
            margin: '24px 0 0', paddingTop: 24,
            borderTop: `1px solid ${PC.muted}`,
            fontFamily: 'Nunito', fontSize: 14, color: PC.muted
          }}>Ostatnia aktualizacja: 20 maja 2026.</p>
        </div>
      </section>
    </>
  );
}

const PRIVACY_CONTENT = {
  tag: 'POLITYKA PRYWATNOŚCI',
  title: 'Jak chronimy Twoje dane',
  lead: 'Niniejsza polityka opisuje, w jaki sposób Luna Persona Hermetica gromadzi, przetwarza i chroni dane osobowe użytkowników strony oraz osób korzystających z naszych usług.',
  sections: [
    {
      h: 'Administrator danych',
      paragraphs: [
        'Administratorem Twoich danych osobowych jest Luna Persona Hermetica. W sprawach związanych z ochroną danych możesz skontaktować się z nami pod adresem e-mail: kontakt@lunapersonahermetica.pl.'
      ]
    },
    {
      h: 'Zakres przetwarzanych danych',
      paragraphs: [
        'Przetwarzamy wyłącznie te dane, które są niezbędne do realizacji wybranej usługi lub kontaktu z nami. W zależności od celu mogą to być:'
      ],
      list: [
        'imię i nazwisko oraz dane kontaktowe (e-mail, telefon),',
        'data, godzina i miejsce urodzenia — jeśli korzystasz z konsultacji astrologicznej, numerologicznej lub energetycznej,',
        'treść Twojej wiadomości lub pytania, które do nas kierujesz,',
        'dane techniczne (adres IP, typ urządzenia, przeglądarka) — zbierane automatycznie podczas wizyty na stronie.'
      ]
    },
    {
      h: 'Cele i podstawa prawna',
      paragraphs: [
        'Dane osobowe przetwarzamy w następujących celach:'
      ],
      list: [
        'realizacja zamówionej konsultacji lub usługi (art. 6 ust. 1 lit. b RODO),',
        'udzielenie odpowiedzi na zapytanie kierowane przez formularz lub e-mail (art. 6 ust. 1 lit. f RODO — prawnie uzasadniony interes),',
        'prowadzenie dokumentacji księgowej i podatkowej (art. 6 ust. 1 lit. c RODO),',
        'wysyłka treści informacyjnych — wyłącznie po uprzedniej zgodzie (art. 6 ust. 1 lit. a RODO).'
      ]
    },
    {
      h: 'Okres przechowywania danych',
      paragraphs: [
        'Dane osobowe przechowujemy nie dłużej, niż jest to konieczne do osiągnięcia celu, dla którego zostały zebrane. Dane związane z usługą przechowujemy przez okres jej realizacji oraz przez czas wymagany przepisami prawa. Dane przetwarzane na podstawie zgody — do momentu jej wycofania.'
      ]
    },
    {
      h: 'Twoje prawa',
      paragraphs: [
        'W każdej chwili masz prawo:'
      ],
      list: [
        'uzyskać dostęp do swoich danych i otrzymać ich kopię,',
        'żądać sprostowania, usunięcia lub ograniczenia przetwarzania,',
        'przenieść swoje dane do innego administratora,',
        'wnieść sprzeciw wobec przetwarzania,',
        'wycofać zgodę w dowolnym momencie (nie wpływa to na legalność wcześniejszego przetwarzania),',
        'złożyć skargę do Prezesa Urzędu Ochrony Danych Osobowych.'
      ]
    },
    {
      h: 'Udostępnianie danych',
      paragraphs: [
        'Twoje dane nie są sprzedawane ani udostępniane osobom trzecim w celach marketingowych. Możemy je powierzyć wyłącznie zaufanym podmiotom wspierającym nas technicznie (hosting, obsługa płatności, narzędzia mailingowe) — wyłącznie na podstawie umowy o powierzeniu przetwarzania danych.'
      ]
    },
    {
      h: 'Bezpieczeństwo',
      paragraphs: [
        'Stosujemy odpowiednie środki techniczne i organizacyjne, aby chronić Twoje dane przed nieuprawnionym dostępem, utratą lub zniekształceniem. Połączenie ze stroną jest szyfrowane protokołem HTTPS.'
      ]
    },
    {
      h: 'Zmiany w polityce',
      paragraphs: [
        'Polityka prywatności może być aktualizowana — informacja o ostatniej zmianie znajduje się na dole strony. Korzystanie z serwisu po zmianach oznacza ich akceptację.'
      ]
    }
  ]
};

const COOKIES_CONTENT = {
  tag: 'POLITYKA COOKIES',
  title: 'Pliki cookies na naszej stronie',
  lead: 'Korzystamy z plików cookies oraz podobnych technologii, aby strona działała poprawnie i abyśmy mogli lepiej rozumieć, jak jest używana. Poniżej znajdziesz przejrzysty opis tego, jakie pliki stosujemy i w jakim celu.',
  sections: [
    {
      h: 'Czym są pliki cookies',
      paragraphs: [
        'Cookies to niewielkie pliki tekstowe zapisywane przez przeglądarkę na Twoim urządzeniu, gdy odwiedzasz stronę internetową. Pozwalają one zapamiętać Twoje preferencje, sesję oraz dostarczać anonimowe dane statystyczne pomagające ulepszać serwis.'
      ]
    },
    {
      h: 'Rodzaje cookies, których używamy',
      paragraphs: [
        'Na stronie Luna Persona Hermetica wykorzystujemy następujące kategorie plików cookies:'
      ],
      list: [
        'niezbędne — bez nich strona nie funkcjonuje poprawnie (sesja, zapamiętanie preferencji);',
        'analityczne — pomagają nam zrozumieć, jak użytkownicy poruszają się po stronie i które treści są dla nich najważniejsze;',
        'funkcjonalne — zapamiętują wybory użytkownika (np. język, układ widoku), aby ułatwić korzystanie z serwisu.'
      ]
    },
    {
      h: 'Cookies podmiotów trzecich',
      paragraphs: [
        'Niektóre funkcjonalności strony korzystają z usług dostawców zewnętrznych (np. Google Fonts, narzędzia analityczne). Mogą one zapisywać własne pliki cookies — szczegółowe informacje znajdziesz w politykach prywatności tych dostawców.'
      ]
    },
    {
      h: 'Zarządzanie zgodą',
      paragraphs: [
        'Możesz w każdej chwili zmienić ustawienia cookies w swojej przeglądarce — zablokować ich zapisywanie lub usunąć już zapisane pliki. Wyłączenie części cookies może wpłynąć na działanie strony, np. na dostępność wybranych funkcji.'
      ]
    },
    {
      h: 'Jak wyłączyć cookies',
      paragraphs: [
        'Sposób zarządzania cookies różni się w zależności od przeglądarki. Instrukcje znajdziesz w sekcji „Pomoc" swojej przeglądarki lub na stronach producentów: Chrome, Firefox, Safari, Edge i innych.'
      ]
    },
    {
      h: 'Kontakt',
      paragraphs: [
        'Jeśli masz pytania dotyczące plików cookies lub przetwarzania danych — napisz do nas: kontakt@lunapersonahermetica.pl.'
      ]
    }
  ]
};

Object.assign(window, { PolicyPage });