/* AUSIEGE · Desktop chrome (1440) */

/* Header
   Props:
   - solid: solid background (non-hero pages)
   - onLight: header on light background
   - current: which nav link to highlight (home, services, pricing, team, training, contact, gallery)
   - universe: "femme" | "homme" | undefined (undefined = neutral / home commune)
*/
const DHeader = ({ onLight = false, solid = false, current = "home", universe, onNav, onBook, onSwitchUniverse }) => {
  /* Read handlers at click time so site-app installs them before lookup. */
  const callNav   = (p) => { const fn = onNav   || window.ausiegeNavigate;        if (fn) fn(p); };
  const callSwitch= (u) => { const fn = onSwitchUniverse || window.ausiegeSwitchUniverse; if (fn) fn(u); };
  const book      = (e) => { const fn = onBook  || window.ausiegeOpenBooking;    if (fn) fn(e); };
  const go        = (p) => (e) => { e.preventDefault(); callNav(p); };
  const goUni     = (u) => (e) => { e.preventDefault(); callSwitch(u); };
  return (
    <header className={`d-header ${solid ? "d-header--solid" : ""} ${onLight ? "d-header--on-light" : ""}`}>
      <a className="d-header__brand" href="#home" onClick={go("home")} style={{ cursor: "pointer" }}>AUSIÈGE · BEAUVAIS</a>

      {universe && (
        <div className="d-header__universe" role="tablist" aria-label="Univers">
          <a className={universe === "femme" ? "active" : ""} role="tab" onClick={goUni("femme")} href="#femme">Femme</a>
          <a className={universe === "homme" ? "active" : ""} role="tab" onClick={goUni("homme")} href="#homme">Homme</a>
        </div>
      )}

      <nav className="d-header__nav">
        {!universe && (
          <a className={current === "home" ? "active" : ""} href="#home" onClick={go("home")}>Accueil</a>
        )}
        {universe && (
          <a className={current === "home" ? "active" : ""} href="#home" onClick={go("home")}>
            <em style={{ fontFamily: "var(--font-display)", fontStyle: "italic", marginRight: 4 }}>
              {universe === "femme" ? "Femme" : "Homme"}
            </em>
          </a>
        )}
        <a className={current === "services" ? "active" : ""} href="#services" onClick={go("services")}>Prestations</a>
        <a className={current === "pricing" ? "active" : ""}  href="#pricing"  onClick={go("pricing")}>Tarifs</a>
        <a className={current === "team" ? "active" : ""}     href="#team"     onClick={go("team")}>Équipe</a>
        <a className={current === "gallery" ? "active" : ""}  href="#gallery"  onClick={go("gallery")}>Galerie</a>
        <a className={current === "merch" ? "active" : ""}    href="#merch"    onClick={go("merch")}>Merch</a>
        <a className={current === "produit" ? "active" : ""}  href="#produit"  onClick={go("produit")}>Produit</a>
        <a className={current === "training" ? "active" : ""} href="#training" onClick={go("training")}>Formation</a>
        <a className={current === "contact" ? "active" : ""}  href="#contact"  onClick={go("contact")}>Contact</a>
      </nav>
      <div className="d-header__right">
        <span className="d-header__lang"><strong>FR</strong> / EN</span>
        <button className="d-header__cta" onClick={book}>Réserver</button>
      </div>
    </header>
  );
};

const DFooter = () => (
  <footer className="d-footer">
    <div className="d-footer__top">
      <div>
        <div className="d-footer__brand">AUSIEGE</div>
        <div className="d-footer__tag">L'adresse coiffure pour révéler votre style.</div>
      </div>
      <div className="d-footer__col">
        <h4>Salon</h4>
        <ul>
          <li>11 rue des Arbalétriers</li>
          <li>60000 Beauvais</li>
          <li>49°25′58″ N / 2°04′52″ E</li>
        </ul>
      </div>
      <div className="d-footer__col">
        <h4>Horaires</h4>
        <ul>
          <li>Mar / Sam : 9h / 19h</li>
          <li>Dimanche : 10h / 18h</li>
          <li>Lundi : fermé</li>
        </ul>
      </div>
      <div className="d-footer__col">
        <h4>Contact</h4>
        <ul>
          <li>+33 3 65 65 94 38</li>
          <li>bonjour@ausiege.fr</li>
        </ul>
        <h4 style={{ marginTop: 24 }}>Suivre</h4>
        <ul>
          <li>Instagram Femme · @ausiegepourelle</li>
          <li>Instagram Homme · @au_siege</li>
        </ul>
      </div>
      <div className="d-footer__col">
        <h4>Newsletter</h4>
        <p style={{ fontSize: 13, opacity: 0.7, lineHeight: 1.6, maxWidth: 280 }}>
          Une lettre douce, trois fois l'an. Inspirations, dates, nouveautés.
        </p>
        <div className="d-footer__news">
          <input placeholder="Votre adresse email" />
          <button aria-label="S'inscrire"><Icon name="arrow-right" size={18}/></button>
        </div>
      </div>
    </div>
    <div className="d-footer__bottom">
      <div>© 2026 AUSIÈGE · 11 rue des Arbalétriers, 60000 Beauvais</div>
      <div className="d-footer__bottom-links">
        <a>Mentions légales</a>
        <a>Politique de confidentialité</a>
        <a>Crédits</a>
      </div>
    </div>
  </footer>
);

Object.assign(window, { DHeader, DFooter });