/* Nav + Footer shared across all pages */
const { useState, useEffect, useRef } = React;

function HotelMobileMenu({ active, links, lang, setL, t }) {
  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={`hotel-mm-btn ${open ? 'is-open' : ''}`}
        aria-label={open ? 'Close menu' : 'Open menu'}
        aria-expanded={open}
        aria-controls="hotel-mm"
        onClick={() => setOpen(o => !o)}
      >
        <span></span><span></span>
      </button>
      <div id="hotel-mm" className={`hotel-mm ${open ? 'is-open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!open}>
        <div className="hotel-mm-backdrop" onClick={() => setOpen(false)}></div>
        <div className="hotel-mm-panel">
          <div className="hotel-mm-head">
            <span className="hotel-mm-brand">MK <small>Design Hotel</small></span>
            <button className="hotel-mm-close" aria-label="Close" onClick={() => setOpen(false)}>×</button>
          </div>
          <nav className="hotel-mm-nav">
            {links.map((l, i) => (
              <a
                key={l.id}
                href={l.href}
                className={`hotel-mm-link ${active === l.id ? 'active' : ''}`}
                style={{ transitionDelay: `${0.05 + i * 0.045}s` }}
                onClick={() => setOpen(false)}
              >
                <span className="hotel-mm-num">{String(i + 1).padStart(2, '0')}</span>
                <span>{lang === 'BG' ? l.bg : l.en}</span>
              </a>
            ))}
          </nav>
          <div className="hotel-mm-foot">
            <div className="lang-switch">
              <button className={lang === 'BG' ? 'active' : ''} onClick={() => setL('BG')}>BG</button>
              <span>/</span>
              <button className={lang === 'EN' ? 'active' : ''} onClick={() => setL('EN')}>EN</button>
            </div>
            <a href="booking.html" className="hotel-mm-cta">{lang === 'BG' ? 'Резервация →' : 'Book →'}</a>
          </div>
        </div>
      </div>
    </>
  );
}

function Nav({ active = 'home', dark = false }) {
  const [scrolled, setScrolled] = useState(false);
  const [lang, setLang] = useState(() => localStorage.getItem('mk_lang') || 'BG');
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const setL = (l) => { setLang(l); localStorage.setItem('mk_lang', l); window.dispatchEvent(new CustomEvent('mk-lang', { detail: l })); };
  useEffect(() => { window.dispatchEvent(new CustomEvent('mk-lang', { detail: lang })); }, []);

  const links = [
    { id: 'home', bg: 'Начало', en: 'Home', href: 'index.html' },
    { id: 'rooms', bg: 'Стаи', en: 'Rooms', href: 'rooms.html' },
    { id: 'restaurant', bg: 'Ресторант', en: 'Restaurant', href: 'restaurant.html' },
    { id: 'spa', bg: 'СПА', en: 'Spa', href: 'spa.html' },
    { id: 'experiences', bg: 'Изживявания', en: 'Experiences', href: 'experiences.html' },
    { id: 'gallery', bg: 'Галерия', en: 'Gallery', href: 'gallery.html' },
    { id: 'story', bg: 'История', en: 'Story', href: 'story.html' },
  ];

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''} ${dark && !scrolled ? 'dark' : ''}`}>
      <ul className="nav-links">
        {links.slice(0, 4).map(l => (
          <li key={l.id}>
            <a href={l.href} className={`nav-link ${active === l.id ? 'active' : ''}`}>
              {lang === 'BG' ? l.bg : l.en}
            </a>
          </li>
        ))}
      </ul>
      <a href="index.html" className="nav-logo">
        MK
        <small>Design Hotel</small>
      </a>
      <div className="nav-right">
        <ul className="nav-links" style={{ gap: 28 }}>
          {links.slice(4).map(l => (
            <li key={l.id}>
              <a href={l.href} className={`nav-link ${active === l.id ? 'active' : ''}`}>
                {lang === 'BG' ? l.bg : l.en}
              </a>
            </li>
          ))}
        </ul>
        <div className="lang-switch">
          <button className={lang === 'BG' ? 'active' : ''} onClick={() => setL('BG')}>BG</button>
          <span>/</span>
          <button className={lang === 'EN' ? 'active' : ''} onClick={() => setL('EN')}>EN</button>
        </div>
        <a href="booking.html" className="nav-cta">{lang === 'BG' ? 'Резервация' : 'Book'}</a>
        <HotelMobileMenu active={active} links={links} lang={lang} setL={setL} />
      </div>
    </nav>
  );
}

