/* global React */
const { useState, useRef, useEffect } = React;

// Reuse color tokens already defined in components.jsx (C) by grabbing from window,
// but it's a local const there — so we redeclare a mirror for home-only sections.
const HC = {
  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)'
};

// ────────── HOME HERO ──────────
function HomeHero() {
  return (
    <section style={{
      position: 'relative', height: 1000, paddingTop: 84,
      display: 'flex', alignItems: 'center', 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: HC.violet }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(${HC.bg} 0%, rgba(6,11,24,0.5) 26%, rgba(6,11,24,0) 75%), linear-gradient(rgba(6,11,24,0) 0%, rgba(6,11,24,0.5) 71%, ${HC.bg} 100%)`
      }} />
      {/* cosmic radial blur behind text */}
      <div style={{
        position: 'absolute', top: '38%', left: '50%',
        transform: 'translate(-50%, -50%) rotate(-20deg)',
        width: 1200, height: 500, borderRadius: '50%',
        background: 'radial-gradient(ellipse, rgb(21,20,53) 0%, rgba(21,20,53,0.5) 39%, rgba(21,20,53,0) 100%)',
        pointerEvents: 'none'
      }} />

      <div style={{
        position: 'relative', zIndex: 2, maxWidth: 1100,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24,
        padding: '0 40px', textAlign: 'center'
      }}>
        {/* Moon logo */}
        <img src="assets/logo.png" alt="" style={{ width: 64, height: 80, objectFit: 'contain', marginBottom: 12 }} />
        <div style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
          letterSpacing: '0.3em', color: HC.gold
        }}>LUNA PERSONA HERMETICA</div>
        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 72,
          lineHeight: 1.15, letterSpacing: '-0.022em', color: HC.white,
          textWrap: 'balance'
        }}>Twoje życie ma swój język.<br />My pomagamy go usłyszeć.</h1>
        <p style={{
          margin: '12px 0 0', maxWidth: 760,
          fontFamily: 'Nunito', fontSize: 18, lineHeight: 1.6,
          color: HC.lavender
        }}>Najlepsi eksperci, różne metody, jeden cel — pomóc Ci zobaczyć, gdzie jesteś i co może wydarzyć się dalej.</p>
        <div style={{ display: 'flex', gap: 36, marginTop: 24 }}>
          <BtnMain>Znajdź eksperta</BtnMain>
          <BtnSecond>Zobacz usługi</BtnSecond>
        </div>
      </div>
    </section>);

}

// ────────── DYSCYPLINY (5 cards horizontal scroll) ──────────
const DISCIPLINES = [
{
  tag: 'TAROT',
  title: 'Większa jasność w ważnych momentach',
  body: 'Tarot to narzędzie refleksji, które pomaga spojrzeć na sytuację z większą jasnością. Pozwala dostrzec zależności, zrozumieć kontekst i lepiej przygotować się do podjęcia decyzji.',
  glyph: '✧'
},
{
  tag: 'NUMEROLOGIA',
  title: 'Liczby jako język zrozumienia Twojej drogi',
  body: 'Numerologia pomaga dostrzec zależności między wydarzeniami i lepiej zrozumieć swoją sytuację. Wspiera spokojne i świadome podejmowanie decyzji.',
  glyph: '✦'
},
{
  tag: 'ASTROLOGIA',
  title: 'Zrozum swój cykl życia i kierunek działania',
  body: 'Astrologia pomaga lepiej zrozumieć Twoje predyspozycje, moment życiowy i nadchodzące etapy. Wspiera podejmowanie decyzji oraz świadome planowanie kolejnych kroków.',
  glyph: '☿',
  featured: true
},
{
  tag: 'RUNY',
  title: 'Symbolika, która wspiera Twoje intencje',
  body: 'Runy pomagają pracować z konkretnym tematem lub celem. Wspierają proces zmiany, wzmacniają kierunek działania i pomagają utrzymać uwagę na tym, co dla Ciebie ważne.',
  glyph: 'ᚱ'
},
{
  tag: 'CHIROLOGIA',
  title: 'Poznaj swój potencjał i zrozum swoją naturę',
  body: 'Analiza dłoni pozwala lepiej zrozumieć Twoje cechy, sposób działania i naturalne kierunki rozwoju. Pomaga uporządkować doświadczenia i spojrzeć na swoją drogę z większą jasnością.',
  glyph: '✋'
}];


function DisciplineCard({ d }) {
  return (
    <div style={{
      width: 555, minWidth: 555, height: 746,
      borderRadius: 16, border: '1px solid rgb(78, 70, 114)',
      background: d.featured ? 'rgba(21,19,49,0.6)' : 'rgba(21,19,49,0.25)',
      padding: 32, display: 'flex', flexDirection: 'column', gap: 24,
      alignItems: 'center', boxSizing: 'border-box',
      transition: 'transform .35s, border-color .35s, box-shadow .35s', transform: "none", boxShadow: "none"
    }}>
      {/* Illustration zone — discipline-specific mandala */}
      <DisciplineIllustration tag={d.tag} />
      <h3 style={{
        margin: 0, fontFamily: 'Playfair Display', fontSize: 40,
        textAlign: 'center', letterSpacing: '-0.022em', color: HC.gold, fontWeight: "400"
      }}>{d.tag}</h3>
      <div style={{
        fontFamily: 'Nunito', fontSize: 18,
        textAlign: 'center', color: HC.white, lineHeight: 1.5, fontWeight: "400"
      }}>{d.title}</div>
      <p style={{
        margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
        textAlign: 'center', color: HC.lavender, flex: 1
      }}>{d.body}</p>
      <BtnSecond small>Zobacz więcej</BtnSecond>
    </div>);

}

function Dyscypliny() {
  const CARD_W = 555;
  const GAP = 48;
  const STEP = CARD_W + GAP;
  const n = DISCIPLINES.length;
  // Triple the list so we can always show neighbors on both sides
  const triple = [...DISCIPLINES, ...DISCIPLINES, ...DISCIPLINES];
  const [index, setIndex] = React.useState(n); // start in middle copy
  const [animate, setAnimate] = React.useState(true);
  const trackRef = useRef(null);

  // After an animated transition that lands on an edge copy, silently snap
  // back to the middle copy so we can keep scrolling infinitely in either dir.
  const handleTransitionEnd = () => {
    if (index >= 2 * n) {
      setAnimate(false);
      setIndex(index - n);
    } else if (index < n) {
      setAnimate(false);
      setIndex(index + n);
    }
  };

  // Re-enable animation on the next frame after a silent snap
  React.useEffect(() => {
    if (!animate) {
      const id = requestAnimationFrame(() => setAnimate(true));
      return () => cancelAnimationFrame(id);
    }
  }, [animate]);

  const scroll = (dir) => setIndex((i) => i + dir);

  return (
    <section style={{
      position: 'relative', background: HC.bg,
      borderTop: `1px solid ${HC.muted}`, borderBottom: `1px solid ${HC.muted}`,
      padding: '80px 0', overflow: 'hidden'
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto 72px', padding: '0 40px' }}>
        <div style={{ maxWidth: 644, display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: HC.muted
          }}>NASZE DYSCYPLINY</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: HC.white
          }}>Szersze spojrzenie zaczyna się od różnych perspektyw</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: HC.lavender
          }}>Holistyczne podejście i doświadczenie naszych ekspertów pozwalają spojrzeć na Twoją sytuację całościowo. To przestrzeń do odnalezienia kierunku i większego zrozumienia swojej drogi.</p>
        </div>
      </div>

      {/* radial glow */}
      <div style={{
        position: 'absolute', top: '55%', right: '-10%',
        width: 740, height: 580, borderRadius: '50%',
        background: 'radial-gradient(circle, rgb(21,20,53) 0%, rgba(21,20,53,0.5) 39%, rgba(21,20,53,0) 100%)',
        pointerEvents: 'none'
      }} />

      <div style={{ position: 'relative' }}>
        {/* Viewport — hides overflow, no scrollbar */}
        <div style={{ overflow: 'hidden' }}>
          {/* Track — centered so index 0 lands in the middle of the screen */}
          <div
            ref={trackRef}
            onTransitionEnd={handleTransitionEnd}
            style={{
              display: 'flex', gap: GAP,
              width: 'max-content',
              transform: `translate3d(calc(50vw - ${CARD_W / 2}px - ${index * STEP}px), 0, 0)`,
              transition: animate ? 'transform 550ms cubic-bezier(0.22, 1, 0.36, 1)' : 'none',
              willChange: 'transform'
            }}>
            {triple.map((d, i) =>
            <div key={i} style={{ flex: '0 0 auto' }}>
                <DisciplineCard d={d} />
              </div>
            )}
          </div>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 16, marginTop: 32
        }}>
          <RoundArrow dir="left" size={56} onClick={() => scroll(-1)} />
          <RoundArrow dir="right" size={56} onClick={() => scroll(1)} />
        </div>
      </div>
    </section>);

}

// ────────── WSTĘP HOME (intro with big photo) ──────────
function WstepHome() {
  return (
    <section style={{
      position: 'relative', background: HC.bg,
      borderTop: `1px solid ${HC.muted}`, borderBottom: `1px solid ${HC.muted}`,
      padding: '0 24px 120px', overflow: 'hidden', minHeight: 720
    }}>
      {/* Full-bleed background image — starts from the very top of the section,
            occupies the left half, fades into section bg on the right */}
      <div aria-hidden style={{
        position: 'absolute', top: 0, left: 0, width: '62%', height: '100%',
        backgroundImage: 'url(assets/wstep_pyl.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center top',
        backgroundRepeat: 'no-repeat',
        pointerEvents: 'none'
      }} />
      {/* Soft right-side fade so image blends into page bg */}
      <div aria-hidden style={{
        position: 'absolute', top: 0, left: 0, width: '62%', height: '100%',
        background: 'linear-gradient(90deg, rgba(6,11,24,0) 55%, rgba(6,11,24,1) 100%)',
        pointerEvents: 'none'
      }} />

      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: 1312, margin: '0 auto', padding: '40px'
      }}>
        {/* top two-column row — text aligned with right column, image lives in the background */}
        <div style={{
          display: 'grid', gridTemplateColumns: '620px 1fr', gap: 72, alignItems: 'center',
          minHeight: 547, marginBottom: 72
        }}>
          <div />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <h2 style={{
              margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
              lineHeight: 1.2, letterSpacing: '-0.022em', color: HC.white
            }}>Czasem wiemy już wiele,<br />a mimo to nadal stoimy w miejscu.</h2>
            <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
              color: HC.lavender
            }}>Każdy z nas trafia czasem na moment, w którym pojawia się więcej pytań niż odpowiedzi. Może to być poczucie powtarzalności, brak jasnego kierunku lub wrażenie, że coś pozostaje niedokończone. Przyjrzenie się temu z szerszej, być może nowej perspektywy pomaga lepiej zrozumieć sytuację.</p>
          </div>
        </div>

        {/* quote block */}
        <div style={{
          padding: '80px 20px', textAlign: 'center',
          display: 'flex', flexDirection: 'column', gap: 32, alignItems: 'center'
        }}>
          <blockquote style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 24,
            lineHeight: 1.35, letterSpacing: '-0.022em', color: HC.white,
            fontStyle: 'italic', maxWidth: 1100, whiteSpace: 'pre-line'
          }}>{"Nie zawsze potrzebujesz więcej odpowiedzi.\nCzasem wystarczy lepiej zobaczyć to, co już jest.\""}</blockquote>
          <img src="assets/logo.png" alt="" style={{ width: 48, height: 60, objectFit: 'contain', opacity: 1 }} />
        </div>
      </div>
    </section>);

}

// ────────── JAK PRACUJEMY ──────────
function JakPracujemy() {
  const cards = [
  { icon: '☾', title: 'Indywidualne podejście', body: 'Nie pracujemy według jednego schematu. Każda sytuacja jest inna, dlatego dobieramy podejście w zależności od Twoich potrzeb i momentu życia.' },
  { icon: '◉', title: 'Dobór właściwego narzędzia', body: 'W zależności od sytuacji korzystamy z różnych dziedzin. Każda z nich pozwala spojrzeć na temat z innej strony i lepiej go zrozumieć.' },
  { icon: '☉', title: 'Spokojny proces', body: 'Naszym celem nie jest szybka odpowiedź, lecz rzetelne przyjrzenie się sytuacji. Pracujemy w tempie, które pozwala na głębsze zrozumienie.' }];

  return (
    <section style={{
      position: 'relative', background: HC.bg,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      {/* concentric rings decor */}
      <div style={{
        position: 'absolute', top: -150, right: -150,
        width: 700, height: 700, opacity: 0.15,
        pointerEvents: 'none'
      }}>
        {[1, 2, 3, 4, 5, 6].map((i) =>
        <div key={i} style={{
          position: 'absolute', inset: i * 45,
          borderRadius: '50%', border: `1px solid ${HC.gold}`
        }} />
        )}
      </div>
      <div style={{
        position: 'absolute', top: '60%', left: '-10%',
        width: 1400, height: 300, borderRadius: '50%',
        background: 'radial-gradient(ellipse, rgb(21,20,53) 0%, rgba(21,20,53,0.5) 39%, rgba(21,20,53,0) 100%)',
        transform: 'rotate(-15deg)', pointerEvents: 'none'
      }} />

      <div style={{ position: 'relative', maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ maxWidth: 644, marginBottom: 72 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: HC.muted, marginBottom: 20
          }}>JAK PRACUJEMY</div>
          <h2 style={{
            margin: '0 0 20px', fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: HC.white
          }}>Zaczynamy od zrozumienia miejsca w którym jesteś</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: HC.lavender
          }}>Każda osoba trafia do nas z inną historią i w innym momencie życia. Czasem punktem wyjścia jest konkretna dziedzina, innym razem spotkanie z ekspertem. Niezależnie od tego, wspólnie dobieramy podejście, które najlepiej odpowiada Twojej sytuacji.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {cards.map((c, i) =>
          <div key={i} style={{
            borderRadius: 16, padding: '16px',
            display: 'flex', flexDirection: 'column', gap: 16
          }}>
              <div style={{
              width: 50, height: 50, borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1.5px solid ${HC.lavender}`, color: HC.lavender,
              fontSize: 24, fontFamily: 'Playfair Display'
            }}>{c.icon}</div>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 22,
              letterSpacing: '-0.022em', color: HC.white, textAlign: "left", fontWeight: "400"
            }}>{c.title}</h3>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.5,
              color: HC.lavender
            }}>{c.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────── USŁUGI HOME — reuses UslugiCarousel from main components.jsx ──────────
function UslugiHome() {
  return <UslugiCarousel />;
}

// ────────── DLACZEGO WARTO ──────────
function DlaczegoWarto() {
  const points = [
  { title: 'Uważność zamiast schematów', body: 'Nie zakładamy jednej drogi dla wszystkich. Każda konsultacja i każda analiza opiera się na indywidualnym kontekście.' },
  { title: 'Różne specjalizacje, jeden standard jakości', body: 'Każdy ekspert wnosi własne doświadczenie i metodę pracy, ale łączy nas wspólny sposób myślenia: rzetelność, spokój i odpowiedzialność.' },
  { title: 'Zrozumienie, które porządkuje', body: 'Pomagamy zobaczyć więcej tam, gdzie pojawia się chaos, niepewność lub powtarzalność doświadczeń.' },
  { title: 'Przestrzeń do świadomych decyzji', body: 'Naszym celem nie jest dawanie gotowych recept, ale wspieranie Cię w lepszym rozumieniu siebie i swojej sytuacji.' }];

  return (
    <section style={{ background: HC.bg, padding: '80px 24px' }}>
      <div style={{
        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: HC.muted
          }}>DLACZEGO WARTO</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: HC.white
          }}>To co ważne, wymaga uważnego podejścia</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: HC.lavender
          }}>W pracy z człowiekiem nie ma miejsca na przypadkowość ani uproszczenia. Dlatego łączymy doświadczenie ekspertów, spokojny proces i podejście, które pomaga lepiej zrozumieć swoją sytuację.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {points.map((p, i) =>
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 24,
              color: HC.white, fontWeight: "400"
            }}>{p.title}</h3>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
              color: HC.lavender
            }}>{p.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────── EKSPERCI (3 cards grid) ──────────
const HOME_EXPERTS = [
{
  name: 'Konstancja Zahmala Lumia',
  role: 'Tarocistka',
  tags: ['Tarot', 'Intuicja'],
  bio: 'Pracuję z tarotem jako narzędziem rozmowy — nie z przyszłością, ale z tym, co już w Tobie jest.'
},
{
  name: 'Karolina Mardoll Kułakowska',
  role: 'Numerolog, Runista',
  tags: ['Numerologia', 'Runy'],
  bio: 'Łączę wiedzę duchową i tradycje nordyckie, tworząc podejście oparte na intuicji i wrażliwości.'
},
{
  name: 'Damian Orion',
  role: 'Astrolog, Astrokartograf',
  tags: ['Astrologia'],
  bio: 'Tłumaczę złożone układy w prosty sposób i pokazuję jak przełożyć je na realne decyzje.'
}];


function Eksperci() {
  return (
    <section style={{
      background: HC.bg, padding: '80px 24px',
      borderTop: `1px solid ${HC.muted}`, borderBottom: `1px solid ${HC.muted}`
    }}>
      <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: HC.muted, marginBottom: 20
          }}>EKSPERCI</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: HC.white
          }}>Znajdź eksperta dla siebie</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {HOME_EXPERTS.map((e, i) =>
          <div key={i} style={{
            borderRadius: 16, overflow: 'hidden',
            background: HC.bgDeep, border: `1px solid ${HC.muted}`,
            display: 'flex', flexDirection: 'column',
            transition: 'transform .3s, border-color .3s'
          }}
          onMouseEnter={(ev) => {ev.currentTarget.style.transform = 'translateY(-4px)';ev.currentTarget.style.borderColor = HC.gold;}}
          onMouseLeave={(ev) => {ev.currentTarget.style.transform = 'none';ev.currentTarget.style.borderColor = HC.muted;}}>
              <div style={{
              height: 240, background: `linear-gradient(135deg, ${HC.bgDeep} 0%, rgba(78,70,114,0.4) 100%)`,
              position: 'relative', overflow: 'hidden'
            }}>
                <img src="assets/expert.png" alt={e.name}
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%',
                filter: 'grayscale(15%) brightness(0.95)' }} />
                <div style={{
                position: 'absolute', top: 16, left: 16, display: 'flex', gap: 8
              }}>
                  {e.tags.map((t) =>
                <span key={t} style={{
                  padding: '4px 12px', borderRadius: 12,
                  background: 'rgba(6,11,24,0.75)', backdropFilter: 'blur(8px)',
                  fontFamily: 'Nunito', fontWeight: 700, fontSize: 12,
                  color: HC.gold, letterSpacing: '0.05em'
                }}>{t}</span>
                )}
                </div>
              </div>
              <div style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <h3 style={{
                margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 26,
                letterSpacing: '-0.022em', color: HC.white
              }}>{e.name}</h3>
                <div style={{
                fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
                color: HC.gold, letterSpacing: '0.05em'
              }}>{e.role}</div>
                <p style={{
                margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.5,
                color: HC.lavender
              }}>{e.bio}</p>
                <div style={{ marginTop: 8 }}>
                  <BtnSecond small>Poznaj eksperta</BtnSecond>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────── OPINIE (masonry testimonials) ──────────
