/* global React, SERVICES, ServiceCard, ExpertShort, BtnSecond, RoundArrow, expertHref, DisciplineIllustration */
const { useState } = React;

const DC = {
  bg: 'rgb(6,11,24)',
  bgDeep: 'rgb(21,19,49)',
  gold: '#E6C79C',
  goldDark: '#9E7B4B',
  lavender: 'rgb(186,171,212)',
  muted: 'rgb(78,70,114)',
  peach: 'rgb(255,180,111)',
  white: 'rgb(255,255,255)',
  violet: 'rgba(59,39,172,0.5)'
};

// ────────── DISCIPLINES CONFIG ──────────
// Each discipline carries every per-page string + the SERVICES key + responsible experts.
const DISCIPLINES = {
  TAROT: {
    label: 'Tarot',
    servicesKey: 'Tarot',
    heroTitle: 'Tarot jako lustro\nTwojej rzeczywistości',
    heroIntro: 'Znajdź odpowiedzi dzięki analizom i konsultacjom prowadzonym przez doświadczonych ekspertów.',
    wstepHeadline: 'Tarot to nie jest przewidywanie przyszłości. To spotkanie z tym, co już w Tobie jest – tylko jeszcze nienazwane.  Spotkanie z tym, co niewidoczne.',
    wstepBody: 'Karty działają jak lustro. Pokazują to, co czujesz, ale czego czasem nie potrafisz uchwycić albo dopuścić do głosu. To przestrzeń, w której możesz zatrzymać się na chwilę i spojrzeć na swoją sytuację z innej perspektywy. Bez ocen. Bez presji. Z uważnością. Często to właśnie w tym zatrzymaniu pojawiają się odpowiedzi.',
    dlaKogoTitle: <>Dla osób, które stoją<br />przed decyzją</>,
    dlaKogoIcons: [
      'assets/dlakogo/icon-1.svg',
      'assets/dlakogo/icon-2.svg',
      'assets/dlakogo/icon-3.svg',
      'assets/dlakogo/icon-4.svg'
    ],
    dlaKogoItems: [
      { title: 'Gdy nie wiesz, którą drogę wybrać', body: 'Tarot pomaga zobaczyć możliwości i ich konsekwencje. Dla osób w emocjach i chaosie.' },
      { title: 'Kiedy czujesz dużo, ale trudno to uporządkować', body: 'Karty pomagają nazwać to, co się w Tobie dzieje. Dla osób szukających odpowiedzi.' },
      { title: 'Jeśli masz pytania, które wracają', body: 'Tarot daje wgląd i kierunek.' },
      { title: 'Dla osób pracujących nad sobą', body: 'To narzędzie, które pogłębia świadomość i pomaga lepiej rozumieć swoje schematy.' }
    ],
    experts: ['Konstancja Zahmala Lumia', 'Karolina Mardoll Kułakowska'],
    coObejmujeHeadline: 'To indywidualna praca oparta na Twoim pytaniu, energii i aktualnej sytuacji.',
    coObejmujeBody: 'Każda sesja jest inna, bo inny jest człowiek, który na nią przychodzi. Pracujemy w rytmie, który pozwala na spokojne przyjrzenie się temu, co dla Ciebie najważniejsze.',
    coObejmujePoints: [
      { title: 'Wgląd w Twoją sytuację', body: 'Zobaczysz, co naprawdę dzieje się „pod powierzchnią".' },
      { title: 'Zrozumienie emocji i mechanizmów', body: 'Karty pomagają nazwać to, co trudne do uchwycenia.' },
      { title: 'Możliwe kierunki i scenariusze', body: 'Zyskasz szerszą perspektywę na swoje wybory.' },
      { title: 'Wskazówki na dalsze kroki', body: 'Delikatne prowadzenie, które pomaga podjąć decyzję bardziej świadomie.' }
    ],
    ctaTitle: 'Zobacz wyraźniej to, co się dzieje',
    ctaBody: 'Jeśli czujesz, że to dobry moment, aby przyjrzeć się swojej sytuacji głębiej, zacznij od Tarota. Zobacz wszystkie usługi albo skontaktuj się z nami — pomożemy dobrać najlepszy punkt wyjścia.'
  },

  RUNY: {
    label: 'Runy',
    servicesKey: 'Runy',
    heroTitle: 'Wzmocnij swoją intencję korzystając z bindrun',
    heroIntro: 'Praca z runami i talizmanami u doświadczonego runisty.',
    wstepHeadline: 'Runy to litery składowe starszego Futhark czyli alfabetu historycznych ludów nordyckich.',
    wstepBody: 'Słowo Runa oznacza dosłownie — tajemnicę. Od setek a nawet tysięcy lat wykorzystywano je nie tylko do pisania lecz głównie do działań ezoterycznych czy dywinacji, tworzeniu symboli ochronnych oraz intencyjnych bindrun. Każda z 24 run starszego Futharku niesie ze sobą inną energię, znaczenie i wspomaga w różnych intencjach. Odpowiednie, zgodne ze sztuką połączenie z sobą (w jeden spójny znak) kilku run, tak by energetycznie były użyteczne w konkretnej intencji nazywamy runą wiązaną lub Bindruną.',
    dlaKogoTitle: <>Dla osób, które chcą pracować z&nbsp;intencją, szukających ochrony i wzmocnienia.</>,
    dlaKogoIcons: [
      'assets/dlakogo/runy-1.svg',
      'assets/dlakogo/runy-2.svg',
      'assets/dlakogo/runy-3.svg',
      'assets/dlakogo/runy-4.svg'
    ],
    dlaKogoItems: [
      { title: 'Gdy czujesz, że chcesz nadać symboliczne wsparcie swojej intencji', body: 'Runy pomagają nadać energii konkretny kierunek i formę.' },
      { title: 'Kiedy potrzebujesz wsparcia energetycznego', body: 'Bindruny mogą wspierać proces ochrony, odwagi oraz stabilizacji.' },
      { title: 'Jeśli chcesz świadomie wpływać na swoją rzeczywistość', body: 'Praca z runami pomaga skupić energię na konkretnym celu i działaniu.' },
      { title: 'Gdy czujesz połączenie z energią run', body: 'To przestrzeń do głębszego poznania ich znaczenia oraz energii.' }
    ],
    experts: ['Tomasz Buniek'],
    coObejmujeHeadline: 'To indywidualna praca oparta na Twojej intencji, potrzebie oraz energii, z którą przychodzisz.',
    coObejmujeBody: 'Każda bindruna tworzona jest świadomie, zgodnie z zasadami pracy z runami, tak aby wspierała konkretny obszar życia lub proces, przez który przechodzisz. Runy nie są przypadkowymi literami starożytnego alfabetu — to symbole niosące określoną energię i znaczenie. Ich zadaniem jest wzmacnianie intencji, ukierunkowanie działania oraz wspieranie zmian na poziomie energetycznym i wewnętrznym. Runista musi czuć wewnętrzną więź z runami, umieć odczuwać i wykorzystywać ich energię.',
    coObejmujePoints: [
      { title: 'Tworzenie indywidualnej Bindruny', body: 'Otrzymasz symbol stworzony specjalnie pod Twoją intencję i potrzeby oraz poznasz jego znaczenie energetyczne. Dowiesz się jak z niego korzystać.' },
      { title: 'Praca z energią run', body: 'Poznasz znaczenie konkretnych run oraz ich wpływ na obszary życia.' },
      { title: 'Symbole ochronne i wzmacniające', body: 'Runy mogą wspierać ochronę energetyczną, pewność siebie i wewnętrzną siłę.' },
      { title: 'Ukierunkowanie intencji', body: 'Bindruny pomagają skupić energię na konkretnym celu oraz działaniu.' },
      { title: 'Świadoma praca z symbolami', body: 'To nie tylko symbol — to narzędzie wspierające proces zmiany i transformacji.' },
      { title: 'Głębsze połączenie z energią nordycką', body: 'Runy pozwalają wejść w kontakt z energią wykorzystywaną przez naszych przodków od tysięcy lat.' }
    ],
    ctaTitle: 'Zacznij pracę z runami',
    ctaBody: 'Jeśli szukasz oparcia, ochrony lub jasnego kierunku, runy mogą być punktem wyjścia. Zobacz wszystkie usługi albo skontaktuj się z nami — pomożemy dobrać formę, która do Ciebie pasuje.'
  },

  NUMEROLOGIA: {
    label: 'Numerologia',
    servicesKey: 'Numerologia',
    heroTitle: 'Twoje przeznaczenie i droga życia zapisana w liczbach',
    heroIntro: 'Portrety numerologiczne, numerologia biznesu i imiona wzmacniające.',
    wstepHeadline: 'Numerologia to nie wróżenie — to wiedza o nas samych wyczytana z liczb.',
    wstepBody: 'Liczby to ustawienia, z którymi przychodzimy na świat. To wzorce, które wpływają na nasze decyzje, relacje i kierunek życia. Pracujemy na Twoim indywidualnym kodzie, aby pomóc Ci zrozumieć: co w Twoim życiu powtarza się i bywa trudne, bo jest Twoją lekcją, a co przychodzi Ci naturalnie, bo jest Twoim talentem.',
    dlaKogoTitle: <>Dla osób, które<br />szukają odpowiedzi</>,
    dlaKogoIcons: [
      'assets/dlakogo/numerologia-1.svg',
      'assets/dlakogo/numerologia-2.svg',
      'assets/dlakogo/numerologia-3.svg',
      'assets/dlakogo/numerologia-4.svg'
    ],
    dlaKogoItems: [
      { title: 'Gdy czujesz, że pewne sytuacje ciągle się powtarzają', body: 'Numerologia pomaga odkryć schematy, lekcje i zależności wpływające na Twoje życie.' },
      { title: 'Kiedy nie wiesz, w którą stronę iść', body: 'Liczby pomagają zobaczyć Twoje naturalne predyspozycje oraz kierunek zgodny z Twoją energią.' },
      { title: 'Dla osób pracujących nad sobą', body: 'Jeśli chcesz lepiej zrozumieć swoje emocje i decyzje, portret numerologiczny daje głębszy wgląd w Twoją osobowość, talenty, blokady i karmy.' },
      { title: 'Dla osób, które czują wewnętrzną blokadę', body: 'Gdy masz potencjał, ale coś Cię zatrzymuje — analiza numerologiczna pomaga odkryć źródło trudności i świadomie zacząć je przepracowywać.' }
    ],
    experts: ['Tomasz Buniek'],
    coObejmujeHeadline: 'To indywidualna analiza oparta na liczbach w Twojej dacie urodzenia, imionach, nazwiskach, przezwiskach.',
    coObejmujeBody: 'Każdy człowiek rodzi się z określonymi ustawieniami i wibracjami, które wpływają na jego charakter, relacje, decyzje, talenty oraz życiowe doświadczenia. Celem tej pracy jest odkrycie Twojego potencjału, zrozumienie powtarzających się schematów oraz pokazanie kierunku zgodnego z energią Twojej duszy.',
    coObejmujePoints: [
      { title: 'Analiza Twojej drogi życia — wibracji głównej, podwibracji oraz dnia urodzenia', body: 'Poznasz swoją główną wibrację drogi życia, podwibracji oraz energię dnia urodzenia, talenty i naturalne predyspozycje.' },
      { title: 'Wgląd w blokady i lekcje karmiczne', body: 'Zobaczysz, jakie schematy mogą powtarzać się w Twoim życiu i z czego wynikają.' },
      { title: 'Kierunek zgodny z Twoją energią', body: 'Dowiesz się, jakie decyzje i działania mogą być bardziej wspierające dla Twojego rozwoju.' },
      { title: 'Większa świadomość siebie', body: 'Numerologia pomaga spojrzeć na swoje życie z szerszej perspektywy i odzyskać poczucie kierunku.' }
    ],
    ctaTitle: 'Zobacz, co mówią Twoje liczby',
    ctaBody: 'Jeśli chcesz świadomie zaplanować ważną decyzję lub po prostu lepiej rozumieć siebie, zacznij od numerologii. Zobacz wszystkie usługi albo skontaktuj się z nami — pomożemy dobrać najlepszy punkt wyjścia.'
  },

  ASTROLOGIA: {
    label: 'Astrologia',
    servicesKey: 'Astrologia',
    heroTitle: 'Mapa Twojej duszy zapisana w gwiazdach',
    heroIntro: 'Kosmogramy, astrokartografia i konsultacje astrologiczne.',
    wstepHeadline: 'Astrologia to coś więcej niż horoskop. To głęboka analiza energii, z którą przychodzisz na świat.',
    wstepBody: 'Układ planet w chwili narodzin tworzy unikalny kod, który wpływa na Twoją osobowość, emocje, relacje oraz sposób, w jaki doświadczasz życia. Kosmogram pozwala spojrzeć na siebie z szerszej perspektywy i lepiej zrozumieć swoje naturalne predyspozycje, wyzwania oraz kierunek rozwoju. To połączenie intuicji i konkretu — wiedzy, która pomaga zrozumieć siebie, zamiast działać wbrew własnej naturze.',
    dlaKogoTitle: <>Dla osób, które chcą<br />lepiej poznać siebie</>,
    dlaKogoIcons: [
      'assets/dlakogo/astrologia-1.svg',
      'assets/dlakogo/astrologia-2.svg',
      'assets/dlakogo/astrologia-3.svg',
      'assets/dlakogo/astrologia-4.svg'
    ],
    dlaKogoItems: [
      { title: 'Gdy czujesz, że jesteś bardziej złożony, niż widzą inni', body: 'Kosmogram pomaga zrozumieć Twoje emocje, reakcje i sposób działania.' },
      { title: 'Jeśli pewne doświadczenia ciągle wracają', body: 'Astrologia pozwala odkryć źródło wewnętrznych napięć oraz życiowych lekcji.' },
      { title: 'Kiedy potrzebujesz szerszej perspektywy', body: 'Układ planet pomaga spojrzeć na swoje możliwości i kierunek bardziej świadomie.' },
      { title: 'Gdy czujesz, że przestrzeń wokół Ciebie ma znaczenie', body: 'Astrokartografia pokazuje miejsca, w których Twoja energia może działać najmocniej.' }
    ],
    experts: ['Olga Konieczna'],
    coObejmujeHeadline: 'Indywidualna analiza oparta na dokładnej dacie, godzinie i miejscu Twojego urodzenia.',
    coObejmujeBody: 'Na tej podstawie tworzony jest kosmogram — mapa nieba pokazująca układ planet w chwili Twoich narodzin. Analiza pozwala zrozumieć Twoją osobowość, emocje, relacje, sposób działania oraz naturalne predyspozycje. W przypadku astrokartografii energia Twojego kosmogramu zostaje przeniesiona na mapę świata, pokazując miejsca najbardziej wspierające Twój rozwój, relacje i życiowy kierunek.',
    coObejmujePoints: [
      { title: 'Analiza osobowości i emocji', body: 'Poznasz swój sposób działania, potrzeby wewnętrzne oraz naturalne reakcje.' },
      { title: 'Odkrycie talentów i predyspozycji', body: 'Zobaczysz, jakie energie wspierają Twój rozwój i mocne strony.' },
      { title: 'Zrozumienie schematów i wyzwań', body: 'Astrologia pomaga odkryć źródło powtarzających się sytuacji oraz napięć.' },
      { title: 'Wgląd w relacje i sposób budowania więzi', body: 'Dowiesz się, jak funkcjonujesz w miłości, relacjach i kontaktach z innymi.' },
      { title: 'Astrokartografia i miejsca mocy', body: 'Odkryjesz miejsca na świecie, które wspierają Twoją energię, rozwój i życiowe cele.' },
      { title: 'Świadome decyzje i kierunek rozwoju', body: 'Zyskasz większą jasność oraz możliwość działania zgodnie ze swoją naturą.' }
    ],
    ctaTitle: 'Zobacz swoją mapę',
    ctaBody: 'Jeśli chcesz świadomie poruszać się po własnym potencjale, zacznij od konsultacji astrologicznej. Zobacz wszystkie usługi albo skontaktuj się z nami — pomożemy dobrać formę, która do Ciebie pasuje.'
  },

  CHIROLOGIA: {
    label: 'Chirologia',
    servicesKey: 'Chirologia',
    heroTitle: 'Twoje dłonią noszą zapis tego kim jesteś i jaki masz potencjał',
    heroIntro: 'Analiza dłoni — talenty, blokady, ścieżki rozwoju.',
    wstepHeadline: 'Chirologia to nie magia — to wiedza oparta na analizie linii, znaków i struktury dłoni.',
    wstepBody: 'Każda dłoń jest unikalną mapą doświadczeń, emocji, talentów i życiowych predyspozycji. To właśnie w niej zapisane są Twoje naturalne możliwości, wewnętrzne blokady oraz schematy, które wpływają na decyzje, relacje i kierunek rozwoju.',
    dlaKogoTitle: <>Dla osób, które chcą<br />zobaczyć siebie wyraźniej</>,
    dlaKogoIcons: [
      'assets/dlakogo/chirologia-1.svg',
      'assets/dlakogo/chirologia-2.svg',
      'assets/dlakogo/chirologia-3.svg',
      'assets/dlakogo/chirologia-4.svg'
    ],
    dlaKogoBody: 'Analiza dłoni pozwala spojrzeć na siebie z większą świadomością i zrozumieć to, co do tej pory mogło pozostawać niewidoczne. To nie wróżba, lecz świadoma interpretacja pomagająca lepiej poznać siebie i własną drogę.',
    dlaKogoItems: [
      { title: 'Gdy czujesz, że szukasz odpowiedzi wewnątrz siebie', body: 'Analiza dłoni pomaga odkryć Twoje mocne strony, emocje i naturalne predyspozycje.' },
      { title: 'Kiedy nie wiesz, w jakim kierunku iść', body: 'Chiromancja pozwala spojrzeć na swoje możliwości oraz potencjalne ścieżki rozwoju.' },
      { title: 'Jeśli pewne sytuacje ciągle wracają', body: 'Linie dłoni pomagają zauważyć blokady i mechanizmy wpływające na Twoje decyzje oraz relacje.' },
      { title: 'Gdy chcesz spojrzeć na swoje życie z większej perspektywy', body: 'To narzędzie wspierające samopoznanie i głębsze rozumienie własnej natury.' }
    ],
    experts: ['Karol Majewski'],
    coObejmujeHeadline: 'To indywidualna analiza oparta na liniach, znakach oraz strukturze Twojej dłoni.',
    coObejmujeBody: 'Każda interpretacja tworzona jest w sposób osobisty, ponieważ każda dłoń jest niepowtarzalnym zapisem doświadczeń, emocji i potencjału człowieka. Podczas analizy odczytywane są informacje związane z Twoją osobowością, relacjami, emocjami, talentami oraz kierunkiem życiowym.',
    coObejmujePoints: [
      { title: 'Analiza osobowości i charakteru', body: 'Dowiesz się, jakie cechy dominują w Twojej naturze i sposobie działania.' },
      { title: 'Odkrycie talentów i potencjału', body: 'Zobaczysz swoje naturalne predyspozycje oraz ukryte możliwości.' },
      { title: 'Wgląd w relacje i emocje', body: 'Linie dłoni pomagają lepiej zrozumieć Twoją sferę uczuciową oraz relacje z innymi.' },
      { title: 'Rozpoznanie blokad i schematów', body: 'Odkryjesz, co może wpływać na powtarzające się sytuacje i trudności w życiu.' },
      { title: 'Kierunek rozwoju i decyzji', body: 'Analiza pomaga spojrzeć szerzej na Twoją drogę życiową i przyszłe możliwości.' },
      { title: 'Większa świadomość siebie', body: 'Chiromancja daje głębsze zrozumienie własnej natury oraz doświadczeń życiowych.' }
    ],
    ctaTitle: 'Zobacz, co mówi Twoja dłoń',
    ctaBody: 'Jeśli chcesz świadomie korzystać z własnych zasobów, zacznij od analizy dłoni. Zobacz wszystkie usługi albo skontaktuj się z nami — pomożemy dobrać formę, która do Ciebie pasuje.'
  },

  ENERGIA: {
    label: 'Energia',
    servicesKey: 'Energia',
    heroTitle: 'Praca z polem i intuicją',
    heroIntro: 'Portrety energetyczne, odczyty i analizy duszy.',
    wstepHeadline: 'Energia jest językiem, którym mówi to, co w Tobie subtelne. Wystarczy nauczyć się słuchać.',
    wstepBody: 'Każdy z nas ma własne pole — emocji, nawyków, wpływów. Kiedy się do niego zatrzymujemy, widać wyraźniej, co Cię wzmacnia, a co odbiera siłę. Praca energetyczna to nie ezoteryczne zaklęcia, ale uważne czytanie tego, co już jest. Daje wgląd, oczyszczenie i punkt wyjścia do zmian.',
    dlaKogoTitle: <>Dla osób, które chcą<br />zatrzymać się przy sobie</>,
    dlaKogoIcons: [
      'assets/dlakogo/energia-1.svg',
      'assets/dlakogo/energia-2.svg',
      'assets/dlakogo/energia-3.svg',
      'assets/dlakogo/energia-4.svg'
    ],
    dlaKogoItems: [
      { title: 'Gdy czujesz zmęczenie i rozproszenie', body: 'Odczyt energetyczny pokazuje, gdzie tracisz siłę i jak ją odzyskać.' },
      { title: 'Kiedy szukasz głębszego wglądu', body: 'Portret duszy łączy fakty z intuicją — daje pełniejszy obraz Ciebie.' },
      { title: 'Dla osób pracujących z duchowością', body: 'To narzędzie, które pogłębia kontakt z własnym wnętrzem.' },
      { title: 'Gdy chcesz uporządkować swoje pole', body: 'Praca z energią to konkretny proces, nie tylko symbolika.' }
    ],
    experts: ['Konstancja Zahmala Lumia', 'Karolina Mardoll Kułakowska'],
    coObejmujeHeadline: 'Indywidualna praca oparta na Twoim polu i tym, z czym przychodzisz.',
    coObejmujeBody: 'Każda sesja prowadzona jest w rytmie, który pozwala spokojnie przyjrzeć się temu, co najważniejsze. Bez presji i schematów.',
    coObejmujePoints: [
      { title: 'Odczyt energetyczny', body: 'Co aktualnie pracuje w Twoim polu i jak to zrównoważyć.' },
      { title: 'Portret / analiza duszy', body: 'Pełniejszy obraz Ciebie — z poziomu energii i intuicji.' },
      { title: 'Praca oczyszczająca', body: 'Pomoc w odzyskaniu spokoju i klarowności.' },
      { title: 'Wskazówki na dalsze kroki', body: 'Konkretne praktyki, które wzmocnią Cię na co dzień.' }
    ],
    ctaTitle: 'Zatrzymaj się przy sobie',
    ctaBody: 'Jeśli czujesz, że to dobry moment, by spojrzeć głębiej, zacznij od pracy z energią. Zobacz wszystkie usługi albo skontaktuj się z nami — pomożemy dobrać najlepszy punkt wyjścia.'
  }
};

