/* global React, BrandStrip, SectionHead, PageHero, WaveDivider,
   IconArrow, IconClose, IconMapPin, GALLERY_ITEMS, NEIGHBORHOOD, CATEGORIES */

const { useState: useStateGal, useEffect: useEffectGal } = React;

// =====================================================
// GALLERY PAGE (with lightbox)
// =====================================================
function GalleryPage() {
  const [filter, setFilter] = useStateGal("all");
  const [lightboxIdx, setLightboxIdx] = useStateGal(null);

  const filtered = filter === "all" ? GALLERY_ITEMS : GALLERY_ITEMS.filter((i) => i.kind === filter);

  useEffectGal(() => {
    if (lightboxIdx === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setLightboxIdx(null);
      if (e.key === "ArrowRight") setLightboxIdx((i) => (i + 1) % filtered.length);
      if (e.key === "ArrowLeft") setLightboxIdx((i) => (i - 1 + filtered.length) % filtered.length);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [lightboxIdx, filtered.length]);

  const filters = [
    { id: "all", lbl: "All" },
    { id: "exterior", lbl: "Exterior" },
    { id: "interior", lbl: "Interiors" },
    { id: "amenity", lbl: "Amenities" },
    { id: "lounge", lbl: "Lounge" },
    { id: "neighborhood", lbl: "Neighborhood" },
  ];

  return (
    <div>
      <PageHero
        eyebrow="Gallery"
        title="Look around."
        lede="A view through the lens of Boardwalk House — exterior, residences, amenities, and the neighborhood that surrounds us."
        photoUrl="images/aerial-2.jpeg"
      />

      <section className="section bg-cream">
        <div className="shell">
          <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap", marginBottom: "var(--space-7)" }}>
            {filters.map((f) => (
              <button key={f.id}
                      className={"btn btn-sm " + (filter === f.id ? "btn-navy" : "btn-outline")}
                      onClick={() => setFilter(f.id)}>
                {f.lbl}
              </button>
            ))}
          </div>

          <div className="gallery-grid">
            {filtered.map((it, idx) => (
              <div key={it.id} className={"gallery-item " + (it.size || "")} onClick={() => setLightboxIdx(idx)}>
                {it.img ? (
                  <img src={it.img} alt={it.caption} />
                ) : (
                  <div className="placeholder">
                    <div className="ph-tag">{it.placeholder.toUpperCase()}</div>
                  </div>
                )}
                <div className="overlay">
                  <span className="cap">{it.caption}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Lightbox */}
      <div className={"lightbox" + (lightboxIdx !== null ? " open" : "")} onClick={() => setLightboxIdx(null)}>
        {lightboxIdx !== null && filtered[lightboxIdx] && (
          <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
            <button className="nav-btn close" onClick={() => setLightboxIdx(null)}><IconClose size={20} /></button>
            <button className="nav-btn prev" onClick={() => setLightboxIdx((lightboxIdx - 1 + filtered.length) % filtered.length)}>‹</button>
            <button className="nav-btn next" onClick={() => setLightboxIdx((lightboxIdx + 1) % filtered.length)}>›</button>
            {filtered[lightboxIdx].img ? (
              <img src={filtered[lightboxIdx].img} alt={filtered[lightboxIdx].caption} />
            ) : (
              <div className="placeholder dark" style={{ width: "min(90vw, 900px)", aspectRatio: "16/10" }}>
                <div className="ph-tag">{filtered[lightboxIdx].placeholder.toUpperCase()}</div>
              </div>
            )}
            <div className="cap">
              {filtered[lightboxIdx].caption} · {lightboxIdx + 1} of {filtered.length}
            </div>
          </div>
        )}
      </div>

      <BrandStrip />
    </div>
  );
}

// =====================================================
// LOCATION PAGE (interactive map with pins)
// =====================================================
function LocationPage({ navTo, openTour }) {
  const [activeCat, setActiveCat] = useStateGal(null);
  const [activePin, setActivePin] = useStateGal(null);

  const visiblePins = activeCat
    ? NEIGHBORHOOD.filter((p) => p.category === activeCat || p.isHouse)
    : NEIGHBORHOOD;

  return (
    <div>
      <PageHero
        eyebrow="The Location"
        title="On the boardwalk.\nIn the middle of everything."
        lede="190 S Kentucky Avenue. Directly on the Atlantic City Boardwalk. Steps to the beach, minutes to dining, casinos, and entertainment."
        photoUrl="images/aerial-2.jpeg"
      />

      <section className="section bg-cream">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "var(--space-7)" }} className="map-grid">
            {/* Map */}
            <div>
              <div className="map-wrap">
                <svg className="map-svg" viewBox="0 0 100 62.5" preserveAspectRatio="none">
                  {/* Ocean */}
                  <rect x="55" y="0" width="45" height="62.5" fill="#bccfdb" />
                  {/* Beach strip */}
                  <rect x="48" y="0" width="7" height="62.5" fill="#e8d8b9" />
                  {/* Land */}
                  <rect x="0" y="0" width="48" height="62.5" fill="#eee7d6" />
                  {/* Streets — horizontal */}
                  {[8, 18, 28, 38, 48, 58].map((y) => (
                    <line key={"h"+y} x1="0" y1={y} x2="48" y2={y} stroke="#fff" strokeWidth="0.6" />
                  ))}
                  {/* Streets — vertical */}
                  {[6, 14, 22, 30, 38].map((x) => (
                    <line key={"v"+x} x1={x} y1="0" x2={x} y2="62.5" stroke="#fff" strokeWidth="0.6" />
                  ))}
                  {/* Boardwalk line */}
                  <line x1="48" y1="0" x2="48" y2="62.5" stroke="#8B6F4D" strokeWidth="0.4" strokeDasharray="1,1" />
                  {/* Some block tints */}
                  <rect x="20" y="32" width="14" height="10" fill="rgba(125,143,161,0.18)" />
                  <rect x="6" y="46" width="12" height="10" fill="rgba(139,111,77,0.12)" />
                  {/* Labels */}
                  <text x="75" y="32" fontFamily="Montserrat" fontSize="2.2" fill="#5b6573" letterSpacing="0.3"
                        textAnchor="middle" style={{ textTransform: "uppercase" }}>Atlantic Ocean</text>
                  <text x="51.5" y="58" fontFamily="Montserrat" fontSize="1.6" fill="#8B6F4D" letterSpacing="0.4"
                        transform="rotate(-90 51.5 58)" style={{ textTransform: "uppercase" }}>Boardwalk</text>
                  <text x="48" y="6" fontFamily="Montserrat" fontSize="1.4" fill="#8B6F4D" letterSpacing="0.3"
                        textAnchor="end" style={{ textTransform: "uppercase" }}>N →</text>
                </svg>
                {/* Pins */}
                {visiblePins.map((p) => (
                  <div key={p.id}
                       className={"map-pin" + (p.isHouse ? " house" : "") + (activePin === p.id ? " active" : "")}
                       style={{ left: p.x + "%", top: p.y + "%" }}
                       onClick={() => setActivePin(p.id === activePin ? null : p.id)}>
                    <div className="dot" />
                    <div className="label">{p.name} · {p.meta}</div>
                  </div>
                ))}
              </div>
              <p style={{ fontSize: 11, color: "var(--muted)", marginTop: 12, letterSpacing: "0.06em" }}>
                Hover or tap a pin for details. Click a category to filter.
              </p>
            </div>

            {/* Legend / categories */}
            <div>
              <span className="eyebrow" style={{ display: "block" }}>Neighborhood Highlights</span>
              <h3 style={{ fontSize: 28, marginTop: 6 }}>Live close to everything.</h3>
              <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 10, marginBottom: 24 }}>
                {NEIGHBORHOOD.length - 1} destinations within a short walk. Filter by category to explore.
              </p>
              <div style={{ display: "grid", gap: 4 }}>
                <button onClick={() => setActiveCat(null)}
                        style={{
                          background: !activeCat ? "rgba(13,27,42,0.06)" : "transparent",
                          border: "1px solid rgba(13,27,42,0.1)",
                          padding: "10px 14px",
                          fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
                          fontFamily: "var(--sans)", fontWeight: 600,
                          textAlign: "left", color: "var(--navy)"
                        }}>
                  Show All Categories
                </button>
                {CATEGORIES.filter((c) => !c.isHouse).map((c) => (
                  <button key={c.name}
                          className={"map-legend"}
                          onClick={() => setActiveCat(c.name === activeCat ? null : c.name)}
                          style={{
                            display: "flex", alignItems: "center", gap: 12,
                            background: activeCat === c.name ? "rgba(139,111,77,0.1)" : "transparent",
                            border: "1px solid rgba(13,27,42,0.08)",
                            padding: "12px 14px",
                            fontSize: 13, fontFamily: "var(--sans)",
                            color: "var(--navy)", textAlign: "left",
                            cursor: "pointer"
                          }}>
                    <span style={{ width: 10, height: 10, background: c.color, borderRadius: "50%" }} />
                    <span style={{ fontWeight: 600 }}>{c.name}</span>
                    <span style={{ marginLeft: "auto", color: "var(--muted)", fontSize: 11 }}>{c.count}</span>
                  </button>
                ))}
              </div>

              <div style={{ marginTop: 32, padding: 20, background: "var(--navy)", color: "var(--linen-2)" }}>
                <div className="eyebrow on-dark">Address</div>
                <div className="serif" style={{ fontSize: 22, marginTop: 8 }}>190 S Kentucky Avenue</div>
                <div style={{ fontSize: 13, color: "rgba(245,242,237,0.7)", marginTop: 4 }}>Atlantic City, NJ 08401</div>
                <button className="btn btn-ghost btn-sm" style={{ marginTop: 18 }} onClick={openTour}>
                  Schedule a Tour <IconArrow size={14} />
                </button>
              </div>
            </div>
          </div>

          {/* Distance grid */}
          <div style={{ marginTop: "var(--space-9)" }}>
            <SectionHead
              eyebrow="By the Numbers"
              title="A short walk to everything."
            />
            <div className="card-grid cols-4">
              {[
                { num: "0", lbl: "Steps to the Boardwalk" },
                { num: "30s", lbl: "Walk to the Beach" },
                { num: "5min", lbl: "To Major Casinos" },
                { num: "10min", lbl: "To AC Expressway" },
              ].map((s) => (
                <div key={s.lbl} style={{
                  padding: "32px 24px",
                  background: "#fff",
                  border: "1px solid rgba(13,27,42,0.08)",
                  textAlign: "center"
                }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 56, lineHeight: 1, color: "var(--bronze)", fontWeight: 500 }}>
                    {s.num}
                  </div>
                  <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 600, color: "var(--navy)", marginTop: 14 }}>
                    {s.lbl}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <BrandStrip />
    </div>
  );
}

Object.assign(window, { GalleryPage, LocationPage });