// Sitar — shared UI bits: nav chrome, footer, page wrapper, helpers.

const { c, f } = window.SITAR;

// ─── Language context ─────────────────────────────────────
const LanguageContext = React.createContext({ lang: 'de', t: (de) => de, setLang: () => {} });
const useLang = () => React.useContext(LanguageContext);

// ─── Breakpoint hook ──────────────────────────────────────
const useBreakpoint = () => {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const fn = () => setW(window.innerWidth);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return { mobile: w < 640, tablet: w < 1024, w };
};

// ─── Nav ─────────────────────────────────────────────────
const Nav = ({ page, onNav, onReserve }) => {
  const { lang, t, setLang } = useLang();
  const { mobile } = useBreakpoint();
  const [menuOpen, setMenuOpen] = React.useState(false);

  const items = [
    { id: 'home',    label: t('Start',       'Home')    },
    { id: 'menu',    label: t('Speisekarte', 'Menu')    },
    { id: 'gallery', label: t('Galerie',     'Gallery') },
    { id: 'visit',   label: t('Anfahrt',     'Visit')   },
  ];

  const logoEl = (
    <div
      onClick={() => { onNav('home'); setMenuOpen(false); }}
      style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}
    >
      <img
        src={window.SITAR_IMAGES.logoMark}
        alt=""
        onError={(e) => { e.currentTarget.style.display = 'none'; }}
        style={{ width: 44, height: 44, objectFit: 'contain', display: 'block' }}
      />
      <span style={{ fontFamily: f.serif, fontSize: 36, fontStyle: 'italic', fontWeight: 500, letterSpacing: -0.5 }}>Sitar</span>
    </div>
  );

  const langToggle = (
    <div style={{ display: 'flex', alignItems: 'center', border: `1px solid ${c.line}`, overflow: 'hidden', borderRadius: 2 }}>
      {['DE', 'EN'].map(l => (
        <span
          key={l}
          onClick={() => setLang(l.toLowerCase())}
          style={{
            padding: '6px 11px', fontFamily: f.mono, fontSize: 10, letterSpacing: 2,
            cursor: 'pointer', textTransform: 'uppercase',
            background: lang === l.toLowerCase() ? c.tandoor : 'transparent',
            color: c.bone,
            opacity: lang === l.toLowerCase() ? 1 : 0.45,
            transition: 'background .15s, opacity .15s',
            userSelect: 'none',
          }}
        >{l}</span>
      ))}
    </div>
  );

  if (mobile) {
    return (
      <>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '16px 20px', color: c.bone, fontFamily: f.sans,
          position: 'relative', zIndex: 55,
        }}>
          {logoEl}
          <button
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Menu"
            style={{
              background: 'none', border: 'none', cursor: 'pointer',
              color: c.bone, padding: '4px 8px',
              fontFamily: f.serif, fontSize: menuOpen ? 34 : 24, lineHeight: 1,
            }}
          >{menuOpen ? '×' : '☰'}</button>
        </div>

        {menuOpen && (
          <div style={{
            position: 'fixed', inset: 0, zIndex: 50,
            background: c.nightDeep, color: c.bone,
            display: 'flex', flexDirection: 'column',
            padding: '80px 32px 40px',
            overflowY: 'auto',
          }}>
            <div style={{ flex: 1 }}>
              {items.map(it => (
                <div
                  key={it.id}
                  onClick={() => { onNav(it.id); setMenuOpen(false); }}
                  style={{
                    fontFamily: f.serif, fontSize: 44, fontStyle: 'italic', fontWeight: 500,
                    padding: '14px 0', cursor: 'pointer',
                    color: page === it.id ? c.tandoor : c.bone,
                    borderBottom: `1px solid ${c.line}`,
                    letterSpacing: -0.5,
                  }}
                >{it.label}</div>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 40 }}>
              {langToggle}
              <button
                onClick={() => { onReserve(); setMenuOpen(false); }}
                style={{
                  background: c.tandoor, color: c.bone, border: 'none',
                  padding: '14px 28px', fontFamily: f.sans, fontSize: 12, fontWeight: 600,
                  letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
                }}
              >{t('Reservieren', 'Reserve')}</button>
            </div>
          </div>
        )}
      </>
    );
  }

  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '24px 56px', color: c.bone, fontFamily: f.sans, fontSize: 13,
      position: 'relative', zIndex: 5,
    }}>
      {logoEl}
      <div style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
        {items.map(it => (
          <span
            key={it.id}
            onClick={() => onNav(it.id)}
            style={{
              fontSize: 12, textTransform: 'uppercase', letterSpacing: 2.4,
              cursor: 'pointer', opacity: page === it.id ? 1 : 0.7,
              borderBottom: page === it.id ? `1px solid ${c.tandoor}` : '1px solid transparent',
              paddingBottom: 4, transition: 'opacity .15s, border-color .15s',
            }}
          >{it.label}</span>
        ))}

        {langToggle}

        <button
          onClick={onReserve}
          style={{
            background: c.tandoor, color: c.bone, border: 'none',
            padding: '12px 22px', fontFamily: f.sans, fontSize: 12, fontWeight: 600,
            letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
            transition: 'background .15s',
          }}
          onMouseEnter={e => e.currentTarget.style.background = c.tandoorDeep}
          onMouseLeave={e => e.currentTarget.style.background = c.tandoor}
        >{t('Reservieren', 'Reserve')}</button>
      </div>
    </div>
  );
};