const OPINIE = [
{ title: 'Jasność po latach', quote: 'Sesja dała mi to, czego nie potrafiłam sobie nazwać przez lata. Wyszłam z uczuciem porządku.', name: 'Anna K.' },
{ title: 'Spokój i kierunek', quote: 'Nie dostałam przepowiedni, a jasny ogląd sytuacji. Po sesji podjęłam decyzję, którą odwlekałam od miesięcy.', name: 'Magdalena R.' },
{ title: 'Głębokie wglądy', quote: 'Rozmowa, która zostaje w głowie na długo. Wracam do niej i każdego dnia znajduję nowe znaczenia.', name: 'Piotr Z.' },
{ title: 'Wartościowa przestrzeń', quote: 'Rzadko spotyka się tyle profesjonalizmu i uważności w jednej rozmowie. Polecam z całego serca.', name: 'Katarzyna W.' },
{ title: 'Nowy początek', quote: 'Astrologia Damiana otworzyła mi oczy na wzorce, których kompletnie nie widziałam. Dziękuję.', name: 'Julia O.' },
{ title: 'Doskonałe wsparcie', quote: 'Numerologia pokazała mi coś, czego szukałam od dawna — strukturę, która ma sens.', name: 'Beata L.' }];


function Opinie() {
  return (
    <section style={{
      background: HC.bg, padding: '80px 24px', overflow: 'hidden', position: 'relative'
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: HC.white
          }}>Opinie</h2>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
          alignItems: 'start'
        }}>
          {[0, 1, 2].map((col) =>
          <div key={col} style={{ display: 'flex', flexDirection: 'column', gap: 32,
            marginTop: col === 1 ? 0 : col === 2 ? 40 : 20
          }}>
              {OPINIE.filter((_, i) => i % 3 === col).map((o, i) =>
            <div key={i} style={{
              borderRadius: 16, background: HC.bgDeep,
              padding: 32, display: 'flex', flexDirection: 'column', gap: 24
            }}>
                  <h3 style={{
                margin: 0, fontFamily: 'Nunito', fontSize: 22,
                letterSpacing: '-0.022em', color: HC.white, fontWeight: "400"
              }}>{o.title}</h3>
                  <p style={{
                margin: 0, fontFamily: 'Roboto', fontSize: 16, lineHeight: 1.6,
                color: HC.lavender, fontStyle: 'italic'
              }}>„{o.quote}"</p>
                  <div style={{
                fontFamily: 'Roboto', fontWeight: 700, fontSize: 15,
                color: HC.gold
              }}>— {o.name}</div>
                </div>
            )}
            </div>
          )}
        </div>
      </div>
      {/* fade bottom */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 180,
        background: `linear-gradient(rgba(6,11,24,0) 0%, ${HC.bg} 100%)`,
        pointerEvents: 'none'
      }} />
    </section>);

}

