// === SCREEN 5: BUILD YOUR ORDER ===
const SamplesScreen = ({ theme, gender, match, bottle, samples, subscribe, subscribeScent, onSetBottle, onToggleSample, onSetSubscribe, onSetSubscribeScent, onCheckout, onBack }) => {
  const m = theme.mobile;
  const collection = Object.values(SCENTS).filter((s) => s.gender === gender);
  const BOTTLE = 350;
  const SHIPPING = 120;
  const SUB = 300;
  const bottleScent = SCENTS[bottle] || match;
  const subScent = SCENTS[subscribeScent] || bottleScent;

  const subtotal = BOTTLE + SHIPPING;
  const ready = !!bottle && samples.length === 1;

  return (
    <div style={{ minHeight: '100vh', background: theme.bg, color: theme.ink, paddingTop: m ? 54 : 90, paddingBottom: 100 }}>
      <section style={{ padding: m ? '32px 20px 20px' : '48px 72px 24px' }}>
        <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'baseline', marginBottom: 8, gap: m ? 16 : 0 }}>
          <div>
            <Meta theme={theme} style={{ marginBottom: 16 }}>— step five of six</Meta>
            <Display theme={theme} size={m ? 36 : 56} italic style={{ fontWeight: 300 }}>Build your order.</Display>
            <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 16 : 20, color: theme.ink, opacity: 0.65, fontWeight: 300, marginTop: 16, maxWidth: 620 }}>One 30ml launch bottle, one free 10ml sample to live with through the week, and the option to never run out.</p>
          </div>
          <div style={{ textAlign: m ? 'left' : 'right' }}>
            <Meta theme={theme}>order total today</Meta>
            <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 36 : 56, fontStyle: 'italic', fontWeight: 300, lineHeight: 1, marginTop: 8 }}>
              R {subtotal.toLocaleString('en-ZA')}
            </div>
            <Meta theme={theme} style={{ marginTop: 8 }}>R 350 bottle · R 120 shipping</Meta>
          </div>
        </div>
      </section>

      {/* STEP 01 — Pick your bottle */}
      <section style={{ padding: m ? '32px 20px' : '40px 72px', borderTop: `1px solid ${theme.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 8 }}>
          <Meta theme={theme}>step 01 · your 30ml bottle · R 350</Meta>
          <Meta theme={theme}>{collection.length} scents in the {gender} collection</Meta>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: m ? 12 : 20 }}>
          {collection.map((s) => {
            const sel = bottle === s.id;
            const isMatch = s.id === match.id;
            return (
              <button
                key={s.id}
                onClick={() => onSetBottle(s.id)}
                style={{
                  position: 'relative', textAlign: 'left',
                  background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
                  outline: sel ? `2px solid ${theme.ink}` : '2px solid transparent',
                  outlineOffset: 4,
                  transition: 'outline 200ms, transform 300ms',
                  transform: sel ? 'translateY(-2px)' : 'translateY(0)',
                  minHeight: 0,
                }}>
                {isMatch &&
                <div style={{
                  position: 'absolute', top: 8, left: 8, zIndex: 2,
                  fontFamily: '"Montserrat", sans-serif', fontSize: 9,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  padding: '4px 10px', background: match.deep, color: theme.bg
                }}>your match</div>
                }
                <div style={{ aspectRatio: '0.85', overflow: 'hidden', background: s.tint, marginBottom: 12 }}>
                  <img src={s.img} alt={s.name} style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    filter: sel ? 'none' : 'saturate(0.85)',
                    transition: 'filter 300ms'
                  }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div>
                    <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 16 : 22, fontStyle: 'italic', fontWeight: 300, lineHeight: 1, color: theme.ink }}>{s.name}</div>
                    <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, marginTop: 6 }}>
                      {s.notes.slice(0, 2).join(' · ')}
                    </div>
                  </div>
                  <div style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: sel ? theme.ink : 'transparent',
                    border: `1px solid ${sel ? theme.ink : theme.muted + '66'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: theme.bg, fontSize: 12,
                    transition: 'all 200ms',
                    flexShrink: 0
                  }}>{sel ? '✓' : ''}</div>
                </div>
              </button>);

          })}
        </div>
      </section>

      {/* STEP 02 — Pick 1 free sample */}
      <section style={{ padding: m ? '32px 20px' : '40px 72px', borderTop: `1px solid ${theme.line}`, background: theme.tintMuted + '60' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 8 }}>
          <div>
            <Meta theme={theme}>step 02 · one free sample</Meta>
            <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 14 : 16, color: theme.ink, opacity: 0.7, fontWeight: 300, marginTop: 6, maxWidth: 540 }}>
              Included with every bottle. Wear it through the week — and find your second love.
            </p>
          </div>
          <Meta theme={theme}>{samples.length}/1 selected</Meta>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? 'repeat(3, 1fr)' : 'repeat(6, 1fr)', gap: m ? 10 : 14 }}>
          {Object.values(SCENTS).map((s) => {
            const sel = samples.includes(s.id);
            const disabled = !sel && samples.length >= 1;
            return (
              <button
                key={s.id}
                onClick={() => {if (!disabled || sel) onToggleSample(s.id);}}
                disabled={disabled}
                style={{
                  position: 'relative', textAlign: 'left',
                  background: 'transparent', border: 'none', padding: 0,
                  cursor: disabled ? 'not-allowed' : 'pointer',
                  outline: sel ? `2px solid ${theme.ink}` : '2px solid transparent',
                  outlineOffset: 3,
                  opacity: disabled ? 0.35 : 1,
                  transition: 'outline 200ms, opacity 200ms',
                  minHeight: 0,
                }}>
                <div style={{ aspectRatio: '0.85', overflow: 'hidden', background: s.tint, marginBottom: 8 }}>
                  <img src={s.img} alt={s.name} style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    filter: sel ? 'none' : 'saturate(0.8)'
                  }} />
                  {sel &&
                  <div style={{
                    position: 'absolute', top: 6, right: 6,
                    width: 22, height: 22, borderRadius: '50%',
                    background: theme.ink, color: theme.bg,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12
                  }}>✓</div>
                  }
                </div>
                <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 11 : 14, fontStyle: 'italic', fontWeight: 300, color: theme.ink }}>{s.name}</div>
                <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.5, marginTop: 2 }}>1.5ml · free</div>
              </button>);

          })}
        </div>
      </section>

      {/* STEP 03 — Subscription option */}
      <section style={{ padding: m ? '32px 20px' : '40px 72px', borderTop: `1px solid ${theme.line}` }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: m ? '1fr' : '1.1fr 1fr',
          gap: m ? 28 : 56,
          alignItems: 'stretch',
          border: subscribe ? `1px solid ${theme.ink}` : `1px solid ${theme.line}`,
          background: subscribe ? theme.tintMuted : 'transparent',
          padding: m ? 20 : 40,
          transition: 'background 300ms, border-color 300ms'
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16, flexWrap: 'wrap' }}>
              <Meta theme={theme}>optional · monthly ritual</Meta>
              <span style={{
                fontFamily: '"Montserrat", sans-serif', fontSize: 9,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                padding: '4px 10px', background: theme.accent, color: theme.bg
              }}>save R 50/mo</span>
            </div>
            <Display theme={theme} size={m ? 28 : 40} italic style={{ fontWeight: 300, lineHeight: 1.05, marginBottom: 16 }}>
              Never run out. R 300 a month.
            </Display>
            <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 15 : 17, color: theme.ink, opacity: 0.7, fontWeight: 300, lineHeight: 1.5, marginBottom: 20, maxWidth: 480 }}>
              A 30ml bottle of your chosen scent, every month. Free shipping every time. Pause, swap or cancel anytime.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
              {[
              'R 300/month — R 50 less than buying one-off',
              'Switch your monthly scent any time',
              'Free shipping, every delivery',
              'Pause or cancel from your inbox'].
              map((line) =>
              <li key={line} style={{
                fontFamily: '"Montserrat", sans-serif', fontSize: m ? 13 : 15, fontWeight: 300,
                color: theme.ink, opacity: 0.85,
                display: 'flex', gap: 12, alignItems: 'baseline'
              }}>
                  <span style={{ color: theme.accent, fontFamily: 'serif', fontStyle: 'italic' }}>—</span>
                  <span>{line}</span>
                </li>
              )}
            </ul>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'space-between' }}>
            <label style={{
              display: 'flex', alignItems: 'center', gap: 16,
              padding: 20, background: theme.bg,
              border: `1px solid ${theme.line}`, cursor: 'pointer'
            }}>
              <input
                type="checkbox"
                checked={subscribe}
                onChange={(e) => onSetSubscribe(e.target.checked)}
                style={{ width: 20, height: 20, accentColor: theme.ink, margin: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 15 : 18, fontStyle: 'italic', fontWeight: 400 }}>
                  Yes, add the monthly ritual
                </div>
                <Meta theme={theme} style={{ marginTop: 4 }}>billed R 300 monthly · cancel any time</Meta>
              </div>
            </label>

            <div style={{ opacity: subscribe ? 1 : 0.4, transition: 'opacity 300ms' }}>
              <Meta theme={theme} style={{ marginBottom: 12 }}>your monthly scent</Meta>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {Object.values(SCENTS).map((s) => {
                  const sel = subscribeScent === s.id;
                  return (
                    <button
                      key={s.id}
                      onClick={() => subscribe && onSetSubscribeScent(s.id)}
                      disabled={!subscribe}
                      style={{
                        textAlign: 'left',
                        background: sel ? theme.ink : 'transparent',
                        color: sel ? theme.bg : theme.ink,
                        border: `1px solid ${sel ? theme.ink : theme.line}`,
                        padding: '10px 14px',
                        cursor: subscribe ? 'pointer' : 'not-allowed',
                        fontFamily: '"Montserrat", sans-serif', fontSize: m ? 12 : 14, fontStyle: 'italic', fontWeight: 300,
                        transition: 'all 200ms',
                        borderRadius: 0, minHeight: 0
                      }}>{s.name}</button>);

                })}
              </div>
              {subscribe &&
              <div style={{ marginTop: 16, padding: 16, background: theme.bg, border: `1px solid ${theme.line}` }}>
                  <Meta theme={theme} style={{ marginBottom: 6 }}>first delivery</Meta>
                  <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 18, fontStyle: 'italic', fontWeight: 300 }}>
                    {subScent.name} — ships in 30 days
                  </div>
                </div>
              }
            </div>
          </div>
        </div>
      </section>

      <section style={{
        position: 'sticky', bottom: 0, background: theme.bg,
        borderTop: `1px solid ${theme.line}`,
        padding: m ? '16px 20px' : '24px 72px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 10, gap: m ? 8 : 0, flexWrap: m ? 'wrap' : 'nowrap'
      }}>
        <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>
        {!m && (
          <Meta theme={theme}>
            {!bottle && 'choose your bottle'}
            {bottle && samples.length < 1 && `pick ${1 - samples.length} more sample`}
            {ready && (subscribe ? `R ${subtotal} today + R ${SUB}/month` : `R ${subtotal} · ready to ship`)}
          </Meta>
        )}
        <button onClick={onCheckout} disabled={!ready} style={{
          fontFamily: '"Montserrat", sans-serif', fontWeight: 400, fontSize: m ? 16 : 20, fontStyle: 'italic',
          background: ready ? 'linear-gradient(145deg, rgb(82, 46, 26) 0%, rgb(48, 24, 12) 35%, rgb(28, 12, 6) 55%, rgb(60, 32, 16) 80%, rgb(96, 58, 34) 100%)' : theme.muted + '44',
          color: '#f4efe8',
          border: ready ? '1px solid rgb(220, 176, 114)' : 'none',
          padding: m ? '14px 24px' : '18px 36px',
          boxShadow: ready ? 'inset 0 1px 0 rgba(255,220,180,0.22), inset 0 -2px 4px rgba(20,8,2,0.75), 0 2px 6px rgba(40,18,8,0.45)' : 'none',
          cursor: ready ? 'pointer' : 'not-allowed',
          display: 'inline-flex', alignItems: 'center', gap: 14,
          borderRadius: 0, minHeight: 0
        }}>
          <span>Continue to checkout</span>
          <span>→</span>
        </button>
      </section>
    </div>);

};

