/* ============================================
   H-Arch — Pages: Home, Finishes, Projects,
   Capabilities, Showroom, Contact
   ============================================ */
const HD = window.HARCH_DATA;
const FINISH_FAMILIES_LIST = HD.FINISH_FAMILIES;
const FINISHES_LIST        = HD.FINISHES;
const PROJECTS_LIST        = HD.PROJECTS;
const CAPABILITIES_LIST    = HD.CAPABILITIES;
const TIMELINE_LIST        = HD.TIMELINE;

/* ============ HOME ============ */
function HomePage({ setRoute, onOpenFinish, onSample, tweaks }) {
  const hero = tweaks.hero;
  const heroImage = useMemo(() => {
    const map = {
      copper:  'media/finish-copper-brush.webp',
      ripple:  'media/finish-water-ripple-mesh-bronze.webp',
      stone:   'media/finish-stone-mesh.webp',
      mirror:  'media/finish-mirror-green.webp',
      finishes:'media/metal-finishes-feature.webp',
    };
    return map[hero] || map.copper;
  }, [hero]);

  const teaserFinishes = useMemo(() =>
    [
      'brushed-copper',           // big — warm copper
      'hairline-ss',              // brown hairline
      'vibration-gold',           // champagne gold
      'water-ripple-mesh-bronze', // bronze ripple
    ].map((s) => FINISHES_LIST.find((f) => f.slug === s)).filter(Boolean),
  []);

  return (
    <>
      {/* HERO */}
      <header className="hero">
        <div className="hero__bg" style={{ backgroundImage: `url(${heroImage})` }} />
        <div className="hero__inner">
          <div className="hero__eyebrow">
            <span className="hero__eyebrow-line" />
            <span className="eyebrow on-noir">H-Arch · Dubai Design District</span>
          </div>
          <h1 className="hero__h1">
            Metal,<br/>
            made <em>to be seen.</em>
          </h1>
          <p className="hero__sub">
            H-Arch turns architects' and designers' visions into architectural realities in bespoke
            stainless steel — façades, cladding, ceilings, screens and decorative finishes,
            crafted in-house in Dubai since 1976.
          </p>
          <div className="hero__cta">
            <Button variant="primary" size="lg" onClick={onSample}>
              Request samples <Icon.arrow className="arrow" style={{ width: 16, height: 16 }} />
            </Button>
            <Button variant="ghost" size="lg" onClick={() => setRoute('showroom')}>
              Book a d3 consultation
            </Button>
          </div>
        </div>

        <div className="hero__meta">
          <span>Since</span>
          <span className="hero__meta-value">1976</span>
        </div>

        <div className="hero__slider">
          <span>01 / 03</span>
          <div className="hero__slider-track">
            <div className="hero__slider-fill" />
          </div>
          <span>Finish Library →</span>
        </div>
      </header>

      <Ticker />

      {/* HERITAGE STATS */}
      <section className="heritage-strip">
        <div className="heritage-strip__inner">
          <div>
            <div className="heritage-stat__num"><em>50</em> yrs</div>
            <div className="heritage-stat__label">Of metalwork heritage — since the group's founding in 1976</div>
          </div>
          <div>
            <div className="heritage-stat__num"><em>20</em>+</div>
            <div className="heritage-stat__label">Countries served across five continents</div>
          </div>
          <div>
            <div className="heritage-stat__num"><em>6,000</em></div>
            <div className="heritage-stat__label">m² — the GCC's first integrated SS service centre</div>
          </div>
          <div>
            <div className="heritage-stat__num"><em>1</em></div>
            <div className="heritage-stat__label">Atelier at Dubai Design District — Building 5</div>
          </div>
        </div>
      </section>

      {/* FINISH LIBRARY TEASER */}
      <section className="section section--paper">
        <div className="section__inner">
          <div className="section__head reveal">
            <div>
              <div className="eyebrow">The library</div>
              <h2 className="section__head-title">Finishes as design objects.</h2>
            </div>
            <p className="section__head-blurb">
              A working palette of architectural metal — hairline, mirror, PVD colour, brushed,
              vibration, bead-blast, bronze patina, expanded mesh, CNC perforation and more.
              Each tile is a finish, not a SKU.
            </p>
          </div>

          <div className="finish-feature reveal">
            <article className="finish-feature__hero finish-card" onClick={() => onOpenFinish(teaserFinishes[0])}>
              <div className="finish-card__swatch">
                <img src={teaserFinishes[0].img} alt={teaserFinishes[0].name} />
                <span className="finish-card__code">{teaserFinishes[0].code}</span>
                <span className="finish-card__sample">Request sample →</span>
              </div>
              <div className="finish-card__body">
                <span className="finish-card__family">{teaserFinishes[0].familyLabel}</span>
                <h3 className="finish-card__name" style={{ fontSize: 32 }}>{teaserFinishes[0].name}</h3>
                <span className="finish-card__apps">{teaserFinishes[0].apps.slice(0, 2).join(' · ')}</span>
              </div>
            </article>
            <div className="finish-feature__list">
              {teaserFinishes.slice(1).map((f) => (
                <article key={f.slug} className="finish-row" onClick={() => onOpenFinish(f)}>
                  <div className="finish-row__swatch" style={{ backgroundImage: `url(${f.img})` }} />
                  <div className="finish-row__body">
                    <span className="finish-card__family">{f.familyLabel}</span>
                    <h3 className="finish-row__name">{f.name}</h3>
                    <span className="finish-card__apps">{f.apps.slice(0, 2).join(' · ')}</span>
                  </div>
                  <span className="finish-row__code text-mono">{f.code}</span>
                  <Icon.arrow className="finish-row__arrow" />
                </article>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 56, gap: 24, flexWrap: 'wrap' }}>
            <p className="muted" style={{ margin: 0, maxWidth: '42ch' }}>
              {FINISHES_LIST.length} finishes catalogued in the d3 library — filter by family,
              request samples, download spec sheets.
            </p>
            <Button variant="ghost" onLight onClick={() => setRoute('finishes')}>
              Open the full library <Icon.arrow className="arrow" style={{ width: 14, height: 14 }} />
            </Button>
          </div>
        </div>
      </section>

      {/* PROJECTS TEASER */}
      <section className="section section--noir">
        <div className="section__inner">
          <div className="section__head reveal">
            <div>
              <div className="eyebrow on-noir">In situ</div>
              <h2 className="section__head-title">Finished spaces, not parts.</h2>
            </div>
            <p className="section__head-blurb">
              Lobbies, lift cars, façades, sculpted entrance pieces and ceiling rafts —
              built, finished and installed by the H-Arch team. Project photography is
              shown with the client's permission; placeholders are clearly labelled.
            </p>
          </div>

          <div className="project-grid reveal">
            <ProjectCard project={PROJECTS_LIST[0]} />
            <ProjectCard project={PROJECTS_LIST[1]} />
            <ProjectCard project={PROJECTS_LIST[2]} />
            <ProjectCard project={PROJECTS_LIST[3]} />
          </div>

          <div style={{ marginTop: 48 }}>
            <Button variant="ghost" onClick={() => setRoute('projects')}>
              All projects <Icon.arrow className="arrow" style={{ width: 14, height: 14 }} />
            </Button>
          </div>
        </div>
      </section>

      {/* CAPABILITIES */}
      <section className="section section--paper">
        <div className="section__inner">
          <div className="section__head reveal">
            <div>
              <div className="eyebrow">Capabilities</div>
              <h2 className="section__head-title">Under one roof.</h2>
            </div>
            <p className="section__head-blurb">
              From a single-shutter trading shop in Abu Dhabi in 1976 to the region's largest
              integrated stainless-steel service centre — fabrication, finishing and bespoke
              architectural work all happen in our own facilities.
            </p>
          </div>
        </div>
        <div className="cap-grid reveal">
          {CAPABILITIES_LIST.map((c) => (
            <div className="cap-block" key={c.num}>
              <span className="cap-block__num">{c.num} / 03</span>
              <h3 className="cap-block__title">{c.title}</h3>
              <p className="cap-block__body">{c.body}</p>
              <div className="cap-block__tags">
                {c.tags.map((t) => <span key={t} className="cap-block__tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA BAND */}
      <section className="cta-band">
        <div className="cta-band__inner">
          <h2 className="cta-band__title">
            Specifying a project? Get the finish library, spec sheets and a sample kit.
          </h2>
          <div className="cta-band__actions">
            <Button variant="primary" onClick={onSample}>
              Request samples <Icon.arrow className="arrow" style={{ width: 14, height: 14 }}/>
            </Button>
            <Button variant="ghost" onClick={() => window.open('https://hidayath.com/media/hidayath-architectural-catalogue-new.pdf', '_blank')}>
              <Icon.download style={{ width: 14, height: 14 }} />
              Download the catalogue
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============ FINISH CARD ============ */
function FinishCard({ finish, onClick }) {
  return (
    <article className="finish-card" onClick={onClick}>
      <div className="finish-card__swatch">
        <img src={finish.img} alt={finish.name} loading="lazy" />
        <span className="finish-card__code">{finish.code}</span>
        <span className="finish-card__sample">Request sample →</span>
      </div>
      <div className="finish-card__body">
        <span className="finish-card__family">{finish.familyLabel}</span>
        <h3 className="finish-card__name">{finish.name}</h3>
        <span className="finish-card__apps">{finish.apps.slice(0, 2).join(' · ')}</span>
      </div>
    </article>
  );
}

/* ============ PROJECT CARD ============ */
function ProjectCard({ project }) {
  const cls = `project-card project-card--${project.size}`;
  return (
    <article className={cls}>
      <div className="project-card__img">
        {project.permission === 'cleared' && project.img ? (
          <img src={project.img} alt={project.title} loading="lazy" />
        ) : (
          <div className="project-card__placeholder">
            <div>
              <div className="project-card__placeholder-label">Permission gated</div>
              <div className="project-card__placeholder-label" style={{ marginTop: 6 }}>
                Project image — client to release
              </div>
            </div>
            <div className="project-card__placeholder-name">{project.title}</div>
          </div>
        )}
      </div>
      <div className="project-card__body">
        <div className="project-card__loc">{project.location} · {project.sector}</div>
        <h3 className="project-card__name">{project.title}</h3>
        <div className="project-card__finishes">{project.finishes.join(' · ')}</div>
      </div>
    </article>
  );
}

/* ============ FINISHES PAGE ============ */
function FinishesPage({ onOpenFinish }) {
  const [active, setActive] = useState('all');
  const [query, setQuery] = useState('');

  const counts = useMemo(() => {
    const c = { all: FINISHES_LIST.length };
    FINISHES_LIST.forEach((f) => { c[f.family] = (c[f.family] || 0) + 1; });
    return c;
  }, []);

  const filtered = useMemo(() => {
    return FINISHES_LIST.filter((f) => {
      if (active !== 'all' && f.family !== active) return false;
      if (query) {
        const q = query.toLowerCase();
        return (f.name + ' ' + f.familyLabel + ' ' + f.apps.join(' ')).toLowerCase().includes(q);
      }
      return true;
    });
  }, [active, query]);

  return (
    <>
      <header className="page-header">
        <div className="page-header__inner">
          <span className="page-header__eyebrow">The finish library</span>
          <h1 className="page-header__h1">A working palette<br/>of <em style={{ fontStyle: 'italic', color: 'var(--brand)' }}>architectural</em> metal.</h1>
          <p className="page-header__sub">
            Filter by finish family, search by application, request a physical sample, or download
            the spec sheet. Finish names follow our published vocabulary — invent none.
          </p>
        </div>
      </header>

      <section className="section section--paper" style={{ paddingTop: 56 }}>
        <div className="section__inner">

          {/* Search + filter */}
          <div className="filter-bar reveal">
            <span className="filter-bar__label">Family</span>
            {FINISH_FAMILIES_LIST.map((f) => (
              <button key={f.key}
                      onClick={() => setActive(f.key)}
                      className={`filter-chip ${active === f.key ? 'is-active' : ''}`}>
                {f.label}
                <span className="filter-chip__count">{counts[f.key] || 0}</span>
              </button>
            ))}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '0 0 32px', borderBottom: '1px solid var(--line-faint)', marginBottom: 32 }}>
            <Icon.search style={{ width: 18, height: 18, opacity: 0.5 }} />
            <input
              placeholder="Search by name, family or application — e.g. ‘lift door’, ‘mesh’, ‘bronze’"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              style={{ flex: 1, border: 0, background: 'transparent', font: 'inherit', fontSize: 15, outline: 'none', padding: '8px 0', color: 'inherit' }}
            />
            <span className="text-mono muted" style={{ fontSize: 12 }}>{filtered.length} of {FINISHES_LIST.length}</span>
          </div>

          {filtered.length === 0 ? (
            <div style={{ padding: '80px 0', textAlign: 'center', opacity: 0.6 }}>
              No finishes match. <button className="btn btn--minimal" style={{ display: 'inline-block', marginLeft: 8 }} onClick={() => { setActive('all'); setQuery(''); }}>Clear filters</button>
            </div>
          ) : (
            <div className="finish-grid">
              {filtered.map((f) => (
                <FinishCard key={f.slug} finish={f} onClick={() => onOpenFinish(f)} />
              ))}
            </div>
          )}

          <p className="muted" style={{ marginTop: 48, fontSize: 13, maxWidth: '60ch' }}>
            Pricing is per project — quote based on finish, gauge, sheet size and quantity.
            No prices are published; <a style={{ color: 'var(--brand)', textDecoration: 'underline' }}
              href="mailto:info@h-arch.com">info@h-arch.com</a> for a tailored quotation.
          </p>
        </div>
      </section>
    </>
  );
}

/* ============ PROJECTS PAGE ============ */
function ProjectsPage({ setRoute }) {
  return (
    <>
      <header className="page-header">
        <div className="page-header__inner">
          <span className="page-header__eyebrow">Projects · in situ</span>
          <h1 className="page-header__h1">Finished <em style={{ fontStyle: 'italic', color: 'var(--brand)' }}>spaces.</em></h1>
          <p className="page-header__sub">
            Façades, lobbies, lift cars, feature walls, ceilings and screens — installed and
            commissioned. Client names and photography appear here only with written permission.
            Where rights aren't yet cleared, we leave a labelled placeholder rather than mislabel
            stock as real work.
          </p>
        </div>
      </header>

      <section className="section section--paper" style={{ paddingTop: 56 }}>
        <div className="section__inner">

          <div className="filter-bar">
            <span className="filter-bar__label">Sector</span>
            {['All', 'Hospitality', 'Workplace', 'Residential', 'Cultural', 'Retail'].map((s, i) => (
              <button key={s} className={`filter-chip ${i === 0 ? 'is-active' : ''}`}>
                {s}
              </button>
            ))}
          </div>

          <div className="project-grid">
            {PROJECTS_LIST.map((p, i) => <ProjectCard project={p} key={i} />)}
            {/* Extend the grid with additional placeholder slots */}
            {[
              { title: 'Hospitality lobby — fluted mirror', location: 'Doha · Hospitality', sector: 'Hospitality', finishes: ['Mirror SS', 'PVD bronze'], size: 'md', permission: 'placeholder', img: null },
              { title: 'Lift-car cladding — embossed marble', location: 'Riyadh · Workplace', sector: 'Workplace', finishes: ['Embossed marble', 'Hairline SS'], size: 'sm', permission: 'placeholder', img: null },
              { title: 'Cultural pavilion façade', location: 'Sharjah · Cultural', sector: 'Cultural', finishes: ['CNC perforation', 'H3D pattern'], size: 'sm', permission: 'placeholder', img: null },
              { title: 'Retail flagship — feature wall', location: 'Dubai · Retail', sector: 'Retail', finishes: ['Water-ripple mesh'], size: 'lg', permission: 'placeholder', img: null },
            ].map((p, i) => <ProjectCard project={p} key={'ph-' + i} />)}
          </div>

          <div style={{ marginTop: 80, padding: 40, background: 'var(--brand-tint)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Have a project</div>
              <h3 className="section__head-title" style={{ fontSize: 28, margin: 0 }}>Walk us through it at d3.</h3>
            </div>
            <Button variant="primary" onClick={() => setRoute('showroom')}>
              Book a consultation <Icon.arrow className="arrow" style={{ width: 14, height: 14 }} />
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============ CAPABILITIES PAGE ============ */
function CapabilitiesPage() {
  return (
    <>
      <header className="page-header">
        <div className="page-header__inner">
          <span className="page-header__eyebrow">Capabilities · heritage</span>
          <h1 className="page-header__h1">
            Fifty years of <em style={{ fontStyle: 'italic', color: 'var(--brand)' }}>making.</em>
          </h1>
          <p className="page-header__sub">
            H-Arch is the d3 design face of Hidayath Group — the UAE's largest integrated
            stainless-steel and allied-metal service centre. Founded as Hidayath Hardware in
            Abu Dhabi in 1976; the d3 atelier opened in 2022.
          </p>
        </div>
      </header>

      <section className="section section--paper" style={{ paddingTop: 56 }}>
        <div className="section__inner">

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32, marginBottom: 96 }}>
            {CAPABILITIES_LIST.map((c) => (
              <div key={c.num} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <span className="text-mono" style={{ fontSize: 11, letterSpacing: '0.18em', opacity: 0.4 }}>{c.num} / 03</span>
                <h3 className="cap-block__title" style={{ fontSize: 32 }}>{c.title}</h3>
                <p style={{ fontSize: 14, opacity: 0.72, lineHeight: 1.6, margin: 0 }}>{c.body}</p>
                <div className="cap-block__tags">
                  {c.tags.map((t) => <span key={t} className="cap-block__tag">{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--noir">
        <div className="section__inner">
          <div className="section__head">
            <div>
              <div className="eyebrow on-noir">Heritage</div>
              <h2 className="section__head-title">A half-century in metal.</h2>
            </div>
            <p className="section__head-blurb">
              H-Arch is a 2022 sub-brand. The craft behind it — the welds, the polishing lines,
              the patina lab — goes back to a single-shutter hardware shop in Abu Dhabi opened
              by Hidayathullah Abbas in 1976. This is the timeline.
            </p>
          </div>

          <div className="timeline">
            {TIMELINE_LIST.map((t) => (
              <div className="timeline__item" key={t.year}>
                <div className="timeline__year">{t.year}</div>
                <div className="timeline__label">{t.label}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, marginTop: 80 }}>
            {['media/heritage-milestones-01.webp', 'media/heritage-milestones-02.webp', 'media/heritage-milestones-03.webp'].map((src, i) => (
              <div key={i} style={{ aspectRatio: '4/3', overflow: 'hidden', background: 'var(--ink)' }}>
                <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

/* ============ SHOWROOM PAGE ============ */
function ShowroomPage({ onSample }) {
  const [form, setForm] = useState({ name: '', firm: '', date: '', notes: '' });
  const [sent, setSent] = useState(false);
  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <>
      <div className="showroom-hero">
        <div className="showroom-hero__bg" style={{ backgroundImage: "url('media/architectural-solutions-02.webp')" }} />
        <div className="showroom-hero__inner">
          <span className="eyebrow on-noir">The d3 showroom</span>
          <h1 className="showroom-hero__h1">
            Building 5, <em style={{ fontStyle: 'italic', color: '#C9B6DA' }}>Dubai Design District.</em>
          </h1>
          <p className="showroom-hero__sub">
            The H-Arch atelier sits inside d3 — the city's design quarter — among the
            studios and showrooms most likely to specify our work. Walk in, sit with the
            finish library, sketch on the table.
          </p>
        </div>
      </div>

      <section className="section section--paper">
        <div className="section__inner">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64 }} className="showroom-layout">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 12 }}>What you'll see</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
                  {[
                    ['The full physical finish library', 'Brushed, mirror, PVD colour, bronze patina, expanded mesh, embossed/etched, perforated, H3D, Eccentrico.'],
                    ['Material samples to take away',     'Hand-cut swatches you can carry back to studio, plus printed spec sheets.'],
                    ['A consultation with the d3 team',   'Sit with Mr. Syed Furqan and a finishing specialist to scope the project.'],
                    ['Visit the fabrication facility',    'Optional follow-on visit to the integrated SS service centre in Jebel Ali / DIP.'],
                  ].map(([t, b], i) => (
                    <li key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16, padding: '20px 0', borderBottom: '1px solid var(--line-faint)' }}>
                      <span className="text-mono" style={{ fontSize: 11, opacity: 0.45, paddingTop: 4 }}>{String(i + 1).padStart(2, '0')}</span>
                      <div>
                        <div style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 360, letterSpacing: '-0.01em', marginBottom: 6 }}>{t}</div>
                        <div style={{ fontSize: 14, opacity: 0.7, lineHeight: 1.55 }}>{b}</div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>

              <div style={{ padding: '24px 0', borderTop: '1px solid var(--line-faint)' }}>
                <div className="eyebrow" style={{ marginBottom: 14 }}>Address</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 22, lineHeight: 1.4, fontWeight: 360 }}>
                  Office 103B, Building No. 5<br/>
                  Dubai Design District (d3)<br/>
                  Za'abeel 2, Dubai · UAE
                </div>
                <p className="muted" style={{ fontSize: 13, marginTop: 14 }}>
                  Group hours: Mon – Sat, 08:00 – 18:00. The d3 atelier prefers booked
                  appointments so the right finishing specialist is in the room.
                </p>
              </div>
            </div>

            {/* Booking form */}
            <div style={{ background: 'var(--noir)', color: 'var(--paper)', padding: 40, height: 'fit-content', position: 'sticky', top: 96 }}>
              {sent ? (
                <div>
                  <Icon.check style={{ width: 28, height: 28, color: '#B68CD0', marginBottom: 16 }} />
                  <h3 style={{ fontFamily: 'var(--display)', fontSize: 28, margin: '0 0 12px', fontWeight: 360 }}>Booked.</h3>
                  <p style={{ opacity: 0.7, fontSize: 14, lineHeight: 1.6 }}>
                    Mr. Syed Furqan will confirm your slot by email within one business day.
                    A WhatsApp link will follow for any last-minute questions.
                  </p>
                  <Button variant="ghost" onClick={() => setSent(false)} style={{ marginTop: 16 }}>Book another</Button>
                </div>
              ) : (
                <>
                  <div className="eyebrow on-noir" style={{ marginBottom: 10 }}>Book a consultation</div>
                  <h3 style={{ fontFamily: 'var(--display)', fontSize: 32, margin: '0 0 8px', fontWeight: 340, lineHeight: 1.05 }}>
                    Walk into the library.
                  </h3>
                  <p style={{ opacity: 0.65, fontSize: 13, marginTop: 0, marginBottom: 24, lineHeight: 1.55 }}>
                    Tell us about the project and we'll prep the finishes you're most likely to want to see.
                  </p>
                  <form onSubmit={(e) => { e.preventDefault(); if (form.name && form.firm) setSent(true); }}
                        style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                    <div className="field"><label>Your name</label>
                      <input value={form.name} onChange={handle('name')} required placeholder="Architect / designer" /></div>
                    <div className="field"><label>Firm / practice</label>
                      <input value={form.firm} onChange={handle('firm')} required placeholder="Studio name" /></div>
                    <div className="field"><label>Preferred date</label>
                      <input type="date" value={form.date} onChange={handle('date')} /></div>
                    <div className="field"><label>Project notes</label>
                      <textarea rows="3" value={form.notes} onChange={handle('notes')} placeholder="A hospitality lobby in Downtown Dubai — looking at PVD colour and water-ripple mesh." /></div>
                    <Button variant="primary" type="submit" style={{ marginTop: 8 }}>
                      Send booking <Icon.arrow className="arrow" style={{ width: 14, height: 14 }} />
                    </Button>
                    <Button variant="ghost" type="button" onClick={onSample}>
                      Just send me samples first
                    </Button>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============ CONTACT PAGE ============ */
function ContactPage() {
  const [form, setForm] = useState({ name: '', firm: '', role: '', project: '', interest: 'samples', message: '' });
  const [sent, setSent] = useState(false);
  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const mapsUrl = 'https://www.google.com/maps?q=' +
    encodeURIComponent('Office 103B, Building 5, Dubai Design District, Za\'abeel 2, Dubai') +
    '&output=embed';

  return (
    <>
      <header className="page-header">
        <div className="page-header__inner">
          <span className="page-header__eyebrow">Contact · enquiry</span>
          <h1 className="page-header__h1">Talk to the <em style={{ fontStyle: 'italic', color: 'var(--brand)' }}>d3 team.</em></h1>
          <p className="page-header__sub">
            For architects, designers, fit-out contractors and developers. No checkout — every
            enquiry routes to a project person, with samples and a spec sheet to follow.
          </p>
        </div>
      </header>

      <section className="section section--paper" style={{ paddingTop: 56 }}>
        <div className="section__inner">
          <div className="contact-grid">
            <div className="contact-info">
              <div>
                <div className="contact-row__label">H-Arch at d3</div>
                <div className="contact-row__value">
                  Office 103B, Building 5<br/>
                  Dubai Design District (d3)<br/>
                  Za'abeel 2, Dubai · UAE
                </div>
                <div className="contact-row__sub">
                  Mr. Syed Furqan — d3 contact.<br/>
                  Sister desks at the same address: HOLD Design · Handles &amp; More.
                </div>
                <div className="map-frame">
                  <iframe src={mapsUrl} loading="lazy" title="H-Arch d3 location" />
                </div>
                <p className="muted" style={{ fontSize: 12, marginTop: 12 }}>
                  Map is rendered from the verified d3 address — not the corporate DIP / Jebel Ali pin.
                </p>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
                <div>
                  <div className="contact-row__label">Call</div>
                  <div className="contact-row__value"><a href="tel:+97148857700">+971 4 8857 700</a></div>
                  <div className="contact-row__sub">Landline · group line</div>
                </div>
                <div>
                  <div className="contact-row__label">Mobile (H-Arch)</div>
                  <div className="contact-row__value"><a href="tel:+971589429123">+971 58 942 9123</a></div>
                  <div className="contact-row__sub">d3 atelier line</div>
                </div>
                <div>
                  <div className="contact-row__label">Email</div>
                  <div className="contact-row__value"><a href="mailto:info@h-arch.com">info@h-arch.com</a></div>
                  <div className="contact-row__sub">Or info@hidayath.com for the group</div>
                </div>
                <div>
                  <div className="contact-row__label">WhatsApp</div>
                  <div className="contact-row__value"><a href="https://wa.me/971586332122" target="_blank" rel="noreferrer">+971 58 633 2122</a></div>
                  <div className="contact-row__sub">Group WhatsApp · also routes here</div>
                </div>
              </div>
            </div>

            {/* Form */}
            <div style={{ background: 'var(--noir)', color: 'var(--paper)', padding: 40, height: 'fit-content', position: 'sticky', top: 96 }}>
              {sent ? (
                <div>
                  <Icon.check style={{ width: 28, height: 28, color: '#B68CD0', marginBottom: 16 }} />
                  <h3 style={{ fontFamily: 'var(--display)', fontSize: 32, fontWeight: 340, margin: '0 0 12px' }}>Thank you.</h3>
                  <p style={{ opacity: 0.7, fontSize: 14, lineHeight: 1.65 }}>
                    We've routed your enquiry to the d3 team. Expect a reply within one business day.
                  </p>
                  <Button variant="ghost" onClick={() => setSent(false)} style={{ marginTop: 16 }}>Send another</Button>
                </div>
              ) : (
                <>
                  <div className="eyebrow on-noir" style={{ marginBottom: 10 }}>Project enquiry</div>
                  <h3 style={{ fontFamily: 'var(--display)', fontSize: 32, margin: '0 0 24px', fontWeight: 340, lineHeight: 1.05 }}>
                    Tell us what you're specifying.
                  </h3>
                  <form onSubmit={(e) => { e.preventDefault(); if (form.name && form.firm) setSent(true); }}
                        style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                      <div className="field"><label>Your name</label>
                        <input value={form.name} onChange={handle('name')} required /></div>
                      <div className="field"><label>Firm</label>
                        <input value={form.firm} onChange={handle('firm')} required /></div>
                    </div>
                    <div className="field"><label>Role</label>
                      <input value={form.role} onChange={handle('role')} placeholder="Architect · designer · fit-out · developer" /></div>
                    <div className="field"><label>Project / location</label>
                      <input value={form.project} onChange={handle('project')} placeholder="Hospitality lobby, Downtown Dubai" /></div>
                    <div className="field"><label>What do you need?</label>
                      <select value={form.interest} onChange={handle('interest')}>
                        <option value="samples">Sample kit + spec sheets</option>
                        <option value="catalogue">The full architectural catalogue (PDF)</option>
                        <option value="consultation">A d3 consultation</option>
                        <option value="quote">A project quotation</option>
                        <option value="other">Something else</option>
                      </select>
                    </div>
                    <div className="field"><label>Message</label>
                      <textarea rows="3" value={form.message} onChange={handle('message')}
                                placeholder="Looking at bronze PVD and water-ripple mesh for a lobby — opening Q3." /></div>
                    <Button variant="primary" type="submit" style={{ marginTop: 8 }}>
                      Send enquiry <Icon.arrow className="arrow" style={{ width: 14, height: 14 }} />
                    </Button>
                    <p className="muted" style={{ fontSize: 12, margin: 0 }}>
                      No checkout · B2B / specification only.
                    </p>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  HomePage, FinishesPage, ProjectsPage, CapabilitiesPage, ShowroomPage, ContactPage,
  FinishCard, ProjectCard,
});