// === SCREEN 3: QUIZ ===
const QuizScreen = ({ theme, gender, answers, onAnswer, onBack }) => {
  const m = theme.mobile;
  const _Q = window.QUESTIONS || QUESTIONS;
  const qIndex = _Q.findIndex(q => answers[q.key] == null);
  const q = qIndex === -1 ? _Q[_Q.length - 1] : _Q[qIndex];
  const stepNum = qIndex === -1 ? _Q.length : qIndex + 1;

  const moodImages = {
    'Warm & sensual': 'assets/golden-veld-1.jpeg',
    'Fresh & energising': 'assets/ocean-drift-2.jpeg',
    'Soft & romantic': 'assets/cape-dusk-2.jpeg',
    'Bold & magnetic': 'assets/wild-coast-1.jpeg',
    'Mysterious & deep': 'assets/midnight-safari-1.jpeg',
  };
  const sideImg = gender === 'her' ? 'assets/her-collection-hero.png' : (gender === 'him' ? 'assets/him-collection-hero.png' : (moodImages[answers.mood] || 'assets/dust-horizon-1.jpeg'));

  return (
    <div style={{ minHeight: '100vh', background: theme.bg, color: theme.ink, paddingTop: m ? 54 : 90 }}>
      <section style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.4fr 1fr', minHeight: 'calc(100vh - 90px)' }}>
        <div style={{ padding: m ? '32px 24px' : '64px 72px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: m ? 32 : 56 }}>
            <Meta theme={theme}>{q.label}</Meta>
            <Meta theme={theme}>for {gender === 'her' ? 'her' : 'him'}</Meta>
          </div>
          <Display theme={theme} size={m ? 36 : 64} italic style={{ fontWeight: 300, marginBottom: m ? 32 : 56, maxWidth: 720 }}>{q.title}</Display>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, maxWidth: 720, borderTop: `1px solid ${theme.line}` }}>
            {q.options.map((opt, i) => {
              const selected = answers[q.key] === opt;
              return (
                <button key={opt} onClick={() => onAnswer(q.key, opt)} style={{
                  position: 'relative', textAlign: 'left',
                  fontFamily: '"Montserrat", sans-serif',
                  fontSize: m ? 20 : 28, fontWeight: 300,
                  background: 'transparent',
                  color: theme.ink,
                  padding: m ? '18px 0' : '24px 0',
                  border: 'none',
                  borderBottom: `1px solid ${theme.line}`,
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  transition: 'padding 300ms, color 200ms',
                  minHeight: 0,
                }}
                onMouseEnter={(e) => { e.currentTarget.style.paddingLeft = '24px'; e.currentTarget.style.color = theme.accent; }}
                onMouseLeave={(e) => { e.currentTarget.style.paddingLeft = '0'; e.currentTarget.style.color = theme.ink; }}
                >
                  <span style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
                    <span style={{
                      fontFamily: '"Montserrat", sans-serif', fontSize: 11, letterSpacing: '0.18em',
                      color: theme.muted, minWidth: 28,
                    }}>0{i + 1}</span>
                    <span style={{ fontStyle: selected ? 'italic' : 'normal' }}>{opt}</span>
                  </span>
                  <span style={{
                    fontFamily: 'serif', fontSize: 24,
                    opacity: selected ? 1 : 0.3,
                    transition: 'opacity 300ms, transform 300ms',
                  }}>→</span>
                </button>
              );
            })}
          </div>

          <div style={{ marginTop: 'auto', paddingTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <button onClick={onBack} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: '"Montserrat", sans-serif', fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase', color: theme.muted,
            }}>← back</button>
            <div style={{ display: 'flex', gap: 6 }}>
              {_Q.map((qq, i) => (
                <div key={qq.key} style={{
                  width: 32, height: 2,
                  background: i < stepNum ? theme.ink : theme.line,
                  transition: 'background 400ms',
                }}></div>
              ))}
            </div>
          </div>
        </div>

        {/* Side image — desktop only */}
        {!m && (
          <div style={{ position: 'relative', overflow: 'hidden', background: theme.tintMuted, borderLeft: `1px solid ${theme.line}` }}>
            <img key={sideImg} src={sideImg} alt="" style={{
              width: '100%', height: '100%', objectFit: 'cover',
              filter: 'saturate(0.9) brightness(0.95)',
              animation: 'moyaFade 800ms ease',
            }} />
            <div style={{ position: 'absolute', top: 32, left: 32, right: 32, color: '#fff', mixBlendMode: 'difference' }}>
              <Meta theme={{ muted: 'rgba(255,255,255,0.7)' }} style={{ color: 'rgba(255,255,255,0.85)' }}>
                now reading: your answers
              </Meta>
            </div>
            <div style={{
              position: 'absolute', bottom: 32, left: 32, right: 32, color: '#fff',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              {_Q.map((qq, i) => (
                <div key={qq.key} style={{
                  display: 'flex', justifyContent: 'space-between', gap: 16,
                  padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.25)',
                  opacity: answers[qq.key] ? 1 : 0.45,
                }}>
                  <span style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                    0{i + 1} · {qq.key}
                  </span>
                  <span style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: 16, textAlign: 'right' }}>
                    {answers[qq.key] || '—'}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}
      </section>
    </div>
  );
};

// === SCREEN 4: MATCH REVEAL ===
const MatchScreen = ({ theme, scent, onContinue, onBrowse }) => {
  const m = theme.mobile;
  const [revealed, setRevealed] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setRevealed(true), 200);
    return () => clearTimeout(t);
  }, []);

  const sTheme = {
    bg: scent.tint,
    ink: scent.deep,
    accent: scent.accent,
    line: scent.deep + '22',
    muted: scent.deep + '99',
    mobile: m,
  };

  return (
    <div style={{ minHeight: '100vh', background: sTheme.bg, color: sTheme.ink, paddingTop: m ? 54 : 90, transition: 'background 800ms' }}>
      <section style={{ padding: m ? '24px 24px 0' : '40px 72px 0', textAlign: 'center' }}>
        <Meta theme={sTheme} style={{ marginBottom: 16 }}>— your match is revealed</Meta>
        <Display theme={sTheme} size={m ? 24 : 36} italic style={{ fontWeight: 300, color: sTheme.muted, marginBottom: 8 }}>
          Your MOYA match is…
        </Display>
      </section>

      <section style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : '1fr 1.05fr',
        gap: 0,
        padding: m ? '24px 24px 0' : '24px 72px 0',
        minHeight: m ? 'auto' : 600,
        opacity: revealed ? 1 : 0,
        transform: revealed ? 'translateY(0)' : 'translateY(24px)',
        transition: 'all 900ms cubic-bezier(0.22, 1, 0.36, 1)',
      }}>
        {/* Mobile: image first */}
        {m && (
          <div style={{ position: 'relative', height: 280, marginBottom: 24 }}>
            <img src={scent.img} alt={scent.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', top: 16, left: 16,
              background: sTheme.bg, padding: '10px 14px',
              fontFamily: '"Montserrat", sans-serif', fontSize: 10,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: sTheme.ink,
            }}>
              <div>moya · {scent.id.replace('-', ' · ')}</div>
              <div style={{ marginTop: 4, opacity: 0.6 }}>EDP · 30ml</div>
            </div>
          </div>
        )}

        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingRight: m ? 0 : 40 }}>
          <div style={{
            fontFamily: '"Montserrat", sans-serif',
            fontSize: m ? 64 : 'clamp(96px, 11vw, 180px)',
            fontWeight: 300, fontStyle: 'italic',
            lineHeight: 0.9,
            letterSpacing: '-0.02em',
            color: sTheme.ink,
            marginBottom: 24,
          }}>{scent.name}</div>
          <div style={{
            fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic',
            fontSize: m ? 16 : 22, color: sTheme.muted, marginBottom: 24,
          }}>— {scent.tagline}</div>
          <p style={{
            fontFamily: '"Montserrat", sans-serif', fontSize: m ? 16 : 22, lineHeight: 1.5, fontWeight: 300,
            color: sTheme.ink, opacity: 0.85, margin: '0 0 20px', maxWidth: 520,
          }}>{scent.match}</p>
          <p style={{
            fontFamily: '"Montserrat", sans-serif', fontSize: m ? 14 : 18, lineHeight: 1.55, fontWeight: 300,
            color: sTheme.ink, opacity: 0.65, margin: '0 0 32px', maxWidth: 520, fontStyle: 'italic',
          }}>{scent.description}</p>

          <div style={{ marginBottom: 32 }}>
            <Meta theme={sTheme} style={{ marginBottom: 16 }}>notes</Meta>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {scent.notes.map(n => (
                <span key={n} style={{
                  fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic',
                  fontSize: m ? 14 : 18, color: sTheme.ink,
                  padding: m ? '6px 14px' : '8px 18px',
                  border: `1px solid ${sTheme.ink}33`,
                  borderRadius: 999,
                }}>{n}</span>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', gap: 20, alignItems: m ? 'stretch' : 'center', flexWrap: 'wrap' }}>
            <button onClick={onContinue} style={{
              fontFamily: '"Montserrat", sans-serif',
              fontWeight: 400, fontSize: m ? 18 : 22, fontStyle: 'italic',
              background: sTheme.ink, color: sTheme.bg,
              border: 'none', padding: m ? '18px 28px' : '22px 44px', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 14,
              borderRadius: 0,
            }}>
              <span>Choose my samples</span>
              <span>→</span>
            </button>
            <button onClick={onBrowse} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: '"Montserrat", sans-serif', fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase', color: sTheme.ink,
              borderBottom: `1px solid ${sTheme.ink}`, padding: '12px 0', textAlign: 'center',
            }}>not feeling it? browse all</button>
          </div>
        </div>

        {/* Desktop: image right */}
        {!m && (
          <div style={{ position: 'relative', minHeight: 600 }}>
            <img src={scent.img} alt={scent.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', top: 24, left: 24,
              background: sTheme.bg, padding: '14px 18px',
              fontFamily: '"Montserrat", sans-serif', fontSize: 10,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: sTheme.ink,
            }}>
              <div>moya · {scent.id.replace('-', ' · ')}</div>
              <div style={{ marginTop: 4, opacity: 0.6 }}>EDP · 30ml</div>
            </div>
          </div>
        )}
      </section>

      <section style={{ padding: m ? '48px 24px 40px' : '80px 72px 60px', borderTop: `1px solid ${sTheme.line}`, marginTop: m ? 40 : 80 }}>
        <Meta theme={sTheme} style={{ marginBottom: 16 }}>— a passage from the bottle</Meta>
        <p style={{
          fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic',
          fontSize: m ? 22 : 32, lineHeight: 1.4, fontWeight: 300,
          color: sTheme.ink, maxWidth: 900, margin: 0,
          textWrap: 'balance',
        }}>"{scent.poem}"</p>
      </section>
    </div>
  );
};

Object.assign(window, { QuizScreen, MatchScreen });