// app.tsx — root + nav + footer
type TabId = 'home' | 'menu' | 'book';
const TABS: { id: TabId; label: string }[] = [
  { id: 'home', label: 'Home' },
  { id: 'menu', label: 'Menu' },
  { id: 'book', label: 'Book' },
];

const PHONE_DISPLAY = '(02) 9662 8183';
const PHONE_DIAL = '+61296628183';

const App: React.FC = () => {
  const [tab, setTab] = React.useState<TabId>('home');
  const [menuOpen, setMenuOpen] = React.useState<boolean>(false);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior });
  }, [tab]);

  // Lock body scroll when drawer is open, and close on Escape.
  React.useEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  const goTo = (t: string) => { setTab(t as TabId); setMenuOpen(false); };

  return (
    <div data-screen-label={tab.charAt(0).toUpperCase() + tab.slice(1)}>
      <nav className="nav">
        <div className="nav-logo" onClick={() => goTo('home')} style={{ cursor: 'pointer' }}>
          NIKKO
          <span className="amp">日本 · 한국</span>
        </div>
        <div className="nav-tabs">
          {TABS.map((t) => (
            <button key={t.id} className={'nav-tab ' + (tab === t.id ? 'active' : '')} onClick={() => setTab(t.id)}>
              {t.label}
            </button>
          ))}
        </div>
        <a className="nav-call" href={'tel:' + PHONE_DIAL} aria-label={'Call ' + PHONE_DISPLAY}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>
          </svg>
          <span>{PHONE_DISPLAY}</span>
        </a>
        <button
          className={'nav-burger ' + (menuOpen ? 'open' : '')}
          onClick={() => setMenuOpen((v) => !v)}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          aria-controls="mobile-drawer"
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </nav>

      <div
        id="mobile-drawer"
        className={'mobile-drawer ' + (menuOpen ? 'open' : '')}
        role="dialog"
        aria-modal="true"
        aria-hidden={!menuOpen}
      >
        <div className="mobile-drawer-scrim" onClick={() => setMenuOpen(false)} />
        <div className="mobile-drawer-panel">
          <div className="mobile-drawer-head">
            <span className="jp">日光</span>
            <span className="label">Nikko · Kingsford</span>
          </div>
          <div className="mobile-drawer-tabs">
            {TABS.map((t) => (
              <button
                key={t.id}
                className={'mobile-drawer-tab ' + (tab === t.id ? 'active' : '')}
                onClick={() => goTo(t.id)}
              >
                <span className="mono num">0{TABS.findIndex((x) => x.id === t.id) + 1}</span>
                <span className="lbl">{t.label}</span>
                <span className="arrow">→</span>
              </button>
            ))}
          </div>
          <a className="mobile-drawer-call" href={'tel:' + PHONE_DIAL}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>
            </svg>
            <div>
              <div className="k">Call us</div>
              <div className="v">{PHONE_DISPLAY}</div>
            </div>
          </a>
          <div className="mobile-drawer-foot">
            <div>1/305 Anzac Parade</div>
            <div>Kingsford NSW 2032</div>
            <div style={{ marginTop: 8, opacity: 0.7 }}>Open daily · 11:10 — 20:30</div>
          </div>
        </div>
      </div>

      {tab === 'home' && <window.HomePage goTo={goTo} />}
      {tab === 'menu' && <window.MenuPage />}
      {tab === 'book' && <window.BookPage />}

      <footer className="footer">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="logo">NIKKO</div>
            <p>Japanese & Korean cooking, served on Anzac Parade in Kingsford. Open seven days for dine-in and takeaway.</p>
          </div>
          <div className="footer-col">
            <h5>Visit</h5>
            <p>1/305 Anzac Parade</p>
            <p>Kingsford NSW 2032</p>
          </div>
          <div className="footer-col">
            <h5>Hours</h5>
            <p>Mon · 11:30 — 20:30</p>
            <p>Tue – Sat · 11:10 — 20:30</p>
            <p>Sun · 11:10 — 20:30</p>
          </div>
          <div className="footer-col">
            <h5>Call us</h5>
            <a href={'tel:' + PHONE_DIAL}>{PHONE_DISPLAY}</a>
            <p style={{ opacity: 0.7, fontSize: 12 }}>Bookings &amp; takeaway</p>
          </div>
        </div>
        <div className="footer-base">
          <span>© 2026 Nikko Kitchen · Kingsford</span>
          <span>日光 · 日本 × 한국</span>
        </div>
      </footer>
    </div>
  );
};

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