/* AUSIEGE · Tablet chrome (768) */

const THeader = ({ onLight = false, solid = false, current = "home", universe, onNav, onBook, onMenu, onSwitchUniverse }) => {
  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 menu      = (e) => { const fn = onMenu  || window.ausiegeOpenMenu;       if (fn) fn(e); };
  const go        = (p) => (e) => { e.preventDefault(); callNav(p); };
  const goUni     = (u) => (e) => { e.preventDefault(); callSwitch(u); };
  return (
    <header className={`t-header ${solid ? "t-header--solid" : ""} ${onLight ? "t-header--on-light" : ""}`}>
      <div className="t-header__nav">
        <button className="t-header__burger" aria-label="Menu" onClick={menu}>
          <span/><span/><span/>
        </button>
        {universe ? (
          <div className="t-header__universe" role="tablist" aria-label="Univers">
            <a className={universe === "femme" ? "active" : ""} href="#femme" onClick={goUni("femme")}>Femme</a>
            <a className={universe === "homme" ? "active" : ""} href="#homme" onClick={goUni("homme")}>Homme</a>
          </div>
        ) : (
          <>
            <a className={current === "services" ? "active" : ""} href="#services" onClick={go("services")}>Prestations</a>
            <a className={current === "team" ? "active" : ""}     href="#team"     onClick={go("team")}>Équipe</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 === "contact" ? "active" : ""}  href="#contact"  onClick={go("contact")}>Contact</a>
          </>
        )}
      </div>
      <a className="t-header__brand" href="#home" onClick={go("home")} style={{ cursor: "pointer", color: "inherit", textDecoration: "none" }}>AUSIEGE</a>
      <div className="t-header__right">
        <button className="t-header__cta" onClick={book}>Réserver</button>
      </div>
    </header>
  );
};

const TFooter = () => (
  <footer className="t-footer">
    <div className="t-footer__top">
      <div>
        <div className="t-footer__brand">AUSIEGE</div>
        <div className="t-footer__tag">L'adresse coiffure pour révéler votre style.</div>
      </div>
      <div className="t-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="t-footer__col">
        <h4>Horaires</h4>
        <ul>
          <li>Mar / Sam : 9h / 19h</li>
          <li>Dimanche : 10h / 18h</li>
          <li>Lundi : fermé</li>
        </ul>
      </div>
    </div>
    <div className="t-footer__top--row2">
      <div className="t-footer__col">
        <h4>Contact</h4>
        <ul>
          <li>+33 3 65 65 94 38</li>
          <li>bonjour@ausiege.fr</li>
          <li style={{ marginTop: 12 }}>Instagram Femme · @ausiegepourelle</li>
          <li>Instagram Homme · @au_siege</li>
        </ul>
      </div>
      <div className="t-footer__col">
        <h4>Newsletter</h4>
        <p style={{ fontSize: 13, opacity: 0.7, lineHeight: 1.55, marginBottom: 12 }}>
          Une lettre douce, trois fois l'an.
        </p>
        <div className="t-footer__news">
          <input placeholder="Votre adresse email" />
          <button aria-label="S'inscrire"><Icon name="arrow-right" size={16}/></button>
        </div>
      </div>
    </div>
    <div className="t-footer__bottom">
      <div>© 2026 AUSIÈGE · 11 rue des Arbalétriers, 60000 Beauvais</div>
      <div className="t-footer__bottom-links">
        <a>Mentions légales</a>
        <a>Confidentialité</a>
        <a>Crédits</a>
      </div>
    </div>
  </footer>
);

Object.assign(window, { THeader, TFooter });