// ────────── DISCIPLINE HERO ──────────
function DiscHero({ disc }) {
  useDisciplineTick();
  const D = DISCIPLINES[disc];
  return (
    <section style={{
      position: 'relative', height: 559, paddingTop: 84,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(assets/hero-bg.png)`,
        backgroundSize: 'cover', backgroundPosition: 'center'
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(${DC.bg} 0%, rgba(6,11,24,0) 18%, rgba(6,11,24,0) 82%, ${DC.bg} 100%)`
      }} />
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 36,
        padding: '0 40px 64px', textAlign: 'center', maxWidth: 1312
      }}>
        <span style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 20,
          letterSpacing: '0.4em', color: DC.gold
        }}>{disc}</span>
        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 64,
          lineHeight: 1.15, letterSpacing: '-0.022em', color: DC.white,
          textWrap: 'balance', whiteSpace: 'pre-line'
        }}>{D.heroTitle}</h1>
        <p style={{
          margin: 0, maxWidth: 720,
          fontFamily: 'Nunito', fontSize: 18, lineHeight: 1.5,
          color: DC.lavender
        }}>{D.heroIntro}</p>
      </div>
    </section>);
}

// ────────── WSTĘP (illustration + headline + body) ──────────
function DiscWstep({ disc }) {
  useDisciplineTick();
  const D = DISCIPLINES[disc];
  return (
    <section style={{
      position: 'relative', background: DC.bg,
      borderTop: `1px solid ${DC.muted}`, borderBottom: `1px solid ${DC.muted}`,
      padding: '64px 24px'
    }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '40px',
        display: 'grid', gridTemplateColumns: '537px 1fr', gap: 72, alignItems: 'center'
      }}>
        <div style={{
          height: 547, borderRadius: 16, overflow: 'hidden',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <img src={`assets/disciplines/${disc.toLowerCase()}.svg`} alt={D.label}
            style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: DC.white
          }}>{D.wstepHeadline}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: DC.lavender, maxWidth: 703
          }}>{D.wstepBody}</p>
        </div>
      </div>
    </section>);
}

