// Footer — botanical wave band, link columns, newsletter, fine-line base
function Footer({ mobile = false }) {
  const { Icon } = window;
  const cols = [
    { h: 'Boutique', items: ['Sommeil & détente', 'Immunité', 'Digestion', 'Énergie & vitalité', 'Articulations', 'Coffrets'] },
    { h: 'Comprendre', items: ['La médecine chinoise', 'Nos plantes', 'Traçabilité & qualité', 'Le Journal', 'Bilan personnalisé'] },
    { h: 'Service', items: ['Suivi de commande', 'Livraison & retours', 'Conseil de praticien', 'Contact', 'FAQ'] },
  ];
  return (
    <footer style={{ marginTop: 'auto' }}>
      <div style={{ background: 'var(--wave-dark)', color: 'var(--text-on-dark)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: mobile ? '44px 20px 28px' : '72px 28px 40px', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.4fr 1fr 1fr 1fr', gap: mobile ? 28 : 40 }}>
          <div>
            <img src={(window.__resources && window.__resources.logoCream) || "../../assets/sinopharma-logo-cream.png"} alt="Sinopharma" style={{ height: 34, marginBottom: 18 }} />
            <p style={{ color: 'var(--text-on-dark-muted)', fontSize: 14, lineHeight: 1.65, maxWidth: 280 }}>
              L'expertise de la médecine traditionnelle chinoise, traduite avec la rigueur d'un laboratoire moderne.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 22 }}>
              {['instagram', 'facebook', 'youtube'].map((n) => (
                <span key={n} style={{ width: 38, height: 38, borderRadius: '50%', border: '1px solid var(--border-on-dark)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-on-dark-muted)' }}>
                  <Icon name={n} size={17} color="var(--sage-300)" />
                </span>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, color: 'var(--cream-100)', letterSpacing: '0.06em', textTransform: 'uppercase', margin: '0 0 16px' }}>{c.h}</h4>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {c.items.map((it) => (
                  <li key={it}><a href="#" style={{ color: 'var(--text-on-dark-muted)', fontSize: 14, textDecoration: 'none' }}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--border-on-dark)' }}>
          <div style={{ maxWidth: 1240, margin: '0 auto', padding: mobile ? '18px 20px' : '20px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <span style={{ fontSize: 12.5, color: 'var(--text-on-dark-muted)' }}>© 2026 Sinopharma · Compléments à base de plantes — ne se substitue pas à un avis médical.</span>
            <span style={{ display: 'flex', gap: 22, fontSize: 12.5 }}>
              <a href="#" style={{ color: 'var(--text-on-dark-muted)' }}>Mentions légales</a>
              <a href="#" style={{ color: 'var(--text-on-dark-muted)' }}>CGV</a>
              <a href="#" style={{ color: 'var(--text-on-dark-muted)' }}>Confidentialité</a>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;