// App — orchestrates sections + tweaks
const { useEffect, useRef, useState } = React;

// Global zoom overlay: any <img data-zoomable> opens fullscreen on click
function ImageZoom() {
  const [src, setSrc] = useState(null);
  const [alt, setAlt] = useState('');

  useEffect(() => {
    const onClick = (e) => {
      const img = e.target.closest('img[data-zoomable]');
      if (!img) return;
      e.preventDefault();
      e.stopPropagation();
      setSrc(img.src);
      setAlt(img.alt || '');
    };
    document.addEventListener('click', onClick, true);
    const onKey = (e) => { if (e.key === 'Escape') setSrc(null); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('click', onClick, true);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  // CSS — cursor + subtle hover on zoomable images
  useEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      img[data-zoomable] { cursor: zoom-in; transition: transform 200ms ease; }
      @media (hover: hover) { img[data-zoomable]:hover { transform: scale(1.03); } }
    `;
    document.head.appendChild(style);
    return () => { style.remove(); };
  }, []);

  if (!src) return null;
  return (
    <div onClick={() => setSrc(null)} style={{
      position: 'fixed', inset: 0,
      background: 'rgba(10, 10, 10, 0.92)',
      zIndex: 200,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 'clamp(20px, 4vw, 64px)',
      cursor: 'zoom-out',
      animation: 'zoomFade 220ms ease',
    }}>
      <img src={src} alt={alt} style={{
        maxWidth: '90vw', maxHeight: '90vh',
        objectFit: 'contain', display: 'block',
        filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.5))',
      }} />
      <button onClick={(e) => { e.stopPropagation(); setSrc(null); }} style={{
        position: 'absolute', top: 20, right: 20,
        appearance: 'none',
        background: 'var(--bg)',
        color: 'var(--ink)',
        border: 'none',
        padding: '8px 14px',
        fontSize: 11,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        fontWeight: 700,
        cursor: 'pointer',
        fontFamily: 'inherit',
      }}>Закрити ×</button>
      <style>{`@keyframes zoomFade { from { opacity: 0; } to { opacity: 1; } }`}</style>
    </div>
  );
}

function SlideNav() {
  const [active, setActive] = useState(0);
  const sectionsRef = useRef([]);

  // Ukrainian labels for navigation
  const labelsUa = [
    'Збір',
    'Старт',
    'Чому',
    'Система',
    'День',
    'Комплекси',
    'Якість',
    'Співпраця',
    'Підсумок',
  ];

  useEffect(() => {
    sectionsRef.current = Array.from(document.querySelectorAll('main > section'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && e.intersectionRatio > 0.5) {
          const idx = sectionsRef.current.indexOf(e.target);
          if (idx >= 0) setActive(idx);
        }
      });
    }, { threshold: [0.5, 0.75] });
    sectionsRef.current.forEach(s => io.observe(s));
    return () => io.disconnect();
  }, []);

  const items = sectionsRef.current.map((s, i) => labelsUa[i] || s.getAttribute('data-screen-label') || '');
  if (items.length === 0) return null;

  return (
    <nav style={{
      position: 'fixed',
      top: 'clamp(10px, 1.2vw, 18px)',
      left: '50%',
      transform: 'translateX(-50%)',
      zIndex: 50,
      display: 'flex',
      flexDirection: 'row',
      gap: 4,
      padding: '6px 8px',
      background: 'var(--bg)',
      border: '1px solid var(--line)',
      pointerEvents: 'auto',
    }} aria-label="Навігація по слайдах">
      {items.map((label, i) => {
        const isActive = i === active;
        const num = String(i + 1).padStart(2, '0');
        return (
          <button
            key={i}
            onClick={() => {
              const target = sectionsRef.current[i];
              if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}
            style={{
              appearance: 'none',
              background: isActive ? 'var(--ink)' : 'transparent',
              color: isActive ? 'var(--bg)' : 'var(--ink-mute)',
              border: 'none',
              cursor: 'pointer',
              padding: '6px 12px',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
              fontFamily: 'var(--font-body)',
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: '0.06em',
              textTransform: 'uppercase',
              transition: 'background 200ms ease, color 200ms ease',
              whiteSpace: 'nowrap',
            }}
            onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = 'var(--ink)'; }}
            onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = 'var(--ink-mute)'; }}
            aria-label={label}
            aria-current={isActive ? 'true' : undefined}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, opacity: isActive ? 1 : 0.7 }}>{num}</span>
            <span>{label}</span>
          </button>
        );
      })}
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(window.__MINDME_TWEAK_DEFAULTS);

  // Apply tweak state to <html> attrs so CSS variables react
  useEffect(() => {
    const html = document.documentElement;
    html.setAttribute('data-theme', t.theme);
    html.setAttribute('data-density', t.density);
    html.setAttribute('data-font', t.font);
    html.setAttribute('data-anim', t.anim);
  }, [t.theme, t.density, t.font, t.anim]);

  return (
    <>
      <main>
        <SectionCover />
        <SectionHero />
        <SectionWhy />
        <SectionSystem />
        <SectionDay hint={t.dayHint} />
        <SectionComplexes />
        <SectionQuality trustStyle={t.trustStyle} />
        <SectionPartner />
        <SectionManifesto />
      </main>

      <SlideNav />
      <ImageZoom />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Тема" />
        <TweakRadio
          label="Режим"
          value={t.theme}
          options={['light', 'dark']}
          onChange={(v) => setTweak('theme', v)}
        />

        <TweakSection label="Типографіка" />
        <TweakSelect
          label="Шрифтова пара"
          value={t.font}
          options={[
            { value: 'grotesque', label: 'Bricolage + Manrope' },
            { value: 'techie',    label: 'Space Grotesk + IBM Plex' },
            { value: 'editorial', label: 'Instrument Serif + Manrope' },
          ]}
          onChange={(v) => setTweak('font', v)}
        />

        <TweakSection label="Щільність" />
        <TweakRadio
          label="Повітря"
          value={t.density}
          options={[
            { value: 'compact', label: 'compact' },
            { value: 'comfortable', label: 'comfy' },
            { value: 'airy', label: 'airy' },
          ]}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Анімації" />
        <TweakSelect
          label="Стиль"
          value={t.anim}
          options={[
            { value: 'default', label: 'Стандарт (slide-fade)' },
            { value: 'minimal', label: 'Мінімум (fade)' },
            { value: 'playful', label: 'Живий (scale + lift)' },
          ]}
          onChange={(v) => setTweak('anim', v)}
        />

        <TweakSection label="Слайд 04 — підказка складу" />
        <TweakSelect
          label="Вигляд підказки"
          value={t.dayHint}
          options={[
            { value: 'compare', label: 'Порівняти всі (по картці)' },
            { value: 'plus',   label: 'Кнопка «+» (кутова)' },
            { value: 'ribbon', label: 'Стрічка «Склад →»' },
            { value: 'dot',    label: 'Пульсуюча точка' },
            { value: 'always', label: 'Завжди видно знизу' },
            { value: 'none',   label: 'Без підказки' },
          ]}
          onChange={(v) => setTweak('dayHint', v)}
        />

        <TweakSection label="Слайд 06 — блок довіри" />
        <TweakSelect
          label="Вигляд блоку довіри"
          value={t.trustStyle}
          options={[
            { value: 'tags',   label: 'Чіпи (хмара тегів)' },
            { value: 'spec',   label: 'Специфікація (лідери)' },
            { value: 'cards',  label: 'Картки з цифрами' },
            { value: 'list',   label: 'Список (мінімал)' },
            { value: 'numbered', label: 'З великими цифрами' },
          ]}
          onChange={(v) => setTweak('trustStyle', v)}
        />

      </TweaksPanel>
    </>
  );
}

// Mount
ReactDOM.createRoot(document.getElementById('root')).render(<App />);