/* global React */
const OC = {
  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(247,208,187)',
  white: 'rgb(255,255,255)',
  violet: 'rgba(59,39,172,0.5)'
};

// ── HERO ──
function OnasHero() {
  useOnasData();
  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(${OC.bg} 0%, rgba(6,11,24,0) 18%, rgba(6,11,24,0) 82%, ${OC.bg} 100%)`
      }} />
      <div style={{
        position: 'relative', zIndex: 2, maxWidth: 1100,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28,
        padding: '0 40px 72px', textAlign: 'center'
      }}>
        <span style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
          letterSpacing: '0.3em', color: OC.gold
        }}>{onasText('hero.label', 'O NAS')}</span>
        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 64,
          lineHeight: 1.15, letterSpacing: '-0.022em', color: OC.white,
          whiteSpace: 'pre-line'
        }}>{onasText('hero.title', 'Miejsce, w którym zatrzymujesz się,\nżeby zobaczyć więcej')}</h1>
        <p style={{
          margin: 0, maxWidth: 780,
          fontFamily: 'Nunito', fontSize: 18, lineHeight: 1.6, color: OC.lavender
        }}>{onasText('hero.subtitle', 'Luna Persona Hermetica łączy wiedzę, doświadczenie i spokojną, uważną pracę z człowiekiem — w duchowych narzędziach szukamy klarowności, nie magii.')}</p>
      </div>
    </section>);

}

// ── ZNACZENIE NAZWY (Luna · Persona · Hermetica) ──
function OnasZnaczenie() {
  useOnasData();
  const pillars = onasText('znaczenie.pillars', [
  {
    tag: 'LUNA',
    title: 'Rytm, intuicja, odbicie',
    paragraphs: [
    'Luna nie jest tu przypadkowa. To symbol tego, co niewidoczne na pierwszy rzut oka — a jednocześnie niezwykle wpływowe. Słowo Luna pochodzi z łaciny i oznacza Księżyc, ale jego znaczenie sięga znacznie głębiej niż tylko ciało niebieskie.',
    'Luna to rytm — cykliczność życia, która nie jest liniowa, lecz płynna, zmienna i żywa. Tak jak fazy Księżyca, tak i człowiek przechodzi przez swoje etapy: wzrostu, wyciszenia, transformacji i odrodzenia.',
    'Luna to intuicja — ten cichy głos, który pojawia się, zanim zdążysz coś logicznie przeanalizować. Wiedza, której nie uczysz się z zewnątrz, tylko przypominasz ją sobie od środka.',
    'Luna to odbicie. Nie świeci własnym światłem, a mimo to rozświetla noc. Tak jak my często odnajdujemy siebie poprzez to, co odbijamy, czujemy i przeżywamy. Bo zanim zaczniesz szukać odpowiedzi na zewnątrz — one już istnieją w Tobie.']

  },
  {
    tag: 'PERSONA',
    title: 'Kim jesteś naprawdę',
    paragraphs: [
    'Słowo Persona pochodzi z łaciny i pierwotnie oznaczało maskę używaną w teatrze. Z czasem zaczęło opisywać to, jak pokazujemy się światu.',
    'Persona to nie tylko to, kim jesteś na zewnątrz. To również warstwy, które nosisz w sobie — świadome i nieświadome. To Twoja tożsamość: ta, którą znasz, i ta, którą dopiero odkrywasz.',
    'To sposób, w jaki czujesz, reagujesz i wybierasz. Energia, którą wnosisz w relacje i decyzje. Nie chodzi o tworzenie nowej wersji siebie — chodzi o odkrycie tej, która już istnieje pod warstwami oczekiwań, doświadczeń i schematów.']

  },
  {
    tag: 'HERMETICA',
    title: 'Wiedza ukryta, która prowadzi',
    paragraphs: [
    'Hermetica odnosi się do starożytnej wiedzy hermetycznej — nauk przypisywanych Hermesowi Trismegistosowi, które od wieków łączą duchowość, kosmos i naturę człowieka.',
    'To filozofia oparta na jednym z najważniejszych praw: „Jak na górze, tak na dole". Oznacza to, że wszystko jest ze sobą połączone — to, co dzieje się w Tobie, ma odzwierciedlenie w świecie zewnętrznym.',
    'Hermetica to nie religia, lecz sposób rozumienia rzeczywistości. Wiedza, która nie jest powierzchowna ani przypadkowa — jest symboliczna, głęboka i wymaga uważności. To z niej czerpią takie dziedziny jak astrologia, numerologia, tarot czy praca z energią.',
    'Hermetica przypomina, że nic nie jest chaosem, wszystko ma znaczenie, a odpowiedzi nie są gdzieś daleko — tylko czekają na odkrycie.']

  }]);


  return (
    <section style={{
      position: 'relative', background: OC.bg,
      borderBottom: `1px solid ${OC.muted}`,
      padding: '120px 24px'
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: OC.muted, marginBottom: 20
          }}>{onasText('znaczenie.label', 'DLACZEGO LUNA PERSONA HERMETICA?')}</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: OC.white,
            maxWidth: 820, marginLeft: 'auto', marginRight: 'auto',
            whiteSpace: 'pre-line'
          }}>{onasText('znaczenie.headline', 'Trzy słowa, które tworzą\nprzestrzeń tego, co robimy')}</h2>
          <p style={{
            margin: '24px auto 0', fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.7,
            color: OC.lavender, maxWidth: 760
          }}>Luna Persona Hermetica to połączenie trzech wymiarów: <em style={{ color: OC.white, fontStyle: 'normal' }}>Luna</em> — Twojej intuicji i emocji, <em style={{ color: OC.white, fontStyle: 'normal' }}>Persona</em> — Twojej prawdziwej tożsamości, <em style={{ color: OC.white, fontStyle: 'normal' }}>Hermetica</em> — wiedzy, która pozwala to zrozumieć. Razem tworzą przestrzeń, w której możesz nie tylko szukać odpowiedzi, ale naprawdę je odnaleźć.</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48
        }}>
          {pillars.map((p) =>
          <div key={p.tag} style={{
            display: 'flex', flexDirection: 'column', gap: 16
          }}>
              <div style={{
              fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 36,
              letterSpacing: '0.18em', color: OC.gold
            }}>{p.tag}</div>
              <h3 style={{
              margin: 0, fontFamily: 'Playfair Display', fontStyle: 'italic',
              fontWeight: 400, fontSize: 22, color: OC.white,
              letterSpacing: '-0.01em'
            }}>{p.title}</h3>
              {p.paragraphs.map((pa, i) =>
            <p key={i} style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.7,
              color: OC.lavender
            }}>{pa}</p>
            )}
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ── WSTĘP (intro: text + image) ──
function OnasWstep() {
  useOnasData();
  const paragraphs = onasText('wstep.paragraphs', [
    'Luna Persona Hermetica to przestrzeń konsultacji z obszaru tarota, astrologii, numerologii, run i chirologii. Traktujemy te narzędzia poważnie — jako sposoby na uporządkowanie tego, co trudne do nazwania: emocji, decyzji, relacji, kierunku. Nie obiecujemy przewidywania przyszłości. Proponujemy rozmowę, która pomaga lepiej zrozumieć teraźniejszość.',
    'Każdą sesję prowadzi ekspert z konkretnym doświadczeniem i własną metodą pracy. Łączy nas jedno podejście: rzetelność, uważność i odpowiedzialność za to, co wnosimy w Twoje pytania.'
  ]);
  return (
    <section style={{
      position: 'relative', background: OC.bg,
      borderBottom: `1px solid ${OC.muted}`,
      padding: '80px 24px'
    }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '1fr 620px', gap: 72, alignItems: 'center'
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: OC.muted
          }}>{onasText('wstep.label', 'KIM JESTEŚMY')}</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: OC.white,
            whiteSpace: 'pre-line'
          }}>{onasText('wstep.headline', 'Zaczynamy od zrozumienia\nmiejsca, w którym jesteś.')}</h2>
          {(Array.isArray(paragraphs) ? paragraphs : [paragraphs]).map((p, i) =>
            <p key={i} style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
              color: OC.lavender
            }}>{p}</p>
          )}
        </div>
        <div style={{
          height: 547, borderRadius: 16, overflow: 'hidden',
          background: '#151331'
        }}>
          <img src="assets/onas-kim.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
      </div>
    </section>);

}

// ── W CO WIERZYMY (3 pillars) ──
function OnasWiara() {
  useOnasData();
  const pillars = onasText('wiara.pillars', [
  {
    icon: 'assets/jak-pracujemy/1.svg',
    title: 'Uważność przed odpowiedzią',
    body: 'Nie zaczynamy od gotowych recept. Zaczynamy od wysłuchania. Zanim cokolwiek powiemy, chcemy zrozumieć, z czym naprawdę przychodzisz.'
  },
  {
    icon: 'assets/jak-pracujemy/2.svg',
    title: 'Indywidualna droga',
    body: 'Każda osoba trafia do nas z inną historią i w innym momencie życia. Wspólnie dobieramy podejście, które najlepiej odpowiada Twojej sytuacji.'
  },
  {
    icon: 'assets/jak-pracujemy/3.svg',
    title: 'Spokój zamiast presji',
    body: 'Nie przewidujemy przyszłości i nie narzucamy decyzji. Tworzymy przestrzeń, w której możesz spojrzeć na siebie bez pośpiechu i bez oceny.'
  }]);

  return (
    <section style={{ background: OC.bg, padding: '96px 24px' }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: OC.muted, marginBottom: 20
          }}>{onasText('wiara.label', 'W CO WIERZYMY')}</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: OC.white,
            maxWidth: 720, marginLeft: 'auto', marginRight: 'auto'
          }}>{onasText('wiara.headline', 'Trzy zasady, które prowadzą nasz sposób pracy')}</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {pillars.map((p, i) =>
          <div key={i} style={{
            padding: '16px', display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 24, textAlign: 'center'
          }}>
              <img src={p.icon} alt="" style={{ width: 64, height: 64, display: 'block' }} />
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 22,
              letterSpacing: '-0.022em', color: OC.white, fontWeight: "400"
            }}>{p.title}</h3>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6,
              color: OC.lavender, maxWidth: 340
            }}>{p.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── CO OBEJMUJE (text + right-side points) ──
function OnasCoObejmuje() {
  useOnasData();
  const points = onasText('coObejmuje.points', [
  { title: 'Konsultacje indywidualne', body: 'Spotkania dostosowane do Twojej sytuacji — bez gotowego szablonu, z przestrzenią na rozmowę o tym, co ważne teraz.' },
  { title: 'Sesje tematyczne', body: 'Spotkania dostosowane do Twojej sytuacji — bez gotowego szablonu, z przestrzenią na rozmowę o tym, co ważne teraz.' },
  { title: 'Analizy długoterminowe', body: 'Pogłębione opracowania — portrety numerologiczne, horoskopy natalne, analizy run — z których możesz wracać do własnych wniosków.' }]);

  return (
    <section style={{
      position: 'relative', background: OC.bg,
      borderTop: `1px solid ${OC.muted}`, borderBottom: `1px solid ${OC.muted}`,
      padding: '96px 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: OC.muted
          }}>{onasText('coObejmuje.label', 'CO OBEJMUJEMY')}</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: OC.white,
            whiteSpace: 'pre-line'
          }}>{onasText('coObejmuje.headline', 'Różne narzędzia. Jedno\nuważne podejście do osoby.')}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6, color: OC.lavender
          }}>{onasText('coObejmuje.body', 'Pracujemy w sześciu obszarach — tarot, astrologia, numerologia, runy, chirologia, energia. To nie są oddzielne „usługi". To różne języki, które pozwalają spojrzeć na Twoje pytanie z innej perspektywy. Wybór narzędzia zawsze wynika z rozmowy.')}</p>
          <div style={{ marginTop: 16 }}>
            <BtnMain>{onasText('coObejmuje.btn_label', 'Zobacz ekspertów')}</BtnMain>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {points.map((p, i) =>
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', gap: 10
          }}>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 22,
              letterSpacing: '-0.022em', color: OC.white, fontWeight: "400"
            }}>{p.title}</h3>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6, color: OC.lavender
            }}>{p.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── JAK PRACUJEMY (image left + text right) ──
function OnasJakPracujemy() {
  useOnasData();
  return (
    <section style={{
      background: OC.bg, padding: '80px 24px',
      borderBottom: `1px solid ${OC.muted}`
    }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '620px 1fr', gap: 72, alignItems: 'center'
      }}>
        <div style={{
          height: 427, borderRadius: 16, overflow: 'hidden',
          background: '#151331'
        }}>
          <img src="assets/onas-eksperci.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: OC.muted
          }}>{onasText('jakPracujemy.label', 'NASI EKSPERCI / JAK PRACUJEMY')}</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: OC.white
          }}>{onasText('jakPracujemy.headline', 'Zaufane osoby, rzetelna praca, spokojny proces.')}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6, color: OC.lavender
          }}>{onasText('jakPracujemy.body', 'Każdy ekspert Luny pracuje we własnej specjalizacji, ale w tym samym duchu. Traktujemy duchowe narzędzia jak warsztat rzemiosła: wymagają wiedzy, przygotowania i szacunku dla osoby, która nam zaufała. Nie pracujemy z presją, nie obiecujemy cudów i nie skracamy procesu na siłę.')}</p>
        </div>
      </div>
    </section>);

}

// ── ZNAJDŹ EKSPERTA (3 cards) ──
const ONAS_EXPERTS = [
{
  name: 'Konstancja Zahmala Lumia',
  slug: 'konstancjazahmalalumia',
  role: 'Tarocistka | Odczyty Energetyczne | Radiestetka',
  photo: 'assets/expert-konsta.png',
  objectPos: 'center 15%',
  bio: 'Pracuje z tarotem jako narzędziem rozmowy — nie z przyszłością, ale z tym, co już w Tobie jest. Z tym, co czujesz, ale czego jeszcze nie nazwałeś.'
},
{
  name: 'Tomasz Buniek',
  slug: 'tomaszbuniek',
  role: 'Numerolog | Runista',
  photo: 'assets/eksperci/tomaszbuniek.png',
  objectPos: 'center 20%',
  bio: 'Specjalizuje się w portretach numerologicznych, numerologii biznesu i pracy z runami oraz bindrunami.'
},
{
  name: 'Olga Konieczna',
  slug: 'olgakonieczna',
  role: 'Astrolog | Kosmogramy | Astrokartografia',
  photo: 'assets/eksperci/annakonieczna.png',
  objectPos: 'center 25%',
  bio: 'Tłumaczy złożone układy w prosty sposób i pokazuje, jak przełożyć je na realne decyzje i codzienne życie.'
},
{
  name: 'Karolina Mardoll Kułakowska',
  slug: 'karolinamardoll',
  role: 'Analityk Duszy',
  photo: 'assets/eksperci/karolinamardoll.png',
  objectPos: 'center 15%',
  bio: 'Wiedźma nordycka, autorka czterech książek. Łączy duchowość i tradycje nordyckie — pomaga spojrzeć na życie z innej perspektywy.'
},
{
  name: 'Karol Majewski',
  slug: 'karolmajewski',
  role: 'Chiromanta',
  photo: 'assets/eksperci/karolmajewski.png',
  objectPos: 'center 15%',
  bio: 'Każda dłoń to unikalna mapa doświadczeń, talentów i możliwości. Pokazuje siłę, blokady, relacje i ścieżki rozwoju.'
}];


function OnasEksperci() {
  return (
    <section style={{ background: OC.bg, padding: '96px 24px' }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: OC.muted, marginBottom: 20
          }}>NASZ ZESPÓŁ</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: OC.white
          }}>Znajdź eksperta <em style={{ color: OC.white }}>dla siebie</em></h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {ONAS_EXPERTS.map((e, i) =>
          <div key={i} style={{
            borderRadius: 16, background: OC.bgDeep,
            padding: 24, display: 'flex', flexDirection: 'column', gap: 20,
            transition: 'transform .3s, box-shadow .3s'
          }}
          onMouseEnter={(ev) => {
            ev.currentTarget.style.transform = 'translateY(-4px)';
            ev.currentTarget.style.boxShadow = '0 12px 32px rgba(6,11,24,0.6)';
          }}
          onMouseLeave={(ev) => {
            ev.currentTarget.style.transform = 'none';
            ev.currentTarget.style.boxShadow = 'none';
          }}>
              <div style={{
              height: 260, borderRadius: 12, overflow: 'hidden',
              background: OC.bg, position: 'relative'
            }}>
                <img src={e.photo} alt={e.name}
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: e.objectPos }} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <h3 style={{
                margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 24,
                letterSpacing: '-0.022em', color: OC.white
              }}>{e.name}</h3>
                <div style={{
                fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
                color: OC.gold
              }}>{e.role}</div>
              </div>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6,
              color: OC.lavender, flex: 1
            }}>{e.bio}</p>
              <div>
                <BtnSecond small href={e.slug ? e.slug + '.html' : expertHref(e.name)}>Poznaj eksperta</BtnSecond>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── DLA KOGO (text + moon logo) ──
function OnasDlaKogo() {
  useOnasData();
  const items = onasText('dlaKogo.items', [
    'chcesz lepiej zrozumieć siebie i swój aktualny moment życia',
    'stoisz przed decyzją i szukasz jasności, a nie gotowej odpowiedzi',
    'interesują Cię duchowe narzędzia traktowane z powagą i rzetelnością',
    'cenisz rozmowę, w której masz czas, przestrzeń i nie jesteś oceniany'
  ]);

  return (
    <section style={{
      position: 'relative', background: OC.bg,
      borderTop: `1px solid ${OC.muted}`, borderBottom: `1px solid ${OC.muted}`,
      padding: '96px 24px', overflow: 'hidden'
    }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '1fr 520px', gap: 72, alignItems: 'center'
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: OC.muted
          }}>{onasText('dlaKogo.label', 'DLA KOGO JEST TO MIEJSCE')}</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: OC.white
          }}>{onasText('dlaKogo.headline', 'Dla osób, które chcą zobaczyć więcej — bez pośpiechu.')}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6, color: OC.lavender
          }}>{onasText('dlaKogo.body', 'Luna Persona Hermetica powstała dla ludzi, którzy szukają głębszego kontekstu — nie szybkich wróżb. Jeśli rozpoznajesz się w którymś z poniższych zdań, to prawdopodobnie jesteś we właściwym miejscu:')}</p>
          <ul style={{
            margin: 0, padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 14
          }}>
            {items.map((it, i) =>
            <li key={i} style={{
              display: 'flex', gap: 16, alignItems: 'flex-start',
              fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6, color: OC.lavender
            }}>
                <span style={{
                flexShrink: 0, marginTop: 6,
                width: 6, height: 6, borderRadius: '50%',
                background: OC.gold,
                boxShadow: `0 0 10px ${OC.gold}`
              }} />
                <span>{it}</span>
              </li>
            )}
          </ul>
        </div>
        <div style={{
          height: 547, display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative'
        }}>
          {/* Subtle radial glow behind the moon */}
          <div style={{
            position: 'absolute', width: 440, height: 440, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(247,208,187,0.22) 0%, rgba(247,208,187,0) 65%)',
            pointerEvents: 'none'
          }} />
          <div style={{
            position: 'relative',
            width: 240, height: 298,
            filter: 'drop-shadow(0 0 30px rgba(247,208,187,0.35))'
          }}>
            <MoonVector />
          </div>
        </div>
      </div>
    </section>);

}

function MoonVector() {
  // Crescent moon from Figma — filled with vertical gold gradient
  return (
    <svg viewBox="0 0 240.008 298.008" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="moongrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={OC.gold} />
          <stop offset="100%" stopColor={OC.goldDark} />
        </linearGradient>
      </defs>
      <path
        fill="url(#moongrad)"
        fillRule="nonzero"
        d="M 225.286 272.77 C 175.591 267.235 179.569 244.324 163.665 240.418 C 147.762 236.512 120.595 250.5 106.349 233.584 C 100.646 226.808 104.03 210.484 103.368 207.885 C 102.706 205.287 96.409 204.308 96.082 199.423 C 95.797 195.254 103.259 192.746 104.808 192.31 C 103.217 192.548 95.931 192.063 93.101 188.362 C 90.119 184.456 97.079 178.601 96.744 174.374 C 96.409 170.147 78.52 167.219 79.182 159.407 C 79.844 151.603 99.39 139.884 101.048 126.874 C 102.706 113.865 87.908 116.677 97.179 76.99 C 106.458 37.302 150.073 17.237 174.929 13.98 C 192.064 11.735 211.367 14.696 221.71 16.752 C 200.765 6.061 176.973 0 151.74 0 C 67.935 0 0 66.71 0 149.004 C 0 231.298 67.935 298.008 151.74 298.008 C 184.669 298.008 215.136 287.704 240.008 270.212 C 234.992 272.35 230.059 273.304 225.294 272.778 L 225.286 272.77 Z" />
      
    </svg>);

}

// ─────────────────────────────────────────────────────────────
// DB-driven content for the O nas page. Same pattern as home.jsx.
// ─────────────────────────────────────────────────────────────
function useOnasData() {
  const [data, setData] = React.useState(() => (typeof window !== 'undefined' ? window.LUNA_ONAS : null));
  React.useEffect(() => {
    const f = () => setData(window.LUNA_ONAS || null);
    window.addEventListener('luna-onas-loaded', f);
    return () => window.removeEventListener('luna-onas-loaded', f);
  }, []);
  return data;
}

function onasText(path, fallback) {
  const data = (typeof window !== 'undefined' && window.LUNA_ONAS) || null;
  if (!data) return fallback;
  const parts = String(path).split('.');
  let cur = data;
  for (const p of parts) {
    if (cur == null) return fallback;
    cur = cur[p];
  }
  return cur != null && cur !== '' ? cur : fallback;
}

(function loadOnasFromDB() {
  if (typeof window === 'undefined') return;
  const previewMode = (location.search || '').includes('preview=1');
  const url = '/api/public/content?type=pages&key=onas' + (previewMode ? '&preview=1' : '');
  fetch(url, { credentials: 'include' })
    .then((r) => r.json())
    .then(({ item }) => {
      if (!item || !item.content) return;
      window.LUNA_ONAS = item.content;
      try { window.dispatchEvent(new CustomEvent('luna-onas-loaded')); } catch (_) {}
    })
    .catch((err) => { console.error('[onas] load failed', err); });
})();

Object.assign(window, {
  OnasHero, OnasZnaczenie, OnasWstep, OnasWiara, OnasCoObejmuje,
  OnasJakPracujemy, OnasEksperci, OnasDlaKogo,
  useOnasData, onasText
});