// Footer
const Footer = ({ onOpenLegal, onOpenPrivacy }) => {
  const [theme, setTheme] = React.useState(() => document.body.dataset.theme || 'dark');
  const [badgeStyle, setBadgeStyle] = React.useState(() => document.body.dataset.badge || 'navy');
  React.useEffect(() => {
    const mo = new MutationObserver(() => {
      setTheme(document.body.dataset.theme || 'dark');
      setBadgeStyle(document.body.dataset.badge || 'navy');
    });
    mo.observe(document.body, { attributes: true, attributeFilter: ['data-theme', 'data-badge'] });
    return () => mo.disconnect();
  }, []);
  const wordmarkColor = theme === 'light' ? '#0a0e17' : '#e8ecf5';
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <img src={`assets/badge-${badgeStyle}.png`} alt="" style={{ height: 44, width: 44, borderRadius: 10, display: 'block' }} />
              <span style={{ fontSize: 19, fontWeight: 500, letterSpacing: '-0.01em', color: wordmarkColor }}>
                Créations <span style={{ color: 'var(--cyan)' }}>PL</span>
              </span>
            </div>
            <p style={{ color: 'var(--fg-dim)', maxWidth: 320, fontSize: 14, lineHeight: 1.55, margin: 0 }}>
              Studio d'automatisation de processus pour PME. Basé au Québec,
              intervient à distance partout en francophonie.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 24 }}>
              <span className="live-dot"></span>
              <span className="mono">accepte de nouveaux mandats</span>
            </div>
          </div>

          <div>
            <h5>Navigation</h5>
            <ul>
              <li><a href={(window.CPL_BASE || '') + '#services'}>Services</a></li>
              <li><a href={(window.CPL_BASE || '') + '#process'}>Méthode</a></li>
              <li><a href={(window.CPL_BASE || '') + '#about'}>À propos</a></li>
              <li><a href={(window.CPL_BASE || '') + '#contact'}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Ressources</h5>
            <ul>
              <li><a href="etudes-de-cas.html">Études de cas</a></li>
              <li><a href="playbook-ia-pme.html">Playbook IA PME</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); window.cplFaq && window.cplFaq.open(); }}>FAQ</a></li>
              <li style={{ color: 'var(--fg-mute)' }}>Blog <span className="mono">bientôt</span></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:info@creationspl.com">info@creationspl.com</a></li>
              <li><a href="tel:+14388314150">+1 (438) 831-4150</a></li>
              <li style={{ color: 'var(--fg-mute)' }}>Montréal, QC</li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Créations PL. Tous droits réservés.</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); onOpenLegal && onOpenLegal(); }}>Mentions légales</a>
            <a href="#" onClick={(e) => { e.preventDefault(); onOpenPrivacy && onOpenPrivacy(); }}>Confidentialité</a>
            <a href="#" onClick={(e) => { e.preventDefault(); window.cplConsent && window.cplConsent.open(); }}>Gérer les témoins</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });