// Section components for Zubeltzu Torre
const { useState: useState2, useEffect: useEffect2, useRef: useRef2, useMemo: useMemo2 } = React;

// Google-style profile avatars for reviews
const REVIEW_AVATARS = ["#2d5a44", "#9c5a32", "#3a5566"];
function initialsOf(name) {
  return (name || "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").replace(/\./g, "").toUpperCase();
}

// Pone en negrita la palabra "Zumaia" (con sufijo, p. ej. "Zumaiatik" en
// euskera) dentro de un texto plano de i18n.
function boldZumaia(text) {
  const parts = String(text || "").split(/(\bZumaia\w*)/);
  return parts.map((p, i) => /^Zumaia/.test(p) ? <strong key={i} className="hero-lede-b">{p}</strong> : p);
}

/* ============================================================
   HERO
   ============================================================ */
function Hero({ t, variant, mist, goTo, onBook }) {
  const [idx, setIdx] = useState2(0);
  const imgs = window.SITE.heroImages;

  useEffect2(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % imgs.length), 6000);
    return () => clearInterval(id);
  }, []);
  useEffect2(() => {imgs.forEach((src) => {const i = new Image();i.src = src;});}, []);

  return (
    <section id="top" className="hero" data-variant={variant} data-screen-label="01 Hero">
      <div className="hero-stage">
        {imgs.map((src, i) =>
        <div key={src}
        className={"hero-img" + (i === idx ? " is-active" : "")}
        style={{ backgroundImage: `url(${src})` }} />
        )}
        <div className="hero-shade"></div>
        {mist && <Mist density={0.5} />}
        <div className="hero-grain"></div>
      </div>

      <div className="hero-content">
        <div className="hero-meta">
          <div className="stack">
            <div>{t.hero.eyebrow}</div>
          </div>
          <div className="stack" style={{ textAlign: "right" }}>
            <div>{t.hero.since}</div>
            <div style={{ opacity: .6 }}>{window.SITE.contact.googleScore}/5 · Google</div>
          </div>
        </div>

        <h1 className="hero-title">
          {t.hero.title_a}<br /><em>{t.hero.title_em}</em>
        </h1>

        <div className="hero-foot">
          <div>
            <p className="hero-lede">{boldZumaia(t.hero.lede)}</p>
            <div className="hero-actions">
              <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>
                {t.check_avail}<span className="arrow">→</span>
              </button>
              <button className="btn btn-secondary" data-cursor="hover" onClick={() => document.getElementById("lodging")?.scrollIntoView({ behavior: "smooth" })}>
                {t.cta.rooms}
              </button>
            </div>

            <div className="hero-trust">
              <div className="hero-trust-item">
                <span className="trust-star">★</span>
                <span><strong>{window.SITE.contact.googleScore}</strong> {t.hero.trust1}</span>
              </div>
              <span className="hero-trust-sep" />
              <div className="hero-trust-item"><strong>16</strong> {t.hero.trust2}</div>
              <span className="hero-trust-sep" />
              <div className="hero-trust-item">{t.hero.trust3}</div>
            </div>
          </div>
          <div className="hero-dots">
            {imgs.map((_, i) =>
            <button key={i} className={i === idx ? "active" : ""} onClick={() => setIdx(i)}
            data-cursor="hover" aria-label={`slide ${i + 1}`} />
            )}
          </div>
        </div>
      </div>

      <div className="scroll-hint">{t.hero.scroll}</div>
    </section>);

}

/* ============================================================
   TICKER — small marquee under hero
   ============================================================ */
function Ticker({ t }) {
  const items = [...t.ticker, ...t.ticker];
  return (
    <div className="ticker">
      <div className="ticker-inner">
        {items.map((s, i) =>
        <span key={i} className="ticker-item">{s}</span>
        )}
      </div>
    </div>);

}

/* ============================================================
   INTRO — "El Caserío" home block
   ============================================================ */