// ────────── BLOG ──────────
const POSTS = [
{ date: '23.04.2026', title: 'Gdzie kończy się intuicja, a zaczynają nasze oczekiwania, lęki i potrzeba potwierdzenia?' },
{ date: '21.04.2026', title: 'Nie każda odpowiedź przynosi ulgę. Czasem najpierw przynosi porządek' },
{ date: '18.04.2026', title: 'Czy wszystko da się odczytać od razu? O czasie dojrzewania znaczeń' }];


function Blog() {
  return (
    <section style={{
      background: HC.bg, padding: '80px 24px',
      borderTop: `1px solid ${HC.muted}`, borderBottom: `1px solid ${HC.muted}`
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: HC.muted, marginBottom: 20
          }}>BLOG</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: HC.white
          }}>Wiedza, która pomaga zrozumieć</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {POSTS.map((p, i) =>
          <a key={i} href="#" style={{
            borderRadius: 16, border: '1px solid rgb(78, 70, 114)', padding: 32,
            display: 'flex', flexDirection: 'column', gap: 8,
            textDecoration: 'none', transition: 'border-color .3s, transform .3s',
            transform: 'none'
          }}>
              <div style={{
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 13,
              letterSpacing: '0.1em', color: HC.muted, marginBottom: 12
            }}>{p.date}</div>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 20,
              lineHeight: 1.4, color: HC.white, minHeight: 84, fontWeight: "400"
            }}>{p.title}</h3>
              <div style={{
              marginTop: 24, fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
              color: HC.gold
            }}>Czytaj artykuł →</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ────────── HOME CTA (with dust image) ──────────
