/* eslint-disable */
// MS BRIDGE — Footer (light), restyle
// Closing block after the dark FAQ. Brand + beta callout, 3 link columns,
// legal bottom bar + social icons. Accent is tweakable (shared with the site).

;(function () {

const ACCENTS = {
  "#E8291C": { base: "#E8291C", soft: "rgba(232,41,28,0.15)", on: "#fff" },
  "#FF6200": { base: "#FF6200", soft: "rgba(255,98,0,0.16)", on: "#fff" },
};

const COLS = [
  {
    h: "Produit",
    links: [
      { label: "Comment ça marche", href: "#how" },
      { label: "Pour qui", href: "#who" },
      { label: "Déploiement", href: "#timeline" },
      { label: "Pourquoi MS Bridge", href: "#why" },
    ],
  },
  {
    h: "Ressources",
    links: [
      { label: "Le podcast", href: "#podcast" },
      { label: "Questions fréquentes", href: "#faq" },
      { label: "Témoignages", href: "#proof" },
    ],
  },
  {
    h: "Société",
    links: [
      { label: "Le manifeste", href: "#manifesto" },
      { label: "Contact", href: "mailto:hello@msbridge.io" },
      { label: "Rejoindre la bêta", href: "#beta" },
    ],
  },
];

function ArrowIcon({ size = 14 }) {
  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>);
}

function LinkedinIcon() {
  return (<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1-.02-5ZM3 9h4v12H3V9Zm6 0h3.8v1.64h.05c.53-.95 1.82-1.95 3.75-1.95C20.4 8.69 22 10.5 22 14.1V21h-4v-6.1c0-1.46-.03-3.33-2.03-3.33-2.03 0-2.34 1.58-2.34 3.22V21H9V9Z" /></svg>);
}
function SpotifyIcon() {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.6 14.43a.62.62 0 0 1-.86.21c-2.35-1.44-5.3-1.76-8.79-.96a.62.62 0 1 1-.28-1.22c3.8-.87 7.08-.5 9.72 1.11.3.18.39.57.21.86Zm1.23-2.74a.78.78 0 0 1-1.07.26c-2.69-1.65-6.79-2.13-9.97-1.16a.78.78 0 1 1-.45-1.49c3.63-1.1 8.15-.57 11.23 1.32.37.22.49.7.26 1.07Zm.11-2.85C14.83 8.97 9.4 8.79 6.3 9.73a.93.93 0 1 1-.54-1.78c3.56-1.08 9.56-.87 13.34 1.37a.93.93 0 0 1-.95 1.6Z" /></svg>);
}
function XIcon() {
  return (<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.21-6.81-5.96 6.81H1.04l7.73-8.84L.62 2.25h6.82l4.71 6.23 5.4-6.23Zm-1.16 17.52h1.83L7.01 4.13H5.04l12.04 15.64Z" /></svg>);
}

const getHref = (href) => {
  const isHome = !window.location.pathname.includes('beta-program') && 
                 !window.location.pathname.includes('podcast') && 
                 !window.location.pathname.includes('confirmation');
  if (href.startsWith('#')) {
    return isHome ? href : 'index.html' + href;
  }
  return href;
};

function Footer({ accentKey }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];
  const year = 2026;
  return (
    <footer className="ft">
      <div className="ft-grid" />
      <div className="ft-inner">
        <div className="ft-top">

          <div className="ft-brand">
            <img className="ft-logo" src="assets/logo-msbridge.png" alt="MS Bridge — Marketing & Sales" />
            <p className="ft-tag">Vos prospects parlent — votre marketing apporte enfin les bonnes réponses.</p>
            <div className="ft-beta">
              <span className="ft-beta-stat">
                <span className="ft-beta-dot">
                  <span className="msb-ping" style={{ background: accent.soft }} />
                  <span style={{ background: accent.base }} />
                </span>
                <span className="ft-beta-txt">Bêta publique ouverte<small>Places limitées ce trimestre</small></span>
              </span>
              <a href={getHref("#beta")} className="ft-beta-cta" style={{ background: accent.base, color: accent.on }}>
                Accès <ArrowIcon size={13} />
              </a>
            </div>
          </div>

          {COLS.map((c) => (
            <nav key={c.h} className="ft-col">
              <div className="ft-col-h">{c.h}</div>
              {c.links.map((l) => (
                <a key={l.label} href={getHref(l.href)} className="ft-link">{l.label}</a>
              ))}
            </nav>
          ))}

        </div>

        <div className="ft-bottom">
          <div className="ft-legal">
            <span className="ft-copy">© {year} MS Bridge</span>
            <span className="ft-legal-sep" />
            <a href="mentions.html" className="ft-legal-link">Mentions légales</a>
            <a href="privacy.html" className="ft-legal-link">Confidentialité</a>
            <a href="/data-usage" className="ft-legal-link">Utilisation des données</a>
            <a href="cookies.html" className="ft-legal-link">Cookies</a>
            <a href="cgu.html" className="ft-legal-link">CGU</a>
          </div>
          <div className="ft-social">
            <a href="https://www.linkedin.com/in/henripriso-freelance-leadgenb2b/" className="ft-soc" aria-label="LinkedIn"><LinkedinIcon /></a>
            <a href={getHref("#podcast")} className="ft-soc" aria-label="Spotify"><SpotifyIcon /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FooterV2: Footer });

})();