/* Uncle Tibo holding page — React app: Overlay + ComingSoonApp.
   Component logic (theme toggle, overlay behaviour). Content lives in panels.js. */
const { useState, useEffect } = React;
const PANELS = window.PANELS;
function Overlay({ open, onClose, isLight }) {
  const [active, setActive] = useState('menu');
  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  const panel = PANELS.find(p => p.key === active);
  return (
    <div className={`cs-overlay ${open ? 'is-open' : ''} ${isLight ? 'cs-overlay--light' : ''}`} aria-hidden={!open}>
      <div className="cs-overlay__top">
        <img className="cs-overlay__brand-mark" src="/assets/uncle-tibo-logo-final.svg" alt="Uncle Tibo" />
        <button className="cs-overlay__close" onClick={onClose} aria-label="Close menu">×</button>
      </div>
      <div className="cs-overlay__grid">
        <nav className="cs-overlay__nav" aria-label="Sections">
          {PANELS.map(p => (
            <button
              key={p.key}
              className={`cs-overlay__nav-item ${p.key === active ? 'is-active' : ''}`}
              onClick={() => setActive(p.key)}
            >
              <span className="cs-overlay__nav-num">{p.num}</span>
              <span className="cs-overlay__nav-label">
                {p.key === active ? <em>{p.label}</em> : p.label}
                {p.comingSoon && <span className="cs-overlay__nav-soon">soon</span>}
              </span>
              <span className="cs-overlay__nav-arrow">→</span>
            </button>
          ))}
        </nav>
        <div className="cs-overlay__panel" key={active}>
          <span className="cs-overlay__panel-label">✦ {panel.num} · {panel.label}{panel.comingSoon && <span className="cs-overlay__panel-soon">Coming soon</span>}</span>
          <h3>{panel.heading.split('\n').map((ln, i, arr) => (
            <React.Fragment key={i}>
              {i === arr.length - 1 ? <em>{ln}</em> : ln}
              {i < arr.length - 1 && <br />}
            </React.Fragment>
          ))}</h3>
          <p>{panel.body}</p>
          {panel.image && (
            <a className="cs-overlay__panel-menu-image" href={panel.image} target="_blank" rel="noopener" aria-label="Open full menu in a new tab">
              <img src={panel.image} alt={panel.imageAlt || ''} loading="lazy" />
            </a>
          )}
          {panel.hours && (
            <div className="cs-overlay__panel-hours">
              {panel.hours.map((h, i) => (
                <div key={i}><span>{h.l}</span><span>{h.r}</span></div>
              ))}
            </div>
          )}
          {panel.items && (
            <div className="cs-overlay__panel-menu">
              {panel.items.map((it, i) => (
                <div key={i} className="cs-overlay__panel-menu-item">
                  <h5>{it.h}</h5>
                  <p>{it.d}</p>
                </div>
              ))}
            </div>
          )}
          <a href={panel.ctaHref || '#'} className="btn btn--primary btn--arrow cs-overlay__panel-cta">{panel.cta}</a>
        </div>
      </div>
    </div>
  );
}

function ComingSoonApp() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem('ut-theme') || 'dark'; } catch (e) { return 'dark'; }
  });
  useEffect(() => {
    try { localStorage.setItem('ut-theme', theme); } catch (e) {}
  }, [theme]);
  useEffect(() => {
    // Fade the topbar logo in once the user starts scrolling. Threshold is
    // small (≈ one nav-height) so the reveal actually fires on a holding
    // page that barely scrolls. Hover/focus still works as a fallback.
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const isLight = theme === 'light';
  return (
    <>
      <div className={`cs ${isLight ? 'cs--light' : ''} ${scrolled ? 'is-scrolled' : ''}`}>
        <div className="cs__bg" aria-hidden="true"></div>
        <header className="cs__topbar">
          <a className="cs__topbar-brand" href="/" aria-label="Uncle Tibo home">
            <img src="/assets/uncle-tibo-logo-final.svg" alt="Uncle Tibo" />
          </a>
          <div className="cs__topbar-actions">
            <button
              className="cs__theme-toggle"
              onClick={() => setTheme(isLight ? 'dark' : 'light')}
              aria-label={isLight ? 'Switch to dark theme' : 'Switch to light theme'}
              title={isLight ? 'Switch to dark' : 'Switch to light'}
            >
              {/* Moon — shown in dark mode, click to go light */}
              <svg className="ic-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>
              </svg>
              {/* Sun — shown in light mode, click to go dark */}
              <svg className="ic-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="4"/>
                <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4"/>
              </svg>
            </button>
            <button
              className={`cs__hamburger ${open ? 'is-open' : ''}`}
              onClick={() => setOpen(true)}
              aria-label="Open menu"
              aria-expanded={open}
            >
              <span></span><span></span><span></span>
            </button>
          </div>
        </header>

        <main className="cs__main">
          <div className="cs__dashes" aria-hidden="true">
            <div className="cs__dash"></div>
            <div className="cs__dash"></div>
            <div className="cs__dash"></div>
            <div className="cs__dash"></div>
          </div>
          <img className="cs__brand-mark" src="/assets/uncle-tibo-logo-final.svg" alt="Uncle Tibo" />
          <span className="cs__eyebrow">Now open · Kirkdale, SE26</span>
          <h1 className="cs__headline">
            Coffee, pizza,<br/><em>community.</em>
          </h1>
          <p className="cs__sub">Find us at 299 Kirkdale, Sydenham. Coffee from £3 every day, pizza from £9 Wednesday to Saturday.</p>
          <button className="btn btn--primary btn--arrow" onClick={() => setOpen(true)}>Open the menu</button>
        </main>

        <footer className="cs__footer">
          <span>299 Kirkdale · Sydenham · SE26 4QD</span>
          <span><a href="mailto:hello@uncletibos.com">hello@uncletibos.com</a> · <a href="https://instagram.com/uncle.tibo" target="_blank" rel="noopener">@uncle.tibo</a></span>
        </footer>
      </div>

      <Overlay open={open} onClose={() => setOpen(false)} isLight={isLight} />
    </>
  );
}

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