function Footer() {
  return (
    <footer style={fStyles.foot}>
      <div style={fStyles.top}>
        <div style={fStyles.brand}>
          <Monogram size={48}/>
          <div className="serif" style={{fontSize: 28, marginTop: 16, letterSpacing: '0.04em'}}>
            Discrete Pleasures
          </div>
          <div className="micro" style={{color:'var(--ink-mute)', marginTop: 12}}>
            Intimate Wellness, Elevated.
          </div>
        </div>
        <div style={fStyles.cols}>
          {[
            { h:'Collection', l:['Aura','Nova','Ember','Intimate Serum'] },
            { h:'About',      l:['Our Story','Materials','Sustainability','Press'] },
            { h:'Care',       l:['FAQ','Contact','Shipping','Returns'] },
            { h:'Private',    l:['Privacy','Terms','Quiet Returns','Account'] },
          ].map(c => (
            <div key={c.h}>
              <div className="micro" style={{color:'var(--gold)', marginBottom: 16}}>{c.h}</div>
              <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap: 10}}>
                {c.l.map(it => <li key={it} style={{fontSize: 13, color:'var(--ink-soft)'}}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div style={fStyles.bottom}>
        <div className="mini" style={{color:'var(--ink-mute)'}}>© 2026 Discrete Pleasures</div>
        <div className="mini" style={{color:'var(--ink-mute)'}}>Designed for those who know.</div>
      </div>
    </footer>
  );
}

const fStyles = {
  foot: {
    borderTop: '1px solid var(--hairline)',
    padding: '80px 56px 32px',
  },
  top: {
    maxWidth: 1480, margin: '0 auto',
    display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80,
    paddingBottom: 60,
    borderBottom: '1px solid var(--hairline)',
  },
  brand: { color:'var(--gold)' },
  cols: {
    display:'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40,
  },
  bottom: {
    maxWidth: 1480, margin: '0 auto',
    display: 'flex', justifyContent: 'space-between',
    paddingTop: 28,
  },
};

window.Footer = Footer;
