// XBD Collective — page views
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP, useMemo: useMemoP } = React;

// ============================================================
// HOME
// ============================================================
function HomeView({ t, ar, onNavigate, onOpenProject }) {
  const projects = window.XBD.projects;
  const featured = projects.filter(p => p.featured);
  const F = window.XBD.firm;
  const [heroIdx, setHeroIdx] = useStateP(0);

  // Rotating hero
  useEffectP(() => {
    const id = setInterval(() => setHeroIdx(i => (i + 1) % featured.length), 6500);
    return () => clearInterval(id);
  }, [featured.length]);

  const heroProj = featured[heroIdx];

  return (
    <div className="view">

      {/* ===== HERO — full bleed rotating, with side rail ===== */}
      <section style={{ position: "relative", height: "100vh", minHeight: 760, overflow: "hidden" }}>
        {featured.map((p, i) => (
          <div key={p.slug} style={{
            position: "absolute", inset: 0,
            opacity: i === heroIdx ? 1 : 0,
            transition: "opacity 1400ms cubic-bezier(.2,.6,.2,1)"
          }}>
            <img src={p.hero} alt={p.name} style={{
              width: "100%", height: "100%", objectFit: "cover",
              animation: i === heroIdx ? "kenBurns 14s ease-out both" : "none"
            }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,16,17,0.55) 0%, rgba(15,16,17,0.1) 35%, rgba(15,16,17,0.85) 100%)" }}/>
          </div>
        ))}

        {/* Side rail */}
        <div className="hero-rail" style={{ [ar ? "left" : "right"]: 28 }}>
          <div className="frac">— Project</div>
          <div className="idx-big" key={heroIdx}>{String(heroIdx + 1).padStart(2, "0")}</div>
          <div className="frac">of {String(featured.length).padStart(2, "0")}</div>
          <div className="vline"/>
          <div className="scroll">SCROLL</div>
        </div>

        {/* Hero content */}
        <div style={{
          position: "absolute", inset: 0,
          padding: "140px 36px 56px",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          color: "var(--paper)"
        }}>
          <div style={{ paddingTop: 80, maxWidth: 980 }}>
            <div className="eyebrow fade-in" style={{ color: "rgba(241,236,227,0.7)", marginBottom: 32 }}>
              <span className="dot" style={{ background: "var(--accent)" }}/>
              {t.home.eyebrow}
            </div>
            <h1 className="h-display rise" style={{
              fontSize: "clamp(48px, 7.5vw, 128px)",
              margin: 0, color: "var(--paper)",
              fontWeight: 300
            }}>
              <span style={{ fontStyle: "italic" }}>{t.home.h1Pre}</span><br/><span>{t.home.h1Post}</span>
            </h1>
            <div className="rise" style={{ marginTop: 44, color: "rgba(241,236,227,0.82)", fontSize: 16.5, maxWidth: 560, animationDelay: "180ms", lineHeight: 1.6 }}>
              {t.home.sub}
            </div>
            <div className="rise" style={{ marginTop: 48, display: "flex", gap: 14, animationDelay: "360ms", flexWrap: "wrap" }}>
              <button className="btn-primary" onClick={() => onNavigate("projects")}>
                {ar ? "كل المشاريع" : "View 14 projects"} →
              </button>
              <button className="btn-secondary" onClick={() => onNavigate("contact")}
                      style={{ borderColor: "rgba(241,236,227,0.4)", color: "var(--paper)" }}>
                {t.cta.consult}
              </button>
            </div>
          </div>

          {/* Hero caption (current project) — generous breathing room */}
          <div className="fade-in" style={{
            marginTop: 80,
            display: "flex", justifyContent: "space-between", alignItems: "flex-end",
            gap: 30, flexWrap: "wrap",
            paddingTop: 28, borderTop: "1px solid rgba(241,236,227,0.18)"
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 36, flexWrap: "wrap" }}>
              <div className="mono" style={{ color: "rgba(241,236,227,0.6)" }}>Now showing</div>
              <button onClick={() => onOpenProject(heroProj)} style={{ textAlign: "left", color: "inherit" }}>
                <div className="serif" style={{ fontSize: 26, color: "var(--paper)", lineHeight: 1 }}>{heroProj.name}</div>
                <div className="mono" style={{ color: "rgba(241,236,227,0.55)", marginTop: 8 }}>{heroProj.location} · {heroProj.year}{heroProj.visualisation ? " · Visualisation" : ""}</div>
              </button>
              <button onClick={() => onOpenProject(heroProj)} className="mono link-u" style={{ color: "var(--paper)" }}>
                Case study →
              </button>
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              {featured.map((_, i) => (
                <button key={i} onClick={() => setHeroIdx(i)} aria-label={`Hero ${i+1}`} style={{
                  width: i === heroIdx ? 40 : 18, height: 2,
                  background: i === heroIdx ? "var(--accent)" : "rgba(241,236,227,0.35)",
                  transition: "all 400ms"
                }}/>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ===== PRESS / AWARDS MARQUEE ===== */}
      <div className="marquee-wrap">
        <div className="marquee-track">
          {[...Array(2)].map((_, dup) => (
            <React.Fragment key={dup}>
              <span className="marquee-item">90+ awards <span className="marquee-sep"/></span>
              <span className="marquee-item italic-soft">Arabian Property Awards <span className="marquee-sep"/></span>
              <span className="marquee-item">International Property Awards <span className="marquee-sep"/></span>
              <span className="marquee-item italic-soft">Commercial Interior Design <span className="marquee-sep"/></span>
              <span className="marquee-item">SBID <span className="marquee-sep"/></span>
              <span className="marquee-item italic-soft">Love That Design <span className="marquee-sep"/></span>
              <span className="marquee-item">Identity Design Awards <span className="marquee-sep"/></span>
              <span className="marquee-item italic-soft">Rethinking The Future <span className="marquee-sep"/></span>
              <span className="marquee-item">Luxhabitat <span className="marquee-sep"/></span>
              <span className="marquee-item italic-soft">CovetHouse <span className="marquee-sep"/></span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ===== INTRO STATEMENT ===== */}
      <section className="section" style={{ paddingTop: 160, paddingBottom: 140 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 80, alignItems: "start" }}>
              <div>
                <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 8 }}>— A note on practice</div>
                <div className="mono" style={{ color: "var(--accent)" }}>§ 01</div>
              </div>
              <div>
                <p className="pull-quote" style={{ margin: 0, color: "var(--fg)" }}>
                  We are an integrated studio — architects, interior designers, landscape, FF&E and project coordinators under one roof in <span className="accent">Dubai Design District</span>. <em>From a single residence to a hotel</em> — the same hand, from first sketch to last specification.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <div style={{ padding: "0 36px" }}><div className="divider"/></div>

      {/* ===== SELECTED WORK ===== */}
      <section className="section" style={{ paddingTop: 110 }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <SectionHeader
            eyebrow={`§ 02 / ${t.home.featuredLabel}`}
            title={ar ? "أعمال مختارة، ٢٠١٨–٢٠٢٤" : "Selected work, 2018–2024"}
            kicker={ar ? "تصفّح المشاريع المُصنّفة حسب القطاع، النطاق، والموقع." : "Browse the work — filtered by sector, scope, and location. Every project is documented as a case study, with brief, materials, and outcome."}
          />

          {/* Asymmetric editorial grid */}
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32, marginBottom: 32 }}>
            <Reveal><ProjectCard project={featured[0]} t={t} size="wide" onClick={onOpenProject} ar={ar}/></Reveal>
            <Reveal delay={120}><ProjectCard project={featured[1]} t={t} size="tall" onClick={onOpenProject} ar={ar}/></Reveal>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 32 }}>
            <Reveal><ProjectCard project={featured[3]} t={t} size="tall" onClick={onOpenProject} ar={ar}/></Reveal>
            <Reveal delay={120}><ProjectCard project={featured[2]} t={t} size="wide" onClick={onOpenProject} ar={ar}/></Reveal>
          </div>

          <div style={{ marginTop: 64, display: "flex", justifyContent: "center" }}>
            <button className="btn-secondary" onClick={() => onNavigate("projects")}>
              {ar ? "كل المشاريع" : "All projects"} <span style={{ color: "var(--accent)" }}>({projects.length})</span> →
            </button>
          </div>
        </div>
      </section>

      {/* ===== PROCESS BAND ===== */}
      <section className="section" style={{ background: "var(--surface-elev)", paddingTop: 130, paddingBottom: 130 }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <SectionHeader
            eyebrow="§ 03 / Process"
            title={ar ? "أربع مراحل، فريق واحد." : "Four stages, one team."}
            kicker="From an empty plot or a stripped-back shell, through to handover. Same studio, same accountability — across all four stages."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {[
              { n: "01", t: "Concept", body: "Brief, site analysis, references, and a first design intent — established before fees escalate.", k: "Weeks 1–4" },
              { n: "02", t: "Design", body: "Architecture, interiors and landscape developed in parallel. MEP and structure coordinated under one roof.", k: "Months 2–6" },
              { n: "03", t: "Coordination", body: "FF&E specification, technical drawings, vendor and contractor coordination. The design intent is locked.", k: "Months 5–10" },
              { n: "04", t: "Delivery", body: "On-site review, snagging, and handover. We protect the design intent through to the final fixture.", k: "Months 8–14" }
            ].map((s, i) => (
              <Reveal key={s.n} delay={i * 80}>
                <div className="process-step">
                  <div>
                    <div className="mono" style={{ color: "var(--accent)" }}>{s.n}</div>
                    <div className="serif" style={{ fontSize: 36, marginTop: 16, lineHeight: 1.05 }}>{s.t}</div>
                    <div style={{ marginTop: 14, fontSize: 13.5, color: "var(--fg-soft)", lineHeight: 1.6 }}>{s.body}</div>
                  </div>
                  <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--hairline)" }}>{s.k}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ===== SECTORS STRIP ===== */}
      <section className="section" style={{ paddingTop: 130 }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <SectionHeader
            eyebrow={`§ 04 / ${t.home.sectorsLabel}`}
            title={ar ? "خمسة قطاعات. منهج واحد." : "Five sectors. One studio."}
            kicker={ar ? "من الفيلا الخاصة إلى الفندق ومن المكتب إلى المسطح متعدد الاستخدامات." : "From the private villa to the hotel, from the single office floor to the masterplan — with the same integrated team."}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16 }}>
            {[
              { id: "residential", img: featured[0].cover, label: "Residential", n: 7 },
              { id: "hospitality", img: "assets/kata-02.webp", label: "Hospitality", n: 4 },
              { id: "commercial", img: "assets/taws-01.webp", label: "Commercial", n: 1 },
              { id: "retail", img: "assets/juice-01.webp", label: "Retail", n: 1 },
              { id: "mixed-use", img: "assets/althuraya-aerial.webp", label: "Mixed-use", n: 1 }
            ].map((s, i) => (
              <Reveal key={s.id} delay={i * 60}>
                <button onClick={() => onNavigate("projects", { sector: s.id })} style={{ width: "100%", textAlign: "left", color: "inherit", display: "block" }}>
                  <div style={{ aspectRatio: "3 / 4", position: "relative", overflow: "hidden" }}
                    onMouseEnter={e => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1.06)"; }}
                    onMouseLeave={e => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1)"; }}>
                    <img src={s.img} alt={s.label} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 1200ms cubic-bezier(.2,.6,.2,1)" }}/>
                    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,16,17,0) 35%, rgba(15,16,17,0.88) 100%)" }}/>
                    <div className="mono" style={{ position: "absolute", top: 16, left: 16, color: "rgba(241,236,227,0.8)" }}>0{i+1}</div>
                    <div style={{ position: "absolute", bottom: 22, left: 18, right: 18, color: "var(--paper)" }}>
                      <div className="serif" style={{ fontSize: 24 }}>{s.label}</div>
                      <div className="mono" style={{ marginTop: 4, color: "rgba(241,236,227,0.65)" }}>{s.n} {s.n === 1 ? "project" : "projects"} →</div>
                    </div>
                  </div>
                </button>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FOUNDER PULL QUOTE ===== */}
      <section className="section" style={{ paddingTop: 140, paddingBottom: 140 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
              <div>
                <div style={{ width: 180, height: 220, overflow: "hidden", background: "var(--surface-elev)", marginBottom: 20 }}>
                  <img src="assets/founder.webp" alt="Ellen Søhoel" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                </div>
                <div className="serif" style={{ fontSize: 22, color: "var(--fg)" }}>Ellen Søhoel</div>
                <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 6 }}>Founder, 2015</div>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 80, lineHeight: 0.4, color: "var(--accent)", height: 36 }}>"</div>
                <p className="pull-quote" style={{ margin: "20px 0 0", color: "var(--fg)" }}>
                  Architecture, interiors, landscape — they are <em>the same problem</em> at different scales. We started XBD because that is how we wanted to work. <span className="accent">Ten years in</span>, that conviction hasn't changed.
                </p>
                <div className="mono" style={{ marginTop: 32, color: "var(--fg-mute)" }}>— Ellen Søhoel, on founding XBD · attributed</div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <div style={{ padding: "0 36px" }}><div className="divider"/></div>

      {/* ===== CREDIBILITY ===== */}
      <section className="section">
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader eyebrow={`§ 05 / ${t.home.credLabel || "Why XBD"}`} title="By the numbers"/>
          <Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40, alignItems: "start" }}>
              <StatBlock value={F.awardsClaim} label="Awards" sub="Per studio's own count — figure subject to client confirmation." />
              <StatBlock value={F.yearsCount} label="Years" sub={`Founded ${F.founded} by ${F.founder}.`} />
              <StatBlock value="3" label="Offices" sub="Dubai HQ · London · Kochi." />
              <StatBlock value="14" label="Case studies" sub="Five sectors, three countries." />
            </div>
          </Reveal>

          <Reveal delay={160}>
            <div style={{ marginTop: 80, paddingTop: 32, borderTop: "1px solid var(--hairline)",
                          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
              <div className="mono" style={{ color: "var(--fg-mute)" }}>Clients (per press, attributed)</div>
              <div style={{ display: "flex", gap: 48, alignItems: "center", flexWrap: "wrap" }}>
                {["Emaar","DAMAC","Almal","Rixos","St Regis"].map(c => (
                  <div key={c} className="serif" style={{ fontSize: 26, color: "var(--fg-soft)", fontStyle: "italic", fontWeight: 300 }}>{c}</div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== MATERIALS / PROCESS IMAGE ===== */}
      <section style={{ position: "relative", padding: "0", minHeight: "85vh", overflow: "hidden", background: "var(--noir)" }}>
        <img src="assets/casa-del-sol-02.webp" alt="" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.55
        }}/>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(15,16,17,0.88) 0%, rgba(15,16,17,0.4) 65%, rgba(15,16,17,0.2) 100%)" }}/>
        <div style={{ position: "relative", padding: "180px 36px", maxWidth: 1480, margin: "0 auto", color: "var(--paper)" }}>
          <Reveal>
            <div className="eyebrow" style={{ color: "rgba(241,236,227,0.7)", marginBottom: 32 }}>§ 06 · Materials & process</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5.5vw, 88px)", margin: 0, maxWidth: 920, color: "var(--paper)" }}>
              We design the joint, <em style={{ color: "rgba(241,236,227,0.7)" }}>not just the room.</em>
            </h2>
            <div style={{ marginTop: 36, maxWidth: 580, color: "rgba(241,236,227,0.75)", fontSize: 16, lineHeight: 1.7 }}>
              Travertine, oak, plaster, bronze — specified, sourced, supervised on site. Our material library lives in d3, two minutes from the studio floor.
            </div>
            <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, maxWidth: 720 }}>
              {["Travertine","Smoked oak","Lime plaster","Patinated brass"].map(m => (
                <div key={m} style={{ borderTop: "1px solid rgba(241,236,227,0.3)", paddingTop: 14 }}>
                  <div className="mono" style={{ color: "rgba(241,236,227,0.5)" }}>Specimen</div>
                  <div className="serif" style={{ fontSize: 19, marginTop: 6, color: "var(--paper)" }}>{m}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 52 }}>
              <button className="btn-secondary" onClick={() => onNavigate("services")}
                      style={{ borderColor: "rgba(241,236,227,0.4)", color: "var(--paper)" }}>
                Our services →
              </button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== CTA BAND ===== */}
      <section style={{ padding: "140px 36px", textAlign: "center" }}>
        <Reveal>
          <div style={{ maxWidth: 880, margin: "0 auto" }}>
            <div className="eyebrow" style={{ marginBottom: 32 }}><span className="dot"/>Start a project</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5.5vw, 80px)", margin: 0 }}>
              <em className="italic-soft" style={{ color: "var(--fg)" }}>A villa, a hotel,</em> or a city block —<br/>tell us what you're building.
            </h2>
            <div style={{ marginTop: 48, display: "inline-flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
              <button className="btn-primary" onClick={() => onNavigate("contact")}>{t.cta.start} →</button>
              <button className="btn-secondary" onClick={() => onNavigate("contact")}>{t.cta.consult}</button>
            </div>
            <div className="mono" style={{ marginTop: 32, color: "var(--fg-mute)" }}>
              Or: <a href={`tel:${F.phoneRaw}`} className="link-u">{F.phone}</a> · <a href={`mailto:${F.email}`} className="link-u">{F.email}</a>
            </div>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

// ============================================================
// PROJECTS INDEX
// ============================================================
function ProjectsView({ t, ar, onOpenProject, initialFilter }) {
  const projects = window.XBD.projects;
  const [sector, setSector] = useStateP(initialFilter?.sector || "all");
  const [scope, setScope] = useStateP("all");
  const [view, setView] = useStateP("grid"); // grid | index

  useEffectP(() => { if (initialFilter?.sector) setSector(initialFilter.sector); }, [initialFilter]);

  const filtered = useMemoP(() => projects.filter(p => {
    if (sector !== "all" && p.sector !== sector) return false;
    if (scope !== "all" && !p.scope.includes(scope)) return false;
    return true;
  }), [sector, scope]);

  return (
    <div className="view" style={{ paddingTop: 100 }}>
      {/* Header */}
      <section style={{ padding: "60px 36px 30px" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div className="eyebrow">{t.projects.title}</div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginTop: 16 }}>
            <h1 className="h-display" style={{ fontSize: "clamp(48px, 6vw, 90px)", margin: 0 }}>
              <span className="italic-soft" style={{ color: "var(--fg)" }}>{filtered.length}</span> {filtered.length === 1 ? "project" : "projects"}
            </h1>
            <div style={{ display: "flex", gap: 12 }}>
              <button className="mono" onClick={() => setView("grid")} style={{
                padding: "9px 14px", border: "1px solid var(--hairline)",
                background: view === "grid" ? "var(--fg)" : "transparent",
                color: view === "grid" ? "var(--bg)" : "var(--fg-soft)"
              }}>Grid</button>
              <button className="mono" onClick={() => setView("index")} style={{
                padding: "9px 14px", border: "1px solid var(--hairline)",
                background: view === "index" ? "var(--fg)" : "transparent",
                color: view === "index" ? "var(--bg)" : "var(--fg-soft)"
              }}>Index</button>
            </div>
          </div>
        </div>
      </section>

      {/* Filters */}
      <section style={{ padding: "20px 36px 30px", borderBottom: "1px solid var(--hairline)", position: "sticky", top: 90, background: "color-mix(in oklch, var(--bg) 92%, transparent)", backdropFilter: "blur(12px)", zIndex: 10 }}>
        <div style={{ maxWidth: 1480, margin: "0 auto", display: "flex", gap: 40, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <div className="mono" style={{ color: "var(--fg-mute)" }}>{t.projects.filterSector}:</div>
            <FilterChip label={t.projects.all} active={sector === "all"} onClick={() => setSector("all")} />
            {window.XBD.sectors.map(s => (
              <FilterChip key={s.id} label={s.label} active={sector === s.id} onClick={() => setSector(s.id)} />
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <div className="mono" style={{ color: "var(--fg-mute)" }}>{t.projects.filterScope}:</div>
            <FilterChip label={t.projects.all} active={scope === "all"} onClick={() => setScope("all")} />
            {window.XBD.scopes.map(s => (
              <FilterChip key={s.id} label={s.label} active={scope === s.id} onClick={() => setScope(s.id)} />
            ))}
          </div>
          {(sector !== "all" || scope !== "all") && (
            <button className="mono" onClick={() => { setSector("all"); setScope("all"); }} style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)", paddingBottom: 2 }}>{t.projects.clear}</button>
          )}
        </div>
      </section>

      {/* Grid */}
      {view === "grid" ? (
        <section style={{ padding: "60px 36px 120px" }}>
          <div style={{ maxWidth: 1480, margin: "0 auto" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, rowGap: 60 }}>
              {filtered.map((p, i) => (
                <Reveal key={p.slug} delay={(i % 3) * 80}>
                  <ProjectCard project={p} t={t} onClick={onOpenProject} ar={ar}/>
                </Reveal>
              ))}
            </div>
            {filtered.length === 0 && (
              <div style={{ padding: "120px 0", textAlign: "center", color: "var(--fg-mute)" }}>
                <div className="serif" style={{ fontSize: 32 }}>No projects match this filter.</div>
              </div>
            )}
          </div>
        </section>
      ) : (
        <section style={{ padding: "60px 36px 120px" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr 0.6fr 0.5fr 1.4fr 0.6fr", gap: 24, padding: "16px 0", borderTop: "1px solid var(--fg)", borderBottom: "1px solid var(--hairline)" }}>
              <div className="mono">№</div>
              <div className="mono">Project</div>
              <div className="mono">Location</div>
              <div className="mono">Sector</div>
              <div className="mono">Year</div>
              <div className="mono">Scope</div>
              <div></div>
            </div>
            {filtered.map((p, i) => (
              <button key={p.slug} onClick={() => onOpenProject(p)} style={{
                display: "grid", gridTemplateColumns: "60px 1fr 1fr 0.6fr 0.5fr 1.4fr 0.6fr",
                gap: 24, padding: "26px 0", borderBottom: "1px solid var(--hairline)",
                textAlign: "left", width: "100%", color: "inherit", alignItems: "center",
                transition: "background 240ms"
              }}
              onMouseEnter={e => e.currentTarget.style.background = "var(--surface-elev)"}
              onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                <div className="mono" style={{ color: "var(--fg-mute)" }}>{String(i+1).padStart(2,"0")}</div>
                <div className="serif" style={{ fontSize: 26 }}>{p.name}</div>
                <div style={{ fontSize: 13.5, color: "var(--fg-soft)" }}>{p.location}</div>
                <div className="mono" style={{ color: "var(--fg-soft)" }}>{(window.XBD.sectors.find(s => s.id === p.sector) || {}).label}</div>
                <div className="mono" style={{ color: "var(--fg-mute)" }}>{p.year}</div>
                <div className="mono" style={{ color: "var(--fg-soft)" }}>{p.scope.join(" · ")}</div>
                <div className="mono" style={{ color: "var(--accent)", textAlign: "right" }}>View →</div>
              </button>
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

// ============================================================
// CASE STUDY
// ============================================================
function CaseStudyView({ t, ar, project, onNavigate, onOpenProject, layout = "editorial" }) {
  const all = window.XBD.projects;
  const idx = all.findIndex(p => p.slug === project.slug);
  const next = all[(idx + 1) % all.length];
  const related = all.filter(p => p.sector === project.sector && p.slug !== project.slug).slice(0, 3);
  const sectorLabel = (window.XBD.sectors.find(s => s.id === project.sector) || {}).label;

  return (
    <div className="view">
      {/* HERO */}
      <section style={{ position: "relative", height: "100vh", minHeight: 720, overflow: "hidden" }}>
        <img src={project.hero} alt={project.name} className="kenburns"
             style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,16,17,0.4) 0%, rgba(15,16,17,0) 40%, rgba(15,16,17,0.85) 100%)" }}/>
        <div style={{ position: "absolute", inset: 0, padding: "140px 36px 60px", display: "flex", flexDirection: "column", justifyContent: "space-between", color: "var(--paper)" }}>
          <div>
            <button onClick={() => onNavigate("projects")} className="mono fade-in" style={{
              color: "rgba(241,236,227,0.7)", letterSpacing: "0.14em"
            }}>← {t.nav.projects}</button>
          </div>
          <div className="rise" style={{ maxWidth: 1480, margin: "0 auto", width: "100%" }}>
            <div className="eyebrow" style={{ color: "rgba(241,236,227,0.7)" }}>{sectorLabel} · {project.scope.join(" · ")}</div>
            <h1 className="h-display" style={{ fontSize: "clamp(56px, 9vw, 140px)", margin: "20px 0 0", color: "var(--paper)" }}>
              {project.name}
            </h1>
            <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20 }}>
              <div className="serif italic-soft" style={{ fontSize: 24, color: "rgba(241,236,227,0.85)" }}>
                {project.location}
              </div>
              <div className="mono" style={{ color: "rgba(241,236,227,0.65)" }}>
                {project.year} · {project.scope.join(" · ")} {project.visualisation ? "· VISUALISATION" : ""}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* META STRIP */}
      <section style={{ padding: "40px 36px", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 24 }}>
          {[
            ["Location", project.location],
            ["Sector", sectorLabel],
            ["Scope", project.scope.join(" · ")],
            ["Year", project.year],
            ["Photography", project.credit]
          ].map(([k, v]) => (
            <div key={k}>
              <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 6 }}>{k}</div>
              <div style={{ fontSize: 14, color: "var(--fg)" }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* BRIEF + CONCEPT */}
      <section className="section" style={{ paddingTop: 140 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start", marginBottom: 100 }}>
              <div className="mono" style={{ color: "var(--fg-mute)" }}>01 · {t.caseStudy.brief}</div>
              <div className="serif" style={{ fontSize: "clamp(24px, 2.5vw, 36px)", lineHeight: 1.35 }}>
                {project.brief}
              </div>
            </div>
          </Reveal>
          {project.concept && (
            <Reveal delay={120}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
                <div className="mono" style={{ color: "var(--fg-mute)" }}>02 · {t.caseStudy.concept}</div>
                <div className="serif italic-soft" style={{ fontSize: "clamp(22px, 2.2vw, 32px)", lineHeight: 1.4 }}>
                  {project.concept}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* HERO IMAGE — LARGE */}
      {project.gallery[1] && (
        <section style={{ padding: "0 36px" }}>
          <Reveal>
            <div style={{ maxWidth: 1480, margin: "0 auto" }}>
              <Img src={project.gallery[1]} alt={project.name} ratio="16 / 9" />
            </div>
          </Reveal>
        </section>
      )}

      {/* MATERIALS */}
      {project.materials && (
        <section className="section">
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Reveal>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
                <div className="mono" style={{ color: "var(--fg-mute)" }}>03 · {t.caseStudy.materials}</div>
                <div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--hairline)" }}>
                    {project.materials.map((m, i) => (
                      <li key={i} style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "22px 0", borderBottom: "1px solid var(--hairline)", gap: 24 }}>
                        <span className="mono" style={{ color: "var(--fg-mute)" }}>M{String(i+1).padStart(2,"0")}</span>
                        <span className="serif" style={{ fontSize: 24, flex: 1, marginLeft: 24, color: "var(--fg)" }}>{m}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </Reveal>
          </div>
        </section>
      )}

      {/* GALLERY */}
      <section style={{ padding: "60px 36px 120px" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 32 }}>04 · {t.caseStudy.gallery}</div>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
            {project.gallery.map((src, i) => {
              // Editorial asymmetric layout
              const layouts = [
                { col: "1 / 5", ratio: "16 / 10" },
                { col: "5 / 7", ratio: "4 / 5" },
                { col: "1 / 3", ratio: "4 / 5" },
                { col: "3 / 7", ratio: "16 / 10" },
                { col: "1 / 4", ratio: "3 / 4" },
                { col: "4 / 7", ratio: "3 / 4" }
              ];
              const L = layouts[i % layouts.length];
              return (
                <Reveal key={i} delay={(i % 3) * 80} style={{ gridColumn: L.col }}>
                  <Img src={src} ratio={L.ratio} alt={`${project.name} — ${i+1}`} />
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* OUTCOME */}
      {project.outcome && (
        <section style={{ padding: "80px 36px", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
          <Reveal>
            <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
              <div className="mono" style={{ color: "var(--fg-mute)" }}>05 · {t.caseStudy.outcome}</div>
              <div className="serif italic-soft" style={{ fontSize: "clamp(22px, 2.2vw, 32px)", lineHeight: 1.4, color: "var(--fg)" }}>
                {project.outcome}
              </div>
            </div>
          </Reveal>
        </section>
      )}

      {/* PROJECT ENQUIRY */}
      <section style={{ padding: "120px 36px", textAlign: "center" }}>
        <Reveal>
          <div style={{ maxWidth: 720, margin: "0 auto" }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Enquire about a similar project</div>
            <h3 className="h-display" style={{ fontSize: "clamp(34px, 4vw, 56px)", margin: 0 }}>
              <span className="italic-soft" style={{ color: "var(--fg)" }}>Building something</span> like {project.name}?
            </h3>
            <div style={{ marginTop: 40, display: "inline-flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
              <button className="btn-primary" onClick={() => onNavigate("contact", { project: project.slug })}>{t.cta.enquire}</button>
              <a href={`https://wa.me/97145535362?text=Project%20enquiry%20%E2%80%94%20${encodeURIComponent(project.name)}`}
                 className="btn-secondary" target="_blank" rel="noopener">WhatsApp</a>
            </div>
            <div className="mono" style={{ marginTop: 20, color: "var(--fg-mute)" }}>Your enquiry will be tagged: {project.name}</div>
          </div>
        </Reveal>
      </section>

      {/* RELATED + NEXT */}
      {related.length > 0 && (
        <section style={{ padding: "120px 36px", background: "var(--surface-elev)" }}>
          <div style={{ maxWidth: 1480, margin: "0 auto" }}>
            <SectionHeader eyebrow={t.caseStudy.related} title={`More from ${sectorLabel}`}/>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
              {related.map((p, i) => (
                <Reveal key={p.slug} delay={i * 100}>
                  <ProjectCard project={p} t={t} onClick={onOpenProject} ar={ar}/>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* NEXT PROJECT footer */}
      <section style={{ position: "relative", minHeight: "50vh", overflow: "hidden", cursor: "pointer" }}
               onClick={() => onOpenProject(next)}>
        <img src={next.cover} alt={next.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,16,17,0.6) 0%, rgba(15,16,17,0.85) 100%)" }}/>
        <div style={{ position: "relative", padding: "120px 36px", textAlign: "center", color: "var(--paper)" }}>
          <div className="eyebrow" style={{ color: "rgba(241,236,227,0.7)" }}>{t.caseStudy.next}</div>
          <div className="h-display" style={{ fontSize: "clamp(48px, 7vw, 110px)", marginTop: 16 }}>{next.name}</div>
          <div className="mono" style={{ marginTop: 16, color: "rgba(241,236,227,0.7)" }}>{next.location} · {next.year} →</div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// SERVICES
// ============================================================
function ServicesView({ t, ar, onNavigate }) {
  return (
    <div className="view" style={{ paddingTop: 140 }}>
      <section className="section" style={{ paddingTop: 60 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <div className="eyebrow">{t.nav.services || "Services"}</div>
          <h1 className="h-display" style={{ fontSize: "clamp(56px, 7vw, 120px)", margin: "16px 0 40px" }}>
            <span className="italic-soft" style={{ color: "var(--fg)" }}>Integrated.</span><br/>End-to-end.
          </h1>
          <div className="serif" style={{ fontSize: "clamp(22px, 2.2vw, 32px)", maxWidth: 880, color: "var(--fg-soft)", lineHeight: 1.4 }}>
            One studio, one team, one accountability. From the first sketch to the last fixture — coordinated under one roof in Dubai Design District.
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 60 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          {window.XBD.services.map((s, i) => (
            <Reveal key={s.id} delay={i * 60}>
              <div style={{
                display: "grid", gridTemplateColumns: "100px 1fr 1.5fr", gap: 60,
                padding: "60px 0", borderBottom: "1px solid var(--hairline)",
                alignItems: "start"
              }}>
                <div className="mono" style={{ color: "var(--accent)" }}>{String(i+1).padStart(2,"0")}</div>
                <h3 className="serif" style={{ margin: 0, fontSize: 38, lineHeight: 1.05 }}>{s.title}</h3>
                <div style={{ fontSize: 15.5, color: "var(--fg-soft)", lineHeight: 1.65 }}>{s.body}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}

// ============================================================
// STUDIO
// ============================================================
function StudioView({ t, ar, onNavigate }) {
  const F = window.XBD.firm;
  return (
    <div className="view" style={{ paddingTop: 140 }}>
      <section className="section" style={{ paddingTop: 40 }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div className="eyebrow">{t.studio.title}</div>
          <h1 className="h-display" style={{ fontSize: "clamp(56px, 7.5vw, 130px)", margin: "16px 0 60px" }}>
            A studio of <span className="italic-soft" style={{ color: "var(--fg)" }}>{F.staffClaim}</span>,<br/>across three cities.
          </h1>

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80 }}>
            <Reveal>
              <Img src="assets/founder.webp" alt="Ellen Søhoel, Founder" ratio="4 / 5"/>
              <div style={{ marginTop: 18 }}>
                <div className="serif" style={{ fontSize: 26 }}>Ellen Søhoel</div>
                <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 6 }}>Founder & Creative Director</div>
                <div className="mono" style={{ marginTop: 4, color: "var(--fg-mute)", fontSize: 10 }}>Portrait © emma stokwielder productions — rights TBC.</div>
              </div>
            </Reveal>
            <Reveal delay={140}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t.studio.about}</div>
              <p className="serif" style={{ fontSize: "clamp(20px, 1.8vw, 26px)", lineHeight: 1.55, color: "var(--fg)" }}>
                XBD was founded in 2015 by <em>Ellen Søhoel</em>, a Norwegian interior architect drawn to Dubai's early promise. What began as a team of two is now <em>140+</em> across Dubai, London and Kochi.
              </p>
              <p className="serif" style={{ fontSize: "clamp(20px, 1.8vw, 26px)", lineHeight: 1.55, color: "var(--fg-soft)", marginTop: 24 }}>
                <em>10 years in.</em> 90+ awards. Five sectors. Three cities. One conviction: integrated, in-house, end-to-end — from first sketch to last specification.
              </p>
              <div style={{ marginTop: 40, paddingTop: 28, borderTop: "1px solid var(--hairline)" }}>
                <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 14 }}>Press · attributed</div>
                <div className="serif italic-soft" style={{ fontSize: 18, color: "var(--fg-soft)" }}>
                  Commercial Interior Design · Love That Design · Luxhabitat · Rethinking The Future · SBID
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* LEADERSHIP */}
      <section className="section" style={{ background: "var(--surface-elev)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <SectionHeader eyebrow="Leadership" title={t.studio.team}/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {window.XBD.team.map((m, i) => (
              <Reveal key={m.name} delay={i * 80}>
                <div style={{
                  aspectRatio: "3 / 4",
                  background: "var(--bg)",
                  position: "relative", display: "flex", alignItems: "flex-end", padding: 24,
                  border: "1px solid var(--hairline)"
                }}>
                  <div className="mono" style={{ position: "absolute", top: 24, right: 24, color: "var(--fg-mute)" }}>{String(i+1).padStart(2,"0")}</div>
                  <div className="mono" style={{ position: "absolute", top: 24, left: 24, color: "var(--fg-mute)" }}>Portrait pending</div>
                  <div>
                    <div className="serif" style={{ fontSize: 22, lineHeight: 1.1 }}>{m.name}</div>
                    <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 6 }}>{m.role}</div>
                    {m.note && <div className="serif italic-soft" style={{ fontSize: 13, marginTop: 8, color: "var(--fg-mute)" }}>{m.note}</div>}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <div className="mono" style={{ marginTop: 32, color: "var(--fg-mute)" }}>
            + 130 designers, architects, coordinators across Dubai, London and Kochi.
          </div>
        </div>
      </section>

      {/* AWARDS */}
      <section className="section">
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader eyebrow={`${F.awardsClaim} total`} title={t.studio.awards} kicker="Per studio's own award count. A selection is listed below — all attributed to name, year, and issuer."/>
          <div style={{ borderTop: "1px solid var(--fg)" }}>
            {window.XBD.awards.map((a, i) => (
              <Reveal key={i} delay={(i % 3) * 60}>
                <div style={{
                  display: "grid", gridTemplateColumns: "100px 1fr 1.2fr 1fr",
                  gap: 24, padding: "28px 0", borderBottom: "1px solid var(--hairline)", alignItems: "baseline"
                }}>
                  <div className="mono" style={{ color: "var(--fg-mute)" }}>{a.year}</div>
                  <div className="serif" style={{ fontSize: 20 }}>{a.name}</div>
                  <div style={{ fontSize: 13.5, color: "var(--fg-soft)" }}>{a.issuer}</div>
                  <div className="mono" style={{ color: "var(--accent)", textAlign: "right" }}>{a.project}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* OFFICES */}
      <section className="section" style={{ background: "var(--surface-elev)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <SectionHeader eyebrow="Three cities" title="Where we work from"/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {F.offices.map((o, i) => (
              <Reveal key={o.city} delay={i * 100}>
                <div style={{ padding: 32, border: "1px solid var(--hairline)", background: "var(--bg)", minHeight: 240 }}>
                  <div className="mono" style={{ color: "var(--accent)" }}>{String(i+1).padStart(2,"0")} · {o.region}</div>
                  <div className="serif" style={{ fontSize: 44, marginTop: 16 }}>{o.city}</div>
                  <div style={{ marginTop: 16, fontSize: 13.5, color: "var(--fg-soft)", lineHeight: 1.6 }}>{o.address}</div>
                  <div className="mono" style={{ marginTop: 12, color: "var(--fg-mute)" }}>{o.phone}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CONTACT
// ============================================================
function ContactView({ t, ar, prefillProject }) {
  const F = window.XBD.firm;
  const [submitted, setSubmitted] = useStateP(false);
  const [form, setForm] = useStateP({
    name: "", email: "", phone: "", company: "",
    scope: "interior", sector: "residential", budget: "",
    message: prefillProject ? `Enquiry about a project similar to ${prefillProject}.\n\n` : ""
  });

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

  function submit(e) {
    e.preventDefault();
    setSubmitted(true);
  }

  const inputStyle = {
    width: "100%",
    background: "transparent",
    border: 0,
    borderBottom: "1px solid var(--hairline)",
    padding: "14px 0",
    color: "var(--fg)",
    fontFamily: "var(--sans)",
    fontSize: 16,
    outline: "none",
    transition: "border-color 240ms"
  };
  const labelStyle = { display: "block", marginBottom: 4, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--fg-mute)", textTransform: "uppercase" };

  return (
    <div className="view" style={{ paddingTop: 140 }}>
      <section className="section" style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div className="eyebrow">{t.contact.title}</div>
          <h1 className="h-display" style={{ fontSize: "clamp(56px, 8vw, 140px)", margin: "16px 0 0" }}>
            <span className="italic-soft" style={{ color: "var(--fg)" }}>Start a project.</span>
          </h1>
        </div>
      </section>

      <section style={{ padding: "0 36px 120px" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80 }}>
          {/* Form */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 32 }}>{t.contact.form}</div>
            {submitted ? (
              <div style={{ padding: "80px 0" }}>
                <div className="h-display italic-soft" style={{ fontSize: 48, color: "var(--fg)" }}>Thank you.</div>
                <div style={{ marginTop: 20, color: "var(--fg-soft)", fontSize: 16, maxWidth: 520 }}>
                  Your enquiry is logged and routed to the studio. We respond within two working days — usually with a request for a short call to understand the brief, the site, and your timeline.
                </div>
                <button className="btn-secondary" style={{ marginTop: 32 }} onClick={() => { setSubmitted(false); setForm({ name:"", email:"", phone:"", company:"", scope:"interior", sector:"residential", budget:"", message:"" }); }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, marginBottom: 40 }}>
                  <div>
                    <label style={labelStyle}>{t.contact.name} *</label>
                    <input style={inputStyle} required value={form.name} onChange={e => update("name", e.target.value)}
                           onFocus={e => e.target.style.borderColor = "var(--accent)"}
                           onBlur={e => e.target.style.borderColor = "var(--hairline)"}/>
                  </div>
                  <div>
                    <label style={labelStyle}>{t.contact.email} *</label>
                    <input type="email" style={inputStyle} required value={form.email} onChange={e => update("email", e.target.value)}
                           onFocus={e => e.target.style.borderColor = "var(--accent)"}
                           onBlur={e => e.target.style.borderColor = "var(--hairline)"}/>
                  </div>
                  <div>
                    <label style={labelStyle}>{t.contact.phone}</label>
                    <input style={inputStyle} value={form.phone} onChange={e => update("phone", e.target.value)}
                           onFocus={e => e.target.style.borderColor = "var(--accent)"}
                           onBlur={e => e.target.style.borderColor = "var(--hairline)"}/>
                  </div>
                  <div>
                    <label style={labelStyle}>{t.contact.company}</label>
                    <input style={inputStyle} value={form.company} onChange={e => update("company", e.target.value)}
                           onFocus={e => e.target.style.borderColor = "var(--accent)"}
                           onBlur={e => e.target.style.borderColor = "var(--hairline)"}/>
                  </div>
                </div>

                <div style={{ marginBottom: 36 }}>
                  <label style={labelStyle}>Sector</label>
                  <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 14 }}>
                    {window.XBD.sectors.map(s => (
                      <FilterChip key={s.id} label={s.label} active={form.sector === s.id} onClick={() => update("sector", s.id)}/>
                    ))}
                  </div>
                </div>

                <div style={{ marginBottom: 36 }}>
                  <label style={labelStyle}>{t.contact.scope}</label>
                  <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 14 }}>
                    {window.XBD.scopes.map(s => (
                      <FilterChip key={s.id} label={s.label} active={form.scope === s.id} onClick={() => update("scope", s.id)}/>
                    ))}
                  </div>
                </div>

                <div style={{ marginBottom: 40 }}>
                  <label style={labelStyle}>{t.contact.message} *</label>
                  <textarea style={{ ...inputStyle, minHeight: 140, resize: "vertical", padding: "14px 0" }}
                            required value={form.message} onChange={e => update("message", e.target.value)}
                            placeholder="Site, brief, timeline, anything that helps us understand."
                            onFocus={e => e.target.style.borderColor = "var(--accent)"}
                            onBlur={e => e.target.style.borderColor = "var(--hairline)"}/>
                </div>

                <button type="submit" className="btn-primary" style={{ width: "100%", justifyContent: "center" }}>
                  {t.contact.submit} →
                </button>
                <div className="mono" style={{ marginTop: 20, color: "var(--fg-mute)" }}>
                  Or message us on <a href="https://wa.me/97145535362" target="_blank" rel="noopener" style={{ borderBottom: "1px solid var(--hairline)" }}>WhatsApp</a> · pending client confirmation of number
                </div>
              </form>
            )}
          </div>

          {/* Sidebar */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 32 }}>{t.contact.offices}</div>
            {F.offices.map(o => (
              <div key={o.city} style={{ padding: "28px 0", borderBottom: "1px solid var(--hairline)" }}>
                <div className="serif" style={{ fontSize: 28 }}>{o.city}</div>
                <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 4 }}>{o.region}</div>
                <div style={{ marginTop: 12, fontSize: 13.5, color: "var(--fg-soft)", lineHeight: 1.6 }}>{o.address}</div>
                <div className="mono" style={{ marginTop: 8, color: "var(--fg-mute)" }}>{o.phone}</div>
              </div>
            ))}

            <div style={{ marginTop: 40 }}>
              <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 12 }}>Direct</div>
              <a href={`tel:${F.phoneRaw}`} className="serif" style={{ display: "block", fontSize: 24, marginBottom: 8 }}>{F.phone}</a>
              <a href={`mailto:${F.email}`} className="serif" style={{ display: "block", fontSize: 24, color: "var(--accent)" }}>{F.email}</a>
              <a href={`mailto:${F.careersEmail}`} className="serif" style={{ display: "block", fontSize: 20, color: "var(--fg-soft)", marginTop: 12 }}>{F.careersEmail}</a>
            </div>

            <div style={{ marginTop: 40, padding: 24, background: "var(--surface-elev)", border: "1px solid var(--hairline)" }}>
              <div className="mono" style={{ color: "var(--fg-mute)" }}>Response time</div>
              <div className="serif" style={{ fontSize: 28, marginTop: 8 }}>2 working days.</div>
              <div style={{ fontSize: 13, color: "var(--fg-soft)", marginTop: 8, lineHeight: 1.5 }}>
                Every enquiry is read by a director. We respond within two working days, usually with a short call to understand the brief.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeView, ProjectsView, CaseStudyView, ServicesView, StudioView, ContactView });