function Footer() {
  const [lang, setLang] = useState(() => localStorage.getItem('mk_lang') || 'BG');
  useEffect(() => {
    const h = (e) => setLang(e.detail);
    window.addEventListener('mk-lang', h);
    return () => window.removeEventListener('mk-lang', h);
  }, []);
  const t = (bg, en) => lang === 'BG' ? bg : en;

  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">MK</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.14em', marginBottom: 20, opacity: 0.9 }}>DESIGN HOTEL</div>
            <p className="footer-address">
              {t('ул. Крайбрежна 14', '14 Seaside Avenue')}<br/>
              {t('8130 Созопол, България', '8130 Sozopol, Bulgaria')}<br/>
              +359 550 24 300<br/>
              rezervacii@mkdesignhotel.bg
            </p>
          </div>
          <div>
            <h4>{t('Хотел', 'Hotel')}</h4>
            <ul>
              <li><a href="rooms.html">{t('Стаи и апартаменти', 'Rooms & Suites')}</a></li>
              <li><a href="restaurant.html">{t('Ресторант', 'Restaurant')}</a></li>
              <li><a href="spa.html">{t('СПА център', 'Spa')}</a></li>
              <li><a href="experiences.html">{t('Изживявания', 'Experiences')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('Открийте', 'Discover')}</h4>
            <ul>
              <li><a href="gallery.html">{t('Галерия', 'Gallery')}</a></li>
              <li><a href="story.html">{t('Нашата история', 'Our Story')}</a></li>
              <li><a href="#">{t('Оферти', 'Offers')}</a></li>
              <li><a href="#">{t('Подаръчни ваучери', 'Gift Vouchers')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('Информация', 'Information')}</h4>
            <ul>
              <li><a href="#">{t('Общи условия', 'Terms')}</a></li>
              <li><a href="#">{t('Поверителност', 'Privacy')}</a></li>
              <li><a href="#">{t('Кариери', 'Careers')}</a></li>
              <li><a href="#">{t('Преса', 'Press')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('Бюлетин', 'Newsletter')}</h4>
            <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 16, lineHeight: 1.5 }}>
              {t('Оферти, събития и вдъхновение четири пъти годишно.', 'Offers, events & inspiration four times a year.')}
            </p>
            <div style={{ display: 'flex', borderBottom: '1px solid rgba(251,247,239,0.3)', paddingBottom: 8 }}>
              <input
                placeholder={t('Вашият имейл', 'Your email')}
                style={{ background: 'none', border: 'none', color: 'var(--ivory)', flex: 1, fontSize: 13, outline: 'none', fontFamily: 'inherit' }}
              />
              <button style={{ fontSize: 18, color: 'var(--ivory)' }}>→</button>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 MK Design Hotel</span>
          <span>{t('Създадено с грижа в Созопол', 'Crafted with care in Sozopol')}</span>
        </div>
      </div>
    </footer>
  );
}

/* Scroll reveal observer */
function useReveal() {
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('[data-reveal]').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

/* Translation helper hook */
function useLang() {
  const [lang, setLang] = useState(() => localStorage.getItem('mk_lang') || 'BG');
  useEffect(() => {
    const h = (e) => setLang(e.detail);
    window.addEventListener('mk-lang', h);
    return () => window.removeEventListener('mk-lang', h);
  }, []);
  return [lang, (bg, en) => lang === 'BG' ? bg : en];
}

Object.assign(window, { Nav, Footer, useReveal, useLang });