/* ============================================================================
   KN CLEANING — Chrome : Header, menu mobile, footer, WhatsApp flottant
   ============================================================================ */
const { useState, useEffect, useRef } = React;

/* Icône Lucide (remplacée en SVG par lucide.createIcons) */
function Icon({ name, className }) {
  return <i data-lucide={name} className={className}></i>;
}

/* Glyphe Instagram (Lucide latest ne fournit plus ce logo de marque) */
function InstagramGlyph({ style }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
    </svg>
  );
}

/* Glyphe WhatsApp officiel (Lucide n'a pas le logo de marque) */
function WhatsAppGlyph({ style }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" style={style} aria-hidden="true">
      <path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 018.413 3.488 11.82 11.82 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.978-1.039zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413z"/>
    </svg>
  );
}

const NAV = [
  { label: "Accueil", id: "accueil" },
  { label: "Services", id: "services" },
  { label: "Polissage", id: "polissage" },
  { label: "Packs", id: "packs" },
  { label: "Réalisations", id: "avant-apres" },
  { label: "Entreprises", id: "entreprises" },
  { label: "Avis", id: "avis" },
  { label: "Contact", id: "reservation" },
];

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const C = window.KN.contact;

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

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  const go = (id) => (e) => { e.preventDefault(); setOpen(false); window.scrollToId(id); };

  return (
    <header className={"header" + (scrolled ? " scrolled" : "")}>
      <div className="container header-inner">
        <a href="#accueil" className="brand-lockup" onClick={go("accueil")} aria-label="KN Cleaning — accueil">
          {/* 👉 Logo : assets/logo-kn.png */}
          <img src="assets/logo-kn.png" alt="KN Cleaning" />
          <span className="bl-text">
            <span className="bl-name">KN Cleaning</span>
            <span className="bl-sub">Detailing automobile</span>
          </span>
        </a>

        <nav className="nav">
          {NAV.map((n) => (
            <a key={n.id} href={"#" + n.id} onClick={go(n.id)}>{n.label}</a>
          ))}
        </nav>

        <div className="header-actions">
          <a className="icon-btn" href={window.waLink("Bonjour KN Cleaning, je souhaite réserver un nettoyage.")} target="_blank" rel="noopener" aria-label="WhatsApp">
            <WhatsAppGlyph />
          </a>
          <a className="btn btn-primary" href="#reservation" onClick={go("reservation")}>Réserver maintenant</a>
          <button className="burger" onClick={() => setOpen(true)} aria-label="Ouvrir le menu"><Icon name="menu" /></button>
        </div>
      </div>

      {/* Tiroir mobile */}
      <div className={"drawer-backdrop" + (open ? " open" : "")} onClick={() => setOpen(false)}></div>
      <aside className={"drawer" + (open ? " open" : "")} aria-hidden={!open}>
        <div className="drawer-top">
          <img src="assets/logo-kn.png" alt="KN Cleaning" />
          <button className="icon-btn" onClick={() => setOpen(false)} aria-label="Fermer"><Icon name="x" /></button>
        </div>
        <nav>
          {NAV.map((n) => (
            <a key={n.id} href={"#" + n.id} onClick={go(n.id)}>{n.label}</a>
          ))}
        </nav>
        <div className="drawer-cta">
          <a className="btn btn-primary btn-block" href="#reservation" onClick={go("reservation")}>Réserver maintenant</a>
          <a className="btn btn-wa btn-block" href={window.waLink("Bonjour KN Cleaning, je souhaite réserver un nettoyage.")} target="_blank" rel="noopener">
            <WhatsAppGlyph style={{ width: 18, height: 18 }} /> Réserver via WhatsApp
          </a>
        </div>
      </aside>
    </header>
  );
}

function WhatsAppFloat() {
  return (
    <a className="wa-float" href={window.waLink("Bonjour KN Cleaning, je souhaite réserver un nettoyage / demander un devis.")} target="_blank" rel="noopener" aria-label="Réserver via WhatsApp">
      <WhatsAppGlyph />
      <span className="wa-label">Réserver via WhatsApp</span>
    </a>
  );
}

function Toast() {
  return (
    <div className="toast" id="kn-toast">
      <Icon name="check-circle" />
      <span className="toast-msg"></span>
    </div>
  );
}

function Footer() {
  const C = window.KN.contact;
  const go = (id) => (e) => { e.preventDefault(); window.scrollToId(id); };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo-kn.png" alt="KN Cleaning" />
            <p>Detailing automobile premium. Nettoyage intérieur, extérieur et finition showroom pour particuliers et professionnels — partout en Belgique.</p>
            <div className="footer-social">
              {/* 👉 Réseaux sociaux : modifiez les liens dans data.js */}
              <a href={C.instagram} target="_blank" rel="noopener" aria-label="Instagram"><InstagramGlyph /></a>
              <a href={window.waLink("Bonjour KN Cleaning,")} target="_blank" rel="noopener" aria-label="WhatsApp"><WhatsAppGlyph /></a>
              <a href={"mailto:" + C.email} aria-label="E-mail"><Icon name="mail" /></a>
            </div>
          </div>

          <div className="footer-col">
            <h5>Liens rapides</h5>
            <ul>
              <li><a href="#services" onClick={go("services")}>Services</a></li>
              <li><a href="#packs" onClick={go("packs")}>Packs</a></li>
              <li><a href="#avant-apres" onClick={go("avant-apres")}>Réalisations</a></li>
              <li><a href="#avis" onClick={go("avis")}>Avis clients</a></li>
              <li><a href="#faq" onClick={go("faq")}>FAQ</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Services</h5>
            <ul>
              <li><a href="#services" onClick={go("services")}>Nettoyage extérieur</a></li>
              <li><a href="#services" onClick={go("services")}>Nettoyage intérieur</a></li>
              <li><a href="#services" onClick={go("services")}>Detailing complet</a></li>
              <li><a href="#entreprises" onClick={go("entreprises")}>Flottes & entreprises</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Contact</h5>
            <ul className="footer-contact">
              <li><Icon name="phone" /><a href={"tel:" + C.phoneTel}>{C.phoneDisplay}</a></li>
              <li><Icon name="mail" /><a href={"mailto:" + C.email}>{C.email}</a></li>
              <li><Icon name="map-pin" /><span>{C.zone}</span></li>
              {C.hours ? <li><Icon name="clock" /><span>{C.hours}</span></li> : null}
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <p>© 2026 KN Cleaning. Tous droits réservés.</p>
          <div className="footer-legal">
            <a href="#">Mentions légales</a>
            <a href="#">Politique de confidentialité</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, WhatsAppGlyph, InstagramGlyph, Header, WhatsAppFloat, Toast, Footer, NAV });