/* global React */
/* Footer PARTAGÉ du portail revendeur French Kits (identique à la page d'accueil : .h-footer).
   Config-driven (société / email / tel via window.PORTAIL_CONFIG, liens via window.EXTRANET_CONFIG).
   Inclut une pop-up "page en préparation" sur les liens éditoriaux pas encore prêts. */
function EcFooter() {
  const cfg = window.EXTRANET_CONFIG || {};
  const pc = window.PORTAIL_CONFIG || {};
  const T = (window.EcUI && window.EcUI.T) || {};
  const base = cfg.base_url || '';
  const isLogged = !!(window.CLIENT && window.CLIENT.nom);
  const societe = pc.societe || 'Émotions Créatives';
  const marque = pc.marque || 'French Kits';
  const email = pc.email || 'fabien@emotions-creatives.com';
  const tel = pc.tel || '06 43 97 15 71';
  const telHref = 'tel:' + tel.replace(/\s+/g, '');
  const CORAL = T.coral || 'oklch(0.575 0.125 42)';
  const PRIMARY = T.primary || 'oklch(0.62 0.14 40)';
  const SERIF = T.serif || "'Playfair Display',serif";

  const [soon, setSoon] = React.useState(false);
  const openSoon = (e) => { if (e) e.preventDefault(); setSoon(true); };

  return (
    <React.Fragment>
      <footer className="h-footer" style={{ marginTop: 54 }}>
        <div className="h-footer-inner">
          <div className="h-footer-brand">
            <h3>Émotions <em>Créatives</em></h3>
            <div className="tag">PRO · Les {marque}</div>
            <p>{marque}, la marque de kits / cadeaux créatifs d'{societe}. Fabrication à la main dans notre atelier artisanal.</p>
          </div>
          <div className="h-footer-col">
            <h4>Espace pro</h4>
            <ul>
              <li><a href={isLogged ? cfg.commander_url : cfg.connexion_url}>Bon de commande</a></li>
              <li><a href={cfg.nouveautes_printemps_url || '#'}>Nouveautés Printemps</a></li>
              <li><a href={cfg.nouveautes_ete_url || '#'}>Nouveautés Été</a></li>
              <li><a href={isLogged ? (cfg.mes_commandes_url || (base + '/mes-commandes')) : cfg.connexion_url}>Mes commandes</a></li>
            </ul>
          </div>
          <div className="h-footer-col">
            <h4>À propos</h4>
            <ul>
              <li><a href="#" onClick={openSoon}>Notre histoire</a></li>
              <li><a href="#" onClick={openSoon}>L'atelier</a></li>
              <li><a href="#" onClick={openSoon}>Nos illustratrices</a></li>
              <li><a href="#" onClick={openSoon}>Salons & événements</a></li>
            </ul>
          </div>
          <div className="h-footer-col">
            <h4>Aide</h4>
            <ul>
              <li><a href={'mailto:' + email}>{email}</a></li>
              <li><a href={telHref}>{tel}</a></li>
              <li><a href={base + '/cgv'}>CGV</a></li>
            </ul>
          </div>
        </div>
        <div className="h-footer-bottom">
          <div>© 2026 {societe} · 4 rue des Émailleurs, 87000 Limoges · SIRET 824 716 503</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href={base + '/mentions-legales'} style={{ color: 'inherit', textDecoration: 'none' }}>Mentions légales</a>
            <a href={base + '/confidentialite'} style={{ color: 'inherit', textDecoration: 'none' }}>Confidentialité</a>
            <a href={base + '/cookies'} style={{ color: 'inherit', textDecoration: 'none' }}>Cookies</a>
          </div>
        </div>
      </footer>

      {/* Pop-up "page en préparation" */}
      {soon && (
        <div onClick={() => setSoon(false)} style={{ position: 'fixed', inset: 0, zIndex: 90, background: 'rgba(40,22,12,.42)', display: 'grid', placeItems: 'center', padding: 20 }}>
          <div onClick={(e) => e.stopPropagation()} style={{ background: 'oklch(0.985 0.008 84)', borderRadius: 22, maxWidth: 440, width: '100%', padding: '34px 34px 30px', boxShadow: '0 40px 90px -30px rgba(40,20,10,.5)', textAlign: 'center', fontFamily: T.sans || "'Hanken Grotesk',sans-serif" }}>
            <div style={{ width: 56, height: 56, borderRadius: 999, background: 'oklch(0.92 0.045 72)', display: 'grid', placeItems: 'center', margin: '0 auto 18px', fontSize: 26 }}>🌿</div>
            <h3 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 26, color: 'oklch(0.27 0.016 48)', margin: '0 0 12px' }}>Cette page arrive <span style={{ fontStyle: 'italic', color: CORAL }}>bientôt</span></h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'oklch(0.44 0.015 55)', margin: '0 0 24px' }}>
              On a préféré vous livrer d'abord les <strong>nouveautés</strong> avec cette nouvelle version du site.
              On travaille activement sur ces pages — elles vous seront très utiles. Merci de votre patience&nbsp;!
            </p>
            <button onClick={() => setSoon(false)} style={{ background: PRIMARY, color: '#fff', border: 'none', fontWeight: 600, fontSize: 14.5, padding: '13px 28px', borderRadius: 999, cursor: 'pointer' }}>J'ai hâte&nbsp;!</button>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}