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; }
    .luna-zaleta-tile:hover {
      border-color: ${C.gold} !important;
      transform: translateY(-4px);
      background: rgba(230,199,156,0.06) !important;
    }
  `;
  document.head.appendChild(s);
})();

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

function BtnSecond({ children, onClick, small, style, href }) {
  const Tag = href ? 'a' : 'button';
  return (
    <Tag onClick={onClick} href={href} style={{
      ...BTN_BASE,
      padding: small ? '8px 24px' : '14px 32px',
      fontSize: small ? 14 : 16,
      background: 'transparent',
      border: `1px solid ${C.gold}`,
      color: C.gold,
      textDecoration: 'none',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      ...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}
    </Tag>);
}

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

// Slug helper for service subpages — strips Polish diacritics + non-alphanum
function serviceSlug(title) {
  const map = { 'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ż': 'z', 'ź': 'z' };
  return String(title || '').toLowerCase().replace(/[ąćęłńóśżź]/g, (ch) => map[ch] || ch).replace(/[^a-z0-9]/g, '');
}

// Circular nav arrow (carousels) — same button language
function RoundArrow({ dir = 'left', onClick, size = 48, style, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} aria-label={dir === 'left' ? 'Previous' : 'Next'} style={{
      ...BTN_BASE,
      width: size, height: size, borderRadius: '50%',
      background: 'transparent', border: `1px solid ${C.gold}`,
      color: C.gold, fontSize: 32, lineHeight: 1, padding: 0,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      opacity: disabled ? 0.4 : 1,
      cursor: disabled ? 'default' : 'pointer',
      ...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;
    }}>{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' }];

const MENU_RIGHT_LINKS = [
{ label: 'Eksperci', mega: 'experts' },
{ label: 'Blog', href: 'blog.html' },
{ label: '__account__' }];


// 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' },
{ key: 'Energia', tag: 'ENERGIA', lead: 'Praca z polem energetycznym' }];

// Discipline tag → subpage href.
const DISCIPLINE_HREFS = {
  TAROT: 'tarot.html',
  RUNY: 'runy.html',
  NUMEROLOGIA: 'numerologia.html',
  ASTROLOGIA: 'astrologia.html',
  CHIROLOGIA: 'chirologia.html',
  ENERGIA: 'energia.html'
};
function discHref(tag) {return DISCIPLINE_HREFS[tag] || '#';}
window.DISCIPLINE_HREFS = DISCIPLINE_HREFS;
window.discHref = discHref;

const MENU_EXPERTS = [
{ name: 'Konstancja Zahmala Lumia', role: 'Tarocistka' },
{ name: 'Tomasz Buniek', role: 'Numerolog, Runista' },
{ name: 'Olga Konieczna', role: 'Astrolog, Astrokartograf' },
{ name: 'Karolina Mardoll Kułakowska', role: 'Analityk Duszy' },
{ name: 'Karol Majewski', role: 'Chiromanta' }];

// Mapa nazwa eksperta → href podstrony. '#' = podstrona jeszcze nie istnieje.
const EXPERT_HREFS = {
  'Konstancja Zahmala Lumia': 'konstancjazahmalalumia.html',
  'Tomasz Buniek': 'tomaszbuniek.html',
  'Olga Konieczna': 'olgakonieczna.html',
  'Karolina Mardoll Kułakowska': 'karolinamardoll.html',
  'Karol Majewski': 'karolmajewski.html'
};
function expertHref(name) {
  return EXPERT_HREFS[name] || '#';
}
window.EXPERT_HREFS = EXPERT_HREFS;
window.expertHref = expertHref;


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(6, 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={discHref(d.tag)} 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={`${serviceSlug(s.title)}.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={discHref(d.tag)} 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={e.slug ? e.slug + '.html' : expertHref(e.name)} 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 MobileNav({ open, onClose }) {
  const [expanded, setExpanded] = useState(null); // 'uslugi' | 'dyscypliny' | 'eksperci' | null
  const toggle = (key) => setExpanded((v) => v === key ? null : key);
  const Arrow = ({ open }) =>
  <span style={{
    display: 'inline-block', marginLeft: 'auto',
    transform: open ? 'rotate(180deg)' : 'none',
    transition: 'transform .2s',
    color: C.gold, fontSize: 12, lineHeight: 1
  }}>▾</span>;
  const usl = [
  ['Stawianie Tarota', 'stawianietarota.html'],
  ['Karty Wyroczni', 'kartywyroczni.html'],
  ['Kosmogram', 'kosmogram.html'],
  ['Astrokartografia', 'astrokartografia.html'],
  ['Portret Numerologiczny', 'portretnumerologiczny.html'],
  ['Nadawanie Imion', 'nadawanieimionwzmacniajacych.html'],
  ['Numerologia Biznesu', 'biznesowakonsultacjanumerologiczna.html'],
  ['Bindruny', 'tworzeniebindrun.html'],
  ['Analiza Dłoni', 'analizadloni.html'],
  ['Lunarny Portret Duszy', 'lunarnyportretduszy.html'],
  ['Odczyt Energetyczny', 'odczytenergetyczny.html'],
  ['Analiza Duszy', 'analizaduszy.html']];

  const dys = [
  ['Tarot', 'tarot.html'],
  ['Astrologia', 'astrologia.html'],
  ['Numerologia', 'numerologia.html'],
  ['Runy', 'runy.html'],
  ['Chirologia', 'chirologia.html'],
  ['Energia', 'energia.html']];

  const eks = [
  ['Konstancja Zahmala Lumia', 'konstancjazahmalalumia.html'],
  ['Tomasz Buniek', 'tomaszbuniek.html'],
  ['Olga Konieczna', 'olgakonieczna.html'],
  ['Karolina Mardoll Kułakowska', 'karolinamardoll.html'],
  ['Karol Majewski', 'karolmajewski.html']];

  return (
    <div className={`luna-mobile-nav ${open ? 'open' : ''}`}>
      <a href="index.html" className="luna-mn-item">Home</a>
      <a href="onas.html" className="luna-mn-item">O nas</a>

      <button type="button" className="luna-mn-item luna-mn-toggle" onClick={() => toggle('uslugi')}>
        <span>Usługi</span>
        <Arrow open={expanded === 'uslugi'} />
      </button>
      <div className={`luna-mn-sub ${expanded === 'uslugi' ? 'open' : ''}`}>
        {usl.map(([l, h]) => <a key={h} href={h} className="luna-mn-sub-item">{l}</a>)}
      </div>

      <button type="button" className="luna-mn-item luna-mn-toggle" onClick={() => toggle('dyscypliny')}>
        <span>Dyscypliny</span>
        <Arrow open={expanded === 'dyscypliny'} />
      </button>
      <div className={`luna-mn-sub ${expanded === 'dyscypliny' ? 'open' : ''}`}>
        {dys.map(([l, h]) => <a key={h} href={h} className="luna-mn-sub-item">{l}</a>)}
      </div>

      <button type="button" className="luna-mn-item luna-mn-toggle" onClick={() => toggle('eksperci')}>
        <span>Eksperci</span>
        <Arrow open={expanded === 'eksperci'} />
      </button>
      <div className={`luna-mn-sub ${expanded === 'eksperci' ? 'open' : ''}`}>
        {eks.map(([l, h]) => <a key={h} href={h} className="luna-mn-sub-item">{l}</a>)}
      </div>

      <a href="blog.html" className="luna-mn-item">Blog</a>
      {typeof window !== 'undefined' && window.getCurrentUser && window.getCurrentUser()
        ? <a href="moje-konto.html" className="luna-mn-item">Moje konto</a>
        : <a href="login.html" className="luna-mn-item">Zaloguj się</a>
      }
    </div>);
}

