/* ============================================================
   SHELL — Header, Footer, MobileMenu, RevealOnScroll, hooks
   ============================================================ */

const { useState, useEffect, useRef, useContext, createContext, useCallback, useMemo, Fragment } = React;

/* ---------------- LangContext ---------------- */
const LangContext = createContext({ lang: 'ro', setLang: () => {} });
const useLang = () => useContext(LangContext);

function LangProvider({ children }) {
  const [lang, setLang] = useState(() => {
    try { return localStorage.getItem('mcc_lang') || 'ro'; } catch (e) { return 'ro'; }
  });
  useEffect(() => {
    try { localStorage.setItem('mcc_lang', lang); } catch (e) {}
    document.documentElement.lang = lang;
  }, [lang]);
  return <LangContext.Provider value={{ lang, setLang }}>{children}</LangContext.Provider>;
}

const tr = (obj, lang) => {
  if (!obj) return '';
  if (typeof obj === 'string') return obj;
  return obj[lang] || obj.ro || obj.en || '';
};

/* ---------------- Router (hash-based) ---------------- */
const RouterContext = createContext({ path: '/', navigate: () => {} });
const useRouter = () => useContext(RouterContext);

function RouterProvider({ children }) {
  const parseHash = () => {
    const h = window.location.hash.replace(/^#/, '') || '/';
    return h.startsWith('/') ? h : '/' + h;
  };
  const [path, setPath] = useState(parseHash);
  useEffect(() => {
    const onHash = () => {
      setPath(parseHash());
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const navigate = useCallback((to) => {
    window.location.hash = to;
  }, []);
  return <RouterContext.Provider value={{ path, navigate }}>{children}</RouterContext.Provider>;
}

function Link({ to, children, className, ...rest }) {
  const { navigate, path } = useRouter();
  const isActive = path === to || (to !== '/' && path.startsWith(to));
  return (
    <a
      href={'#' + to}
      className={(className || '') + (isActive ? ' is-active' : '')}
      onClick={(e) => { e.preventDefault(); navigate(to); }}
      {...rest}
    >{children}</a>
  );
}

/* ---------------- Scroll position ---------------- */
function useScrollPosition(threshold = 40) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return scrolled;
}

/* ---------------- RevealOnScroll ---------------- */
function Reveal({ as: Tag = 'div', delay = 0, className = '', children, mask = false, ...rest }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        io.unobserve(el);
      }
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const cls = (mask ? 'reveal-mask ' : 'reveal ') + (visible ? 'is-visible ' : '') + (delay ? `reveal-delay-${delay} ` : '') + className;
  if (mask) {
    return <Tag ref={ref} className={cls} {...rest}><span>{children}</span></Tag>;
  }
  return <Tag ref={ref} className={cls} {...rest}>{children}</Tag>;
}

/* ---------------- Header ---------------- */
const NAV_ITEMS = [
  { to: '/', key: 'home' },
  { to: '/cats', key: 'cats' },
  { to: '/menu', key: 'menu' },
  { to: '/reservations', key: 'reservations' },
  { to: '/about', key: 'about' },
  { to: '/gallery', key: 'gallery' },
  { to: '/blog', key: 'blog' }
];

function Header({ variant = 'auto' }) {
  // variant: 'dark' (transparent over hero), 'light' (over light page), 'auto' (scroll-based)
  const scrolled = useScrollPosition(60);
  const { lang, setLang } = useLang();
  const { path } = useRouter();
  const [menuOpen, setMenuOpen] = useState(false);

  const isHome = path === '/';
  // When over hero (home), header is dark transparent until scrolled.
  // On other pages, header sits on dark page-hero by default.
  let headerCls = 'site-header';
  if (scrolled) headerCls += ' is-scrolled';

  useEffect(() => { setMenuOpen(false); }, [path]);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  return (
    <div className="site-shell">
      <header className={headerCls}>
        <div className="header-inner">
          <a href="#/" className="header-logo" onClick={(e) => { e.preventDefault(); window.location.hash = '/'; }}>
            <img src="assets/logo-gold.svg" alt="Maine Coon Cafe" />
            <span className="header-logo-text">
              MAINE COON
              <small>CAFE — BUCUREȘTI</small>
            </span>
          </a>
          <nav className="header-nav">
            {NAV_ITEMS.map(item => (
              <Link key={item.key} to={item.to}>{tr(I18N.nav[item.key], lang)}</Link>
            ))}
          </nav>
          <div className="header-right">
            <button className="lang-toggle" onClick={() => setLang(lang === 'ro' ? 'en' : 'ro')} aria-label="Switch language">
              <span className={lang === 'ro' ? 'is-active' : ''}>RO</span>
              <span className="slash">/</span>
              <span className={lang === 'en' ? 'is-active' : ''}>EN</span>
            </button>
            <Link to="/reservations" className="btn btn-primary header-cta">
              {tr(I18N.cta.book, lang)} <span className="arrow">→</span>
            </Link>
            <button className="menu-toggle" onClick={() => setMenuOpen(true)} aria-label="Open menu">
              <svg width="28" height="20" viewBox="0 0 28 20" fill="none">
                <path d="M0 2h28M0 10h28M0 18h28" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            </button>
          </div>
        </div>
      </header>

      <div className={'mobile-menu' + (menuOpen ? ' is-open' : '')}>
        <button
          aria-label="Close"
          onClick={() => setMenuOpen(false)}
          style={{ position: 'absolute', top: 28, right: 24, background: 'transparent', border: 'none', color: 'inherit', padding: 8 }}
        >
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
            <path d="M4 4l20 20M24 4L4 24" stroke="currentColor" strokeWidth="1.5" />
          </svg>
        </button>
        <nav>
          {NAV_ITEMS.map((item, i) => (
            <Link key={item.key} to={item.to} className={item.to === path ? 'is-active' : ''}>
              <span>{tr(I18N.nav[item.key], lang)}</span>
              <span className="mnum">{String(i + 1).padStart(2, '0')}</span>
            </Link>
          ))}
        </nav>
        <div className="mobile-menu-footer">
          <div className="meta">{tr(CAFE_INFO.address, lang)}</div>
          <div className="meta">{CAFE_INFO.phone}</div>
          <div className="meta">{CAFE_INFO.email}</div>
          <button className="lang-toggle" style={{ alignSelf: 'flex-start' }} onClick={() => setLang(lang === 'ro' ? 'en' : 'ro')}>
            <span className={lang === 'ro' ? 'is-active' : ''}>RO</span>
            <span className="slash">/</span>
            <span className={lang === 'en' ? 'is-active' : ''}>EN</span>
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const { lang } = useLang();
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <h4>{lang === 'ro' ? 'Maine Coon Cafe' : 'Maine Coon Cafe'}</h4>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--fg-on-dark-2)', maxWidth: 320 }}>
              {lang === 'ro'
                ? 'Cafenea premium cu 15 pisici Maine Coon, în inima Bucureștiului. Liniște, cafea de specialitate și companie blândă.'
                : 'Premium cafe with 15 Maine Coon cats, in the heart of Bucharest. Stillness, specialty coffee and gentle company.'}
            </p>
          </div>
          <div className="footer-col">
            <h4>{lang === 'ro' ? 'Navigare' : 'Navigation'}</h4>
            <ul>
              {NAV_ITEMS.map(item => (
                <li key={item.key}><Link to={item.to}>{tr(I18N.nav[item.key], lang)}</Link></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>{lang === 'ro' ? 'Vizitează' : 'Visit'}</h4>
            <ul>
              <li>{tr(CAFE_INFO.address, lang)}</li>
              {CAFE_INFO.schedule[lang].map((s, i) => (
                <li key={i}>{s.d} · {s.h}</li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>{lang === 'ro' ? 'Contact' : 'Contact'}</h4>
            <ul>
              <li><a href={'tel:' + CAFE_INFO.phone.replace(/\s/g, '')}>{CAFE_INFO.phone}</a></li>
              <li><a href={'mailto:' + CAFE_INFO.email}>{CAFE_INFO.email}</a></li>
              <li><a href="#" rel="noopener">Instagram ↗</a></li>
              <li><a href="#" rel="noopener">TikTok ↗</a></li>
              <li><a href="#" rel="noopener">Facebook ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-wordmark">MAINE COON</div>
        <div className="footer-bottom">
          <span>© 2026 MAINE COON CAFE · BUCUREȘTI</span>
          <span>{lang === 'ro' ? 'Politică de confidențialitate · GDPR · Termeni' : 'Privacy · GDPR · Terms'}</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Marquee strip (decorative) ---------------- */
function Marquee({ items }) {
  const content = (
    <span>
      {items.map((it, i) => (
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 80 }}>
          <span>{it}</span>
          <span className="sep" />
        </span>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {content}{content}{content}{content}
      </div>
    </div>
  );
}

/* ---------------- Floating book CTA ---------------- */
function FloatingBookCta() {
  const { lang } = useLang();
  const { path } = useRouter();
  if (path === '/reservations') return null;
  return (
    <Link to="/reservations" className="book-floating">
      {tr(I18N.cta.book, lang)} <span>→</span>
    </Link>
  );
}

/* ---------------- Image with lazy fallback ---------------- */
function SmartImg({ src, alt, className = '', style }) {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);
  return (
    <div className={'img-frame ' + className} style={style}>
      {!loaded && !error && <div className="img-skel" style={{ position: 'absolute', inset: 0 }} />}
      {error ? (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'var(--ink-800)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--gold-500)', fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.2em'
        }}>
          MAINE COON
        </div>
      ) : (
        <img
          src={src}
          alt={alt || ''}
          loading="lazy"
          onLoad={() => setLoaded(true)}
          onError={() => setError(true)}
          style={{ opacity: loaded ? 1 : 0, transition: 'opacity 600ms ease' }}
        />
      )}
    </div>
  );
}

/* ---------------- Export to window ---------------- */
Object.assign(window, {
  LangProvider, useLang, tr,
  RouterProvider, useRouter, Link,
  useScrollPosition,
  Reveal,
  Header, Footer, Marquee, FloatingBookCta, SmartImg,
  NAV_ITEMS
});