// === SCREEN 1: HOME ===
const HomeScreen = ({ theme, onStart, onDiscovery, onContact }) => {
  const [hover, setHover] = React.useState(null);
  const m = theme.mobile;
  const slides = [
    { id: 'forest-mist', name: 'forest mist', img: 'assets/forest-mist-1.jpeg' },
    { id: 'cape-dusk', name: 'cape dusk', img: 'assets/cape-dusk-1.jpeg' },
    { id: 'wild-coast', name: 'wild coast', img: 'assets/wild-coast-1.jpeg' },
    { id: 'summer-rain', name: 'summer rain', img: 'assets/summer-rain-1.jpeg' },
    { id: 'desert-sky', name: 'desert sky', img: 'assets/desert-sky-1.jpeg' },
    { id: 'golden-veld', name: 'golden veld', img: 'assets/golden-veld-1.jpeg' },
  ];
  const [slideIdx, setSlideIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setSlideIdx(i => (i + 1) % slides.length), 3500);
    return () => clearInterval(t);
  }, []);
  const current = slides[slideIdx];

  return (
    <div style={{ minHeight: '100vh', background: theme.bg, color: theme.ink, paddingTop: m ? 110 : 134 }}>
      <LaunchBanner theme={theme} />

      {/* HERO */}
      <section style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : '1.1fr 1fr',
        minHeight: m ? 'auto' : 'calc(100vh - 90px)',
        gap: 0
      }}>
        {/* Mobile: image on top as short banner */}
        {m && (
          <div style={{ position: 'relative', height: 260, overflow: 'hidden', background: theme.tintMuted }}>
            {slides.map((s, i) => (
              <img key={s.id} src={s.img} alt={s.name} style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%', objectFit: 'cover',
                filter: 'saturate(0.95)',
                opacity: i === slideIdx ? 1 : 0,
                transition: 'opacity 1200ms ease-in-out',
              }} />
            ))}
            <div style={{ position: 'absolute', top: 16, right: 16, display: 'flex', gap: 6 }}>
              {slides.map((s, i) => (
                <button key={s.id} onClick={() => setSlideIdx(i)} aria-label={s.name} style={{
                  width: 20, height: 2, padding: 0, border: 'none', cursor: 'pointer',
                  background: i === slideIdx ? '#fff' : 'rgba(255,255,255,0.4)',
                  transition: 'background 300ms', minHeight: 0,
                }} />
              ))}
            </div>
            <div style={{
              position: 'absolute', bottom: 16, left: 16, right: 16,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
              color: '#fff', mixBlendMode: 'difference'
            }}>
              <div style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: 20 }} key={current.id}>{current.name}</div>
              <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.85 }}>EDP · 30ML</div>
            </div>
          </div>
        )}

        {/* Content panel */}
        <div style={{ padding: m ? '32px 24px 40px' : '80px 80px 60px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', paddingTop: m ? 0 : 40 }}>
            <Meta theme={theme} style={{ marginBottom: m ? 24 : 40 }}>Let the wind carry your spirit</Meta>
            <Logo size={m ? 140 : 200} variant="gold" tagline />
          </div>
          <div style={{ maxWidth: 580, marginTop: m ? 32 : 0 }}>
            <p style={{
              fontSize: m ? 17 : 22, lineHeight: 1.45,
              color: theme.ink, opacity: 0.75, margin: '0 0 32px 0', fontWeight: 300, fontFamily: "Montserrat", textAlign: "center"
            }}>
              Answer three questions. We'll match you to a scent, send you two samples, and let your senses do the rest.
            </p>
            <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', alignItems: m ? 'stretch' : 'center', gap: m ? 16 : 32, flexWrap: 'wrap' }}>
              <PrimaryButton theme={theme} large onClick={onStart}>Discover your scent</PrimaryButton>
              <Meta theme={theme} style={{ textAlign: m ? 'center' : 'left' }}>3 questions · ~ 60 seconds</Meta>
            </div>
            <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 16, opacity: 0.85, flexWrap: 'wrap' }}>
              <Meta theme={theme}>or skip the quiz</Meta>
              <button onClick={onDiscovery} style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: 0,
                fontFamily: '"Montserrat", sans-serif', fontSize: m ? 14 : 16, fontStyle: 'italic', fontWeight: 400,
                color: theme.ink, borderBottom: `1px solid ${theme.ink}`, paddingBottom: 2
              }}>Order the Discovery Set · R 150 →</button>
            </div>
          </div>
          <div style={{ display: 'flex', gap: m ? 24 : 48, marginTop: m ? 32 : 80, paddingTop: 32, borderTop: `1px solid ${theme.line}`, flexWrap: 'wrap' }}>
            {[
            ['6', 'scents for her'],
            ['5', 'scents for him'],
            ['1', '10ml sample with every order']].
            map(([n, l]) =>
            <div key={l}>
                <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 28 : 36, fontStyle: 'italic', color: theme.ink, lineHeight: 1 }}>{n}</div>
                <Meta theme={theme} style={{ marginTop: 8 }}>{l}</Meta>
              </div>
            )}
          </div>
        </div>

        {/* Desktop: image panel */}
        {!m && (
          <div style={{ position: 'relative', overflow: 'hidden', background: theme.tintMuted }}>
            {slides.map((s, i) => (
              <img key={s.id} src={s.img} alt={s.name} style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%', objectFit: 'cover',
                filter: 'saturate(0.95)',
                opacity: i === slideIdx ? 1 : 0,
                transition: 'opacity 1200ms ease-in-out',
              }} />
            ))}
            <div style={{
              position: 'absolute', bottom: 32, left: 32, right: 32,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
              color: '#fff', mixBlendMode: 'difference'
            }}>
              <div>
                <Meta theme={{ muted: 'rgba(255,255,255,0.7)' }} style={{ color: 'rgba(255,255,255,0.85)' }}>now showing</Meta>
                <div style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: 28, marginTop: 4, transition: 'opacity 400ms' }} key={current.id}>{current.name}</div>
              </div>
              <Meta theme={{ muted: 'rgba(255,255,255,0.7)' }} style={{ color: 'rgba(255,255,255,0.85)' }}>EDP · 30ML</Meta>
            </div>
            <div style={{ position: 'absolute', top: 32, right: 32, display: 'flex', gap: 6 }}>
              {slides.map((s, i) => (
                <button key={s.id} onClick={() => setSlideIdx(i)} aria-label={s.name} style={{
                  width: 24, height: 2, padding: 0, border: 'none', cursor: 'pointer',
                  background: i === slideIdx ? '#fff' : 'rgba(255,255,255,0.4)',
                  transition: 'background 300ms',
                }} />
              ))}
            </div>
          </div>
        )}
      </section>

      {/* TRUST BLOCKS */}
      <section style={{ borderTop: `1px solid ${theme.line}`, padding: m ? '48px 24px' : '100px 80px' }}>
        <Meta theme={theme} style={{ marginBottom: 48 }}>— Why MOYA</Meta>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 40 : 0 }}>
          {[
          { num: '01', title: 'Curated for you', body: 'Not for everyone — for you specifically. A short quiz reads how you move through your days and matches you to one of eleven scents.' },
          { num: '02', title: 'Try before you commit', body: 'One FREE sample delivered to your door with each bottle order. Wear them through a week before you choose your full bottle.' },
          { num: '03', title: 'Crafted in South Africa', body: 'Drawn from the coast, the veld, the dust, the dusk. Eleven scents pulled directly from places you\'ve only smelled in passing.' }].
          map((b, i) =>
          <div key={b.num} style={{
            paddingLeft: m ? 0 : 40,
            paddingRight: m ? 0 : 40,
            paddingTop: (m && i > 0) ? 32 : 0,
            paddingBottom: 0,
            borderRight: (!m && i < 2) ? `1px solid ${theme.line}` : 'none',
            borderLeft: (!m && i === 0) ? `1px solid ${theme.line}` : 'none',
            borderTop: (m && i > 0) ? `1px solid ${theme.line}` : 'none',
          }}>
              <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 40 : 56, fontStyle: 'italic', color: theme.accent, lineHeight: 1, marginBottom: 24 }}>{b.num}</div>
              <Display theme={theme} size={28} style={{ marginBottom: 16, fontWeight: 400 }}>{b.title}</Display>
              <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 16 : 18, lineHeight: 1.5, color: theme.ink, opacity: 0.7, fontWeight: 300, margin: 0 }}>{b.body}</p>
            </div>
          )}
        </div>
      </section>

      {/* COLLECTION STRIP */}
      <section style={{ borderTop: `1px solid ${theme.line}`, padding: m ? '40px 24px 60px' : '80px 80px 100px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40, flexWrap: 'wrap', gap: 8 }}>
          <Display theme={theme} size={48} italic style={{ fontWeight: 300 }}>The Launch Collection</Display>
          <Meta theme={theme}>11 scents · 6 her · 5 him</Meta>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: m ? 'repeat(2, 1fr)' : 'repeat(6, 1fr)', gap: m ? 12 : 16
        }}>
          {Object.values(SCENTS).map((s) =>
          <div
            key={s.id}
            onMouseEnter={() => setHover(s.id)}
            onMouseLeave={() => setHover(null)}
            style={{
              position: 'relative', aspectRatio: '0.75', overflow: 'hidden',
              cursor: 'pointer',
              background: s.tint,
              transition: 'transform 400ms',
              transform: hover === s.id ? 'translateY(-4px)' : 'translateY(0)'
            }}>
              <img src={s.img} alt={s.name} style={{
              width: '100%', height: '100%', objectFit: 'cover',
              filter: hover === s.id ? 'none' : 'saturate(0.9)',
              transition: 'transform 600ms, filter 400ms',
              transform: hover === s.id ? 'scale(1.04)' : 'scale(1)'
            }} />
              <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0,
              padding: '40px 14px 14px',
              background: 'linear-gradient(to top, rgba(0,0,0,0.6), transparent)',
              color: '#fff'
            }}>
                <div style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: m ? 14 : 18 }}>{s.name}</div>
                <div style={{
                fontFamily: '"Montserrat", sans-serif', fontSize: 9,
                letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.85, marginTop: 2
              }}>{s.gender === 'her' ? 'her' : 'him'} · 30ml</div>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: m ? 40 : 64, textAlign: 'center' }}>
          <PrimaryButton theme={theme} large onClick={onStart}>Begin the quiz</PrimaryButton>
        </div>
      </section>

      <Footer theme={theme} onContact={onContact} onHome={() => {}} />
    </div>);

};