function Menu({ active = 'Usługa' }) {
  useExpertsTickLocal(); // re-render when MENU_EXPERTS is populated from DB
  const [scrolled, setScrolled] = useState(false);
  const [openMega, setOpenMega] = useState(null); // 'services' | 'disciplines' | 'experts' | null
  const [mobileOpen, setMobileOpen] = useState(false);
  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',

        borderBottom: `1px solid ${C.muted}`,
        background: scrolled || openMega || mobileOpen ? 'rgba(6,11,24,0.92)' : 'rgba(6,11,24,0.35)',
        backdropFilter: 'blur(40px)', WebkitBackdropFilter: 'blur(40px)',
        transition: 'background .3s', padding: '0 64px'
      }}>
        <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 className="luna-nav-links" 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 className="luna-nav-links" 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) => {
            if (item.label === '__account__') {
              return (typeof window !== 'undefined' && window.AccountMenuLink)
                ? <window.AccountMenuLink key="account" />
                : null;
            }
            return (
              <MenuLink
                key={item.label}
                item={item}
                active={active}
                isOpen={openMega === item.mega}
                onHover={(key) => key ? openNow(key) : closeSoon()} />
            );
          })}
        </div>

        {/* Mobile hamburger toggle (hidden on desktop via responsive.css) */}
        <button
          className="luna-mobile-toggle"
          aria-label="Menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((v) => !v)}
          style={{
            marginLeft: 'auto',
            width: 40, height: 40,
            background: 'transparent', border: 'none', cursor: 'pointer',
            padding: 0, alignItems: 'center', justifyContent: 'center',
            position: 'relative', zIndex: 101
          }}>
          <span style={{ display: 'block', width: 22, height: 14, position: 'relative' }}>
            <span style={{
              position: 'absolute', left: 0, right: 0, height: 2, background: C.gold,
              top: mobileOpen ? 6 : 0,
              transform: mobileOpen ? 'rotate(45deg)' : 'none',
              transition: 'transform .25s, top .25s'
            }} />
            <span style={{
              position: 'absolute', left: 0, right: 0, height: 2, background: C.gold, top: 6,
              opacity: mobileOpen ? 0 : 1, transition: 'opacity .2s'
            }} />
            <span style={{
              position: 'absolute', left: 0, right: 0, height: 2, background: C.gold,
              top: mobileOpen ? 6 : 12,
              transform: mobileOpen ? 'rotate(-45deg)' : 'none',
              transition: 'transform .25s, top .25s'
            }} />
          </span>
        </button>
      </div>

      {/* Mobile nav panel — hidden on desktop, slides down on mobile */}
      <MobileNav open={mobileOpen} onClose={() => setMobileOpen(false)} />

      {/* 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 getServiceData() {
  const slug = typeof window !== 'undefined' && window.SERVICE_SLUG || 'stawianietarota';
  const all = typeof window !== 'undefined' && window.SERVICE_PAGES || {};
  return all[slug] || all.stawianietarota || null;
}

// Re-render hook: components subscribe to this so when service-pages.jsx finishes
// its async fetch from /api/public/content, every <Hero>, <Wstep>, <Zalety>, ...
// re-runs with the freshly populated window.SERVICE_PAGES[slug].
function useServiceData() {
  const [, tick] = React.useState(0);
  React.useEffect(() => {
    const f = () => tick((t) => t + 1);
    window.addEventListener('luna-service-loaded', f);
    return () => window.removeEventListener('luna-service-loaded', f);
  }, []);
  return getServiceData();
}

// Friendly service name shown in service-page hero above the headline.
const SERVICE_NAMES = {
  stawianietarota: 'Stawianie Tarota',
  kartywyroczni: 'Karty Wyroczni',
  lunarnyportretduszy: 'Lunarny Portret Duszy',
  odczytenergetyczny: 'Odczyt Energetyczny',
  analizaduszy: 'Analiza Duszy',
  kosmogram: 'Kosmogram',
  astrokartografia: 'Astrokartografia',
  portretnumerologiczny: 'Portret Numerologiczny',
  nadawanieimionwzmacniajacych: 'Nadawanie Imion Wzmacniających',
  biznesowakonsultacjanumerologiczna: 'Biznesowa Konsultacja Numerologiczna',
  tworzeniebindrun: 'Tworzenie Bindrun',
  runyochronneitalizmany: 'Runy Ochronne i Talizmany',
  analizadloni: 'Analiza Dłoni'
};
function getServiceName() {
  const slug = typeof window !== 'undefined' && window.SERVICE_SLUG || 'stawianietarota';
  return SERVICE_NAMES[slug] || null;
}

function Hero() {
  const sd = useServiceData();
  const tag = (getServiceName() || (sd ? sd.tag : 'TAROT')).toUpperCase();
  const title = sd ? sd.hero.title : 'Przyjrzyj się temu,\nco domaga się uwagi';
  const lead = sd ? sd.hero.lead : '';
  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'
      }} />
      {/* Vignette gradients */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(${C.bg} 0%, rgba(6,11,24,0) 18%, rgba(6,11,24,0) 82%, ${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
        }}>{tag}</span>
        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontSize: 64, fontWeight: 400,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white,
          textWrap: 'balance', whiteSpace: 'pre-line'
        }}>{title}</h1>
        <p style={{
          margin: 0, maxWidth: 720,
          fontFamily: 'Nunito', fontSize: 18, fontWeight: 400, lineHeight: 1.5,
          color: C.lavender
        }}>{lead}</p>
      </div>
    </section>);

}

