/* global React, Icon, Button, Logo, ProtectedEmail */
// Site chrome — Header, Footer, CookieBanner.

// ───────────────────────── Header ─────────────────────────
function Header({ page, onNav }) {
  const [open, setOpen] = React.useState(false);
  const [plusOpen, setPlusOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const plusRef = React.useRef(null);

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

  React.useEffect(() => {
    const onClick = (e) => {
      if (plusRef.current && !plusRef.current.contains(e.target)) setPlusOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  // Close mobile menu on navigation
  const go = (p) => {
    onNav(p);
    setOpen(false);
    setPlusOpen(false);
  };

  const mainLinks = [
  { id: "home", label: "Accueil" },
  { id: "nos-huitres", label: "Nos huîtres" },
  { id: "notre-histoire", label: "Notre histoire" },
  { id: "ou-trouver", label: "Où nous trouver" },
  { id: "recettes", label: "Recettes" }];

  const moreLinks = [
  { id: "nos-produits", label: "Nos produits", icon: "shopping-basket" },
  { id: "nos-partenaires", label: "Restaurants & revendeurs", icon: "utensils" },
  { id: "prestations", label: "Évènementiel & visites", icon: "handshake" },
  { id: "devis-pro", label: "Devis professionnels", icon: "building" },
  { id: "parutions", label: "Ils parlent de nous", icon: "newspaper" },
  { id: "faq", label: "Questions fréquentes", icon: "help-circle" },
  { id: "contact", label: "Contact", icon: "mail" }];


  const isMore = moreLinks.some((l) => l.id === page);

  return (
    <header className={"sticky top-0 z-50 bg-white transition-shadow " + (scrolled ? "shadow-card" : "shadow-soft")}>
      <div className="container-x flex items-center gap-2 h-[68px] md:h-[80px]">
        {/* Logo */}
        <a onClick={() => go("home")} className="cursor-pointer flex items-center shrink-0">
          <Logo size={44} />
        </a>

        {/* Desktop nav — centered */}
        <nav className="hidden lg:flex items-center gap-1 mx-auto" aria-label="Navigation principale">
          {mainLinks.map((l) =>
          <button
            key={l.id}
            onClick={() => go(l.id)}
            className={"px-3 py-2 text-[15px] font-medium rounded-btn transition-colors " + (
            page === l.id ? "text-primary bg-foam" : "text-ink/80 hover:text-primary hover:bg-foam/60")}>
            
              {l.label}
            </button>
          )}
          <div className="relative" ref={plusRef}>
            <button
              onClick={() => setPlusOpen((v) => !v)}
              aria-expanded={plusOpen}
              className={"px-3 py-2 text-[15px] font-medium rounded-btn transition-colors flex items-center gap-1 " + (
              isMore || plusOpen ? "text-primary bg-foam" : "text-ink/80 hover:text-primary hover:bg-foam/60")}>
              
              Plus
              <Icon name={plusOpen ? "chevron-up" : "chevron-down"} size={15} />
            </button>
            {plusOpen &&
            <div className="absolute right-0 top-full mt-2 w-[280px] bg-white rounded-card shadow-marine-lg overflow-hidden">
                <ul className="py-2">
                  {moreLinks.map((l) =>
                <li key={l.id}>
                      <button
                    onClick={() => go(l.id)}
                    className={"w-full text-left px-4 py-2.5 text-[15px] flex items-center gap-3 transition-colors " + (
                    page === l.id ? "text-primary bg-foam" : "text-ink hover:bg-foam/70 hover:text-primary")}>
                    
                        <Icon name={l.icon} size={17} className="text-primary-light" />
                        {l.label}
                      </button>
                    </li>
                )}
                </ul>
              </div>
            }
          </div>
        </nav>

        {/* Phone (mobile) */}
        <a href="tel:0556095832" className="lg:hidden flex items-center gap-2 px-3 h-10 rounded-btn text-primary bg-foam text-[13px] font-semibold ml-auto mr-1 whitespace-nowrap no-underline">
          <Icon name="phone" size={14} />
          <span className="hidden sm:inline">05 56 09 58 32</span>
        </a>

        {/* CTA */}
        <Button variant="primary" size="md" onClick={() => go("commander")} iconRight="arrow-right" className="hidden md:inline-flex">
          Commander
        </Button>

        {/* Hamburger */}
        <button
          className="lg:hidden grid place-items-center w-11 h-11 rounded-btn text-ink hover:bg-foam"
          onClick={() => setOpen((v) => !v)}
          aria-label="Menu"
          aria-expanded={open}>
          
          <Icon name={open ? "x" : "menu"} size={22} />
        </button>
      </div>

      {/* Mobile drawer */}
      {open &&
      <div className="lg:hidden bg-white shadow-card max-h-[calc(100vh-68px)] overflow-y-auto">
          <div className="container-x py-4 flex flex-col gap-1">
            {[...mainLinks, ...moreLinks].map((l) =>
          <button
            key={l.id}
            onClick={() => go(l.id)}
            className={"text-left px-3 py-3 rounded-btn flex items-center justify-between " + (
            page === l.id ? "bg-foam text-primary font-semibold" : "text-ink/85 hover:bg-foam/60")}>
            
                <span>{l.label}</span>
                <Icon name="chevron-right" size={16} className="text-mute" />
              </button>
          )}
            <Button variant="primary" size="lg" className="mt-4" onClick={() => go("commander")} iconRight="arrow-right">Commander en ligne</Button>
          </div>
        </div>
      }
    </header>);

}

// ───────────────────────── Footer ─────────────────────────
function Footer({ onNav }) {
  const linkCls = "text-white/75 hover:text-white text-[15px] no-underline";
  return (
    <footer className="bg-primary-dark text-white">
      <div className="container-x py-16 md:py-20">
        <div className="grid md:grid-cols-12 gap-10 md:gap-12">
          {/* Brand */}
          <div className="md:col-span-4">
            <img src={"assets/logo-blanc.png"} alt="Gigas Meduli" className="h-12 w-auto mb-4" />
            <h4 className="font-serif text-white text-[24px] leading-tight mb-2 font-normal">Ferme Eau Médoc</h4>
            <p className="text-white/75 text-[15px] leading-[1.65] max-w-[320px]">
              Affinage d'huîtres en marais médocain depuis 1989. Vente directe et marchés en Gironde.
            </p>
            <p className="text-white/55 text-[13px] mt-5 leading-[1.6]">
              1 La Petite Canau<br />
              33590 Saint-Vivien-de-Médoc
            </p>
          </div>

          {/* Le site */}
          <div className="md:col-span-2">
            <h5 className="text-white text-[13px] tracking-eyebrow uppercase font-semibold mb-4">Le site</h5>
            <ul className="space-y-2.5">
              <li><a onClick={() => onNav("home")} className={"cursor-pointer " + linkCls}>Accueil</a></li>
              <li><a onClick={() => onNav("nos-huitres")} className={"cursor-pointer " + linkCls}>Nos huîtres</a></li>
              <li><a onClick={() => onNav("notre-histoire")} className={"cursor-pointer " + linkCls}>Notre histoire</a></li>
              <li><a onClick={() => onNav("nos-produits")} className={"cursor-pointer " + linkCls}>Nos produits</a></li>
              <li><a onClick={() => onNav("commander")} className={"cursor-pointer " + linkCls}>Commander</a></li>
              <li><a onClick={() => onNav("ou-trouver")} className={"cursor-pointer " + linkCls}>Où nous trouver</a></li>
              <li><a onClick={() => onNav("recettes")} className={"cursor-pointer " + linkCls}>Recettes</a></li>
            </ul>
          </div>

          {/* Plus */}
          <div className="md:col-span-3">
            <h5 className="text-white text-[13px] tracking-eyebrow uppercase font-semibold mb-4">Plus</h5>
            <ul className="space-y-2.5">
              <li><a onClick={() => onNav("nos-partenaires")} className={"cursor-pointer " + linkCls}>Restaurants & revendeurs</a></li>
              <li><a onClick={() => onNav("prestations")} className={"cursor-pointer " + linkCls}>Évènementiel & visites</a></li>
              <li><a onClick={() => onNav("devis-pro")} className={"cursor-pointer " + linkCls}>Devis professionnels</a></li>
              <li><a onClick={() => onNav("parutions")} className={"cursor-pointer " + linkCls}>Ils parlent de nous</a></li>
              <li><a onClick={() => onNav("faq")} className={"cursor-pointer " + linkCls}>Questions fréquentes</a></li>
              <li><a onClick={() => onNav("contact")} className={"cursor-pointer " + linkCls}>Contact</a></li>
            </ul>
          </div>

          {/* Contact */}
          <div className="md:col-span-3">
            <h5 className="text-white text-[13px] tracking-eyebrow uppercase font-semibold mb-4">Nous joindre</h5>
            <ul className="space-y-3">
              <li><a href="tel:0556095832" className="text-white/85 hover:text-white text-[15px] flex items-center gap-2 no-underline"><Icon name="phone" size={15} />05 56 09 58 32</a></li>
              <li><ProtectedEmail withIcon iconSize={15} iconClassName="text-white/85" className="text-white/85 hover:text-white text-[15px] flex items-center gap-2 no-underline" /></li>
              <li className="text-white/65 text-[14px] flex items-start gap-2 leading-[1.55]"><Icon name="clock" size={15} className="mt-1" /><span>Ven. 9h-12h<br />Sam. 9h-12h et 15h-18h</span></li>
            </ul>
            <div className="flex gap-2 mt-5">
              {/* Réseaux sociaux : URLs à compléter par le client. */}
              <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="w-10 h-10 grid place-items-center rounded-full bg-white/10 text-white hover:bg-white hover:text-primary-dark transition-colors no-underline"><Icon name="facebook" size={17} /></a>
              <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="w-10 h-10 grid place-items-center rounded-full bg-white/10 text-white hover:bg-white hover:text-primary-dark transition-colors no-underline"><Icon name="instagram" size={17} /></a>
            </div>
          </div>
        </div>

        <div className="mt-14 pt-6 flex flex-wrap items-center justify-between gap-4">
          <p className="text-white/55 text-[13px]">© 2026 Ferme Eau Médoc. Tous droits réservés.</p>
          <ul className="flex flex-wrap gap-x-5 gap-y-2 text-[13px]">
            <li><a onClick={() => onNav("mentions-legales")} className="cursor-pointer text-white/65 hover:text-white">Mentions légales</a></li>
            <li><a onClick={() => onNav("cgu")} className="cursor-pointer text-white/65 hover:text-white">CGU</a></li>
            <li><a onClick={() => onNav("confidentialite")} className="cursor-pointer text-white/65 hover:text-white">Confidentialité</a></li>
            <li><a className="cursor-pointer text-white/65 hover:text-white" onClick={() => {localStorage.removeItem("gm-cookies");location.reload();}}>🍪 Gérer les cookies</a></li>
          </ul>
        </div>
      </div>
    </footer>);

}

// ───────────────────────── Cookie banner ─────────────────────────
function CookieBanner() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    if (!localStorage.getItem("gm-cookies")) setShow(true);
  }, []);
  if (!show) return null;
  const set = (val) => {localStorage.setItem("gm-cookies", val);setShow(false);};
  return (
    <div className="fixed inset-x-0 bottom-0 z-[60] p-4 md:p-6 pointer-events-none">
      <div className="pointer-events-auto max-w-container mx-auto bg-white rounded-card shadow-marine-lg p-5 md:p-6 flex flex-col md:flex-row items-start gap-4">
        <div className="flex items-start gap-3 flex-1">
          <span className="text-2xl">🍪</span>
          <div>
            <h4 className="font-semibold text-ink text-[16px] mb-1">Cookies & confidentialité</h4>
            <p className="text-[14px] text-ink/75 leading-[1.55]">
              Nous utilisons des cookies pour analyser l'audience du site et améliorer votre expérience.
              Vos données ne sont jamais partagées avec des tiers à des fins commerciales.
            </p>
          </div>
        </div>
        <div className="flex flex-wrap gap-2 shrink-0">
          <Button variant="ghost" size="sm" onClick={() => set("refused")}>Tout refuser</Button>
          <Button variant="secondary" size="sm" onClick={() => set("custom")}>Personnaliser</Button>
          <Button variant="primary" size="sm" onClick={() => set("accepted")}>Tout accepter</Button>
        </div>
      </div>
    </div>);

}

// ───────────────────────── Back-to-top ─────────────────────────
function BackToTop() {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 480);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const goTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
  return (
    <button
      type="button"
      onClick={goTop}
      aria-label="Remonter en haut de la page"
      title="Remonter en haut"
      className={
        "fixed bottom-6 right-6 md:bottom-8 md:right-8 z-[55] w-12 h-12 rounded-full bg-primary text-white shadow-marine-lg grid place-items-center transition-all duration-300 hover:bg-primary-dark hover:-translate-y-0.5 focus-visible:ring-4 focus-visible:ring-primary/30 " +
        (visible ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-3 pointer-events-none")
      }>
      <Icon name="chevron-up" size={20} />
    </button>
  );
}

Object.assign(window, { Header, Footer, CookieBanner, BackToTop });