/** Apartamento Los Endrinos — site sections + app shell. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "bosque",
  "rhythm": "editorial",
  "script": "off"
}/*EDITMODE-END*/;

/* ── Site header (fixed, scroll-aware, active section) ───── */
function SiteHeader({ activeId, onNavClick }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

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

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

  return (
    <header className={`site-header${scrolled ? " site-header--scrolled" : ""}${menuOpen ? " is-menu-open" : ""}`}>
      <div className="container site-header__inner">
        <a className="site-header__logo" href="#inicio" onClick={(e) => { onNavClick(e, "inicio"); setMenuOpen(false); }}>
          <img src={scrolled || menuOpen ? "assets/logo-oscuro.svg" : "assets/logo-claro.svg"} alt="Los Endrinos" />
          <div className="site-header__mark">
            <span className="site-header__name">Los Endrinos</span>
            <span className="site-header__sub">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 || `#${l.id}`}
              onClick={l.href ? undefined : (e) => { onNavClick(e, l.id); setMenuOpen(false); }}
              className={activeId === l.id ? "is-active" : ""}
            >
              {l.label}
            </a>
          ))}
          {menuOpen && (
            <Button href="Contacto.html" variant="primary" style={{ marginTop: "16px", width: "100%", justifyContent: "center" }}>
              Reservar estancia
            </Button>
          )}
        </nav>
        <div className="site-header__actions">
          <div className="site-header__desktop-btn">
            <Button href="Contacto.html" variant={scrolled ? "primary" : "ghost"}>
              Reservar estancia
            </Button>
          </div>
          <button className="site-header__toggle" onClick={() => setMenuOpen(!menuOpen)} aria-label="Alternar menú">
            <Icon name={menuOpen ? "x" : "menu"} size={28} color={scrolled || menuOpen ? "var(--ink-900)" : "#fff"} />
          </button>
        </div>
      </div>
    </header>
  );
}

/* ── Hero ────────────────────────────────────────────────── */
function Hero({ onPrimary, onSecondary }) {
  return (
    <section id="inicio" className="hero" data-screen-label="01 Inicio">
      <div className="hero__image" aria-hidden="true" />
      {/* silhouettes removed — real photo provides depth */}
      <div className="hero__photo-tag">Pontones al anochecer · Sierra de Segura</div>

      <div className="hero__content">
        <img className="hero__logo-mark" src="assets/logo-claro.svg" alt="Los Endrinos" />
        <div className="hero__eyebrow">
          <span>Sierra de Segura</span>
          <span className="dot" />
          <span>Pontones · Jaén</span>
        </div>
        <h1 className="hero__title">
          Una casa entre<br/>
          estrellas y <span className="italic">endrinos</span>.
        </h1>
        <p className="hero__location-strip" style={{ display: "none" }} aria-hidden="true" />
        <p className="hero__tagline">
          Apartamento vacacional en Pontón de Abajo, Pontones.
          Donde el silencio se mide en horas y las estrellas en miles.
        </p>
        <div className="hero__actions">
          <Button variant="primary" size="large" onClick={onPrimary}>
            Reservar estancia <Icon name="arrow-right" size={16} />
          </Button>
          <Button variant="ghost" size="large" onClick={onSecondary}>
            Conoce la casa
          </Button>
        </div>
        <div className="hero__meta">
          <span>Hasta 5 huéspedes</span>
          <span className="sep" />
          <span>Estancia mínima 2 noches en fines de semana</span>
          <span className="sep" />
          <span>Pontón de Abajo · Pontones</span>
        </div>
      </div>
    </section>
  );
}

/* ── Quote / pull ────────────────────────────────────────── */
function PullQuote() {
  return (
    <section className="section section--tight section--has-deco">
      <img src="assets/endrino-bg.svg" className="endrino-deco endrino-deco--quote" aria-hidden="true" alt="" />
      <div className="container">
        <div className="quote">
          <div className="quote__mark">“</div>
          <p className="quote__text">
            Aquí el día empieza con el canto de los gorriones
            y termina con la chimenea encendida. <span className="quote-emphasis accent-emphasis">Pocas cosas</span>, pero todas las que importan.
          </p>
          <div className="quote__attr">Mari y Ramón · Anfitriones</div>
        </div>
      </div>
    </section>
  );
}

