// app.jsx — SHIKI Leipzig root: navigation, transitions, bottom nav, tweaks
const { useState: useS, useEffect: useE } = React;
const trA = (o, lang) => (o ? (o[lang] ?? o.de) : '');

const ACCENTS = {
  urushi:    { '--accent':'#7F2728', '--accent-glow':'rgba(127,39,40,0.55)', '--on-accent':'#f3ece4' },
  champagne: { '--accent':'#c9a24b', '--accent-glow':'rgba(201,162,75,0.45)', '--on-accent':'#16110c' },
  ivory:     { '--accent':'#e7e0d4', '--accent-glow':'rgba(231,224,212,0.32)', '--on-accent':'#16110c' },
};
const SERIFS = {
  'Cormorant':  "'Cormorant Garamond', Georgia, serif",
  'Marcellus':  "'Marcellus', Georgia, serif",
  'Mincho':     "'Shippori Mincho', 'Cormorant Garamond', serif",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "centered",
  "accent": "urushi",
  "serif": "Cormorant",
  "grain": true
}/*EDITMODE-END*/;

const NAV_SCREENS = ['home','menu','lounge','robata','delivery','book','about','contact','legal'];

function MoreDrawer({ lang, onClose, onNavigate }) {
  const close = () => { onClose(); };
  return (
    <div className="sheet-wrap" style={{ zIndex: 35 }}>
      <div className="sheet-scrim" onClick={close} />
      <div className="sheet menu-drawer-sheet" style={{ background: '#0a0706', padding: '46px 30px 110px', borderRadius: '24px 24px 0 0' }}>
        <div className="sub-menu-content-wrapper">
          
          {/* Menu Main */}
          <div className="sub-menu-main">
            <div onClick={() => { onNavigate('home'); close(); }} className="sub-menu-link main-link gold-link">{trA(SHIKI_STRINGS.navHome, lang).toUpperCase()}</div>
            <div onClick={() => { onNavigate('menu'); close(); }} className="sub-menu-link main-link">{trA(SHIKI_STRINGS.navMenu, lang).toUpperCase()}</div>
            <div onClick={() => { onNavigate('book'); close(); }} className="sub-menu-link main-link">{trA(SHIKI_STRINGS.navBook, lang).toUpperCase()}</div>
          </div>

          {/* Menu Secondary */}
          <div className="sub-menu-secondary">
            <div onClick={() => { onNavigate('delivery'); close(); }} className="sub-menu-link sec-link">{trA(SHIKI_STRINGS.navDelivery, lang).toUpperCase()}</div>
            <div onClick={() => { onNavigate('lounge'); close(); }} className="sub-menu-link sec-link">{trA(SHIKI_STRINGS.navLounge, lang).toUpperCase()}</div>
            <div onClick={() => { onNavigate('robata'); close(); }} className="sub-menu-link sec-link">ROBATA</div>
            <div onClick={() => { onNavigate('about'); close(); }} className="sub-menu-link sec-link">ABOUT US</div>
            <div onClick={() => { onNavigate('contact'); close(); }} className="sub-menu-link sec-link">CONTACT</div>
          </div>

          {/* Divider */}
          <div className="sub-menu-divider" />

          {/* Footer Info */}
          <div className="footer-info-section">
            <div>
              <div className="info-label">ADDRESS</div>
              <div className="info-val">KLOSTERGASSE 18,<br/>04109 LEIPZIG</div>
            </div>
            <div>
              <div className="info-label">CONTACT</div>
              <div className="info-val" style={{ marginBottom: '8px' }}>+0341 9769160</div>
              <div className="info-val" style={{ fontSize: '11px', color: 'var(--bone-2)', marginBottom: '4px' }}>
                {lang === 'de' ? 'Montag bis Sonntag' : 'Monday to Sunday'}
              </div>
              <div className="info-val" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px', width: '140px' }}>
                <span style={{ color: 'var(--muted)' }}>{lang === 'de' ? 'Mittags' : 'Lunch'}</span> <span>11:00 – 14:00</span>
              </div>
              <div className="info-val" style={{ display: 'flex', justifyContent: 'space-between', width: '140px' }}>
                <span style={{ color: 'var(--muted)' }}>{lang === 'de' ? 'Abends' : 'Dinner'}</span> <span>17:30 – 22:00</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useS('home');
  const [splash, setSplash] = useS(true);
  const [splashExiting, setSplashExiting] = useS(false);
  const [lang, setLang] = useS('de');
  const [dish, setDish] = useS(null);
  const [isDrawerOpen, setIsDrawerOpen] = useS(false);

  const go = (s) => {
    if (s === 'more') {
      setIsDrawerOpen(prev => !prev);
      return;
    }
    setIsDrawerOpen(false);
    setDish(null);
    setScreen(s);
  };

  const handleSplashEnter = () => {
    setSplashExiting(true);
    setTimeout(() => setSplash(false), 1200); // Wait for the transition to finish before unmounting
  };

  const navId = (screen === 'lounge' || screen === 'robata') ? 'home' : screen;

  const accentVars = ACCENTS[t.accent] || ACCENTS.urushi;
  const rootStyle = { ...accentVars, '--serif': SERIFS[t.serif] || SERIFS.Cormorant };

  const renderScreen = () => {
    switch (screen) {
      case 'home':     return <HomeScreen lang={lang} setLang={setLang} layout={t.heroLayout} onBook={() => go('book')} onNavigate={go} />;
      case 'menu':     return <MenuScreen lang={lang} setLang={setLang} onOpenDish={setDish} onDelivery={() => go('delivery')} onNavigate={go} />;
      case 'lounge':   return <LoungeScreen lang={lang} setLang={setLang} onBook={() => go('book')} onNavigate={go} />;
      case 'robata':   return <RobataScreen lang={lang} setLang={setLang} onBook={() => go('book')} onOpenDish={setDish} onNavigate={go} />;
      case 'delivery': return <DeliveryScreen lang={lang} setLang={setLang} onOpenDish={setDish} onNavigate={go} />;
      case 'book':     return <BookingScreen lang={lang} setLang={setLang} onNavigate={go} />;
      case 'about':    return <AboutScreen lang={lang} setLang={setLang} onNavigate={go} />;
      case 'contact':  return <ContactScreen lang={lang} setLang={setLang} onNavigate={go} />;
      case 'legal':    return <LegalScreen lang={lang} setLang={setLang} onNavigate={go} />;
      default:         return null;
    }
  };

  return (
    <div className={'app ' + (t.grain ? '' : 'no-grain')} style={rootStyle}>
      <div className="screen-anim" key={screen + (splashExiting ? '-exiting' : '')}>
        {renderScreen()}
      </div>

      {splash && <SplashScreen lang={lang} setLang={setLang} onEnter={handleSplashEnter} exiting={splashExiting} />}

      {NAV_SCREENS.includes(screen) && (
        <BottomNav items={SHIKI_NAV} activeId={isDrawerOpen ? 'more' : navId} lang={lang} onSelect={go} isDrawerOpen={isDrawerOpen} />
      )}

      {dish && <DishDetail dish={dish} lang={lang} onClose={() => setDish(null)} isDelivery={screen === 'delivery'} />}
      {isDrawerOpen && <MoreDrawer lang={lang} onClose={() => setIsDrawerOpen(false)} onNavigate={go} />}

      <TweaksPanel>
        <TweakSection label={lang==='de'?'Hero-Layout':'Hero layout'} />
        <TweakRadio label={lang==='de'?'Aufbau':'Composition'} value={t.heroLayout}
          options={['centered','bottom','split']}
          onChange={v => setTweak('heroLayout', v)} />
        <TweakSection label={lang==='de'?'Erscheinungsbild':'Appearance'} />
        <TweakColor label={lang==='de'?'Akzent':'Accent'} value={accentVars['--accent']}
          options={['#7F2728','#c9a24b','#e7e0d4']}
          onChange={v => {
            const key = v==='#7F2728'?'urushi':v==='#c9a24b'?'champagne':'ivory';
            setTweak('accent', key);
          }} />
        <TweakRadio label={lang==='de'?'Überschrift':'Headline'} value={t.serif}
          options={['Cormorant','Marcellus','Mincho']}
          onChange={v => setTweak('serif', v)} />
        <TweakToggle label={lang==='de'?'Filmkorn':'Film grain'} value={t.grain}
          onChange={v => setTweak('grain', v)} />
      </TweaksPanel>
    </div>
  );
}

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