/* LW Design Group — page views */

const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM } = React;

/* ============================================================
   HOME
   ============================================================ */
function HomePage({ go, lang }) {
  const t = useT(lang);
  const featured = PROJECTS.filter(p => p.featured);
  const heroProject = featured[0];
  return (
    <main className="lw-page lw-home">
      {/* HERO */}
      <section className="lw-hero">
        <div className="lw-hero__media">
          <Img src={heroProject.hero} alt={heroProject.name} showRef={false} />
          <div className="lw-hero__credit">
            <MonoLabel>{heroProject.name} · {heroProject.location}</MonoLabel>
          </div>
        </div>
        <div className="lw-hero__copy">
          <MonoLabel className="lw-hero__kicker">EST. 1999 · Dubai · Hong Kong · São Paulo · Aarhus</MonoLabel>
          <h1 className="lw-h1 lw-hero__h">
            <span className="lw-em">Hospitality-led</span> architecture and interior design,<br/>
            built for owners who want a complete world.
          </h1>
          <div className="lw-hero__lede">{t.home_lede}</div>
          <div className="lw-hero__ctas">
            <button className="lw-btn lw-btn--ink" onClick={() => go("projects")}>
              {t.cta_view_all} <span aria-hidden>↗</span>
            </button>
            <button className="lw-btn lw-btn--ghost" onClick={() => go("contact")}>
              {t.cta_start} <span aria-hidden>↗</span>
            </button>
          </div>
        </div>
        <div className="lw-hero__stats">
          <Stat n="60+" l="Hotels" />
          <Stat n="200+" l="Restaurants & Bars" />
          <Stat n="140+" l="Studio staff" />
          <Stat n="26" l="Years" />
        </div>
      </section>

      {/* PROPOSITION */}
      <section className="lw-section">
        <div className="lw-section__head">
          <MonoLabel>{t.home_proposition_kicker} / 01</MonoLabel>
          <h2 className="lw-h2">{t.home_proposition}</h2>
        </div>
        <div className="lw-disc-grid">
          {DISCIPLINES.map((d, i) => (
            <DisciplineCard key={d.id} idx={i + 1} d={d} />
          ))}
        </div>
      </section>

      {/* FEATURED WORK */}
      <section className="lw-section lw-section--stone">
        <div className="lw-section__head">
          <MonoLabel>Selected work / 02</MonoLabel>
          <h2 className="lw-h2">{t.section_featured}</h2>
          <a className="lw-section__cta" onClick={() => go("projects")}>{t.cta_view_all} →</a>
        </div>
        <div className="lw-featured">
          {/* Editorial layout: big left, two stacked right */}
          <div className="lw-featured__big">
            <ProjectCard p={featured[0]} size="wide" lang={lang}
                         onClick={() => go("project", { slug: featured[0].slug })} />
          </div>
          <div className="lw-featured__col">
            {featured.slice(1, 3).map(p => (
              <ProjectCard key={p.slug} p={p} size="md" lang={lang}
                           onClick={() => go("project", { slug: p.slug })} />
            ))}
          </div>
        </div>
      </section>

      {/* SECTORS strip */}
      <section className="lw-section">
        <div className="lw-section__head">
          <MonoLabel>Sectors / 03</MonoLabel>
          <h2 className="lw-h2">{t.section_sectors}</h2>
        </div>
        <ul className="lw-sectors-strip">
          {SECTORS.map(s => (
            <li key={s.id} onClick={() => go("projects", { sector: s.id })}>
              <span className="lw-sectors-strip__count">{s.count.toString().padStart(3, "0")}</span>
              <span className="lw-sectors-strip__name">{s.label}</span>
              <span className="lw-sectors-strip__arr">→</span>
            </li>
          ))}
        </ul>
      </section>

      {/* STUDIO image + quote */}
      <section className="lw-section lw-section--ink">
        <div className="lw-pull">
          <div className="lw-pull__media">
            <Img src="media/ref-studio-25th-01.webp" alt="LW studio" />
          </div>
          <div className="lw-pull__copy">
            <MonoLabel className="lw-light">The studio / 04</MonoLabel>
            <p className="lw-pull__q">
              "Twenty-six years of building hospitality environments has taught us one thing — guests don't remember
              a colour, they remember the feeling of being held in a space."
            </p>
            <p className="lw-pull__att">— Jesper Godsk, Founder & CEO <span className="lw-dim">(verbatim quote to confirm)</span></p>
            <button className="lw-btn lw-btn--ghost-light" onClick={() => go("studio")}>
              About the studio <span aria-hidden>↗</span>
            </button>
          </div>
        </div>
      </section>

      {/* PRESS strip */}
      <section className="lw-section">
        <div className="lw-press">
          <MonoLabel>{t.section_press}</MonoLabel>
          <ul>
            {PRESS.map(p => <li key={p}>{p}</li>)}
          </ul>
        </div>
      </section>

      <StartBand go={go} lang={lang} />
    </main>
  );
}