// ────────── WSTĘP (Intro) ──────────
function Wstep() {
  const sd = useServiceData();
  const label = sd ? sd.wstep.label : 'JAK WYGLĄDA SESJA';
  const headline = sd ? sd.wstep.headline : '';
  const body = sd ? sd.wstep.body : '';
  const illustration = sd ? sd.illustration : 'assets/stawianie.svg';
  const illustrationScale = sd && sd.illustrationScale ? sd.illustrationScale : 1;
  return (
    <section style={{
      position: 'relative', background: C.bg,
      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={illustration} alt=""
          style={{ width: `${illustrationScale * 100}%`, height: `${illustrationScale * 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
          }}>{label}</span>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontSize: 40, fontWeight: 400,
            lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
          }}>{headline}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
            color: C.lavender, maxWidth: 703, whiteSpace: 'pre-line'
          }}>{body}</p>
          <BookButton style={{ alignSelf: 'flex-start' }} />
        </div>
      </div>
    </section>);

}

// ────────── ZALETY (Advantages, 4 icon cards) ──────────
function Zalety() {
  const sd = useServiceData();
  const items = (sd ? sd.zalety.items : ['Uważność', 'Indywidualne podejście', 'Spokój', 'Głębokie wglądy']).map((t) => ({ title: t }));
  const label = sd ? sd.zalety.label : 'Podczas sesji otrzymujesz:';
  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: 22, letterSpacing: '-0.022em', color: C.gold
        }}>{label}</p>
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 20, justifyContent: 'center'
        }}>
          {items.map((it) =>
          <div key={it.title} className="luna-zaleta-tile" style={{
            flex: `1 1 calc(${100 / Math.min(items.length, 4)}% - 20px)`,
            maxWidth: 'calc(25% - 15px)', minWidth: 200,
            borderRadius: 16, padding: '32px 24px',
            border: `1px solid ${C.muted}`,
            background: 'rgba(21,19,49,0.45)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            minHeight: 120, textAlign: 'center',
            transition: 'border-color .3s, transform .3s, background .3s'
          }}>
              <span style={{
              fontFamily: 'Playfair Display', fontSize: 22,
              letterSpacing: '-0.022em', color: C.white, textAlign: 'center',
              lineHeight: 1.25
            }}>{it.title}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────── CO OBEJMUJE (How it works + accordion) ──────────
function CoObejmuje() {
  const sd = useServiceData();
  const headline = sd ? sd.coObejmuje.headline : '';
  const body = sd ? sd.coObejmuje.body : '';
  const sections = sd ? sd.coObejmuje.sections : [];
  const durationLabel = sd ? sd.duration_label : '';
  const price = (typeof window !== 'undefined' && window.SERVICE_PRICES || {})[window.SERVICE_SLUG];
  const sectionCard = (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>;

  // Wide multi-column layout for long lists (>8 sections), original 2-col otherwise
  const wide = sections.length > 8;
  if (wide) {
    return (
      <section style={{
        position: 'relative', background: C.bg,
        borderTop: `1px solid ${C.muted}`, borderBottom: `1px solid ${C.muted}`,
        padding: '80px 24px', overflow: 'hidden'
      }}>
        <div style={{
          position: 'relative',
          maxWidth: 1312, margin: '0 auto', padding: '0 40px',
          display: 'flex', flexDirection: 'column', gap: 20
        }}>
          <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, maxWidth: 900
          }}>{headline}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
            color: C.lavender, maxWidth: 900
          }}>{body}</p>
          <BookButton style={{ alignSelf: 'flex-start', marginTop: 12 }} />
          {(price > 0 || durationLabel) &&
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignSelf: 'flex-start', marginTop: 4 }}>
              {price > 0 && <span style={{ fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 20, color: C.gold, letterSpacing: '-0.01em' }}>{price} zł</span>}
              {durationLabel && <span style={{ fontFamily: 'Nunito', fontSize: 14, color: C.muted }}>Czas realizacji: maksymalnie {durationLabel}</span>}
            </div>
          }
        </div>
        <div style={{
          position: 'relative',
          maxWidth: 1312, margin: '64px auto 0', padding: '0 40px',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40,
          rowGap: 36
        }}>
          {sections.map(sectionCard)}
        </div>
      </section>);
  }

  return (
    <section style={{
      position: 'relative', background: C.bg,
      borderTop: `1px solid ${C.muted}`, borderBottom: `1px solid ${C.muted}`,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      <div style={{
        position: 'relative',
        maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: "flex-start" }}>
          <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
          }}>{headline}</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
            color: C.lavender
          }}>{body}</p>
          <BookButton style={{ alignSelf: 'flex-start', marginTop: 12 }} />
          {(price > 0 || durationLabel) &&
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignSelf: 'flex-start', marginTop: 4 }}>
              {price > 0 && <span style={{ fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 20, color: C.gold, letterSpacing: '-0.01em' }}>{price} zł</span>}
              {durationLabel && <span style={{ fontFamily: 'Nunito', fontSize: 14, color: C.muted }}>Czas realizacji: maksymalnie {durationLabel}</span>}
            </div>
          }
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {sections.map(sectionCard)}
        </div>
      </div>
    </section>);

}

// ────────── JAK POMOŻE (benefits cards) ──────────
function JakPomoze() {
  const sd = useServiceData();
  const items = sd ? sd.jakPomoze.items : [];
  const headline = sd ? sd.jakPomoze.headline : 'Co wyniosę z takiej konsultacji?';
  const body = sd && sd.jakPomoze.body ? sd.jakPomoze.body : '';
  const cols = sd && sd.jakPomoze.cols ? sd.jakPomoze.cols : 4;

  return (
    <section style={{ background: C.bg, padding: '80px 24px' }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ marginBottom: 150, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 20 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: C.muted
          }}>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
          }}>{headline}</h2>
          {body &&
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.5,
            color: C.lavender, maxWidth: 900
          }}>{body}</p>
          }
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 20 }}>
          {items.map((it, i) =>
          <div key={i} style={{
            borderRadius: 16, padding: '8px 16px',
            display: 'flex', flexDirection: 'column', gap: 24
          }}>
              <img src={it.icon || 'assets/zalety-icon.svg'} alt="" style={{ width: 50, height: 50, display: 'block' }} />
              <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',
  slug: 'konstancjazahmalalumia',
  role: 'Tarocistka | Odczyty Energetyczne | Radiestetka',
  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: 'Tomasz Buniek',
  slug: 'tomaszbuniek',
  role: 'Numerolog, Runista',
  bio: 'Specjalizuje się w autorskich portretach numerologicznych, numerologii biznesu i imionach wzmacniających. Utalentowany runista pracujący z runami, bindrunami i energiami symboli.'
},
{
  name: 'Olga Konieczna',
  slug: 'olgakonieczna',
  role: 'Astrolog, Astrokartograf',
  bio: 'Olga od lat zgłębia astrologię jako narzędzie do głębokiego rozumienia człowieka i jego życiowej drogi. W swojej pracy łączy intuicję z konkretem. Potrafi przełożyć złożone układy planetarne na jasne, zrozumiałe wskazówki, które mają realne zastosowanie w codziennym życiu.'
},
{
  name: 'Karolina Mardoll Kułakowska',
  slug: 'karolinamardoll',
  role: 'Analityk Duszy',
  bio: 'Wiedźma nordycka, autorka czterech książek oraz kilkudziesięciu obrazów. Łączy wiedzę z zakresu duchowości i tradycji nordyckich, tworząc autorskie podejście oparte na intuicji, wrażliwości oraz głębokim rozumieniu ludzkiej natury.'
},
{
  name: 'Karol Majewski',
  slug: 'karolmajewski',
  role: 'Chiromanta',
  bio: 'Każda dłoń jest unikalną mapą doświadczeń, talentów i możliwości. Karol pokazuje to, co często pozostaje niewidoczne — Twoją siłę, blokady, relacje oraz ścieżki rozwoju.'
}];


function ExpertShort({ name } = {}) {
  useExpertsTickLocal(); // re-render when EXPERTS is populated from DB
  const sd = useServiceData();
  // sd.expert is now the slug (set by service-pages.jsx loader). Match either way.
  const expertKey = name || (sd && sd.expert) || (EXPERTS[0] && EXPERTS[0].name);
  const e = EXPERTS.find((x) => x.slug === expertKey || x.name === expertKey) || EXPERTS[0];
  if (!e) return null;
  const expertName = e.name;
  const SQ = 314;
  // Prefer the DB-loaded photo (CMS-editable); fall back to the hardcoded map for older renders.
  const PHOTO = {
    'Konstancja Zahmala Lumia': 'assets/eksperci/konstancja.png',
    'Tomasz Buniek': 'assets/eksperci/tomaszbuniek.png',
    'Olga Konieczna': 'assets/eksperci/annakonieczna.png',
    'Karolina Mardoll Kułakowska': 'assets/eksperci/karolinamardoll.png',
    'Karol Majewski': 'assets/eksperci/karolmajewski.png'
  };
  const photoSrc = e.photo || PHOTO[e.name] || 'assets/konstancja.png';
  return (
    <section style={{ background: C.bg, padding: '80px 24px' }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: `${SQ}px 1fr`, gap: 64,
        alignItems: 'center'
      }}>
        {/* Photo zone — flat solid square; portrait bleeds out the top */}
        <div style={{ position: 'relative', width: SQ, height: SQ }}>
          <div style={{
            position: 'absolute', inset: 0,
            borderRadius: 12,
            background: '#151331'
          }} />
          <img src={photoSrc} alt={e.name}
          style={{
            position: 'absolute',
            left: '50%',
            transform: 'translateX(-50%)',
            bottom: 0,
            height: SQ + 56,
            width: 'auto',
            objectFit: 'contain',
            pointerEvents: 'none'
          }} />
        </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={{ marginTop: 8 }}>
            <BtnSecond small href={typeof expertHref === 'function' ? e.slug ? e.slug + '.html' : expertHref(e.name) : '#'}>Poznaj eksperta</BtnSecond>
          </div>
        </div>
      </div>
    </section>);

}

// ────────── SERVICE CTA (przed FAQ) ──────────
function ServiceCTA() {
  const sd = useServiceData();
  if (!sd) return null;
  const price = (typeof window !== 'undefined' && window.SERVICE_PRICES || {})[window.SERVICE_SLUG];
  const durationLabel = sd.duration_label;
  const name = getServiceName() || 'usługę';
  return (
    <section style={{
      background: C.bg, padding: '80px 24px', textAlign: 'center',
      borderTop: `1px solid ${C.muted}`, borderBottom: `1px solid ${C.muted}`
    }}>
      <div style={{
        maxWidth: 700, margin: '0 auto',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24
      }}>
        <h2 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: C.white
        }}>Zrób pierwszy krok</h2>
        <p style={{
          margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
          color: C.lavender, maxWidth: 520
        }}>Zarezerwuj sesję i daj sobie przestrzeń na wgląd, który zmienia perspektywę.</p>
        <BookButton>{'Umów ' + name}</BookButton>
        {(price > 0 || durationLabel) &&
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            {price > 0 && <span style={{ fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 20, color: C.gold, letterSpacing: '-0.01em' }}>{price} zł</span>}
            {durationLabel && <span style={{ fontFamily: 'Nunito', fontSize: 14, color: C.muted }}>Czas realizacji: maksymalnie {durationLabel}</span>}
          </div>
        }
        {(window.SERVICE_SLUG === 'kosmogram' || window.SERVICE_SLUG === 'astrokartografia') && (
          <div style={{
            marginTop: 8, width: '100%', maxWidth: 520,
            borderTop: `1px solid ${C.muted}`, paddingTop: 32,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16
          }}>
            <span style={{ fontFamily: 'Nunito', fontSize: 12, letterSpacing: '0.18em', color: C.gold, textTransform: 'uppercase', fontWeight: 700 }}>Pakiet astrologiczny</span>
            <h3 style={{ margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 26, color: C.white, textAlign: 'center', lineHeight: 1.3 }}>Kim jesteś i gdzie rozkwitasz</h3>
            <p style={{ margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.65, color: C.lavender, textAlign: 'center' }}>
              Kosmogram odkryje Twój wewnętrzny kod — wzorce, talenty i wyzwania zapisane w chwili urodzenia.
              Astrokartografia pokaże, gdzie na Ziemi te energie ożywają najmocniej.
              Razem tworzą kompletną mapę Twojego życia — w jednej cenie.
            </p>
            <span style={{ fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 22, color: C.gold }}>444 zł</span>
            <BookButton slug="kosmogramiAstrokartografia">Umów Kosmogram i Astrokartografię</BookButton>
          </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);
  const sd = useServiceData();
  const list = sd && sd.faqs ? sd.faqs : FAQS;
  return (
    <>
    <ServiceCTA />
    <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 }}>
          {list.map((f, i) =>
          <FAQItem key={i} q={f.q || f.question} a={f.a || f.answer} open={open === i}
          onToggle={() => setOpen(open === i ? -1 : i)} />
          )}
        </div>
      </div>
    </section>
    </>);

}

// ────────── USŁUGI (carousel) ──────────
const SERVICES = {
  'Wszystko': null,
  'Numerologia': [
  { icon: '☽', tag: 'NUMEROLOGIA', expert: 'Tomasz Buniek', title: 'Portret\nNumerologiczny', 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', expert: 'Tomasz Buniek', title: 'Nadawanie Imion\nWzmacniających', subtitle: 'Imię, które wzmacnia', body: 'Dobór imienia lub pseudonimu, które wspiera Twoje naturalne talenty i intencje.' },
  { icon: '☉', tag: 'NUMEROLOGIA', expert: 'Tomasz Buniek', title: 'Biznesowa Konsultacja\nNumerologiczna', subtitle: 'Liczby pracujące dla firmy', body: 'Analiza wibracji firm, nazw i dat kluczowych wydarzeń — wsparcie strategiczne.' }],

  'Astrologia': [
  { icon: '♄', tag: 'ASTROLOGIA', expert: 'Olga Konieczna', title: 'Kosmogram', subtitle: 'Mapa Twojego potencjału', body: 'Czytanie kosmogramu — Słońce, Księżyc, planety i domy. Zrozumienie wrodzonych predyspozycji i napięć.' },
  { icon: '♅', tag: 'ASTROLOGIA', expert: 'Olga Konieczna', 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', expert: 'Karol Majewski', title: 'Analiza\nDłoni', subtitle: 'Mapa Twoich predyspozycji', body: 'Pełny odczyt linii, wzgórz i kształtu dłoni — szczegółowa analiza pokazująca potencjał, blokady, relacje i ścieżki rozwoju.' }],

  'Tarot': [
  { icon: '⚁', tag: 'TAROT', expert: 'Konstancja Zahmala Lumia', title: 'Stawianie\nTarota', 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.' },
  { icon: '✦', tag: 'TAROT', expert: 'Karolina Mardoll Kułakowska', title: 'Karty\nwyroczni', subtitle: 'Symbole, które mówią więcej', body: 'Praca z kartami wyroczni jako dopełnienie tarota — łagodniejszy język symboli prowadzący do wglądu w obecny moment.' },
  { icon: '✦', tag: 'TAROT', expert: 'Konstancja Zahmala Lumia', title: 'Lunarny Portret Duszy', subtitle: 'Zobacz to, co niewidoczne', body: 'Pogłębiony odczyt łączący tarot z analizą energetyczną — wgląd w wewnętrzne mechanizmy, emocje i pole energetyczne. Pokazuje to, co realnie wpływa na Twoje życie, choć trudne do uchwycenia na pierwszy rzut oka.' }],

  'Runy': [
  { icon: 'ᚠ', tag: 'RUNY', expert: 'Tomasz Buniek', title: 'Tworzenie\nBindrun', subtitle: 'Symbole intencji', body: 'Indywidualnie projektowane bindruny — splecione runy wzmacniające konkretne intencje.' }],


  'Energia': [
  { icon: '☉', tag: 'ENERGIA', expert: 'Konstancja Zahmala Lumia', title: 'Odczyt\nEnergetyczny', subtitle: 'Zajrzyj w to, co Cię prowadzi', body: 'Bezpośredni odczyt Twojego pola energetycznego — sygnały, blokady i zasoby, które realnie wpływają na to, jak żyjesz i decydujesz. Punktowe spojrzenie tu i teraz.' },
  { icon: '☽', tag: 'ENERGIA', expert: 'Karolina Mardoll Kułakowska', title: 'Analiza\nDuszy', subtitle: 'Spojrzenie z innej perspektywy', body: 'Autorskie podejście łączące tradycję nordycką, intuicję i wrażliwość — narzędzie do głębszego poznania siebie i świadomego kierowania życiem.' }]

};

const CATEGORIES = Object.keys(SERVICES);

function ServiceCard({ item, cardWidth, compact }) {
  const iconSrc = `assets/services/${item.tag.toLowerCase()}.svg`;
  const w = cardWidth || 421;
  return (
    <div style={{
      width: w, minWidth: w, height: '100%',
      borderRadius: 16, background: C.bgDeep,
      padding: 32, display: 'flex', flexDirection: 'column', gap: 24,
      boxSizing: 'border-box'
    }}>
      <div style={{
        width: 72, height: 72,
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <img src={iconSrc} alt="" style={{
          width: '100%', height: '100%', objectFit: 'contain', display: 'block'
        }} />
      </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,
          whiteSpace: 'pre-line'
        }}>{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
      }}>{item.body}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, marginTop: 'auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12
        }}>
          <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>
          {item.expert &&
          <div style={{
            fontFamily: 'Nunito', fontWeight: 400, fontSize: 14,
            color: C.white, whiteSpace: 'nowrap'
          }}>{item.expert}</div>
          }
        </div>
        <div style={{ display: 'flex' }}>
          <BtnMainSmall href={`${serviceSlug(item.title)}.html`}>Poznaj szczegóły</BtnMainSmall>
        </div>
      </div>
    </div>);

}

function UslugiCarousel({ heading = 'Zobacz pozostałe usługi' }) {
  const [cat, setCat] = useState('Wszystko');
  const [idx, setIdx] = useState(0);

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

  // Reset position when category changes
  useEffect(() => {setIdx(0);}, [cat]);

  const VISIBLE = 3;
  const maxIdx = Math.max(0, items.length - VISIBLE);
  const next = () => setIdx((v) => Math.min(maxIdx, v + 1));
  const prev = () => setIdx((v) => Math.max(0, v - 1));

  // Card width tuned so 3 cards + 2×24 gaps fit inside 1232 px content.
  const CARD_W = 388;
  const GAP = 24;
  const stepX = CARD_W + GAP;

  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
          }}>{heading}</h2>
        </div>

        {/* Category tabs */}
        <div style={{
          display: 'flex', gap: 20, justifyContent: 'center',
          flexWrap: 'wrap', marginBottom: 48
        }}>
          {CATEGORIES.map((c) => {
            const active = c === cat;
            const accent = 'hsla(251, 24%, 36%, 1)';
            return (
              <button key={c} onClick={() => setCat(c)} style={{
                ...BTN_BASE,
                padding: '8px 24px',
                fontSize: 13,
                fontFamily: 'Nunito', fontWeight: 600,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                background: active ? accent : 'hsla(242, 35%, 14%, 0.5)',
                border: `1px solid ${active ? accent : 'transparent'}`,
                color: active ? C.white : C.lavender,
                boxShadow: 'none'
              }}
              onMouseEnter={(e) => {
                if (active) return;
                e.currentTarget.style.borderColor = accent;
              }}
              onMouseLeave={(e) => {
                if (active) return;
                e.currentTarget.style.borderColor = 'transparent';
              }}>{c}</button>);
          })}
        </div>

        {/* Carousel viewport — exactly 3 cards visible, no scrollbar */}
        <div style={{ overflow: 'hidden', width: CARD_W * 3 + GAP * 2, maxWidth: '100%', margin: '0 auto' }}>
          <div style={{
            display: 'flex', gap: GAP,
            transform: `translateX(-${idx * stepX}px)`,
            transition: 'transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)'
          }}>
            {items.map((it, i) =>
            <div key={`${cat}-${i}`} style={{ width: CARD_W, minWidth: CARD_W, flex: '0 0 auto' }}>
              <ServiceCard item={it} cardWidth={CARD_W} />
            </div>
            )}
          </div>
        </div>

        {/* Arrows below — centered, matching Dyscypliny style */}
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 24, marginTop: 48
        }}>
          <RoundArrow dir="left" onClick={prev} disabled={idx === 0} />
          <RoundArrow dir="right" onClick={next} disabled={idx >= maxIdx} />
        </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 href="index.html#uslugi">Zobacz nasze usługi</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() {
  useSettingsTick();
  const logoFooter = settingsObject('logo_footer_url', { url: 'assets/logo_footer.svg', alt: 'Luna Persona Hermetica' });
  const contactEmail = settingsValue('contact_email', 'kontakt@lunapersonahermetica.pl');
  const contactLabel = settingsValue('contact_label', 'Masz pytania? Napisz do nas:');
  const copyright = settingsValue('footer_copyright', '© Luna Persona Hermetica · Wszelkie prawa zastrzeżone');
  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={logoFooter.url || 'assets/logo_footer.svg'} alt={logoFooter.alt || 'Luna Persona Hermetica'} style={{ height: 64, width: 'auto', display: 'block', alignSelf: 'flex-start' }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{
              fontFamily: 'Nunito', fontSize: 14, color: C.muted,
              letterSpacing: '0.05em'
            }}>{contactLabel}</div>
            <a href={`mailto:${contactEmail}`} style={{
              fontFamily: 'Nunito', fontWeight: 400, fontSize: 24,
              color: C.lavender, textDecoration: 'none', letterSpacing: '-0.01em'
            }}>{contactEmail}</a>
          </div>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <span style={{
              fontFamily: 'Nunito', fontSize: 14, color: C.lavender,
              letterSpacing: '0.02em'
            }}>Zobacz nas na instagramie</span>
            <a href="#" aria-label="Instagram" style={{
              width: 32, height: 32,
              color: C.lavender,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              textDecoration: 'none'
            }}>
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5"></rect>
                <circle cx="12" cy="12" r="4"></circle>
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor"></circle>
              </svg>
            </a>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {[
          { label: 'Strona Główna', href: 'index.html' },
          { label: 'O nas', href: 'onas.html' },
          { label: 'Blog', href: 'blog.html' }].
          map((l) =>
          <a key={l.label} href={l.href} style={{
            fontFamily: 'Nunito', fontWeight: 400, fontSize: 16, color: C.gold,
            textDecoration: 'none'
          }}>{l.label}</a>
          )}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {['Tarot', 'Astrologia', 'Numerologia', 'Runy', 'Chirologia', 'Energia'].map((l) =>
          <a key={l} href={discHref(l.toUpperCase())} style={{
            fontFamily: 'Nunito', fontWeight: 400, fontSize: 16, color: C.gold,
            textDecoration: 'none'
          }}>{l}</a>
          )}
        </div>
      </div>
      <div style={{
        padding: '24px 40px',
        maxWidth: 1312, margin: '0 auto',
        display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
        fontFamily: 'Roboto', fontSize: 14, color: C.muted
      }}>
        <span>{copyright}</span>
        <a href="polityka-prywatnosci.html" style={{ color: C.muted, textDecoration: 'underline' }}>Polityka Prywatności</a>
        <a href="cookies.html" style={{ color: C.muted, textDecoration: 'underline' }}>Cookies</a>
      </div>
    </footer>);

}

// ─────────────────────────────────────────────────────────────
// DB-driven experts: mutate EXPERTS + MENU_EXPERTS once /api/public/content?type=experts
// resolves, then dispatch 'luna-experts-loaded' so subscribed components re-render.
// Components (ExpertShort, Menu) call useExpertsTickLocal() to subscribe.
// Static EXPERTS / MENU_EXPERTS defined above remain as a fallback while the fetch is in flight.
// ─────────────────────────────────────────────────────────────
function useExpertsTickLocal() {
  const [, tick] = React.useState(0);
  React.useEffect(() => {
    const f = () => tick((t) => t + 1);
    window.addEventListener('luna-experts-loaded', f);
    return () => window.removeEventListener('luna-experts-loaded', f);
  }, []);
}

// ─────────────────────────────────────────────────────────────
// DB-driven site settings (logo, contact, footer copy). Once
// /api/public/content?type=settings resolves, window.LUNA_SETTINGS is keyed by
// setting name. settingsValue('contact_email', fallback) returns the active
// value or the fallback during load. useSettingsTick() lets components
// re-render once the fetch resolves.
// ─────────────────────────────────────────────────────────────
function useSettingsTick() {
  const [, tick] = React.useState(0);
  React.useEffect(() => {
    const f = () => tick((t) => t + 1);
    window.addEventListener('luna-settings-loaded', f);
    return () => window.removeEventListener('luna-settings-loaded', f);
  }, []);
}

function settingsValue(key, fallback) {
  const map = (typeof window !== 'undefined' && window.LUNA_SETTINGS) || null;
  if (!map) return fallback;
  const entry = map[key];
  if (!entry || typeof entry !== 'object') return fallback;
  // Settings are stored as { value: "..." } or { url: "...", alt: "..." } etc.
  if (entry.value !== undefined) return entry.value;
  if (entry.url !== undefined) return entry.url;
  return fallback;
}

function settingsObject(key, fallback) {
  const map = (typeof window !== 'undefined' && window.LUNA_SETTINGS) || null;
  if (!map) return fallback;
  return map[key] || fallback;
}

(function loadSettingsFromDB() {
  if (typeof window === 'undefined') return;
  fetch('/api/public/content?type=settings', { credentials: 'include' })
    .then((r) => r.json())
    .then(({ items }) => {
      if (!Array.isArray(items)) return;
      const map = {};
      for (const it of items) {
        if (it && it.key) map[it.key] = it.value;
      }
      window.LUNA_SETTINGS = map;
      try { window.dispatchEvent(new CustomEvent('luna-settings-loaded')); } catch (_) {}
    })
    .catch((err) => { console.error('[components] settings load failed', err); });
})();

(function loadComponentsExpertsFromDB() {
  if (typeof window === 'undefined') return;
  fetch('/api/public/content?type=experts', { credentials: 'include' })
    .then((r) => r.json())
    .then(({ items }) => {
      if (!Array.isArray(items) || !items.length) return;
      EXPERTS.length = 0;
      EXPERTS.push(...items.map((it) => ({
        name: it.name,
        slug: it.slug,
        role: it.title || '',
        bio: it.short_bio || it.long_bio || '',
        photo: it.photo_url || ''
      })));
      MENU_EXPERTS.length = 0;
      MENU_EXPERTS.push(...items.map((it) => ({
        name: it.name,
        role: (it.title || '').split('|')[0].trim() || it.title || ''
      })));
      try { window.dispatchEvent(new CustomEvent('luna-experts-loaded')); } catch (_) {}
    })
    .catch((err) => { console.error('[components] experts load failed', err); });
})();

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