// Apricus — footer
function Footer({ onBook }) {
  const cols = [
    ['Découvrir', [['Séjours', '#sejours'], ['Ateliers', '#ateliers'], ['Ménopause', '#menopause'], ['Mon histoire', '#histoire']]],
    ['Accompagnement', [['Suivi individualisé', '#contact'], ['Ménopause', '#menopause'], ['Ateliers sur mesure', '#contact'], ['Liste d\'attente 2026', '#sejours']]],
    ['Pratique', [['Questions fréquentes', '#contact'], ['Contact', '#contact'], ['Instagram', '#'], ['E-mail', '#contact']]],
  ];
  return (
    <footer style={{ background: 'var(--apr-clay)', color: 'var(--apr-cream)', padding: '72px 40px 36px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40, paddingBottom: 48,
          borderBottom: '1px solid rgba(251,244,230,0.18)' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 16 }}>
              <img src="assets/apricus-lemon.png" alt="" style={{ height: 42 }} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 30, color: 'var(--apr-cream)', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Apricus</span>
            </div>
            <p style={{ color: 'rgba(251,244,230,0.72)', fontSize: 15, lineHeight: 1.65, maxWidth: 290, margin: '0 0 10px' }}>
              Se reconnecter à sa féminité et laisser briller son soleil intérieur.
            </p>
            <p style={{ fontFamily: 'var(--font-script)', fontSize: 26, color: 'var(--apr-citron-soft)', margin: '0 0 20px' }}>la dolce vita</p>
            <Button variant="cream" size="sm" onClick={bookCall}>Réserver un appel</Button>
          </div>
          {cols.map(([title, links]) => (
            <div key={title}>
              <div style={{ fontWeight: 700, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em',
                color: 'var(--apr-citron-soft)', marginBottom: 16 }}>{title}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {links.map(([l, href]) => <li key={l}><FooterLink label={l} href={href} /></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: 13, color: 'rgba(251,244,230,0.55)' }}>© 2026 Apricus · Fait avec le soleil</span>
          <div style={{ display: 'flex', gap: 18 }}>
            {['instagram-logo', 'envelope-simple'].map(ic => (
              <a key={ic} href="#" onClick={e => e.preventDefault()} style={{ color: 'rgba(251,244,230,0.8)' }}>
                <Icon name={ic} size={22} />
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterLink({ label, href }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href || '#'} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ fontSize: 14.5, textDecoration: 'none', color: h ? 'var(--apr-cream)' : 'rgba(251,244,230,0.72)', transition: 'color .15s' }}>
      {label}
    </a>
  );
}
window.Footer = Footer;