/* eslint-disable no-undef */
// DETAIL — product detail. Dark variant with 3D burger hero,
// ingredient chips, nutrition, quantity stepper, ADD CTA.

function DetailScreen() {
  return (
    <div style={{
      background: 'var(--black)', color: 'var(--seasalt)',
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* ambient red glow */}
      <div style={{
        position: 'absolute', top: 100, left: '50%',
        width: 460, height: 460, marginLeft: -230,
        background: 'radial-gradient(closest-side, rgba(218,5,5,0.30), transparent 70%)',
        pointerEvents: 'none',
      }}/>

      {/* TopBar (dark) */}
      <ConceptTopBar
        fg="#FAFAFA"
        pillBorder="1.5px solid rgba(250,250,250,0.4)"
        left={
          <button style={{
            all: 'unset', cursor: 'pointer',
            width: 40, height: 40, borderRadius: 99,
            background: 'rgba(250,250,250,0.10)', 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>
        }
        right={
          <button style={{
            all: 'unset', cursor: 'pointer',
            width: 40, height: 40, borderRadius: 99,
            background: 'rgba(250,250,250,0.10)', 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="M7 2 L8.7 5.5 L12.5 6 L9.7 8.7 L10.4 12.5 L7 10.7 L3.6 12.5 L4.3 8.7 L1.5 6 L5.3 5.5 Z"/>
            </svg>
          </button>
        }
      />

      {/* kinetic HAQIQIY band */}
      <div style={{
        overflow: 'hidden', position: 'relative', marginTop: 4,
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
        maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
      }}>
        <div style={{
          display: 'inline-flex', whiteSpace: 'nowrap',
          animation: 'tb-haqiqiy-scroll 28s linear infinite',
        }}>
          {[0,1].map(k => (
            <span key={k} style={{ display: 'inline-flex', gap: 22, paddingRight: 22 }}>
              {[0,1,2,3].map(n => (
                <span key={n} className="tb-display"
                  style={{
                    fontSize: 70, lineHeight: 1,
                    WebkitTextStroke: n % 2 ? '1px var(--seasalt)' : '0',
                    color: n % 2 ? 'transparent' : 'var(--seasalt)',
                  }}>HAQIQIY</span>
              ))}
            </span>
          ))}
        </div>
      </div>

      {/* HERO product photo */}
      <div style={{
        display: 'flex', justifyContent: 'center', margin: '6px 0 -10px',
        position: 'relative', zIndex: 2,
      }}>
        <div style={{
          animation: 'tb-bun-bob 4s ease-in-out infinite',
          filter: 'drop-shadow(0 16px 24px rgba(0,0,0,0.45))',
        }}>
          <img src="assets/photos/burger-classic-cut.png" alt="Classic"
            style={{ width: 240, height: 240, objectFit: 'contain', display: 'block' }}/>
        </div>
      </div>

      {/* product info */}
      <div style={{
        padding: '18px 18px 0', position: 'relative', zIndex: 2,
        borderTop: '1px solid rgba(250,250,250,0.06)',
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          marginBottom: 12,
        }}>
          <div>
            <div className="tb-mono" style={{ fontSize: 9, color: 'rgba(250,250,250,0.5)', marginBottom: 6 }}>
              CLASSIC · 220 G · 3 MIN
            </div>
            <div className="tb-display" style={{ fontSize: 30, lineHeight: 0.92 }}>
              CLASSIC.
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="tb-mono" style={{ fontSize: 9, color: 'rgba(250,250,250,0.5)' }}>UZS</div>
            <div className="tb-display" style={{ fontSize: 22, color: 'var(--rojo)' }}>
              49 000
            </div>
          </div>
        </div>

        {/* ingredient chips */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
          {['BLACK ANGUS', 'BRIOCHE', 'CHEDDAR', 'LETTUCE', 'TOMATO', '+SAUCE'].map(t => (
            <div key={t} className="tb-mono" style={{
              fontSize: 9, padding: '6px 9px',
              border: '1px solid rgba(250,250,250,0.18)', borderRadius: 99,
              color: 'rgba(250,250,250,0.75)',
            }}>{t}</div>
          ))}
        </div>

        {/* quantity stepper + add row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 4,
            padding: 4, borderRadius: 99,
            background: 'rgba(250,250,250,0.08)',
          }}>
            <button style={{
              all: 'unset', cursor: 'pointer',
              width: 36, height: 36, borderRadius: 99,
              background: 'rgba(250,250,250,0.10)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="12" height="2" viewBox="0 0 12 2"><rect width="12" height="2" rx="1" fill="#FAFAFA"/></svg>
            </button>
            <div className="tb-display" style={{ fontSize: 14, minWidth: 22, textAlign: 'center' }}>2</div>
            <button style={{
              all: 'unset', cursor: 'pointer',
              width: 36, height: 36, borderRadius: 99,
              background: 'var(--rojo)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="12" height="12" viewBox="0 0 12 12" stroke="#FAFAFA" strokeWidth="1.8" strokeLinecap="round">
                <path d="M6 1 V11 M1 6 H11"/>
              </svg>
            </button>
          </div>
          <div style={{ flex: 1 }}>
            <CTAPill label="ДОБАВИТЬ" price="98 000" color="var(--rojo)"/>
          </div>
        </div>
      </div>
    </div>
  );
}

window.DetailScreen = DetailScreen;