/* eslint-disable no-undef */
// MENU — каталог. Все 6 категорий: смэш, снэки, боксы, соусы,
// лимонады, холодные. Активная — смэш бургеры. Реальные фото.

function MenuScreen() {
  const activeCat = 'smash';
  const items = MENU.smash.items;

  return (
    <div style={{
      background: 'var(--seasalt)', color: 'var(--black)',
      position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 50,
    }}>
      {/* TopBar */}
      <ConceptTopBar fg="#0A0505"
        left={
          <button style={{
            all: 'unset', cursor: 'pointer',
            width: 40, height: 40, borderRadius: 99,
            background: 'rgba(10,5,5,0.92)', color: '#FAFAFA',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none">
              <path d="M8 2 L3 7 L8 12"/>
            </svg>
          </button>
        }
        center={
          <div className="tb-mono" style={{ fontSize: 10, letterSpacing: '0.14em' }}>
            МЕНЮ · 6 КАТЕГОРИЙ
          </div>
        }
      />

      {/* Heading */}
      <div style={{ padding: '12px 22px 14px' }}>
        <div className="tb-display" style={{ fontSize: 36, lineHeight: 0.95 }}>
          СМЭШ<br/>БУРГЕРЫ.
        </div>
        <div className="tb-body" style={{ fontSize: 11, opacity: 0.55, marginTop: 6 }}>
          {MENU.smash.subtitle}
        </div>
      </div>

      {/* category strip — pills */}
      <div style={{
        padding: '0 16px 14px',
        display: 'flex', gap: 6, overflowX: 'auto',
        scrollbarWidth: 'none',
      }}>
        {CATEGORY_ORDER.map((cid) => {
          const c = MENU[cid];
          const active = cid === activeCat;
          return (
            <div key={cid} className="tb-mono" style={{
              padding: '8px 12px', borderRadius: 99,
              fontSize: 10, letterSpacing: '0.08em',
              background: active ? 'var(--black)' : 'transparent',
              color: active ? 'var(--seasalt)' : 'var(--black)',
              border: active ? '1px solid var(--black)' : '1px solid rgba(10,5,5,0.15)',
              whiteSpace: 'nowrap', flexShrink: 0,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {c.titleShort}
              <span style={{
                fontSize: 8, opacity: 0.6,
                color: active ? 'var(--rojo)' : 'inherit',
              }}>·{c.items.length}</span>
            </div>
          );
        })}
      </div>

      {/* MARQUEE strip */}
      <div style={{ overflow: 'hidden', background: 'var(--black)', color: 'var(--seasalt)', padding: '8px 0' }}>
        <div style={{
          display: 'inline-flex', whiteSpace: 'nowrap',
          animation: 'tb-marquee 22s linear infinite',
        }}>
          {[0,1].map(k => (
            <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 14, paddingRight: 14 }}>
              {['HAQIQIY', '×', 'JUST WHAT YOU NEED', '×', '100% HALAL', '×', 'FRESH DAILY', '×'].map((t, i) => (
                t === '×'
                  ? <span key={i} style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--rojo)' }}/>
                  : <span key={i} className="tb-display" style={{ fontSize: 12 }}>{t}</span>
              ))}
            </span>
          ))}
        </div>
      </div>

      {/* PRODUCT GRID — 2 cols */}
      <div style={{
        padding: '14px 14px 0',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
      }}>
        {items.slice(0, 6).map((it, i) => (
          <ProductCard key={it.id} item={it} size="md"/>
        ))}
      </div>

      {/* row for "see more" */}
      <div style={{
        padding: '14px 14px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div className="tb-mono" style={{ fontSize: 10, letterSpacing: '0.12em', opacity: 0.6 }}>
          ЕЩЁ {items.length - 6} БУРГЕРА
        </div>
        <div className="tb-mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--rojo)' }}>
          СМОТРЕТЬ ВСЕ →
        </div>
      </div>

      {/* MORE products (smaller row) */}
      <div style={{
        padding: '10px 14px 0',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
      }}>
        {items.slice(6, 9).map((it) => (
          <ProductCard key={it.id} item={it} size="md"/>
        ))}
      </div>

      {/* Active order pill — sticky-style */}
      <div style={{ padding: '20px 14px 0' }}>
        <div style={{
          background: 'var(--black)', color: 'var(--seasalt)',
          borderRadius: 16, padding: 12,
          display: 'flex', alignItems: 'center', gap: 12,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 99,
            background: 'rgba(255,255,255,0.06)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            animation: 'tb-bun-bob 2.4s ease-in-out infinite',
          }}>
            <BurgerMark size={26} color="#FAFAFA" accent="#DA0505" />
          </div>
          <div style={{ flex: 1 }}>
            <div className="tb-mono" style={{ fontSize: 8, opacity: 0.55, marginBottom: 3 }}>
              ВАШ ЗАКАЗ · #2841
            </div>
            <div className="tb-display" style={{ fontSize: 12 }}>EN ROUTE · 8 MIN</div>
            <div style={{ marginTop: 8, height: 3, borderRadius: 99, background: 'rgba(255,255,255,0.1)', overflow: 'hidden', position: 'relative' }}>
              <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '64%', background: 'var(--rojo)' }}/>
              <div style={{
                position: 'absolute', top: 0, bottom: 0, width: '30%',
                background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent)',
                animation: 'tb-shimmer 1.6s linear infinite',
              }}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MenuScreen = MenuScreen;