// ====== Gallery Page ======
const ALL_PROJECTS = [
  { label: "Hardwood Living Room Inspiration",       img: "/images/proj-living-hardwood.jpg", cat: "flooring", w: 1200, h: 900 },
  { label: "Modern Kitchen Remodel Inspiration",     img: "/images/proj-kitchen-luxe.jpg",    cat: "remodel",  w: 1200, h: 900 },
  { label: "Master Bath Remodel Inspiration",        img: "/images/proj-bath.jpg",            cat: "remodel",  w: 1200, h: 900 },
  { label: "Classic Kitchen Refresh Inspiration",    img: "/images/proj-kitchen-classic.jpg", cat: "remodel",  w: 1200, h: 900 },
  { label: "Vinyl Plank Living Room Inspiration",    img: "/images/proj-living-vinyl.jpg",    cat: "flooring", w: 1200, h: 900 },
  { label: "Flooring Installation Inspiration",      img: "/images/flooring.jpg",             cat: "flooring", w: 1086, h: 1448 },
  { label: "Exterior Painting Inspiration",          img: "/images/painting.jpg",             cat: "painting", w: 1086, h: 1448 },
  { label: "Custom Cabinet Install Inspiration",     img: "/images/cabinets.jpg",             cat: "cabinets", w: 1086, h: 1448 },
  { label: "Energy-Efficient Windows Inspiration",   img: "/images/windows.jpg",              cat: "windows",  w: 1086, h: 1448 },
  { label: "Front Door Replacement Inspiration",     img: "/images/doors.jpg",                cat: "doors",    w: 1086, h: 1448 },
];

const CATS = [
  { id: "all",      label: "All Examples" },
  { id: "flooring", label: "Flooring" },
  { id: "painting", label: "Painting" },
  { id: "cabinets", label: "Cabinets" },
  { id: "remodel",  label: "Remodeling" },
  { id: "windows",  label: "Windows" },
  { id: "doors",    label: "Doors" },
];

function GalleryPage() {
  const [cat, setCat]       = React.useState("all");
  const [lbOpen, setLbOpen] = React.useState(false);
  const [lbIdx,  setLbIdx]  = React.useState(0);

  const filtered = cat === "all" ? ALL_PROJECTS : ALL_PROJECTS.filter(p => p.cat === cat);

  const openLb = (idx) => { setLbIdx(idx); setLbOpen(true); };
  const prev   = ()    => setLbIdx((lbIdx - 1 + filtered.length) % filtered.length);
  const next   = ()    => setLbIdx((lbIdx + 1) % filtered.length);

  return (
    <PageLayout activeSection="gallery">

      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">AI-Generated Inspiration</span>
          <h1>Home Design Gallery</h1>
          <p className="lede">
            Browse example looks for flooring, painting, cabinets, remodels,
            windows, and doors. Images are for inspiration only.
          </p>
        </div>
      </section>

      {/* Gallery */}
      <section className="page-section">
        <div className="container">

          {/* Filter pills */}
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 32 }}>
            {CATS.map(c => (
              <button
                key={c.id}
                onClick={() => setCat(c.id)}
                style={{
                  padding: "8px 18px",
                  borderRadius: 999,
                  border: "2px solid",
                  borderColor: cat === c.id ? "var(--orange)" : "var(--line)",
                  background: cat === c.id ? "var(--orange)" : "#fff",
                  color: cat === c.id ? "#fff" : "var(--navy)",
                  fontWeight: 600,
                  cursor: "pointer",
                  fontSize: ".9rem",
                  transition: "all .15s",
                }}
              >
                {c.label}
              </button>
            ))}
          </div>

          {/* Grid */}
          <div className="full-gallery-grid">
            {filtered.map((p, i) => (
              <div
                key={i}
                className="full-gallery-item"
                onClick={() => openLb(i)}
                role="button"
                tabIndex={0}
                onKeyDown={e => e.key === "Enter" && openLb(i)}
                aria-label={`View ${p.label}`}
              >
                <img src={p.img} alt={`AI-generated ${p.label} for Ace Home Solutions`} loading="lazy" width={p.w} height={p.h} />
                <div className="overlay">
                  <span>{p.label}</span>
                </div>
              </div>
            ))}
          </div>

          {filtered.length === 0 && (
            <p style={{ textAlign: "center", color: "var(--muted)", padding: "40px 0" }}>
              No projects in this category yet — check back soon!
            </p>
          )}
        </div>
      </section>

      {/* Lightbox */}
      <Lightbox
        open={lbOpen}
        idx={lbIdx}
        items={filtered}
        onClose={() => setLbOpen(false)}
        onPrev={prev}
        onNext={next}
      />

      {/* CTA */}
      <div className="cta-band">
        <div className="container">
          <h2>Ready to Transform Your Home?</h2>
          <p>Get a free estimate and let's plan your project together.</p>
          <button
            className="btn-white"
            onClick={() => window.__openQuote && window.__openQuote()}
          >
            Get a Free Quote <I.Arrow size={14} />
          </button>
        </div>
      </div>

    </PageLayout>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<GalleryPage />);