const { useState, useRef, useEffect } = React;

// Color tokens from Figma
const C = {
  bg: 'rgb(6,11,24)',
  bgDeep: 'rgb(21,19,49)',
  gold: '#E6C79C',
  goldLight: '#FEE1B9',
  goldDark: '#9E7B4B',
  goldMid: 'rgb(194,149,89)',
  lavender: 'rgb(186,171,212)',
  muted: 'rgb(78,70,114)',
  peach: 'rgb(255,180,111)',
  peachLight: 'rgb(247,208,187)',
  white: 'rgb(255,255,255)',
  violet: 'rgba(59,39,172,0.5)'
};

// ────────── BUTTONS ──────────
// Design tokens per Figma (node 130:31711 default, 130:33667 hover)
// Default fill: linear-gradient(141deg, #E6C79C -2.33%, #9E7B4B 100.41%)
// Hover fill:   linear-gradient(141deg, #FEE1B9 -2.33%, #E6C79C 100.41%)
// No glow, no lift — just the gradient swap
const BTN_MAIN_GRADIENT = `linear-gradient(141deg, ${C.gold} -2.33%, ${C.goldDark} 100.41%)`;
const BTN_MAIN_GRADIENT_HOVER = `linear-gradient(141deg, ${C.goldLight} -2.33%, ${C.gold} 100.41%)`;

const BTN_BASE = {
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  fontFamily: 'Nunito', fontWeight: 700, letterSpacing: 0, whiteSpace: 'nowrap',
  cursor: 'pointer', borderRadius: 8,
  transition: 'background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease'
};

// Kept for back-compat with earlier call sites; now empty / unused shadows
const BTN_MAIN_SHADOW_DEFAULT = 'none';
const BTN_MAIN_SHADOW_HOVER = 'none';

// Inject button CSS once — gradients can't be transitioned via CSS, so we layer
// the hover gradient on a ::before pseudo and fade its opacity for a smooth swap.
(function injectBtnStyles() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('luna-btn-styles')) return;
  const s = document.createElement('style');
  s.id = 'luna-btn-styles';
  s.textContent = `
    .luna-btn-main { position: relative; isolation: isolate; }
    .luna-btn-main::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: ${BTN_MAIN_GRADIENT_HOVER};
      opacity: 0; transition: opacity .35s ease;
      z-index: -1; pointer-events: none;
    }
    .luna-btn-main:hover::before { opacity: 1; }
  `;
  document.head.appendChild(s);
})();

function BtnMain({ children, onClick, small, style }) {
  return (
    <button className="luna-btn-main" onClick={onClick} style={{
      ...BTN_BASE,
      padding: small ? '8px 24px' : '14px 32px',
      fontSize: small ? 14 : 16,
      border: 'none',
      background: BTN_MAIN_GRADIENT,
      color: C.bg,
      ...style
    }}>
      {children}
    </button>);
}

function BtnSecond({ children, onClick, small, style }) {
  return (
    <button onClick={onClick} style={{
      ...BTN_BASE,
      padding: small ? '8px 24px' : '14px 32px',
      fontSize: small ? 14 : 16,
      background: 'transparent',
      border: `1px solid ${C.gold}`,
      color: C.gold,
      ...style
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.borderColor = C.goldLight;
      e.currentTarget.style.color = C.goldLight;
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.borderColor = C.gold;
      e.currentTarget.style.color = C.gold;
    }}>
      {children}
    </button>);
}

// Kept as alias for back-compat; forwards to BtnMain small
function BtnMainSmall({ children, onClick, style }) {
  return <BtnMain small onClick={onClick} style={style}>{children}</BtnMain>;
}

// Circular nav arrow (carousels) — same button language
function RoundArrow({ dir = 'left', onClick, size = 48, style }) {
  return (
    <button onClick={onClick} aria-label={dir === 'left' ? 'Previous' : 'Next'} style={{
      ...BTN_BASE,
      width: size, height: size, borderRadius: '50%',
      background: 'rgba(6,11,24,0.8)', border: `1px solid ${C.gold}`,
      color: C.gold, fontSize: 22, padding: 0,
      ...style
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.background = BTN_MAIN_GRADIENT_HOVER;
      e.currentTarget.style.borderColor = C.goldLight;
      e.currentTarget.style.color = C.bg;
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.background = 'rgba(6,11,24,0.8)';
      e.currentTarget.style.borderColor = C.gold;
      e.currentTarget.style.color = C.gold;
    }}>{dir === 'left' ? '‹' : '›'}</button>
  );
}

// ────────── LOGO ──────────
function Logo({ size = 40, withText = true, color = C.gold }) {
  // simple crescent moon logo mark (based on logo 1.png shape — reduced geometry)
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <img src="assets/logo.png" alt="Luna" style={{ width: size, height: size * 1.25, objectFit: 'contain' }} />
      {withText &&
      <span style={{
        fontFamily: 'Playfair Display', fontSize: size * 0.6,
        color, letterSpacing: '0.05em'
      }}>Luna Persona Hermetica</span>
      }
    </div>);

}

// ────────── MENU ──────────
// Data for mega menus (derived from shared constants defined later in file)
const MENU_LINKS = [
  { label: 'Home', href: 'index.html' },
  { label: 'O nas', href: 'onas.html' },
  { label: 'Usługi', mega: 'services' },
  { label: 'Dyscypliny', mega: 'disciplines' }
];
const MENU_RIGHT_LINKS = [
  { label: 'Eksperci', mega: 'experts' },
  { label: 'Blog', href: 'blog.html' },
  { label: 'Kontakt', href: '#' }
];

// Disciplines: title (as used in SERVICES keys), tag (for dyscyplina page), short lead
const MENU_DISCIPLINES = [
  { key: 'Tarot', tag: 'TAROT', lead: 'Spotkanie z tym, co już w Tobie jest' },
  { key: 'Astrologia', tag: 'ASTROLOGIA', lead: 'Mapa Twojego potencjału i cykli' },
  { key: 'Numerologia', tag: 'NUMEROLOGIA', lead: 'Liczby jako język zrozumienia drogi' },
  { key: 'Runy', tag: 'RUNY', lead: 'Symbolika, która wspiera intencje' },
  { key: 'Chirologia', tag: 'CHIROLOGIA', lead: 'Predyspozycje zapisane w dłoni' }
];

const MENU_EXPERTS = [
  { name: 'Konstancja Zahmala Lumia', role: 'Tarocistka' },
  { name: 'Karolina Mardoll Kułakowska', role: 'Numerolog, Runista' },
  { name: 'Damian Orion', role: 'Astrolog, Astrokartograf' },
  { name: 'Lidia Dell', role: 'Chirolog' },
  { name: 'Marta Wiedźma', role: 'Tarocistka' },
  { name: 'Jan Astralny', role: 'Astrolog' }
];

function MenuLink({ item, active, onHover, isOpen }) {
  const isActive = active === item.label;
  const [hovered, setHovered] = useState(false);
  const color = isActive || hovered || isOpen ? C.gold : C.lavender;
  if (item.mega) {
    return (
      <button
        onMouseEnter={() => { setHovered(true); onHover(item.mega); }}
        onMouseLeave={() => setHovered(false)}
        onClick={() => onHover(isOpen ? null : item.mega)}
        style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 14,
          color, transition: 'color .2s',
          display: 'inline-flex', alignItems: 'center', gap: 6
        }}>
        {item.label}
        <span style={{ fontSize: 10, opacity: 0.8, transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>▾</span>
      </button>
    );
  }
  return (
    <a href={item.href} style={{
      fontFamily: 'Nunito', fontWeight: 500, fontSize: 14,
      color, textDecoration: 'none',
      transition: 'color .2s'
    }}
      onMouseEnter={(e) => { setHovered(true); onHover(null); e.currentTarget.style.color = C.gold; }}
      onMouseLeave={(e) => { setHovered(false); e.currentTarget.style.color = isActive ? C.gold : C.lavender; }}>
      {item.label}
    </a>
  );
}

function MegaServices() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32,
      padding: '40px 64px'
    }}>
      {MENU_DISCIPLINES.map(d => {
        const items = SERVICES[d.key] || [];
        return (
          <div key={d.key} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <a href="dyscyplina.html" style={{
              fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 20,
              letterSpacing: '-0.022em', color: C.gold, textDecoration: 'none',
              paddingBottom: 10, borderBottom: `1px solid ${C.muted}`,
              transition: 'color .2s'
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = C.goldLight}
              onMouseLeave={(e) => e.currentTarget.style.color = C.gold}>
              {d.key}
            </a>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(s => (
                <a key={s.title} href="usluga.html" style={{
                  fontFamily: 'Nunito', fontWeight: 500, fontSize: 14, lineHeight: 1.35,
                  color: C.lavender, textDecoration: 'none',
                  transition: 'color .2s'
                }}
                  onMouseEnter={(e) => e.currentTarget.style.color = C.gold}
                  onMouseLeave={(e) => e.currentTarget.style.color = C.lavender}>
                  {s.title}
                </a>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function MegaDisciplines() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24,
      padding: '40px 64px'
    }}>
      {MENU_DISCIPLINES.map(d => (
        <a key={d.key} href="dyscyplina.html" style={{
          display: 'flex', flexDirection: 'column', gap: 10,
          padding: '20px 20px', borderRadius: 12,
          border: `1px solid ${C.muted}`, background: 'rgba(21,19,49,0.5)',
          textDecoration: 'none',
          transition: 'border-color .25s, background .25s, transform .25s'
        }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderColor = C.gold;
            e.currentTarget.style.background = 'rgba(21,19,49,0.85)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderColor = C.muted;
            e.currentTarget.style.background = 'rgba(21,19,49,0.5)';
          }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 11, letterSpacing: '0.2em',
            color: C.muted
          }}>{d.tag}</div>
          <div style={{
            fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 22,
            letterSpacing: '-0.022em', color: C.gold
          }}>{d.key}</div>
          <div style={{
            fontFamily: 'Nunito', fontSize: 13, lineHeight: 1.4, color: C.lavender
          }}>{d.lead}</div>
        </a>
      ))}
    </div>
  );
}

function MegaExperts() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
      padding: '40px 64px'
    }}>
      {MENU_EXPERTS.map(e => (
        <a key={e.name} href="eksperci.html" style={{
          display: 'flex', gap: 14, alignItems: 'center',
          padding: '14px 16px', borderRadius: 12,
          textDecoration: 'none',
          transition: 'background .2s'
        }}
          onMouseEnter={(ev) => ev.currentTarget.style.background = 'rgba(21,19,49,0.7)'}
          onMouseLeave={(ev) => ev.currentTarget.style.background = 'transparent'}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: `linear-gradient(141deg, ${C.gold} -2.33%, ${C.goldDark} 100.41%)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Playfair Display', fontSize: 18, color: C.bg, fontWeight: 500,
            flexShrink: 0
          }}>{e.name.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
            <div style={{
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 14, color: C.white,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
            }}>{e.name}</div>
            <div style={{
              fontFamily: 'Nunito', fontSize: 12, color: C.lavender,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
            }}>{e.role}</div>
          </div>
        </a>
      ))}
    </div>
  );
}

function Menu({ active = 'Usługa' }) {
  const [scrolled, setScrolled] = useState(false);
  const [openMega, setOpenMega] = useState(null); // 'services' | 'disciplines' | 'experts' | null
  const closeTimer = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const openNow = (key) => {
    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
    setOpenMega(key);
  };
  const closeSoon = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setOpenMega(null), 140);
  };

  const Mega = openMega === 'services' ? MegaServices
    : openMega === 'disciplines' ? MegaDisciplines
    : openMega === 'experts' ? MegaExperts
    : null;

  return (
    <div onMouseLeave={closeSoon}>
      <div style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
        height: 84, display: 'flex', alignItems: 'center',
        padding: '0 64px',
        borderBottom: `1px solid ${C.muted}`,
        background: scrolled || openMega ? 'rgba(6,11,24,0.92)' : 'rgba(6,11,24,0.35)',
        backdropFilter: 'blur(40px)', WebkitBackdropFilter: 'blur(40px)',
        transition: 'background .3s'
      }}>
        <a href="index.html" aria-label="Luna Persona Hermetica" style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)',
          display: 'flex', alignItems: 'center', textDecoration: 'none'
        }}>
          <img src="assets/logo_header.svg" alt="Luna Persona Hermetica"
            style={{ height: 14, width: 'auto', display: 'block' }} />
        </a>

        <div style={{ display: 'flex', gap: 36, alignItems: 'center', flex: 1 }}
          onMouseEnter={() => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }}>
          {MENU_LINKS.map((item) =>
            <MenuLink
              key={item.label}
              item={item}
              active={active}
              isOpen={openMega === item.mega}
              onHover={(key) => key ? openNow(key) : closeSoon()}
            />
          )}
        </div>
        <div style={{ display: 'flex', gap: 36, alignItems: 'center', flex: 1, justifyContent: 'flex-end' }}
          onMouseEnter={() => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }}>
          {MENU_RIGHT_LINKS.map((item) =>
            <MenuLink
              key={item.label}
              item={item}
              active={active}
              isOpen={openMega === item.mega}
              onHover={(key) => key ? openNow(key) : closeSoon()}
            />
          )}
        </div>
      </div>

      {/* Mega menu panel */}
      <div style={{
        position: 'fixed', top: 84, left: 0, right: 0, zIndex: 99,
        background: 'rgba(6,11,24,0.95)',
        backdropFilter: 'blur(40px)', WebkitBackdropFilter: 'blur(40px)',
        borderBottom: `1px solid ${C.muted}`,
        opacity: openMega ? 1 : 0,
        transform: openMega ? 'translateY(0)' : 'translateY(-8px)',
        pointerEvents: openMega ? 'auto' : 'none',
        transition: 'opacity .25s ease, transform .25s ease'
      }}
        onMouseEnter={() => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }}
        onMouseLeave={closeSoon}>
        {Mega && <Mega />}
      </div>
    </div>);
}

// ────────── HERO ──────────
function Hero() {
  return (
    <section style={{
      position: 'relative', minHeight: 560, paddingTop: 84,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden'
    }}>
      {/* Background image */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(assets/hero-bg.png)`,
        backgroundSize: 'cover', backgroundPosition: 'center'
      }} />
      {/* Purple tint */}
      <div style={{
        position: 'absolute', inset: 0,
        background: C.violet
      }} />
      {/* Vignette gradients */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(${C.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%, ${C.bg} 100%)`
      }} />

      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 36,
        padding: '80px 40px 80px', textAlign: 'center', maxWidth: 1312
      }}>
        <span style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 20,
          letterSpacing: '0.4em', color: C.gold
        }}>TAROT</span>
        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontSize: 64, fontWeight: 400,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white,
          textWrap: 'balance'
        }}>Przyjżyj się temu,<br />co domaga się uwagi</h1>
        <p style={{
          margin: 0, maxWidth: 720,
          fontFamily: 'Nunito', fontSize: 18, fontWeight: 400, lineHeight: 1.5,
          color: C.lavender
        }}>Stawianie Tarota — indywidualna praca oparta na Twoim pytaniu, energii i aktualnej sytuacji.</p>
      </div>
    </section>);

}

// ────────── WSTĘP (Intro) ──────────
function Wstep() {
  return (
    <section style={{
      position: 'relative', background: C.bg,
      borderTop: `1px solid ${C.muted}`, borderBottom: `1px solid ${C.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',
          position: 'relative'
        }}>
          <img src="assets/tarot-rings.png" alt=""
          style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <span style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: C.muted
          }}>JAK WYGLĄDA SESJA</span>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontSize: 40, fontWeight: 400,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
          }}>To przestrzeń, w której nie dostajesz gotowych odpowiedzi ale zaczynasz widzieć, czuć i rozumieć więcej.</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
            color: C.lavender, maxWidth: 703
          }}>Tarot to nie jest przewidywanie przyszłości. To spotkanie z tym, co już w Tobie jest — tylko jeszcze nienazwane. Karty działają jak lustro: pokazują to, co czujesz, ale czego czasem nie potrafisz uchwycić albo dopuścić do głosu. Bez ocen, bez gotowych scenariuszy — tylko uważna rozmowa z Twoją intuicją.</p>
          <BtnMain style={{ alignSelf: 'flex-start' }}>Umów usługę</BtnMain>
        </div>
      </div>
    </section>);

}

// ────────── ZALETY (Advantages, 4 icon cards) ──────────
function Zalety() {
  const items = [
  { title: 'Uważność', icon: '☉' },
  { title: 'Indywidualne podejście', icon: '☾' },
  { title: 'Spokój', icon: '♀' },
  { title: 'Głębokie wglądy', icon: '✦' }];

  return (
    <section style={{ background: C.bg, padding: '80px 24px' }}>
      <div style={{ maxWidth: 1312, margin: '0 auto' }}>
        <p style={{
          margin: '0 0 48px', textAlign: 'center',
          fontFamily: 'Nunito', fontSize: 24, letterSpacing: '-0.022em', color: C.gold
        }}>Podczas sesji Tarota otrzymujesz:</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {items.map((it) =>
          <div key={it.title} style={{
            borderRadius: 16, padding: '16px',
            display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'center'
          }}>
              <div style={{
              width: 50, height: 50, borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1.5px solid ${C.peach}`, color: C.peach,
              fontSize: 26, fontFamily: 'Playfair Display'
            }}>{it.icon}</div>
              <span style={{
              fontFamily: 'Playfair Display', fontSize: 24,
              letterSpacing: '-0.022em', color: C.white, textAlign: 'center'
            }}>{it.title}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────── CO OBEJMUJE (How it works + accordion) ──────────
function CoObejmuje() {
  const sections = [
  { title: 'Podczas sesji zadajemy pytania takie jak:', body: 'Jaka jest energia tej relacji i co się w niej naprawdę dzieje? Jakie są intencje i odczucia drugiej osoby? Co ta relacja uruchamia w Tobie? Jaką rolę w niej przyjmujesz?' },
  { title: 'Schodzimy głębiej, aby zobaczyć:', body: 'Jakie schematy się powtarzają? Jaka lekcja stoi za tą sytuacją? Co wymaga uzdrowienia lub zrozumienia?' },
  { title: 'Przyglądamy się również temu, co może blokować rozwój:', body: 'Jakie są trudności i napięcia? Co nie działa i dlaczego?' },
  { title: 'Na koniec patrzymy na:', body: 'Potencjał i możliwy kierunek tej relacji oraz wskazówki, które pomogą Ci podjąć bardziej świadome decyzje.' }];

  return (
    <section style={{
      position: 'relative', background: C.bg,
      borderTop: `1px solid ${C.muted}`, borderBottom: `1px solid ${C.muted}`,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      {/* radial violet glow */}
      <div style={{
        position: 'absolute', width: 1200, height: 300,
        top: '40%', 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(-25deg)',
        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' }}>
          <span style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: C.muted
          }}>JAK TO WYGLĄDA?</span>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontSize: 40, fontWeight: 400,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
          }}>Podczas konsultacji nie skupiamy się na prostych odpowiedziach „tak/nie".</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
            color: C.lavender
          }}>Pracujemy poprzez świadome zadawanie pytań, które pozwalają dotrzeć głębiej do sedna Twojej sytuacji. Każda sesja jest indywidualna i oparta na Twoim temacie np. relacji, decyzji czy emocjach. Zamiast zgadywać przyszłość, wspólnie przyglądamy się temu, co naprawdę dzieje się tu i teraz.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {sections.map((s, i) =>
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontWeight: 400, fontSize: 22,
              color: C.white
            }}>{s.title}</h3>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
              color: C.lavender
            }}>{s.body}</p>
            </div>
          )}
          <BtnMain style={{ alignSelf: 'flex-start', marginTop: 12 }}>Umów usługę</BtnMain>
        </div>
      </div>
    </section>);

}

// ────────── JAK POMOŻE (benefits cards) ──────────
function JakPomoze() {
  const items = [
  { icon: '☽', title: 'Jasność i zrozumienie', body: 'Po sesji wychodzisz z większą jasnością i zrozumieniem swojej sytuacji.' },
  { icon: '✧', title: 'Szersza perspektywa', body: 'Zaczynasz widzieć to, co wcześniej było nieuchwytne- swoje emocje, schematy i realne możliwości.' },
  { icon: '◈', title: 'Łatwiejsze decyzje', body: 'Otrzymujesz również wskazówki, które pomagają podjąć decyzje bardziej świadomie i w zgodzie ze sobą.' },
  { icon: '♁', title: 'Pewność', body: 'To nie są gotowe odpowiedzi- to głębsze zrozumienie, które zostaje z Tobą na dłużej.' }];

  return (
    <section style={{ background: C.bg, padding: '80px 24px' }}>
      <div style={{ maxWidth: 1312, margin: '0 auto' }}>
        <div style={{ marginBottom: 48, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: C.muted, marginBottom: 20
          }}>JAK MOŻE CI POMÓC?</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontSize: 40, fontWeight: 400,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
          }}>Co wyniosę z takiej konsultacji?</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {items.map((it, i) =>
          <div key={i} style={{
            borderRadius: 16, padding: '8px 16px',
            display: 'flex', flexDirection: 'column', gap: 24
          }}>
              <div style={{
              width: 50, height: 50, borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1.5px solid ${C.lavender}`, color: C.lavender,
              fontSize: 24, fontFamily: 'Playfair Display'
            }}>{it.icon}</div>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontWeight: 400, fontSize: 22,
              letterSpacing: '-0.022em', color: C.white
            }}>{it.title}</h3>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.5,
              color: C.lavender
            }}>{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────── EKSPERT (Expert short, carousel) ──────────
const EXPERTS = [
{
  name: 'Konstancja Zahmala Lumia',
  role: 'Tarocistka, Przewodniczka w Pracy z Intuicją',
  bio: '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ś.'
},
{
  name: 'Karolina Mardoll Kułakowska',
  role: 'Numerolog, Runista',
  bio: 'W swojej pracy łączy wiedzę z zakresu duchowości oraz tradycji nordyckich, tworząc unikalne podejście oparte na intuicji, wrażliwości i głębokim rozumieniu ludzkiej natury. Karolina pomaga spojrzeć na życie z innej perspektywy.'
},
{
  name: 'Damian Orion',
  role: 'Astrolog, Astrokartograf',
  bio: 'Damian od lat pracuje jako astrolog z narzędziem zrozumienia człowieka i jego drogi. W swojej pracy skupia się na konkretach - tłumaczy złożone układy w prosty sposób i pokazuje jak przełożyć je na realne decyzje i codzienne życie.'
}];


function ExpertShort() {
  const [idx, setIdx] = useState(0);
  const e = EXPERTS[idx];
  return (
    <section style={{ background: C.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: C.bgDeep, position: 'relative'
        }}>
          <img src="assets/expert.png" alt={e.name}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />
        </div>
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center'
        }}>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontSize: 40, fontWeight: 400,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
          }}>{e.name}</h2>
          <div style={{
            fontFamily: 'Playfair Display', fontSize: 24,
            letterSpacing: '-0.022em', color: C.gold
          }}>{e.role}</div>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
            color: C.lavender, maxWidth: 800
          }}>{e.bio}</p>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginTop: 8 }}>
            <BtnSecond small>Poznaj eksperta</BtnSecond>
            <div style={{ display: 'flex', gap: 8, marginLeft: 16 }}>
              {EXPERTS.map((_, i) =>
              <button key={i} onClick={() => setIdx(i)} aria-label={`Expert ${i + 1}`} style={{
                width: 10, height: 10, borderRadius: '50%', border: 'none',
                padding: 0, cursor: 'pointer',
                background: i === idx ? C.gold : 'rgba(230,199,156,0.25)',
                transition: 'background .2s'
              }} />
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ────────── FAQ ──────────
const FAQS = [
{
  q: 'Czy muszę mieć konkretne pytanie przed sesją?',
  a: 'Nie, możesz przyjść zarówno z konkretnym pytaniem, jak i z ogólnym obszarem, który chcesz zrozumieć głębiej.\nPodczas konsultacji możemy wspólnie przyjrzeć się wybranemu obszarowi Twojego życia, np.:\n• relacji\n• decyzji zawodowej\n• kierunkowi życia\n• blokadom i emocjom\nJeśli nie masz sprecyzowanego pytania, pomogę Ci je odnaleźć i nazwać na początku sesji. Możesz też przyjść z gotowymi pytaniami - wtedy pracujemy dokładnie na tym, co jest dla Ciebie najważniejsze.'
},
{
  q: 'Czy sesja online jest tak samo skuteczna?',
  a: 'Tak, sesja online jest równie wartościowa jak spotkanie na żywo.\nW pracy z Tarotem najważniejsza jest energia, intencja i uważność, a nie fizyczna obecność. Nie potrzebujemy być w jednym miejscu, żeby połączyć się z Twoją sytuacją i pytaniem.\nPodczas konsultacji skupiam się na Twojej historii, emocjach i tym, z czym przychodzisz, to właśnie to tworzy przestrzeń do wglądu i odpowiedzi.\nWiele osób wręcz czuje się swobodniej online- we własnej przestrzeni, bez presji, w większym komforcie.'
},
{
  q: 'Co wyniosę z takiej konsultacji?',
  a: 'Po sesji wychodzisz z większą jasnością i zrozumieniem swojej sytuacji.\nZaczynasz widzieć to, co wcześniej było nieuchwytne- swoje emocje, schematy i realne możliwości.\nOtrzymujesz również wskazówki, które pomagają podjąć decyzje bardziej świadomie i w zgodzie ze sobą.\nTo nie są gotowe odpowiedzi- to głębsze zrozumienie, które zostaje z Tobą na dłużej.'
},
{
  q: 'Jak długo trwa jedna sesja?',
  a: 'Standardowa sesja trwa około 60-75 minut. To wystarczający czas, by spokojnie przejść przez Twoje pytanie, przyjrzeć się temu, co pokazują karty i wspólnie nazwać to, co ważne.'
},
{
  q: 'Czy mogę nagrać sesję?',
  a: 'Tak, sesję można nagrać - warto wrócić do niej później, bo wiele rzeczy układa się w całość dopiero po czasie. Po spotkaniu dostajesz również krótkie podsumowanie najważniejszych wątków.'
}];


function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{
      borderRadius: 16, background: C.bgDeep,
      padding: open ? '24px' : '20px 24px',
      transition: 'padding .2s'
    }}>
      <button onClick={onToggle} style={{
        width: '100%', display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', gap: 24, background: 'none', border: 'none', padding: 0,
        cursor: 'pointer', textAlign: 'left', color: C.white
      }}>
        <span style={{
          fontFamily: 'Nunito', fontWeight: 400, fontSize: 20,
          letterSpacing: '-0.022em', color: C.white
        }}>{q}</span>
        <span style={{
          width: 32, height: 32, flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `1px solid ${C.gold}`, color: C.gold, borderRadius: '50%',
          fontSize: 18, lineHeight: 1,
          transition: 'transform .3s',
          transform: open ? 'rotate(45deg)' : 'none'
        }}>+</span>
      </button>
      <div style={{
        overflow: 'hidden',
        maxHeight: open ? 600 : 0,
        opacity: open ? 1 : 0,
        transition: 'max-height .4s ease, opacity .3s ease, margin .3s',
        marginTop: open ? 16 : 0
      }}>
        <p style={{
          margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
          color: C.lavender, whiteSpace: 'pre-line'
        }}>{a}</p>
      </div>
    </div>);

}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section style={{
      background: C.bg, padding: '80px 24px',
      borderTop: `1px solid ${C.muted}`, borderBottom: `1px solid ${C.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: C.muted, marginBottom: 20
          }}>FAQ</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontSize: 40, fontWeight: 400,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
          }}>Najczęściej zadawane pytania</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {FAQS.map((f, i) =>
          <FAQItem key={i} q={f.q} a={f.a} open={open === i}
          onToggle={() => setOpen(open === i ? -1 : i)} />
          )}
        </div>
      </div>
    </section>);

}

// ────────── USŁUGI (carousel) ──────────
const SERVICES = {
  'Wszystko': null,
  'Numerologia': [
  { icon: '☽', tag: 'NUMEROLOGIA', title: 'Portret Numerologiczny', subtitle: 'Twoja historia zapisana w liczbach', body: 'Pogłębiona analiza oparta na dacie urodzenia oraz wszystkich imionach i nazwiskach. Poznasz kluczowe liczby związane z drogą życia.' },
  { icon: '☉', tag: 'NUMEROLOGIA', title: 'Numerologia Biznesu', subtitle: 'Liczby, które pracują dla Ciebie', body: 'Analiza wibracji firm, nazw, dat kluczowych wydarzeń, wspierająca świadome decyzje zawodowe.' },
  { icon: '✦', tag: 'NUMEROLOGIA', title: 'Imię Wzmacniające', subtitle: 'Energetyczna korekta', body: 'Dobór imienia lub pseudonimu, które wspiera Twoje naturalne talenty i wzmacnia zamierzony kierunek.' }],

  'Astrologia': [
  { icon: '♄', tag: 'ASTROLOGIA', title: 'Horoskop Natalny', subtitle: 'Mapa Twojego potencjału', body: 'Czytanie kosmogramu - Słońce, Księżyc, planety i domy. Zrozumienie wrodzonych predyspozycji i napięć.' },
  { icon: '♆', tag: 'ASTROLOGIA', title: 'Tranzyty', subtitle: 'Energia bieżącego czasu', body: 'Analiza aktualnych tranzytów i progresji, które pokazują aktywne tematy i cykle rozwoju w najbliższym czasie.' },
  { icon: '♅', tag: 'ASTROLOGIA', title: 'Astrokartografia', subtitle: 'Miejsca mocy', body: 'Poznaj miejsca na mapie, które wspierają konkretne obszary Twojego życia - karierę, miłość, wzrost.' }],

  'Chirologia': [
  { icon: '✋', tag: 'CHIROLOGIA', title: 'Analiza Dłoni', subtitle: 'Mapa Twoich predyspozycji', body: 'Pełny odczyt linii, wzgórz i kształtu dłoni. Spojrzenie na talenty, dynamikę życia i punkty zwrotne.' },
  { icon: '☼', tag: 'CHIROLOGIA', title: 'Kierunek Życia', subtitle: 'Co mówi linia losu', body: 'Skupiona analiza linii odnoszących się do kierunku, kariery i poczucia sensu - z praktycznymi rekomendacjami.' }],

  'Tarot': [
  { icon: '⚀', tag: 'TAROT', title: 'Stawianie Tarota', subtitle: 'Spotkanie z tym, co już w Tobie jest', body: 'Indywidualna sesja oparta na Twoim pytaniu, energii i aktualnej sytuacji - w duchu uważności, nie wróżenia.' },
  { icon: '⚁', tag: 'TAROT', title: 'Tarot Relacji', subtitle: 'Zobacz to, co między wami', body: 'Praca z dynamiką relacji - intencje, oczekiwania, realne możliwości, blokady i potencjał wspólnej drogi.' },
  { icon: '⚂', tag: 'TAROT', title: 'Tarot Roczny', subtitle: 'Rytm najbliższych miesięcy', body: 'Przegląd kluczowych energii na najbliższy rok z podziałem na miesiące, etapy i priorytety rozwoju.' }],

  'Runy': [
  { icon: 'ᚠ', tag: 'RUNY', title: 'Czytanie Run', subtitle: 'Głos nordyckiej tradycji', body: 'Sesja z runami jako narzędziem głębokiej refleksji - pytania o drogę, decyzje, moment w życiu.' },
  { icon: 'ᚢ', tag: 'RUNY', title: 'Runy Relacyjne', subtitle: 'Energia wspólnego pola', body: 'Praca z runami w kontekście relacji - to, co wspiera, to, co wymaga uwagi, to, co można wzmocnić.' }]

};

const CATEGORIES = Object.keys(SERVICES);

function ServiceCard({ item }) {
  return (
    <div style={{
      width: 421, minWidth: 421, height: 566,
      borderRadius: 16, background: C.bgDeep,
      padding: 32, display: 'flex', flexDirection: 'column', gap: 24,
      boxSizing: 'border-box'
    }}>
      <div style={{
        width: 72, height: 72, borderRadius: '50%',
        border: `1.5px solid ${C.gold}`, color: C.gold,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 34, fontFamily: 'Playfair Display'
      }}>{item.icon}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <h3 style={{
          margin: 0, fontFamily: 'Nunito', fontWeight: 400, fontSize: 32,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
        }}>{item.title}</h3>
        <div style={{
          fontFamily: 'Nunito', fontSize: 18,
          lineHeight: 1.5, color: C.gold, fontWeight: "400"
        }}>{item.subtitle}</div>
      </div>
      <p style={{
        margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
        color: C.lavender, flex: 1
      }}>{item.body}</p>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
        <div style={{
          padding: '4px 16px', borderRadius: 4,
          background: 'rgba(78,70,114,0.2)',
          fontFamily: 'Nunito', fontWeight: 400, fontSize: 13,
          letterSpacing: '0.05em', color: C.lavender
        }}>{item.tag}</div>
      </div>
      <BtnMainSmall>Poznaj szczegóły</BtnMainSmall>
    </div>);

}

function UslugiCarousel() {
  const [cat, setCat] = useState('Wszystko');
  const trackRef = useRef(null);

  const items = cat === 'Wszystko' ?
  CATEGORIES.slice(1).flatMap((c) => SERVICES[c]) :
  SERVICES[cat];

  const scroll = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * 445, behavior: 'smooth' });
  };

  return (
    <section style={{
      background: C.bg, padding: '80px 24px',
      borderTop: `1px solid ${C.muted}`, borderBottom: `1px solid ${C.muted}`
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: C.muted, marginBottom: 20
          }}>USŁUGI</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontSize: 40, fontWeight: 400,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
          }}>Zobacz pozostałe usługi</h2>
        </div>

        {/* Category tabs */}
        <div style={{
          display: 'flex', gap: 20, justifyContent: 'center',
          flexWrap: 'wrap', marginBottom: 48
        }}>
          {CATEGORIES.map((c) => {
            const active = c === cat;
            return (
              <button key={c} onClick={() => setCat(c)} style={{
                ...BTN_BASE,
                padding: '8px 24px',
                fontSize: 14,
                background: active ? `linear-gradient(${C.gold} 0%, ${C.goldDark} 100%)` : 'transparent',
                border: `1px solid ${active ? C.gold : C.muted}`,
                color: active ? C.bg : C.lavender,
                boxShadow: active ? BTN_MAIN_SHADOW_DEFAULT : 'none'
              }}
              onMouseEnter={(e) => {
                if (active) return;
                e.currentTarget.style.borderColor = C.gold;
                e.currentTarget.style.color = C.gold;
              }}
              onMouseLeave={(e) => {
                if (active) return;
                e.currentTarget.style.borderColor = C.muted;
                e.currentTarget.style.color = C.lavender;
              }}>{c}</button>);
          })}
        </div>

        {/* Carousel */}
        <div style={{ position: 'relative' }}>
          <div ref={trackRef} style={{
            display: 'flex', gap: 24, overflowX: 'auto',
            scrollSnapType: 'x mandatory', scrollBehavior: 'smooth',
            paddingBottom: 12
          }}>
            {items.map((it, i) =>
            <div key={`${cat}-${i}`} style={{ scrollSnapAlign: 'start' }}>
                <ServiceCard item={it} />
              </div>
            )}
          </div>
          {/* Prev / Next */}
          <RoundArrow dir="left" onClick={() => scroll(-1)} style={{
            position: 'absolute', top: '50%', left: -24, transform: 'translateY(-50%)'
          }} />
          <RoundArrow dir="right" onClick={() => scroll(1)} style={{
            position: 'absolute', top: '50%', right: -24, transform: 'translateY(-50%)'
          }} />
        </div>
      </div>
    </section>);

}

// ────────── CTA ──────────
function CTA() {
  return (
    <section style={{
      position: 'relative', background: C.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%, ${C.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', fontSize: 48, fontWeight: 400,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
        }}>Jeśli czujesz, że to dobry moment, by przyjrzeć się<br />swojej sytuacji głębiej, możesz zacząć właśnie tutaj.</h2>
        <p style={{
          margin: '0 0 16px', maxWidth: 786,
          fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
          color: C.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>);

}

function StarSparks() {
  const stars = React.useMemo(() =>
  Array.from({ length: 40 }).map((_, i) => ({
    x: Math.random() * 100, y: Math.random() * 100,
    s: 1 + Math.random() * 2, delay: Math.random() * 5
  })),
  []);
  return (
    <>
      {stars.map((st, i) =>
      <div key={i} style={{
        position: 'absolute', left: `${st.x}%`, top: `${st.y}%`,
        width: st.s, height: st.s, borderRadius: '50%',
        background: C.gold, boxShadow: `0 0 ${st.s * 3}px ${C.gold}`,
        animation: `twinkle 3s ease-in-out ${st.delay}s infinite`
      }} />
      )}
    </>);

}

// ────────── FOOTER ──────────
function Footer() {
  return (
    <footer style={{ background: C.bg, borderTop: `1px solid ${C.muted}` }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '40px 40px',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 64
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <img src="assets/logo_footer.svg" alt="Luna Persona Hermetica" style={{ height: 64, width: 'auto', display: 'block', alignSelf: 'flex-start' }} />
          <a href="mailto:kontakt@lunapersona.pl" style={{
            fontFamily: 'Nunito', fontWeight: 400, fontSize: 28,
            color: C.lavender, textDecoration: 'none', letterSpacing: '-0.01em'
          }}>kontakt@lunapersona.pl</a>
          <div style={{ display: 'flex', gap: 12 }}>
            {['f', 'ig', 'X', 'in', 'YT'].map((s) =>
            <a key={s} href="#" style={{
              width: 32, height: 32, borderRadius: '50%',
              border: `1px solid ${C.lavender}`, color: C.lavender,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontFamily: 'Nunito', fontWeight: 700,
              textDecoration: 'none'
            }}>{s}</a>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {['Strona Główna', 'O nas', 'Usługi', 'Eksperci', 'Dyscypliny', 'Blog'].map((l) =>
          <a key={l} href="#" style={{
            fontFamily: 'Nunito', fontWeight: 400, fontSize: 16, color: C.gold,
            textDecoration: 'none'
          }}>{l}</a>
          )}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {['Tarot', 'Astrologia', 'Numerologia', 'Runy', 'Chirologia', 'Ajurweda'].map((l) =>
          <a key={l} href="#" style={{
            fontFamily: 'Nunito', fontWeight: 400, fontSize: 16, color: C.gold,
            textDecoration: 'none'
          }}>{l}</a>
          )}
        </div>
      </div>
      <div style={{
        borderTop: `1px solid ${C.muted}`,
        padding: '24px 40px',
        maxWidth: 1312, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'Roboto', fontSize: 14, color: C.muted
      }}>
        <span>© 2026 Luna Persona. Wszystkie prawa zastrzeżone.</span>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="#" style={{ color: C.muted, textDecoration: 'underline' }}>Polityka Prywatności</a>
          <a href="#" style={{ color: C.muted, textDecoration: 'underline' }}>Cookies</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Menu, Hero, Wstep, Zalety, CoObejmuje, JakPomoze,
  ExpertShort, FAQ, UslugiCarousel, CTA, Footer,
  BtnMain, BtnSecond, BtnMainSmall, RoundArrow, Logo, StarSparks, C,
  BTN_BASE, BTN_MAIN_SHADOW_DEFAULT, BTN_MAIN_SHADOW_HOVER
});