// Projects index (filterable grid) + Case Study template.

function ProjectsIndex({ setRoute, initialSector }) {
  const { PROJECTS, SECTORS } = window.GLI_DATA;
  const [sector, setSector] = useState(initialSector || "All");
  const filtered = useMemo(() => {
    if (sector === "All") return PROJECTS;
    return PROJECTS.filter(p => p.sector === sector);
  }, [sector]);
  const onOpen = (id) => setRoute({ page: "project", id });

  return (
    <div className="page-enter">
      <section style={{ padding: "64px 0 32px", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <Eyebrow n="—">All projects</Eyebrow>
          <h1 className="display-xl" style={{ marginTop: 16, marginBottom: 24, maxWidth: "20ch" }}>
            <em style={{ fontStyle: "italic", color: "var(--green-deep)" }}>{filtered.length}</em> projects across the GCC and beyond.
          </h1>
          <p className="lede" style={{ maxWidth: "56ch", marginBottom: 40 }}>
            A working selection of the thousand-plus interiors we've delivered since 1976. Royal palaces and private residences are anonymised throughout — full case studies available on signed NDA.
          </p>
          <div className="filter-row">
            <span className="mono" style={{ color: "var(--graphite)", marginRight: 8 }}>FILTER ·</span>
            <Pill active={sector === "All"} onClick={() => setSector("All")}>
              All <span style={{ opacity: 0.5, marginLeft: 6 }}>{PROJECTS.length}</span>
            </Pill>
            {SECTORS.map(s => (
              <Pill key={s.id} active={sector === s.name} onClick={() => setSector(s.name)}>
                {s.name} <span style={{ opacity: 0.5, marginLeft: 6 }}>{PROJECTS.filter(p => p.sector === s.name).length}</span>
              </Pill>
            ))}
            <span style={{ flex: 1 }} />
            <span className="mono" style={{ color: "var(--graphite)" }}>{filtered.length} SHOWN</span>
          </div>
        </div>
      </section>

      <section style={{ padding: "64px 0 120px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, rowGap: 80 }}>
            {filtered.map(p => <ProjectCard key={p.id} p={p} onOpen={onOpen} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

function CaseStudy({ id, setRoute }) {
  const { PROJECTS } = window.GLI_DATA;
  const p = PROJECTS.find(x => x.id === id) || PROJECTS[0];
  const idx = PROJECTS.findIndex(x => x.id === p.id);
  const next = PROJECTS[(idx + 1) % PROJECTS.length];
  const prev = PROJECTS[(idx - 1 + PROJECTS.length) % PROJECTS.length];
  const [lightbox, setLightbox] = useState(null);

  return (
    <div className="page-enter">
      <Lightbox src={lightbox} onClose={() => setLightbox(null)} />

      {/* Hero */}
      <section style={{ position: "relative", height: "80vh", overflow: "hidden", background: "var(--ink)" }}>
        <img src={p.hero} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.92 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,33,63,0.2) 0%, rgba(20,33,63,0) 30%, rgba(20,33,63,0.7) 100%)" }} />
        <div style={{ position: "absolute", bottom: 48, left: 0, right: 0, color: "#fff" }}>
          <div className="container">
            <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 18 }}>
              <button className="mono" style={{ color: "rgba(255,255,255,0.7)" }} onClick={() => setRoute({ page: "projects" })}>← ALL PROJECTS</button>
              <span style={{ color: "rgba(255,255,255,0.4)" }}>/</span>
              <span className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>{p.sector.toUpperCase()}</span>
              {p.nda && <span className="nda-tag" style={{ background: "rgba(255,255,255,0.15)", color: "rgba(255,255,255,0.85)" }}>NDA · Anonymised</span>}
            </div>
            <h1 className="display-xl" style={{ color: "#fff", margin: 0, maxWidth: "22ch" }}>{p.name}</h1>
          </div>
        </div>
      </section>

      {/* Meta */}
      <div className="container" style={{ marginTop: 0 }}>
        <div className="cs-meta">
          <div>
            <div className="mono" style={{ color: "var(--graphite)" }}>SECTOR</div>
            <div style={{ marginTop: 8, fontFamily: "var(--font-serif)", fontSize: 22 }}>{p.sector}</div>
          </div>
          <div>
            <div className="mono" style={{ color: "var(--graphite)" }}>LOCATION</div>
            <div style={{ marginTop: 8, fontFamily: "var(--font-serif)", fontSize: 22 }}>{p.location}</div>
          </div>
          <div>
            <div className="mono" style={{ color: "var(--graphite)" }}>SCOPE</div>
            <div style={{ marginTop: 8, fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.3 }}>{p.scope}</div>
          </div>
          <div>
            <div className="mono" style={{ color: "var(--graphite)" }}>YEAR</div>
            <div style={{ marginTop: 8, fontFamily: "var(--font-serif)", fontSize: 22 }}>{p.year}</div>
          </div>
        </div>
      </div>

      {/* Narrative — Brief → Design → Manufacture → Install → Outcome */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 64 }}>
            <div>
              <Eyebrow>Brief</Eyebrow>
            </div>
            <div style={{ maxWidth: "60ch" }}>
              <p className="lede" style={{ color: "var(--ink)" }}>{p.brief}</p>
            </div>
          </div>
        </div>
      </section>

      <div className="container"><div className="rule" /></div>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
            <div className="img-wrap" style={{ aspectRatio: "4/3" }}>
              <img src={p.gallery[0]} alt="" onClick={() => setLightbox(p.gallery[0])} style={{ cursor: "zoom-in" }} />
            </div>
            <div>
              <Eyebrow n="01">Design</Eyebrow>
              <p className="lede" style={{ marginTop: 16, color: "var(--ink)" }}>{p.design}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section mfg">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
            <div>
              <Eyebrow n="02">Manufacture · in our Dubai factory</Eyebrow>
              <p className="lede" style={{ marginTop: 16, color: "rgba(255,255,255,0.85)" }}>{p.manufacture}</p>
              <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.2)", display: "flex", gap: 32, flexWrap: "wrap" }}>
                <div>
                  <div className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>BUILT IN-HOUSE</div>
                  <div style={{ marginTop: 6, fontFamily: "var(--font-serif)", fontSize: 18, color: "#fff" }}>Joinery · Furniture · Metalwork · Soft furnishings</div>
                </div>
              </div>
            </div>
            <div className="img-wrap" style={{ aspectRatio: "4/3" }}>
              <img src={p.gallery[1] || p.gallery[0]} alt="" onClick={() => setLightbox(p.gallery[1] || p.gallery[0])} style={{ cursor: "zoom-in" }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
            <div className="img-wrap" style={{ aspectRatio: "4/3" }}>
              <img src={p.gallery[2] || p.gallery[0]} alt="" onClick={() => setLightbox(p.gallery[2] || p.gallery[0])} style={{ cursor: "zoom-in" }} />
            </div>
            <div>
              <Eyebrow n="03">Install</Eyebrow>
              <p className="lede" style={{ marginTop: 16, color: "var(--ink)" }}>{p.install}</p>
              <div style={{ marginTop: 32, borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                <Eyebrow n="04">Outcome</Eyebrow>
                <p style={{ marginTop: 12, fontSize: 17, color: "var(--ink-2)", lineHeight: 1.55 }}>{p.outcome}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Palette */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <SectionHead eyebrow="Materials · selected palette" eyebrowN="05" title="The four colours that defined this fit-out." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            {p.palette.map((c, i) => (
              <div key={i}>
                <div style={{ aspectRatio: "1/1", background: c, border: "1px solid var(--line)" }} />
                <div className="mono" style={{ marginTop: 12, color: "var(--graphite)" }}>{c.toUpperCase()}</div>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 17, marginTop: 4 }}>
                  {["Primary", "Accent", "Field", "Detail"][i]}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Gallery" eyebrowN="06" title="Selected images." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {p.gallery.map((src, i) => (
              <div key={i} className="img-wrap" style={{ aspectRatio: i === 0 ? "1/1" : "4/3", cursor: "zoom-in" }} onClick={() => setLightbox(src)}>
                <img src={src} alt="" />
              </div>
            ))}
          </div>
          <div className="credit" style={{ marginTop: 24 }}>{p.credit}</div>
        </div>
      </section>

      {/* CTA + nav */}
      <section className="section-lg" style={{ background: "var(--ink)", color: "#fff" }}>
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
            <Eyebrow><span style={{ color: "rgba(255,255,255,0.6)" }}>Like this one?</span></Eyebrow>
            <h2 className="display-xl" style={{ color: "#fff", marginTop: 16, marginBottom: 32 }}>Start a similar project.</h2>
            <button className="btn btn-solid" style={{ background: "#fff", color: "var(--ink)", borderColor: "#fff", padding: "16px 32px" }}
              onClick={() => setRoute({ page: "contact", projectType: p.sector })}>
              Request a quote &nbsp;→
            </button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginTop: 96, borderTop: "1px solid rgba(255,255,255,0.18)" }}>
            <a onClick={() => setRoute({ page: "project", id: prev.id })} style={{ padding: "32px 0", cursor: "pointer", borderRight: "1px solid rgba(255,255,255,0.12)", paddingRight: 32 }}>
              <div className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>← PREVIOUS</div>
              <div className="display-m" style={{ color: "#fff", marginTop: 8 }}>{prev.name}</div>
              <div className="mono" style={{ color: "rgba(255,255,255,0.5)", marginTop: 6 }}>{prev.sector}</div>
            </a>
            <a onClick={() => setRoute({ page: "project", id: next.id })} style={{ padding: "32px 0 32px 32px", cursor: "pointer", textAlign: "right" }}>
              <div className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>NEXT →</div>
              <div className="display-m" style={{ color: "#fff", marginTop: 8 }}>{next.name}</div>
              <div className="mono" style={{ color: "rgba(255,255,255,0.5)", marginTop: 6 }}>{next.sector}</div>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

function SectorsHub({ setRoute }) {
  const { SECTORS } = window.GLI_DATA;
  return (
    <div className="page-enter">
      <section style={{ padding: "64px 0 32px", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <Eyebrow n="—">Sectors</Eyebrow>
          <h1 className="display-xl" style={{ marginTop: 16, marginBottom: 24, maxWidth: "18ch" }}>
            Three sectors. One studio. One factory.
          </h1>
          <p className="lede">
            Each sector demands a different rhythm — the pre-opening clock of a hotel; the
            confidentiality of a royal residence; the security-cleared sequencing of a federal
            chamber or an airline lounge. We are set up for all three.
          </p>
        </div>
      </section>
      <section className="section">
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 80 }}>
          {SECTORS.map((s, i) => (
            <div key={s.id} style={{ display: "grid", gridTemplateColumns: i % 2 === 0 ? "1.1fr 1fr" : "1fr 1.1fr", gap: 56, alignItems: "center" }}>
              <div className="img-wrap" style={{ aspectRatio: "4/3", order: i % 2 === 0 ? 0 : 1 }}>
                <img src={s.image} alt={s.name} />
              </div>
              <div>
                <div className="mono" style={{ color: "var(--brass)" }}>0{i+1} · {s.count}+ DELIVERED</div>
                <h2 className="display-xl" style={{ margin: "12px 0 18px" }}>{s.name}</h2>
                <p className="lede" style={{ marginBottom: 28 }}>{s.blurb}</p>
                <button className="btn-ghost" onClick={() => setRoute({ page: "projects", sector: s.name })}>
                  View {s.name} projects
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function CapabilitiesPage({ setRoute }) {
  const { CAPABILITIES } = window.GLI_DATA;
  return (
    <div className="page-enter">
      <section style={{ padding: "64px 0 32px", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <Eyebrow n="—">Capabilities</Eyebrow>
          <h1 className="display-xl" style={{ marginTop: 16, marginBottom: 24, maxWidth: "20ch" }}>
            One signature. Three disciplines.
          </h1>
          <p className="lede">
            Design. Manufacturing. Contracting. Engaged together or separately —
            most clients take all three, on a single accountable contract.
          </p>
        </div>
      </section>
      {CAPABILITIES.map((c, i) => (
        <section key={c.id} className="section" style={{ background: i % 2 === 0 ? "var(--paper)" : "var(--paper-2)" }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: i % 2 === 0 ? "1fr 1.1fr" : "1.1fr 1fr", gap: 64, alignItems: "center" }}>
              <div className="img-wrap" style={{ aspectRatio: "4/3", order: i % 2 === 0 ? 1 : 0 }}>
                <img src={c.image} alt={c.name} />
              </div>
              <div>
                <Eyebrow n={`0${i+1}`}>Capability</Eyebrow>
                <h2 className="display-xl" style={{ margin: "12px 0 18px" }}>{c.name}</h2>
                <p className="lede" style={{ marginBottom: 28 }}>{c.blurb}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, columns: 2, columnGap: 32 }}>
                  {c.items.map(it => (
                    <li key={it} style={{ padding: "10px 0", borderBottom: "1px solid var(--line)", fontSize: 14 }}>{it}</li>
                  ))}
                </ul>
                {c.id === "manufacturing" && (
                  <button className="btn-ghost" style={{ marginTop: 32 }} onClick={() => setRoute({ page: "manufacturing" })}>
                    Inside the factory
                  </button>
                )}
              </div>
            </div>
          </div>
        </section>
      ))}
    </div>
  );
}

Object.assign(window, { ProjectsIndex, CaseStudy, SectorsHub, CapabilitiesPage });