/* 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); };

  // Le pied vient de l'administration : colonnes, liens, et la societe qui
  // edite le site. Il etait ecrit ici — impossible d'ajouter un lien ou de
  // changer un numero sans rouvrir le code, alors que l'entreprise change.
  const F = window.FOOTER || {};
  const pied = F.pied || {};

  // Le gros titre du pied porte la MARQUE, pas la societe.
  //
  // Il affichait « pied.societe ». Tant que la societe s'appelait « Émotions
  // Créatives », c'etait aussi la marque et personne ne voyait la confusion.
  // Depuis la cession la societe est BAREAUD CONSEIL : le revendeur lisait en
  // gros le nom d'une structure qui ne lui dit rien, et la marque n'apparaissait
  // qu'en petit dessous. La societe reste ou la loi la demande — la ligne
  // legale, tout en bas, avec l'adresse, le SIRET et le capital.
  //
  // Le premier mot reste en romain, le reste en italique : c'est la mise en
  // forme d'origine, on la garde.
  const titrePied = pied.titre || marque || pied.societe || '';
  const titreMots = String(titrePied).trim().split(' ');

  // Un lien annonce peut ne pas exister encore : il garde sa place et ouvre la
  // pop-up plutot que de mener nulle part.
  const lien = (l, i) => (
    <li key={i}>
      {l.chantier
        ? <a href="#" onClick={openSoon}>{l.libelle}</a>
        : <a href={l.url}>{l.libelle}</a>}
    </li>
  );

  return (
    <React.Fragment>
      <footer className="h-footer" style={{ marginTop: 54 }}>
        <div className="h-footer-inner">
          <div className="h-footer-brand">
            <h3>{titreMots[0]} <em>{titreMots.slice(1).join(' ')}</em></h3>
            <div className="tag">{F.tag || ('PRO · Les ' + marque)}</div>
            <p>{F.baseline || (marque + ", la marque de kits / cadeaux créatifs.")}</p>
          </div>
          {(F.colonnes || []).map((c, i) => (
            <div className="h-footer-col" key={i}>
              <h4>{c.titre}</h4>
              <ul>{(c.liens || []).map(lien)}</ul>
            </div>
          ))}
        </div>
        <div className="h-footer-bottom">
          <div>
            © {new Date().getFullYear()} {pied.societe || societe}
            {pied.adresse ? ' · ' + pied.adresse : ''}
            {pied.siret ? ' · SIRET ' + pied.siret : ''}
            {pied.tva ? ' · TVA ' + pied.tva : ''}
            {pied.mentions ? ' · ' + pied.mentions : ''}
          </div>
          <div style={{ display: 'flex', gap: 20 }}>
            {(F.legaux || []).map((l, i) => (
              l.chantier
                ? <a key={i} href="#" onClick={openSoon} style={{ color: 'inherit', textDecoration: 'none' }}>{l.libelle}</a>
                : <a key={i} href={l.url} style={{ color: 'inherit', textDecoration: 'none' }}>{l.libelle}</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>
  );
}