// SEEbalance · Section components
// Loaded after content.js, before app.jsx
// All components read content via window.SEE_CONTENT[lang].

const { useState, useEffect } = React;

// ─────────────────────────────────────────────────────────────────────────
// Photos: eigene Aufnahmen der Wohnung & Umgebung
// Dateien liegen unter images/apartment/ bzw. images/location/
// Empfohlene Formate: .jpg oder .webp, Breite ≥ 2000 px (hero), ≥ 1200 px (rest)
// ─────────────────────────────────────────────────────────────────────────
const PHOTOS = {
  // Wohnung
  hero:     "images/apartment/hero03.jpg",    // Hauptbild – großes Panorama der Wohnung oder Aussicht
  living:   "images/apartment/living.jpg",   // Wohnzimmer
  bedroom:  "images/apartment/bedroom.jpg",  // Schlafzimmer 1
  bathroom: "images/apartment/bathroom.jpg", // Badezimmer
  balcony:  "images/apartment/balcony.jpg",  // Balkon / Terrasse mit Blick
  dining:   "images/apartment/dining.jpg",   // Ess- / Wohnbereich
  kitchen:  "images/apartment/kitchen.jpg",  // Küche
  flur:     "images/apartment/flur.jpg",     // Flur / Eingangsbereich
  bedroom2: "images/apartment/bedroom2.jpg", // Schlafzimmer 2
  morning:  "images/apartment/morning.jpg",  // Morgenlicht im Schlafzimmer
};

const PHOTO_SETS = {
  hero: null,
  living: { base: "images/apartment/living", widths: [640, 960, 1200], width: 1500, height: 1000 },
  bedroom: { base: "images/apartment/bedroom", widths: [640, 960, 1200], width: 1248, height: 832 },
  bathroom: { base: "images/apartment/bathroom", widths: [640, 960, 1200], width: 1500, height: 1000 },
  balcony: { base: "images/apartment/balcony", widths: [640, 960, 1280, 1600], width: 2528, height: 1696 },
  dining: { base: "images/apartment/dining", widths: [640, 960, 1200], width: 1500, height: 1000 },
  kitchen: { base: "images/apartment/kitchen", widths: [640, 960, 1200], width: 1500, height: 1000 },
  flur: { base: "images/apartment/flur", widths: [640, 960, 1200], width: 1500, height: 1000 },
  bedroom2: { base: "images/apartment/bedroom2", widths: [640, 960, 1280, 1600], width: 4992, height: 3328 },
  morning: { base: "images/apartment/morning", widths: [640, 960, 1200], width: 1500, height: 1000 },
};

function buildSrcSet(base, ext, widths) {
  return widths.map((w) => `${base}-${w}.${ext} ${w}w`).join(", ");
}

function ResponsiveImage({ name, alt, loading = "lazy", sizes = "100vw", priority = "auto" }) {
  const meta = PHOTO_SETS[name];
  if (!meta) return <img src={PHOTOS[name]} alt={alt} loading={loading} decoding="async"/>;
  const fallbackWidth = meta.widths[meta.widths.length - 1];
  return (
    <picture>
      <source type="image/webp" srcSet={buildSrcSet(meta.base, "webp", meta.widths)} sizes={sizes}/>
      <img
        src={`${meta.base}-${fallbackWidth}.jpg`}
        srcSet={buildSrcSet(meta.base, "jpg", meta.widths)}
        sizes={sizes}
        alt={alt}
        width={meta.width}
        height={meta.height}
        loading={loading}
        decoding="async"
        fetchpriority={priority}
      />
    </picture>
  );
}

