// === Footer (used across home + contact pages) ===
const Footer = ({ theme, onContact, onHome }) => {
  const m = theme.mobile;
  const [email, setEmail] = React.useState('');
  const [subscribed, setSubscribed] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email && email.includes('@')) setSubscribed(true);
  };

  const SocialIcon = ({ kind }) => {
    const stroke = theme.ink;
    const size = 18;
    if (kind === 'instagram') {
      return (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.5">
          <rect x="3" y="3" width="18" height="18" rx="5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="0.8" fill={stroke} />
        </svg>);
    }
    if (kind === 'facebook') {
      return (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.5">
          <path d="M14 8h2.5V4.5H14c-2 0-3.5 1.5-3.5 3.5v2H8v3h2.5V21h3v-8H16l.5-3h-3V8.5c0-.3.2-.5.5-.5z" />
        </svg>);
    }
    if (kind === 'tiktok') {
      return (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.5" strokeLinejoin="round">
          <path d="M14 3v11.5a3 3 0 1 1-3-3" />
          <path d="M14 3c.3 2 2 3.5 4 3.7" />
        </svg>);
    }
    return null;
  };

  return (
    <footer style={{ borderTop: `1px solid ${theme.line}`, background: theme.tintMuted, padding: m ? '48px 24px 32px' : '64px 80px 40px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.4fr 1fr 1fr', gap: m ? 40 : 64, marginBottom: 48 }}>
        {/* Newsletter */}
        <div>
          <Meta theme={theme} style={{ marginBottom: 12 }}>— stay in the breeze</Meta>
          <Display theme={theme} size={32} italic style={{ fontWeight: 300, marginBottom: 12, lineHeight: 1.1 }}>
            Subscribe for updates.
          </Display>
          <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 15, fontWeight: 300, color: theme.ink, opacity: 0.7, margin: '0 0 20px 0', maxWidth: 420 }}>
            New scents, restocks and rituals — delivered the moment they're ready.
          </p>
          {subscribed ?
          <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 15, fontStyle: 'italic', color: theme.accent }}>
            Thank you — we'll be in touch.
          </div> :
          <form onSubmit={submit} style={{ display: 'flex', borderBottom: `1px solid ${theme.ink}`, maxWidth: 420 }}>
            <input
              type="email"
              required
              placeholder="your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              style={{
                flex: 1,
                fontFamily: '"Montserrat", sans-serif', fontSize: 16, fontWeight: 300,
                background: 'transparent', border: 'none', padding: '14px 0',
                color: theme.ink, outline: 'none'
              }} />
            <button type="submit" style={{
              fontFamily: '"Montserrat", sans-serif', fontSize: 11,
              letterSpacing: '0.2em', textTransform: 'uppercase',
              background: 'none', border: 'none', cursor: 'pointer',
              color: theme.ink, padding: '0 12px', minHeight: 0
            }}>Subscribe →</button>
          </form>
          }
        </div>

        {/* Links */}
        <div>
          <Meta theme={theme} style={{ marginBottom: 16 }}>— moya</Meta>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
            {[
            { label: 'Home', onClick: onHome },
            { label: 'Contact', onClick: onContact },
            { label: 'Shipping & returns', onClick: () => {} },
            { label: 'FAQ', onClick: () => {} }].
            map((l) =>
            <li key={l.label}>
              <button onClick={l.onClick} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: '"Montserrat", sans-serif', fontSize: 16, fontWeight: 300, fontStyle: 'italic',
                color: theme.ink, padding: 0, textAlign: 'left', minHeight: 0
              }}>{l.label}</button>
            </li>
            )}
          </ul>
        </div>

        {/* Social */}
        <div>
          <Meta theme={theme} style={{ marginBottom: 16 }}>— follow moya on</Meta>
          <div style={{ display: 'flex', gap: 12, marginBottom: 24 }}>
            {['instagram', 'facebook', 'tiktok'].map((k) =>
            <a key={k} href="#" aria-label={k} style={{
              width: 44, height: 44,
              border: `1px solid ${theme.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: theme.ink, transition: 'background 200ms, border-color 200ms'
            }}
            onMouseEnter={(e) => e.currentTarget.style.borderColor = theme.ink}
            onMouseLeave={(e) => e.currentTarget.style.borderColor = theme.line}>
              <SocialIcon kind={k} />
            </a>
            )}
          </div>
          <Meta theme={theme}>@moya.scent</Meta>
        </div>
      </div>

      {/* Bottom strip */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 32, borderTop: `1px solid ${theme.line}`, flexWrap: 'wrap', gap: 16
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <Logo size={20} color={theme.ink} />
          <Meta theme={theme}>© 2026 MOYA HAUS</Meta>
          <a href="/admin/login" style={{
            fontFamily: '"Montserrat", sans-serif', fontSize: 9,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: theme.muted, textDecoration: 'none', opacity: 0.5,
          }}
          onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
          onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}>Admin</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Meta theme={theme}>Secure checkout via</Meta>
          <span style={{
            fontFamily: '"Montserrat", sans-serif', fontSize: 13, fontWeight: 600, fontStyle: 'italic',
            color: theme.ink, padding: '6px 12px', border: `1px solid ${theme.ink}`,
            letterSpacing: '0.04em'
          }}>paystack</span>
        </div>
      </div>
    </footer>);

};

// === Launch banner — slim notice on home ===
const LaunchBanner = ({ theme }) =>
<div style={{
  background: theme.ink, color: theme.bg,
  padding: theme.mobile ? '8px 20px' : '10px 36px',
  display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12,
  flexWrap: theme.mobile ? 'wrap' : 'nowrap',
  fontFamily: '"Montserrat", sans-serif',
  fontSize: theme.mobile ? 10 : 11,
  letterSpacing: '0.18em', textTransform: 'uppercase',
  position: 'fixed', top: theme.mobile ? 50 : 60, left: 0, right: 0, zIndex: 48,
  borderTop: `1px solid ${theme.line}`
}}>
  <span style={{ opacity: 0.7 }}>The Launch Collection</span>
  <span style={{ opacity: 0.4 }}>—</span>
  <span style={{ fontStyle: 'italic', textTransform: 'none', letterSpacing: '0.02em', fontSize: theme.mobile ? 11 : 13 }}>
    30ml bottles for launch only. After launch, we move to 50ml.
  </span>
</div>;


// === Discovery set screen — alternative path: order the discovery set ===
const DiscoveryScreen = ({ theme, gender, onSetGender, onCheckout, onBack }) => {
  const m = theme.mobile;
  const PRICE = 150;
  const SHIPPING = 120;
  const her = Object.values(SCENTS).filter(s => s.gender === 'her');
  const him = Object.values(SCENTS).filter(s => s.gender === 'him');
  const collection = gender === 'him' ? him : her;
  const count = collection.length;
  const sets = [
    { gender: 'her', label: 'For her', count: her.length, scents: her, img: 'assets/her-collection-hero.png' },
    { gender: 'him', label: 'For him', count: him.length, scents: him, img: 'assets/him-collection-hero.png' }
  ];

  return (
    <div style={{ minHeight: '100vh', background: theme.bg, color: theme.ink, paddingTop: m ? 54 : 90, paddingBottom: 80 }}>
      <section style={{ padding: m ? '32px 20px 24px' : '56px 80px 32px' }}>
        <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'baseline', marginBottom: 24, gap: m ? 16 : 0 }}>
          <div>
            <Meta theme={theme} style={{ marginBottom: 16 }}>— the discovery set</Meta>
            <Display theme={theme} size={m ? 36 : 64} italic style={{ fontWeight: 300, marginBottom: 16, maxWidth: 760 }}>
              Try the whole collection in one box.
            </Display>
            <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 15 : 19, fontWeight: 300, color: theme.ink, opacity: 0.7, lineHeight: 1.45, maxWidth: 620, margin: 0 }}>
              Six (or five) 2ml samples — every scent in the collection, in your hands. Wear them through the season, then come back for the bottle that wins.
            </p>
          </div>
          <div style={{ textAlign: m ? 'left' : 'right' }}>
            <Meta theme={theme}>set price</Meta>
            <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 48 : 64, fontStyle: 'italic', fontWeight: 300, lineHeight: 1, marginTop: 8 }}>
              R {PRICE}
            </div>
            <Meta theme={theme} style={{ marginTop: 8 }}>+ R {SHIPPING} shipping</Meta>
          </div>
        </div>
      </section>

      <section style={{ padding: m ? '24px 20px' : '40px 80px', borderTop: `1px solid ${theme.line}` }}>
        <Meta theme={theme} style={{ marginBottom: 24 }}>step 01 · pick a set</Meta>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: m ? 16 : 24 }}>
          {sets.map((s) => {
            const sel = gender === s.gender;
            return (
              <button key={s.gender} onClick={() => onSetGender(s.gender)} style={{
                position: 'relative', textAlign: 'left', cursor: 'pointer',
                background: 'transparent', border: 'none', padding: 0,
                outline: sel ? `2px solid ${theme.ink}` : '2px solid transparent',
                outlineOffset: 4, transition: 'outline 200ms, transform 300ms',
                transform: sel ? 'translateY(-2px)' : 'translateY(0)',
                minHeight: 0,
              }}>
                <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: theme.tintMuted, marginBottom: 16 }}>
                  <img src={s.img} alt={s.label} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: sel ? 'none' : 'saturate(0.85) brightness(0.97)', transition: 'filter 300ms' }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 4px' }}>
                  <div>
                    <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 22 : 32, fontStyle: 'italic', fontWeight: 300, lineHeight: 1, color: theme.ink }}>{s.label}</div>
                    <Meta theme={theme} style={{ marginTop: 8 }}>{s.count} × 2ml · R {PRICE}</Meta>
                  </div>
                  <div style={{
                    width: 28, height: 28, 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: 14, flexShrink: 0
                  }}>{sel ? '✓' : ''}</div>
                </div>
              </button>);
          })}
        </div>
      </section>

      {gender &&
      <section style={{ padding: m ? '24px 20px' : '40px 80px', borderTop: `1px solid ${theme.line}`, background: theme.tintMuted + '60' }}>
        <Meta theme={theme} style={{ marginBottom: 20 }}>what's in the box · {count} scents</Meta>
        <div style={{ display: 'grid', gridTemplateColumns: m ? 'repeat(3, 1fr)' : 'repeat(6, 1fr)', gap: m ? 10 : 16 }}>
          {collection.map((s) =>
          <div key={s.id}>
            <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: 'saturate(0.85)' }} />
            </div>
            <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 11 : 14, fontStyle: 'italic', fontWeight: 300, color: theme.ink }}>{s.name}</div>
            <Meta theme={theme} style={{ fontSize: 9, marginTop: 2 }}>2ml</Meta>
          </div>
          )}
        </div>
      </section>
      }

      <section style={{
        position: 'sticky', bottom: 0, background: theme.bg,
        borderTop: `1px solid ${theme.line}`,
        padding: m ? '16px 20px' : '24px 80px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 10, marginTop: 24, gap: m ? 8 : 0
      }}>
        <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}>
            {!gender ? 'choose a set' : `R ${PRICE + SHIPPING} all in · ${count} samples`}
          </Meta>
        )}
        <button onClick={onCheckout} disabled={!gender} style={{
          fontFamily: '"Montserrat", sans-serif', fontWeight: 400, fontSize: m ? 16 : 20, fontStyle: 'italic',
          background: gender ? '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: gender ? '1px solid rgb(220, 176, 114)' : 'none',
          padding: m ? '14px 20px' : '18px 36px',
          cursor: gender ? 'pointer' : 'not-allowed',
          display: 'inline-flex', alignItems: 'center', gap: 14,
          borderRadius: 0,
          boxShadow: gender ? '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',
          minHeight: 0
        }}>
          <span>Order discovery set</span>
          <span>→</span>
        </button>
      </section>
    </div>);
};

// === Contact screen ===
const ContactScreen = ({ theme, onBack, onContactFooter, onHome }) => {
  const m = theme.mobile;
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const valid = form.name && form.email && form.message;
  const submit = (e) => {
    e.preventDefault();
    if (valid) setSent(true);
  };

  return (
    <div style={{ minHeight: '100vh', background: theme.bg, color: theme.ink, paddingTop: m ? 54 : 90 }}>
      <section style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', minHeight: m ? 'auto' : 'calc(100vh - 90px - 360px)' }}>
        <div style={{ padding: m ? '40px 24px 32px' : '80px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Meta theme={theme} style={{ marginBottom: 16 }}>— get in touch</Meta>
          <Display theme={theme} size={m ? 36 : 64} italic style={{ fontWeight: 300, marginBottom: 24, maxWidth: 540 }}>
            Tell us where the wind takes you.
          </Display>
          <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 16 : 18, fontWeight: 300, color: theme.ink, opacity: 0.7, lineHeight: 1.5, maxWidth: 460, margin: '0 0 32px 0' }}>
            Press, partnerships, fragrance questions or anything in between — drop us a line and we'll write back within two working days.
          </p>
          <div style={{ display: 'grid', gap: 16 }}>
            <div>
              <Meta theme={theme}>email</Meta>
              <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 18 : 22, fontStyle: 'italic', fontWeight: 300, marginTop: 4 }}>hello@moyahaus.co.za</div>
            </div>
            <div>
              <Meta theme={theme}>studio</Meta>
              <div style={{ fontFamily: '"Montserrat", sans-serif', fontSize: m ? 18 : 22, fontStyle: 'italic', fontWeight: 300, marginTop: 4 }}>Pretoria, South Africa</div>
            </div>
          </div>
        </div>
        <div style={{ padding: m ? '32px 24px 40px' : '80px 80px', borderLeft: m ? 'none' : `1px solid ${theme.line}`, borderTop: m ? `1px solid ${theme.line}` : 'none', background: theme.tintMuted + '60' }}>
          {sent ?
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
            <Meta theme={theme} style={{ marginBottom: 16 }}>— sent</Meta>
            <Display theme={theme} size={m ? 36 : 48} italic style={{ fontWeight: 300, marginBottom: 16 }}>Thank you, {form.name}.</Display>
            <p style={{ fontFamily: '"Montserrat", sans-serif', fontSize: 18, fontWeight: 300, opacity: 0.7, lineHeight: 1.5, maxWidth: 420 }}>
              We'll write back to <span style={{ fontStyle: 'italic', color: theme.ink, opacity: 1 }}>{form.email}</span> within two working days.
            </p>
            <div style={{ marginTop: 32 }}>
              <button onClick={onHome} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: '"Montserrat", sans-serif', fontSize: 11,
                letterSpacing: '0.18em', textTransform: 'uppercase', color: theme.ink,
                borderBottom: `1px solid ${theme.ink}`, paddingBottom: 4
              }}>← back home</button>
            </div>
          </div> :
          <form onSubmit={submit} style={{ display: 'grid', gap: 28 }}>
            {[
            { k: 'name', label: 'your name', type: 'text', placeholder: 'Full name' },
            { k: 'email', label: 'email', type: 'email', placeholder: 'hello@example.com' }].
            map((f) =>
            <label key={f.k} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Meta theme={theme}>{f.label}</Meta>
              <input type={f.type} required value={form[f.k]} onChange={(e) => setForm({ ...form, [f.k]: e.target.value })} placeholder={f.placeholder}
                style={{
                  fontFamily: '"Montserrat", sans-serif', fontSize: m ? 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>
            )}
            <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Meta theme={theme}>your message</Meta>
              <textarea required rows={5} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Tell us what's on your mind"
                style={{
                  fontFamily: '"Montserrat", sans-serif', fontSize: m ? 15 : 18, fontWeight: 300, lineHeight: 1.5,
                  background: 'transparent', border: 'none', borderBottom: `1px solid ${theme.line}`,
                  padding: '12px 0', color: theme.ink, outline: 'none', resize: 'vertical'
                }}
                onFocus={(e) => e.target.style.borderBottomColor = theme.ink}
                onBlur={(e) => e.target.style.borderBottomColor = theme.line} />
            </label>
            <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', gap: 20, alignItems: m ? 'stretch' : 'center', flexWrap: 'wrap', marginTop: 8 }}>
              <button type="submit" disabled={!valid} style={{
                fontFamily: '"Montserrat", sans-serif', fontWeight: 400, fontSize: m ? 17 : 20, 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' : '18px 36px', cursor: valid ? 'pointer' : 'not-allowed',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 14, borderRadius: 0,
                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',
                minHeight: 0
              }}>
                <span>Send message</span>
                <span>→</span>
              </button>
              <button type="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'
              }}>← back</button>
            </div>
          </form>
          }
        </div>
      </section>
      <Footer theme={theme} onContact={() => {}} onHome={onHome} />
    </div>);
};

Object.assign(window, { Footer, LaunchBanner, DiscoveryScreen, ContactScreen });