// =====================================================
// Header, Footer, Badges, FiabilityBadge, etc.
// =====================================================

const FiabilityBadge = ({ niveau, small = false }) => {
  const map = {
    "confirmé":    { cls: "badge-confirme",    label: "Confirmé" },
    "à-confirmer": { cls: "badge-aconfirmer",  label: "À confirmer" },
    "non-précisé": { cls: "badge-nonprecise",  label: "Non précisé" },
    "sensible":    { cls: "badge-sensible",    label: "Sensible aux conditions opérationnelles" }
  };
  const m = map[niveau] || map["non-précisé"];
  return (
    <span className={`badge ${m.cls}`} style={small ? { fontSize: 10, padding: "3px 8px" } : null}>
      <span className="badge-dot"></span>
      {m.label}
    </span>
  );
};

const FacadeBadge = ({ facade }) => (
  <span className="badge badge-facade">
    <Icon name="compass" size={10} stroke={2}/>
    {facade}
  </span>
);

// =====================================================
// Header
// =====================================================
const Header = ({ route, navigate }) => {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const items = [
    { id: "accueil",      label: "Accueil",            href: "#/",            icon: "compass" },
    { id: "explorer",     label: "Carte interactive",   href: "#/explorer",    icon: "map" },
    { id: "escales",      label: "Les escales",         href: "#/escales",     icon: "anchor" },
    { id: "calendrier",   label: "Calendrier",          href: "#/calendrier",  icon: "calendar" },
    { id: "inspirations", label: "Inspirations",        href: "#/inspirations",icon: "lightbulb" },
    { id: "operateurs",   label: "Espace opérateurs",   href: "#/operateurs",  icon: "briefcase" },
    { id: "contact",      label: "Contact",             href: "#/contact",     icon: "mail" }
  ];

  const go = (href) => { navigate(href); setMobileOpen(false); };

  // Fermer avec Escape
  React.useEffect(() => {
    if (!mobileOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [mobileOpen]);

  // Bloquer le scroll body quand menu ouvert
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  return (
    <>
      <header className="site-header">
        <div className="container container-wide">
          <div className="header-row">
            <div className="brand" onClick={() => go("#/")}>
              <img className="brand-logo" src="assets/logo-mta.png" alt="Ministère du Tourisme et de l'Artisanat — Madagascar"/>
              <div className="brand-text">
                <span className="b-line1">République de Madagascar</span>
                <span className="b-line2">Catalogue Croisières 2026</span>
              </div>
            </div>
            <nav className="nav">
              {items.map(it => (
                <a key={it.id}
                   href={it.href}
                   className={`nav-link ${route === it.id ? "active" : ""}`}
                   onClick={(ev) => { ev.preventDefault(); go(it.href); }}>
                  {it.label}
                </a>
              ))}
            </nav>
            <div className="header-actions">
              <button className="btn btn-ghost btn-sm" onClick={() => go("#/explorer")}>
                <Icon name="map" size={14}/>Explorer la carte
              </button>
              <button className="btn btn-navy btn-sm" onClick={() => go("#/operateurs")}>
                <Icon name="briefcase" size={14}/>Espace opérateurs
              </button>
            </div>
            {/* Burger — mobile uniquement */}
            <button
              className={`burger-btn ${mobileOpen ? "is-open" : ""}`}
              onClick={() => setMobileOpen(o => !o)}
              aria-label={mobileOpen ? "Fermer le menu" : "Ouvrir le menu"}
              aria-expanded={mobileOpen}>
              {mobileOpen ? <Icon name="x" size={20}/> : <Icon name="menu" size={20}/>}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile nav overlay */}
      <div className={`mobile-nav ${mobileOpen ? "is-open" : ""}`} aria-hidden={!mobileOpen}>
        <div className="mobile-nav-backdrop" onClick={() => setMobileOpen(false)}/>
        <nav className="mobile-nav-panel">
          <div className="mobile-nav-head">
            <span className="mobile-nav-title">Navigation</span>
            <button className="burger-btn" onClick={() => setMobileOpen(false)} aria-label="Fermer">
              <Icon name="x" size={20}/>
            </button>
          </div>
          <ul className="mobile-nav-list">
            {items.map(it => (
              <li key={it.id}>
                <a
                  href={it.href}
                  className={`mobile-nav-link ${route === it.id ? "active" : ""}`}
                  onClick={(ev) => { ev.preventDefault(); go(it.href); }}>
                  <span className="mnl-icon"><Icon name={it.icon} size={18}/></span>
                  <span>{it.label}</span>
                  <Icon name="chevron-right" size={14} stroke={2}/>
                </a>
              </li>
            ))}
          </ul>
          <div className="mobile-nav-foot">
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={() => go("#/explorer")}>
              <Icon name="map" size={15}/>Explorer la carte
            </button>
            <button className="btn btn-navy" style={{ width: "100%", justifyContent: "center" }} onClick={() => go("#/operateurs")}>
              <Icon name="briefcase" size={15}/>Espace opérateurs
            </button>
          </div>
        </nav>
      </div>
    </>
  );
};

// =====================================================
// Footer
// =====================================================
const Footer = ({ navigate }) => (
  <footer className="footer">
    <div className="container container-wide">
      <div className="footer-grid">
        <div>
          <div className="footer-logo-wrap">
            <img
              className="footer-logo-mono"
              src="assets/logo-mta.png"
              alt="Ministère du Tourisme et de l'Artisanat - Madagascar"
            />
          </div>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "#9CA9C0", maxWidth: 38 + "ch" }}>
            Le catalogue croisières Madagascar 2026 présente les conditions d'accueil
            des dix escales recensées et les expériences passagers, pour les armateurs,
            tour-opérateurs et partenaires institutionnels.
          </p>
        </div>
        <div>
          <h4>Naviguer</h4>
          <ul>
            <li><a href="#/" onClick={(ev) => { ev.preventDefault(); navigate("#/"); }}>Accueil</a></li>
            <li><a href="#/explorer" onClick={(ev) => { ev.preventDefault(); navigate("#/explorer"); }}>Explorer les escales</a></li>
            <li><a href="#/calendrier" onClick={(ev) => { ev.preventDefault(); navigate("#/calendrier"); }}>Calendrier</a></li>
            <li><a href="#/inspirations" onClick={(ev) => { ev.preventDefault(); navigate("#/inspirations"); }}>Inspirations</a></li>
            <li><a href="#/operateurs" onClick={(ev) => { ev.preventDefault(); navigate("#/operateurs"); }}>Espace opérateurs</a></li>
            <li><a href="#/contact" onClick={(ev) => { ev.preventDefault(); navigate("#/contact"); }}>Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Opérateurs</h4>
          <ul>
            <li><a href="#/operateurs" onClick={(ev) => { ev.preventDefault(); navigate("#/operateurs"); }}>Tableau comparatif B2B</a></li>
            <li><a href="#/operateurs" onClick={(ev) => { ev.preventDefault(); navigate("#/operateurs"); }}>Points à confirmer</a></li>
            <li><a href="#/operateurs" onClick={(ev) => { ev.preventDefault(); navigate("#/operateurs"); }}>Ressources téléchargeables</a></li>
            <li><a href="#/contact" onClick={(ev) => { ev.preventDefault(); navigate("#/contact"); }}>Demande institutionnelle</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact institutionnel</h4>
          <ul>
            <li>23, Rue Fernand Kasanga</li>
            <li>Tsimbazaza, Antananarivo, Madagascar</li>
            <li><a href="mailto:dvpt@tourisme.gov.mg">dvpt@tourisme.gov.mg</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bar">
        <span>© 2026 Ministère du Tourisme et de l'Artisanat — Source : Catalogue Croisières Madagascar 2026.</span>
        <span>Données indicatives. Toute programmation doit être validée auprès des autorités portuaires compétentes.</span>
      </div>
    </div>
  </footer>
);

window.FiabilityBadge = FiabilityBadge;
window.FacadeBadge = FacadeBadge;
window.Header = Header;
window.Footer = Footer;