// === SCREEN 2: GENDER ===
const GenderScreen = ({ theme, onPick }) => {
  const [hover, setHover] = React.useState(null);
  const m = theme.mobile;
  return (
    <div style={{ minHeight: '100vh', background: theme.bg, color: theme.ink, paddingTop: m ? 54 : 90, display: 'flex', flexDirection: 'column' }}>
      <section style={{ padding: m ? '32px 24px 24px' : '60px 80px 40px', textAlign: 'center' }}>
        <Meta theme={theme} style={{ marginBottom: 24 }}>— Step One</Meta>
        <Display theme={theme} size={m ? 48 : 88} italic style={{ fontWeight: 300, marginBottom: 16 }}>Let's find your scent.</Display>
        <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 16 : 22, color: theme.ink, opacity: 0.7, fontWeight: 300, margin: 0 }}>
          First — who are we dressing?
        </p>
      </section>
      <section style={{ flex: 1, display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', borderTop: `1px solid ${theme.line}` }}>
        {[
        { gender: 'her', label: 'Her', count: '6 scents', img: 'assets/wild-coast-2.jpeg', sample: 'wild coast · cape dusk · forest mist · desert sky · summer rain · golden veld' },
        { gender: 'him', label: 'Him', count: '5 scents', img: 'assets/iron-mountain-1.jpeg', sample: 'iron mountain · ocean drift · storm veld · midnight safari · dust horison' }].
        map((opt, i) =>
        <button key={opt.gender}
        onMouseEnter={() => setHover(opt.gender)}
        onMouseLeave={() => setHover(null)}
        onClick={() => onPick(opt.gender)}
        style={{
          position: 'relative', overflow: 'hidden', cursor: 'pointer',
          border: 'none', padding: 0, background: 'transparent',
          borderLeft: (!m && i === 1) ? `1px solid ${theme.line}` : 'none',
          borderTop: (m && i === 1) ? `1px solid ${theme.line}` : 'none',
          minHeight: m ? 260 : 600
        }}>
            <img src={opt.img} alt={opt.label} style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover',
            filter: hover === opt.gender ? 'saturate(1) brightness(0.85)' : 'saturate(0.85) brightness(0.7)',
            transition: 'all 700ms cubic-bezier(0.22, 1, 0.36, 1)',
            transform: hover === opt.gender ? 'scale(1.04)' : 'scale(1)'
          }} />
            <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(20,15,12,0.1) 0%, rgba(20,15,12,0.55) 100%)'
          }} />
            <div style={{
            position: 'relative', height: '100%', minHeight: m ? 260 : 600,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            padding: m ? 28 : 56, color: '#fff', textAlign: 'left'
          }}>
              <Meta theme={{ muted: 'rgba(255,255,255,0.75)' }}>{`option ${i === 0 ? 'A' : 'B'} · ${opt.count}`}</Meta>
              <div>
                <div style={{
                fontFamily: '"Montserrat", sans-serif',
                fontSize: m ? 72 : 180,
                fontStyle: 'italic', lineHeight: 0.9, fontWeight: 300,
                letterSpacing: '-0.02em',
                transform: hover === opt.gender ? 'translateX(8px)' : 'translateX(0)',
                transition: 'transform 500ms'
              }}>{opt.label}</div>
                {!m && (
                  <div style={{ marginTop: 24, fontFamily: '"Montserrat", sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.85 }}>
                    {opt.sample}
                  </div>
                )}
              </div>
              <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 16,
              fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: m ? 18 : 22,
              opacity: hover === opt.gender ? 1 : 0.85, transition: 'opacity 300ms'
            }}>
                <span>Begin</span>
                <span>→</span>
              </div>
            </div>
          </button>
        )}
      </section>
      <div style={{ padding: m ? '16px 24px' : '24px 80px', textAlign: 'center', borderTop: `1px solid ${theme.line}` }}>
        <Meta theme={theme}>This helps us match you to the right collection. You can switch later.</Meta>
      </div>
    </div>);

};

Object.assign(window, { HomeScreen, GenderScreen });