/* ── Services ────────────────────────────────────────────── */
function ServicesSection() {
  const items = [
    {
      icon: "tree-pine",
      title: "Entorno tranquilo",
      desc: "Situado en Pontón de Abajo, Pontones, en una zona muy tranquila con buenas vistas. Las mozas del pueblo se juntaban aquí a coser porque daba el sol todo el día.",
      detail: "Terraza privada con vistas",
    },
    {
      icon: "footprints",
      title: "Senderismo desde la puerta",
      desc: "El entorno natural de la Sierra de Segura te espera al salir. Rutas de senderismo señalizadas desde Pontones para recorrer el Río Segura y sus pinares.",
      detail: "Mapas en la casa",
    },
    {
      icon: "utensils",
      title: "Cocina equipada",
      desc: "Salón con cocina integrada: microondas, tostador, cafetera, frigorífico y menaje completo. También dispone de lavadora y calefacción.",
      detail: "Todo lo necesario",
    },
    {
      icon: "bed",
      title: "Dormitorio y sofá cama",
      desc: "Un dormitorio con cama de matrimonio y cama individual, más sofá cama en el salón. Baño completo con toallas incluidas. Hasta 5 personas.",
      detail: "Baño completo con toallas",
    },
  ];
  return (
    <section id="servicios" className="section section--cream" data-screen-label="02 Servicios">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Lo que ofrecemos</Eyebrow>
          <h2 className="h-section">
            Pocas cosas, <span className="accent-emphasis">todas cuidadas</span>.
          </h2>
          <p className="lede">
            No prometemos lujo. Prometemos un apartamento tranquilo con todo lo necesario:
            cocina equipada, calefacción, toallas y una terraza con vistas.
          </p>
        </div>
        <div className="services-grid">
          {items.map((s, i) => (
            <article key={i} className="service">
              <div className="service__num">{String(i + 1).padStart(2, "0")} / 04</div>
              <div className="service__icon">
                <Icon name={s.icon} size={22} />
              </div>
              <h3 className="service__title">{s.title}</h3>
              <p className="service__desc">{s.desc}</p>
              <div className="service__detail">
                <strong>Detalle</strong>
                <span>{s.detail}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── History ─────────────────────────────────────────────── */
function HistorySection() {
  return (
    <section id="historia" className="section section--has-deco" data-screen-label="03 Historia">
      <img src="assets/endrino-bg.svg" className="endrino-deco endrino-deco--right" aria-hidden="true" alt="" />
      <div className="container">
        <div className="history-grid">
          <div className="history__image-stack">
            <div className="history__badge">
              <div className="num" style={{fontSize: 28}}>Los<br/>Endrinos</div>
              <div className="lbl">Pontón de<br/>Abajo</div>
            </div>
            <div className="history__img-main">
              <img
                src="uploads/imagen%20fachada.jpeg"
                alt="Fachada de piedra del Apartamento Los Endrinos en Pontones"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }}
              />
            </div>
            <div className="history__img-secondary">
              <img
                src="assets/endrino-branch.svg"
                alt="Rama de endrino · Prunus spinosa"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
            </div>
          </div>

          <div className="history__copy">
            <Eyebrow>Nuestra historia</Eyebrow>
            <h2 className="h-section">
              De donde cosían<br/>
              las mozas al <span className="accent-emphasis accent-emphasis--cool">sol</span>.
            </h2>
            <p className="lede-text">
              El apartamento está en Pontón de Abajo, una zona muy tranquila de Pontones
              donde antiguamente las mozas del pueblo se juntaban a coser
              y bordarse el ajuar para casarse — porque daba el sol todo el día.
            </p>
            <p>
              El nombre lo dice todo: Los Endrinos. En esa ladera había tantos endrinos
              que la gente del pueblo empezó a llamarla así, y el nombre se quedó.
              Hoy esos arbustos siguen ahí, con sus bayas oscuras en otoño y sus flores
              blancas en primavera.
            </p>
            <p>
              Decidimos abrir el apartamento para compartir ese rincón de sierra con
              quien lo sepa apreciar. Lo hemos equipado con todo lo necesario —
              cocina completa, calefacción, lavadora, baño con toallas —
              y lo hemos dejado tranquilo, que es lo que más vale aquí.
            </p>

            <div className="history__signature">
              <span className="sig">— Mari y Ramón</span>
              <div className="by">
                <strong>Los anfitriones</strong>
                Pontón de Abajo, Pontones
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Gallery ─────────────────────────────────────────────── */
function GallerySection() {
  // src = null → render gradient placeholder; src = string → real photo
  const items = [
    // ── Interior ──────────────────────────────────────────
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2008.53.53%20%282%29.jpeg",
      caption: "Cocina · chimenea de leña",
      span:    "gi--6x4",
      pos:     "center center",
    },
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2008.53.53%20%281%29.jpeg",
      caption: "Habitación doble · ropa de cama blanca",
      span:    "gi--3x4",
      pos:     "center top",
    },
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2008.53.56.jpeg",
      caption: "Baño · azulejos en relieve",
      span:    "gi--3x4",
      pos:     "center center",
    },
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2008.53.53.jpeg",
      caption: "Comedor · mesa para seis",
      span:    "gi--4x3",
      pos:     "center center",
    },
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2008.53.54%20%281%29.jpeg",
      caption: "Cocina equipada",
      span:    "gi--4x3",
      pos:     "center center",
    },
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2009.14.26.jpeg",
      caption: "Salón · acceso al jardín",
      span:    "gi--4x3",
      pos:     "center center",
    },
    // ── Exterior / entorno ────────────────────────────────
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2008.53.54.jpeg",
      caption: "Vistas desde el apartamento",
      span:    "gi--6x3",
      pos:     "center 60%",
    },
    {
      src:     "uploads/WhatsApp%20Image%202026-06-14%20at%2008.53.56%20%281%29.jpeg",
      caption: "Entorno inmediato · pinares y cielo abierto",
      span:    "gi--6x3",
      pos:     "center 40%",
    },
    {
      src:     "uploads/pontones%20fondo.jpg",
      caption: "Pontones al anochecer",
      span:    "gi--12x4",
      pos:     "center 40%",
    },
  ];

  return (
    <section id="galeria" className="section section--warm" data-screen-label="04 Galería">
      <div className="container">
        <div className="section-head section-head--center">
          <Eyebrow center>La casa y su sierra</Eyebrow>
          <h2 className="h-section">
            <span className="accent-emphasis">Mira</span> antes de venir.
          </h2>
          <p className="lede" style={{ margin: "0 auto" }}>
            El apartamento por dentro, las vistas desde la terraza, y el entorno
            que te espera al salir.
          </p>
        </div>
        <div className="gallery-grid">
          {items.map((g, i) => (
            <figure key={i} className={`gallery-item ${g.span}`}>
              {g.src ? (
                <img
                  src={g.src}
                  alt={g.caption}
                  loading="lazy"
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                    objectPosition: g.pos || "center center",
                    display: "block",
                  }}
                />
              ) : (
                <ImagePlaceholder
                  tone={g.tone}
                  overlayIcon={g.icon}
                  style={{ height: "100%", borderRadius: 0 }}
                />
              )}
              <figcaption className="img-ph__caption">
                {g.caption}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Contact ─────────────────────────────────────────────── */
function ContactSection() {
  return (
    <section id="contacto" className="section section--cream" data-screen-label="05 Contacto">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Cómo llegar y contacto</Eyebrow>
          <h2 className="h-section">
            ¿Cuándo te <span className="accent-emphasis">vienes</span>?
          </h2>
          <p className="lede">
            Llámanos y te contestamos el mismo día.
            Mari suele tener el teléfono cerca.
          </p>
        </div>

        <div className="contact-layout">
          <div className="map-card map-card--large" aria-label="Mapa de la ubicación">
            <iframe
              className="map-embed"
              title="Apartamento Los Endrinos en el mapa"
              src="https://www.google.com/maps?q=Pontones%2C+Ja%C3%A9n&z=14&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>

          <div className="contact-info contact-info--wide">
            <div className="contact-info__item">
              <div className="lbl"><Icon name="phone" size={13} /> Teléfono</div>
              <a className="val" href="tel:+34649987667">+34 649 98 76 67</a>
            </div>
            <div className="contact-info__item">
              <div className="lbl"><Icon name="clock" size={13} /> Horario</div>
              <span className="val">Lun – Dom · 9:00 – 21:00</span>
            </div>
            <div className="contact-info__item contact-info__item--full">
              <div className="lbl"><Icon name="map-pin" size={13} /> Dónde estamos</div>
              <span className="val">Calle Los Endrinos. Pontón de Abajo. Santiago-Pontones. C.P. 23291</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ──────────────────────────────────────────────── */
function SiteFooter({ onNavClick }) {
  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="#inicio"    onClick={(e) => onNavClick(e, "inicio")}>Inicio</a></li>
              <li><a href="#servicios" onClick={(e) => onNavClick(e, "servicios")}>Servicios</a></li>
              <li><a href="#historia"  onClick={(e) => onNavClick(e, "historia")}>Historia</a></li>
              <li><a href="#galeria"   onClick={(e) => onNavClick(e, "galeria")}>Galería</a></li>
            </ul>
          </div>

          <div className="site-footer__col">
            <h4>Visita</h4>
            <ul>
              <li><a href="#contacto" onClick={(e) => onNavClick(e, "contacto")}>Disponibilidad</a></li>
              <li><a href="#contacto" onClick={(e) => onNavClick(e, "contacto")}>Cómo llegar</a></li>
              <li><a href="#contacto" onClick={(e) => onNavClick(e, "contacto")}>Preguntas</a></li>
              <li><a href="#contacto" onClick={(e) => onNavClick(e, "contacto")}>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>
  );
}

/* ── App shell ───────────────────────────────────────────── */
function App() {
  const [activeId, setActiveId] = useState("inicio");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to the body via data-attributes (CSS handles the rest)
  useEffect(() => {
    document.body.setAttribute("data-mood", t.mood);
    document.body.setAttribute("data-rhythm", t.rhythm);
    document.body.setAttribute("data-script", t.script);
  }, [t.mood, t.rhythm, t.script]);

  // Scroll spy
  useEffect(() => {
    const ids = ["inicio", "servicios", "historia", "galeria", "contacto"];
    const handler = () => {
      const offset = window.innerHeight * 0.35;
      let current = "inicio";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const rect = el.getBoundingClientRect();
        if (rect.top - offset <= 0) current = id;
      }
      setActiveId(current);
    };
    window.addEventListener("scroll", handler, { passive: true });
    handler();
    return () => window.removeEventListener("scroll", handler);
  }, []);

  // Auto-scroll to section hash when navigating from inner pages (e.g. index.html#historia)
  useEffect(() => {
    const hash = window.location.hash.replace("#", "");
    if (hash) {
      const timer = setTimeout(() => {
        const el = document.getElementById(hash);
        if (el) {
          const y = el.getBoundingClientRect().top + window.scrollY - 72;
          window.scrollTo({ top: y, behavior: "smooth" });
        }
      }, 250);
      return () => clearTimeout(timer);
    }
  }, []);

  // Reveal animations
  useEffect(() => {
    const els = document.querySelectorAll('.section, .hero__content');
    els.forEach(el => el.classList.add('reveal'));

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-revealed');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.15 });

    els.forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  const onNavClick = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  return (
    <div className="app">
      <SiteHeader activeId={activeId} onNavClick={onNavClick} />
      <main>
        <Hero
          onPrimary={(e) => onNavClick(e, "contacto")}
          onSecondary={(e) => onNavClick(e, "historia")}
        />
        <PullQuote />
        <ServicesSection />
        <HistorySection />
        <GallerySection />
        <ContactSection />
      </main>
      <SiteFooter onNavClick={onNavClick} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Atmósfera" />
        <TweakRadio
          label="Mood"
          value={t.mood}
          options={[
            { value: "bosque", label: "Bosque" },
            { value: "olivar", label: "Olivar" },
            { value: "noche",  label: "Noche" },
          ]}
          onChange={(v) => setTweak("mood", v)}
        />
        <div style={{ font: "italic 11px/1.45 Newsreader, serif", color: "rgba(41,38,27,.55)", marginTop: -2 }}>
          {moodHint(t.mood)}
        </div>

        <TweakSection label="Ritmo" />
        <TweakRadio
          label="Densidad"
          value={t.rhythm}
          options={[
            { value: "pausado",   label: "Pausado" },
            { value: "editorial", label: "Editorial" },
            { value: "denso",     label: "Denso" },
          ]}
          onChange={(v) => setTweak("rhythm", v)}
        />
        <div style={{ font: "italic 11px/1.45 Newsreader, serif", color: "rgba(41,38,27,.55)", marginTop: -2 }}>
          {rhythmHint(t.rhythm)}
        </div>

        <TweakSection label="Voz tipográfica" />
        <TweakToggle
          label="Acento manuscrito"
          value={t.script === "on"}
          onChange={(v) => setTweak("script", v ? "on" : "off")}
        />
        <div style={{ font: "italic 11px/1.45 Newsreader, serif", color: "rgba(41,38,27,.55)", marginTop: -2 }}>
          Las palabras destacadas pasan de cursiva editorial a caligrafía Caveat.
        </div>
      </TweaksPanel>
    </div>
  );
}

function moodHint(m) {
  if (m === "olivar") return "Tonos olivo y terracota — un Jaén soleado, polvoriento.";
  if (m === "noche")  return "Sloe profundo y cielo estrellado — la sierra después del anochecer.";
  return "Verde endrino sobre crema — el mood por defecto.";
}
function rhythmHint(r) {
  if (r === "pausado") return "Mucho aire entre secciones — una revista de fin de semana.";
  if (r === "denso")   return "Más contenido por pantalla — útil en móvil o tablet.";
  return "El ritmo editorial original.";
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);