/* eslint-disable no-undef */
// EXTRAS — соусы, лимонады, холодные напитки.
// Показывает три категории на одном экране: соусы как фото-сетка,
// лимонады как стилизованные стаканы с лого, drinks снизу.

function ExtrasScreen() {
  return (
    <div style={{
      background: 'var(--seasalt)', color: 'var(--black)',
      position: 'absolute', inset: 0, overflow: 'auto', paddingBottom: 50,
    }}>
      <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' }}>
            СОУСЫ · НАПИТКИ
          </div>
        }
      />

      {/* SECTION 1 — sauces */}
      <div style={{ padding: '8px 22px 6px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div className="tb-display" style={{ fontSize: 22, lineHeight: 1 }}>
            СОУСЫ
          </div>
          <div className="tb-mono" style={{ fontSize: 9, opacity: 0.5 }}>
            04 · {MENU.sauces.items.filter(i => !i.addon).length} ШТ
          </div>
        </div>
        <div className="tb-body" style={{ fontSize: 11, opacity: 0.55, marginTop: 4 }}>
          {MENU.sauces.subtitle}
        </div>
      </div>

      {/* sauces — horizontal scroll w/ photos */}
      <div style={{
        padding: '10px 16px 4px',
        display: 'flex', gap: 8, overflowX: 'auto',
        scrollbarWidth: 'none',
      }}>
        {MENU.sauces.items.filter(i => !i.addon).map((s) => (
          <div key={s.id} style={{
            width: 110, flexShrink: 0,
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <div style={{
              width: 110, height: 110, borderRadius: 14,
              overflow: 'hidden', background: '#F5EFE5',
              position: 'relative',
            }}>
              <img src={s.img} alt={s.name}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              {s.tag && (
                <div className="tb-mono" style={{
                  position: 'absolute', top: 6, right: 6,
                  padding: '2px 6px', borderRadius: 99,
                  background: 'var(--rojo)', color: 'var(--seasalt)',
                  fontSize: 7, letterSpacing: '0.1em',
                }}>{s.tag}</div>
              )}
            </div>
            <div className="tb-display" style={{ fontSize: 11, lineHeight: 1 }}>{s.name}</div>
            <div className="tb-mono" style={{ fontSize: 9, opacity: 0.55 }}>
              {fmtPrice(s.price)}
            </div>
          </div>
        ))}
      </div>

      {/* ADD-ONS row */}
      <div style={{ padding: '12px 16px 0' }}>
        <div className="tb-mono" style={{ fontSize: 9, letterSpacing: '0.12em', opacity: 0.55, marginBottom: 8 }}>
          ДОБАВКИ
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {MENU.sauces.items.filter(i => i.addon).map(a => (
            <div key={a.id} style={{
              padding: '8px 12px', borderRadius: 99,
              border: '1px solid rgba(10,5,5,0.12)',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: '#fff',
            }}>
              <span className="tb-display" style={{ fontSize: 11 }}>{a.name}</span>
              <span className="tb-mono" style={{ fontSize: 9, opacity: 0.55 }}>
                +{fmtPrice(a.price)}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* SECTION 2 — lemonades (cup graphics) */}
      <div style={{ padding: '24px 22px 6px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div className="tb-display" style={{ fontSize: 22, lineHeight: 1 }}>
            ЛИМОНАДЫ
          </div>
          <div className="tb-mono" style={{ fontSize: 9, opacity: 0.5 }}>
            05 · АВТОРСКИЕ
          </div>
        </div>
        <div className="tb-body" style={{ fontSize: 11, opacity: 0.55, marginTop: 4 }}>
          {MENU.lemonades.subtitle}
        </div>
      </div>

      {/* lemonades — horizontal cup row */}
      <div style={{
        padding: '14px 16px 4px',
        display: 'flex', gap: 10, overflowX: 'auto',
        scrollbarWidth: 'none',
      }}>
        {MENU.lemonades.items.map((l, i) => (
          <div key={l.id} style={{
            width: 116, flexShrink: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            padding: '4px 0 8px',
          }}>
            <div style={{
              animation: `tb-bun-bob ${3 + i * 0.3}s ease-in-out infinite`,
              animationDelay: `-${i * 0.4}s`,
            }}>
              <CupGraphic color={l.color} size={104}/>
            </div>
            {l.tag && (
              <div className="tb-mono" style={{
                fontSize: 7, padding: '2px 6px', borderRadius: 99,
                background: 'var(--rojo)', color: 'var(--seasalt)',
                letterSpacing: '0.1em', marginTop: -8, marginBottom: 4,
              }}>{l.tag}</div>
            )}
            <div className="tb-display" style={{ fontSize: 12 }}>{l.name}</div>
            <div className="tb-mono" style={{ fontSize: 9, opacity: 0.55 }}>
              {fmtPrice(l.price)}
            </div>
          </div>
        ))}
      </div>

      {/* SECTION 3 — cold drinks (compact pill row) */}
      <div style={{ padding: '20px 22px 6px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div className="tb-display" style={{ fontSize: 22, lineHeight: 1 }}>
            ХОЛОДНЫЕ
          </div>
          <div className="tb-mono" style={{ fontSize: 9, opacity: 0.5 }}>
            06 · 0.5 Л
          </div>
        </div>
      </div>
      <div style={{
        padding: '12px 16px 0',
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8,
      }}>
        {MENU.cold.items.map((d) => (
          <div key={d.id} style={{
            padding: '10px 8px', borderRadius: 12,
            background: '#fff', border: '1px solid rgba(10,5,5,0.06)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            position: 'relative',
          }}>
            <div style={{
              width: 6, height: 6, borderRadius: 99, background: d.color,
              boxShadow: `0 0 0 4px ${d.color}1A`,
              marginBottom: 4,
            }}/>
            <div className="tb-display" style={{ fontSize: 11, lineHeight: 1 }}>{d.name}</div>
            <div className="tb-mono" style={{ fontSize: 8, opacity: 0.5 }}>{d.desc}</div>
            <div className="tb-mono" style={{ fontSize: 9, fontWeight: 600 }}>
              {fmtPrice(d.price)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.ExtrasScreen = ExtrasScreen;