// Shared nav, footer, tweaks panel, and page shell
const { useState, useEffect, useRef } = React;

const PAGES = [
  { slug: 'index', label: 'Начало', path: 'index.html' },
  { slug: 'menu', label: 'Меню', path: 'menu.html' },
  { slug: 'tasting', label: 'Дегустационно', path: 'tasting.html' },
  { slug: 'reservations', label: 'Резервации', path: 'reservations.html' },
  { slug: 'gallery', label: 'Галерия', path: 'gallery.html' },
  { slug: 'journal', label: 'Дневник', path: 'journal.html' },
  { slug: 'press', label: 'Преса', path: 'press.html' },
];

function LuceMobileMenu({ current }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
  }, [open]);
  return (
    <>
      <button
        type="button"
        className={`luce-mm-btn ${open ? 'is-open' : ''}`}
        aria-label={open ? 'Затвори меню' : 'Отвори меню'}
        aria-expanded={open}
        aria-controls="luce-mm"
        onClick={() => setOpen(o => !o)}
      >
        <span></span><span></span>
      </button>
      <div id="luce-mm" className={`luce-mm ${open ? 'is-open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!open}>
        <div className="luce-mm-backdrop" onClick={() => setOpen(false)}></div>
        <div className="luce-mm-panel">
          <div className="luce-mm-head">
            <span className="luce-mm-brand">✺ Osteria <em>Luce</em></span>
            <button className="luce-mm-close" aria-label="Затвори меню" onClick={() => setOpen(false)}>×</button>
          </div>
          <nav className="luce-mm-nav">
            {PAGES.map((p, i) => (
              <a
                key={p.slug}
                href={p.path}
                className={`luce-mm-link ${current === p.slug ? 'is-current' : ''}`}
                style={{ transitionDelay: `${0.05 + i * 0.045}s` }}
                onClick={() => setOpen(false)}
              >
                <span className="luce-mm-num">{String(i + 1).padStart(2, '0')}</span>
                <span>{p.label}</span>
              </a>
            ))}
          </nav>
          <div className="luce-mm-foot">
            <span className="label">София · Флоренция</span>
            <a href="reservations.html" className="luce-mm-cta">Резервирай →</a>
          </div>
        </div>
      </div>
    </>
  );
}

function Nav({ current, variant = 'light' }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const dark = variant === 'dark';
  return (
    <header className={`lc-nav ${scrolled ? 'is-scrolled' : ''} ${dark ? 'is-dark' : ''}`}>
      <div className="lc-nav-inner">
        <a href="index.html" className="lc-brand">
          <span className="lc-brand-mark">✺</span>
          <span className="lc-brand-name">Osteria <em>Luce</em></span>
        </a>
        <nav className="lc-nav-links">
          {PAGES.filter(p => p.slug !== 'index').map(p => (
            <a key={p.slug} href={p.path} className={current === p.slug ? 'is-current' : ''}>
              <span className="label-txt">{p.label}</span>
              <span className="label-hover" aria-hidden>{p.label}</span>
            </a>
          ))}
        </nav>
        <div className="lc-nav-right">
          <span className="lc-nav-loc">София · Флоренция</span>
          <a href="reservations.html" className="lc-nav-cta">Резервирай →</a>
          <LuceMobileMenu current={current} />
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="lc-footer">
      <div className="lc-footer-top">
        <div className="lc-footer-col lc-footer-brand">
          <div className="lc-footer-mark">✺</div>
          <div className="lc-footer-wordmark serif">Osteria Luce</div>
          <div className="label">Ресторант · Винотека · от MMXVII</div>
        </div>

        <div className="lc-footer-col">
          <div className="label">Намерете ни</div>
          <p className="serif lc-footer-addr">
            ул. „Цар Освободител“ 14<br/>
            1000 София, България
          </p>
          <p className="serif lc-footer-addr">
            Via dei Neri 14<br/>
            50122 Флоренция, Италия
          </p>
        </div>

        <div className="lc-footer-col">
          <div className="label">Работно време</div>
          <ul className="lc-hours">
            <li><span>Вт — Чт</span><span>18:00 — 23:00</span></li>
            <li><span>Пт — Сб</span><span>18:00 — 01:00</span></li>
            <li><span>Нд</span><span>12:30 — 22:00</span></li>
            <li><span>Пн</span><span>— затворено —</span></li>
          </ul>
        </div>

        <div className="lc-footer-col">
          <div className="label">Контакт</div>
          <ul className="lc-contact">
            <li><a href="mailto:rezervacii@osterialuce.bg">rezervacii@osterialuce.bg</a></li>
            <li><a href="tel:+35921234567">+359 2 123 4567</a></li>
            <li><a href="#">Instagram ↗</a></li>
            <li><a href="#">Бюлетин ↗</a></li>
          </ul>
        </div>

        <div className="lc-footer-col">
          <div className="label">Бюлетин</div>
          <p className="serif lc-footer-nl">Сезонни менюта, рецепти и частни събития.</p>
          <form className="lc-nl-form" onSubmit={(e)=>{e.preventDefault(); e.currentTarget.querySelector('input').value=''; e.currentTarget.querySelector('.lc-nl-ok').style.opacity=1;}}>
            <input type="email" placeholder="вашият@имейл" />
            <button type="submit" aria-label="subscribe">→</button>
            <div className="lc-nl-ok label">благодарим.</div>
          </form>
        </div>
      </div>

      <div className="lc-footer-marquee marquee">
        <div className="marquee-track serif">
          {Array.from({length: 8}).map((_, i) => (
            <span key={i}>Osteria Luce &nbsp;·&nbsp; светлината на Тоскана &nbsp;·&nbsp; от MMXVII &nbsp;·&nbsp;&nbsp;</span>
          ))}
        </div>
      </div>

      <div className="lc-footer-bottom">
        <span className="num">© MMXXVI — OSTERIA LUCE</span>
        <span className="num">ЕИК 205123456</span>
        <span className="num">УЕБ · MK DESIGN</span>
      </div>
    </footer>
  );
}

function TweaksPanel() {
  const [active, setActive] = useState(false);
  const [palette, setPalette] = useState(() => localStorage.getItem('luce.palette') || 'tuscan');
  const [hero, setHero] = useState(() => localStorage.getItem('luce.hero') || 'split');

  useEffect(() => {
    const listener = (e) => {
      if (e.data?.type === '__activate_edit_mode') setActive(true);
      if (e.data?.type === '__deactivate_edit_mode') setActive(false);
    };
    window.addEventListener('message', listener);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', listener);
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute('data-palette', palette);
    localStorage.setItem('luce.palette', palette);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { palette } }, '*');
  }, [palette]);

  useEffect(() => {
    document.documentElement.setAttribute('data-hero', hero);
    localStorage.setItem('luce.hero', hero);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { heroVariant: hero } }, '*');
  }, [hero]);

  if (!active) return null;

  const Pal = ({id, swatches, label}) => (
    <button className={`tw-pal ${palette===id?'on':''}`} onClick={()=>setPalette(id)}>
      <div className="tw-pal-sw">
        {swatches.map((c,i)=><span key={i} style={{background:c}}/>)}
      </div>
      <span>{label}</span>
    </button>
  );

  return (
    <div className="tw-panel">
      <div className="tw-head">
        <span className="label">Настройки</span>
        <button className="tw-close" onClick={()=>setActive(false)}>×</button>
      </div>
      <div className="tw-row">
        <div className="label">Палитра</div>
        <div className="tw-pals">
          <Pal id="tuscan" label="Тоскана" swatches={['#F3EDE3','#B04A2E','#6B7049','#1A1512']}/>
          <Pal id="noir" label="Нощ" swatches={['#0E0C0A','#D97A52','#A7A879','#EFE6D6']}/>
          <Pal id="limone" label="Лимон" swatches={['#F5F1E4','#6F8A3A','#C6A545','#1E2A1C']}/>
        </div>
      </div>
      <div className="tw-row">
        <div className="label">Герой · оформление</div>
        <div className="tw-pills">
          {[['split','разделено'],['full','цяло'],['editorial','списание']].map(([v,l])=>(
            <button key={v} className={`tw-pill ${hero===v?'on':''}`} onClick={()=>setHero(v)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tw-note label">настройките се пазят за всички страници</div>
    </div>
  );
}

// Initial palette hydration (runs before React mounts too, see page <head>)
(function hydratePalette(){
  const p = localStorage.getItem('luce.palette');
  if (p) document.documentElement.setAttribute('data-palette', p);
  const h = localStorage.getItem('luce.hero');
  if (h) document.documentElement.setAttribute('data-hero', h);
})();

// Scroll reveal helper
function useScrollReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.r-in');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('on'); });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// Expose everything
Object.assign(window, { Nav, Footer, TweaksPanel, PAGES, useScrollReveal });