/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle */ const { useState, useEffect, useMemo, useRef, useCallback } = React; // -- Data loaders -------------------------------------------------------- const projectsData = JSON.parse(document.getElementById("projects-data").textContent); const awardsData = JSON.parse(document.getElementById("awards-data").textContent); const clientsData = JSON.parse(document.getElementById("clients-data").textContent); const teamData = JSON.parse(document.getElementById("team-data").textContent); const SECTORS = [ { id: "all", label: "All", labelAr: "الكل" }, { id: "commercial", label: "Commercial / Workplace", labelAr: "الأعمال" }, { id: "hospitality", label: "Hospitality / F&B", labelAr: "الضيافة" }, { id: "public", label: "Public / Education", labelAr: "العام" }, { id: "residential", label: "Residential", labelAr: "السكنية" }, ]; const COPY = { en: { dir: "ltr", nav: { work: "Work", sectors: "Sectors", studio: "Studio", awards: "Awards", contact: "Contact", cta: "Start a project" }, hero: { eyebrow: "Swiss Bureau — A Design & Build Practice", h: "Interior\nDesign & Build,\nDubai. Since 2003.", meta1: "Established", meta1v: "2003", meta2: "Studio", meta2v: "Bay Square, Business Bay", meta3: "Group", meta3v: "Edifice · Lausanne", strip: [ { k: "Practice", v: "Single accountable partner —\ndesign through delivery." }, { k: "Sectors", v: "Commercial · Hospitality ·\nF&B · Public · Residential." }, { k: "Region", v: "United Arab Emirates +\nKingdom of Saudi Arabia." }, { k: "Recent", v: "CID Awards 2024 — Winner.\n2025 — Shortlist, ALEC HQ." }, ], }, sectorsTitle: "Sectors", sectorsLead: "Five disciplines under one Swiss-precision practice. Each sector portfolio is the work of the same team — only the brief and the section header change.", workTitle: "Selected Work", workLead: "A working portfolio. Click any project to open its case study. Per-project years and areas are populated on confirmation with the client.", studioTitle: "The Studio", studioP1: "Swiss Bureau Interior Design was founded in 2003 by Swiss interior architect Joakim de Rham as a Dubai outpost of the Edifice group of Lausanne — a 60-year design lineage rooted in Swiss precision.", studioP2: "Two decades on, the practice operates two licensed entities — Swiss Bureau Interior Design LLC and Swiss Bureau Projects Supply LLC — delivering interior design and the fit-out that realises it under a single accountable partnership.", studioP3: "Our work is the work of long client relationships: AtkinsRéalis, Egon Zehnder, ICD Brookfield, ALEC, Galadari Brothers, the W Hotel ATTIKO concept, Sharjah Broadcasting Authority, the University of Europe campus, and a residential portfolio for Jubail Island.", awardsTitle: "Awards & Press", clientsTitle: "Selected Clients", contactTitle: "Start a project", contactLead: "Tell us about the brief. We will reply within one working day.", submit: "Send enquiry", footnote: "We respect client confidentiality. Submissions route to sales@sb-id.com. Photography on this site is third-party and credited per project; per-project metadata (year, area) is confirmed prior to publication.", }, ar: { dir: "rtl", nav: { work: "المشاريع", sectors: "القطاعات", studio: "الاستوديو", awards: "الجوائز", contact: "تواصل", cta: "ابدأ مشروعك" }, hero: { eyebrow: "سويس بيرو — تصميم وتنفيذ", h: "تصميم داخلي\nوتنفيذ متكامل،\nدبي. منذ ٢٠٠٣.", meta1: "تأسس", meta1v: "٢٠٠٣", meta2: "الاستوديو", meta2v: "باي سكوير، الخليج التجاري", meta3: "المجموعة", meta3v: "إديفيس · لوزان", strip: [ { k: "الممارسة", v: "شريك واحد للمسؤولية\nمن التصميم إلى التسليم." }, { k: "القطاعات", v: "أعمال · ضيافة ·\nمطاعم · عام · سكني." }, { k: "الإقليم", v: "الإمارات العربية المتحدة\nوالمملكة العربية السعودية." }, { k: "الأحدث", v: "جوائز سي آي دي ٢٠٢٤ — فائز.\n٢٠٢٥ — قائمة قصيرة." }, ], }, sectorsTitle: "القطاعات", sectorsLead: "خمس تخصصات في ممارسة واحدة بدقة سويسرية. كل قطاع يحمل توقيع الفريق نفسه — فقط البرنامج يتغير.", workTitle: "أعمال مختارة", workLead: "محفظة أعمال حيّة. اضغط على أي مشروع لفتح دراسة الحالة. يتم تأكيد سنة كل مشروع ومساحته مع العميل قبل النشر.", studioTitle: "الاستوديو", studioP1: "تأسست سويس بيرو للتصميم الداخلي عام ٢٠٠٣ على يد المهندس المعماري السويسري يواكيم دو رام، كفرع لمجموعة إديفيس في لوزان — إرث تصميمي يمتد لستين عاماً.", studioP2: "بعد عقدين، تدير الممارسة كيانين مرخصين يقدمان التصميم والتنفيذ تحت شراكة واحدة مسؤولة.", studioP3: "أعمالنا هي نتاج علاقات طويلة مع عملاء كبار: AtkinsRéalis، Egon Zehnder، ICD Brookfield، ALEC، وغيرهم.", awardsTitle: "جوائز وإعلام", clientsTitle: "عملاء مختارون", contactTitle: "ابدأ مشروعك", contactLead: "أخبرنا عن البرنامج. سنرد خلال يوم عمل واحد.", submit: "إرسال", footnote: "نحترم سرية العميل. ترسل الطلبات إلى sales@sb-id.com.", } }; // -- Tweaks defaults ----------------------------------------------------- const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "red", "density": "comfortable", "language": "en", "heroAuto": true, "showProjectCodes": true }/*EDITMODE-END*/; // -- Utilities ----------------------------------------------------------- function useScrolled(threshold = 24) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > threshold); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, [threshold]); return scrolled; } function fmtN(n) { return String(n).padStart(2, "0"); } // -- Components ---------------------------------------------------------- function LogoMark({ size = 22 }) { return ( SB·ID ); } function Nav({ onCta, t, locale, setLocale }) { const solid = useScrolled(40); const links = [ { id: "work", label: t.nav.work }, { id: "sectors", label: t.nav.sectors }, { id: "studio", label: t.nav.studio }, { id: "awards", label: t.nav.awards }, { id: "contact", label: t.nav.contact }, ]; const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; return (
{ e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
); } function Hero({ t, autoplay }) { const heroImages = projectsData.filter((p) => p.hero).slice(0, 6); const [idx, setIdx] = useState(0); useEffect(() => { if (!autoplay) return; const tm = setInterval(() => setIdx((i) => (i + 1) % heroImages.length), 4200); return () => clearInterval(tm); }, [autoplay, heroImages.length]); const current = heroImages[idx]; return (
{t.hero.eyebrow}

{t.hero.h.split("\n").map((line, i) => ( {line}
))}

{t.hero.meta1} {t.hero.meta1v}
{t.hero.meta2} {t.hero.meta2v}
{t.hero.meta3} {t.hero.meta3v}
{heroImages.map((p, i) => ( {p.name} ))}
№ {fmtN(idx + 1)} / {fmtN(heroImages.length)}   {current?.name}  ·  {current?.location} {current?.sectorLabel}
{t.hero.strip.map((c, i) => (
{c.k}
{c.v.split("\n").map((s, j) => {s}
)}
))}
); } function Sectors({ t, onSelect, activeSector }) { const sectorCounts = useMemo(() => { const c = {}; projectsData.forEach((p) => { c[p.sector] = (c[p.sector] || 0) + 1; }); return c; }, []); const sectors = [ { id: "commercial", label: "Commercial / Workplace", arLabel: "أعمال", hint: "HQs · Offices · Boardrooms" }, { id: "hospitality", label: "Hospitality", arLabel: "ضيافة", hint: "Hotels · Lounges" }, { id: "fb", label: "Food & Beverage", arLabel: "مطاعم", hint: "Restaurants · Bars" }, { id: "public", label: "Public / Education", arLabel: "عام", hint: "Universities · Civic" }, { id: "residential", label: "Residential", arLabel: "سكني", hint: "Branded residence · Homes" }, ]; // hospitality and fb share the hospitality bucket in data const sampleFor = { commercial: "media/project-atkinsrealis-hq-commercial.webp", hospitality: "media/project-attiko-lounge-fb.webp", fb: "media/project-attiko-restaurant-fb.webp", public: "media/project-university-of-europe-public.webp", residential: "media/project-town-center-jubail-residential.webp", }; const countFor = (id) => id === "fb" ? 0 : (sectorCounts[id] || 0); return (
02 — {t.sectorsTitle}

{t.sectorsTitle}.

{t.sectorsLead}
{sectors.map((s, i) => (
onSelect(s.id === "fb" ? "hospitality" : s.id)} >
{fmtN(i + 1)}
{s.label}
{s.hint}
View →  {countFor(s.id) || "—"}
))}
); } function ProjectCard({ p, num, onOpen, showCodes }) { // Editorial sizing — vary aspect by index const aspect = num % 5 === 0 ? "ar-16-10" : num % 4 === 0 ? "ar-4-5" : num % 3 === 0 ? "ar-1-1" : "ar-3-2"; return (
onOpen(p)}>
{showCodes &&
SB · {fmtN(num)}
} {p.name}
Case Study →
{p.name}
{p.location}
{p.sectorLabel.split(" / ")[0]}
); } function Work({ t, sector, setSector, onOpen, showCodes }) { const filtered = useMemo(() => { if (sector === "all") return projectsData; return projectsData.filter((p) => p.sector === sector); }, [sector]); const countBy = useMemo(() => { const c = { all: projectsData.length }; projectsData.forEach((p) => { c[p.sector] = (c[p.sector] || 0) + 1; }); return c; }, []); // Span pattern for editorial cadence const spans = ["col-7", "col-5", "col-4", "col-8", "col-6", "col-6", "col-5", "col-7", "col-8", "col-4", "col-6", "col-6", "col-4", "col-8", "col-5", "col-7"]; return (
03 — {t.workTitle}

{t.workTitle}.

{t.workLead}
{SECTORS.map((s) => ( ))}
{filtered.map((p, i) => (
))}
); } function CaseStudy({ project, onClose, allProjects, onOpen, onStartProject }) { const open = !!project; useEffect(() => { if (open) { document.documentElement.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => { document.documentElement.style.overflow = ""; window.removeEventListener("keydown", onKey); }; } }, [open, onClose]); // Find prev/next within same sector for context const { prev, next } = useMemo(() => { if (!project) return { prev: null, next: null }; const samesector = allProjects.filter((p) => p.sector === project.sector); const idx = samesector.findIndex((p) => p.id === project.id); return { prev: samesector[(idx - 1 + samesector.length) % samesector.length], next: samesector[(idx + 1) % samesector.length], }; }, [project, allProjects]); return (
); } function Studio({ t }) { return (
04 — {t.studioTitle}

{t.studioTitle}.

Founder portrait
Joakim de Rham
—— request hi-res master ——
Joakim de Rham
Founder & CEO · Swiss Interior Architect · Edifice Lausanne

{t.studioP1}

{t.studioP2}

{t.studioP3}

Practice model
Design & Build — design and fit-out delivered under a single accountable partner.
Heritage
Part of the Edifice group of Lausanne. Swiss precision, Dubai practice.
Disciplines
Interior architecture, FF&E, joinery procurement, MEP coordination.
Region
United Arab Emirates & the Kingdom of Saudi Arabia. International on referral.
{teamData.map((m, i) => (
{m.name}
{m.role}
))}
); } function Awards({ t }) { return (
05 — {t.awardsTitle}

{t.awardsTitle}.

Attributed entries only. Refresh with the client's current list — we publish no aggregate count without an attributable list.
Year
Issuer · Project
Detail
Status
{awardsData.map((a, i) => (
{a.year}
{a.issuer}
{a.project}
{a.kind === "winner" && "Category winner"} {a.kind === "shortlist" && "Workplace category shortlist"} {a.kind === "feature" && "Industry recognition feature"}
{a.result}
))}
{t.clientsTitle}
{clientsData.map((c, i) => (
{c}
))}
); } function Contact({ t }) { const [data, setData] = useState({ name: "", company: "", email: "", phone: "", sector: "", projectType: "", location: "", message: "", }); const [sent, setSent] = useState(false); const set = (k, v) => setData((d) => ({ ...d, [k]: v })); const sectorOpts = ["Commercial / Workplace", "Hospitality", "Food & Beverage", "Public / Education", "Residential", "Other"]; const typeOpts = ["Design & Build", "Fit-out only", "Design only", "FF&E", "Consultation"]; const onSubmit = (e) => { e.preventDefault(); setSent(true); // In real build this would route to Formspree → sales@sb-id.com }; return (
06 — {t.contactTitle}

{t.contactTitle}.

{t.contactLead}
Studio
Office 105, Building 6
Bay Square, Marasi Drive, Business Bay
P.O. Box 111581 — Dubai, UAE
Email
sales@sb-id.com — new projects
careers@sb-id.com — careers
Hours
Sunday – Thursday — to confirm
Group
Edifice — Lausanne, Switzerland
{!sent ? (
set("name", e.target.value)} placeholder="Full name" required />
set("company", e.target.value)} placeholder="Optional" />
set("email", e.target.value)} placeholder="you@company.com" required />
set("phone", e.target.value)} placeholder="+971 …" />
{sectorOpts.map((s) => ( ))}
{typeOpts.map((s) => ( ))}
set("location", e.target.value)} placeholder="City · country" />