/* Bespoke + Consultation form + Showroom + Contact */

function Bespoke({ onNav }) {
  const [size, setSize] = useState({ w: 3.0, h: 2.0 });
  const [palette, setPalette] = useState('madder');
  const [collection, setCollection] = useState('Traditional');

  // Pricing model: AED 3,200 per sqm for Traditional, scaled by collection
  const collectionMultiplier = {
    Traditional: 1.0,
    Timeless: 1.15,
    Modern: 1.05,
    Tolerance: 1.2,
    Designer: 1.55,
    'Stone Wash': 1.1
  };
  const sqm = +(size.w * size.h).toFixed(2);
  const baseRate = 3200;
  const knots = Math.round(sqm * 145000);
  const months = Math.max(4, Math.round(sqm * 1.8 + 2));
  const price = Math.round(sqm * baseRate * (collectionMultiplier[collection] || 1) / 10) * 10;

  const palettes = {
    madder:   { name: 'Madder & ivory',     swatches: ['#8E3B2E', '#C99A3A', '#EDE2D1', '#231C16'] },
    indigo:   { name: 'Indigo & saffron',   swatches: ['#2E3D5A', '#C99A3A', '#F1EADB', '#15100B'] },
    walnut:   { name: 'Walnut & bone',      swatches: ['#5A4636', '#A88A6B', '#E6DCC5', '#231C16'] },
    stone:    { name: 'Stone-wash neutrals', swatches: ['#A89881', '#D7C7B0', '#EDE2D1', '#5A4636'] }
  };

  return (
    <React.Fragment>
      <PageHeader
        eyebrow="Bespoke"
        title={<span>A carpet drawn for one room, woven by one weaver, signed for one client.</span>}
        lead="From a fabric sample, a floor plan or a photograph — our design studio briefs the loom in Mazar-i-Sharif and ships you a single carpet, signed and certified, between six and fourteen months later."
      />

      <section className="section ivory" style={{ paddingTop: 40 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'flex-start' }} className="bespoke-grid">
            {/* Configurator */}
            <div style={{ background: 'var(--bone)', padding: 56 }}>
              <Eyebrow>Configurator · live estimate</Eyebrow>
              <h2 className="serif" style={{ fontSize: 36, lineHeight: 1.1, marginTop: 18, marginBottom: 36 }}>
                Brief your piece.
              </h2>

              {/* Collection */}
              <div style={{ marginBottom: 32 }}>
                <label style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--muted)', display: 'block', marginBottom: 14 }}>Collection</label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                  {['Traditional', 'Modern', 'Timeless', 'Tolerance', 'Designer', 'Stone Wash'].map(c => (
                    <button key={c}
                            className={'filter-pill ' + (collection === c ? 'active' : '')}
                            onClick={() => setCollection(c)}
                            style={{ padding: '12px 8px', fontSize: 10 }}>
                      {c}
                    </button>
                  ))}
                </div>
              </div>

              {/* Size */}
              <div style={{ marginBottom: 32 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                  <label style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--muted)' }}>Size</label>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--ink)' }}>{size.w.toFixed(2)} × {size.h.toFixed(2)} m · {sqm} sqm</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div>
                    <div style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 6 }}>Width (m)</div>
                    <input type="range" min="1" max="6" step="0.1" value={size.w}
                           onChange={e => setSize({ ...size, w: +e.target.value })}
                           style={{ width: '100%' }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 6 }}>Height (m)</div>
                    <input type="range" min="0.7" max="5" step="0.1" value={size.h}
                           onChange={e => setSize({ ...size, h: +e.target.value })}
                           style={{ width: '100%' }} />
                  </div>
                </div>

                {/* Visual size preview */}
                <div style={{ marginTop: 24, background: 'var(--ivory)', height: 200, position: 'relative', border: '1px solid var(--line)' }}>
                  <div style={{
                    position: 'absolute',
                    left: '50%', top: '50%',
                    transform: 'translate(-50%, -50%)',
                    width: `${Math.min(96, size.w * 16)}%`,
                    aspectRatio: `${size.w} / ${size.h}`,
                    maxHeight: '84%',
                    background: palettes[palette].swatches[0],
                    border: `2px solid ${palettes[palette].swatches[1]}`,
                    transition: 'all 320ms ease',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: palettes[palette].swatches[2],
                    fontFamily: 'Cormorant Garamond',
                    fontSize: 20,
                    fontStyle: 'italic'
                  }}>
                    {size.w.toFixed(1)} × {size.h.toFixed(1)} m
                  </div>
                </div>
              </div>

              {/* Palette */}
              <div style={{ marginBottom: 32 }}>
                <label style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--muted)', display: 'block', marginBottom: 14 }}>Palette · natural dye</label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
                  {Object.entries(palettes).map(([k, p]) => (
                    <button key={k}
                            onClick={() => setPalette(k)}
                            style={{
                              padding: 14,
                              border: palette === k ? '1px solid var(--ink)' : '1px solid var(--line)',
                              background: palette === k ? 'var(--ivory)' : 'transparent',
                              cursor: 'pointer',
                              textAlign: 'left',
                              borderRadius: 0
                            }}>
                      <div style={{ display: 'flex', gap: 4, marginBottom: 10 }}>
                        {p.swatches.map((c, i) => (
                          <div key={i} style={{ width: 22, height: 22, background: c, border: '1px solid rgba(0,0,0,0.04)' }} />
                        ))}
                      </div>
                      <div style={{ fontSize: 12, letterSpacing: '0.04em' }}>{p.name}</div>
                    </button>
                  ))}
                </div>
              </div>

              <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}
                      onClick={() => onNav('consultation')}>
                Continue to a consultation <span className="arrow">→</span>
              </button>
            </div>

            {/* Estimate */}
            <div style={{ position: 'sticky', top: 120 }}>
              <Eyebrow>Live estimate</Eyebrow>
              <div className="serif" style={{ fontSize: 80, lineHeight: 1, marginTop: 24, marginBottom: 8, fontWeight: 400 }}>
                AED {price.toLocaleString('en-US')}
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.16em', marginBottom: 36 }}>
                INDICATIVE · FINAL PRICE QUOTED AFTER A DESIGN BRIEF
              </div>

              <div style={{ borderTop: '1px solid var(--line)' }}>
                <div className="spec-row"><span className="k">Collection</span><span className="v">{collection}</span></div>
                <div className="spec-row"><span className="k">Size</span><span className="v mono">{size.w.toFixed(2)} × {size.h.toFixed(2)} m</span></div>
                <div className="spec-row"><span className="k">Area</span><span className="v mono">{sqm} sqm</span></div>
                <div className="spec-row"><span className="k">Est. knots</span><span className="v mono">~{knots.toLocaleString('en-US')}</span></div>
                <div className="spec-row"><span className="k">Time at loom</span><span className="v">~{months} months</span></div>
                <div className="spec-row"><span className="k">Foundation</span><span className="v">Cotton warp, wool weft</span></div>
                <div className="spec-row"><span className="k">Palette</span><span className="v">{palettes[palette].name}</span></div>
              </div>

              <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 24, lineHeight: 1.6 }}>
                Estimate covers wool, dye, draft, weaving, finishing, certification and Dubai delivery.
                Strike-off samples are produced before any commission begins — at no additional cost.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section bone">
        <div className="container">
          <Eyebrow>How a commission runs</Eyebrow>
          <h2 className="h-section serif" style={{ marginTop: 24, marginBottom: 48, maxWidth: 720 }}>
            From a first conversation to a signed carpet in your room.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0 }} className="commission-steps">
            {[
              { w: 'Week 0',    t: 'Consultation', d: 'Forty-five minutes in d3 or by video. Floor plan, palette, brief.' },
              { w: 'Week 2',    t: 'Studio brief', d: 'Two or three drawings, palette card, wool samples sent to you.' },
              { w: 'Week 6',    t: 'Strike-off', d: 'A 40 × 40 cm sample is hand-knotted and shipped for sign-off.' },
              { w: 'Week 8',    t: 'Loom starts', d: 'A loom in Mazar-i-Sharif is assigned. We send you the weaver’s name.' },
              { w: 'Month 6–14', t: 'Weaving', d: 'Monthly photographs from the loom. You can stop, change colour, redraw.' },
              { w: 'Delivery', t: 'Signed & shipped', d: 'Cut off, washed, signed, certified, freighted to your door.' }
            ].map((s, i) => (
              <div key={i} style={{ padding: '32px 24px 32px 0', borderRight: i < 5 ? '1px solid var(--line)' : 'none', borderTop: '1px solid var(--ink)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--gold)', letterSpacing: '0.2em', marginBottom: 12 }}>{s.w.toUpperCase()}</div>
                <h4 className="serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 8 }}>{s.t}</h4>
                <p style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.55, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand onNav={onNav} />
    </React.Fragment>
  );
}

function Consultation({ onNav, onSubmit }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({
    role: '',
    name: '',
    company: '',
    email: '',
    phone: '',
    project: 'bespoke',
    sqm: '',
    timeline: '6-12',
    budget: '',
    palette: '',
    notes: '',
    when: '',
    channel: 'showroom',
    file: null
  });
  const [submitted, setSubmitted] = useState(false);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canNext = (() => {
    if (step === 0) return !!form.role;
    if (step === 1) return form.name && form.email;
    if (step === 2) return true;
    return true;
  })();

  const submit = () => {
    setSubmitted(true);
    if (onSubmit) onSubmit(form);
  };

  if (submitted) {
    return (
      <React.Fragment>
        <PageHeader
          eyebrow="Consultation requested"
          title={<span>Thank you, {form.name.split(' ')[0] || 'we have it'}. We will be back within one working day.</span>}
          lead={`A confirmation has been sent to ${form.email}. Our concierge will call ${form.phone || 'you'} to set the meeting time. In the meantime, a few links below.`}
        />
        <section className="section bone">
          <div className="container">
            <div className="split">
              <div>
                <Eyebrow>While you wait</Eyebrow>
                <h2 className="h-section serif" style={{ marginTop: 24 }}>
                  Three things worth a look before we meet.
                </h2>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <button className="btn btn-ghost-dark" onClick={() => onNav('craftsmanship')}>How a Zuleya is made →</button>
                <button className="btn btn-ghost-dark" onClick={() => onNav('projects')}>Selected projects →</button>
                <button className="btn btn-ghost-dark" onClick={() => onNav('collections')}>The current collection →</button>
              </div>
            </div>
            <div style={{ marginTop: 64, padding: 32, background: 'var(--ivory)', border: '1px solid var(--line)' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--muted)', marginBottom: 16 }}>YOUR BRIEF · REF #{Math.random().toString(36).slice(2, 8).toUpperCase()}</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
                <div><div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Role</div><div style={{ fontSize: 15, marginTop: 4 }}>{form.role || '—'}</div></div>
                <div><div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Project</div><div style={{ fontSize: 15, marginTop: 4 }}>{form.project}</div></div>
                <div><div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Timeline</div><div style={{ fontSize: 15, marginTop: 4 }}>{form.timeline} months</div></div>
              </div>
            </div>
          </div>
        </section>
        <CtaBand onNav={onNav} />
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <PageHeader
        eyebrow="Book a consultation"
        title={<span>Forty-five minutes with our design team — in d3, by video, or at your studio.</span>}
        lead="Tell us a little about the project. We do not ask for the brief here — that is what the meeting is for."
      />

      <section className="section ivory" style={{ paddingTop: 40 }}>
        <div className="container" style={{ maxWidth: 980 }}>
          <div className="steps-head">
            {['You', 'Contact', 'Project', 'Meeting'].map((label, i) => (
              <button key={label} className={'step ' + (i === step ? 'active' : '')}
                      onClick={() => i < step && setStep(i)}
                      style={{ background: 'none', border: 0 }}>
                <span className="n serif">0{i + 1}</span>{label}
              </button>
            ))}
          </div>

          {step === 0 && (
            <div>
              <h2 className="serif" style={{ fontSize: 36, fontWeight: 400, marginBottom: 28 }}>Who are you briefing on behalf of?</h2>
              <div className="role-grid">
                {window.ZULEYA.ROLES.map(r => (
                  <button key={r.id}
                          className={'role-pill ' + (form.role === r.lbl ? 'active' : '')}
                          onClick={() => update('role', r.lbl)}>
                    <span className="icon">{r.icon}</span>
                    <span className="lbl">{r.lbl}</span>
                  </button>
                ))}
              </div>
              <p className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 8, letterSpacing: '0.16em' }}>
                THIS HELPS US ASSIGN THE RIGHT CONSULTANT TO YOU.
              </p>
            </div>
          )}

          {step === 1 && (
            <div>
              <h2 className="serif" style={{ fontSize: 36, fontWeight: 400, marginBottom: 28 }}>How should we reach you?</h2>
              <div className="form-grid">
                <div className="form-field"><label>Full name</label>
                  <input value={form.name} onChange={e => update('name', e.target.value)} placeholder="Jane Hassan" /></div>
                <div className="form-field"><label>Company or studio</label>
                  <input value={form.company} onChange={e => update('company', e.target.value)} placeholder="Studio name" /></div>
                <div className="form-field"><label>Email</label>
                  <input type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="you@studio.com" /></div>
                <div className="form-field"><label>Phone (optional)</label>
                  <input value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="+971 …" /></div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <h2 className="serif" style={{ fontSize: 36, fontWeight: 400, marginBottom: 28 }}>Tell us about the project.</h2>
              <div className="form-grid">
                <div className="form-field"><label>Type of project</label>
                  <select value={form.project} onChange={e => update('project', e.target.value)}>
                    <option value="bespoke">Bespoke commission</option>
                    <option value="existing">A piece from the current collection</option>
                    <option value="hospitality">Hospitality / contract</option>
                    <option value="gift">Gifting or diplomatic order</option>
                    <option value="restore">Restoration of an older Zuleya</option>
                  </select>
                </div>
                <div className="form-field"><label>Approximate area</label>
                  <select value={form.sqm} onChange={e => update('sqm', e.target.value)}>
                    <option value="">Choose…</option>
                    <option>Under 4 sqm</option>
                    <option>4 – 8 sqm</option>
                    <option>8 – 16 sqm</option>
                    <option>16 – 40 sqm</option>
                    <option>Over 40 sqm</option>
                  </select>
                </div>
                <div className="form-field"><label>Timeline (months)</label>
                  <select value={form.timeline} onChange={e => update('timeline', e.target.value)}>
                    <option value="3-6">3 – 6 months</option>
                    <option value="6-12">6 – 12 months</option>
                    <option value="12+">12 months or more — heirloom commission</option>
                    <option value="open">No fixed deadline</option>
                  </select>
                </div>
                <div className="form-field"><label>Indicative budget (AED)</label>
                  <select value={form.budget} onChange={e => update('budget', e.target.value)}>
                    <option value="">Choose…</option>
                    <option>Under 15,000</option>
                    <option>15,000 – 40,000</option>
                    <option>40,000 – 100,000</option>
                    <option>100,000 – 250,000</option>
                    <option>Over 250,000</option>
                  </select>
                </div>
                <div className="form-field full"><label>A note for the design team (optional)</label>
                  <textarea value={form.notes} onChange={e => update('notes', e.target.value)}
                            placeholder="A room. A palette. A fabric we’re working from. Whatever is in your head."></textarea>
                </div>
                <div className="form-field full">
                  <label>Reference (optional)</label>
                  <div className={'file-drop ' + (form.file ? 'has-file' : '')}
                       onClick={() => update('file', form.file ? null : 'mood-board.jpg')}>
                    <div className="label">{form.file ? '✓ mood-board.jpg attached — click to remove' : 'Drop a mood board, floor plan or fabric photo'}</div>
                    <div className="hint">PDF, JPG, PNG up to 16 MB. We treat all files as confidential.</div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <h2 className="serif" style={{ fontSize: 36, fontWeight: 400, marginBottom: 28 }}>How would you like to meet?</h2>
              <div className="form-grid">
                <div className="form-field full">
                  <label>Channel</label>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                    {[
                      { id: 'showroom', t: 'In the d3 showroom', s: 'Dubai Design District, building 2' },
                      { id: 'video', t: 'Video call', s: 'Teams or Google Meet, 45 min' },
                      { id: 'visit', t: 'You visit us / we visit you', s: 'Studio, site, residence — anywhere in the UAE' }
                    ].map(c => (
                      <button key={c.id}
                              onClick={() => update('channel', c.id)}
                              className={'role-pill ' + (form.channel === c.id ? 'active' : '')}>
                        <span className="lbl">{c.t}</span>
                        <span style={{ fontSize: 11, opacity: 0.7 }}>{c.s}</span>
                      </button>
                    ))}
                  </div>
                </div>

                <div className="form-field full"><label>Preferred days &amp; times</label>
                  <textarea value={form.when} onChange={e => update('when', e.target.value)}
                            placeholder="E.g. weekday mornings, anytime next Tuesday, …"></textarea>
                  <div className="help">Our concierge will confirm a slot within one working day.</div>
                </div>
              </div>

              <div style={{ background: 'var(--bone)', padding: 28, marginTop: 32 }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--muted)' }}>YOUR BRIEF SO FAR</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 16, fontSize: 14 }}>
                  <div><span className="muted" style={{ display: 'block', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em' }}>Role</span>{form.role || '—'}</div>
                  <div><span className="muted" style={{ display: 'block', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em' }}>Project</span>{form.project}</div>
                  <div><span className="muted" style={{ display: 'block', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em' }}>Timeline</span>{form.timeline} months</div>
                  <div><span className="muted" style={{ display: 'block', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em' }}>Area</span>{form.sqm || '—'}</div>
                </div>
              </div>
            </div>
          )}

          <div style={{ marginTop: 48, display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <button className="btn btn-ghost-dark"
                    onClick={() => step > 0 && setStep(step - 1)}
                    style={{ opacity: step === 0 ? 0.3 : 1, pointerEvents: step === 0 ? 'none' : 'auto' }}>
              ← Back
            </button>
            {step < 3 && (
              <button className="btn btn-primary"
                      onClick={() => canNext && setStep(step + 1)}
                      style={{ opacity: canNext ? 1 : 0.4, pointerEvents: canNext ? 'auto' : 'none' }}>
                Continue <span className="arrow">→</span>
              </button>
            )}
            {step === 3 && (
              <button className="btn btn-primary" onClick={submit}>
                Send the request <span className="arrow">→</span>
              </button>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function Showroom({ onNav }) {
  return (
    <React.Fragment>
      <PageHeader
        eyebrow="Showroom · Dubai Design District"
        title={<span>The carpets — and their cartoons — in one room in d3.</span>}
        lead="A working showroom: every carpet on the floor, the cartoons on the wall, wool samples on the table, and one of the design team to walk you around. Walk-ins welcome; consultations by appointment."
      />

      <section className="section-sm ivory" style={{ paddingTop: 0 }}>
        <div className="container">
          <img src="media/media-02-banner-2.webp" style={{ width: '100%', aspectRatio: '21/8', objectFit: 'cover' }} />
        </div>
      </section>

      <section className="section ivory">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow>Find us</Eyebrow>
              <h2 className="h-section serif" style={{ marginTop: 24 }}>
                Showroom 1, Building 2, Dubai Design District.
              </h2>
              <div style={{ marginTop: 36 }}>
                {[
                  { k: 'Address', v: 'Showroom 1, Building 2 · Dubai Design District (d3) · PO Box 27677, Dubai, UAE' },
                  { k: 'Hours', v: 'Saturday – Thursday · 10:00 – 22:00 · Friday · 16:00 – 22:00' },
                  { k: 'Parking', v: 'Free underground parking, level B1, lifts to ground floor.' },
                  { k: 'Metro', v: 'Creek metro station, 12 minutes by taxi. d3 is on the RTA Dubai Bus 88 route.' },
                  { k: 'Phone', v: 'FBMI · +971 4 243 2327 · Zuleya · 800 ZULEYA' },
                  { k: 'Email', v: 'hello@zuleya.ae · info@fbmi.ae' }
                ].map(r => (
                  <div key={r.k} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', padding: '18px 0', borderBottom: '1px solid var(--line)', gap: 24, alignItems: 'baseline' }}>
                    <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--ink)', textTransform: 'uppercase' }}>{r.k}</span>
                    <span style={{ fontSize: 14, lineHeight: 1.55 }}>{r.v}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => onNav('consultation')}>Book a consultation <span className="arrow">→</span></button>
                <a className="btn btn-ghost-dark" href="https://maps.google.com/?q=Dubai+Design+District" target="_blank" rel="noopener">Open in maps</a>
              </div>
            </div>
            <div>
              {/* Stylised map */}
              <div style={{ aspectRatio: '4/5', background: 'var(--bone)', position: 'relative', overflow: 'hidden', border: '1px solid var(--line)' }}>
                <svg viewBox="0 0 400 500" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                  <defs>
                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(0,0,0,0.04)" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="400" height="500" fill="url(#grid)" />
                  {/* roads */}
                  <path d="M 0 320 L 400 240" stroke="rgba(0,0,0,0.12)" strokeWidth="20" />
                  <path d="M 140 0 L 240 500" stroke="rgba(0,0,0,0.12)" strokeWidth="14" />
                  <path d="M 0 100 Q 200 140 400 80" stroke="rgba(0,0,0,0.08)" strokeWidth="8" fill="none" />
                  {/* buildings */}
                  <rect x="60" y="180" width="40" height="60" fill="rgba(0,0,0,0.08)" />
                  <rect x="280" y="320" width="50" height="50" fill="rgba(0,0,0,0.08)" />
                  <rect x="120" y="380" width="60" height="40" fill="rgba(0,0,0,0.08)" />
                  {/* pin */}
                  <circle cx="200" cy="260" r="22" fill="var(--gold)" opacity="0.2" />
                  <circle cx="200" cy="260" r="10" fill="var(--gold)" />
                  <line x1="200" y1="260" x2="200" y2="500" stroke="var(--gold)" strokeWidth="1" strokeDasharray="4 6" />
                  <text x="220" y="258" fontFamily="Cormorant Garamond" fontSize="22" fill="var(--ink)" fontStyle="italic">Zuleya · d3</text>
                  <text x="220" y="278" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)" letterSpacing="2">SHOWROOM 1 · BUILDING 2</text>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section bone">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            <img src="media/media-10-article-1.webp" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover' }} />
            <img src="media/media-11-article-2.webp" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover' }} />
            <img src="media/media-12-article-3.webp" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover' }} />
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function Contact({ onNav, onSubmit }) {
  const [form, setForm] = useState({ name: '', email: '', subject: 'general', message: '' });
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    if (onSubmit) onSubmit(form);
  };

  return (
    <React.Fragment>
      <PageHeader
        eyebrow="Get in touch"
        title={<span>Write to us. Phone us. Walk in.</span>}
        lead="One mailbox for press, one for the trade, one for collectors. We reply within one working day."
      />

      <section className="section ivory" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="split">
            <div>
              {sent ? (
                <div style={{ padding: 56, background: 'var(--bone)', borderLeft: '3px solid var(--gold)' }}>
                  <Eyebrow>Thank you</Eyebrow>
                  <h3 className="serif" style={{ fontSize: 36, fontWeight: 400, margin: '20px 0 16px' }}>
                    We have your note, {form.name.split(' ')[0] || 'there'}.
                  </h3>
                  <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.6 }}>
                    A confirmation has been sent to {form.email}. We reply within one working day.
                  </p>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <Eyebrow>Send a note</Eyebrow>
                  <h3 className="serif" style={{ fontSize: 36, fontWeight: 400, margin: '20px 0 32px' }}>
                    Short or long — both are read.
                  </h3>
                  <div className="form-grid">
                    <div className="form-field"><label>Name</label>
                      <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required /></div>
                    <div className="form-field"><label>Email</label>
                      <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} required /></div>
                    <div className="form-field full"><label>Subject</label>
                      <select value={form.subject} onChange={e => setForm({ ...form, subject: e.target.value })}>
                        <option value="general">A general enquiry</option>
                        <option value="trade">Trade · interior design or architecture studio</option>
                        <option value="hospitality">Hospitality / contract</option>
                        <option value="press">Press &amp; media</option>
                        <option value="careers">Careers · joining the team</option>
                        <option value="weavers">Joining the loom in Mazar-i-Sharif</option>
                      </select></div>
                    <div className="form-field full"><label>Message</label>
                      <textarea rows="4" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} required></textarea></div>
                  </div>
                  <div style={{ marginTop: 32 }}>
                    <button className="btn btn-primary" type="submit">Send <span className="arrow">→</span></button>
                  </div>
                </form>
              )}
            </div>
            <div>
              <Eyebrow>Direct lines</Eyebrow>
              <div style={{ marginTop: 28 }}>
                {[
                  { k: 'Trade & design', v: 'trade@zuleya.ae · +971 4 243 2327' },
                  { k: 'Press', v: 'press@fbmi.ae' },
                  { k: 'Showroom (d3)', v: '+971 4 243 2327 · open today 10:00 – 22:00' },
                  { k: 'Mazar-i-Sharif loom', v: 'Visits welcome by prior arrangement only' },
                  { k: 'Postal', v: 'PO Box 27677, Dubai, UAE' }
                ].map(r => (
                  <div key={r.k} style={{ padding: '22px 0', borderBottom: '1px solid var(--line)' }}>
                    <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--muted)', textTransform: 'uppercase' }}>{r.k}</div>
                    <div style={{ fontSize: 16, marginTop: 8 }}>{r.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { Bespoke, Consultation, Showroom, Contact });