function Stat({ n, l }) {
  return (
    <div className="lw-stat">
      <span className="lw-stat__n">{n}</span>
      <span className="lw-stat__l">{l}</span>
    </div>
  );
}

function DisciplineCard({ idx, d }) {
  const blurbs = {
    interior: "From back-of-house through to the last sconce — the studio's spine.",
    architecture: "Established 2003 as LW Architecture. Buildings designed alongside their interiors.",
    ffe: "Furniture, fittings and finishes sourced, specified and curated in-house.",
    branding: "Spatial branding — the way a venue introduces itself, in light, type and material.",
  };
  return (
    <div className="lw-disc">
      <span className="lw-disc__idx">·{idx.toString().padStart(2, "0")}</span>
      <h3 className="lw-disc__t">{d.label}</h3>
      <p className="lw-disc__b">{blurbs[d.id]}</p>
    </div>
  );
}

/* ============================================================
   PROJECTS index (filterable)
   ============================================================ */
function ProjectsPage({ go, lang, initialFilter }) {
  const t = useT(lang);
  const [sector, setSector] = useS(initialFilter?.sector || "all");
  const [disc, setDisc] = useS(initialFilter?.discipline || "all");
  const [sort, setSort] = useS("recent");

  const items = useM(() => {
    let list = PROJECTS.filter(p =>
      (sector === "all" || p.sector === sector) &&
      (disc === "all" || p.disciplines.includes(disc))
    );
    list = list.sort((a, b) => sort === "recent" ? b.year - a.year : a.year - b.year);
    return list;
  }, [sector, disc, sort]);

  return (
    <main className="lw-page">
      <section className="lw-section lw-section--first">
        <div className="lw-pgrid">
          <div className="lw-pgrid__head">
            <MonoLabel>The portfolio</MonoLabel>
            <h1 className="lw-h1">
              <span className="lw-em">Projects.</span><br />
              Sector, discipline, year.
            </h1>
            <p className="lw-pgrid__lede">
              Three hundred plus completed environments since 1999. Below — the work that defines the studio.
              Filter by what you're building.
            </p>
          </div>

          <div className="lw-filters">
            <div className="lw-filters__row">
              <MonoLabel>{t.filter_by_sector}</MonoLabel>
              <Chip active={sector === "all"} onClick={() => setSector("all")}>{t.filter_all}</Chip>
              {SECTORS.map(s => (
                <Chip key={s.id} active={sector === s.id} onClick={() => setSector(s.id)}>{s.label}</Chip>
              ))}
            </div>
            <div className="lw-filters__row">
              <MonoLabel>{t.filter_by_discipline}</MonoLabel>
              <Chip active={disc === "all"} onClick={() => setDisc("all")}>All</Chip>
              {DISCIPLINES.map(d => (
                <Chip key={d.id} active={disc === d.id} onClick={() => setDisc(d.id)}>{d.label}</Chip>
              ))}
            </div>
            <div className="lw-filters__row lw-filters__row--right">
              <MonoLabel>{items.length} shown</MonoLabel>
              <select className="lw-select" value={sort} onChange={e => setSort(e.target.value)}>
                <option value="recent">{t.sort_recent}</option>
                <option value="oldest">{t.sort_oldest}</option>
              </select>
            </div>
          </div>

          <div className="lw-grid">
            {items.map((p, i) => (
              <ProjectCard key={p.slug} p={p}
                           size={i % 5 === 0 ? "wide" : i % 3 === 0 ? "tall" : "md"}
                           lang={lang}
                           onClick={() => go("project", { slug: p.slug })} />
            ))}
            {items.length === 0 && (
              <div className="lw-empty">No projects match — clear a filter.</div>
            )}
          </div>
        </div>
      </section>
      <StartBand go={go} lang={lang} />
    </main>
  );
}

