/* eslint-disable no-undef */
// CUSTOMIZE — "Mix. Match. Eat." Inspired by reference middle screen.
// Circular ingredient picker on cream bg, prev/next, mini burger preview.

function CustomizeScreen() {
  return (
    <div style={{
      background: 'var(--seasalt)', color: 'var(--black)',
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* subtle cream tone instead of pure seasalt */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, #F5EFE5 0%, #FAFAFA 60%)',
        pointerEvents: 'none',
      }}/>

      {/* TopBar */}
      <div style={{ position: 'relative' }}>
        <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>
          }
        />
      </div>

      {/* Heading */}
      <div style={{ padding: '14px 22px 0', position: 'relative' }}>
        <div className="tb-mono" style={{ fontSize: 9, opacity: 0.55, marginBottom: 6 }}>
          ШАГ 02 · СОБЕРИ СВОЙ БУРГЕР
        </div>
        <div className="tb-display" style={{ fontSize: 38, lineHeight: 0.95 }}>
          СВОЙ.<br/>ВКУС.
        </div>
      </div>

      {/* Ingredient picker — featured ingredient in center */}
      <div style={{
        position: 'relative', padding: '18px 0 0', height: 200,
      }}>
        <FlowingCurve stroke="#0A0505" strokeWidth={1.2} opacity={0.12} variant="wave"/>

        <div style={{
          position: 'relative', zIndex: 1,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 14,
        }}>
          <div style={{ opacity: 0.55, transform: 'scale(0.78)' }}>
            <div style={{
              width: 80, height: 80, borderRadius: 99, overflow: 'hidden',
              background: '#F5EFE5',
            }}>
              <img src="assets/photos/sauce-garlic.jpg" alt="Garlic"
                style={{ width: '100%', height: '100%', objectFit: 'cover', transform: 'scale(1.4)' }}/>
            </div>
          </div>
          {/* the active center */}
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)',
              padding: '4px 10px', borderRadius: 99,
              background: 'var(--rojo)', color: 'var(--seasalt)',
              fontFamily: 'var(--font-mono)', fontSize: 8, letterSpacing: '0.14em',
              whiteSpace: 'nowrap',
              zIndex: 2,
            }}>+9 000 UZS</div>
            <div style={{
              width: 120, height: 120, borderRadius: 99,
              background: '#F5EFE5',
              boxShadow: '0 12px 28px rgba(10,5,5,0.14), 0 0 0 6px rgba(218,5,5,0.08)',
              border: '3px solid var(--rojo)',
              animation: 'tb-bun-bob 3s ease-in-out infinite',
              overflow: 'hidden', position: 'relative',
            }}>
              <img src="assets/photos/sauce-spicy.jpg" alt="Spicy"
                style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  transform: 'scale(1.4)',
                }}/>
            </div>
          </div>
          <div style={{ opacity: 0.55, transform: 'scale(0.78)' }}>
            <div style={{
              width: 80, height: 80, borderRadius: 99, overflow: 'hidden',
              background: '#F5EFE5',
            }}>
              <img src="assets/photos/sauce-ketchup.jpg" alt="Ketchup"
                style={{ width: '100%', height: '100%', objectFit: 'cover', transform: 'scale(1.4)' }}/>
            </div>
          </div>
        </div>

        {/* tiny serif accent like the reference's "Any flavor for just $200" */}
        <div style={{
          position: 'absolute', top: 12, left: 0, right: 0, textAlign: 'center',
        }}>
          <div className="tb-mono" style={{ fontSize: 9, opacity: 0.55, letterSpacing: '0.16em' }}>
            03 / 05 · ВЫБОР СОУСА
          </div>
        </div>

        {/* prev/next nav */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: -10,
          display: 'flex', justifyContent: 'center', gap: 8,
        }}>
          <RoundArrow direction="left" size={36}/>
          <RoundArrow direction="right" size={36}/>
        </div>
      </div>

      {/* ingredient name + description */}
      <div style={{ padding: '40px 22px 0', textAlign: 'center', position: 'relative' }}>
        <div className="tb-display" style={{ fontSize: 22 }}>ОСТРЫЙ СОУС</div>
        <div className="tb-body" style={{ fontSize: 11, opacity: 0.6, marginTop: 6, maxWidth: 280, marginInline: 'auto' }}>
          Чипотле · мёд · копчёная паприка. Тёплая острота с дымком.
        </div>
      </div>

      {/* Build summary — like a receipt strip */}
      <div style={{
        margin: '20px 16px 0',
        background: 'var(--black)', color: 'var(--seasalt)',
        borderRadius: 16, padding: '12px 14px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {/* mini burger silhouette */}
          <div style={{ width: 40, height: 30, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 2, right: 2, bottom: 0, height: 6, background: 'var(--seasalt)', borderRadius: '50%' }}/>
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 6, height: 5, background: 'var(--rojo)', borderRadius: '50%' }}/>
            <div style={{ position: 'absolute', left: 1, right: 1, bottom: 11, height: 4, background: 'var(--seasalt)', borderRadius: '50%' }}/>
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 15, height: 12, background: 'var(--seasalt)', borderRadius: '50% 50% 30% 30%' }}/>
          </div>
          <div>
            <div className="tb-mono" style={{ fontSize: 8, opacity: 0.55, marginBottom: 2 }}>
              ВАШ БУРГЕР · 4 ПОЗИЦИИ
            </div>
            <div className="tb-display" style={{ fontSize: 13 }}>CLASSIC + ОСТРЫЙ</div>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="tb-mono" style={{ fontSize: 8, opacity: 0.55 }}>ИТОГО</div>
          <div className="tb-display" style={{ fontSize: 16 }}>58 000</div>
        </div>
      </div>

      {/* CTA bottom */}
      <div style={{
        marginTop: 'auto',
        padding: '16px 14px 50px',
        display: 'flex', alignItems: 'center', gap: 10,
        position: 'relative', zIndex: 3,
      }}>
        <button style={{
          all: 'unset', cursor: 'pointer',
          width: 56, height: 56, borderRadius: 99,
          background: '#FAFAFA', color: '#0A0505',
          border: '1.5px solid rgba(10,5,5,0.18)',
          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="M2 7 H12 M2 3 H12 M2 11 H8"/>
          </svg>
        </button>
        <div style={{ flex: 1 }}>
          <CTAPill label="ДАЛЬШЕ" price="58 000" color="var(--rojo)"/>
        </div>
      </div>
    </div>
  );
}

window.CustomizeScreen = CustomizeScreen;