/* AUSIEGE · Shared chrome: Header + BookBar + Wordmark + Footer */

const Wordmark = ({ size = 16, color, className = "" }) => (
  <span className={`wordmark ${className}`} style={{ fontSize: size, color }}>AUSIEGE</span>
);

const MHeader = ({ onLight = false, solid = false, onMenu, onBook, onBrand, universe }) => {
  /* Read window handlers at click time so site-app's useEffect installation
     runs before we look them up. */
  const menu  = (e) => (onMenu  || window.ausiegeOpenMenu     || (()=>{}))(e);
  const book  = (e) => (onBook  || window.ausiegeOpenBooking  || (()=>{}))(e);
  const brand = (e) => {
    if (onBrand) return onBrand(e);
    if (window.ausiegeNavigate) return window.ausiegeNavigate("home");
  };
  return (
    <header className={`m-header ${solid ? "m-header--solid" : ""} ${onLight ? "m-header--on-light" : ""}`}>
      <button className="m-header__burger" aria-label="Menu" onClick={menu}>
        <span/><span/><span/>
      </button>
      <button className="m-header__brand" onClick={brand} style={{ background: "transparent", border: "none", padding: 0, color: "inherit", cursor: "pointer" }}>
        <Wordmark size={13}/>
        {universe && (
          <span style={{ marginLeft: 8, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", fontWeight: 500 }}>
            · {universe === "homme" ? "Homme" : "Femme"}
          </span>
        )}
      </button>
      <button className="m-header__cta" onClick={book}>Réserver</button>
    </header>
  );
};

const BookBar = ({ ctaLabel = "Réserver", onBook }) => {
  const book = (e) => (onBook || window.ausiegeOpenBooking || (()=>{}))(e);
  return (
    <div className="m-bookbar">
      <div className="m-bookbar__meta">
        <span className="m-bookbar__meta-l">Sur rendez-vous</span>
        <span className="m-bookbar__meta-v">Voir les disponibilités</span>
      </div>
      <button className="m-bookbar__cta" onClick={book}>
        {ctaLabel}
        <Icon name="arrow-right" size={14}/>
      </button>
    </div>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="footer__top">
      <Wordmark size={20}/>
      <div className="footer__tag">L'adresse coiffure pour révéler votre style.</div>
    </div>

    <div className="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="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="footer__col">
      <h4>Contact</h4>
      <ul>
        <li>+33 3 65 65 94 38</li>
        <li>bonjour@ausiege.fr</li>
      </ul>
    </div>

    <div className="footer__col">
      <h4>Liens</h4>
      <ul>
        <li>Prestations</li>
        <li>Tarifs</li>
        <li>Équipe</li>
        <li>Galerie</li>
        <li>Merch</li>
        <li>Produit</li>
        <li>Formation</li>
        <li>Contact</li>
      </ul>
    </div>

    <div className="footer__col">
      <h4>Newsletter</h4>
      <p style={{ marginBottom: 12, fontSize: 12, opacity: 0.7 }}>
        Une lettre douce, trois fois l'an. Inspirations, dates, nouveautés.
      </p>
      <div className="footer__news">
        <input placeholder="Votre adresse email" />
        <button aria-label="S'inscrire"><Icon name="arrow-right" size={16}/></button>
      </div>
    </div>

    <div className="footer__bottom">
      <div>© 2026 AUSIÈGE · 11 rue des Arbalétriers, 60000 Beauvais</div>
      <div className="footer__bottom-links">
        <a>Mentions légales</a>
        <a>Politique de confidentialité</a>
        <a>Crédits</a>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Wordmark, MHeader, BookBar, Footer });