/* BoatsFun — Header partagé (Airbnb-style, sticky, scroll-collapse).
   Charge ses propres styles via une <style> co-localisée et expose window.BFHeader. */

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

  const styles = `
/* Padding-top global pour compenser le header fixed */
.bf { padding-top:68px; }

/* ============ HEADER (Airbnb-style, white sticky, scroll-collapse) ============ */
.bf .header { position:fixed; top:0; left:0; right:0; z-index:50; background:#FFFFFF; border-bottom:1px solid var(--hair); transition: box-shadow .25s ease; }
.bf .header.scrolled { box-shadow:0 4px 16px -8px rgba(0,34,68,.18); }
.bf .header-row { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-block:12px; min-height:64px; transition:padding .25s ease, min-height .25s ease; }
.bf .header.scrolled .header-row { padding-block:8px; min-height:54px; }
.bf .logo { display:flex; align-items:center; justify-self:start; }
  .bf .logo img { height:40px; width:auto; object-fit:contain; display:block; transition:height .25s ease; }
  .bf .header.scrolled .logo img { height:32px; }

/* CENTER — tabs (default) OR compact pill (scrolled) */
.bf .nav-center-stack { position:relative; display:flex; justify-content:center; align-items:center; min-width:0; min-height:44px; }
.bf .nav-tabs { display:flex; gap:6px; align-items:flex-end; transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.bf .header.scrolled .nav-tabs { opacity:0; transform:translateY(-6px); visibility:hidden; pointer-events:none; }
.bf .nav-tab { display:flex; flex-direction:column; align-items:center; gap:3px; padding:3px 16px 5px; color:var(--muted); text-decoration:none; font-family:'Inter', sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.01em; border-bottom:2.5px solid transparent; transition:color .15s, border-color .15s; line-height:1.1; cursor:pointer; }
.bf .nav-tab:hover { color:var(--navy); }
.bf .nav-tab.active { color:var(--navy); border-bottom-color:var(--navy); }
.bf .nav-tab .nav-tab-ic { display:flex; align-items:center; justify-content:center; height:22px; }
.bf .nav-tab .nav-tab-ic svg { width:21px; height:21px; color:currentColor; }

/* Compact mini-search pill (visible au scroll) */
.bf .nav-mini-search { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(.94); opacity:0; visibility:hidden; pointer-events:none; display:inline-flex; align-items:center; gap:0; background:#fff; border:1px solid var(--hair); border-radius:999px; padding:6px 6px 6px 22px; box-shadow:0 2px 6px rgba(0,34,68,.08); cursor:pointer; transition:opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .15s; font-family:'Inter', sans-serif; }
.bf .nav-mini-search:hover { box-shadow:0 4px 14px rgba(0,34,68,.16); }
.bf .header.scrolled .nav-mini-search { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, -50%) scale(1); }
.bf .nav-mini-search .ms-seg { font-size:13.5px; font-weight:600; color:var(--navy); padding:0 14px; line-height:1; white-space:nowrap; }
.bf .nav-mini-search .ms-seg + .ms-seg { border-left:1px solid var(--hair); }
.bf .nav-mini-search .ms-go { width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-left:8px; }
.bf .nav-mini-search .ms-go svg { color:#fff; }

/* RIGHT — globe + menu pill */
.bf .nav-right-zone { display:flex; align-items:center; justify-self:end; gap:4px; position:relative; }
.bf .nav-icon-btn { background:transparent; border:none; width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:var(--navy); cursor:pointer; transition:background .15s; font-family:'Inter', sans-serif; font-weight:600; font-size:12.5px; }
.bf .nav-icon-btn:hover { background:var(--sea-mist); }
.bf .nav-icon-btn svg { width:18px; height:18px; }
.bf .menu-btn { display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--hair); border-radius:999px; padding:5px 6px 5px 14px; cursor:pointer; transition:box-shadow .15s; }
.bf .menu-btn:hover { box-shadow:0 2px 10px rgba(0,34,68,.14); }
.bf .menu-btn .mb-bars { display:inline-flex; flex-direction:column; gap:3px; }
.bf .menu-btn .mb-bars span { width:14px; height:1.6px; background:var(--navy); border-radius:1px; display:block; }
.bf .menu-btn .mb-av { width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.bf .menu-btn .mb-av svg { color:#fff; width:16px; height:16px; }

/* Dropdown menu */
.bf .menu-dropdown { position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--hair); border-radius:14px; box-shadow:0 12px 32px -10px rgba(0,34,68,.22); padding:8px; min-width:240px; display:none; z-index:60; }
.bf .menu-dropdown.open { display:block; }
.bf .menu-dropdown a, .bf .menu-dropdown button.md-item { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:11px 14px; border-radius:8px; font-family:'Inter', sans-serif; font-size:14px; font-weight:500; color:var(--navy); text-align:left; text-decoration:none; cursor:pointer; }
.bf .menu-dropdown a:hover, .bf .menu-dropdown button.md-item:hover { background:var(--sea-mist); }
.bf .menu-dropdown .md-sep { height:1px; background:var(--hair); margin:6px 4px; }
.bf .menu-dropdown .md-lang { display:flex; gap:6px; padding:6px; }
.bf .menu-dropdown .md-lang button { flex:1; justify-content:center; background:var(--sea-mist); border:1px solid var(--hair); border-radius:8px; padding:8px 10px; font-family:'Inter', sans-serif; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:1.4px; color:var(--navy); cursor:pointer; }
.bf .menu-dropdown .md-lang button.active { background:var(--navy); color:#fff; border-color:var(--navy); }

/* Popover langue (à côté du globe) */
.bf .lang-wrap { position:relative; display:inline-flex; }
.bf .nav-icon-btn.active { background:var(--sea-mist); }
.bf .lang-popover { position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--hair); border-radius:12px; box-shadow:0 12px 28px -10px rgba(0,34,68,.22); padding:6px; min-width:150px; display:none; z-index:60; }
.bf .lang-popover.open { display:block; }
.bf .lang-popover button { display:block; width:100%; background:none; border:none; padding:10px 14px; border-radius:8px; font-family:'Inter', sans-serif; font-size:13.5px; font-weight:500; text-align:left; color:var(--navy); cursor:pointer; }
.bf .lang-popover button:hover { background:var(--sea-mist); }
.bf .lang-popover button.active { background:var(--sea-mist); font-weight:600; }

/* ============ RESPONSIVE HEADER ============ */
@media (max-width: 860px) {
  /* Header mobile — masquer tabs centrales, garder logo + globe + menu */
  .bf { padding-top:54px; }
  .bf .header-row { grid-template-columns:auto 1fr auto; padding-block:10px; min-height:52px; gap:8px; }
  .bf .nav-tabs { display:none; }
  .bf .nav-center-stack { min-height:0; }
  .bf .nav-icon-btn { width:38px; height:38px; }
  .bf .menu-btn { padding:4px 4px 4px 10px; gap:8px; }
  .bf .menu-btn .mb-av { width:26px; height:26px; }
  .bf .logo img { height:28px; }
  .bf .header.scrolled .logo img { height:26px; }
  .bf .menu-dropdown { min-width:220px; right:0; }

  /* Mobile scrollé : cacher logo + globe pour libérer la place au mini-pill (Airbnb-like) */
  .bf .header.scrolled .logo { display:none; }
  .bf .header.scrolled .lang-wrap { display:none; }
  .bf .header.scrolled .header-row { grid-template-columns:1fr auto; gap:10px; padding-block:7px; min-height:50px; }
  /* Mini-pill devient un élément in-flow sur mobile (pas absolute) pour partager la largeur avec le menu */
  .bf .header.scrolled .nav-mini-search {
    position:relative; left:auto; top:auto; transform:none;
    width:100%; max-width:none;
    padding:5px 5px 5px 14px;
    box-shadow:0 2px 8px rgba(0,34,68,.10);
  }
  .bf .header.scrolled .nav-mini-search .ms-seg { font-size:12.5px; padding:0 9px; overflow:hidden; text-overflow:ellipsis; }
  .bf .header.scrolled .nav-mini-search .ms-go { width:30px; height:30px; margin-left:6px; flex-shrink:0; }
}

@media (max-width: 500px) {
  .bf .header.scrolled .nav-mini-search .ms-seg { font-size:11.5px; padding:0 7px; }
  .bf .header.scrolled .nav-mini-search { padding:4px 4px 4px 12px; }
}

@media (max-width: 360px) {
  .bf .menu-btn { padding:4px 4px 4px 8px; gap:6px; }
}
`;

  function Header() {
    const [lang, setLang] = React.useState("FR");
    const [menuOpen, setMenuOpen] = React.useState(false);
    const [langOpen, setLangOpen] = React.useState(false);
    const [scrolled, setScrolled] = React.useState(false);
    const [activeTab, setActiveTab] = React.useState("bateaux");
    const menuRef = React.useRef(null);

    React.useEffect(() => {
      function onDoc(e) {
        if (menuRef.current && !menuRef.current.contains(e.target)) {
          setMenuOpen(false);
          setLangOpen(false);
        }
      }
      document.addEventListener("mousedown", onDoc);
      return () => document.removeEventListener("mousedown", onDoc);
    }, []);

    React.useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 80);
      window.addEventListener("scroll", onScroll, { passive: true });
      onScroll();
      return () => window.removeEventListener("scroll", onScroll);
    }, []);

    const tabs = [
      { id: "bateaux", label: "Bateaux", href: "/bateaux", Ico: I.fleet },
      { id: "offre", label: "Faire une offre", href: "/faire-une-offre", Ico: I.tag },
      { id: "partenaire", label: "Devenir partenaire", href: "/devenir-hote", Ico: I.users }];


    return (
      <>
        <style>{styles}</style>
        <header className={`header ${scrolled ? "scrolled" : ""}`}>
          <div className="container header-row">
            <a className="logo" href="/" aria-label="BoatsFun">
              <img src="assets/LOGO-BOATSFUN-NEW-V+.png" alt="BoatsFun" />
            </a>

            <div className="nav-center-stack">
              <nav className="nav-tabs" aria-label="Catégories">
                {tabs.map((t) => {
                  const Ico = t.Ico;
                  return (
                    <a
                      key={t.id}
                      href={t.href}
                      className={`nav-tab ${activeTab === t.id ? "active" : ""}`}
                      onClick={() => setActiveTab(t.id)}>
                      <span className="nav-tab-ic"><Ico /></span>
                      <span className="nav-tab-lb">{t.label}</span>
                    </a>);
                })}
              </nav>
              <button
                className="nav-mini-search"
                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
                aria-label="Ouvrir la recherche">
                <span className="ms-seg">Montréal et région</span>
                <span className="ms-seg">Date</span>
                <span className="ms-seg">4 adultes</span>
                <span className="ms-go"><I.search width="14" /></span>
              </button>
            </div>

            <div className="nav-right-zone" ref={menuRef}>
              <div className="lang-wrap">
                <button
                  className={`nav-icon-btn ${langOpen ? "active" : ""}`}
                  aria-label={`Langue : ${lang}. Cliquer pour choisir`}
                  aria-haspopup="true"
                  aria-expanded={langOpen}
                  onClick={() => { setLangOpen(!langOpen); setMenuOpen(false); }}>
                  <I.globe />
                </button>
                <div className={`lang-popover ${langOpen ? "open" : ""}`} role="menu">
                  <button className={lang === "FR" ? "active" : ""} onClick={() => { setLang("FR"); setLangOpen(false); }}>Français</button>
                  <button className={lang === "EN" ? "active" : ""} onClick={() => { setLang("EN"); setLangOpen(false); }}>English</button>
                </div>
              </div>
              <button
                className="menu-btn"
                onClick={() => { setMenuOpen(!menuOpen); setLangOpen(false); }}
                aria-haspopup="true"
                aria-expanded={menuOpen}
                aria-label="Menu">
                <span className="mb-bars"><span></span><span></span><span></span></span>
                <span className="mb-av"><I.user /></span>
              </button>
              <div className={`menu-dropdown ${menuOpen ? "open" : ""}`} role="menu">
                <a href="/connexion" onClick={() => setMenuOpen(false)}>Se connecter</a>
                <div className="md-sep"></div>
                <a href="/bateaux" onClick={() => setMenuOpen(false)}>Bateaux</a>
                <a href="/faire-une-offre" onClick={() => setMenuOpen(false)}>Faire une offre</a>
                <a href="/devenir-hote" onClick={() => setMenuOpen(false)}>Devenir partenaire</a>
                <a href="/contact" onClick={() => setMenuOpen(false)}>Contact</a>
              </div>
            </div>
          </div>
        </header>
      </>);
  }

  window.BFHeader = Header;
})();