function Chip({ active, onClick, children }) {
  return (
    <button className={cx("lw-chip", active && "is-active")} onClick={onClick}>{children}</button>
  );
}

/* ============================================================
   PROJECT detail (case study)
   ============================================================ */
function ProjectPage({ slug, go, lang }) {
  const t = useT(lang);
  const p = PROJECTS.find(x => x.slug === slug);
  const idx = PROJECTS.findIndex(x => x.slug === slug);
  const next = PROJECTS[(idx + 1) % PROJECTS.length];
  const sector = SECTORS.find(s => s.id === p.sector);
  const [lightbox, setLightbox] = useS(null);

  useE(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [slug]);

  return (
    <main className="lw-page lw-case">
      {/* Hero */}
      <section className="lw-case__hero">
        <Img src={p.hero} alt={p.name} />
      </section>

      {/* Title block */}
      <section className="lw-case__title">
        <div className="lw-case__title-inner">
          <MonoLabel>{sector.label} · {p.year}</MonoLabel>
          <h1 className="lw-h1">{p.name}</h1>
          <p className="lw-case__sub">{p.subtitle}</p>
        </div>
        <Rule wide />
        <dl className="lw-case__meta">
          <MetaRow label={t.project_meta_location} value={p.location} />
          <MetaRow label={t.project_meta_sector} value={sector.label} />
          <MetaRow label={t.project_meta_year} value={p.year} />
          <MetaRow label={t.project_meta_disciplines}
                   value={p.disciplines.map(d => DISCIPLINES.find(x => x.id === d)?.label).join(" · ")} />
          <MetaRow label={t.project_meta_scope} value={p.scope} />
          <MetaRow label={t.project_meta_operator} value={p.operator} muted />
          <MetaRow label={t.project_meta_credit} value={p.photographer} muted />
        </dl>
      </section>

      {/* Narrative — 2-col editorial */}
      <section className="lw-case__body">
        <CaseSection num="01" label={t.case_brief} body={p.brief} />
        <div className="lw-case__split">
          <div className="lw-case__split-media">
            <Img src={p.gallery[0]} alt={p.name + " gallery"} />
          </div>
          <CaseSection num="02" label={t.case_concept} body={p.concept} compact />
        </div>
        <CaseSection num="03" label={t.case_materials} body={p.materials} />
        {p.gallery.length > 1 && (
          <div className="lw-case__pair">
            {p.gallery.slice(1, 3).map((g, i) => (
              <Img key={i} src={g} alt={p.name + " " + (i + 2)} ratio="4/3"
                   className="lw-clickable" style={{ cursor: "zoom-in" }} />
            ))}
          </div>
        )}
        <CaseSection num="04" label={t.case_outcome} body={p.outcome} />
      </section>

      {/* Gallery */}
      {p.gallery.length > 0 && (
        <section className="lw-section">
          <div className="lw-section__head">
            <MonoLabel>{t.case_gallery}</MonoLabel>
            <h2 className="lw-h2">All frames</h2>
          </div>
          <div className="lw-case__gallery">
            {p.gallery.map((g, i) => (
              <div key={i} className="lw-case__gallery-item" onClick={() => setLightbox(g)}>
                <Img src={g} alt={`${p.name} — frame ${i + 1}`} ratio="4/3" />
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Next */}
      <section className="lw-section lw-section--ink">
        <a className="lw-next" onClick={() => go("project", { slug: next.slug })}>
          <div className="lw-next__txt">
            <MonoLabel className="lw-light">{t.cta_next}</MonoLabel>
            <h2 className="lw-h2">{next.name}</h2>
            <p>{next.location} · {next.year}</p>
          </div>
          <div className="lw-next__img">
            <Img src={next.cover} alt={next.name} ratio="4/3" />
          </div>
        </a>
      </section>

      <StartBand go={go} lang={lang} />

      {lightbox && (
        <div className="lw-lightbox" onClick={() => setLightbox(null)}>
          <img src={lightbox} alt="" />
          <button className="lw-lightbox__x" aria-label="close">×</button>
        </div>
      )}
    </main>
  );
}

function CaseSection({ num, label, body, compact }) {
  return (
    <div className={cx("lw-cs", compact && "lw-cs--compact")}>
      <div className="lw-cs__head">
        <span className="lw-cs__num">{num}</span>
        <MonoLabel>{label}</MonoLabel>
      </div>
      <p className="lw-cs__body">{body}</p>
    </div>
  );
}

function MetaRow({ label, value, muted }) {
  return (
    <div className={cx("lw-meta", muted && "lw-meta--mute")}>
      <dt><MonoLabel>{label}</MonoLabel></dt>
      <dd>{value}</dd>
    </div>
  );
}

/* ============================================================
   SECTORS overview
   ============================================================ */
function SectorsPage({ go, lang }) {
  const t = useT(lang);
  const heroes = {
    hospitality: "media/ref-project-bab-al-shams.webp",
    fb: "media/ref-project-chic-nonna.webp",
    residential: "media/ref-discipline-interior-design.webp",
    "mixed-use": "media/ref-project-city-walk.webp",
    workplace: "media/ref-studio-25th-02.webp",
    wellness: "media/ref-discipline-architecture.webp",
  };
  return (
    <main className="lw-page">
      <section className="lw-section lw-section--first">
        <div className="lw-section__head">
          <MonoLabel>The portfolio · by sector</MonoLabel>
          <h1 className="lw-h1"><span className="lw-em">Sectors.</span><br/>Where the work happens.</h1>
        </div>
        <div className="lw-sec-list">
          {SECTORS.map((s, i) => (
            <article key={s.id} className="lw-sec-item">
              <div className="lw-sec-item__num">/ {(i + 1).toString().padStart(2, "0")}</div>
              <div className="lw-sec-item__img">
                <Img src={heroes[s.id]} alt={s.label} ratio="4/3" />
              </div>
              <div className="lw-sec-item__copy">
                <MonoLabel>{s.count} projects</MonoLabel>
                <h2 className="lw-h2">{s.label}</h2>
                <p>{SECTOR_INTROS[s.id]}</p>
                <button className="lw-link" onClick={() => go("projects", { sector: s.id })}>
                  View {s.label.toLowerCase()} work →
                </button>
              </div>
            </article>
          ))}
        </div>
      </section>
      <StartBand go={go} lang={lang} />
    </main>
  );
}

/* ============================================================
   STUDIO
   ============================================================ */
function StudioPage({ go, lang }) {
  return (
    <main className="lw-page">
      <section className="lw-section lw-section--first">
        <div className="lw-section__head">
          <MonoLabel>The studio · since 1999</MonoLabel>
          <h1 className="lw-h1"><span className="lw-em">Four offices,</span><br/>one studio.</h1>
        </div>
        <div className="lw-studio-lede">
          <p>
            LW began in Dubai in 1999. Twenty-six years on, the studio remains independent — owner-led, hospitality-rooted,
            and still small enough that every project is touched by a partner.
          </p>
          <p className="lw-dim">
            <em>(Founding line-up — Waldenström/Hansen vs Doyle/Theilgaard — to be confirmed with the client before publishing.)</em>
          </p>
        </div>
        <div className="lw-studio-big">
          <Img src="media/ref-studio-the-company.webp" alt="LW studio interior" />
        </div>

        <div className="lw-studio-pair">
          <Img src="media/ref-studio-25th-02.webp" alt="LW partners" />
          <Img src="media/ref-studio-25th-03.webp" alt="LW 25th" />
        </div>

        <div className="lw-section__head">
          <MonoLabel>Leadership</MonoLabel>
          <h2 className="lw-h2">The people behind the brief.</h2>
          <p className="lw-section__sub lw-dim">Roster shown is the most recently-published — client to confirm current titles.</p>
        </div>
        <div className="lw-people">
          {LEADERSHIP.map(person => (
            <article key={person.name} className="lw-person">
              <div className="lw-person__img">
                {person.portrait
                  ? <Img src={person.portrait} alt={person.name} ratio="3/4" />
                  : <div className="lw-person__placeholder">
                      <span>{person.name.split(" ").map(n => n[0]).join("")}</span>
                      <MonoLabel>portrait pending</MonoLabel>
                    </div>}
              </div>
              <h3>{person.name}</h3>
              <MonoLabel>{person.role}</MonoLabel>
            </article>
          ))}
        </div>

        <div className="lw-section__head">
          <MonoLabel>Disciplines</MonoLabel>
          <h2 className="lw-h2">What we do under one roof.</h2>
        </div>
        <div className="lw-disc-grid">
          {DISCIPLINES.map((d, i) => <DisciplineCard key={d.id} idx={i + 1} d={d} />)}
        </div>
      </section>
      <StartBand go={go} lang={lang} />
    </main>
  );
}

/* ============================================================
   OFFICES
   ============================================================ */
function OfficesPage({ go, lang }) {
  return (
    <main className="lw-page">
      <section className="lw-section lw-section--first">
        <div className="lw-section__head">
          <MonoLabel>Where to find us</MonoLabel>
          <h1 className="lw-h1"><span className="lw-em">Offices.</span><br/>Dubai · Hong Kong · São Paulo · Aarhus.</h1>
        </div>

        <div className="lw-offices">
          {OFFICES.map((o, i) => (
            <article key={o.city} className={cx("lw-office", i === 0 && "lw-office--hq")}>
              <div className="lw-office__lt">
                <MonoLabel>/ {(i + 1).toString().padStart(2, "0")} · {o.role}</MonoLabel>
                <h2 className="lw-h2 lw-office__city">{o.city}</h2>
                <div className="lw-office__addr">
                  {o.address.map((line, j) => <span key={j}>{line}</span>)}
                </div>
                <div className="lw-office__cnt">
                  <a href={`tel:${o.phone.replace(/[^\d+]/g, "")}`}>{o.phone}</a>
                  <a>{o.email}</a>
                </div>
                {o.note && <p className="lw-office__note lw-dim">{o.note}</p>}
              </div>
              <div className="lw-office__rt">
                <MapPlaceholder city={o.city} />
              </div>
            </article>
          ))}
        </div>
      </section>
      <StartBand go={go} lang={lang} />
    </main>
  );
}

function MapPlaceholder({ city }) {
  /* striped placeholder — client to supply real map embed + coords */
  return (
    <div className="lw-mapph" role="img" aria-label={`Map of ${city} — coordinates to be confirmed`}>
      <svg viewBox="0 0 320 220" preserveAspectRatio="none">
        <defs>
          <pattern id={`stripes-${city}`} width="8" height="8" patternUnits="userSpaceOnUse">
            <path d="M0,8 L8,0" stroke="currentColor" strokeOpacity="0.18" strokeWidth="0.8" />
          </pattern>
        </defs>
        <rect width="320" height="220" fill={`url(#stripes-${city})`} />
        <circle cx="160" cy="110" r="6" fill="currentColor" />
        <circle cx="160" cy="110" r="14" fill="none" stroke="currentColor" strokeOpacity="0.4" />
      </svg>
      <span className="lw-mapph__lbl"><MonoLabel>{city} — map placeholder</MonoLabel></span>
    </div>
  );
}

/* ============================================================
   AWARDS
   ============================================================ */
function AwardsPage({ go, lang }) {
  const t = useT(lang);
  return (
    <main className="lw-page">
      <section className="lw-section lw-section--first">
        <div className="lw-section__head">
          <MonoLabel>Recognition</MonoLabel>
          <h1 className="lw-h1"><span className="lw-em">Awards</span> &amp; mentions.</h1>
          <p className="lw-section__sub lw-dim">{t.awards_intro}</p>
        </div>
        <table className="lw-awards">
          <thead>
            <tr>
              <th><MonoLabel>Year</MonoLabel></th>
              <th><MonoLabel>Award</MonoLabel></th>
              <th><MonoLabel>Issuer</MonoLabel></th>
              <th><MonoLabel>Status</MonoLabel></th>
            </tr>
          </thead>
          <tbody>
            {AWARDS.map((a, i) => (
              <tr key={i}>
                <td className="lw-awards__yr">{a.year}</td>
                <td>{a.name}</td>
                <td>{a.issuer}</td>
                <td><span className="lw-pill">{a.status}</span></td>
              </tr>
            ))}
          </tbody>
        </table>

        <div className="lw-press lw-press--big">
          <MonoLabel>As featured in</MonoLabel>
          <ul>
            {PRESS.map(p => <li key={p}>{p}</li>)}
          </ul>
        </div>
      </section>
      <StartBand go={go} lang={lang} />
    </main>
  );
}

/* ============================================================
   CONTACT (Start a project)
   ============================================================ */
function ContactPage({ go, lang }) {
  const t = useT(lang);
  const [form, setForm] = useS({
    sector: "hospitality", scope: "", location: "", timeline: "", budget: "",
    name: "", company: "", email: "", phone: "", brief: "",
  });
  const [sent, setSent] = useS(false);
  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }
  function submit(e) {
    e.preventDefault();
    setSent(true);
    setTimeout(() => window.scrollTo({ top: 0, behavior: "smooth" }), 50);
  }

  return (
    <main className="lw-page">
      <section className="lw-section lw-section--first">
        <div className="lw-section__head">
          <MonoLabel>{t.enquiry_title}</MonoLabel>
          <h1 className="lw-h1"><span className="lw-em">Start</span> a project.</h1>
          <p className="lw-section__sub">{t.enquiry_sub}</p>
        </div>

        <div className="lw-contact">
          <div className="lw-contact__form">
            {sent ? (
              <div className="lw-contact__sent">
                <MonoLabel>Enquiry received</MonoLabel>
                <h2 className="lw-h2">{t.enquiry_sent}</h2>
                <p>An LW project director will be in touch within two working days.</p>
                <button className="lw-btn lw-btn--ghost" onClick={() => { setSent(false); }}>
                  Send another
                </button>
              </div>
            ) : (
              <form onSubmit={submit} className="lw-form">
                <Fieldset legend={t.enquiry_sector}>
                  <div className="lw-radios">
                    {SECTORS.map(s => (
                      <label key={s.id} className={cx("lw-radio", form.sector === s.id && "is-active")}>
                        <input type="radio" name="sector" value={s.id}
                               checked={form.sector === s.id}
                               onChange={() => set("sector", s.id)} />
                        <span>{s.label}</span>
                      </label>
                    ))}
                  </div>
                </Fieldset>

                <Field label={t.enquiry_scope} placeholder="e.g. Hotel · 240 keys · public realm + suites"
                       value={form.scope} onChange={v => set("scope", v)} />
                <div className="lw-form__row">
                  <Field label={t.enquiry_location} placeholder="City, country"
                         value={form.location} onChange={v => set("location", v)} />
                  <Field label={t.enquiry_timeline} placeholder="e.g. Q4 2027"
                         value={form.timeline} onChange={v => set("timeline", v)} />
                </div>

                <Fieldset legend={t.enquiry_budget}>
                  <div className="lw-radios lw-radios--wrap">
                    {["< $1M", "$1–5M", "$5–15M", "$15–50M", "$50M+", "Confidential"].map(b => (
                      <label key={b} className={cx("lw-radio", form.budget === b && "is-active")}>
                        <input type="radio" name="budget" value={b}
                               checked={form.budget === b}
                               onChange={() => set("budget", b)} />
                        <span>{b}</span>
                      </label>
                    ))}
                  </div>
                </Fieldset>

                <Rule />

                <div className="lw-form__row">
                  <Field label={t.enquiry_name} required
                         value={form.name} onChange={v => set("name", v)} />
                  <Field label={t.enquiry_company}
                         value={form.company} onChange={v => set("company", v)} />
                </div>
                <div className="lw-form__row">
                  <Field label={t.enquiry_email} type="email" required
                         value={form.email} onChange={v => set("email", v)} />
                  <Field label={t.enquiry_phone} type="tel"
                         value={form.phone} onChange={v => set("phone", v)} />
                </div>

                <Field label={t.enquiry_brief} textarea
                       placeholder="A few sentences on what you're building, who it's for, and what success looks like."
                       value={form.brief} onChange={v => set("brief", v)} />

                <div className="lw-form__submit">
                  <p className="lw-dim">Enquiries routed to the studio + CRM. We respond within two working days.</p>
                  <button type="submit" className="lw-btn lw-btn--ink">
                    {t.enquiry_submit} <span aria-hidden>↗</span>
                  </button>
                </div>
              </form>
            )}
          </div>

          <aside className="lw-contact__aside">
            <div className="lw-contact__card">
              <MonoLabel>Dubai · Studio</MonoLabel>
              <p>Design House, Al Sufouh Road<br/>Dubai Media City, UAE</p>
              <a href="tel:+97143697800" className="lw-contact__phone">+971 4 369 7800</a>
              <a>studio@lwdesigngroup.com</a>
              <p className="lw-dim">Floor, hours & canonical inbox pending client confirmation.</p>
            </div>
            <div className="lw-contact__card">
              <MonoLabel>Press</MonoLabel>
              <p>For editorial enquiries, exhibitions and speaker requests.</p>
              <a>press@lwdesigngroup.com — confirm</a>
            </div>
            <div className="lw-contact__card">
              <MonoLabel>Careers</MonoLabel>
              <p>We're always interested in hearing from designers, architects and FF&amp;E specialists.</p>
              <a>careers@lwdesigngroup.com — confirm</a>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

function Fieldset({ legend, children }) {
  return (
    <fieldset className="lw-fs">
      <legend><MonoLabel>{legend}</MonoLabel></legend>
      {children}
    </fieldset>
  );
}
function Field({ label, value, onChange, placeholder, type = "text", textarea, required }) {
  return (
    <label className="lw-field">
      <MonoLabel>{label}{required && " *"}</MonoLabel>
      {textarea
        ? <textarea rows="5" value={value} placeholder={placeholder} required={required}
                    onChange={e => onChange(e.target.value)} />
        : <input type={type} value={value} placeholder={placeholder} required={required}
                 onChange={e => onChange(e.target.value)} />}
    </label>
  );
}

Object.assign(window, {
  HomePage, ProjectsPage, ProjectPage, SectorsPage, StudioPage, OfficesPage, AwardsPage, ContactPage,
});