// Bishop Design — page components
const { PROJECTS, SECTORS, SECTOR_COUNTS, AWARDS, MARQUEE_AWARDS, CASE_STUDY_CARBONE } = window.BishopData;

// =============================================================
//  HOME
// =============================================================
function HomePage({ navigate, locale, heroMode }) {
  const t = useLocaleStrings(locale);
  const featured = [
    PROJECTS.find(p => p.slug === "carbone-vino"),
    PROJECTS.find(p => p.slug === "sls-hotel-residences"),
    PROJECTS.find(p => p.slug === "hyde-branded-residences"),
  ];

  const recent = PROJECTS.filter(p => ["fzn","studio-frantzen","duo-gastrobar","eagle-hills","sereia","arboretum"].includes(p.slug));

  return (
    <main>
      {/* ---------- Cinematic Hero ---------- */}
      <section className="hero" data-mode={heroMode}>
        <div className="hero-image" style={{ backgroundImage: `url(media/project-carbone-vino-restaurant.webp)` }} />
        <div className="hero-top container-wide">
          <span className="meta">N° 001 · Carbone Vino · Riyadh, 2024</span>
          <span className="meta" style={{ textAlign: "right" }}>Live reel ▶ 02:14</span>
        </div>
        <div className="container-wide hero-content">
          <Eyebrow light={heroMode === "dark"}>{t.eyebrow}</Eyebrow>
          <h1 className="h1" style={{ margin: "28px 0 0", maxWidth: "16ch" }}>
            {t.heroLine1} <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--brass-soft)" }}>{t.heroLine2}</em>.
          </h1>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 56, gap: 60, flexWrap: "wrap" }}>
            <p style={{ maxWidth: 540, fontSize: 17, lineHeight: 1.55, color: heroMode === "dark" ? "rgba(255,255,255,.78)" : "var(--muted)", margin: 0 }}>
              {t.heroSub}
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#/projects" onClick={(e) => { e.preventDefault(); navigate("projects"); }} className={"btn " + (heroMode === "dark" ? "btn-light" : "")}>
                View projects <span className="btn-arrow" />
              </a>
              <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className={"btn btn-solid"} style={ heroMode === "dark" ? { background: "var(--paper)", color: "var(--ink)", borderColor: "var(--paper)" } : {} }>
                {t.cta} <span className="btn-arrow" />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Position statement ---------- */}
      <section className="section-sm" style={{ background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 80, alignItems: "start" }} className="hide-mob-grid">
            <Eyebrow>The Studio · est. 2004</Eyebrow>
            <p className="lede" style={{ maxWidth: "32ch", margin: 0 }}>
              An international, multi-award-winning interior design and architecture studio. Working at the intersection of operator vision and craft — for hotels, restaurants, residences, and the businesses that define them.
            </p>
          </div>
        </div>
      </section>

      <AwardMarquee items={MARQUEE_AWARDS} />

      {/* ---------- Sectors ---------- */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
            <div>
              <Eyebrow>{t.sectors}</Eyebrow>
              <h2 className="h2" style={{ margin: "20px 0 0", maxWidth: "14ch" }}>{t.sectorIntro}</h2>
            </div>
            <p className="body body-soft" style={{ maxWidth: 360, margin: 0 }}>
              The studio's work is grouped across five disciplines. Hospitality and F&B remain our deepest practice — but the principles of operator-led design are the same wherever we work.
            </p>
          </div>
          <div className="sector-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16 }}>
            {SECTORS.map((s) => (
              <SectorTile key={s.slug} sector={s} count={SECTOR_COUNTS[s.slug] || 0} onClick={() => navigate("sector", { slug: s.slug })} />
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Featured case studies ---------- */}
      <section className="section" style={{ background: "var(--stone)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 60, gap: 24, flexWrap: "wrap" }}>
            <div>
              <Eyebrow>{t.work}</Eyebrow>
              <h2 className="h2" style={{ margin: "20px 0 0", maxWidth: "16ch" }}>
                <em className="display-italic">Three</em> projects that explain the studio.
              </h2>
            </div>
            <a href="#/projects" onClick={(e) => { e.preventDefault(); navigate("projects"); }} className="btn">{t.seeAll} <span className="btn-arrow" /></a>
          </div>

          {/* Hero feature — Carbone Vino */}
          <article style={{ marginBottom: 96, cursor: "pointer" }} onClick={() => navigate("case", { slug: "carbone-vino" })}>
            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "end" }} className="feature-grid">
              <div className="feat-card" style={{ overflow: "hidden" }}>
                <div className="feat-card-img" style={{ height: "78vh", maxHeight: 760, minHeight: 480, backgroundImage: `url(media/project-${featured[0].img}.webp)` }} />
              </div>
              <div style={{ paddingBottom: 12 }}>
                <div className="meta" style={{ marginBottom: 24 }}>Case study N° 01 · {featured[0].sector} · {featured[0].location}</div>
                <h3 className="h2" style={{ margin: 0, fontSize: "clamp(40px, 4.4vw, 64px)" }}>{featured[0].name}</h3>
                <p className="lede" style={{ marginTop: 24, fontSize: 22 }}>
                  A nocturnal wine room for Major Food Group's first KSA outpost — Verde Guatemala marble, claret wool, hand-blown Murano.
                </p>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 32, paddingTop: 28, borderTop: "1px solid var(--line)" }}>
                  <div>
                    <div className="meta">Year</div>
                    <div style={{ fontFamily: "var(--display)", fontSize: 22, marginTop: 4 }}>{featured[0].year}</div>
                  </div>
                  <div>
                    <div className="meta">Scope</div>
                    <div style={{ fontFamily: "var(--display)", fontSize: 22, marginTop: 4 }}>Interior · FF&E</div>
                  </div>
                </div>
                <a className="btn" style={{ marginTop: 32 }} onClick={(e) => { e.stopPropagation(); navigate("case", { slug: "carbone-vino" }); }}>
                  Read the case study <span className="btn-arrow" />
                </a>
              </div>
            </div>
          </article>

          {/* Side-by-side */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }} className="duo-grid">
            {featured.slice(1).map((p, i) => (
              <article key={p.slug} onClick={() => navigate("case", { slug: p.slug })} style={{ cursor: "pointer" }}>
                <div className="feat-card" style={{ overflow: "hidden" }}>
                  <div className="feat-card-img" style={{ height: "60vh", maxHeight: 560, minHeight: 380, backgroundImage: `url(media/project-${p.img}.webp)` }} />
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 24, gap: 24 }}>
                  <div>
                    <div className="meta">Case study N° 0{i + 2} · {p.sector}</div>
                    <h3 className="h3" style={{ marginTop: 12, marginBottom: 0 }}>{p.name}</h3>
                    <div className="meta" style={{ marginTop: 10 }}>{p.location} · {p.year}</div>
                  </div>
                  <span className="btn-arrow" style={{ width: 24 }} />
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Studio teaser ---------- */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 96, alignItems: "center" }} className="studio-grid">
            <figure style={{ margin: 0 }}>
              <img src="media/about-studio.webp" alt="Bishop Design studio" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
            </figure>
            <div>
              <Eyebrow>The Studio</Eyebrow>
              <h2 className="h2" style={{ marginTop: 24, maxWidth: "16ch" }}>
                Twenty-two years of operator-led design.
              </h2>
              <p className="body" style={{ marginTop: 28, fontSize: 17, color: "var(--muted)", maxWidth: 520 }}>
                Founded in Dubai in 2004 by Paul Bishop. Built around long-term relationships with the region's hospitality groups, developers and creative operators. A second studio in Miami; Stellenbosch opening 2026.
              </p>
              <p className="body" style={{ marginTop: 16, fontSize: 17, color: "var(--muted)", maxWidth: 520 }}>
                Our sub-brand <em className="display-italic" style={{ color: "var(--ink)" }}>Rogue by Bishop Design</em> extends the practice into architecture, brand ideation, F&B consultancy and photography.
              </p>
              <a href="#/studio" onClick={(e) => { e.preventDefault(); navigate("studio"); }} className="btn" style={{ marginTop: 36 }}>
                About the studio <span className="btn-arrow" />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Recent grid ---------- */}
      <section className="section-sm" style={{ background: "var(--paper)", paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48, gap: 24 }}>
            <Eyebrow>Recently delivered</Eyebrow>
            <a href="#/projects" onClick={(e) => { e.preventDefault(); navigate("projects"); }} className="meta" style={{ color: "var(--ink)" }}>Index of 88 projects →</a>
          </div>
          <div className="recent-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {recent.map((p) => (
              <ProjectCard key={p.slug} project={p} ratio="tall" onClick={() => navigate("case", { slug: p.slug })} />
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Start a project ---------- */}
      <section className="section" style={{ background: "var(--noir)", color: "var(--paper)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 96 }} >
          <div>
            <Eyebrow light>Get in touch</Eyebrow>
            <h2 className="h2" style={{ marginTop: 24, color: "var(--paper)" }}>
              {t.startBig1}<br/><em className="display-italic" style={{ color: "var(--brass-soft)" }}>{t.startBig2}</em>
            </h2>
            <p style={{ marginTop: 28, color: "rgba(255,255,255,.7)", maxWidth: 480, fontSize: 17 }}>{t.startSub}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className="btn btn-light">{t.cta} <span className="btn-arrow" /></a>
              <a href="tel:+97143990271" className="btn btn-light">+971 4 399 0271 <span className="btn-arrow" /></a>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div>
              <div className="meta" style={{ color: "rgba(255,255,255,.5)" }}>Dubai · HQ</div>
              <div style={{ marginTop: 8, fontFamily: "var(--display)", fontSize: 24 }}>Pinnacle Building, Al Barsha</div>
            </div>
            <div>
              <div className="meta" style={{ color: "rgba(255,255,255,.5)" }}>Miami · Studio</div>
              <div style={{ marginTop: 8, fontFamily: "var(--display)", fontSize: 24 }}>1111 Brickell Ave</div>
            </div>
            <div>
              <div className="meta" style={{ color: "rgba(255,255,255,.5)" }}>South Africa · Opening 2026</div>
              <div style={{ marginTop: 8, fontFamily: "var(--display)", fontSize: 24, opacity: .55 }}>Stellenbosch</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =============================================================
//  PROJECTS INDEX (filterable)
// =============================================================
function ProjectsPage({ navigate, locale, initialSector }) {
  const t = useLocaleStrings(locale);
  const [filter, setFilter] = useState(initialSector || "All");
  const filtered = filter === "All" ? PROJECTS : PROJECTS.filter(p => p.sector === filter);
  const filters = [
    { name: "All",         count: PROJECTS.length },
    { name: "Restaurants", count: PROJECTS.filter(p => p.sector === "Restaurants").length },
    { name: "Hotels",      count: PROJECTS.filter(p => p.sector === "Hotels").length },
    { name: "Residential", count: PROJECTS.filter(p => p.sector === "Residential").length },
    { name: "Commercial",  count: PROJECTS.filter(p => p.sector === "Commercial").length },
    { name: "Retail",      count: PROJECTS.filter(p => p.sector === "Retail").length },
  ];

  // Asymmetric ratios for visual rhythm
  const ratios = ["tall", "square", "tall", "wide", "tall", "tall", "square", "tall", "wide", "tall", "tall", "square"];

  return (
    <main style={{ paddingTop: 96 }}>
      <section className="section-sm">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 32, marginBottom: 56 }}>
            <div>
              <Eyebrow>Index</Eyebrow>
              <h1 className="h1" style={{ marginTop: 20, fontSize: "clamp(48px, 7vw, 100px)", maxWidth: "16ch" }}>
                Projects.
              </h1>
              <p className="lede" style={{ marginTop: 24, maxWidth: 480 }}>
                {filtered.length} of {PROJECTS.length} shown · {filter === "All" ? "all sectors" : filter}
              </p>
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {filters.map(f => (
                <button key={f.name} className="chip" data-active={filter === f.name} onClick={() => setFilter(f.name)}>
                  {f.name} <span className="chip-count">{String(f.count).padStart(2, "0")}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Asymmetric grid */}
      <section style={{ paddingBottom: 120 }}>
        <div className="container">
          <div className="projects-grid" style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "48px 24px" }}>
            {filtered.map((p, i) => {
              // Vary column spans for visual rhythm
              const variants = [
                { colStart: 1, colSpan: 5, ratio: "tall",   pushDown: 0 },
                { colStart: 7, colSpan: 6, ratio: "wide",   pushDown: 100 },
                { colStart: 2, colSpan: 4, ratio: "tall",   pushDown: 0 },
                { colStart: 7, colSpan: 5, ratio: "square", pushDown: 60 },
                { colStart: 1, colSpan: 6, ratio: "wide",   pushDown: 0 },
                { colStart: 8, colSpan: 5, ratio: "tall",   pushDown: 80 },
              ];
              const v = variants[i % variants.length];
              return (
                <div key={p.slug} style={{ gridColumn: `${v.colStart} / span ${v.colSpan}`, marginTop: v.pushDown }} className="proj-cell">
                  <ProjectCard project={p} ratio={v.ratio} onClick={() => navigate("case", { slug: p.slug })} />
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
}

// =============================================================
//  CASE STUDY (Carbone Vino — fully realized)
// =============================================================
function CaseStudyPage({ navigate, slug, locale }) {
  const c = CASE_STUDY_CARBONE;
  const proj = PROJECTS.find(p => p.slug === slug) || PROJECTS.find(p => p.slug === "carbone-vino");
  const isShowcase = slug === "carbone-vino";
  const related = c.related.map(s => PROJECTS.find(p => p.slug === s)).filter(Boolean);
  const gallery = isShowcase ? c.gallery : [proj.img, "bagatelle", "scalini-cucina", "duo-gastrobar"];

  const [lbIndex, setLbIndex] = useState(null);

  // If non-showcase project, show a lighter stub layout
  if (!isShowcase) {
    return (
      <main style={{ paddingTop: 96 }}>
        <section className="section">
          <div className="container">
            <Eyebrow>Case study · {proj.sector}</Eyebrow>
            <h1 className="h1" style={{ marginTop: 20, fontSize: "clamp(48px, 7vw, 100px)" }}>{proj.name}</h1>
            <div className="meta" style={{ marginTop: 24 }}>{proj.location} · {proj.year} · {proj.scope}</div>
            <figure style={{ marginTop: 56 }}>
              <img src={`media/project-${proj.img}.webp`} alt={proj.name} style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover" }} />
            </figure>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, marginTop: 80 }}>
              <Eyebrow>Concept</Eyebrow>
              <p className="lede">A full case study for {proj.name} is being prepared with confirmed metadata, materials notes and photographer credits. <a onClick={() => navigate("case", { slug: "carbone-vino" })} style={{ borderBottom: "1px solid var(--accent)", cursor: "pointer" }}>See the Carbone Vino case study →</a></p>
            </div>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main>
      {/* Hero — full bleed */}
      <section style={{ position: "relative", minHeight: "100vh", background: "var(--noir)", color: "var(--paper)", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `url(media/project-${c.hero}.webp)`, backgroundSize: "cover", backgroundPosition: "center" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(12,13,14,.5) 0%, rgba(12,13,14,.05) 40%, rgba(12,13,14,.95) 100%)" }} />
        <div className="container-wide" style={{ position: "relative", zIndex: 2, paddingTop: 160, paddingBottom: 80, minHeight: "100vh", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div>
            <Eyebrow light>Case study · Restaurants</Eyebrow>
            <h1 className="h1" style={{ marginTop: 24, color: "var(--paper)", maxWidth: "14ch" }}>
              {c.name}<em className="display-italic" style={{ color: "var(--brass-soft)" }}>.</em>
            </h1>
            <p className="lede" style={{ marginTop: 24, color: "rgba(255,255,255,.82)", maxWidth: 540 }}>
              {c.tagline}
            </p>
          </div>
          <div className="case-meta-row" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 24, paddingTop: 36, borderTop: "1px solid rgba(255,255,255,.18)" }}>
            <MetaCell k="Sector" v={c.sector} />
            <MetaCell k="Location" v={c.location} />
            <MetaCell k="Client" v={c.client} />
            <MetaCell k="Year" v={c.year} />
            <MetaCell k="Area" v={c.area} />
          </div>
        </div>
      </section>

      {/* Intro */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }} className="hide-mob-grid">
            <Eyebrow>Brief</Eyebrow>
            <p className="lede" style={{ margin: 0, maxWidth: "32ch" }}>{c.intro}</p>
          </div>
        </div>
      </section>

      {/* Long-form sections */}
      {c.sections.map((s, i) => {
        const galleryImg = c.gallery[i + 1] || c.gallery[0];
        const isOdd = i % 2 === 1;
        return (
          <section key={i} className="section-sm" style={{ background: i === 1 ? "var(--stone)" : "var(--paper)" }}>
            <div className="container">
              <div style={{ display: "grid", gridTemplateColumns: isOdd ? "1.2fr 1fr" : "1fr 1.2fr", gap: 80, alignItems: "center" }} className="cs-section-grid">
                {!isOdd && (
                  <figure style={{ margin: 0, cursor: "zoom-in" }} onClick={() => setLbIndex(i + 1)}>
                    <img src={`media/project-${galleryImg}.webp`} alt="" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
                  </figure>
                )}
                <div style={{ maxWidth: 520 }}>
                  <div className="meta" style={{ color: "var(--muted)" }}>0{i + 1} · {s.h}</div>
                  <h2 className="h3" style={{ margin: "16px 0 24px", fontSize: "clamp(28px, 2.6vw, 40px)" }}>{s.h}<em className="display-italic" style={{ color: "var(--accent)" }}>.</em></h2>
                  <p className="body" style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink)", marginTop: 0 }}>{s.p}</p>
                </div>
                {isOdd && (
                  <figure style={{ margin: 0, cursor: "zoom-in" }} onClick={() => setLbIndex(i + 1)}>
                    <img src={`media/project-${galleryImg}.webp`} alt="" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
                  </figure>
                )}
              </div>
            </div>
          </section>
        );
      })}

      {/* Materials & Scope sidebar */}
      <section className="section-sm" style={{ background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 48 }} className="cs-three-col">
            <div>
              <Eyebrow>Scope of work</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {c.scope.map(s => (
                  <li key={s} style={{ fontFamily: "var(--display)", fontSize: 22, paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>{s}</li>
                ))}
              </ul>
            </div>
            <div>
              <Eyebrow>Materials</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {["Verde Guatemala marble", "Hand-tufted wool · claret", "Unlacquered brass", "Tigerwood veneer", "Hand-blown Murano glass"].map(m => (
                  <li key={m} style={{ fontFamily: "var(--display)", fontSize: 22, paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>{m}</li>
                ))}
              </ul>
            </div>
            <div>
              <Eyebrow>Credits</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                <li style={{ paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>
                  <div className="meta">Operator</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 20, marginTop: 4 }}>Major Food Group</div>
                </li>
                <li style={{ paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>
                  <div className="meta">Photography</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 20, marginTop: 4, color: "var(--muted)" }}>{c.photographer}</div>
                </li>
                <li style={{ paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>
                  <div className="meta">Duration</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 20, marginTop: 4 }}>{c.duration}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="section-sm" style={{ background: "var(--stone)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 40 }}>
            <Eyebrow>Gallery · {c.gallery.length} images</Eyebrow>
            <span className="meta">Click any image to enlarge</span>
          </div>
          <div className="gallery-grid" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
            {c.gallery.map((g, i) => (
              <button key={i} onClick={() => setLbIndex(i)} style={{ gridColumn: i % 5 === 0 ? "span 4" : (i % 3 === 1 ? "span 2" : "span 2"), cursor: "zoom-in", padding: 0, border: 0, background: "none", display: "block" }} className="gallery-cell">
                <img src={`media/project-${g}.webp`} alt="" style={{ width: "100%", aspectRatio: i % 5 === 0 ? "16/10" : "4/5", objectFit: "cover", display: "block" }} />
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Related */}
      <section className="section-sm" style={{ background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 40 }}>
            <Eyebrow>Adjacent work</Eyebrow>
            <a className="meta" style={{ color: "var(--ink)", cursor: "pointer" }} onClick={() => navigate("projects")}>All restaurants →</a>
          </div>
          <div className="recent-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {related.map(p => (
              <ProjectCard key={p.slug} project={p} ratio="tall" onClick={() => navigate("case", { slug: p.slug })} />
            ))}
          </div>
        </div>
      </section>

      {/* Start a similar project CTA */}
      <section style={{ background: "var(--noir)", color: "var(--paper)" }}>
        <div className="container" style={{ padding: "120px 40px", textAlign: "center" }}>
          <Eyebrow light>Next</Eyebrow>
          <h2 className="h2" style={{ marginTop: 28, color: "var(--paper)", maxWidth: "18ch", marginInline: "auto" }}>
            Start a <em className="display-italic" style={{ color: "var(--brass-soft)" }}>similar</em> project with the studio.
          </h2>
          <div style={{ display: "inline-flex", gap: 12, marginTop: 40, flexWrap: "wrap", justifyContent: "center" }}>
            <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate("contact", { sector: "Restaurants" }); }} className="btn btn-light">Restaurants enquiry <span className="btn-arrow" /></a>
            <a href="#/projects" onClick={(e) => { e.preventDefault(); navigate("projects"); }} className="btn btn-light">More projects <span className="btn-arrow" /></a>
          </div>
        </div>
      </section>

      {lbIndex !== null && (
        <Lightbox images={gallery} index={lbIndex} onClose={() => setLbIndex(null)} setIndex={setLbIndex} />
      )}
    </main>
  );
}

function MetaCell({ k, v }) {
  return (
    <div>
      <div className="meta" style={{ color: "rgba(255,255,255,.55)", fontSize: 10 }}>{k}</div>
      <div style={{ fontFamily: "var(--display)", fontSize: "clamp(18px, 1.8vw, 22px)", marginTop: 8, lineHeight: 1.2 }}>{v}</div>
    </div>
  );
}

// =============================================================
//  SECTOR HUB
// =============================================================
function SectorPage({ navigate, slug, locale }) {
  const sector = SECTORS.find(s => s.slug === slug) || SECTORS[1];
  const sectorProjects = PROJECTS.filter(p => p.sector.toLowerCase() === sector.name.toLowerCase());
  const hero = sectorProjects[0] || PROJECTS[0];

  const blurbs = {
    hotels:      "Public areas, lobbies, restaurants and amenities for international hotel brands and operators. Our work in this sector has shipped at SLS, InterContinental, Hyde and Wavehouse.",
    restaurants: "From flagship Manhattan-imports to homegrown operator concepts: front-of-house, back-of-bar, and the journey between them. The studio's deepest practice.",
    residential: "Branded residences, private homes and tower amenities. The same operator-led precision applied to where people live.",
    commercial:  "Workplaces designed around how a company actually moves. Eagle Hills HQ, Metdist DMCC and a growing book of Gulf-based head offices.",
    retail:      "Flagships, leisure venues and concept stores where the interior is the brand asset.",
  };

  return (
    <main style={{ paddingTop: 96 }}>
      {/* Sector hero */}
      <section style={{ position: "relative", height: "70vh", minHeight: 520, background: "var(--noir)", color: "var(--paper)", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `url(media/sector-${sector.slug}.webp)`, backgroundSize: "cover", backgroundPosition: "center" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(12,13,14,.45) 0%, rgba(12,13,14,.15) 40%, rgba(12,13,14,.85) 100%)" }} />
        <div className="container-wide" style={{ position: "relative", zIndex: 2, height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 64 }}>
          <Eyebrow light>Sector · {String(sectorProjects.length).padStart(2, "0")} projects</Eyebrow>
          <h1 className="h1" style={{ marginTop: 24, color: "var(--paper)" }}>
            {sector.name}<em className="display-italic" style={{ color: "var(--brass-soft)" }}>.</em>
          </h1>
        </div>
      </section>

      {/* Intro + stats */}
      <section className="section-sm">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 96, alignItems: "start" }} className="hide-mob-grid">
            <p className="lede" style={{ margin: 0, maxWidth: "32ch" }}>{blurbs[sector.slug] || sector.sub}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36 }}>
              <Stat n={sectorProjects.length} label={`${sector.name} projects`} />
              <Stat n="22" label="Years of practice" />
              <Stat n="100+" label="Awards (studio-wide)" />
              <Stat n="3" label="Studios · Dubai · Miami · SA" />
            </div>
          </div>
        </div>
      </section>

      {/* Sector projects grid */}
      <section className="section-sm" style={{ background: "var(--stone)", paddingTop: 80 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 40, gap: 24, flexWrap: "wrap" }}>
            <Eyebrow>Work in {sector.name}</Eyebrow>
            <a className="meta" style={{ color: "var(--ink)", cursor: "pointer" }} onClick={() => navigate("projects")}>All sectors →</a>
          </div>
          <div className="recent-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {sectorProjects.map(p => (
              <ProjectCard key={p.slug} project={p} ratio="tall" onClick={() => navigate("case", { slug: p.slug })} />
            ))}
          </div>
        </div>
      </section>

      {/* Sector enquiry */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <Eyebrow>Sector enquiry</Eyebrow>
            <h2 className="h2" style={{ marginTop: 24 }}>
              Have a {sector.name.toLowerCase()} project in mind?
            </h2>
            <p style={{ marginTop: 24, color: "var(--muted)", maxWidth: 480, fontSize: 17 }}>
              We work with operators, developers and brand owners from concept design through to handover. Tell us about your site.
            </p>
            <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate("contact", { sector: sector.name }); }} className="btn btn-solid" style={{ marginTop: 32 }}>
              Brief us on {sector.name.toLowerCase()} <span className="btn-arrow" />
            </a>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {["Concept design", "Interior architecture", "FF&E specification", "Lighting design", "Bespoke joinery", "Site supervision"].map((s, i) => (
              <li key={s} style={{ display: "flex", justifyContent: "space-between", padding: "20px 0", borderTop: "1px solid var(--line)", borderBottom: i === 5 ? "1px solid var(--line)" : undefined }}>
                <span style={{ fontFamily: "var(--display)", fontSize: 22 }}>{s}</span>
                <span className="meta">0{i + 1}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </main>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--display)", fontSize: "clamp(40px, 4vw, 64px)", lineHeight: 1, fontWeight: 300 }}>{n}</div>
      <div className="meta" style={{ marginTop: 12 }}>{label}</div>
    </div>
  );
}

// =============================================================
//  STUDIO (About)
// =============================================================
function StudioPage({ navigate }) {
  return (
    <main style={{ paddingTop: 96 }}>
      <section className="section-sm">
        <div className="container">
          <Eyebrow>The Studio · est. 2004</Eyebrow>
          <h1 className="h1" style={{ marginTop: 24, fontSize: "clamp(48px, 7.5vw, 110px)", maxWidth: "14ch" }}>
            Cutting-edge interiors that <em className="display-italic">exceed</em> expectations.
          </h1>
        </div>
      </section>

      <section style={{ background: "var(--noir)", color: "var(--paper)" }}>
        <img src="media/about-studio.webp" style={{ width: "100%", height: "70vh", objectFit: "cover", display: "block" }} />
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }} className="hide-mob-grid">
            <Eyebrow>Founder</Eyebrow>
            <div style={{ maxWidth: 620 }}>
              <h2 className="h2" style={{ margin: 0 }}>Paul <em className="display-italic">Bishop</em>.</h2>
              <p className="body" style={{ marginTop: 28, fontSize: 18, color: "var(--ink)", lineHeight: 1.6 }}>
                London-born, Manchester-educated, Dubai-based since 1996. Paul opened the studio in 2004 during the region's hospitality boom and has spent the two decades since building a practice known for operator-led design and long client relationships.
              </p>
              <p className="body" style={{ marginTop: 16, fontSize: 17, color: "var(--muted)", lineHeight: 1.65 }}>
                Under Paul's direction the studio has been named Interior Designer of the Year eight times between 2018 and 2023, and was awarded CID Interior Design Firm of the Year in 2021.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm" style={{ background: "var(--stone)" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <Eyebrow>Philosophy</Eyebrow>
          <blockquote style={{ margin: "32px auto 0", maxWidth: "20ch" }}>
            <p className="h2" style={{ margin: 0, fontStyle: "italic", fontWeight: 300 }}>
              "Cutting-edge interiors — all the while exceeding client expectations and enhancing consumer experiences across the globe."
            </p>
            <footer className="meta" style={{ marginTop: 28 }}>— Paul Bishop · Founder</footer>
          </blockquote>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center" }} className="hide-mob-grid">
            <div>
              <Eyebrow>Sub-brand</Eyebrow>
              <h2 className="h2" style={{ marginTop: 24 }}>
                <em className="display-italic">Rogue</em><br/>by Bishop Design.
              </h2>
              <p className="body" style={{ marginTop: 28, fontSize: 17, color: "var(--muted)", maxWidth: 480, lineHeight: 1.65 }}>
                An in-house sub-brand that extends the studio into architecture, brand ideation, F&B consultancy, and photography & videography. Where the parent studio works on the room, Rogue works on everything around it.
              </p>
              <a href="#" onClick={(e) => e.preventDefault()} className="btn" style={{ marginTop: 32 }}>About Rogue <span className="btn-arrow" /></a>
            </div>
            <div style={{ background: "var(--ink)", color: "var(--paper)", padding: 56, aspectRatio: "1/1", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div className="display" style={{ fontSize: "clamp(60px, 6vw, 96px)", lineHeight: 0.95 }}>R<em className="display-italic">o</em>gue</div>
              <div>
                <div className="eyebrow" style={{ color: "rgba(255,255,255,.6)" }}>Services</div>
                <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", color: "rgba(255,255,255,.85)", display: "flex", flexDirection: "column", gap: 6, fontSize: 16, fontFamily: "var(--display)" }}>
                  <li>Architecture</li>
                  <li>Brand ideation</li>
                  <li>F&B consultancy</li>
                  <li>Photography & video</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Three offices */}
      <section className="section-sm" style={{ background: "var(--paper)" }}>
        <div className="container">
          <Eyebrow>Studios</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 32 }} className="recent-grid">
            {[
              { name: "Dubai", sub: "Headquarters · since 2004", img: "office-dubai" },
              { name: "Miami", sub: "By appointment · 2019", img: "office-miami" },
              { name: "Stellenbosch", sub: "Opening 2026", img: "office-saudi-arabia" },
            ].map(o => (
              <div key={o.name}>
                <div style={{ aspectRatio: "4/5", backgroundImage: `url(media/${o.img}.webp)`, backgroundSize: "cover", backgroundPosition: "center" }} />
                <div style={{ paddingTop: 16 }}>
                  <h3 className="h3" style={{ margin: 0 }}>{o.name}</h3>
                  <div className="meta" style={{ marginTop: 8 }}>{o.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// =============================================================
//  AWARDS
// =============================================================
function AwardsPage({ navigate }) {
  return (
    <main style={{ paddingTop: 96 }}>
      <section className="section-sm">
        <div className="container">
          <Eyebrow>Recognition</Eyebrow>
          <h1 className="h1" style={{ marginTop: 24, fontSize: "clamp(48px, 7.5vw, 120px)", maxWidth: "14ch" }}>
            100+ <em className="display-italic">awards</em>.
          </h1>
          <p className="lede" style={{ marginTop: 32, maxWidth: 600 }}>
            Regional and international recognition since 2004, attributed by name, year and issuer. Listed below are confirmed accolades. The studio is also commonly cited with a "150+" figure in industry press — we work from the official "100+" number until that's reconciled.
          </p>
        </div>
      </section>

      <section className="section-sm" style={{ paddingTop: 24 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
            <Eyebrow>Selected list</Eyebrow>
            <span className="meta">Year · Award · Issuer · Category</span>
          </div>
          {AWARDS.map((a, i) => (
            <div key={i} className="award-row">
              <span className="award-yr">{a.yr}</span>
              <span className="award-name">{a.name}</span>
              <span className="award-issuer">{a.issuer}</span>
              <span className="award-cat">{a.cat}</span>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

// =============================================================
//  CONTACT — Start a project
// =============================================================
function ContactPage({ navigate, initialSector }) {
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    company: "",
    sector: initialSector || "",
    type: "",
    message: "",
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  function update(k, v) { setForm(f => ({ ...f, [k]: v })); setErrors(e => ({ ...e, [k]: undefined })); }

  function submit(e) {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Required";
    if (!form.email.trim()) errs.email = "Required";
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = "Email format";
    if (!form.sector) errs.sector = "Pick a sector";
    if (!form.type) errs.type = "Pick a project type";
    if (!form.message.trim() || form.message.trim().length < 30) errs.message = "Tell us a bit more (30+ chars)";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSubmitted(true);
  }

  if (submitted) {
    return (
      <main style={{ paddingTop: 96 }}>
        <section className="section">
          <div className="container" style={{ textAlign: "center" }}>
            <Eyebrow>Sent</Eyebrow>
            <h1 className="h1" style={{ marginTop: 28, fontSize: "clamp(48px, 6vw, 96px)" }}>
              Thank you, <em className="display-italic">{form.name.split(" ")[0]}</em>.
            </h1>
            <p className="lede" style={{ marginTop: 32, maxWidth: 540, marginInline: "auto" }}>
              Your brief has been routed to the studio. We typically respond within two working days. In the meantime, you might enjoy the {form.sector.toLowerCase()} work below.
            </p>
            <a className="btn" style={{ marginTop: 40 }} onClick={() => navigate("sector", { slug: (SECTORS.find(s => s.name === form.sector) || SECTORS[1]).slug })}>
              {form.sector} projects <span className="btn-arrow" />
            </a>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main style={{ paddingTop: 96 }}>
      <section className="section-sm">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }} className="hide-mob-grid">
            <div>
              <Eyebrow>Get in touch</Eyebrow>
              <h1 className="h1" style={{ marginTop: 24, fontSize: "clamp(48px, 6.4vw, 100px)", maxWidth: "12ch" }}>
                Start a <em className="display-italic">project</em>.
              </h1>
              <p className="lede" style={{ marginTop: 32, maxWidth: 460 }}>
                The shorter route to a meaningful conversation. Tell us a little about your site, operator and brief — we'll come back to you within two working days.
              </p>

              <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
                <div>
                  <div className="meta">Dubai · HQ</div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 22, marginTop: 8 }}>Suite #111 & 112, Pinnacle Building<br/>Al Barsha, Dubai, UAE</div>
                  <div style={{ marginTop: 16, fontFamily: "var(--mono)", fontSize: 14 }}>
                    <a href="tel:+97143990271" style={{ borderBottom: "1px solid var(--accent)" }}>+971 4 399 0271</a><br/>
                    <a href="mailto:info@wearebishopdesign.com" style={{ borderBottom: "1px solid var(--accent)", marginTop: 6, display: "inline-block" }}>info@wearebishopdesign.com</a>
                  </div>
                </div>
                <div>
                  <div className="meta">Routing</div>
                  <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 6, fontFamily: "var(--mono)", fontSize: 13 }}>
                    <li>Projects → projects@wearebishopdesign.com</li>
                    <li>Careers → careers@wearebishopdesign.com</li>
                    <li>Suppliers → suppliers@wearebishopdesign.com</li>
                    <li>Press → press@wearebishopdesign.com</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Form */}
            <form onSubmit={submit} noValidate>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
                <label className="field" data-error={!!errors.name}>
                  <span className="field-label">Your name *</span>
                  <input className="field-input" type="text" value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="" />
                  {errors.name && <span className="field-err">{errors.name}</span>}
                </label>
                <label className="field" data-error={!!errors.email}>
                  <span className="field-label">Email *</span>
                  <input className="field-input" type="email" value={form.email} onChange={(e) => update("email", e.target.value)} placeholder="" />
                  {errors.email && <span className="field-err">{errors.email}</span>}
                </label>
                <label className="field">
                  <span className="field-label">Phone (optional)</span>
                  <input className="field-input" type="tel" value={form.phone} onChange={(e) => update("phone", e.target.value)} />
                </label>
                <label className="field">
                  <span className="field-label">Company / operator</span>
                  <input className="field-input" type="text" value={form.company} onChange={(e) => update("company", e.target.value)} />
                </label>
              </div>

              <div style={{ marginTop: 24 }}>
                <div className="field-label" style={{ marginBottom: 16 }}>Sector *</div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {["Restaurants", "Hotels", "Residential", "Commercial", "Retail", "Other"].map(s => (
                    <button key={s} type="button" className="chip" data-active={form.sector === s} onClick={() => update("sector", s)}>{s}</button>
                  ))}
                </div>
                {errors.sector && <div className="field-err" style={{ marginTop: 12 }}>{errors.sector}</div>}
              </div>

              <div style={{ marginTop: 32 }}>
                <div className="field-label" style={{ marginBottom: 16 }}>Project type *</div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {["New build", "Fit-out", "Refurb", "Consultancy"].map(s => (
                    <button key={s} type="button" className="chip" data-active={form.type === s} onClick={() => update("type", s)}>{s}</button>
                  ))}
                </div>
                {errors.type && <div className="field-err" style={{ marginTop: 12 }}>{errors.type}</div>}
              </div>

              <label className="field" data-error={!!errors.message} style={{ marginTop: 32 }}>
                <span className="field-label">The brief *</span>
                <textarea className="field-textarea" value={form.message} onChange={(e) => update("message", e.target.value)} rows={6} placeholder="A short paragraph: site, operator, programme, target opening date." />
                {errors.message && <span className="field-err">{errors.message}</span>}
              </label>

              <button type="submit" className="btn btn-solid" style={{ marginTop: 40 }}>
                Send brief <span className="btn-arrow" />
              </button>
              <p className="meta" style={{ marginTop: 20, color: "var(--muted)" }}>
                By submitting, you agree to be contacted by Bishop Design about your enquiry.
              </p>
            </form>
          </div>
        </div>
      </section>

      {/* Map / studios row */}
      <section className="section-sm" style={{ background: "var(--stone)" }}>
        <div className="container">
          <Eyebrow>Studios</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 32 }} className="recent-grid">
            {[
              { name: "Dubai", sub: "Pinnacle Building, Al Barsha", note: "Map pin TBC", img: "office-dubai" },
              { name: "Miami", sub: "1111 Brickell Avenue", note: "By appointment", img: "office-miami" },
              { name: "Stellenbosch", sub: "Western Cape, South Africa", note: "Opening 2026", img: "office-saudi-arabia" },
            ].map(o => (
              <div key={o.name}>
                <div style={{ aspectRatio: "4/5", backgroundImage: `url(media/${o.img}.webp)`, backgroundSize: "cover", backgroundPosition: "center" }} />
                <div style={{ paddingTop: 16, display: "flex", justifyContent: "space-between" }}>
                  <div>
                    <h3 className="h3" style={{ margin: 0 }}>{o.name}</h3>
                    <div className="meta" style={{ marginTop: 8 }}>{o.sub}</div>
                  </div>
                  <span className="meta" style={{ color: "var(--muted-soft)" }}>{o.note}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, ProjectsPage, CaseStudyPage, SectorPage, StudioPage, AwardsPage, ContactPage });