// ─── Hours strip ──────────────────────────────────────────
const HoursStrip = () => {
  const { t } = useLang();
  const { mobile } = useBreakpoint();
  return (
    <div style={{
      padding: mobile ? '12px 20px' : '18px 56px',
      display: 'flex',
      flexDirection: mobile ? 'column' : 'row',
      justifyContent: mobile ? 'flex-start' : 'space-between',
      gap: mobile ? 4 : 0,
      background: c.nightDeep,
      borderTop: `1px solid ${c.line}`,
      fontFamily: f.mono,
      fontSize: mobile ? 10 : 11,
      letterSpacing: mobile ? 1.5 : 2,
      color: c.bone,
    }}>
      {mobile ? (
        <>
          <span>{t('MITTAG 11:30–14:30 · ABEND 17:30–24:00', 'LUNCH 11:30–14:30 · DINNER 17:30–24:00')}</span>
          <span style={{ opacity: 0.65 }}>ROBERT-KOCH-STR. 4 · LEHEL · MÜNCHEN</span>
        </>
      ) : (
        <>
          <span>{t('MITTAGSTISCH · 11:30 — 14:30', 'LUNCH · 11:30 — 14:30')}</span>
          <span>{t('ABENDESSEN · 17:30 — 24:00', 'DINNER · 17:30 — 24:00')}</span>
          <span>{t('TÄGLICH GEÖFFNET', 'OPEN DAILY')}</span>
          <span>ROBERT-KOCH-STR. 4 · LEHEL · MÜNCHEN</span>
        </>
      )}
    </div>
  );
};

