/* global React */

// Projects = our stone colours styled in full kitchens. Photos live in /images/
// as [slug]-N.jpg and also feed the per-colour galleries on the materials pages.
const PROJECTS = [
  { colour: "Calescato",        slug: "quartz-calescato",        material: "Quartz",  count: 8 },
  { colour: "Layla",            slug: "quartz-layla",            material: "Quartz",  count: 5 },
  { colour: "Violuxe",          slug: "quartz-violuxe",          material: "Quartz",  count: 5 },
  { colour: "Tagore",           slug: "quartz-tagore",           material: "Quartz",  count: 4 },
  { colour: "Paradise",         slug: "quartz-paradise",         material: "Quartz",  count: 3 },
  { colour: "Sweet Caroline",   slug: "quartz-sweet-caroline",   material: "Quartz",  count: 3 },
  { colour: "Armelia",          slug: "quartz-armelia",          material: "Quartz",  count: 2 },
  { colour: "Artic",            slug: "quartz-artic",            material: "Quartz",  count: 2 },
  { colour: "Eirene",           slug: "quartz-eirene",           material: "Quartz",  count: 2 },
  { colour: "Kells",            slug: "quartz-kells",            material: "Quartz",  count: 2 },
  { colour: "Liberty",          slug: "quartz-liberty",          material: "Quartz",  count: 2 },
  { colour: "Rhapsody",         slug: "quartz-rhapsody",         material: "Quartz",  count: 2 },
  { colour: "Perecimo",         slug: "granite-perecimo",        material: "Granite", count: 2 },
  { colour: "Ariston",          slug: "quartz-ariston",          material: "Quartz",  count: 1 },
  { colour: "Belvedere",        slug: "quartz-belvedere",        material: "Quartz",  count: 1 },
  { colour: "BVLGARI",          slug: "quartz-bvlgari",          material: "Quartz",  count: 1 },
  { colour: "Carmen",           slug: "quartz-carmen",           material: "Quartz",  count: 1 },
  { colour: "Circe",            slug: "quartz-circe",            material: "Quartz",  count: 1 },
  { colour: "Dalai",            slug: "quartz-dalai",            material: "Quartz",  count: 1 },
  { colour: "Fausto",           slug: "quartz-fausto",           material: "Quartz",  count: 1 },
  { colour: "Fausto Full Body", slug: "quartz-fausto-full-body", material: "Quartz",  count: 1 },
  { colour: "Frozen",           slug: "quartz-frozen",           material: "Quartz",  count: 1 },
  { colour: "Georgia",          slug: "quartz-georgia",          material: "Quartz",  count: 1 },
  { colour: "Iceberg",          slug: "quartz-iceberg",          material: "Quartz",  count: 1 },
  { colour: "Mercury",          slug: "quartz-mercury",          material: "Quartz",  count: 1 },
  { colour: "Misty Brown",      slug: "quartz-misty-brown",      material: "Quartz",  count: 1 },
  { colour: "Norma",            slug: "quartz-norma",            material: "Quartz",  count: 1 },
  { colour: "Otello",           slug: "quartz-otello",           material: "Quartz",  count: 1 },
  { colour: "Patagonia",        slug: "quartz-patagonia",        material: "Quartz",  count: 1 },
  { colour: "Rigoletto",        slug: "quartz-rigoletto",        material: "Quartz",  count: 1 },
  { colour: "River Deep",       slug: "quartz-river-deep",       material: "Quartz",  count: 1 },
  { colour: "Sonoro",           slug: "quartz-sonoro",           material: "Quartz",  count: 1 },
  { colour: "Taj",              slug: "quartz-taj",              material: "Quartz",  count: 1 },
  { colour: "Teresa",           slug: "quartz-teresa",           material: "Quartz",  count: 1 },
  { colour: "Tosca",            slug: "quartz-tosca",            material: "Quartz",  count: 1 },
  { colour: "White Shimmer",    slug: "quartz-white-shimmer",    material: "Quartz",  count: 1 },
  { colour: "White Water",      slug: "quartz-white-water",      material: "Quartz",  count: 1 },
];

const PROJECT_CARDS = PROJECTS.flatMap(p =>
  Array.from({ length: p.count }, (_, i) => ({
    colour: p.colour, material: p.material,
    photo: `/images/${p.slug}-${i + 1}.jpg`,
    key: `${p.slug}-${i + 1}`,
  }))
);

