/* BoatsFun — Footer partagé (Navy, logo monogramme, support + paiements).
   Charge ses propres styles et expose window.BFFooter. */

(function () {
  const { I } = window.BF;

  const styles = `
/* ============ FOOTER (Navy + 4 colonnes) ============ */
.bf footer { background:var(--navy); color:rgba(255,255,255,.85); padding:72px 0 32px; }
.bf footer .grid { display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; gap:48px; }
.bf footer .logo-col img { height:44px; display:block; filter:brightness(0) invert(1); }
.bf footer .logo-col p.tag { font-size:14px; line-height:1.6; margin-top:18px; color:rgba(255,255,255,.78); max-width:300px; }
.bf footer .logo-col .trust { font-size:13px; color:rgba(255,255,255,.6); margin-top:14px; }
.bf footer h5 { font-family:'Poppins', sans-serif; color:#fff; font-size:13px; font-weight:700; margin:0 0 18px; letter-spacing:.12em; text-transform:uppercase; }
.bf footer ul { list-style:none; padding:0; margin:0; }
.bf footer ul li { font-size:14px; padding:7px 0; color:rgba(255,255,255,.78); cursor:pointer; transition:color .15s; }
.bf footer ul li:hover { color:var(--teal); }
.bf footer ul li a { color:inherit; text-decoration:none; display:block; }
.bf footer .support-list li a { display:flex; align-items:center; gap:10px; }
.bf footer .soc { display:flex; gap:10px; margin-top:18px; }
.bf footer .soc a { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:all .15s; }
.bf footer .soc a:hover { background:var(--orange); border-color:var(--orange); }
.bf footer .copy { border-top:1px solid rgba(255,255,255,.12); padding-top:24px; margin-top:48px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:rgba(255,255,255,.55); flex-wrap:wrap; gap:16px; }
.bf footer .copy .langs { display:inline-flex; gap:6px; align-items:center; }
.bf footer .copy .langs button { background:none; border:none; color:rgba(255,255,255,.55); font-size:12.5px; cursor:pointer; padding:0 2px; font-family:'Inter', sans-serif; }
.bf footer .copy .langs button.active { color:#fff; }
.bf footer .copy .langs .sep { opacity:.4; }

/* ============ FOOTER SUPPORT + PAYMENTS (Vague 3) ============ */
.bf footer .support-list li { display:flex; align-items:center; gap:10px; }
.bf footer .support-list li svg { color:#00B5E2; flex-shrink:0; }
.bf footer .logo-col .footer-logo { height:40px; width:auto; filter:none; border-radius:0; box-shadow:none; }
.bf footer .payments { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.12); padding-top:22px; margin-top:48px; }
.bf footer .payments .pm-label { letter-spacing:.06em; }
.bf footer .payments .pm-badges { display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bf footer .payments .pm { display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 10px; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-family:'Inter', sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.85); }
.bf footer .payments + .copy { border-top:none; margin-top:18px; padding-top:0; }

/* ============ RESPONSIVE FOOTER ============ */
@media (max-width: 1180px) {
  .bf footer .grid { grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
}
@media (max-width: 1024px) {
  /* Footer — 2x2 grid */
  .bf footer .grid { grid-template-columns:1fr 1fr; gap:36px 28px; }
  .bf footer .logo-col { grid-column:1 / -1; }
}
@media (max-width: 860px) {
  /* Footer — fully stacked */
  .bf footer { padding:48px 0 24px; }
  .bf footer .grid { grid-template-columns:1fr; gap:28px; }
  .bf footer .logo-col { grid-column:auto; }
  .bf footer .copy { flex-direction:column; align-items:flex-start; gap:10px; margin-top:32px; padding-top:20px; }
}
@media (max-width: 768px) {
  .bf footer .logo-col .footer-logo { height:34px; width:auto; }
  .bf footer .payments { justify-content:flex-start; gap:8px; }
  .bf footer .copy { flex-direction:column; align-items:flex-start; }
}
`;

  function Footer() {
    return (
      <>
        <style>{styles}</style>
        <footer>
          <div className="container">
            <div className="grid">
              <div className="logo-col">
                <img className="footer-logo" src="assets/boats%20fun%20logo%20fouter.png" alt="BoatsFun" />
                <p className="tag">Location de bateaux à Montréal. Réservez directement ou faites une offre.</p>
                <p className="trust">Paiement sécurisé · Bateaux vérifiés · Support humain</p>
                <div className="soc">
                  <a href="#" aria-label="Facebook"><I.fb width="16" /></a>
                  <a href="#" aria-label="Instagram"><I.ig width="16" /></a>
                </div>
              </div>
              <div>
                <h5>Navigation</h5>
                <ul>
                  <li><a href="/bateaux">Bateaux</a></li>
                  <li><a href="/faire-une-offre">Faire une offre</a></li>
                  <li><a href="/faq">FAQ</a></li>
                  <li><a href="/contact">Contact</a></li>
                  <li><a href="/devenir-hote">Devenir hôte</a></li>
                </ul>
              </div>
              <div>
                <h5>Légal</h5>
                <ul>
                  <li><a href="/politiques#conditions">Conditions d'utilisation</a></li>
                  <li><a href="/politiques#confidentialite">Politique de confidentialité</a></li>
                  <li><a href="/politiques#remboursement">Politique de remboursement</a></li>
                  <li><a href="/politiques#annulation">Politique d'annulation</a></li>
                  <li><a href="/politiques#responsabilite-offres">Responsabilité des offres</a></li>
                </ul>
              </div>
              <div>
                <h5>Support</h5>
                <ul className="support-list">
                  <li><a href="/faq"><I.headset width="14" /> Centre d'aide</a></li>
                  <li><a href="/contact"><I.phone width="14" /> Contact 7j/7</a></li>
                  <li><a href="mailto:support@boatsfun.com"><I.mail width="14" /> support@boatsfun.com</a></li>
                  <li><I.pin width="14" /> Montréal, QC</li>
                </ul>
              </div>
            </div>
            <div className="payments" aria-label="Moyens de paiement acceptés">
              <span className="pm-label">Paiements sécurisés</span>
              <span className="pm-badges">
                <span className="pm" aria-label="Visa" title="Visa">
                  <svg viewBox="0 0 42 14" height="13" role="img" aria-hidden="true">
                    <text x="0" y="11" fontFamily="Arial Black, Arial, sans-serif" fontStyle="italic" fontWeight="900" fontSize="13" fill="currentColor" letterSpacing="-.6">VISA</text>
                  </svg>
                </span>
                <span className="pm" aria-label="Mastercard" title="Mastercard">
                  <svg viewBox="0 0 30 18" height="16" role="img" aria-hidden="true">
                    <circle cx="11" cy="9" r="8" fill="currentColor" opacity="0.95" />
                    <circle cx="19" cy="9" r="8" fill="currentColor" opacity="0.55" />
                  </svg>
                </span>
                <span className="pm" aria-label="American Express" title="American Express">
                  <svg viewBox="0 0 42 14" height="13" role="img" aria-hidden="true">
                    <rect x="0.5" y="0.5" width="41" height="13" rx="2" fill="none" stroke="currentColor" strokeWidth="1" />
                    <text x="21" y="10" fontFamily="Arial, sans-serif" fontWeight="800" fontSize="7.5" fill="currentColor" textAnchor="middle" letterSpacing=".4">AMEX</text>
                  </svg>
                </span>
                <span className="pm" aria-label="Stripe" title="Stripe">
                  <svg viewBox="0 0 50 14" height="13" role="img" aria-hidden="true">
                    <text x="0" y="11" fontFamily="Helvetica, Arial, sans-serif" fontWeight="700" fontSize="13" fill="currentColor" letterSpacing="-.4">stripe</text>
                  </svg>
                </span>
              </span>
            </div>
            <div className="copy">
              <span>© 2026 BoatsFun.com. Tous droits réservés.</span>
              <span className="langs">
                <button className="active">Français</button>
                <span className="sep">·</span>
                <button>English</button>
              </span>
            </div>
          </div>
        </footer>
      </>);
  }

  window.BFFooter = Footer;
})();