// CONTACT — Majlis booking + enquiry form + details
function ContactPage({ initialTab, productId }) {
  const { navigate } = useRouter();
  const [tab, setTab] = useState(initialTab || 'majlis');
  const [form, setForm] = useState({ name: '', email: '', phone: '', date: '', time: '', visitors: '2', interest: '', notes: '' });
  const [submitted, setSubmitted] = useState(false);
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const referenced = productId ? PRODUCTS.find((p) => p.id === productId) : null;

  return (
    <div className="page-enter">
      <style>{`
        .ct-hero { padding: 180px 0 50px; }
        .ct-hero__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; }
        @media (max-width: 760px) { .ct-hero__grid { grid-template-columns: 1fr; } }
        .ct-hero__title { font-family: var(--display, var(--serif)); font-weight: 300; font-size: clamp(56px, 9vw, 130px); line-height: 0.95; }
        .ct-hero__title em { color: var(--accent); }
        .ct-hero__sub { color: var(--fg-mute); font-size: 17px; max-width: 460px; line-height: 1.65; }

        .ct-tabs { display: flex; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
        .ct-tab { padding: 22px 28px 22px 0; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); cursor: pointer; }
        .ct-tab + .ct-tab { padding-left: 28px; border-left: 1px solid var(--rule); }
        .ct-tab.is-on { color: var(--accent); }

        .ct-grid { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px); display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
        @media (max-width: 880px) { .ct-grid { grid-template-columns: 1fr; } }

        .ct-form { display: flex; flex-direction: column; gap: 0; }
        .ct-form__row { padding: 22px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
        @media (max-width: 600px) { .ct-form__row { grid-template-columns: 1fr; gap: 12px; } }
        .ct-form__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); padding-top: 8px; }
        .ct-form input, .ct-form textarea, .ct-form select {
          width: 100%;
          background: transparent; color: var(--fg);
          border: none; border-bottom: 1px solid var(--rule-strong);
          padding: 12px 0; font-family: var(--sans); font-size: 16px;
          outline: none;
        }
        .ct-form input:focus, .ct-form textarea:focus, .ct-form select:focus { border-color: var(--accent); }
        .ct-form select option { background: var(--bg); }
        .ct-pills { display: flex; flex-wrap: wrap; gap: 8px; }
        .ct-pill {
          padding: 10px 16px;
          border: 1px solid var(--rule-strong);
          font-size: 12px; letter-spacing: 0.1em;
          transition: all 0.2s;
        }
        .ct-pill:hover { border-color: var(--accent); color: var(--accent); }
        .ct-pill.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

        .ct-submit { margin-top: 36px; }
        .ct-prod-tag {
          margin-bottom: 30px;
          padding: 16px 20px;
          background: var(--surface);
          border-left: 1px solid var(--accent);
          display: flex; gap: 16px; align-items: center;
        }
        .ct-prod-tag img { width: 60px; height: 60px; object-fit: contain; background: var(--bg); padding: 8px; }
        .ct-prod-tag__t { font-family: var(--display, var(--serif)); font-size: 18px; }
        .ct-prod-tag__s { color: var(--fg-mute); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

        /* Details column */
        .ct-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 24px; }
        .ct-card { padding: 28px; border: 1px solid var(--rule); background: var(--surface); }
        .ct-card__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
        .ct-card__line { padding: 12px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 14px; }
        .ct-card__line:last-child { border-bottom: none; }
        .ct-card__line span:first-child { color: var(--fg-mute); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
        .ct-card__line a { color: var(--fg); }
        .ct-card__line a:hover { color: var(--accent); }
        .ct-card__big { font-family: var(--display, var(--serif)); font-size: 22px; line-height: 1.2; margin-bottom: 6px; }
        .ct-card__big em { color: var(--accent); }

        .ct-done { padding: 80px 60px; text-align: center; background: var(--surface); border: 1px solid var(--rule); }
        .ct-done h3 { font-family: var(--display, var(--serif)); font-size: 48px; margin-bottom: 18px; }
        .ct-done h3 em { color: var(--accent); }
        .ct-done p { color: var(--fg-mute); max-width: 460px; margin: 0 auto 30px; line-height: 1.7; }
      `}</style>

      <div className="container ct-hero">
        <Reveal className="ct-hero__grid">
          <h1 className="ct-hero__title">Reach the <em>Majlis.</em></h1>
          <p className="ct-hero__sub">Book a private viewing, ask after a piece, or begin a conversation with the studio. Replies within one working day.</p>
        </Reveal>
      </div>

      <div className="container">
        <div className="ct-tabs">
          {[
            { id: 'majlis', label: 'Book a Viewing' },
            { id: 'enquire', label: 'General Enquiry' },
            { id: 'press', label: 'Press & Collaboration' },
          ].map((t) => (
            <div key={t.id} className={`ct-tab ${tab === t.id ? 'is-on' : ''}`} onClick={() => setTab(t.id)}>{t.label}</div>
          ))}
        </div>
      </div>

      <section className="container ct-grid">
        <div>
          {referenced && (
            <div className="ct-prod-tag">
              <img src={referenced.image} alt={referenced.name} />
              <div>
                <div className="ct-prod-tag__s">Referenced piece</div>
                <div className="ct-prod-tag__t">{referenced.name}</div>
              </div>
            </div>
          )}

          {submitted ? (
            <div className="ct-done">
              <h3>Sent with <em>care.</em></h3>
              <p>The studio will be in touch shortly{form.name ? `, ${form.name}` : ''}. For anything urgent, please use WhatsApp.</p>
              <button className="btn btn--ghost arrow" onClick={() => { setSubmitted(false); navigate('home'); }}>Return Home</button>
            </div>
          ) : (
            <form className="ct-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
              {tab === 'majlis' && (
                <>
                  <div className="ct-form__row">
                    <div className="ct-form__label">Preferred date</div>
                    <input type="date" value={form.date} onChange={(e) => update('date', e.target.value)} />
                  </div>
                  <div className="ct-form__row">
                    <div className="ct-form__label">Preferred time</div>
                    <div className="ct-pills">
                      {['10:00','11:30','13:00','15:00','16:30','18:00'].map((t) => (
                        <button type="button" key={t} className={`ct-pill ${form.time === t ? 'is-on' : ''}`} onClick={() => update('time', t)}>{t}</button>
                      ))}
                    </div>
                  </div>
                  <div className="ct-form__row">
                    <div className="ct-form__label">Visitors</div>
                    <div className="ct-pills">
                      {['1','2','3','4+'].map((n) => (
                        <button type="button" key={n} className={`ct-pill ${form.visitors === n ? 'is-on' : ''}`} onClick={() => update('visitors', n)}>{n}</button>
                      ))}
                    </div>
                  </div>
                  <div className="ct-form__row">
                    <div className="ct-form__label">Interest</div>
                    <div className="ct-pills">
                      {COLLECTIONS.map((c) => (
                        <button type="button" key={c.id} className={`ct-pill ${form.interest === c.name ? 'is-on' : ''}`} onClick={() => update('interest', c.name)}>{c.name}</button>
                      ))}
                      <button type="button" className={`ct-pill ${form.interest === 'Bespoke' ? 'is-on' : ''}`} onClick={() => update('interest', 'Bespoke')}>Bespoke</button>
                    </div>
                  </div>
                </>
              )}
              <div className="ct-form__row">
                <div className="ct-form__label">Your name</div>
                <input value={form.name} onChange={(e) => update('name', e.target.value)} placeholder="Full name" />
              </div>
              <div className="ct-form__row">
                <div className="ct-form__label">Email</div>
                <input type="email" value={form.email} onChange={(e) => update('email', e.target.value)} placeholder="you@example.com" />
              </div>
              <div className="ct-form__row">
                <div className="ct-form__label">Phone / WhatsApp</div>
                <input value={form.phone} onChange={(e) => update('phone', e.target.value)} placeholder="+971 …" />
              </div>
              <div className="ct-form__row">
                <div className="ct-form__label">{tab === 'majlis' ? 'Anything for us' : 'Your message'}</div>
                <textarea rows="4" value={form.notes} onChange={(e) => update('notes', e.target.value)} placeholder={tab === 'press' ? 'Publication, deadline, request' : 'Tell us a little about why'} />
              </div>
              <div className="ct-submit">
                <button type="submit" className="btn btn--primary">
                  {tab === 'majlis' ? 'Request Viewing' : 'Send Enquiry'}
                </button>
              </div>
            </form>
          )}
        </div>

        <div className="ct-side">
          <div className="ct-card">
            <div className="ct-card__label">The Majlis</div>
            <div className="ct-card__big">A private viewing at <em>d3</em>.</div>
            <p style={{ color: 'var(--fg-mute)', fontSize: 14, marginTop: 8, lineHeight: 1.6 }}>
              An unhurried introduction to the house — pieces brought out for you, served quietly, with no pressure to decide that day.
            </p>
            <div style={{ marginTop: 20 }}>
              <div className="ct-card__line"><span>Address</span><span style={{ textAlign: 'right' }}>{CONTACT.address}<br/>{CONTACT.district}</span></div>
              <div className="ct-card__line"><span>P.O. Box</span><span>{CONTACT.pobox.replace('P.O. Box ', '')}</span></div>
            </div>
          </div>
          <div className="ct-card">
            <div className="ct-card__label">Direct Lines</div>
            <div className="ct-card__line"><span>Email</span><a href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a></div>
            <div className="ct-card__line"><span>Landline</span><a href={`tel:${CONTACT.landline.replace(/\s/g,'')}`}>{CONTACT.landline}</a></div>
            <div className="ct-card__line"><span>Mobile</span><a href={`tel:${CONTACT.mobile.replace(/\s/g,'')}`}>{CONTACT.mobile}</a></div>
            <div className="ct-card__line"><span>WhatsApp</span><a href={CONTACT.whatsapp} target="_blank" rel="noreferrer">Open chat →</a></div>
          </div>
          <div className="ct-card">
            <div className="ct-card__label">Social</div>
            <div className="ct-card__line"><span>Instagram</span><a href={CONTACT.instagram} target="_blank" rel="noreferrer">@gafla</a></div>
            <div className="ct-card__line"><span>Facebook</span><a href={CONTACT.facebook} target="_blank" rel="noreferrer">GaflaJewellery</a></div>
            <div className="ct-card__line"><span>Snapchat</span><a href={CONTACT.snapchat} target="_blank" rel="noreferrer">gaflajewellery</a></div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactPage });