// Interior Lab — page components.

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

// =========================================================================
// HOME
// =========================================================================
function HomePage({ go }) {
  const featured = window.PROJECTS.filter((p) => p.featured).slice(0, 6);
  return (
    <main className="il-page il-page--home">

      {/* HERO — full-bleed photograph with a very quiet overlay */}
      <section className="il-hero">
        <div className="il-hero__image">
          <img src="media/hero-home.webp" alt="A bouclé sofa in soft afternoon light, sheer curtains drawn." />
        </div>
        <div className="il-hero__overlay">
          <div className="il-hero__top">
            <Eyebrow n="MMX">Studio · Dubai Design District</Eyebrow>
          </div>
          <div className="il-hero__center">
            <h1 className="il-hero__h1">
              <span className="il-hero__l1">Italian design,</span>
              <span className="il-hero__l2"><em>made slowly.</em></span>
            </h1>
            <p className="il-hero__sub">
              A boutique interior design and architecture studio in Dubai
              Design District. Bespoke residential and commercial spaces,
              crafted project by project since 2010.
            </p>
            <div className="il-hero__ctas">
              <button className="il-btn il-btn--solid" onClick={() => go({ name: 'contact' })}>
                <span>Start a project</span><Arrow />
              </button>
              <button className="il-btn il-btn--quiet" onClick={() => go({ name: 'portfolio' })}>
                <span>View the portfolio</span><Arrow />
              </button>
            </div>
          </div>
          <div className="il-hero__bottom">
            <div className="il-hero__scroll">
              <span className="il-hero__scroll-line" />
              <span>Scroll</span>
            </div>
            <div className="il-hero__credit">
              <span className="il-eyebrow__n">PJ.07</span>
              <span>Marina Promenade · Dubai</span>
            </div>
          </div>
        </div>
      </section>

      {/* PROOF MARQUEE */}
      <ProofMarquee />

      {/* OPENING STATEMENT — large editorial paragraph */}
      <section className="il-section il-statement">
        <div className="il-grid">
          <div className="il-statement__eyebrow">
            <Eyebrow n="01">Studio</Eyebrow>
          </div>
          <div className="il-statement__body">
            <p className="il-statement__lede">
              We are an Italian studio working from a small office in
              Dubai Design District. <em>Interior Lab</em> was founded
              in Milan in 2010 by <strong>Lara Del Chiaro</strong>, an
              architect trained in Venice, and moved to the Gulf the
              same year. Since then we have completed more than
              eighty projects across the UAE, Sicily and West Africa —
              villas, penthouses, restaurants, offices, gardens.
            </p>
            <p className="il-statement__lede">
              The work is held to a single discipline we call <em>slow
              work</em>: design and architecture only, no fit-out, no
              compromise on craft. Each project is drawn in detail,
              specified to the last screw, and supervised on site by
              the team that designed it.
            </p>
            <button className="il-textlink" onClick={() => go({ name: 'studio' })}>
              Read the studio story <Arrow />
            </button>
          </div>
        </div>
      </section>

      {/* FEATURED PROJECTS — asymmetric editorial mosaic */}
      <section className="il-section il-featured">
        <div className="il-section__head">
          <Eyebrow n="02">Selected work · 2021 — 2024</Eyebrow>
          <h2 className="il-section__h2">
            <em>Eighty-plus</em> commissions, photographed in their finished&nbsp;light.
          </h2>
        </div>

        <div className="il-mosaic">
          <div className="il-mosaic__a"><Plate project={featured[0]} onClick={() => go({ name: 'project', slug: featured[0].slug })} aspect="3 / 4" large /></div>
          <div className="il-mosaic__b"><Plate project={featured[1]} onClick={() => go({ name: 'project', slug: featured[1].slug })} aspect="4 / 5" /></div>
          <div className="il-mosaic__c"><Plate project={featured[2]} onClick={() => go({ name: 'project', slug: featured[2].slug })} aspect="3 / 2" /></div>
          <div className="il-mosaic__d"><Plate project={featured[3]} onClick={() => go({ name: 'project', slug: featured[3].slug })} aspect="4 / 5" /></div>
          <div className="il-mosaic__e"><Plate project={featured[4]} onClick={() => go({ name: 'project', slug: featured[4].slug })} aspect="3 / 4" /></div>
          {featured[5] && (
            <div className="il-mosaic__f"><Plate project={featured[5]} onClick={() => go({ name: 'project', slug: featured[5].slug })} aspect="3 / 4" /></div>
          )}
        </div>

        <div className="il-section__foot">
          <button className="il-textlink" onClick={() => go({ name: 'portfolio' })}>
            All projects <Arrow />
          </button>
        </div>
      </section>

      {/* DISCIPLINES TEASER */}
      <section className="il-section il-disciplines-teaser">
        <div className="il-section__head">
          <Eyebrow n="03">Disciplines</Eyebrow>
          <h2 className="il-section__h2">
            Seven disciplines, one practice.
          </h2>
        </div>
        <div className="il-disc-grid">
          {window.DISCIPLINES.map((d) => (
            <button key={d.id} className="il-disc-row" onClick={() => go({ name: 'services' })}>
              <span className="il-disc-row__n">{d.n}</span>
              <span className="il-disc-row__name">{d.name}</span>
              <span className="il-disc-row__blurb">{d.blurb}</span>
              <span className="il-disc-row__arr"><Arrow /></span>
            </button>
          ))}
        </div>
      </section>

      {/* PHILOSOPHY band — large quote, dark background */}
      <section className="il-section il-philo">
        <Eyebrow n="04" light>Philosophy</Eyebrow>
        <blockquote className="il-philo__q">
          <span>“We work the way Italian studios used to: slowly, with</span>
          <span>our hands on every detail. The brief takes a year, not a</span>
          <span><em>weekend.</em> It is the only way to design a space that</span>
          <span>will still feel right in twenty years.”</span>
        </blockquote>
        <div className="il-philo__attr">
          <span>— Lara Del Chiaro</span>
          <span>Founder &amp; Creative Director</span>
        </div>
      </section>

      {/* TWO-PATH CTA */}
      <section className="il-section il-twopath">
        <div className="il-twopath__col" onClick={() => go({ name: 'contact', tab: 'project' })} tabIndex={0}
          onKeyDown={(e) => { if (e.key === 'Enter') go({ name: 'contact', tab: 'project' }); }}>
          <Eyebrow n="A">Private clients</Eyebrow>
          <h3>
            Start a <em>project</em>.
          </h3>
          <p>
            A first conversation, at the studio or on site. Tell us what
            the space is and how you would like to live or work inside it.
          </p>
          <span className="il-textlink">Open the enquiry form <Arrow /></span>
        </div>
        <div className="il-twopath__col is-dark" onClick={() => go({ name: 'contact', tab: 'trade' })} tabIndex={0}
          onKeyDown={(e) => { if (e.key === 'Enter') go({ name: 'contact', tab: 'trade' }); }}>
          <Eyebrow n="B" light>Architects · suppliers · developers</Eyebrow>
          <h3>
            Collaborate.<br /><em>Or supply us.</em>
          </h3>
          <p>
            A dedicated channel for architects, developers and material
            suppliers. The studio sources Italian fabrics, stone and joinery.
          </p>
          <span className="il-textlink">Trade enquiry <Arrow /></span>
        </div>
      </section>

    </main>
  );
}

// =========================================================================
// PORTFOLIO — filterable grid
// =========================================================================
function PortfolioPage({ go }) {
  const all = window.PROJECTS;
  const sectors = ['All', 'Residential', 'Commercial'];
  const locations = ['All', ...Array.from(new Set(all.map((p) => p.location)))];
  const [sector, setSector] = useStateP('All');
  const [loc, setLoc] = useStateP('All');
  const [view, setView] = useStateP('grid'); // grid | index

  const filtered = useMemoP(() => all.filter((p) =>
    (sector === 'All' || p.sector === sector) &&
    (loc === 'All' || p.location === loc)
  ), [sector, loc]);

  return (
    <main className="il-page il-page--portfolio">
      <header className="il-pagehead">
        <Eyebrow n="00">Portfolio · 2010 — 2024</Eyebrow>
        <h1 className="il-pagehead__h1">
          <em>The work,</em> photographed and named.
        </h1>
        <p className="il-pagehead__sub">
          A selection from eighty-plus completed commissions. Filter by
          sector or location. Some projects remain confidential pending
          client release.
        </p>
      </header>

      {/* Filter bar */}
      <div className="il-filterbar">
        <div className="il-filter">
          <span className="il-filter__label">Sector</span>
          <div className="il-filter__chips">
            {sectors.map((s) => (
              <button key={s} className={'il-chip' + (sector === s ? ' is-on' : '')} onClick={() => setSector(s)}>{s}</button>
            ))}
          </div>
        </div>
        <div className="il-filter">
          <span className="il-filter__label">Location</span>
          <div className="il-filter__chips il-filter__chips--wrap">
            {locations.map((l) => (
              <button key={l} className={'il-chip' + (loc === l ? ' is-on' : '')} onClick={() => setLoc(l)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="il-filter il-filter--right">
          <span className="il-filter__label">View</span>
          <div className="il-filter__chips">
            <button className={'il-chip' + (view === 'grid' ? ' is-on' : '')} onClick={() => setView('grid')}>Grid</button>
            <button className={'il-chip' + (view === 'index' ? ' is-on' : '')} onClick={() => setView('index')}>Index</button>
          </div>
        </div>
      </div>

      <div className="il-portfolio__count">
        <span><strong>{filtered.length}</strong> {filtered.length === 1 ? 'project' : 'projects'} shown</span>
        <span className="il-portfolio__count-line" />
        <span>of {all.length} total</span>
      </div>

      {view === 'grid' && (
        <div className="il-portfolio__grid">
          {filtered.map((p) => (
            <Plate key={p.slug} project={p} aspect="4 / 5" onClick={() => go({ name: 'project', slug: p.slug })} />
          ))}
          {filtered.length === 0 && (
            <div className="il-empty">No projects match that filter combination — yet.</div>
          )}
        </div>
      )}

      {view === 'index' && (
        <div className="il-portfolio__index">
          <div className="il-portfolio__index-head">
            <span>Project</span><span>Sector</span><span>Location</span><span>Year</span><span>Area</span><span /></div>
          {filtered.map((p, i) => (
            <button key={p.slug} className="il-portfolio__index-row" onClick={() => go({ name: 'project', slug: p.slug })}>
              <span className="il-portfolio__index-name">
                <span className="il-eyebrow__n">{String(i + 1).padStart(2, '0')}</span>
                {p.name}
              </span>
              <span>{p.sector}</span>
              <span>{p.location}</span>
              <span>{p.year}</span>
              <span>{p.area}</span>
              <span className="il-portfolio__index-arr"><Arrow /></span>
            </button>
          ))}
        </div>
      )}
    </main>
  );
}

// =========================================================================
// PROJECT (case study)
// =========================================================================
function ProjectPage({ slug, go }) {
  const all = window.PROJECTS;
  const idx = all.findIndex((p) => p.slug === slug);
  const p = all[idx];
  if (!p) return null;
  const prev = all[(idx - 1 + all.length) % all.length];
  const next = all[(idx + 1) % all.length];

  return (
    <main className="il-page il-page--project">
      <header className="il-prj-hero">
        <div className="il-prj-hero__image">
          <img src={p.cover} alt={p.name} />
        </div>
        <div className="il-prj-hero__caption">
          <Eyebrow n={String(idx + 1).padStart(2, '0')}>{p.sector} · {p.location}</Eyebrow>
          <h1 className="il-prj-hero__h1">{p.name}</h1>
          <p className="il-prj-hero__tagline">{p.tagline}</p>
        </div>
      </header>

      <section className="il-prj-meta">
        <Field label="Sector" value={p.sector} />
        <Field label="Location" value={p.location} />
        <Field label="Year" value={p.year} />
        <Field label="Area" value={p.area} />
        <Field label="Scope" value={p.scope} />
      </section>

      <section className="il-section il-prj-narrative">
        <div className="il-narr">
          <div className="il-narr__col">
            <Eyebrow n="01">Brief</Eyebrow>
            <p>{p.brief}</p>
          </div>
          <div className="il-narr__col">
            <Eyebrow n="02">Design response</Eyebrow>
            <p>{p.response}</p>
          </div>
        </div>
      </section>

      {p.images.length > 1 && (
        <section className="il-prj-gallery">
          {p.images.slice(0, 6).map((src, i) => (
            <figure key={i} className={'il-prj-gallery__f il-prj-gallery__f--' + (i % 5)}>
              <img src={src} alt={p.name + ' — image ' + (i + 1)} loading="lazy" />
              <figcaption>
                <span className="il-eyebrow__n">{String(i + 1).padStart(2, '0')}</span>
                <span>{p.name}</span>
              </figcaption>
            </figure>
          ))}
        </section>
      )}

      <section className="il-section il-prj-materials">
        <Eyebrow n="03">Materials &amp; craft</Eyebrow>
        <ul className="il-mats">
          {p.materials.map((m, i) => (
            <li key={i}>
              <span className="il-mats__n">M.{String(i + 1).padStart(2, '0')}</span>
              <span>{m}</span>
            </li>
          ))}
        </ul>
        {p.stub && (
          <p className="il-prj-stub">Full case study and image set to follow with client approval.</p>
        )}
      </section>

      <section className="il-section il-prj-cta">
        <div className="il-prj-cta__inner">
          <h3>Start a project in this <em>vein.</em></h3>
          <p>A first conversation at the studio or on your site. We work with private clients and developers across Dubai and the GCC.</p>
          <button className="il-btn il-btn--solid" onClick={() => go({ name: 'contact' })}><span>Open the enquiry form</span><Arrow /></button>
        </div>
      </section>

      <nav className="il-prj-nav">
        <button onClick={() => go({ name: 'project', slug: prev.slug })}>
          <span className="il-prj-nav__lbl"><Arrow /> Previous</span>
          <span className="il-prj-nav__name">{prev.name}</span>
        </button>
        <button onClick={() => go({ name: 'project', slug: next.slug })}>
          <span className="il-prj-nav__lbl">Next <Arrow /></span>
          <span className="il-prj-nav__name">{next.name}</span>
        </button>
      </nav>
    </main>
  );
}

function Field({ label, value }) {
  return (
    <div className="il-field">
      <span className="il-field__lbl">{label}</span>
      <span className="il-field__v">{value}</span>
    </div>
  );
}

// =========================================================================
// STUDIO
// =========================================================================
function StudioPage({ go }) {
  return (
    <main className="il-page il-page--studio">
      <header className="il-pagehead">
        <Eyebrow n="00">The studio</Eyebrow>
        <h1 className="il-pagehead__h1">
          <em>Milan, Venice, Florence,</em><br />and a small office in d3.
        </h1>
      </header>

      <section className="il-section il-studio-intro">
        <div className="il-studio-intro__lede">
          <p>
            Interior Lab was founded in <strong>Milan in 2010</strong> by
            Lara Del Chiaro, an architect who had spent the previous decade
            in Venice and Milan. The studio moved to Dubai the same year
            and has worked out of Building 5 in <strong>Dubai Design
            District</strong> ever since.
          </p>
          <p>
            We are intentionally small — a team of architects, interior
            designers and project leads — and we keep the project list short
            so each commission has the studio's full attention from concept
            to completion.
          </p>
        </div>
        <dl className="il-studio-intro__facts">
          {window.STUDIO_FACTS.map((f) => (
            <div key={f.k}>
              <dt>{f.k}</dt>
              <dd>{f.v}</dd>
            </div>
          ))}
        </dl>
      </section>

      <section className="il-section il-team">
        <Eyebrow n="01">People</Eyebrow>
        <h2 className="il-section__h2">Two principals, one practice.</h2>
        <div className="il-team__grid">
          {window.TEAM.map((t, i) => (
            <article key={t.name} className="il-team__card">
              <div className="il-team__portrait" aria-label="Portrait placeholder">
                <span className="il-team__placeholder">
                  <span className="il-eyebrow__n">P.{String(i + 1).padStart(2, '0')}</span>
                  <span>Portrait · supplied by studio</span>
                </span>
              </div>
              <div className="il-team__body">
                <h3>{t.name}</h3>
                <span className="il-team__role">{t.role}</span>
                <p>{t.body}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="il-section il-philosophy">
        <Eyebrow n="02">Philosophy</Eyebrow>
        <div className="il-philosophy__grid">
          <div className="il-philosophy__col">
            <h3>Slow work.</h3>
            <p>
              We refuse the pace of a fast turnover. Briefs run for a year,
              sometimes longer. The reward is a building or a room that
              still feels right a decade later.
            </p>
          </div>
          <div className="il-philosophy__col">
            <h3>Design only.</h3>
            <p>
              We are architects and interior designers — not contractors.
              Our role is to draw, specify and supervise. The trades we
              partner with are independent and chosen for the project.
            </p>
          </div>
          <div className="il-philosophy__col">
            <h3>Bioclimatic instinct.</h3>
            <p>
              Sustainability isn't a tick-box; it's a brief constraint.
              Sharon Naseri's bioclimatic specialism shapes how the
              architecture meets the Gulf climate from the first sketch.
            </p>
          </div>
          <div className="il-philosophy__col">
            <h3>Italian inheritance.</h3>
            <p>
              Italian craft, Italian materials, an Italian way of treating
              a room as a single composition. The studio is in Dubai;
              the way it works is not.
            </p>
          </div>
        </div>
      </section>

      <section className="il-section il-recognition">
        <Eyebrow n="03">Recognition</Eyebrow>
        <div className="il-recognition__row">
          <div>
            <span className="il-recognition__y">2022</span>
            <span className="il-recognition__t">Dubai Design Week</span>
            <span className="il-recognition__s">Exhibitor</span>
          </div>
          <div>
            <span className="il-recognition__y">2010 — present</span>
            <span className="il-recognition__t">80+ projects worldwide</span>
            <span className="il-recognition__s">UAE · GCC · Sicily · West Africa</span>
          </div>
        </div>
      </section>

      <section className="il-section il-prj-cta">
        <div className="il-prj-cta__inner">
          <h3>Talk to the <em>studio.</em></h3>
          <p>An hour at the office in d3, or a site visit. We will tell you whether the project is a good fit and what a realistic programme looks like.</p>
          <button className="il-btn il-btn--solid" onClick={() => go({ name: 'contact' })}><span>Start a project</span><Arrow /></button>
        </div>
      </section>
    </main>
  );
}

// =========================================================================
// SERVICES
// =========================================================================
function ServicesPage({ go }) {
  return (
    <main className="il-page il-page--services">
      <header className="il-pagehead">
        <Eyebrow n="00">Disciplines</Eyebrow>
        <h1 className="il-pagehead__h1">
          Seven disciplines.<br /><em>One practice.</em>
        </h1>
        <p className="il-pagehead__sub">
          We work across interior design, architecture and landscape —
          residential to commercial, an apartment to an eighty-cover restaurant.
          Design and creative direction only; never construction.
        </p>
      </header>

      <section className="il-section il-svc-grid">
        {window.DISCIPLINES.map((d) => (
          <article key={d.id} className="il-svc-card">
            <span className="il-svc-card__n">{d.n}</span>
            <h3>{d.name}</h3>
            <p>{d.blurb}</p>
            <button className="il-textlink" onClick={() => go({ name: 'portfolio' })}>
              Related projects <Arrow />
            </button>
          </article>
        ))}
      </section>

      <section className="il-section il-process">
        <Eyebrow n="08">The design process</Eyebrow>
        <h2 className="il-section__h2">
          Five stages, drawn out — not rushed through.
        </h2>
        <ol className="il-process__list">
          {window.PROCESS.map((s) => (
            <li key={s.n} className="il-process__step">
              <span className="il-process__n">{s.n}</span>
              <div>
                <h3>{s.name}</h3>
                <p>{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>

      <section className="il-section il-svc-no-prices">
        <Eyebrow n="09">A note on fees</Eyebrow>
        <p>
          Every project is bespoke. Fees are structured as a percentage of
          the design budget or as a fixed scope-of-work, agreed at the end
          of the first consultation. We never publish prices because no two
          briefs are alike — but we are always clear with you about ours.
        </p>
        <button className="il-btn il-btn--solid" onClick={() => go({ name: 'contact' })}>
          <span>Request a consultation</span><Arrow />
        </button>
      </section>
    </main>
  );
}

// =========================================================================
// CONTACT / START A PROJECT
// =========================================================================
function ContactPage({ go, initialTab }) {
  const [tab, setTab] = useStateP(initialTab || 'project');
  const [sent, setSent] = useStateP(false);

  function submit(e) {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4500);
  }

  return (
    <main className="il-page il-page--contact">
      <header className="il-pagehead">
        <Eyebrow n="00">Start a project</Eyebrow>
        <h1 className="il-pagehead__h1">
          <em>A first conversation</em>,<br />on site or in d3.
        </h1>
        <p className="il-pagehead__sub">
          Tell us about the space. We read every brief — Lara replies
          personally within two working days.
        </p>
      </header>

      <section className="il-section il-contact-grid">
        <div className="il-contact-form">
          <div className="il-contact-tabs">
            <button className={'il-contact-tab' + (tab === 'project' ? ' is-on' : '')} onClick={() => setTab('project')}>
              <span className="il-eyebrow__n">A</span>
              <span>Private client · project enquiry</span>
            </button>
            <button className={'il-contact-tab' + (tab === 'trade' ? ' is-on' : '')} onClick={() => setTab('trade')}>
              <span className="il-eyebrow__n">B</span>
              <span>Trade · suppliers &amp; collaborators</span>
            </button>
          </div>

          {tab === 'project' && (
            <form className="il-form" onSubmit={submit}>
              <div className="il-form__row">
                <FormInput label="Your name" placeholder="Full name" />
                <FormInput label="Email" type="email" placeholder="you@…" />
              </div>
              <div className="il-form__row">
                <FormInput label="Phone" type="tel" placeholder="+971 …" />
                <FormSelect label="Project type" options={['Residential — villa', 'Residential — apartment / penthouse', 'Commercial — workspace', 'Hospitality / F&B', 'Retail', 'Wellness', 'Landscape', 'Architecture & interiors']} />
              </div>
              <FormInput label="Project location" placeholder="Emirate, city or address" />
              <FormTextarea label="Brief" placeholder="A few sentences on the space, the people who use it, the timeline and budget if you have one in mind." />
              <div className="il-form__file">
                <span className="il-field__lbl">Attach</span>
                <label className="il-form__filebtn">
                  <input type="file" hidden />
                  <span>Brief, plans or inspiration (optional)</span>
                  <Arrow />
                </label>
              </div>
              <button type="submit" className="il-btn il-btn--solid il-form__submit">
                <span>{sent ? 'Received — thank you' : 'Send enquiry'}</span><Arrow />
              </button>
              <p className="il-form__small">
                Or write directly: <a href="mailto:lara@interiorlab.ae">lara@interiorlab.ae</a> · WhatsApp <a href="https://wa.me/971563326825">+971 56 332 6825</a>.
              </p>
            </form>
          )}

          {tab === 'trade' && (
            <form className="il-form" onSubmit={submit}>
              <div className="il-form__row">
                <FormInput label="Company" placeholder="Company / studio name" />
                <FormInput label="Contact" placeholder="Your name" />
              </div>
              <div className="il-form__row">
                <FormInput label="Email" type="email" placeholder="you@…" />
                <FormSelect label="Category" options={['Architect / studio collaboration', 'Developer', 'Stone / marble', 'Joinery', 'Lighting', 'Fabrics & upholstery', 'Sanitaryware', 'Other']} />
              </div>
              <FormTextarea label="Message" placeholder="Tell us about what you make, your lead times, where you ship from." />
              <button type="submit" className="il-btn il-btn--solid il-form__submit">
                <span>{sent ? 'Received — thank you' : 'Send trade enquiry'}</span><Arrow />
              </button>
              <p className="il-form__small">
                Suppliers and trade also: <a href="mailto:suppliers@interiorlab.ae">suppliers@interiorlab.ae</a>.
              </p>
            </form>
          )}
        </div>

        <aside className="il-contact-info">
          <div className="il-contact-block">
            <Eyebrow n="01">Visit</Eyebrow>
            <p className="il-contact-block__big">
              Building 5 — A206<br />
              Dubai Design District (d3)<br />
              Dubai, UAE
            </p>
            <p className="il-contact-block__small">By appointment · Mon–Fri</p>
          </div>
          <div className="il-contact-block">
            <Eyebrow n="02">Speak</Eyebrow>
            <ul className="il-contact-list">
              <li><span>Studio</span><a href="tel:+97144511981">+971 4 451 1981</a></li>
              <li><span>Mobile · WhatsApp</span><a href="https://wa.me/971563326825">+971 56 332 6825</a></li>
              <li><span>General</span><a href="mailto:info@interiorlab.ae">info@interiorlab.ae</a></li>
              <li><span>Founder</span><a href="mailto:lara@interiorlab.ae">lara@interiorlab.ae</a></li>
              <li><span>Marketing</span><a href="mailto:marketing@interiorlab.ae">marketing@interiorlab.ae</a></li>
              <li><span>Suppliers / trade</span><a href="mailto:suppliers@interiorlab.ae">suppliers@interiorlab.ae</a></li>
            </ul>
          </div>
          <div className="il-contact-block">
            <Eyebrow n="03">Follow</Eyebrow>
            <ul className="il-contact-list">
              <li><span>Instagram</span><a href="https://instagram.com/interior_lab_dubai" target="_blank" rel="noreferrer">@interior_lab_dubai</a></li>
              <li><span>LinkedIn</span><a href="https://www.linkedin.com/company/interiorlabdubai" target="_blank" rel="noreferrer">/company/interiorlabdubai</a></li>
            </ul>
          </div>
          <div className="il-contact-block">
            <Eyebrow n="04">On the map</Eyebrow>
            <div className="il-map">
              <div className="il-map__grid" />
              <div className="il-map__pin">
                <span />
                <span>Building&nbsp;5 — A206</span>
              </div>
              <span className="il-map__label">DUBAI DESIGN DISTRICT</span>
              <span className="il-map__sub">Map coordinates to be confirmed with client</span>
            </div>
          </div>
        </aside>
      </section>
    </main>
  );
}

function FormInput({ label, type = 'text', placeholder }) {
  return (
    <label className="il-field il-field--input">
      <span className="il-field__lbl">{label}</span>
      <input type={type} placeholder={placeholder} />
    </label>
  );
}

function FormSelect({ label, options }) {
  return (
    <label className="il-field il-field--input">
      <span className="il-field__lbl">{label}</span>
      <select defaultValue="">
        <option value="" disabled>Select …</option>
        {options.map((o) => <option key={o}>{o}</option>)}
      </select>
    </label>
  );
}

function FormTextarea({ label, placeholder }) {
  return (
    <label className="il-field il-field--input il-field--ta">
      <span className="il-field__lbl">{label}</span>
      <textarea rows="5" placeholder={placeholder} />
    </label>
  );
}

// =========================================================================
// JOURNAL — small placeholder page
// =========================================================================
function JournalPage({ go }) {
  return (
    <main className="il-page il-page--journal">
      <header className="il-pagehead">
        <Eyebrow n="00">Journal</Eyebrow>
        <h1 className="il-pagehead__h1">
          A <em>new knowledge forum</em>, slowly being written.
        </h1>
        <p className="il-pagehead__sub">
          Notes from the studio on materials, slow craft, and the
          conditions a building has to negotiate with the Gulf climate.
          The first issues land in autumn.
        </p>
      </header>
      <section className="il-section il-journal-stub">
        <div className="il-journal-stub__row">
          <div>
            <span className="il-eyebrow__n">01</span>
            <h3>On travertine, and why we still cut it the same way as the Romans.</h3>
            <span className="il-journal-stub__date">Autumn 2026</span>
          </div>
          <div>
            <span className="il-eyebrow__n">02</span>
            <h3>A garden in d3 — adapting Tuscan planting to a Gulf summer.</h3>
            <span className="il-journal-stub__date">Autumn 2026</span>
          </div>
          <div>
            <span className="il-eyebrow__n">03</span>
            <h3>The slow brief: a year on the same plan.</h3>
            <span className="il-journal-stub__date">Winter 2026</span>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, PortfolioPage, ProjectPage, StudioPage, ServicesPage, ContactPage, JournalPage });