// Inline SVG icon set — fine line, premium feel
function Icon({ name, size = 28 }) {
  const s = size;
  const st = {
    width: s, height: s, fill: "none", stroke: "currentColor",
    strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "mountain":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <path d="M3 25 L11 12 L17 20 L21 15 L29 25 Z"/>
          <circle cx="22" cy="8" r="2.5"/>
        </svg>
      );
    case "balcony":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <path d="M4 24 H28 M6 24 V14 M26 24 V14 M4 14 H28 M10 24 V18 M14 24 V18 M18 24 V18 M22 24 V18"/>
          <path d="M8 10 Q16 4 24 10"/>
        </svg>
      );
    case "kitchen":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <rect x="5" y="6" width="22" height="20" rx="2"/>
          <path d="M5 13 H27 M11 9 H13 M11 19 H21 M11 22 H17"/>
        </svg>
      );
    case "wifi":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <path d="M5 13 Q16 4 27 13 M9 17 Q16 11 23 17 M13 21 Q16 18 19 21"/>
          <circle cx="16" cy="25" r=".8" fill="currentColor"/>
        </svg>
      );
    case "parking":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <rect x="5" y="5" width="22" height="22" rx="3"/>
          <path d="M13 22 V10 H17 a3 3 0 0 1 0 6 H13"/>
        </svg>
      );
    case "paw":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <circle cx="10" cy="10" r="2.5"/>
          <circle cx="22" cy="10" r="2.5"/>
          <circle cx="6" cy="16" r="2"/>
          <circle cx="26" cy="16" r="2"/>
          <path d="M11 25 Q11 19 16 19 Q21 19 21 25 Q21 27 19 27 H13 Q11 27 11 25 Z"/>
        </svg>
      );
    case "lock":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <rect x="7" y="14" width="18" height="13" rx="2"/>
          <path d="M11 14 V10 a5 5 0 0 1 10 0 V14"/>
          <circle cx="16" cy="20" r="1.4" fill="currentColor"/>
        </svg>
      );
    case "coffee":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <path d="M8 14 H22 L20 26 H10 Z"/>
          <path d="M22 17 H25 a2.5 2.5 0 0 1 0 5 H22"/>
          <path d="M11 10 Q12 7 11 5 M15 10 Q16 7 15 5"/>
        </svg>
      );
    case "wash":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <rect x="5" y="5" width="22" height="22" rx="2"/>
          <circle cx="16" cy="18" r="6"/>
          <circle cx="16" cy="18" r="2.5"/>
          <circle cx="10" cy="10" r="1" fill="currentColor"/>
          <path d="M14 9 H22"/>
        </svg>
      );
    case "expo":
      return (
        <svg viewBox="0 0 32 32" {...st}>
          <path d="M4 26 H28 M6 26 V12 L16 6 L26 12 V26 M12 26 V18 H20 V26"/>
        </svg>
      );
    default:
      return null;
  }
}