function HomeCTA() {
  return (
    <section style={{
      position: 'relative', background: HC.bg,
      padding: '0 24px 80px', overflow: 'hidden', textAlign: 'center',
      minHeight: 720, display: 'flex', alignItems: 'flex-end', justifyContent: "center"
    }}>
      {/* Full-bleed background image — contain so full sparkle trail is visible */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/cta_pyl.jpg)',
        backgroundSize: 'contain',
        backgroundPosition: 'center top',
        backgroundRepeat: 'no-repeat',
        pointerEvents: 'none'
      }} />
      {/* Soft bottom fade for text legibility + seamless blend with section bg */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(6,11,24,0) 0%, rgba(6,11,24,0) 55%, ${HC.bg} 100%)`,
        pointerEvents: 'none'
      }} />
      <div style={{
        position: 'relative', maxWidth: 1156, margin: '0 auto',
        display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'center'
      }}>
        <h2 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: HC.white
        }}>Nie musisz znać dziś wszystkich odpowiedzi.<br />Wystarczy że zrobisz pierwszy świadomy krok.</h2>
        <p style={{
          margin: '0 0 16px', maxWidth: 786,
          fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
          color: HC.lavender
        }}>Skorzystaj z wiedzy i doświadczenia ekspertów, którzy pomogą Ci przyjrzeć się sobie z uważnością i spokojem.</p>
        <div style={{ display: 'flex', gap: 36 }}>
          <BtnSecond>Wybierz eksperta</BtnSecond>
          <BtnSecond>Znajdź usługę</BtnSecond>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  HomeHero, Dyscypliny, WstepHome, JakPracujemy,
  UslugiHome, DlaczegoWarto, Eksperci, Opinie, Blog, HomeCTA
});