function Work({ navigate }) {
  const [filter, setFilter] = React.useState("All");
  const [lightbox, setLightbox] = React.useState(null);

  const mats = ["All", "Quartz", "Granite"];
  const visible = filter === "All" ? PROJECT_CARDS : PROJECT_CARDS.filter(w => w.material === filter);

  return (
    <React.Fragment>
      {/* Hero */}
      <section style={{position: "relative", padding: "var(--pad)", paddingTop: "clamp(118px, 13vw, 170px)", paddingBottom: "clamp(56px, 6vw, 90px)", background: "var(--slate)", color: "white", overflow: "hidden"}}>
        <div className="photo-hero" style={{position: "absolute", inset: 0, opacity: 0.45, backgroundImage: "url(/images/quartz-calescato-1.jpg)", backgroundSize: "cover", backgroundPosition: "center"}}></div>
        <div style={{position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(15,37,53,0.7), rgba(15,37,53,0.95))"}}></div>

        <div className="container" style={{position: "relative", zIndex: 2}}>
          <div className="kicker" style={{color: "#7CC3D8", marginBottom: 24}}>The portfolio</div>
          <h1 className="display" style={{color: "white", maxWidth: 1100}}>
            Every colour,<br /><em className="pull" style={{color: "#7CC3D8"}}>at home.</em>
          </h1>
          <p className="lede" style={{color: "rgba(255,255,255,0.8)", maxWidth: 580, marginTop: 28, fontSize: 18}}>
            See our quartz and granite worktops styled in full kitchens — the best way to picture yours before the slab is cut.
          </p>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{padding: "32px var(--pad)", borderBottom: "1px solid var(--line)", background: "var(--warm)", position: "sticky", top: 64, zIndex: 50, backdropFilter: "blur(8px)"}}>
        <div className="container" style={{display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16}}>
          <div className="work-filter-tabs" style={{display: "flex", gap: 32}}>
            {mats.map(c => (
              <button key={c} onClick={() => setFilter(c)}
                      style={{fontSize: 12, fontFamily: "var(--sans)", textTransform: "uppercase", letterSpacing: "0.18em", color: filter === c ? "var(--navy)" : "var(--grey)", fontWeight: 500, paddingBottom: 6, borderBottom: filter === c ? "1px solid var(--teal)" : "1px solid transparent", transition: "all 200ms ease"}}>
                {c} <span style={{color: "var(--grey-2)", marginLeft: 6}}>· {c === "All" ? PROJECT_CARDS.length : PROJECT_CARDS.filter(w => w.material === c).length}</span>
              </button>
            ))}
          </div>
          <div className="kicker" style={{color: "var(--grey)"}}>Showing {visible.length}</div>
        </div>
      </section>

      {/* Grid */}
      <section className="section">
        <div className="container">
          <div className="work-page-grid" style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, gridAutoRows: 280}}>
            {visible.map(w => (
              <div key={w.key} className="work-card demo-photo-card" onClick={() => setLightbox(w)}
                   style={{backgroundImage: `url(${w.photo})`}}>
                <div className="work-img" aria-hidden="true" style={{width: "100%", height: "100%"}}></div>
                <div className="work-meta">
                  <div className="work-loc">{w.material}</div>
                  <div className="work-name">{w.colour}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section lt" style={{textAlign: "center"}}>
        <div className="container narrow">
          <div className="kicker" style={{marginBottom: 20}}>Yours could be next</div>
          <h2 className="title" style={{color: "var(--navy)"}}>
            Like what you see<br /><em className="pull" style={{color: "var(--teal)"}}>Let's talk about your project.</em>
          </h2>
          <div style={{marginTop: 48, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap"}}>
            <a className="btn btn-teal" href="#/booking" onClick={(e) => { e.preventDefault(); navigate("booking"); }}>Book a Visit <span className="arr">→</span></a>
            <a className="btn btn-navy" href="#/materials" onClick={(e) => { e.preventDefault(); navigate("materials"); }}>See Materials</a>
          </div>
        </div>
      </section>

      {/* Lightbox */}
      {lightbox && (
        <div onClick={() => setLightbox(null)}
             style={{position: "fixed", inset: 0, background: "rgba(15,37,53,0.92)", zIndex: 200, display: "grid", placeItems: "center", padding: 40, cursor: "zoom-out"}}>
          <div onClick={(e) => e.stopPropagation()} style={{maxWidth: 1100, width: "100%", cursor: "default"}}>
            <div className="demo-photo-card lightbox-photo" style={{aspectRatio: "4/3", backgroundImage: `url(${lightbox.photo})`}}></div>
            <div style={{marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "flex-end", color: "white", flexWrap: "wrap", gap: 16}}>
              <div>
                <div style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#7CC3D8"}}>{lightbox.material}</div>
                <div style={{fontFamily: "var(--serif)", fontSize: 36, marginTop: 8}}>{lightbox.colour}</div>
                <a className="btn-text on-dark" href={`#/materials/${lightbox.material.toLowerCase()}`}
                   onClick={(e) => { e.preventDefault(); setLightbox(null); navigate("materials/" + lightbox.material.toLowerCase()); }}
                   style={{marginTop: 12, display: "inline-flex"}}>
                  See {lightbox.colour} <span>{"->"}</span>
                </a>
              </div>
              <button onClick={() => setLightbox(null)}
                      style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)", border: "1px solid rgba(255,255,255,0.25)", padding: "12px 20px"}}>
                Close ×
              </button>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

window.Work = Work;