// Tryovi -- Screens 5-9
// =============================================================================

const { useState: useState2, useEffect: useEffect2 } = React;

// =============================================================================
// 5. CATEGORY SELECT (Women / Men / Kids)
// =============================================================================
function ScreenCategory({ onPick }) {
  const cats = [
    { id: 'women', label: 'Women', count: 86, color: 'var(--coral)', img: 'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=600&q=80', italic: 'her' },
    { id: 'men',   label: 'Men',   count: 72, color: 'var(--cobalt)', img: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80', italic: 'him' },
    { id: 'kids',  label: 'Kids',  count: 48, color: 'var(--acid)',   img: 'https://images.unsplash.com/photo-1518831959646-742c3a14ebf7?w=600&q=80', italic: 'them' },
  ];
  return (
    <div data-screen-label="05 Category" className="kiosk" style={{ background: 'var(--cream)' }}>
      <StatusBar step={4} total={9} />

      <div style={{ position: 'absolute', top: 140, left: 64, right: 64 }}>
        <div className="eyebrow" style={{ color: 'var(--coral)' }}>◉ Step 02 — pick a wardrobe</div>
        <h2 className="display" style={{ fontSize: 150, marginTop: 16, lineHeight: 0.88 }}>
          Who's <span className="display-italic" style={{ color: 'var(--coral)' }}>shopping</span><br />
          today?
        </h2>
      </div>

      {/* Three big tappable category cards stacked */}
      <div style={{ position: 'absolute', top: 600, left: 64, right: 64, display: 'flex', flexDirection: 'column', gap: 24 }}>
        {cats.map((c, i) => (
          <button key={c.id} onClick={() => onPick(c.id)} className="garment-card" style={{
            position: 'relative',
            height: 320,
            background: c.color,
            border: 'none',
            borderRadius: 24,
            overflow: 'hidden',
            textAlign: 'left',
            color: c.id === 'kids' ? 'var(--ink)' : 'var(--cream)',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'stretch',
          }}>
            {/* Big image on right */}
            <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '52%', overflow: 'hidden' }}>
              <img src={c.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', mixBlendMode: c.id === 'kids' ? 'multiply' : 'normal' }} />
            </div>
            {/* Diagonal mask */}
            <div style={{
              position: 'absolute', top: 0, right: 0, bottom: 0, width: '60%',
              background: 'linear-gradient(105deg, ' + c.color + ' 0%, ' + c.color + ' 30%, transparent 60%)',
              pointerEvents: 'none',
            }} />
            {/* Content */}
            <div style={{ position: 'relative', zIndex: 2, padding: '40px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
              <div className="mono" style={{ fontSize: 16, letterSpacing: '0.16em', opacity: 0.7 }}>0{i + 1} / 03</div>
              <div>
                <h3 className="display" style={{ fontSize: 140, lineHeight: 0.88 }}>{c.label}</h3>
                <div style={{ marginTop: 12, fontSize: 22, fontWeight: 500, opacity: 0.85 }}>
                  {c.count} new looks · curated for {c.italic}
                </div>
              </div>
            </div>
            {/* Arrow */}
            <div style={{
              position: 'absolute', right: 36, top: '50%', transform: 'translateY(-50%)',
              width: 80, height: 80, borderRadius: '50%',
              background: c.id === 'kids' ? 'var(--ink)' : 'var(--cream)',
              color: c.id === 'kids' ? 'var(--cream)' : 'var(--ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 36,
              zIndex: 3,
            }}>→</div>
          </button>
        ))}
      </div>

      {/* Footer hint */}
      <div style={{ position: 'absolute', bottom: 32, left: 64, right: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="mono" style={{ fontSize: 14, opacity: 0.5 }}>← BACK · RETAKE PHOTO</div>
        <div className="mono" style={{ fontSize: 14, opacity: 0.5 }}>206 STYLES IN STORE</div>
      </div>
    </div>
  );
}

// =============================================================================
// 6. GARMENT GRID
// =============================================================================
function ScreenGarments({ category, onPick, onBack }) {
  const items = ALL_GARMENTS[category] || [];
  const [filter, setFilter] = useState2('All');
  const filters = ['All', 'New', 'Trending', 'Couture', 'Under ₹3,000'];
  const catLabel = { women: 'Women', men: 'Men', kids: 'Kids' }[category];

  return (
    <div data-screen-label="06 Garments" className="kiosk" style={{ background: 'var(--cream)' }}>
      <StatusBar step={5} total={9} />

      {/* Header */}
      <div style={{ position: 'absolute', top: 110, left: 64, right: 64 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--coral)' }}>◉ {catLabel} · spring '26</div>
            <h2 className="display" style={{ fontSize: 110, marginTop: 12, lineHeight: 0.9 }}>
              Pick a <span className="display-italic" style={{ color: 'var(--coral)' }}>look.</span>
            </h2>
          </div>
          <button onClick={onBack} className="btn btn-ghost" style={{ fontSize: 18, padding: '12px 24px' }}>
            ← back
          </button>
        </div>
        <p style={{ fontSize: 22, marginTop: 16, opacity: 0.65, maxWidth: 720 }}>
          {items.length} curated pieces. Tap one — we'll style it on you in seconds.
        </p>
      </div>

      {/* Filter chips */}
      <div style={{ position: 'absolute', top: 480, left: 64, right: 64, display: 'flex', gap: 12, overflow: 'hidden' }}>
        {filters.map(f => (
          <button key={f} onClick={() => setFilter(f)} style={{
            padding: '14px 28px',
            borderRadius: 999,
            border: filter === f ? 'none' : '2px solid var(--ink)',
            background: filter === f ? 'var(--ink)' : 'transparent',
            color: filter === f ? 'var(--cream)' : 'var(--ink)',
            fontFamily: 'var(--sans)',
            fontWeight: 500,
            fontSize: 18,
            cursor: 'pointer',
            whiteSpace: 'nowrap',
          }}>{f}</button>
        ))}
      </div>

      {/* Grid -- 2 cols, 4 rows for 8 items */}
      <div style={{ position: 'absolute', top: 580, left: 64, right: 64, bottom: 200, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28, overflow: 'hidden' }}>
        {items.map((g, i) => (
          <button key={g.id} onClick={() => onPick(g)} className="garment-card" style={{
            background: g.color,
            border: 'none',
            borderRadius: 20,
            overflow: 'hidden',
            position: 'relative',
            cursor: 'pointer',
            textAlign: 'left',
            padding: 0,
            color: ['#F7F2EA', '#E8FF4A'].includes(g.color) ? 'var(--ink)' : 'var(--cream)',
            display: 'flex',
            flexDirection: 'column',
          }}>
            <div style={{ flex: 1, position: 'relative', overflow: 'hidden', minHeight: 0 }}>
              <img src={g.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              {g.tag && (
                <div style={{
                  position: 'absolute', top: 16, left: 16,
                  background: 'var(--acid)', color: 'var(--ink)',
                  padding: '6px 14px', borderRadius: 999,
                  fontSize: 14, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
                }}>{g.tag}</div>
              )}
              <div style={{
                position: 'absolute', top: 16, right: 16,
                width: 44, height: 44, borderRadius: '50%',
                background: 'rgba(255,255,255,0.95)', color: 'var(--ink)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 22,
              }}>♡</div>
            </div>
            <div style={{ padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <div>
                <div className="mono" style={{ fontSize: 12, opacity: 0.6, letterSpacing: '0.1em' }}>SKU {String(i + 401).padStart(4, '0')}</div>
                <div style={{ fontSize: 22, fontWeight: 600, marginTop: 4 }}>{g.name}</div>
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28 }}>{g.price}</div>
            </div>
          </button>
        ))}
      </div>

      {/* Bottom info bar */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 130, background: 'var(--ink)', color: 'var(--cream)', display: 'flex', alignItems: 'center', padding: '0 64px', justifyContent: 'space-between' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--acid)', marginBottom: 4 }}>Recently tried</div>
          <div style={{ display: 'flex', gap: 8 }}>
            {items.slice(0, 4).map(g => (
              <div key={g.id} style={{ width: 56, height: 56, borderRadius: 8, overflow: 'hidden', border: '2px solid rgba(247,242,234,0.2)' }}>
                <img src={g.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ))}
            <div style={{ width: 56, height: 56, borderRadius: 8, border: '2px dashed rgba(247,242,234,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, opacity: 0.5 }}>+</div>
          </div>
        </div>
        <div className="mono" style={{ fontSize: 14, opacity: 0.5, textAlign: 'right' }}>
          <div>SCAN ANY GARMENT TAG</div>
          <div style={{ marginTop: 4 }}>TO TRY INSTANTLY →</div>
        </div>
      </div>
    </div>
  );
}

// =============================================================================
// 7. PROCESSING / GENERATING
// =============================================================================
function ScreenProcessing({ garment, onDone }) {
  const [step, setStep] = useState2(0);
  const stages = [
    'Analysing your photo',
    'Mapping your body',
    'Draping the fabric',
    'Lighting the studio',
    'Composing final shots',
  ];
  useEffect2(() => {
    if (step < stages.length) {
      const t = setTimeout(() => setStep(s => s + 1), 800);
      return () => clearTimeout(t);
    } else {
      const t = setTimeout(onDone, 500);
      return () => clearTimeout(t);
    }
  }, [step]);

  const pct = Math.min(100, Math.round((step / stages.length) * 100));

  return (
    <div data-screen-label="07 Processing" className="kiosk" style={{ background: 'var(--ink)', color: 'var(--cream)', overflow: 'hidden' }}>
      <StatusBar dark step={6} total={9} />

      {/* Big shimmer photo placeholder */}
      <div style={{ position: 'absolute', top: 220, left: 120, right: 120, height: 1100, borderRadius: 16, overflow: 'hidden', background: '#1a1a1a' }}>
        {/* Shimmer photo (model + garment overlay being composed) */}
        <img src={PEOPLE.captured} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.6, filter: 'blur(2px) saturate(0.8)' }} />
        <img src={garment?.img} alt="" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          opacity: 0.4, mixBlendMode: 'overlay',
        }} />
        {/* Scan line */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 200,
          background: 'linear-gradient(180deg, transparent, rgba(232,255,74,0.55), transparent)',
          animation: 'scan 2.4s ease-in-out infinite',
        }} />
        {/* Shimmer overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(105deg, transparent 30%, rgba(232,255,74,0.18) 50%, transparent 70%)',
          backgroundSize: '200% 100%',
          animation: 'shimmer 2.5s linear infinite',
        }} />
        {/* Tracking dots scattered */}
        {[[20, 18], [50, 14], [78, 20], [22, 38], [48, 42], [76, 40], [24, 62], [50, 68], [76, 64], [50, 88]].map((p, i) => (
          <div key={i} style={{
            position: 'absolute', left: p[0] + '%', top: p[1] + '%',
            width: 8, height: 8, borderRadius: '50%', background: 'var(--acid)',
            boxShadow: '0 0 0 2px var(--ink), 0 0 16px rgba(232,255,74,0.8)',
            animation: 'pulse-ring 2s ease-out infinite ' + (i * 0.15) + 's',
          }} />
        ))}
        {/* HUD overlay */}
        <div style={{ position: 'absolute', top: 24, left: 24, right: 24, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 14 }}>
          <span style={{ color: 'var(--acid)' }}>● COMPOSING — {pct}%</span>
          <span style={{ opacity: 0.7 }}>NEURAL ENGINE v3.2</span>
        </div>
      </div>

      {/* Bottom panel */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 480, background: 'var(--cream)', color: 'var(--ink)', padding: '60px 64px' }}>
        <div className="eyebrow" style={{ color: 'var(--coral)' }}>◉ Styling in progress</div>
        <h2 className="display" style={{ fontSize: 90, marginTop: 16, lineHeight: 0.95 }}>
          Almost <span className="display-italic" style={{ color: 'var(--coral)' }}>ready.</span>
        </h2>

        {/* Stage list */}
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {stages.map((s, i) => (
            <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 16, opacity: i <= step ? 1 : 0.3, transition: 'opacity 200ms' }}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: i < step ? 'var(--ink)' : (i === step ? 'var(--coral)' : 'transparent'),
                border: i >= step ? '2px solid var(--ink)' : 'none',
                color: 'var(--cream)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700,
                flexShrink: 0,
              }}>{i < step ? '✓' : ''}</div>
              <span style={{ fontSize: 22, fontWeight: i === step ? 600 : 400 }}>{s}</span>
              {i === step && (
                <span className="mono" style={{ marginLeft: 'auto', fontSize: 14, color: 'var(--coral)' }}>RUNNING…</span>
              )}
            </div>
          ))}
        </div>

        {/* Progress bar */}
        <div style={{ marginTop: 28 }}>
          <div style={{ height: 4, background: 'rgba(10,10,10,0.1)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: pct + '%', background: 'var(--coral)', transition: 'width 400ms ease' }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }} className="mono">
            <span style={{ fontSize: 14, opacity: 0.6 }}>Estimated 4 seconds</span>
            <span style={{ fontSize: 14 }}>{pct}%</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================================
// 8. RESULT REVEAL
// =============================================================================
function ScreenResult({ garment, onShare, onTryAnother, onRestart }) {
  const [active, setActive] = useState2(0);
  const variants = [
    { src: PEOPLE.result1, label: 'Studio · front', pose: '3/4 front · daylight' },
    { src: PEOPLE.result2, label: 'Editorial · profile', pose: 'profile · golden hour' },
    { src: PEOPLE.result3, label: 'Street · candid', pose: 'walking · overcast' },
    { src: PEOPLE.result4, label: 'Studio · back', pose: 'back view · seamless' },
  ];

  return (
    <div data-screen-label="08 Result" className="kiosk" style={{ background: 'var(--cream)' }}>
      <StatusBar step={7} total={9} />

      {/* Header */}
      <div style={{ position: 'absolute', top: 110, left: 64, right: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--coral)' }}>◉ Your shoot is live</div>
          <h2 className="display" style={{ fontSize: 100, marginTop: 12, lineHeight: 0.9 }}>
            Hello, <span className="display-italic" style={{ color: 'var(--coral)' }}>icon.</span>
          </h2>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 14, opacity: 0.5 }}>STYLED IN</div>
          <div style={{ fontSize: 24, fontWeight: 600, marginTop: 4 }}>{garment?.name || 'Aria Slip Dress'}</div>
          <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, color: 'var(--coral)', marginTop: 2 }}>{garment?.price || '₹4,890'}</div>
        </div>
      </div>

      {/* Big hero photo */}
      <div style={{ position: 'absolute', top: 380, left: 64, right: 64, height: 880, overflow: 'hidden', borderRadius: 8, background: 'var(--ink)' }}>
        <img src={variants[active].src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.05) saturate(1.05)' }} />

        {/* Editorial overlay text */}
        <div style={{ position: 'absolute', top: 24, left: 24, color: 'var(--cream)', fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.12em' }}>
          <div style={{ background: 'rgba(0,0,0,0.5)', padding: '8px 14px', borderRadius: 4, backdropFilter: 'blur(8px)', display: 'inline-block' }}>
            <span style={{ color: 'var(--acid)' }}>FRAME 0{active + 1}</span> · {variants[active].pose}
          </div>
        </div>
        <div style={{ position: 'absolute', top: 24, right: 24, color: 'var(--cream)', display: 'flex', gap: 8 }}>
          <div style={{ background: 'rgba(0,0,0,0.5)', padding: '8px 14px', borderRadius: 4, backdropFilter: 'blur(8px)', fontFamily: 'var(--mono)', fontSize: 13 }}>
            <span style={{ color: 'var(--acid)' }}>FIT</span> ✓ TRUE TO SIZE
          </div>
          <div style={{ background: 'rgba(0,0,0,0.5)', padding: '8px 14px', borderRadius: 4, backdropFilter: 'blur(8px)', fontFamily: 'var(--mono)', fontSize: 13 }}>
            <span style={{ color: 'var(--acid)' }}>SIZE</span> M
          </div>
        </div>

        {/* Magazine masthead overlay -- bottom */}
        <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: 'var(--cream)' }}>
          <div>
            <div className="display-italic" style={{ fontSize: 56, lineHeight: 1 }}>tryovi.</div>
            <div className="mono" style={{ fontSize: 12, opacity: 0.7, marginTop: 4, letterSpacing: '0.12em' }}>VOL 04 · ISSUE 22 · S/S 2026</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="mono" style={{ fontSize: 12, opacity: 0.7, letterSpacing: '0.1em' }}>{variants[active].label.toUpperCase()}</div>
            <div className="mono" style={{ fontSize: 12, marginTop: 4, color: 'var(--acid)' }}>★★★★★ 4.9 · 240 RATINGS</div>
          </div>
        </div>
      </div>

      {/* Variant thumbnails */}
      <div style={{ position: 'absolute', top: 1290, left: 64, right: 64, display: 'flex', gap: 12 }}>
        {variants.map((v, i) => (
          <button key={i} onClick={() => setActive(i)} style={{
            flex: 1, height: 140, padding: 0,
            border: i === active ? '4px solid var(--coral)' : '2px solid transparent',
            borderRadius: 8, overflow: 'hidden',
            background: 'var(--ink)', cursor: 'pointer',
            position: 'relative',
          }}>
            <img src={v.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', bottom: 4, left: 6, color: 'var(--cream)', fontFamily: 'var(--mono)', fontSize: 11, background: 'rgba(0,0,0,0.6)', padding: '2px 6px', borderRadius: 3 }}>
              0{i + 1}
            </div>
          </button>
        ))}
      </div>

      {/* Action row */}
      <div style={{ position: 'absolute', bottom: 100, left: 64, right: 64, display: 'flex', gap: 16 }}>
        <button onClick={onRestart} className="btn btn-ghost" style={{ flex: 1, fontSize: 22, padding: '24px 0' }}>↻ start over</button>
        <button onClick={onTryAnother} className="btn btn-ghost" style={{ flex: 1.4, fontSize: 22, padding: '24px 0' }}>+ try another</button>
        <button onClick={onShare} className="btn btn-coral" style={{ flex: 2, fontSize: 24, padding: '24px 0' }}>save to my phone →</button>
      </div>
    </div>
  );
}

// =============================================================================
// 9. SHARE / QR
// =============================================================================
function ScreenShare({ garment, onDone }) {
  return (
    <div data-screen-label="09 Share" className="kiosk" style={{ background: 'var(--coral)', color: 'var(--cream)' }}>
      <StatusBar dark step={8} total={9} />

      {/* Big sparkle decorations */}
      <div style={{ position: 'absolute', top: 100, right: 60, animation: 'spin-slow 14s linear infinite' }}>
        <Sparkle size={80} color="var(--acid)" />
      </div>
      <div style={{ position: 'absolute', top: 1500, left: 60, animation: 'spin-slow 10s linear infinite reverse' }}>
        <Sparkle size={60} color="var(--ink)" />
      </div>

      <div style={{ position: 'absolute', top: 160, left: 64, right: 64 }}>
        <div className="eyebrow" style={{ color: 'var(--acid)' }}>◉ Take it home</div>
        <h2 className="display" style={{ fontSize: 170, marginTop: 16, lineHeight: 0.85 }}>
          Scan,<br />
          <span className="display-italic" style={{ color: 'var(--acid)' }}>save,</span><br />
          share.
        </h2>
      </div>

      {/* QR card -- centered tilted */}
      <div style={{
        position: 'absolute', top: 800, left: '50%', transform: 'translate(-50%, 0) rotate(-3deg)',
        width: 540, padding: 36,
        background: 'var(--cream)', borderRadius: 16,
        boxShadow: '0 30px 80px rgba(0,0,0,0.25)',
        color: 'var(--ink)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
          <Logo size={28} color="var(--ink)" />
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.1em', opacity: 0.6, textAlign: 'right' }}>
            <div>EXPIRES IN</div>
            <div style={{ color: 'var(--coral)', marginTop: 2 }}>72 HOURS</div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', margin: '12px 0' }}>
          <QR size={420} />
        </div>
        <div style={{ textAlign: 'center', marginTop: 12 }}>
          <div className="display" style={{ fontSize: 36 }}>tryovi.co/<span className="display-italic">k04-fb1d</span></div>
          <div className="mono" style={{ fontSize: 12, marginTop: 6, opacity: 0.6, letterSpacing: '0.1em' }}>4 LOOKS · {garment?.name?.toUpperCase() || 'ARIA SLIP DRESS'} · {garment?.price || '₹4,890'}</div>
        </div>
      </div>

      {/* Step list -- below QR */}
      <div style={{ position: 'absolute', bottom: 320, left: 64, right: 64, display: 'flex', gap: 24, justifyContent: 'space-between' }}>
        {['Open camera', 'Aim at code', 'Save the shoot'].map((s, i) => (
          <div key={s} style={{ flex: 1, textAlign: 'center' }}>
            <div className="display-italic" style={{ fontSize: 80, lineHeight: 1, color: 'var(--acid)' }}>0{i + 1}</div>
            <div style={{ fontSize: 22, fontWeight: 500, marginTop: 8 }}>{s}</div>
          </div>
        ))}
      </div>

      {/* Done button */}
      <div style={{ position: 'absolute', bottom: 96, left: 64, right: 64, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <button onClick={onDone} className="btn btn-acid" style={{ width: '100%', fontSize: 30, padding: '32px 0' }}>
          done — back to start
        </button>
        <div className="mono" style={{ fontSize: 13, opacity: 0.65, letterSpacing: '0.1em' }}>WE'LL CLEAR YOUR SESSION IN 30s FOR PRIVACY</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ScreenCategory, ScreenGarments, ScreenProcessing, ScreenResult, ScreenShare,
});