// ────────── DLA KOGO ──────────
function DlaKogo({ disc }) {
  useDisciplineTick();
  const D = DISCIPLINES[disc];
  return (
    <section style={{ background: DC.bg, padding: '80px 24px' }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ marginBottom: 150, maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: DC.muted
          }}>DLA KOGO?</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: DC.white
          }}>{D.dlaKogoTitle}</h2>
          {D.dlaKogoBody &&
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: DC.lavender
          }}>{D.dlaKogoBody}</p>
          }
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {D.dlaKogoItems.map((it, i) =>
            <div key={i} style={{
              display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start'
            }}>
              <img src={(D.dlaKogoIcons && D.dlaKogoIcons[i]) || 'assets/zalety-icon.svg'} alt="" style={{ width: 50, height: 50, display: 'block' }} />
              <h3 style={{
                margin: 0, fontFamily: 'Nunito', fontSize: 22,
                letterSpacing: '-0.022em', color: DC.white, lineHeight: 1.25, fontWeight: '400'
              }}>{it.title}</h3>
              <p style={{
                margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.5,
                color: DC.lavender
              }}>{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ────────── JAK POMOŻEMY (services from this discipline) ──────────
function JakPomozemy({ disc }) {
  useDisciplineTick();
  const D = DISCIPLINES[disc];
  const items = SERVICES[D.servicesKey] || [];
  const [vw, setVw] = React.useState(() => typeof window !== 'undefined' ? window.innerWidth : 1440);
  React.useEffect(() => {
    const onR = () => setVw(window.innerWidth);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  const isMobile = vw <= 900;
  const cols = Math.min(items.length, 3) || 1;
  const GAP = isMobile ? 16 : 24;
  const CARD_W = isMobile ? Math.min(vw - 64, 360) : 0;
  const [idx, setIdx] = React.useState(0);
  const maxIdx = Math.max(0, items.length - 1);
  React.useEffect(() => { setIdx((i) => Math.min(i, maxIdx)); }, [maxIdx]);
  const useSlider = isMobile && items.length > 1;
  return (
    <section style={{
      position: 'relative', background: DC.bg,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      <div style={{ position: 'relative', maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <h2 style={{
          margin: '0 0 64px', fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 32,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: DC.white
        }}>Jak możemy Ci pomóc?</h2>
        {useSlider ?
        <>
          <div style={{ overflow: 'hidden' }}>
            <div style={{
              display: 'flex', gap: GAP,
              transform: `translateX(${-idx * (CARD_W + GAP)}px)`,
              transition: 'transform 550ms cubic-bezier(0.22,1,0.36,1)'
            }}>
              {items.map((it, i) =>
                <div key={i} style={{ width: CARD_W, flex: '0 0 auto' }}>
                  <ServiceCard item={it} cardWidth="100%" />
                </div>
              )}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginTop: 32 }}>
            <RoundArrow dir="left" disabled={idx === 0} onClick={() => setIdx(Math.max(0, idx - 1))} />
            <RoundArrow dir="right" disabled={idx >= maxIdx} onClick={() => setIdx(Math.min(maxIdx, idx + 1))} />
          </div>
        </> :
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${cols}, 1fr)`,
          gap: 24
        }}>
          {items.map((it, i) =>
            <ServiceCard key={i} item={it} cardWidth="100%" />
          )}
        </div>
        }
      </div>
    </section>);
}

// ────────── EKSPERCI (1 or more, stacked) ──────────
function DiscExperts({ disc }) {
  useDisciplineTick();
  const D = DISCIPLINES[disc];
  return (
    <div>
      {D.experts.map((name) => <ExpertShort key={name} name={name} />)}
    </div>);
}

// ────────── CO OBEJMUJE ──────────
function CoObejmuje2({ disc }) {
  useDisciplineTick();
  const D = DISCIPLINES[disc];
  return (
    <section style={{
      position: 'relative', background: DC.bg,
      borderTop: `1px solid ${DC.muted}`, borderBottom: `1px solid ${DC.muted}`,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      <div style={{
        position: 'relative', maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'flex-start' }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: DC.muted
          }}>CO OBEJMUJE / JAK TO WYGLĄDA?</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: DC.white
          }}>{D.coObejmujeHeadline}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: DC.lavender
          }}>{D.coObejmujeBody}</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {D.coObejmujePoints.map((p, i) =>
            <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <h3 style={{
                  margin: 0, fontFamily: 'Nunito', fontSize: 20,
                  color: DC.white, fontWeight: '400'
                }}>{p.title}</h3>
                <p style={{
                  margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.5,
                  color: DC.lavender
                }}>{p.body}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ────────── BLOG (related — 3 cards from live articles) ──────────
function BlogRelated() {
  const posts = (typeof window !== 'undefined' && window.getLatestArticles) ?
    window.getLatestArticles(3, null) : [];
  return (
    <section style={{
      background: DC.bg, padding: '80px 24px',
      borderTop: `1px solid ${DC.muted}`, borderBottom: `1px solid ${DC.muted}`
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ marginBottom: 64 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: DC.muted, marginBottom: 20
          }}>BLOG</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: DC.white
          }}>Powiązane treści</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {posts.map((p) =>
            <a key={p.slug} href={`${p.slug}.html`} style={{
              borderRadius: 16, border: '1px solid rgb(78, 70, 114)', padding: 32,
              display: 'flex', flexDirection: 'column', gap: 16,
              textDecoration: 'none', transition: 'border-color .3s, transform .3s',
              transform: 'none'
            }}>
              <h3 style={{
                margin: 0, fontFamily: 'Nunito',
                lineHeight: 1.4, color: DC.white, fontWeight: '400', fontSize: '24px'
              }}>{p.title}</h3>
              <div style={{
                fontFamily: 'Nunito',
                letterSpacing: '0.05em', color: DC.muted, fontSize: '14px'
              }}>{p.date}</div>
              <p style={{
                margin: 0, fontFamily: 'Nunito', lineHeight: 1.6,
                color: DC.lavender, fontSize: '16px'
              }}>{p.excerpt}</p>
              <div style={{
                marginTop: 8, fontFamily: 'Nunito', fontWeight: 700,
                color: DC.gold, fontSize: '16px'
              }}>Czytaj artykuł</div>
            </a>
          )}
        </div>
      </div>
    </section>);
}

// ────────── DISC CTA ──────────
function DiscCTA({ disc }) {
  useDisciplineTick();
  const D = DISCIPLINES[disc];
  return (
    <section style={{
      position: 'relative', background: DC.bg,
      padding: '0 24px 80px', overflow: 'hidden', textAlign: 'center',
      minHeight: 720, display: 'flex', alignItems: 'flex-end', justifyContent: 'center'
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/cta_pyl.jpg)',
        backgroundSize: 'contain',
        backgroundPosition: 'center top',
        backgroundRepeat: 'no-repeat',
        pointerEvents: 'none'
      }} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(6,11,24,0) 0%, rgba(6,11,24,0) 55%, ${DC.bg} 100%)`,
        pointerEvents: 'none'
      }} />
      <div style={{
        position: 'relative', maxWidth: 1156, margin: '0 auto',
        display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'center'
      }}>
        <h2 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: DC.white
        }}>{D.ctaTitle}</h2>
        <p style={{
          margin: '0 0 16px', maxWidth: 820,
          fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
          color: DC.lavender
        }}>{D.ctaBody}</p>
        <div style={{ display: 'flex', gap: 36 }}>
          <BtnSecond href="index.html#uslugi">Zobacz nasze usługi</BtnSecond>
        </div>
      </div>
    </section>);
}

// ─────────────────────────────────────────────────────────────
// DB-driven discipline content. Each .html sets <disc="TAROT"> and the
// components read DISCIPLINES[disc]. We mutate those entries in place
// once /api/public/content?type=disciplines resolves so the components
// re-render with the freshly fetched copy.
// ─────────────────────────────────────────────────────────────
function useDisciplineTick() {
  const [, tick] = React.useState(0);
  React.useEffect(() => {
    const f = () => tick((t) => t + 1);
    window.addEventListener('luna-disciplines-loaded', f);
    return () => window.removeEventListener('luna-disciplines-loaded', f);
  }, []);
}

// Slug → uppercase key used by DISCIPLINES (and .html disc="...")
const _SLUG_TO_KEY = {
  tarot: 'TAROT', runy: 'RUNY', numerologia: 'NUMEROLOGIA',
  astrologia: 'ASTROLOGIA', chirologia: 'CHIROLOGIA',
  energia: 'ENERGIA', radiestezja: 'RADIESTEZJA'
};

(function loadDisciplinesFromDB() {
  if (typeof window === 'undefined') return;
  fetch('/api/public/content?type=disciplines', { credentials: 'include' })
    .then((r) => r.json())
    .then(({ items }) => {
      if (!Array.isArray(items)) return;
      for (const item of items) {
        const key = _SLUG_TO_KEY[item.slug];
        if (!key || !DISCIPLINES[key]) continue;
        const c = item.content || {};
        // Merge DB content over defaults; preserves anything DB omits.
        Object.assign(DISCIPLINES[key], c);
      }
      try { window.dispatchEvent(new CustomEvent('luna-disciplines-loaded')); } catch (_) {}
    })
    .catch((err) => { console.error('[dyscyplina] load failed', err); });
})();

Object.assign(window, {
  DISCIPLINES, DiscHero, DiscWstep, DlaKogo, JakPomozemy,
  DiscExperts, CoObejmuje2, BlogRelated, DiscCTA, useDisciplineTick
});