// ─── Footer ───────────────────────────────────────────────
const Footer = ({ onNav, onReserve }) => {
  const { t } = useLang();
  const { mobile, tablet } = useBreakpoint();
  const cols = mobile ? '1fr' : tablet ? '1fr 1fr' : '1.4fr 1fr 1fr 1fr';
  const pad = mobile ? '48px 20px 28px' : tablet ? '56px 36px 32px' : '72px 56px 36px';
  return (
    <div style={{ background: c.nightDeep, color: c.bone, padding: pad, fontFamily: f.sans }}>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: mobile ? 28 : 48, marginBottom: mobile ? 28 : 56 }}>
        <div>
          <div style={{ fontFamily: f.serif, fontSize: mobile ? 40 : 56, fontStyle: 'italic', fontWeight: 500, letterSpacing: -1 }}>Sitar</div>
          <div style={{ fontFamily: f.serif, fontSize: mobile ? 16 : 20, fontStyle: 'italic', opacity: 0.7, marginTop: 8, maxWidth: 320, lineHeight: 1.4 }}>
            {t('Indische Küche in Lehel.', 'Indian kitchen in Lehel.')}
          </div>
          <button
            onClick={onReserve}
            style={{
              marginTop: 24, background: c.tandoor, color: c.bone, border: 'none',
              padding: '14px 24px', fontFamily: f.sans, fontSize: 12, fontWeight: 600,
              letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
            }}
          >{t('Tisch reservieren', 'Reserve a table')}</button>
        </div>
        <div>
          <div style={{ fontFamily: f.mono, fontSize: 10, letterSpacing: 2.5, color: c.tandoor, textTransform: 'uppercase', marginBottom: 14 }}>{t('Adresse', 'Address')}</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, opacity: 0.85 }}>
            Robert-Koch-Straße 4<br/>
            80538 München<br/>
            Lehel
          </div>
        </div>
        <div>
          <div style={{ fontFamily: f.mono, fontSize: 10, letterSpacing: 2.5, color: c.tandoor, textTransform: 'uppercase', marginBottom: 14 }}>{t('Öffnungszeiten', 'Opening Hours')}</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, opacity: 0.85 }}>
            {t('Mo – Fr: Mittag 11:30–14:30', 'Mo – Fr: Lunch 11:30–14:30')}<br/>
            {t('Mo – Fr: Abend 17:30–24:00', 'Mo – Fr: Dinner 17:30–24:00')}<br/>
            {t('Sa: Abendessen 17:30–24:00', 'Sa: Dinner 17:30–24:00')}<br/>
            {t('So: Mittag & Abend', 'Su: Lunch & Dinner')}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: f.mono, fontSize: 10, letterSpacing: 2.5, color: c.tandoor, textTransform: 'uppercase', marginBottom: 14 }}>{t('Kontakt', 'Contact')}</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, opacity: 0.85 }}>
            +49 89 21112361<br/>
            hallo@sitar-muenchen.de<br/>
            <span style={{ opacity: 0.6 }}>Instagram · @sitarmuc</span>
          </div>
        </div>
      </div>
      <div style={{
        borderTop: `1px solid ${c.line}`, paddingTop: 20,
        display: 'flex', flexDirection: mobile ? 'column' : 'row',
        justifyContent: 'space-between', gap: 8,
        fontFamily: f.mono, fontSize: 10, letterSpacing: 2, opacity: 0.5,
      }}>
        <span>© 2026 SITAR MÜNCHEN</span>
        <span>IMPRESSUM · DATENSCHUTZERKLÄRUNG · AGB</span>
      </div>
    </div>
  );
};

// ─── Placeholder ──────────────────────────────────────────
const Placeholder = ({ label, ratio = '4/5', tone = 'dark', style = {}, src, objectPosition = 'center' }) => {
  const isDark = tone === 'dark';
  if (src) {
    return (
      <div style={{
        width: '100%', aspectRatio: ratio,
        background: isDark ? c.nightDeep : c.boneDeep,
        overflow: 'hidden',
        ...style,
      }}>
        <img
          src={src}
          alt={label}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition, display: 'block' }}
        />
      </div>
    );
  }
  return (
    <div style={{
      width: '100%', aspectRatio: ratio,
      background: isDark
        ? `repeating-linear-gradient(135deg, ${c.nightDeep} 0 14px, ${c.nightSoft} 14px 28px)`
        : `repeating-linear-gradient(135deg, ${c.boneDeep} 0 12px, ${c.boneSoft} 12px 24px)`,
      border: `1px solid ${isDark ? c.line : c.lineDark}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: f.mono, fontSize: 11,
      color: isDark ? c.bone : c.night,
      opacity: 0.6, letterSpacing: 1.5, textAlign: 'center',
      ...style,
    }}>[ {label} ]</div>
  );
};

window.SITAR_IMAGES = {
  logoMark:    '/images/logo-mark.png',
  logoFull:    '/images/logo-full.png',
  butterChicken: '/images/food-butter-chicken.jpg',
  rogan:         '/images/food-rogan-josh.jpg',
  dalMakhani:    '/images/food-dal-makhani.jpg',
  lambChops:     '/images/food-lamb-chops.jpg',
  biryani:       '/images/food-biryani.jpg',
  interior:    '/images/interior-dining.jpg',
  tandoor:     '/images/tandoor.jpg',
  kitchen:     '/images/kitchen.jpg',
  bar:         '/images/interior-bar.jpg',
  brigade:     '/images/kitchen-brigade.jpg',
  chef:        '/images/chef-portrait.jpg',
  hero:        '/images/hero.jpg',
};

Object.assign(window, { LanguageContext, useLang, useBreakpoint, Nav, HoursStrip, Footer, Placeholder });