/* global React */
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)'
};

// ────────── DISCIPLINE HERO (compact, no buttons) ──────────
function DiscHero({ tag = 'TAROT', title = 'Rozmowa z intuicją' }) {
  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: DC.violet }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(${DC.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%, ${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
        }}>{tag}</span>
        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 64,
          lineHeight: 1.15, letterSpacing: '-0.022em', color: DC.white,
          textWrap: 'balance'
        }}>{title}</h1>
        <p style={{
          margin: 0, maxWidth: 720,
          fontFamily: 'Nunito', fontSize: 18, lineHeight: 1.5,
          color: DC.lavender
        }}>Znajdź odpowiedzi dzięki analizom i konsultacjom prowadzonym przez doświadczonych ekspertów.</p>
      </div>
    </section>);

}

// ────────── WSTĘP (rings + two paragraphs) ──────────
function DiscWstep() {
  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/tarot-rings.png" alt=""
          style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
        </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
          }}>Tarot to nie jest przewidywanie przyszłości. To spotkanie z tym, co już w Tobie jest — tylko jeszcze nienazwane.</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: DC.lavender, maxWidth: 703
          }}>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.</p>
        </div>
      </div>
    </section>);

}

// ────────── DLA KOGO (3 icon columns) ──────────
function DlaKogo() {
  const items = [
  { icon: '☾', 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.' },
  { icon: '◉', 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.' },
  { icon: '✦', title: 'Jeśli masz pytania, które wracają', body: 'Tarot daje wgląd i kierunek.' },
  { icon: '☉', title: 'Dla osób pracujących nad sobą', body: 'To narzędzie, które pogłębia świadomość i pomaga lepiej rozumieć swoje schematy.' }];

  return (
    <section style={{ background: DC.bg, padding: '80px 24px' }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ marginBottom: 64, maxWidth: 644 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: DC.muted, marginBottom: 20
          }}>DLA KOGO?</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: DC.white
          }}>Dla osób, które stoją<br />przed decyzją</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {items.map((it, i) =>
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', gap: 24,
            padding: '0 16px'
          }}>
              <div style={{
              width: 50, height: 50, borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1.5px solid ${DC.lavender}`, color: DC.lavender,
              fontSize: 24, fontFamily: 'Playfair Display'
            }}>{it.icon}</div>
              <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 (2 large cards) ──────────
const JAK_CARDS = [
{
  tag: 'TAROT',
  title: 'Dywinacja Tarota',
  subtitle: 'Zobacz wyraźniej to, co się dzieje',
  body: 'To forma wglądu, która pomaga lepiej zrozumieć aktualny moment, powtarzające się napięcia i możliwe kierunki rozwoju sytuacji. Sprawdza się szczególnie wtedy, gdy potrzebujesz jasności, porządku i spokojnego przyjrzenia się temu, co się dzieje.',
  icon: '⚀'
},
{
  tag: 'TAROT',
  title: 'Stawianie Tarota',
  subtitle: 'Przyjrzyj się temu, co domaga się uwagi',
  body: 'Tarot pozwala skupić się na konkretnym pytaniu lub obszarze życia i zobaczyć go w bardziej uporządkowany sposób. Pomaga uchwycić zależności, które trudno dostrzec z poziomu codziennych emocji i myśli. Wspiera głębsze rozumienie dynamiki momentów.',
  icon: '⚁'
}];


function JakPomozemy() {
  return (
    <section style={{
      position: 'relative', background: DC.bg,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', width: 1200, height: 300,
        top: '50%', left: '-10%',
        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' }}>
        <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>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {JAK_CARDS.map((c, i) =>
          <div key={i} style={{
            borderRadius: 16, background: DC.bgDeep,
            padding: 32, display: 'flex', flexDirection: 'column', gap: 20,
            transition: 'transform .3s, box-shadow .3s',
            transform: 'none', boxShadow: 'none'
          }}>
              <div style={{
              width: 60, height: 60, borderRadius: '50%',
              border: `1.5px solid ${DC.gold}`, color: DC.gold,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 28, fontFamily: 'Playfair Display'
            }}>{c.icon}</div>
              <div style={{
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 12,
              letterSpacing: '0.2em', color: DC.muted
            }}>{c.tag}</div>
              <h3 style={{
              margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 32,
              letterSpacing: '-0.022em', color: DC.white
            }}>{c.title}</h3>
              <div style={{
              fontFamily: 'Nunito', fontSize: 18,
              color: DC.gold, lineHeight: 1.4, fontWeight: "400"
            }}>{c.subtitle}</div>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6,
              color: DC.lavender
            }}>{c.body}</p>
              <div style={{ marginTop: 8 }}>
                <BtnMainSmall>Poznaj szczegóły</BtnMainSmall>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────── EXPERT SHORT (single card) ──────────
function DiscExpert() {
  return (
    <section style={{ background: DC.bg, padding: '80px 24px' }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '314px 1fr', gap: 64
      }}>
        <div style={{
          width: 314, height: 317, borderRadius: 16, overflow: 'hidden',
          background: DC.bgDeep, position: 'relative'
        }}>
          <img src="assets/expert-konsta.png" alt="Konstancja"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%' }} />
        </div>
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center'
        }}>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: DC.white
          }}>Konstancja Zahmala Lumia</h2>
          <div style={{
            fontFamily: 'Playfair Display', fontSize: 24,
            letterSpacing: '-0.022em', color: DC.gold
          }}>Tarocistka, Przewodniczka w Pracy z Intuicją</div>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: DC.lavender, maxWidth: 900
          }}>Urodzona pod mistrzowską energią, od zawsze czułam i widziałam więcej niż inni. Pracuję 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ś.</p>
          <div style={{ marginTop: 8 }}>
            <BtnSecond small>Poznaj eksperta</BtnSecond>
          </div>
        </div>
      </div>
    </section>);

}

// ────────── CO OBEJMUJE (left text + right checklist) ──────────
function CoObejmuje2() {
  const points = [
  { 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.' }];

  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: 'absolute', width: 1400, height: 300,
        top: '30%', right: '-15%',
        background: 'radial-gradient(ellipse, rgb(21,20,53) 0%, rgba(21,20,53,0.5) 39%, rgba(21,20,53,0) 100%)',
        transform: 'rotate(-20deg)', pointerEvents: 'none'
      }} />
      <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: 'center' }}>
          <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
          }}>To indywidualna praca oparta na Twoim pytaniu, energii i aktualnej sytuacji.</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
            color: DC.lavender
          }}>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.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {points.map((p, i) =>
          <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
              <div style={{
              width: 32, height: 32, flexShrink: 0, borderRadius: '50%',
              border: `1px solid ${DC.gold}`, color: DC.gold,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Playfair Display', fontSize: 16,
              marginTop: 2
            }}>{i + 1}</div>
              <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) ──────────
const DISC_POSTS = [
{ date: '23.04.2026', title: 'Między intuicją a projekcją. Jak odróżnić prawdziwy wgląd od tego, co chcemy usłyszeć' },
{ 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 BlogRelated() {
  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={{ textAlign: 'center', 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: 40,
            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 }}>
          {DISC_POSTS.map((p, i) =>
          <a key={i} href="#" style={{
            borderRadius: 16, border: `1px solid ${DC.muted}`, padding: 32,
            display: 'flex', flexDirection: 'column', gap: 8,
            textDecoration: 'none', transition: 'border-color .3s, transform .3s'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = DC.gold;e.currentTarget.style.transform = 'translateY(-4px)';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = DC.muted;e.currentTarget.style.transform = 'none';}}>
              <div style={{
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 13,
              letterSpacing: '0.1em', color: DC.muted, marginBottom: 12
            }}>{p.date}</div>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 20,
              lineHeight: 1.4, color: DC.white, minHeight: 112, fontWeight: "400"
            }}>{p.title}</h3>
              <div style={{
              marginTop: 16, fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
              color: DC.gold
            }}>Czytaj artykuł →</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ────────── DISC CTA (with dust image) ──────────
function DiscCTA() {
  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
        }}>Zobacz wyraźniej to, co się dzieje</h2>
        <p style={{
          margin: '0 0 16px', maxWidth: 820,
          fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
          color: DC.lavender
        }}>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.</p>
        <div style={{ display: 'flex', gap: 36 }}>
          <BtnSecond>Wybierz usługę</BtnSecond>
          <BtnSecond>Skontaktuj się z nami</BtnSecond>
        </div>
      </div>
    </section>);

}

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