/** Shared inner-page header + footer for subpages (Servicios, Contacto).
    Loads after components.jsx which provides Icon, Button, Eyebrow. */

function PageHeader({ activePage }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const links = [
    { href: "index.html", label: "Inicio", id: "inicio" },
    { href: "Servicios.html", label: "Servicios", id: "servicios" },
    { href: "index.html#historia", label: "Historia", id: "historia" },
    { href: "index.html#galeria", label: "Galería", id: "galeria" },
    { href: "Contacto.html", label: "Contacto", id: "contacto" },
  ];

  return (
    <header className={`site-header site-header--scrolled${scrolled ? " site-header--solid" : ""}${menuOpen ? " is-menu-open" : ""}`}>
      <div className="container site-header__inner">
        <a className="site-header__logo" href="index.html">
          <img src="assets/logo-oscuro.svg" alt="Los Endrinos" />
          <div className="site-header__mark">
            <span className="site-header__name" style={{ color: "var(--endrino-green-900)" }}>Los Endrinos</span>
            <span className="site-header__sub" style={{ color: "var(--stone-500)" }}>Apartamento rural · Jaén</span>
          </div>
        </a>
        <nav className={`site-header__nav${menuOpen ? " is-open" : ""}`} aria-label="Navegación principal">
          {links.map((l) => (
            <a
              key={l.id}
              href={l.href}
              className={activePage === l.id ? "is-active" : ""}
              style={{ color: "var(--ink-900)", textShadow: "none" }}
            >
              {l.label}
            </a>
          ))}
          {menuOpen && (
            <a href="Contacto.html" className="btn btn--primary" style={{ marginTop: "12px", width: "100%", justifyContent: "center" }}>
              Reservar estancia
            </a>
          )}
        </nav>
        <div className="site-header__actions">
          <div className="site-header__desktop-btn">
            <a href="Contacto.html" className="btn btn--primary">
              Reservar estancia
            </a>
          </div>
          <button className="site-header__toggle" onClick={() => setMenuOpen(!menuOpen)} aria-label="Alternar menú">
            <Icon name={menuOpen ? "x" : "menu"} size={28} color="var(--ink-900)" />
          </button>
        </div>
      </div>
    </header>
  );
}

function PageFooter() {
  return (
    <footer className="site-footer" id="footer">
      <div className="container">
        <div className="site-footer__grid">
          <div className="site-footer__brand">
            <img src="assets/logo-claro.svg" alt="Los Endrinos" />
            <p>
              Un apartamento entre estrellas y endrinos,
              en Pontón de Abajo, Pontones. Te esperamos cuando quieras.
            </p>
          </div>

          <div className="site-footer__col">
            <h4>Explora</h4>
            <ul>
              <li><a href="index.html">Inicio</a></li>
              <li><a href="Servicios.html">Servicios</a></li>
              <li><a href="index.html#historia">Historia</a></li>
              <li><a href="index.html#galeria">Galería</a></li>
            </ul>
          </div>

          <div className="site-footer__col">
            <h4>Visita</h4>
            <ul>
              <li><a href="Contacto.html">Contacto</a></li>
              <li><a href="Contacto.html">Cómo llegar</a></li>
              <li><a href="Contacto.html">Reservar</a></li>
            </ul>
          </div>

          <div className="site-footer__col">
            <h4>Contacto</h4>
            <ul>
              <li>Mari y Ramón</li>
              <li><a href="tel:+34649987667">+34 649 98 76 67</a></li>
              <li className="site-footer__address">
                Calle Los Endrinos<br />
                Pontón de Abajo<br />
                Santiago-Pontones<br />
                C.P. 23291
              </li>
            </ul>
          </div>
        </div>

        <div className="site-footer__bottom">
          <span>© 2026 · Apartamento Los Endrinos</span>
          <div className="site-footer__legal">
            <a href="Privacidad.html">Política de privacidad</a>
            <a href="Cookies.html">Política de cookies</a>
          </div>
        </div>
      </div>
      <CookieConsent />
    </footer>
  );
}

/* ── Page hero (shorter, for inner pages) ────────────────── */
function PageHero({ eyebrow, title, subtitle, image }) {
  return (
    <section className="page-hero">
      <div className="page-hero__bg" style={image ? { backgroundImage: `linear-gradient(180deg, rgba(8,18,14,0.55) 0%, rgba(4,10,8,0.82) 100%), url('${image}')`, backgroundSize: "cover", backgroundPosition: "center 40%" } : {}} />
      <div className="page-hero__content container">
        <Eyebrow style={{ color: "rgba(245,239,228,0.8)" }}>{eyebrow}</Eyebrow>
        <h1 className="page-hero__title">{title}</h1>
        {subtitle && <p className="page-hero__sub">{subtitle}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { PageHeader, PageFooter, PageHero });