function Intro({ t, goTo }) {
  return (
    <section className="intro">
      <div className="shell intro-grid">
        <div>
          <div className="eyebrow">{t.intro.eyebrow}</div>
          <h2 className="intro-h2">{t.intro.h2}</h2>
          <p className="intro-body">{t.intro.body}</p>

          <div className="intro-feats">
            {[t.intro.feat1, t.intro.feat2, t.intro.feat3].map((f, i) =>
            <div className="intro-feat" key={i}>
                <span className="intro-feat-dot" />
                <span className="intro-feat-label">{f.split("\n").map((l, j) => <React.Fragment key={j}>{l}{j === 0 && <br />}</React.Fragment>)}</span>
              </div>
            )}
          </div>
        </div>
        <div className="intro-imgs">
          <img className="intro-img-main" src={window.SITE.aboutImages[0]} alt="Exterior del caserío" />
          <img className="intro-img-sec" src={window.SITE.aboutImages[1]} alt="Interior del caserío" />
          <div className="intro-badge">Desde 2008 · Itziar, Deba</div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HOST — Ainara, la anfitriona (va justo debajo de "El Caserío")
   ============================================================ */
function HostSection({ t }) {
  const h = t.host;
  if (!h) return null;
  return (
    <section className="host">
      <div className="shell host-grid">
        <div className="host-imgs">
          <img className="host-img-main" src={window.SITE.hostImages[0]} alt="Vacas de leche en los prados del caserío" />
          <img className="host-img-sec" src={window.SITE.hostImages[1]} alt="El establo del caserío" />
          <div className="host-badge">{h.badge}</div>
        </div>
        <div className="host-text">
          <div className="eyebrow">{h.eyebrow}</div>
          <h2 className="host-h2">{h.h2_a} <em>{h.h2_em}</em></h2>
          <p className="host-body">{h.body1}</p>
          <p className="host-body">{h.body2}</p>
          <div className="host-facts">
            {h.facts.map((f, i) =>
            <div className="host-fact" key={i}>
                <span className="host-fact-dot" />
                <span>{f}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HOME ALOJAMIENTO teaser — 3 cards
   ============================================================ */
function LodgingTeaser({ t, goTo, onBook }) {
  return (
    <section className="lodging-teaser">
      <div className="shell">
        <div className="lt-head">
          <div>
            <div className="eyebrow">{t.aloj.eyebrow}</div>
            <h2 className="lt-title">{t.aloj.head_a}<br /><em>{t.aloj.head_em}</em></h2>
          </div>
          <p className="lt-sub">{t.aloj.head_sub}</p>
        </div>
        <div className="lt-cards">
          {t.aloj.cards.map((c, i) =>
          <Tilt key={i} max={4}>
              <div className="lt-card tilt-inner" onClick={() => document.getElementById("lodging")?.scrollIntoView({ behavior: "smooth" })} data-cursor="hover">
                <img src={window.SITE.lodgingImages[i]} alt={c.title} />
                <div className="lt-card-tint" />
                <div className="lt-card-body">
                  <div className="lt-card-num">{c.num}</div>
                  <div className="lt-card-title">{c.title}</div>
                </div>
              </div>
            </Tilt>
          )}
        </div>
        <div className="cta-group" style={{ justifyContent: "center", marginTop: 48 }}>
          <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>
            {t.check_avail}<span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>);

}

/* ============================================================
   ALOJAMIENTO page
   ============================================================ */
/* Iconos de los servicios (mismo orden que t.aloj.amenities en i18n):
   0 habitaciones · 1 apartamentos · 2 personas · 3 desayuno · 4 wifi · 5 jardín · 6 perros */
const ALOJ_AMENITY_ICONS = [
  /* cama */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6"/><path d="M3 18h18"/><path d="M5 10V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M7 10v-1.5A1.5 1.5 0 0 1 8.5 7h2A1.5 1.5 0 0 1 12 8.5V10"/></svg>,
  /* edificio / apartamento */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 21V5l8-3 8 3v16"/><path d="M2 21h20"/><path d="M9 9h.01M15 9h.01M9 13h.01M15 13h.01M12 21v-4"/></svg>,
  /* personas */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.4"/><path d="M16 15.2c2.6.3 5 2 5 4.8"/></svg>,
  /* desayuno (taza) */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 9h12v5a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5V9z"/><path d="M16 10h2.5a2.5 2.5 0 0 1 0 5H16"/><path d="M7 5.5c0-1 .8-1 .8-2M11 5.5c0-1 .8-1 .8-2"/></svg>,
  /* wifi */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 9.5C8 4.5 16 4.5 21 9.5"/><path d="M6.5 13C10 9.8 14 9.8 17.5 13"/><path d="M9.8 16.2c1.4-1.2 3-1.2 4.4 0"/><circle cx="12" cy="19" r="0.8" fill="currentColor"/></svg>,
  /* jardín (hoja) */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 19C5 9 12 4 20 4c0 9-5 15-13 15"/><path d="M4 20c3-4 7-7 11-9"/></svg>,
  /* perro (huella) */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><ellipse cx="7" cy="8.5" rx="1.7" ry="2.2"/><ellipse cx="17" cy="8.5" rx="1.7" ry="2.2"/><ellipse cx="11" cy="5.8" rx="1.6" ry="2.1"/><ellipse cx="13.5" cy="5.8" rx="0" ry="0"/><path d="M12 12c-2.8 0-5 2.2-5 4.4 0 1.5 1.2 2.6 2.7 2.6 1 0 1.6-.5 2.3-.5s1.3.5 2.3.5c1.5 0 2.7-1.1 2.7-2.6 0-2.2-2.2-4.4-5-4.4z"/></svg>
];

/* Categoría de la galería que abre cada tarjeta (mismo orden que t.aloj.cards):
   0 habitaciones · 1 apartamentos · 2 casa completa → estancias comunes */
const ALOJ_CARD_FILTERS = ["habitaciones", "apartamentos", "estancias"];

function Lodging({ t, goTo, onBook }) {
  return (
    <section id="lodging" className="aloj-page" data-screen-label="02 Alojamiento">
      <div className="shell aloj-hero">
        <div>
          <div className="eyebrow">{t.aloj.eyebrow}</div>
          <h1 className="aloj-h1">{t.aloj.page_title_a}<br /><em>{t.aloj.page_title_em}</em></h1>
          <p className="aloj-intro">{t.aloj.page_intro}</p>
          <div className="cta-group" style={{ marginTop: 32 }}>
            <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>
              {t.check_avail}<span className="arrow">→</span>
            </button>
          </div>
        </div>
        <div className="aloj-hero-img overlay">
          <img src={window.SITE.lodgingImages[0]} alt="Interior de Zubeltzu Torre" />
        </div>
      </div>

      <div className="aloj-cards-grid">
        {t.aloj.cards.map((c, i) =>
        <article
          key={i}
          className="aloj-card is-clickable"
          data-cursor="hover"
          role="button"
          tabIndex={0}
          onClick={() => goTo("galeria", ALOJ_CARD_FILTERS[i])}
          onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); goTo("galeria", ALOJ_CARD_FILTERS[i]); } }}>
            <div className="aloj-card-img overlay">
              <img src={window.SITE.lodgingImages[i]} alt={c.title} />
            </div>
            <div className="aloj-card-body">
              <div className="aloj-card-num">{c.num}</div>
              <h3 className="aloj-card-title">{c.title}</h3>
              <p className="aloj-card-text">{c.body}</p>
              <span className="aloj-card-link">{t.gallery.see_photos || "Ver fotos"} <span className="arrow">→</span></span>
            </div>
          </article>
        )}
      </div>

      <div className="aloj-body">
        <p className="aloj-body-text">{t.aloj.body_text}</p>
        <div className="aloj-amenities">
          {t.aloj.amenities.map((a, i) =>
          <span key={i} className="aloj-amenity">
            <span className="aloj-amenity-ic" aria-hidden="true">{ALOJ_AMENITY_ICONS[i % ALOJ_AMENITY_ICONS.length]}</span>
            {a}
          </span>
          )}
        </div>
        <div className="cta-group" style={{ justifyContent: "center", marginTop: 48 }}>
          <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>
            {t.check_avail}<span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>);

}

/* ============================================================
   ENTORNO page
   ============================================================ */
/* Kilómetros desde el caserío para cada actividad de t.env.acts
   (mismo orden en los 4 idiomas) */
const ENV_ACT_KMS = [6, 6, 2, 6, 6, 6, 6, 8, 10, 4, 6, 6, 5];

function Environment({ t, goTo, onBook }) {
  // Búsqueda de experiencias en los alrededores del caserío (Itziar · Deba · Gipuzkoa)
  const PLACE_QUERIES = [
  "surf Zarautz escuela",
  "Flysch Zumaia geoparque",
  "asadores sidrerías Getaria Deba",
  "senderismo Izarraitz rutas",
  "pueblos marineros Getaria Mutriku Deba",
  "San Sebastián Bilbao Guggenheim"];

  const MAPS_LINKS = [
  "https://www.google.com/maps/search/?api=1&query=Zarautz+Gipuzkoa",
  "https://www.google.com/maps/search/?api=1&query=Flysch+Itzurun+Zumaia+Geoparque+UNESCO",
  "https://www.google.com/maps/search/?api=1&query=Getaria+Gipuzkoa+restaurantes",
  "https://www.google.com/maps/search/?api=1&query=Monte+Izarraitz+senderismo+Gipuzkoa",
  "https://www.google.com/maps/search/?api=1&query=Deba+pueblo+Gipuzkoa",
  "https://www.google.com/maps/search/?api=1&query=San+Sebastian+Donostia+Gipuzkoa"];

  const ACT_QUERIES = [
  "surf escuela playa",
  "senderismo rutas",
  "parapente vuelo",
  "alquiler bicicletas BTT",
  "hípica centro ecuestre",
  "sidrería restaurante",
  "Camino de Santiago del Norte",
  "pesca río parque natural"];

  const searchNearby = (q) => {
    window.open(
      "https://www.google.com/maps/search/" + encodeURIComponent(q + " cerca de Itziar, Deba, Gipuzkoa"),
      "_blank", "noopener"
    );
  };
  return (
    <section className="env-page" data-screen-label="03 Entorno">
      <div className="env-hero overlay">
        <img src={window.SITE.envImages.hero} alt="Costa vasca" loading="eager" fetchpriority="high" decoding="async" />
        <div className="env-hero-content shell">
          <div className="eyebrow on-photo">{t.env.eyebrow}</div>
          <h1 className="env-h1">{t.env.title_a}<br /><em>{t.env.title_em}</em></h1>
          <p className="env-hero-sub">{t.env.hero_sub}</p>
        </div>
      </div>

      <div className="env-distances">
        <div className="shell env-distances-inner">
          {t.env.dist.map(([n, l], i) =>
          <React.Fragment key={i}>
              <div className="env-distance">
                <span className="env-distance-n">{n}</span>
                <span className="env-distance-l">{l}</span>
              </div>
              {i < t.env.dist.length - 1 && <span className="env-distance-sep" />}
            </React.Fragment>
          )}
        </div>
      </div>

      <EnvMap t={t} />

      {t.env.bidegorri && <BidegorriSection b={t.env.bidegorri} />}

      <div className="env-natura shell">
        <div>
          <div className="eyebrow">{t.env.natura_label}</div>
          <h2 className="env-natura-h2">{t.env.natura_h2_a}<br /><em>{t.env.natura_h2_em}</em></h2>
          <p className="env-natura-p">{t.env.natura_p1}</p>
          <p className="env-natura-p">{t.env.natura_p2}</p>
          <ul className="env-list">
            {t.env.natura_list.map((s, i) => <li key={i}><span className="check">✓</span>{s}</li>)}
          </ul>
        </div>
        <div className="env-natura-imgs">
          <ParallaxY speed={0.15}>
            <img className="env-img-main" src={window.SITE.envImages.main} alt="Caserío" />
          </ParallaxY>
          <ParallaxY speed={-0.1}>
            <img className="env-img-sec" src={window.SITE.envImages.sec} alt="Costa vasca" />
          </ParallaxY>
        </div>
      </div>

      <div className="env-acts-list shell">
        <div className="env-acts-list-head">
          <div className="eyebrow">{t.env.acts_eyebrow}</div>
          <h2 className="env-acts-list-h2">{t.env.acts_h3_a} <em>{t.env.acts_h3_em}</em></h2>
          <p className="env-acts-list-lede">{t.env.acts_lede}</p>
        </div>
        <ul className="env-acts-list-grid">
          {t.env.acts.map((a, i) => (
            <li key={i}>
              <button className="env-acts-list-row" data-cursor="hover"
                onClick={() => searchNearby(a.q || a.title)}>
                <span className="env-acts-list-ic" aria-hidden="true">{ENV_ACT_ICONS[i % ENV_ACT_ICONS.length]}</span>
                <span className="env-acts-list-name">{a.title}</span>
                <span className="env-acts-list-km">{ENV_ACT_KMS[i] || "—"} km</span>
                <span className="env-acts-list-arrow" aria-hidden="true">→</span>
              </button>
            </li>
          ))}
        </ul>
      </div>

      {t.env.farm && (
        <div className="env-farm shell">
          <div className="env-farm-head">
            <div className="eyebrow">{t.env.farm.eyebrow}</div>
            <h2 className="env-farm-h2">{t.env.farm.title_a} <em>{t.env.farm.title_em}</em></h2>
            <p className="env-farm-lede">{t.env.farm.lede}</p>
          </div>
          <div className="env-farm-cats">
            {t.env.farm.cats.map((c, i) => (
              <div key={i} className="env-farm-cat">
                <h3 className="env-farm-cat-title">{c.title}</h3>
                <ul className="env-farm-cat-list">
                  {c.items.map((it, j) => (
                    <li key={j}>
                      <button className="env-farm-item" data-cursor="hover" onClick={() => goTo("galeria")}>
                        <span className="env-farm-dot" aria-hidden="true" />
                        {it}
                        <span className="env-farm-item-arrow" aria-hidden="true">→</span>
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="env-farm-cta">
            <button className="btn btn-secondary" data-cursor="hover" onClick={() => goTo("galeria")}>
              {t.env.farm.see_in_gallery}<span className="arrow">→</span>
            </button>
          </div>
        </div>
      )}
    </section>);

}

/* ============================================================
   ENV CTA — closing call-to-action (rendered after the page footer)
   ============================================================ */
function EnvCTA({ t, onBook }) {
  return (
    <div className="env-cta">
      <div className="shell env-cta-inner">
        <div>
          <div className="eyebrow">{t.env.cta_eyebrow}</div>
          <h2 className="env-cta-h2">{t.env.cta_h2_a}<br /><em>{t.env.cta_h2_em}</em></h2>
        </div>
        <div className="cta-group">
          <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>{t.book_now}<span className="arrow">→</span></button>
        </div>
      </div>
    </div>);

}

/* ============================================================
   BIDEGORRI — carril bici Zubeltzu → Zumaia (7 km)
   ============================================================ */
/* Ciclista visto desde arriba (cenital), orientado hacia la derecha.
   Para los que van hacia la izquierda se voltea con scaleX(-1) en CSS. */
function BidegorriRiderFig() {
  return (
    <svg className="bg-rider-fig" width="48" height="22" viewBox="-24 -11 48 22" fill="none" aria-hidden="true">
      {/* ruedas (vistas en planta: elipses finas en el eje de avance) */}
      <ellipse cx="-12" cy="0" rx="7" ry="1.8" stroke="#fff" strokeWidth="0.85" />
      <ellipse cx="12" cy="0" rx="7" ry="1.8" stroke="#fff" strokeWidth="0.85" />
      {/* cuadro */}
      <line x1="-12" y1="0" x2="12" y2="0" stroke="#fff" strokeWidth="0.8" />
      {/* manillar */}
      <line x1="9.5" y1="-6" x2="9.5" y2="6" stroke="#fff" strokeWidth="1.05" strokeLinecap="round" />
      {/* brazos hacia el manillar */}
      <line x1="-1.5" y1="-2.4" x2="9.5" y2="-5.2" stroke="#fff" strokeWidth="0.8" strokeLinecap="round" />
      <line x1="-1.5" y1="2.4" x2="9.5" y2="5.2" stroke="#fff" strokeWidth="0.8" strokeLinecap="round" />
      {/* piernas hacia atrás */}
      <line x1="-1.5" y1="-2.1" x2="-10" y2="-5.4" stroke="#fff" strokeWidth="0.8" strokeLinecap="round" />
      <line x1="-1.5" y1="2.1" x2="-10" y2="5.4" stroke="#fff" strokeWidth="0.8" strokeLinecap="round" />
      {/* cabeza/torso */}
      <circle cx="-1.5" cy="0" r="3.2" fill="#fff" />
    </svg>
  );
}

function BidegorriSection({ b }) {
  const routeUrl = "https://www.google.com/maps/dir/?api=1&origin=43.26638,-2.30071&destination=43.2937,-2.2549&travelmode=bicycling";
  // Ciclistas que cruzan el carril de vez en cuando (carril, sentido, velocidad y retardo distintos)
  const riders = [
    { dir: "r", top: "20%", dur: "16s", delay: "0s" },
    { dir: "l", top: "80%", dur: "18s", delay: "2.5s" },
    { dir: "r", top: "78%", dur: "15s", delay: "5s" },
    { dir: "l", top: "22%", dur: "19s", delay: "7.5s" },
    { dir: "r", top: "79%", dur: "17s", delay: "10s" },
    { dir: "l", top: "21%", dur: "16s", delay: "12.5s" }
  ];
  return (
    <div className="env-bidegorri">
      {/* El propio carril: línea central discontinua + ciclistas cenitales */}
      <div className="env-bidegorri-line" aria-hidden="true" />
      <div className="env-bidegorri-riders" aria-hidden="true">
        {riders.map((r, i) => (
          <div key={i} className={"bg-rider bg-rider--" + r.dir}
            style={{ top: r.top, animationDuration: r.dur, animationDelay: r.delay }}>
            <BidegorriRiderFig />
          </div>
        ))}
      </div>
      {/* Oculta los ciclistas en la zona derecha (a la altura del indicador) */}
      <div className="env-bidegorri-rmask" aria-hidden="true" />

      {/* Texto, pintado sobre el camino */}
      <div className="env-bidegorri-inner shell">
        <div className="env-bidegorri-text">
          <div className="env-bidegorri-eyebrow">
            <span className="env-bidegorri-pill" aria-hidden="true" />
            {b.eyebrow}
          </div>
          <h2 className="env-bidegorri-h2">
            {b.title_a}<br /><em>{b.title_em}</em>
          </h2>
          <p className="env-bidegorri-body">{b.body}</p>
          <a className="env-bidegorri-cta" href={routeUrl} target="_blank" rel="noopener" data-cursor="hover">
            {b.cta}<span aria-hidden="true"> →</span>
          </a>
        </div>

        {/* Indicador grande a la derecha, como una señal del carril */}
        <div className="env-bidegorri-aside">
          <span className="env-bidegorri-km">{b.km}<sup>{b.km_label}</sup></span>
          <span className="env-bidegorri-route">{b.route}</span>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   ENV MAP — interactive real map (Leaflet)
   ============================================================ */
function EnvMap({ t }) {
  const gimg = (q) => "https://www.google.com/search?tbm=isch&q=" + encodeURIComponent(q);
  const points = [
  { id: "here", num: "00", title: "Zubeltzu Torre", dist: "Itziar · Deba", lat: 43.26638, lng: -2.30071, img: window.SITE.envImages.main, here: true, photos: gimg("Agroturismo Zubeltzu Torre Itziar caserío") },
  { id: "izarraitz", num: "01", title: "Izarraitz", dist: "5 min", lat: 43.2240, lng: -2.2940, img: window.SITE.envGridImages[1], photos: gimg("Monte Izarraitz Gipuzkoa") },
  { id: "deba", num: "02", title: "Deba · Puerto", dist: "20 min", lat: 43.2920, lng: -2.3531, img: window.SITE.envGridImages[0], photos: gimg("Deba Gipuzkoa puerto playa") },
  { id: "zumaia", num: "03", title: "Zumaia · Flysch", dist: "5 min", lat: 43.2937, lng: -2.2549, img: window.SITE.envGridImages[3], photos: gimg("Zumaia Flysch Itzurun acantilados") },
  { id: "zarautz", num: "04", title: "Zarautz · Surf", dist: "20 min", lat: 43.2855, lng: -2.1693, img: window.SITE.envGridImages[4], photos: gimg("Playa de Zarautz surf") },
  { id: "donosti", num: "05", title: "Donostia", dist: "20 min", lat: 43.3183, lng: -1.9812, img: window.SITE.envGridImages[5], photos: gimg("Donostia San Sebastián La Concha") },
  { id: "bilbao", num: "06", title: "Bilbao · Guggenheim", dist: "50 min", lat: 43.2680, lng: -2.9350, img: window.SITE.envGridImages[2], photos: gimg("Bilbao Guggenheim") }];


  const [active, setActive] = useState2("here");
  const mapEl = useRef2(null);
  const mapRef = useRef2(null);
  const markersRef = useRef2({});
  const here = useMemo2(() => points.find((p) => p.id === active), [active]);

  // initialize map once Leaflet is available
  useEffect2(() => {
    if (!mapEl.current || mapRef.current || !window.L) return;
    const L = window.L;
    const map = L.map(mapEl.current, {
      zoomControl: false,
      attributionControl: false,
      scrollWheelZoom: false,
      dragging: true,
      doubleClickZoom: true
    }).setView([43.2664, -2.3007], 11);

    L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
      maxZoom: 18,
      attribution: "Esri"
    }).addTo(map);
    // Etiquetas de lugares. Antes eran las de Carto (dark_only_labels), que
    // ahora exigen API key y pintan "API KEY REQUIRED" sobre el mapa; las de
    // Esri son del mismo proveedor que el satélite y no piden clave.
    L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}", {
      maxZoom: 18,
      opacity: 0.95
    }).addTo(map);

    // markers
    points.forEach((p) => {
      const isHere = !!p.here;
      const html = `<span class="env-marker-dot ${isHere ? 'is-here' : ''}"></span><span class="env-marker-lbl">${p.title}</span>`;
      const icon = L.divIcon({
        className: "env-marker " + (isHere ? "is-here" : ""),
        html,
        iconSize: [14, 14],
        iconAnchor: [7, 7]
      });
      const m = L.marker([p.lat, p.lng], { icon, riseOnHover: true }).addTo(map);
      m.on("click", () => setActive(p.id));
      m.on("mouseover", () => setActive(p.id));
      markersRef.current[p.id] = m;
    });

    mapRef.current = map;

    // ensure tiles load correctly after layout settles
    setTimeout(() => map.invalidateSize(), 200);

    return () => {map.remove();mapRef.current = null;markersRef.current = {};};
  }, []);

  // fly to active marker when changed
  useEffect2(() => {
    const map = mapRef.current;
    if (!map) return;
    const p = points.find((x) => x.id === active);
    if (!p) return;
    map.flyTo([p.lat, p.lng], p.id === "here" ? 12 : 11, { duration: 0.9 });
    // update marker classes
    Object.entries(markersRef.current).forEach(([id, m]) => {
      const el = m.getElement?.();
      if (el) el.classList.toggle("is-active", id === active);
    });
  }, [active]);

  return (
    <div className="env-map-section">
      <div className="env-map-real" ref={mapEl} />
      <div className="env-map-overlay" />

      <aside className="env-map-card">
        <div className="env-map-photo">
          {points.map((p) =>
          <img key={p.id} src={p.img} alt={p.title}
          className={p.id === active ? "is-active" : ""} />
          )}
          <figcaption>
            <span className="eyebrow on-photo" style={{ fontSize: 10 }}>{here?.dist}</span>
            <strong>{here?.title}</strong>
            {here?.photos &&
            <a className="env-map-photos" href={here.photos} target="_blank" rel="noopener" data-cursor="hover">
                <span className="env-map-photos-ic" aria-hidden="true">▣</span>{t.env.see_photos}<span aria-hidden="true"> →</span>
              </a>
            }
            {/* Ruta en Google Maps: desde la casa (Zubeltzu Torre) hasta el lugar activo.
                Si el lugar activo es la propia casa, la ruta parte de tu ubicación. */}
            <a className="env-map-directions"
               href={here?.here
                 ? `https://www.google.com/maps/dir/?api=1&destination=${here?.lat},${here?.lng}`
                 : `https://www.google.com/maps/dir/?api=1&origin=43.26638,-2.30071&destination=${here?.lat},${here?.lng}`}
               target="_blank" rel="noopener" data-cursor="hover">
              <span className="env-map-photos-ic" aria-hidden="true">⊙</span>{t.env.how_to_get}<span aria-hidden="true"> →</span>
            </a>
          </figcaption>
        </div>
        <div className="env-map-chapters">
          {points.map((p) =>
          <button key={p.id}
          className={"env-map-chapter" + (p.id === active ? " is-active" : "") + (p.here ? " is-here" : "")}
          onMouseEnter={() => setActive(p.id)}
          onClick={() => setActive(p.id)}
          data-cursor="hover">
              <span className="num">{p.num}</span>
              <span className="title">{p.title}</span>
              <span className="dist">{p.dist}</span>
            </button>
          )}
        </div>
      </aside>
    </div>);

}

/* ============================================================
   ACTIVIDADES page
   ============================================================ */
const ACT_ICONS = [
  /* 0 surf */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 28 C10 22 16 32 22 24 C28 16 34 26 38 20"/><path d="M8 34 C13 28 18 36 23 30 C28 24 33 31 37 26"/><path d="M20 12 L26 6 M26 6 L20 6 M26 6 L26 12"/></svg>,
  /* 1 senderismo */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 32 L14 14 L20 22 L28 8 L36 32"/><path d="M14 14 L20 22"/><circle cx="30" cy="10" r="2.5"/><line x1="30" y1="13" x2="30" y2="22"/><line x1="26" y1="17" x2="34" y2="17"/><line x1="30" y1="22" x2="26" y2="30"/><line x1="30" y1="22" x2="33" y2="30"/></svg>,
  /* 2 parapente */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 18 Q20 6 36 18"/><path d="M10 18 L20 30 L30 18"/><line x1="20" y1="30" x2="20" y2="24"/><line x1="14" y1="20" x2="20" y2="30"/><line x1="26" y1="20" x2="20" y2="30"/></svg>,
  /* 3 bicicleta */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="10" cy="28" r="7"/><circle cx="30" cy="28" r="7"/><path d="M10 28 L18 14 L30 14 M22 14 L30 28 M18 14 L24 28"/><line x1="27" y1="14" x2="33" y2="14"/></svg>,
  /* 4 hípica */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M28 8 C30 6 34 8 33 12 C32 15 28 14 26 16 C24 18 24 22 22 26 L18 26 C17 22 15 18 12 16 L8 16 L8 22 L12 22"/><path d="M22 26 L22 34 M18 26 L18 34"/><path d="M26 16 C28 18 28 22 26 24 L20 24"/><circle cx="30" cy="9" r="2"/></svg>,
  /* 5 gastronomía */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 8 L12 18 Q12 22 16 22 Q20 22 20 18 L20 8"/><line x1="16" y1="8" x2="16" y2="22"/><path d="M26 8 C32 8 32 22 26 22 L26 8"/><line x1="26" y1="22" x2="26" y2="34"/><line x1="12" y1="22" x2="12" y2="34"/><line x1="8" y1="34" x2="32" y2="34"/></svg>,
  /* 6 camino de santiago */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="20" cy="8" r="3"/><line x1="20" y1="11" x2="20" y2="22"/><line x1="14" y1="16" x2="26" y2="16"/><line x1="20" y1="22" x2="14" y2="34"/><line x1="20" y1="22" x2="24" y2="34"/><path d="M28 10 L34 14 L28 18 M28 14 L34 14"/></svg>,
  /* 7 pesca */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 20 C10 14 20 12 28 16 L36 10 M36 10 L30 10 M36 10 L36 16"/><path d="M28 16 C32 20 32 26 28 28 C20 32 10 28 8 22 C6 18 8 14 14 14"/><circle cx="24" cy="22" r="2"/><path d="M6 32 Q10 28 14 30 Q18 32 22 30 Q26 28 30 30 Q34 32 36 30"/></svg>
];

const ENV_ACT_ICONS = [
  /* 0 paseos a caballo */ ACT_ICONS[4],
  /* 1 kayak / piraguas */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="8" y1="32" x2="32" y2="8"/><ellipse cx="9" cy="31" rx="5" ry="2.5" transform="rotate(-45 9 31)"/><ellipse cx="31" cy="9" rx="5" ry="2.5" transform="rotate(-45 31 9)"/><path d="M5 36 Q12 30 20 33 Q28 36 35 30"/></svg>,
  /* 2 camino de santiago */ ACT_ICONS[6],
  /* 3 playa */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="20" cy="13" r="5"/><line x1="20" y1="5" x2="20" y2="8"/><line x1="11" y1="13" x2="8" y2="13"/><line x1="29" y1="13" x2="32" y2="13"/><line x1="13.5" y1="7.5" x2="12" y2="6"/><line x1="26.5" y1="7.5" x2="28" y2="6"/><path d="M5 29 Q10 25 15 27 Q20 29 25 26 Q30 23 35 25"/><line x1="4" y1="33" x2="36" y2="33"/></svg>,
  /* 4 flysch */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 34 L6 12 L20 6 L34 12 L34 34"/><path d="M6 20 Q20 16 34 20"/><path d="M6 27 Q20 23 34 27"/><line x1="6" y1="34" x2="34" y2="34"/></svg>,
  /* 5 sidrería */ ACT_ICONS[5],
  /* 6 cuevas */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 36 L5 22 Q5 8 20 8 Q35 8 35 22 L35 36"/><path d="M11 36 L11 26 Q11 17 20 17 Q29 17 29 26 L29 36"/><line x1="16" y1="10" x2="16" y2="16"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="24" y1="10" x2="24" y2="16"/><line x1="18" y1="20" x2="18" y2="26"/><line x1="22" y1="19" x2="22" y2="25"/></svg>,
  /* 7 paintball */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="8"/><circle cx="20" cy="20" r="3"/><line x1="20" y1="5" x2="20" y2="7"/><line x1="20" y1="33" x2="20" y2="35"/><line x1="5" y1="20" x2="7" y2="20"/><line x1="33" y1="20" x2="35" y2="20"/></svg>,
  /* 8 capea */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M10 20 Q10 12 20 12 Q30 12 30 20 Q30 28 24 30 L20 32 L16 30 Q10 28 10 20Z"/><path d="M10 20 Q6 14 8 8 Q12 10 14 18"/><path d="M30 20 Q34 14 32 8 Q28 10 26 18"/><circle cx="16" cy="19" r="1.5"/><circle cx="24" cy="19" r="1.5"/></svg>,
  /* 9 frontón */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="4" y="8" width="5" height="28"/><line x1="4" y1="36" x2="36" y2="36"/><circle cx="27" cy="20" r="6"/><path d="M11 30 L20 19 L24 24"/></svg>,
  /* 10 piscina */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="28" cy="9" r="3"/><path d="M28 12 L22 20 L14 18"/><path d="M22 20 L20 29"/><path d="M14 18 L12 25"/><path d="M22 16 Q18 12 13 14"/><path d="M4 32 Q9 27 14 30 Q19 33 24 29 Q29 25 34 28"/><path d="M4 36 Q9 31 14 34 Q19 37 24 33 Q29 29 34 32"/></svg>,
  /* 11 polideportivo */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="5" y="14" width="30" height="22"/><line x1="20" y1="14" x2="20" y2="36"/><path d="M14 12 L20 6 L26 12"/><circle cx="13" cy="20" r="4"/><circle cx="27" cy="20" r="4"/></svg>,
  /* 12 campo de fútbol */
  <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="20" cy="20" r="14"/><path d="M20 6 L24 14 L20 18 L16 14Z"/><path d="M34 20 L26 18 L24 22 L28 28Z"/><path d="M28 32 L22 26 L18 28 L18 34Z"/><path d="M12 34 L18 28 L14 24 L8 26Z"/><path d="M6 20 L14 22 L16 18 L12 12Z"/></svg>
];

function Activities({ t, goTo, onBook }) {
  const ACT_QUERIES = [
  "surf escuela playa",
  "senderismo rutas",
  "parapente vuelo",
  "alquiler bicicletas BTT",
  "hípica centro ecuestre",
  "sidrería restaurante",
  "Camino de Santiago del Norte",
  "pesca río parque natural"];

  const searchNearby = (i) => {
    const q = (ACT_QUERIES[i] || t.activities.cards[i].title) + " cerca de Itziar, Deba, Gipuzkoa";
    window.open("https://www.google.com/maps/search/" + encodeURIComponent(q), "_blank", "noopener");
  };
  return (
    <section className="act-page" data-screen-label="04 Actividades">
      <div className="shell act-header">
        <div>
          <div className="eyebrow">{t.activities.page_label}</div>
          <h1 className="act-h1">{t.activities.title_a}<br /><em>{t.activities.title_em}</em></h1>
        </div>
        <p className="act-lede">{t.activities.lede}</p>
      </div>

      <div className="act-grid">
        {t.activities.cards.map((c, i) =>
        <Tilt key={i} max={3}>
            <article className="act-card tilt-inner" onClick={() => searchNearby(i)} data-cursor="hover" role="link" tabIndex={0}
          onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();searchNearby(i);}}}>
              <span className="act-card-icon" aria-hidden="true">{ACT_ICONS[i]}</span>
              <span className="act-card-num">{String(i + 1).padStart(2, "0")}</span>
              <h3 className="act-card-title">{c.title}</h3>
              <p className="act-card-body">{c.body}</p>
              <span className="act-card-go">{t.cta.learn} ↗</span>
            </article>
          </Tilt>
        )}
      </div>
    </section>);

}

/* ============================================================
   OPINIONES page
   ============================================================ */
function Reviews({ t, onBook, compact }) {
  return (
    <section className={"reviews-page" + (compact ? " is-compact" : "")} data-screen-label="Opiniones">
      <div className="shell reviews-head">
        <div>
          <div className="eyebrow">{t.reviews.eyebrow}</div>
          <h2 className="reviews-h1">{t.reviews.title_a}<em>{t.reviews.title_em}</em></h2>
        </div>
        <div className="reviews-score">
          <span className="reviews-score-n">{window.SITE.contact.googleScore}<span className="reviews-score-max">/5,0</span></span>
          <div className="reviews-score-meta">
            <div className="reviews-score-stars">★ ★ ★ ★ ★</div>
            <div className="reviews-score-label">{window.SITE.contact.googleCount} {t.reviews.count_label}</div>
            <div className="reviews-score-src"><span className="g-badge">G</span> {t.reviews.score_label}</div>
          </div>
        </div>
      </div>

      <div className="reviews-grid shell">
        {t.reviews.quotes.map((q, i) =>
        <article key={i} className="review-card">
            <span className="review-mark">“</span>
            <p className="review-quote">{q.q}</p>
            <div className="review-foot">
              <span className="review-avatar" style={{ background: REVIEW_AVATARS[i % REVIEW_AVATARS.length] }}>{initialsOf(q.name)}</span>
              <div className="review-id">
                <div className="review-author">{q.name}</div>
                <div className="review-source"><span className="g-badge sm">G</span> {t.reviews.source} · {q.by}</div>
              </div>
              <div className="review-stars">★ ★ ★ ★ ★</div>
            </div>
          </article>
        )}
      </div>

      <div className="reviews-cta shell">
        <p>{t.reviews.cta_lede}</p>
        <div className="cta-group">
          <a className="btn btn-secondary" href={window.SITE.contact.googleReviews} target="_blank" rel="noopener" data-cursor="hover">{t.reviews.cta}</a>
          <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>{t.book_now}<span className="arrow">→</span></button>
        </div>
      </div>
    </section>);

}

/* ============================================================
   CONTACTO page
   ============================================================ */
function Contact({ t, onBook }) {
  return (
    <section className="contact-page" data-screen-label="06 Contacto">
      <div className="shell contact-grid">
        <div className="contact-info">
          <div className="eyebrow">{t.contact.eyebrow}</div>
          <h1 className="contact-h1">{t.contact.title_a}<em>{t.contact.title_em}</em></h1>
          <p className="contact-lede">{t.contact.lede}</p>

          <div className="contact-items">
            <div className="contact-item">
              <span className="contact-item-label">{t.contact.phone_h}</span>
              <a className="contact-item-value" href={`tel:${window.SITE.contact.phoneRaw}`} data-cursor="hover">{window.SITE.contact.phone}</a>
            </div>
            <div className="contact-item">
              <span className="contact-item-label">Email</span>
              <a className="contact-item-value" href={`mailto:${window.SITE.contact.email}`} data-cursor="hover">{window.SITE.contact.email}</a>
            </div>
            <div className="contact-item">
              <span className="contact-item-label">{t.contact.address_h}</span>
              <span className="contact-item-value">
                {t.contact.address.map((l, i) => <span key={i}>{l}<br /></span>)}
              </span>
            </div>
            <div className="contact-item">
              <span className="contact-item-label">{t.contact.reg_h}</span>
              <span className="contact-item-value">{t.contact.reg}</span>
            </div>
          </div>

          <div className="cta-group" style={{ marginTop: 32 }}>
            <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>{t.book_now}<span className="arrow">→</span></button>
            <a className="btn btn-secondary" href={window.SITE.contact.booking} target="_blank" rel="noopener" data-cursor="hover">Booking.com</a>
          </div>

          <div className="contact-note">
            <span className="note-mark">i</span>
            <p>{t.contact.note}</p>
          </div>
        </div>

      </div>
    </section>);

}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer({ t, goTo, page, onLegal }) {
  const LEGAL_KEYS = ["aviso-legal", "privacidad", "cookies"];
  return (
    <footer className={"site-footer" + (page ? " site-footer--" + page : "")}>
      <div className="shell footer-top">
        <div className="footer-brand">
          <div className="footer-logo-bg">
            <img className="footer-logo" src="uploads/logo.png?v=1" alt="Zubeltzu Torre" />
          </div>
          <p className="footer-tagline">Agroturismo en el corazón de la<br />costa vasca desde 2008.</p>
          <div className="footer-socials">
            <a href={window.SITE.contact.instagram} target="_blank" rel="noopener" data-cursor="hover">Instagram</a>
            <a href={window.SITE.contact.facebook} target="_blank" rel="noopener" data-cursor="hover">Facebook</a>
            <a href={window.SITE.contact.whatsapp} target="_blank" rel="noopener" data-cursor="hover">WhatsApp</a>
          </div>
        </div>
        <div className="footer-col">
          <h4>{t.nav.lodging}</h4>
          <button onClick={() => goTo("home")} data-cursor="hover">{t.aloj.cards[0].title}</button>
          <button onClick={() => goTo("home")} data-cursor="hover">{t.aloj.cards[1].title}</button>
          <button onClick={() => goTo("home")} data-cursor="hover">{t.aloj.cards[2].title}</button>
        </div>
        <div className="footer-col">
          <h4>{t.cta.learn}</h4>
          <button onClick={() => goTo("entorno")} data-cursor="hover">{t.nav.env}</button>
          <button onClick={() => goTo("entorno")} data-cursor="hover">{t.nav.activities}</button>
        </div>
        <div className="footer-col">
          <h4>{t.nav.contact}</h4>
          <a href={`tel:${window.SITE.contact.phoneRaw}`} data-cursor="hover">{window.SITE.contact.phone}</a>
          <a href={`mailto:${window.SITE.contact.email}`} data-cursor="hover">{window.SITE.contact.email}</a>
          <button onClick={() => goTo("contacto")} data-cursor="hover">{t.contact.address_h}</button>
        </div>
      </div>
      <div className="shell footer-bottom">
        <span>© 2026 Zubeltzu Torre · {t.contact.reg_h} <strong>{t.contact.reg}</strong></span>
        <div className="legal">
          {t.legal.map((l, i) => (
            <button key={i} className="footer-legal-btn" data-cursor="hover"
              onClick={() => onLegal && onLegal(LEGAL_KEYS[i])}>
              {l}
            </button>
          ))}
        </div>
      </div>
    </footer>);

}

/* ============================================================
   FARM ACTIVITIES — agricultural life at the farmhouse
   ============================================================ */
const FARM_ICONS = {
  agri: (
    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M24 8C16 8 10 16 10 24c0 4 2 8 6 10v6h16v-6c4-2 6-6 6-10 0-8-6-16-14-16z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
      <line x1="24" y1="8" x2="24" y2="40" stroke="currentColor" strokeWidth="2"/>
      <line x1="14" y1="20" x2="34" y2="20" stroke="currentColor" strokeWidth="2"/>
      <line x1="12" y1="28" x2="36" y2="28" stroke="currentColor" strokeWidth="2"/>
    </svg>
  ),
  livestock: (
    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <ellipse cx="20" cy="26" rx="12" ry="8" stroke="currentColor" strokeWidth="2"/>
      <circle cx="20" cy="14" r="6" stroke="currentColor" strokeWidth="2"/>
      <line x1="12" y1="34" x2="10" y2="44" stroke="currentColor" strokeWidth="2"/>
      <line x1="16" y1="34" x2="15" y2="44" stroke="currentColor" strokeWidth="2"/>
      <line x1="24" y1="34" x2="25" y2="44" stroke="currentColor" strokeWidth="2"/>
      <line x1="28" y1="34" x2="30" y2="44" stroke="currentColor" strokeWidth="2"/>
      <path d="M14 10 Q16 6 20 8" stroke="currentColor" strokeWidth="2" fill="none"/>
      <path d="M26 10 Q24 6 20 8" stroke="currentColor" strokeWidth="2" fill="none"/>
    </svg>
  ),
  animals: (
    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="24" cy="20" r="8" stroke="currentColor" strokeWidth="2"/>
      <path d="M16 20 Q8 18 6 12l4 2" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/>
      <path d="M32 20 Q40 18 42 12l-4 2" stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/>
      <path d="M18 28 Q16 38 14 44" stroke="currentColor" strokeWidth="2" fill="none"/>
      <path d="M30 28 Q32 38 34 44" stroke="currentColor" strokeWidth="2" fill="none"/>
      <path d="M22 28 Q22 36 22 44" stroke="currentColor" strokeWidth="2" fill="none"/>
      <path d="M26 28 Q26 36 26 44" stroke="currentColor" strokeWidth="2" fill="none"/>
    </svg>
  )
};

function FarmActivities({ t }) {
  const f = t.farm;
  return (
    <section className="farm-section" data-screen-label="Farm Activities">
      <div className="shell farm-inner">
        <div className="farm-header">
          <span className="eyebrow lab">{f.eyebrow}</span>
          <h2 className="farm-title">{f.title}</h2>
          <p className="farm-sub">{f.sub}</p>
        </div>
        <div className="farm-cats">
          {f.cats.map((cat) => (
            <div key={cat.name} className="farm-cat">
              <div className="farm-cat-icon">{FARM_ICONS[cat.icon]}</div>
              <h3 className="farm-cat-name">{cat.name}</h3>
              <ul className="farm-cat-list">
                {cat.items.map((item) => (
                  <li key={item}>
                    <span className="farm-dot" aria-hidden="true">·</span>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   GALERÍA — "El carrete": filmstrip + muro editorial + lightbox
   ============================================================ */
// Forma de cada baldosa del muro para que la rejilla de 3 columnas cierre
// siempre sin huecos. Ciclo base de 6 = 12 celdas = 4 filas completas; las
// sobrantes al final usan combinaciones que también completan sus filas.
const WALL_CYCLE = ["big", "sq", "sq", "tall", "wide", "wide"];
const WALL_TAIL = {
  1: ["w3"],
  2: ["wide", "sq"],
  3: ["sq", "sq", "sqw"],   // sqw: 1×1 a 3 col, ancho completo a 2 col
  4: ["big", "sq", "sq", "w3"],
  5: ["big", "sq", "sq", "wide", "sq"]
};
function wallShape(n, total) {
  const full = Math.floor(total / WALL_CYCLE.length) * WALL_CYCLE.length;
  if (n < full) return WALL_CYCLE[n % WALL_CYCLE.length];
  return WALL_TAIL[total - full][n - full];
}

function Gallery({ t, goTo, onBook, initialFilter }) {
  const g = t.gallery;
  const imgs = window.SITE.galleryImages;
  const shots = useMemo2(() => g.shots.map((s, i) => {
    const im = s.ph ? null : imgs[i] || imgs[i % imgs.length];
    return {
      ...s,
      i,
      src: im ? im.src : null,
      pos: im ? im.pos : "50% 50%",
      no: String(i + 1).padStart(3, "0")
    };
  }), [g.shots, imgs]);

  const [filter, setFilter] = useState2(initialFilter || "all");

  // Si se llega con una categoría concreta (p. ej. desde una tarjeta de
  // alojamiento), bajamos directamente al muro ya filtrado.
  useEffect2(() => {
    if (!initialFilter || initialFilter === "all") return;
    const id = setTimeout(() => {
      document.getElementById("gal-wall")?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 120);
    return () => clearTimeout(id);
  }, [initialFilter]);
  const [lb, setLb] = useState2(null); // index into shots or null

  const reelRef = useRef2(null);
  useDragScroll(reelRef);

  const filtered = useMemo2(
    () => filter === "all" ? shots : shots.filter((s) => s.cat === filter),
    [filter, shots]
  );

  // lightbox keyboard nav
  useEffect2(() => {
    if (lb === null) return;
    document.body.style.overflow = "hidden";
    const onKey = (e) => {
      if (e.key === "Escape") setLb(null);else
      if (e.key === "ArrowRight") setLb((v) => (v + 1) % shots.length);else
      if (e.key === "ArrowLeft") setLb((v) => (v - 1 + shots.length) % shots.length);
    };
    window.addEventListener("keydown", onKey);
    return () => {window.removeEventListener("keydown", onKey);document.body.style.overflow = "";};
  }, [lb, shots.length]);

  const catLabel = (c) => g.filters[c] || c;
  const filterKeys = ["all", "casa", "habitaciones", "apartamentos", "estancias", "entorno", "animales"];

  return (
    <section className="gal-page" data-screen-label="04 Galería">
      {/* HERO — fotografía del caserío + título superpuesto */}
      <div className="gal-hero overlay">
        <img src={window.SITE.galleryHero} alt={g.title_a} loading="eager" fetchpriority="high" decoding="async" />
        <div className="gal-hero-content shell">
          <div className="eyebrow on-photo">{g.eyebrow}</div>
          <h1 className="gal-hero-h1">{g.title_a}<br /><em>{g.title_em}</em></h1>
          <p className="gal-hero-sub">{g.intro}</p>
        </div>
      </div>

      {/* INTRO — contador de fotogramas (el título y el intro ya están en el hero) */}
      <div className="gal-intro shell gal-intro-after-hero">
        <div className="gal-intro-side gal-intro-side-only">
          <div className="gal-count">
            {/* Cifra fija a petición del cliente; las fotos reales son shots.length */}
            <span className="gal-count-n">50</span>
            <span className="gal-count-l">{g.frame}s</span>
          </div>
        </div>
      </div>

      {/* FILMSTRIP — el carrete */}
      <div className="gal-reel-wrap">
        <div className="gal-reel-meta shell">
          <span className="gal-reel-label">◉ {g.reel_label}</span>
          <span className="gal-reel-drag">{g.drag} →</span>
        </div>
        <div className="gal-reel">
          <div className="gal-sprockets gal-sprockets-top" aria-hidden="true"></div>
          <div className="gal-reel-track" ref={reelRef}>
            {shots.map((s) =>
            <button
              key={s.i}
              className="gal-frame"
              data-cursor="hover"
              onClick={() => setLb(s.i)}
              style={{ "--pos": s.pos }}>
              
                {s.ph ?
              <span className="gal-frame-img is-ph"><span className="gal-ph-plus" aria-hidden="true">＋</span><span className="gal-ph-label">{s.ph}</span><span className="gal-ph-drop">{g.farm_drop}</span></span> :
              <span className="gal-frame-img" style={{ backgroundImage: `url(${s.src})`, backgroundPosition: s.pos }}></span>}
                <span className="gal-frame-grain" aria-hidden="true"></span>
                <span className="gal-frame-tag">
                  <span className="gal-frame-no">ZUB·{s.no}</span>
                  <span className="gal-frame-cat">{catLabel(s.cat)}</span>
                </span>
                <span className="gal-frame-cap">{s.cap}</span>
              </button>
            )}
          </div>
          <div className="gal-sprockets gal-sprockets-bot" aria-hidden="true"></div>
        </div>
      </div>

      {/* WALL — muro editorial */}
      <div className="gal-wall-section shell" id="gal-wall">
        <div className="gal-wall-head">
          <div>
            <div className="eyebrow">{g.wall_eyebrow}</div>
            <h2 className="gal-wall-h2">{g.wall_title_a} <em>{g.wall_title_em}</em></h2>
          </div>
          <div className="gal-filters">
            {filterKeys.map((k) =>
            <button
              key={k}
              className={"gal-filter" + (filter === k ? " is-active" : "")}
              data-cursor="hover"
              onClick={() => setFilter(k)}>
              
                {catLabel(k)}
                {filter === k && <span className="gal-filter-dot"></span>}
              </button>
            )}
          </div>
        </div>

        <div className="gal-wall">
          {filtered.map((s, n) =>
          <ParallaxY key={s.i} speed={n % 3 === 1 ? 0.06 : n % 3 === 2 ? -0.05 : 0.02} className={"gal-tile gal-tile-" + wallShape(n, filtered.length)}>
              <button className="gal-tile-btn" data-cursor="hover" onClick={() => setLb(s.i)}>
                {s.ph ?
              <span className="gal-tile-img is-ph"><span className="gal-ph-plus" aria-hidden="true">＋</span><span className="gal-ph-label">{s.ph}</span><span className="gal-ph-drop">{g.farm_drop}</span></span> :
              <span className="gal-tile-img" style={{ backgroundImage: `url(${s.src})`, backgroundPosition: s.pos }}></span>}
                <span className="gal-tile-grain" aria-hidden="true"></span>
                <span className="gal-tile-meta">
                  <span className="gal-tile-no">ZUB·{s.no}</span>
                  <span className="gal-tile-cap">{s.cap}</span>
                </span>
                <span className="gal-tile-plus" aria-hidden="true">＋</span>
              </button>
            </ParallaxY>
          )}
          {filtered.length === 0 && <p className="gal-empty">{g.empty}</p>}
        </div>
      </div>

      {/* LA GRANJA — animales */}
      <div className="gal-farm shell">
        <div className="gal-farm-head">
          <div>
            <div className="eyebrow">{g.farm_eyebrow}</div>
            <h2 className="gal-wall-h2">{g.farm_title_a} <em>{g.farm_title_em}</em></h2>
          </div>
          <p className="gal-farm-lede">{g.farm_lede}</p>
        </div>
        <div className="gal-farm-row">
          {shots.filter((s) => s.cat === "animales").map((s) =>
          <button key={s.i} className="gal-farm-frame" data-cursor="hover" onClick={() => setLb(s.i)}>
              {s.src ?
              <span className="gal-farm-img" style={{ backgroundImage: `url(${s.src})`, backgroundPosition: s.pos }}></span> :
              <span className="gal-farm-img is-ph">
                <span className="gal-ph-plus" aria-hidden="true">＋</span>
                <span className="gal-ph-label">{s.ph}</span>
                <span className="gal-ph-drop">{g.farm_drop}</span>
              </span>}
              <span className="gal-farm-cap"><span className="gal-farm-no">ZUB·{s.no}</span>{s.cap}</span>
            </button>
          )}
        </div>
        <p className="gal-farm-note">{g.farm_note}</p>
      </div>

      {/* CTA */}
      <div className="gal-cta">
        <div className="shell gal-cta-inner">
          <h2 className="gal-cta-h2">{g.cta_h2_a}<br /><em>{g.cta_h2_em}</em></h2>
          <button className="btn btn-primary" data-cursor="hover" onClick={onBook}>{t.book_now}<span className="arrow">→</span></button>
        </div>
      </div>

      {/* LIGHTBOX */}
      {lb !== null &&
      <div className="gal-lb" onClick={() => setLb(null)} role="dialog" aria-modal="true">
          <div className="gal-lb-grain" aria-hidden="true"></div>
          <div className="gal-lb-top shell" onClick={(e) => e.stopPropagation()}>
            <span className="gal-lb-no">ZUB·{shots[lb].no}</span>
            <span className="gal-lb-count">{String(lb + 1).padStart(2, "0")} / {String(shots.length).padStart(2, "0")}</span>
            <button className="gal-lb-close" onClick={() => setLb(null)} aria-label="Cerrar">×</button>
          </div>

          <button
          className="gal-lb-nav prev"
          onClick={(e) => {e.stopPropagation();setLb((v) => (v - 1 + shots.length) % shots.length);}}
          aria-label="Anterior">
          ←</button>

          <div className="gal-lb-stage" onClick={(e) => e.stopPropagation()}>
            <div className="gal-lb-frame">
              {shots[lb].ph ?
            <div className="gal-lb-ph is-ph"><span className="gal-ph-plus" aria-hidden="true">＋</span><span className="gal-ph-label">{shots[lb].ph}</span><span className="gal-ph-drop">{g.farm_drop}</span></div> :
            <img src={shots[lb].src} alt={shots[lb].cap} style={{ objectPosition: shots[lb].pos }} />}
            </div>
            <div className="gal-lb-cap">
              <span className="gal-lb-cat">{catLabel(shots[lb].cat)}</span>
              <span className="gal-lb-cap-text">{shots[lb].cap}</span>
            </div>
          </div>

          <button
          className="gal-lb-nav next"
          onClick={(e) => {e.stopPropagation();setLb((v) => (v + 1) % shots.length);}}
          aria-label="Siguiente">
          →</button>

          <div className="gal-lb-hint">{g.lb_hint}</div>
        </div>
      }
    </section>);

}

Object.assign(window, { Hero, Ticker, Intro, HostSection, LodgingTeaser, Lodging, Environment, BidegorriSection, Activities, Reviews, Contact, Footer, Gallery, FarmActivities });