// Video block (Dine / breakfast) + Gallery with lightbox
function Dine() {
  const vidRef = useRef(null);
  const [muted, setMuted] = useState(true);

  // Force muted on mount — React's `muted` attr is not always applied
  useEffect(() => {
    if (vidRef.current) {
      vidRef.current.muted = true;
      vidRef.current.volume = 0;
    }
  }, []);

  const toggleMute = () => {
    if (!vidRef.current) return;
    vidRef.current.muted = !vidRef.current.muted;
    setMuted(vidRef.current.muted);
  };

  return (
    <section id="dine" style={{padding: "120px 0", background: "var(--paper)"}}>
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="mono" style={{color:"var(--terracotta)"}}>04 — The kitchen</div>
            <h2>Breakfast<br/>by the pine.</h2>
          </div>
          <p>
            A long buffet in the new restaurant — local bread baked that morning, eggs to order, Greek yoghurt with thyme honey, fruit from the village garden. Served 08:00 to 11:00. The pool bar takes over after.
          </p>
        </div>

        <div className="dine-grid">
          <div className="dine-video">
            <video
              ref={vidRef}
              src="https://simonking.gr/wp-content/uploads/2025/07/BREAKFAST-BUFFET.mp4"
              autoPlay loop playsInline
              muted
              poster="https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075622-1030x773.jpg"
            />
            <div className="dine-overlay-meta">
              <div className="mono">REC · 00:42 · LOOP</div>
              <button className="mute-btn" onClick={toggleMute}>
                {muted ? "🔇 Unmute" : "🔊 Mute"}
              </button>
            </div>
          </div>

          <aside className="dine-side">
            <div className="dine-card">
              <div className="mono" style={{color:"var(--terracotta)",marginBottom:14}}>Daily · 08:00 – 11:00</div>
              <div style={{fontFamily:"Cormorant Garamond, serif", fontSize:32, lineHeight:1.2, marginBottom:18}}>
                "<em>Πρωινό</em>" — the slow Greek breakfast.
              </div>
              <p style={{color:"var(--ink-soft)", fontSize:14, lineHeight:1.65, margin:0}}>
                Twelve hot dishes, a wall of fresh bread, yoghurt three ways, twelve kinds of cheese. Included with every stay.
              </p>
            </div>

            <div className="dine-stats">
              <div className="dstat"><div className="num">12</div><div className="lbl">Hot dishes</div></div>
              <div className="dstat"><div className="num">3h</div><div className="lbl">Service</div></div>
              <div className="dstat"><div className="num">€14</div><div className="lbl">/ day, à la carte</div></div>
            </div>

            <div className="dine-card" style={{background:"var(--aegean-deep)", color:"var(--paper)"}}>
              <div className="mono" style={{color:"color-mix(in srgb, var(--paper) 60%, transparent)",marginBottom:14}}>Then, from noon</div>
              <div style={{fontFamily:"Cormorant Garamond, serif", fontSize:24, lineHeight:1.3}}>
                Pool bar opens. Snacks, drinks, an espresso machine that knows what it's doing.
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

const GALLERY = [
  { src: "assets/rooms/suite-main.webp",                                                      cat: "Rooms",     w: 2, h: 2, cap: "Junior Suite — bed and bay" },
  { src: "https://simonking.gr/wp-content/uploads/2023/07/IMG_20230708_111250-1500x630.jpg", cat: "Pool",     w: 3, h: 2, cap: "The new pool, west wing" },
  { src: "assets/rooms/junior-suite-4.webp",                                                  cat: "Rooms",     w: 1, h: 1, cap: "Suite, rope headboard & sconces" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075622-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Morning yoghurt & honey" },
  { src: "assets/rooms/family-studio-3.webp",                                                 cat: "Rooms",     w: 1, h: 1, cap: "Family Studio, sleeps four" },
  { src: "https://simonking.gr/wp-content/uploads/2021/12/sld3.jpg",                          cat: "Resort",    w: 2, h: 2, cap: "The resort at dusk" },
  { src: "assets/rooms/junior-suite-2.webp",                                                  cat: "Rooms",     w: 1, h: 1, cap: "Suite balcony, stone walls & view" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075630-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Eggs, three ways" },
  { src: "https://simonking.gr/wp-content/uploads/2022/12/aDSC_5999%CE%B1-1500x630.jpg",      cat: "Resort",    w: 2, h: 1, cap: "Simon King New — the new wing" },
  { src: "assets/rooms/junior-suite-3.webp",                                                  cat: "Rooms",     w: 1, h: 1, cap: "Suite bathroom — marble, brass" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075644-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Buffet, mid-service" },
  { src: "https://simonking.gr/wp-content/uploads/2021/12/sd1.jpg",                           cat: "Resort",    w: 1, h: 2, cap: "Simon Prince Privé" },
  { src: "assets/rooms/junior-suite-duplex-3.webp",                                           cat: "Rooms",     w: 1, h: 1, cap: "Junior Duplex — upper sleeping platform" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075651-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Local bread, baked at six" },
  { src: "assets/rooms/family-studio-1.webp",                                                 cat: "Rooms",     w: 1, h: 1, cap: "Family Studio — bunks + kitchen" },
  { src: "https://simonking.gr/wp-content/uploads/2023/03/photo-output-1030x742.jpeg",        cat: "Wellness",  w: 2, h: 1, cap: "Sunrise yoga on the deck" },
  { src: "assets/rooms/junior-suite-duplex-2.webp",                                           cat: "Rooms",     w: 1, h: 1, cap: "Duplex — staircase & living" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075711-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Fruit from the village garden" },
  { src: "assets/rooms/family-studio-2.webp",                                                 cat: "Rooms",     w: 1, h: 1, cap: "Family Studio — towel and welcome" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075700-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Cheese wall" },
  { src: "https://simonking.gr/wp-content/uploads/2021/12/sld4.jpg",                          cat: "Resort",    w: 2, h: 1, cap: "Across the bay" },
  { src: "assets/rooms/junior-suite-1.webp",                                                  cat: "Rooms",     w: 1, h: 1, cap: "Suite, master bedroom" },
  { src: "https://simonking.gr/wp-content/uploads/2023/03/group-1030x773.jpg",                cat: "Wellness",  w: 1, h: 1, cap: "Yoga, group session" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075805-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Honey & thyme" },
  { src: "assets/rooms/family-studio-4.webp",                                                 cat: "Rooms",     w: 1, h: 1, cap: "Family Studio — nautical corner" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075744-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "Pastries, just out" },
  { src: "https://simonking.gr/wp-content/uploads/2023/03/viber_image_2021-07-02_12-52-58-1030x576.jpeg", cat: "Wellness", w: 2, h: 1, cap: "Stretch, at the edge of the pine line" },
  { src: "https://simonking.gr/wp-content/uploads/2025/06/IMG_20250629_075844-1030x773.jpg", cat: "Breakfast", w: 1, h: 1, cap: "The last plate" },
  { src: "https://simonking.gr/wp-content/uploads/2023/03/viber_image_2021-06-26_08-57-27-1030x773.jpg", cat: "Wellness",  w: 1, h: 1, cap: "Morning, deck side" }
];

// Patch wellness image (the one ending .jpeg might 404) — fallback to .jpg variant
GALLERY.forEach(g => { if (g.src.includes("viber_image_2021-07-02_12-52-58-1030x576.jpeg")) g.src = "https://simonking.gr/wp-content/uploads/2023/03/viber_image_2021-07-02_12-52-58-1030x576.jpg"; });

function Gallery() {
  const cats = ["All", "Pool", "Breakfast", "Rooms", "Resort", "Wellness"];
  const [cat, setCat] = useState("All");
  const [lightbox, setLightbox] = useState(null);

  const items = cat === "All" ? GALLERY : GALLERY.filter(g => g.cat === cat);

  // ESC and arrow handling
  useEffect(() => {
    if (lightbox == null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setLightbox(null);
      if (e.key === "ArrowRight") setLightbox(i => (i + 1) % items.length);
      if (e.key === "ArrowLeft") setLightbox(i => (i - 1 + items.length) % items.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lightbox, items.length]);

  return (
    <section id="gallery" style={{background:"var(--paper-2)", paddingBottom: 140}}>
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="mono" style={{color:"var(--terracotta)"}}>06 — Photo gallery</div>
            <h2>{GALLERY.length}<br/>frames.</h2>
          </div>
          <div>
            <p style={{maxWidth:"48ch"}}>
              A small archive — the buildings, the breakfast room, the pool at the lazy hour, mornings on the yoga deck. Click any frame to enlarge; arrow keys to walk through.
            </p>
            <div className="gal-cats">
              {cats.map(c => (
                <button
                  key={c}
                  className={`gal-cat ${c === cat ? "on" : ""}`}
                  onClick={() => setCat(c)}
                >
                  {c}
                  <span className="ct">{c === "All" ? GALLERY.length : GALLERY.filter(g => g.cat === c).length}</span>
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="gal-grid">
          {items.map((g, i) => (
            <div
              key={i}
              className="gal-tile"
              onClick={() => setLightbox(i)}
            >
              <img src={g.src} alt={g.cap} loading="lazy" />
              <div className="gal-meta">
                <div className="mono">0{(i + 1).toString().padStart(2,"0")} / {g.cat}</div>
                <div className="cap">{g.cap}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {lightbox != null && (
        <div className="lightbox" onClick={() => setLightbox(null)}>
          <button className="lb-close" onClick={(e) => { e.stopPropagation(); setLightbox(null); }}>Close ×</button>
          <button className="lb-nav prev" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox - 1 + items.length) % items.length); }}>‹</button>
          <button className="lb-nav next" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox + 1) % items.length); }}>›</button>
          <div className="lb-stage" onClick={(e) => e.stopPropagation()}>
            <img src={items[lightbox].src} alt={items[lightbox].cap} />
            <div className="lb-meta">
              <div className="mono">{(lightbox + 1).toString().padStart(2,"0")} / {items.length.toString().padStart(2,"0")} · {items[lightbox].cat}</div>
              <div className="cap">{items[lightbox].cap}</div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

Object.assign(window, { Dine, Gallery });