// ─────────────────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────────────────
function Nav({ lang, setLang, scrolled }) {
  const t = window.SEE_CONTENT[lang];
  const [open, setOpen] = useState(false);
  const items = [
    { id: "about",    l: t.nav.about },
    { id: "gallery",  l: t.nav.gallery },
    { id: "amenities",l: t.nav.amenities },
    { id: "location", l: t.nav.location },
    { id: "reviews",  l: t.nav.reviews },
    { id: "faq",      l: t.nav.faq },
  ];
  return (
    <header className={"see-nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="see-nav__inner">
        <a
          href="#top"
          className="see-nav__brand"
          onClick={(e) => {
            e.preventDefault();
            const el = document.getElementById("top");
            if (el) el.scrollIntoView({ behavior: "smooth" });
          }}
        >
          <span className="see-nav__logomark" aria-hidden="true">
            <svg viewBox="0 0 32 32" width="22" height="22">
              <path d="M3 21 Q8 17 13 21 T23 21 T31 21" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
              <path d="M3 26 Q8 22 13 26 T23 26 T31 26" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" opacity=".55"/>
              <circle cx="24" cy="9" r="2.4" fill="currentColor"/>
            </svg>
          </span>
          <span className="see-nav__wordmark">SEE<em>balance</em></span>
        </a>

        <nav className="see-nav__links" aria-label="Primary">
          {items.map((i) => (
            <a key={i.id} href={"#" + i.id}>{i.l}</a>
          ))}
        </nav>

        <div className="see-nav__right">
          <div className="see-nav__lang" role="group" aria-label="Language">
            <button
              className={lang === "de" ? "is-active" : ""}
              onClick={() => setLang("de")}
              aria-pressed={lang === "de"}
            >DE</button>
            <span aria-hidden="true">/</span>
            <button
              className={lang === "en" ? "is-active" : ""}
              onClick={() => setLang("en")}
              aria-pressed={lang === "en"}
            >EN</button>
          </div>
          <a href="#book" className="see-btn see-btn--sm">{t.nav.book}</a>
          <button
            className="see-nav__burger"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            <span/><span/><span/>
          </button>
        </div>
      </div>

      {open && (
        <nav className="see-nav__mobile" aria-label="Mobile navigation">
          {items.map((i) => (
            <a key={i.id} href={"#" + i.id} onClick={() => setOpen(false)}>{i.l}</a>
          ))}
          <a href="#book" className="see-btn see-btn--primary" onClick={() => setOpen(false)}>
            {t.nav.book}
          </a>
        </nav>
      )}
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// HERO — full-bleed photo with centered text + meta strip
// ─────────────────────────────────────────────────────────────────────────
function Hero({ lang }) {
  const t = window.SEE_CONTENT[lang].hero;
  return (
    <section className="see-hero" id="top">
      <div className="see-hero__media">
        <ResponsiveImage
          name="hero"
          alt={lang === "de"
            ? "Bodensee mit Alpenpanorama bei Friedrichshafen"
            : "Lake Constance with Alpine panorama near Friedrichshafen"}
          loading="eager"
          priority="high"
          sizes="100vw"
        />
        <div className="see-hero__scrim" aria-hidden="true"/>
      </div>

      <div className="see-hero__content">
        <p className="see-hero__eyebrow">{t.eyebrow}</p>
        <h1 className="see-hero__title">
          <span>{t.title[0]}</span>
          <em>{t.title[1]}</em>
        </h1>
        <p className="see-hero__sub">{t.sub}</p>
        <div className="see-hero__actions">
          <a href="#book" className="see-btn see-btn--primary">{t.cta}</a>
          <a href="#about" className="see-btn see-btn--ghost">
            {t.ctaSecondary} <span aria-hidden="true">↓</span>
          </a>
        </div>
      </div>

      <div className="see-hero__meta-bg">
        <ul className="see-hero__meta" aria-label="Key facts">
          {t.meta.map((m, i) => <li key={i}>{m}</li>)}
        </ul>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────────────────
function About({ lang }) {
  const t = window.SEE_CONTENT[lang].about;
  return (
    <section className="see-section see-about" id="about">
      <div className="see-container see-about__grid">
        <div className="see-about__copy">
          <p className="see-eyebrow">{t.eyebrow}</p>
          <h2 className="see-h2">
            {t.title.split("\n").map((l, i) => <span key={i}>{l}<br/></span>)}
          </h2>
          <p className="see-lead">{t.lead}</p>
          <p className="see-body">{t.body}</p>
          <ul className="see-stats">
            {t.stats.map((s, i) => (
              <li key={i}>
                <strong>{s.n}</strong>
                <span>{s.l}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="see-about__media">
          <figure className="see-about__photo see-about__photo--lg">
            <ResponsiveImage
              name="living"
              alt={lang === "de"
                ? "Heller Wohnbereich der Ferienwohnung SEEbalance"
                : "Bright living room of SEEbalance apartment"}
              sizes="(max-width: 880px) 90vw, 40vw"
            />
          </figure>
          <figure className="see-about__photo see-about__photo--sm">
            <ResponsiveImage
              name="bedroom"
              alt={lang === "de"
                ? "Ruhiges Schlafzimmer mit Queensize-Bett"
                : "Calm bedroom with queen-size bed"}
              sizes="(max-width: 880px) 60vw, 24vw"
            />
          </figure>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// GALLERY — asymmetric mosaic
// ─────────────────────────────────────────────────────────────────────────
function Gallery({ lang }) {
  const t = window.SEE_CONTENT[lang].gallery;
  const [lightbox, setLightbox] = useState(null);
  const tiles = [
    { photo: "balcony",  full: PHOTOS.balcony,  span: "tall", alt: lang === "de" ? "Terrasse mit Blick auf See und Berge" : "Terrace with lake & mountain view" },
    { photo: "bedroom",  full: PHOTOS.bedroom,  span: "wide", alt: lang === "de" ? "Ruhiges Schlafzimmer" : "Calm bedroom" },
    { photo: "dining",   full: PHOTOS.dining,   span: "",     alt: lang === "de" ? "Essbereich" : "Dining area" },
    { photo: "bathroom", full: PHOTOS.bathroom, span: "",     alt: lang === "de" ? "Modernes Bad" : "Modern bathroom" },
    { photo: "kitchen",  full: PHOTOS.kitchen,  span: "wide", alt: lang === "de" ? "Voll ausgestattete Küche" : "Fully equipped kitchen" },
    { photo: "flur",     full: PHOTOS.flur,     span: "",     alt: lang === "de" ? "Heller Flur und Eingangsbereich" : "Bright hallway and entrance area" },
    { photo: "living",   full: PHOTOS.living,   span: "wide", alt: lang === "de" ? "Heller Wohnbereich" : "Bright living area" },
    { photo: "bedroom2", full: PHOTOS.bedroom2, span: "",     alt: lang === "de" ? "Zweites Schlafzimmer" : "Second bedroom" },
  ];

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setLightbox(null); };
    if (lightbox) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lightbox]);

  return (
    <section className="see-section see-gallery" id="gallery">
      <div className="see-container">
        <header className="see-section__head">
          <p className="see-eyebrow">{t.eyebrow}</p>
          <h2 className="see-h2">{t.title}</h2>
          <p className="see-section__sub">{t.sub}</p>
        </header>
        <div className="see-gallery__grid">
          {tiles.map((tile, i) => (
            <figure
              key={i}
              className={"see-gallery__tile" + (tile.span ? " is-" + tile.span : "")}
              onClick={() => setLightbox(tile)}
              role="button"
              tabIndex={0}
              aria-label={lang === "de" ? "Bild vergrößern" : "Enlarge image"}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setLightbox(tile); }}
            >
              <ResponsiveImage
                name={tile.photo}
                alt={tile.alt}
                sizes="(max-width: 640px) 48vw, (max-width: 980px) 32vw, 24vw"
              />
            </figure>
          ))}
        </div>
      </div>

      {lightbox && (
        <div
          className="see-lightbox"
          onClick={() => setLightbox(null)}
          role="dialog"
          aria-modal="true"
          aria-label={lightbox.alt}
        >
          <button
            className="see-lightbox__close"
            aria-label={lang === "de" ? "Schließen" : "Close"}
            onClick={() => setLightbox(null)}
          >×</button>
          <img
            src={lightbox.full}
            alt={lightbox.alt}
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// GUIDES — internal topical cluster for stronger crawl paths
// ─────────────────────────────────────────────────────────────────────────
function Guides({ lang }) {
  const t = window.SEE_CONTENT[lang].guides;
  return (
    <section className="see-section see-guides" id="guides">
      <div className="see-container">
        <header className="see-section__head">
          <p className="see-eyebrow">{t.eyebrow}</p>
          <h2 className="see-h2">{t.title}</h2>
          <p className="see-section__sub">{t.sub}</p>
        </header>
        <div className="see-guides__grid">
          {t.items.map((item, idx) => (
            <article className="see-guide" key={idx}>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
              <a href={item.href} className="see-guide__link">{item.cta} <span aria-hidden="true">→</span></a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// AMENITIES
// ─────────────────────────────────────────────────────────────────────────
function FeatureSlideshow({ slides, chip, interval = 4500 }) {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el || slides.length <= 1) return;
    let active = true;
    const observer = new IntersectionObserver(
      ([entry]) => { active = entry.isIntersecting; },
      { threshold: 0.2 }
    );
    observer.observe(el);
    const id = setInterval(() => {
      if (!paused && active) setIdx((i) => (i + 1) % slides.length);
    }, interval);
    return () => { clearInterval(id); observer.disconnect(); };
  }, [paused, slides.length, interval]);

  const current = slides[idx];

  return (
    <figure
      ref={ref}
      className="see-amen-feat__hero see-amen-feat__hero--slideshow"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="see-amen-feat__slides" aria-live="polite">
        {slides.map((s, i) => (
          <img
            key={i}
            src={s.src}
            alt={i === idx ? current.title : ""}
            loading={i === 0 ? "eager" : "lazy"}
            className={"see-amen-feat__slide" + (i === idx ? " is-active" : "")}
            aria-hidden={i !== idx}
          />
        ))}
      </div>
      <span className="see-amen-feat__chip">{chip}</span>
      <div className="see-amen-feat__hero-body" key={idx}>
        <span className="see-amen-feat__hero-icon"><Icon name={current.icon} size={26}/></span>
        <div>
          <h3>{current.title}</h3>
          <p>{current.text}</p>
        </div>
      </div>
      <div className="see-amen-feat__dots" role="tablist" aria-label="Slideshow">
        {slides.map((_, i) => (
          <button
            key={i}
            type="button"
            className={"see-amen-feat__dot" + (i === idx ? " is-active" : "")}
            aria-label={`Slide ${i + 1}`}
            aria-selected={i === idx}
            onClick={() => setIdx(i)}
          />
        ))}
      </div>
    </figure>
  );
}

function Amenities({ lang }) {
  const t = window.SEE_CONTENT[lang].amenities;
  const rest = t.items.slice(1);
  return (
    <section className="see-section see-amenities" id="amenities">
      <div className="see-container">
        <header className="see-section__head see-section__head--split">
          <div>
            <p className="see-eyebrow">{t.eyebrow}</p>
            <h2 className="see-h2">
              {t.title.split("\n").map((l, i) => <span key={i}>{l}<br/></span>)}
            </h2>
          </div>
          <p className="see-section__sub">{t.sub}</p>
        </header>

        <div className="see-amen-feat">
          <FeatureSlideshow
            chip={lang === "de" ? "Highlight" : "Signature"}
            slides={t.heroSlides.map((s) => ({ ...s, src: PHOTOS[s.photo] }))}
          />
          <ol className="see-amen-feat__list">
            {rest.map((it, i) => (
              <li key={i}>
                <span className="see-amen-feat__item-icon"><Icon name={it.icon} size={18}/></span>
                <h3>{it.title}</h3>
                <p>{it.text}</p>
              </li>
            ))}
          </ol>
        </div>

        <div className="see-amen-incl">
          <span className="see-amen-incl__label">{t.inclLabel}</span>
          <ul className="see-amen-incl__list">
            {t.incl.map((item, i) => (
              <li key={i}>{item}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// LOCATION — stylized map placeholder + distance list + address card
// ─────────────────────────────────────────────────────────────────────────
function Location({ lang }) {
  const t = window.SEE_CONTENT[lang].location;
  return (
    <section className="see-section see-location" id="location">
      <div className="see-container">
        <header className="see-section__head see-section__head--split">
          <div>
            <p className="see-eyebrow">{t.eyebrow}</p>
            <h2 className="see-h2">
              {t.title.split("\n").map((l, i) => <span key={i}>{l}<br/></span>)}
            </h2>
          </div>
          <p className="see-section__sub">{t.sub}</p>
        </header>
        <div className="see-location__grid">
          <div className="see-location__map">
            <iframe
              title={lang === "de" ? "Karte SEEbalance Friedrichshafen" : "Map SEEbalance Friedrichshafen"}
              src="https://maps.google.com/maps?q=Schmalholzstra%C3%9Fe+5%2F7%2C+88048+Friedrichshafen&hl=de&z=15&output=embed"
              width="100%"
              height="100%"
              style={{ border: 0, display: "block" }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
            <div className="see-location__addr">
              <p className="see-eyebrow">{t.addrLabel}</p>
              <p>{t.addr}</p>
            </div>
          </div>

          <ul className="see-location__list">
            {t.points.map((p, i) => (
              <li key={i}>
                <span className="see-location__d">{p.d}</span>
                <div>
                  <h3>{p.t}</h3>
                  <p>{p.s}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}


// ─────────────────────────────────────────────────────────────────────────
// BOOKING — Lodgify placeholder + mock widget
// ─────────────────────────────────────────────────────────────────────────
const LODGIFY_SRC = "https://app.lodgify.com/book-now-box/stable/renderBookNowBox.js";

function Booking({ lang }) {
  const t = window.SEE_CONTENT[lang].booking;
  const [livePrice, setLivePrice] = useState(null);

  useEffect(() => {
    const existing = document.getElementById("lodgify-script");
    if (existing) {
      if (window.renderLodgifyBookNowBox) window.renderLodgifyBookNowBox();
    } else {
      const script = document.createElement("script");
      script.id = "lodgify-script";
      script.src = LODGIFY_SRC;
      script.async = true;
      document.body.appendChild(script);
    }

    const observer = new MutationObserver(() => {
      const el = document.querySelector('[data-testid="book-now-box.minimum-price-per-night.text"]');
      if (el && el.textContent) {
        setLivePrice(el.textContent.trim());
        observer.disconnect();
      }
    });
    observer.observe(document.getElementById("lodgify-widget") || document.body, {
      childList: true, subtree: true, characterData: true,
    });
    return () => observer.disconnect();
  }, []);

  return (
    <section className="see-section see-booking" id="book">
      <span id="booking" aria-hidden="true" className="see-anchor-target"/>
      <div className="see-container see-booking__grid">
        <div className="see-booking__copy">
          <p className="see-eyebrow">{t.eyebrow}</p>
          <h2 className="see-h2">
            {t.title.split("\n").map((l, i) => <span key={i}>{l}<br/></span>)}
          </h2>
          <p className="see-section__sub">{t.sub}</p>
          {livePrice && (
            <p className="see-booking__price">
              <strong>{livePrice}</strong>
            </p>
          )}
        </div>

        <div className="see-booking__widget" id="lodgify-widget">
          <div
            id="lodgify-book-now-box"
            data-rental-id="654295"
            data-website-id="558585"
            data-slug="seebalance"
            data-language-code={lang}
            data-new-tab="true"
            data-version="stable"
            data-check-in-label={t.arrival}
            data-check-out-label={t.departure}
            data-guests-label={t.guests}
            data-guests-singular-label={lang === "de" ? "{{NumberOfGuests}} Gast" : "{{NumberOfGuests}} guest"}
            data-guests-plural-label={lang === "de" ? "{{NumberOfGuests}} Gäste" : "{{NumberOfGuests}} guests"}
            data-book-button-label={t.check}
            data-minimum-price-per-night-first-label={t.from}
            data-minimum-price-per-night-second-label={t.perNight}
          />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// REVIEWS
// ─────────────────────────────────────────────────────────────────────────
function Reviews({ lang }) {
  const t = window.SEE_CONTENT[lang].reviews;
  const a = t.award;
  return (
    <section className="see-section see-reviews" id="reviews">
      <div className="see-container">
        <header className="see-section__head see-reviews__head">
          <div>
            <p className="see-eyebrow">{t.eyebrow}</p>
            <h2 className="see-h2">
              {t.title.split("\n").map((l, i) => <span key={i}>{l}<br/></span>)}
            </h2>
          </div>
        </header>
        <aside className="see-award" aria-label={`${a.platform} ${a.title}`}>
          <div className="see-award__media">
            <img
              src="images/apartment/booking-award-2025.jpg"
              alt={`${a.platform} ${a.title} – ${a.score} ${a.scoreOf}`}
              loading="lazy"
              decoding="async"
            />
          </div>
          <div className="see-award__body">
            <p className="see-award__label">{a.label}</p>
            <p className="see-award__platform">{a.platform}</p>
            <h3 className="see-award__title">{a.title}</h3>
            <div className="see-award__score">
              <span className="see-award__score-num">{a.score}</span>
              <span className="see-award__score-of">{a.scoreOf}</span>
            </div>
            <p className="see-award__note">{a.note}</p>
          </div>
        </aside>
        <div className="see-reviews__grid">
          {t.items.map((r, i) => (
            <figure key={i} className="see-review">
              <div className="see-review__stars" aria-label={lang === "de" ? "5 von 5 Sternen" : "5 out of 5 stars"}>
                {[0,1,2,3,4].map((j) => <span key={j} aria-hidden="true">★</span>)}
              </div>
              <blockquote>"{r.t}"</blockquote>
              <figcaption>
                <strong>{r.n}</strong>
                <span>{r.c} · <time>{r.d}</time></span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// FAQ — accordion
// ─────────────────────────────────────────────────────────────────────────
function FAQ({ lang }) {
  const t = window.SEE_CONTENT[lang].faq;
  const [open, setOpen] = useState(-1);
  return (
    <section className="see-section see-faq" id="faq">
      <div className="see-container see-faq__grid">
        <header className="see-faq__head">
          <p className="see-eyebrow">{t.eyebrow}</p>
          <h2 className="see-h2">{t.title}</h2>
        </header>
        <div className="see-faq__list">
          {t.items.map((it, i) => {
            const isOpen = open === i;
            const answerId = `faq-answer-${i}`;
            const questionId = `faq-question-${i}`;
            return (
              <article key={i} className={"see-faq__item" + (isOpen ? " is-open" : "")}>
                <button
                  id={questionId}
                  className="see-faq__q"
                  aria-expanded={isOpen}
                  aria-controls={answerId}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span>{it.q}</span>
                  <span className="see-faq__plus" aria-hidden="true">+</span>
                </button>
                <div
                  id={answerId}
                  className="see-faq__a"
                  role="region"
                  aria-labelledby={questionId}
                >
                  <div><p>{it.a}</p></div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────────────────
function Footer({ lang }) {
  const t = window.SEE_CONTENT[lang].footer;
  return (
    <footer className="see-footer">
      <div className="see-container see-footer__grid">
        <div>
          <span className="see-nav__wordmark see-nav__wordmark--lg">
            SEE<em>balance</em>
          </span>
          <p style={{ marginTop: 12 }}>{t.tag}</p>
        </div>
        <div>
          <p className="see-eyebrow">{t.contact}</p>
          <p><a href={"mailto:" + t.mail}>{t.mail}</a></p>
          <p>Schmalholzstr. 5/7, 88048 Friedrichshafen</p>
        </div>
        <div>
          <p className="see-eyebrow">Legal</p>
          <ul>
            {t.legal.map((l, i) => (
              <li key={i}><a href={i === 0 ? "/impressum.html" : "/datenschutz.html"}>{l}</a></li>
            ))}
          </ul>
        </div>
      </div>
      <div className="see-footer__bottom">
        <span>{t.copy}</span>
        <span>Lake Constance · Germany</span>
      </div>
    </footer>
  );
}

// Expose globally so app.jsx can use them
Object.assign(window, {
  Nav, Hero, About, Gallery, Amenities, Location,
  Guides, Booking, Reviews, FAQ, Footer, Icon, PHOTOS,
});