// Field must live outside CheckoutScreen — defining it inside causes remount on every keystroke
const CheckoutField = ({ theme, label, fieldKey, value, onChange, type = 'text', placeholder, span = 1, required = false, mobile }) =>
  <label style={{ gridColumn: mobile ? 'span 2' : `span ${span}`, display: 'flex', flexDirection: 'column', gap: 8 }}>
    <Meta theme={theme}>{label}{required ? ' *' : ''}</Meta>
    <input type={type} value={value} onChange={(e) => onChange(fieldKey, e.target.value)} placeholder={placeholder}
      style={{
        fontFamily: '"Montserrat", sans-serif', fontSize: mobile ? 16 : 20, fontWeight: 300,
        background: 'transparent', border: 'none', borderBottom: `1px solid ${theme.line}`,
        padding: '12px 0', color: theme.ink, outline: 'none'
      }}
      onFocus={(e) => e.target.style.borderBottomColor = theme.ink}
      onBlur={(e) => e.target.style.borderBottomColor = theme.line} />
  </label>;

// === SCREEN 6: CHECKOUT ===
const CheckoutScreen = ({ theme, bottle, samples, subscribe, subscribeScent, onComplete, onBack, mode = 'bottle', discoveryGender }) => {
  const m = theme.mobile;
  const isDiscovery = mode === 'discovery';
  const BOTTLE = 350;
  const SHIPPING = 120;
  const SUB = 300;
  const DISCOVERY_PRICE = 150;
  const discoveryScents = isDiscovery ? Object.values(SCENTS).filter((s) => s.gender === discoveryGender) : [];
  const bottleScent = isDiscovery ? null : SCENTS[bottle];
  const sampleScents = isDiscovery ? [] : samples.map((id) => SCENTS[id]);
  const subScent = isDiscovery ? null : (SCENTS[subscribeScent] || bottleScent);
  const subtotal = isDiscovery ? DISCOVERY_PRICE : BOTTLE;
  const total = subtotal + SHIPPING;

  const [form, setForm] = React.useState({
    email: '', name: '', address: '', city: '', postal: '', phone: ''
  });
  const [done, setDone] = React.useState(false);
  const valid = form.email && form.name && form.address && form.city && form.postal;

  const handle = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const submit = async () => {
    if (!valid) return;
    try {
      const payload = {
        email: form.email,
        name: form.name,
        address: form.address,
        city: form.city,
        postal: form.postal,
        phone: form.phone,
        bottleScentId: isDiscovery ? null : bottle,
        sampleScentId: isDiscovery ? null : (samples[0] || null),
        subscribe: subscribe && !isDiscovery,
        subscribeScentId: (subscribe && !isDiscovery) ? subscribeScent : null,
        orderType: isDiscovery ? 'discovery' : 'bottle',
      };
      await fetch('/api/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
    } catch (_) { /* still show confirmation even if API is down */ }
    setDone(true);
    setTimeout(() => onComplete(), 2400);
  };

  if (done) {
    return (
      <div style={{ minHeight: '100vh', background: theme.bg, color: theme.ink, paddingTop: m ? 54 : 90, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ textAlign: 'center', maxWidth: 680, padding: m ? 24 : 40 }}>
          <div style={{ marginBottom: 32 }}><Logo size={48} color={theme.ink} /></div>
          <Meta theme={theme} style={{ marginBottom: 24 }}>— order placed</Meta>
          <Display theme={theme} size={m ? 40 : 64} italic style={{ fontWeight: 300, marginBottom: 24 }}>Your scent journey starts now.</Display>
          <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 17 : 22, lineHeight: 1.5, fontWeight: 300, opacity: 0.7, margin: '0 auto 16px', maxWidth: 540 }}>
            We've sent a confirmation to <span style={{ fontStyle: 'italic', color: theme.ink, opacity: 1 }}>{form.email}</span>. {isDiscovery ? `Your discovery set will be with you in 3–5 days.` : `Your bottle and samples will be with you in 3–5 days.`}
          </p>
          {subscribe && !isDiscovery &&
          <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 17, fontStyle: 'italic', opacity: 0.6, marginTop: 24 }}>
              Your monthly {subScent.name} starts in 30 days. We'll remind you before each shipment.
            </p>
          }
        </div>
      </div>);

  }

  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)', gap: 0 }}>
        <div style={{ padding: m ? '32px 20px' : '56px 72px' }}>
          <Meta theme={theme} style={{ marginBottom: 16 }}>{isDiscovery ? '— discovery set checkout' : '— step six of six'}</Meta>
          <Display theme={theme} size={m ? 32 : 56} italic style={{ fontWeight: 300, marginBottom: 12 }}>Where shall we send them?</Display>
          <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 15 : 17, color: theme.ink, opacity: 0.6, fontWeight: 300, marginBottom: 36 }}>
            We'll email your confirmation and tracking. {subscribe && 'Your subscription will be managed from this email.'}
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: m ? '24px 16px' : '32px 24px', maxWidth: 720 }}>
            <CheckoutField theme={theme} mobile={m} label="email address" fieldKey="email" value={form.email} onChange={handle} type="email" placeholder="hello@example.com" span={2} required />
            <CheckoutField theme={theme} mobile={m} label="full name" fieldKey="name" value={form.name} onChange={handle} placeholder="Your name" span={2} required />
            <CheckoutField theme={theme} mobile={m} label="address" fieldKey="address" value={form.address} onChange={handle} placeholder="Street, suburb" span={2} required />
            <CheckoutField theme={theme} mobile={m} label="city" fieldKey="city" value={form.city} onChange={handle} placeholder="Cape Town" required />
            <CheckoutField theme={theme} mobile={m} label="postal code" fieldKey="postal" value={form.postal} onChange={handle} placeholder="8001" required />
            <CheckoutField theme={theme} mobile={m} label="phone (optional)" fieldKey="phone" value={form.phone} onChange={handle} placeholder="+27 · · ·" span={2} />
          </div>

          <div style={{ marginTop: m ? 36 : 56, display: 'flex', flexDirection: m ? 'column' : 'row', gap: 20, alignItems: m ? 'stretch' : 'center', flexWrap: 'wrap' }}>
            <button onClick={submit} disabled={!valid} style={{
              fontFamily: '"Montserrat", sans-serif', fontWeight: 400, fontSize: m ? 17 : 22, fontStyle: 'italic',
              background: valid ? 'linear-gradient(145deg, rgb(82, 46, 26) 0%, rgb(48, 24, 12) 35%, rgb(28, 12, 6) 55%, rgb(60, 32, 16) 80%, rgb(96, 58, 34) 100%)' : theme.muted + '44',
              color: '#f4efe8', border: valid ? '1px solid rgb(220, 176, 114)' : 'none', padding: m ? '18px 28px' : '22px 44px',
              boxShadow: valid ? 'inset 0 1px 0 rgba(255,220,180,0.22), inset 0 -2px 4px rgba(20,8,2,0.75), 0 2px 6px rgba(40,18,8,0.45)' : 'none',
              cursor: valid ? 'pointer' : 'not-allowed',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 14, borderRadius: 0, minHeight: 0
            }}>
              <span>{isDiscovery ? `Pay R ${total} · ship my discovery set` : (subscribe ? `Pay R ${total} + start subscription` : `Complete my order · R ${total}`)}</span>
              <span>→</span>
            </button>
            <button onClick={onBack} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: '"Montserrat", sans-serif', fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase', color: theme.muted,
              textAlign: m ? 'center' : 'left'
            }}>← edit order</button>
          </div>
        </div>

        <aside style={{ background: theme.tintMuted, borderLeft: m ? 'none' : `1px solid ${theme.line}`, borderTop: m ? `1px solid ${theme.line}` : 'none', padding: m ? '32px 20px' : '56px 56px' }}>
          <Meta theme={theme} style={{ marginBottom: 24 }}>— your moya order</Meta>

          {isDiscovery ? (
            <React.Fragment>
              <div style={{ padding: '20px 0', borderBottom: `1px solid ${theme.line}` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
                  <div>
                    <div style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: 22, fontWeight: 300 }}>Discovery Set</div>
                    <Meta theme={theme} style={{ marginTop: 4 }}>{discoveryScents.length} × 2ml · {discoveryGender === 'her' ? 'for her' : 'for him'}</Meta>
                  </div>
                  <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 18 }}>R {DISCOVERY_PRICE}</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6, marginTop: 14 }}>
                  {discoveryScents.map((s) => (
                    <div key={s.id} style={{ aspectRatio: '0.75', overflow: 'hidden', background: s.tint }}>
                      <img src={s.img} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.85)' }} />
                    </div>
                  ))}
                </div>
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div style={{
                display: 'grid', gridTemplateColumns: '64px 1fr auto', gap: 16,
                padding: '20px 0', borderBottom: `1px solid ${theme.line}`, alignItems: 'center'
              }}>
                <div style={{ width: 64, height: 80, overflow: 'hidden', background: bottleScent.tint }}>
                  <img src={bottleScent.img} alt={bottleScent.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div>
                  <div style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: 22, fontWeight: 300 }}>{bottleScent.name}</div>
                  <Meta theme={theme} style={{ marginTop: 4 }}>EDP · 30ml bottle</Meta>
                </div>
                <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 18 }}>R {BOTTLE}</div>
              </div>

              <div style={{ padding: '16px 0', borderBottom: `1px solid ${theme.line}` }}>
                <Meta theme={theme} style={{ marginBottom: 8 }}>+ 1 free 10ml sample</Meta>
                <div style={{ display: 'flex', gap: 12 }}>
                  {sampleScents.map((s) =>
                  <div key={s.id} style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 32, height: 40, overflow: 'hidden', background: s.tint, flexShrink: 0 }}>
                        <img src={s.img} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                      </div>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: 14, fontWeight: 300, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.name}</div>
                        <Meta theme={theme} style={{ fontSize: 9, marginTop: 2 }}>10ml · free</Meta>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </React.Fragment>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 0', borderBottom: `1px solid ${theme.line}` }}>
            <Meta theme={theme}>shipping (flat rate)</Meta>
            <span style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 16 }}>R {SHIPPING}</span>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '24px 0', borderBottom: subscribe ? `1px solid ${theme.line}` : 'none' }}>
            <Meta theme={theme}>total today</Meta>
            <span style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 36, fontStyle: 'italic', fontWeight: 300 }}>R {total}</span>
          </div>

          {subscribe && !isDiscovery &&
          <div style={{
            marginTop: 16, padding: 20,
            background: theme.bg, border: `1px solid ${theme.ink}`
          }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                <Meta theme={theme}>+ monthly subscription</Meta>
                <span style={{
                fontFamily: '"Montserrat", sans-serif', fontSize: 9,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                padding: '3px 8px', background: theme.accent, color: theme.bg
              }}>active</span>
              </div>
              <div style={{ fontFamily: '"Montserrat", sans-serif', fontStyle: 'italic', fontSize: 20, fontWeight: 300, marginBottom: 4 }}>
                {subScent.name}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 8 }}>
                <Meta theme={theme}>billed monthly</Meta>
                <span style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 22, fontStyle: 'italic', fontWeight: 300 }}>R {SUB}/mo</span>
              </div>
              <Meta theme={theme} style={{ marginTop: 8, opacity: 0.6 }}>first charge in 30 days · cancel anytime</Meta>
            </div>
          }

          <div style={{ marginTop: 32, padding: 20, border: `1px solid ${theme.line}`, background: theme.bg + '60' }}>
            <Meta theme={theme} style={{ marginBottom: 10 }}>— a quiet reassurance</Meta>
            <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 15, fontStyle: 'italic', fontWeight: 300, lineHeight: 1.4, margin: 0, opacity: 0.8 }}>
              Shipped nationwide, plastic-free packaging, made in South Africa.
            </p>
          </div>
          <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', border: `1px solid ${theme.line}`, background: theme.bg }}>
            <Meta theme={theme}>secure checkout via</Meta>
            <span style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 14, fontWeight: 600, fontStyle: 'italic', color: theme.ink, padding: '4px 10px', border: `1px solid ${theme.ink}`, letterSpacing: '0.04em' }}>paystack</span>
          </div>
          <div style={{ marginTop: 12, fontFamily: '"Montserrat", sans-serif', fontSize: 11, fontStyle: 'italic', fontWeight: 300, opacity: 0.55, lineHeight: 1.5 }}>
            Launch collection · 30ml bottles for launch only. After launch, MOYA moves to 50ml.
          </div>
        </aside>
      </section>
    </div>);

};

Object.assign(window, { SamplesScreen, CheckoutScreen });