/* global React, Reveal, PhiMark, ArchPattern, TREATMENT_DATA */

// =======================================================================
//  CONTACT PAGE
// =======================================================================

function ContactPage({ locale, onBook }) {
  const ar = locale === 'ar';

  return (
    <main>
      <section style={{ position: 'relative', minHeight: '64vh', background: 'var(--bone)', padding: '160px 0 100px', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.4 }}>
          <img src="media/contact-bg-01.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, var(--bone) 0%, rgba(242,237,227,0.7) 60%, var(--bone) 100%)' }} />
        </div>

        <div className="container" style={{ position: 'relative' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>φ &nbsp; {ar ? 'تواصل' : 'Contact'}</div>
          <h1 className="serif" style={{ fontSize: 'clamp(3.5rem, 6vw, 6rem)', lineHeight: 0.95, fontWeight: 300, marginBottom: 48, maxWidth: 1000 }}>
            {ar ? <>إبدأ بمحادثة <em className="ital">هادئة</em>.</> : <>Begin with a <em className="ital">conversation</em>.</>}
          </h1>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, maxWidth: 1100, paddingTop: 48, borderTop: '1px solid var(--line)' }}>
            {[
              ['Telephone', '+971 4 456 2024', 'tel:+97144562024'],
              ['WhatsApp', '+971 58 685 8562', 'https://wa.me/971586858562'],
              ['Email', 'dubai@ouronyx.com', 'mailto:dubai@ouronyx.com'],
              ['Address', 'Unit C201, The Opus, Business Bay', null],
            ].map(([k, v, href]) => (
              <div key={k}>
                <div className="mono" style={{ color: 'var(--muted)', marginBottom: 10 }}>{k}</div>
                {href ? (
                  <a href={href} style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: '1rem', fontFamily: 'var(--serif)', fontStyle: 'italic' }}>{v}</a>
                ) : (
                  <span style={{ color: 'var(--ink)', fontSize: '1rem', fontFamily: 'var(--serif)', fontStyle: 'italic' }}>{v}</span>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Inline form */}
      <section style={{ background: 'var(--porcelain)', padding: '100px 0', borderTop: '1px solid var(--line)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{ar ? 'نموذج سريع' : 'Quick enquiry'}</div>
              <h2 className="serif" style={{ fontSize: '2.6rem', lineHeight: 1.05, marginBottom: 24, fontWeight: 300 }}>
                {ar ? <>أو ابعث برسالة <em className="ital">قصیرة</em>.</> : <>Or send a short <em className="ital">message</em>.</>}
              </h2>
              <p style={{ color: 'var(--ink-soft)', fontSize: '0.98rem', lineHeight: 1.7 }}>
                {ar
                  ? 'لا نطلب أي بیانات طبیة في هذه المرحلة. سنرد خلال یوم عمل واحد لترتیب استشارة مع طبیب.'
                  : 'We do not ask for medical detail at this stage. We will reply within one working day to arrange a doctor-led consultation.'}
              </p>
              <button onClick={onBook} className="btn btn-olive" style={{ marginTop: 32 }}>
                {ar ? 'حجز خطوة بخطوة' : 'Use the guided flow'} →
              </button>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <QuickForm ar={ar} />
          </Reveal>
        </div>
      </section>
    </main>
  );
}

function QuickForm({ ar }) {
  const [sent, setSent] = React.useState(false);
  if (sent) {
    return (
      <div style={{ background: 'var(--bone)', padding: 40, border: '1px solid var(--line)', textAlign: 'center' }}>
        <PhiMark size={48} color="var(--olive)" />
        <h3 className="serif" style={{ fontSize: '1.8rem', marginTop: 20, marginBottom: 12 }}>{ar ? 'شكراً' : 'Thank you'}</h3>
        <p style={{ color: 'var(--ink-soft)' }}>{ar ? 'سنتواصل خلال یوم عمل واحد.' : 'We will reply within one working day.'}</p>
      </div>
    );
  }
  return (
    <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ background: 'var(--bone)', padding: 40, border: '1px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div className="field"><label>{ar ? 'الاسم' : 'Name'}</label><input required type="text" /></div>
        <div className="field"><label>{ar ? 'البلد' : 'Country'}</label><input required type="text" placeholder="United Arab Emirates" /></div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div className="field"><label>{ar ? 'البرید الإلكتروني' : 'Email'}</label><input required type="email" /></div>
        <div className="field"><label>{ar ? 'الهاتف' : 'Phone / WhatsApp'}</label><input required type="tel" /></div>
      </div>
      <div className="field">
        <label>{ar ? 'الاهتمام' : 'Treatment of interest'}</label>
        <select>
          <option>Skin Quality</option>
          <option>Facial Structure</option>
          <option>Hair Restoration</option>
          <option>Unsure — advise me</option>
        </select>
      </div>
      <div className="field"><label>{ar ? 'ملاحظات' : 'Message (optional)'}</label><textarea rows="3" /></div>
      <button type="submit" className="btn btn-olive" style={{ alignSelf: 'flex-start' }}>
        {ar ? 'إرسال' : 'Send enquiry'}
      </button>
      <div className="mono" style={{ fontSize: '0.6rem', color: 'var(--muted)' }}>
        {ar ? 'لا نطلب معلومات طبیة هنا. سرّیة تامة.' : 'NO MEDICAL DETAIL REQUESTED AT THIS STAGE · PRIVATE'}
      </div>
    </form>
  );
}

// =======================================================================
//  BOOKING MODAL — multi-step consultation flow
// =======================================================================

function BookingModal({ open, onClose, locale }) {
  const ar = locale === 'ar';
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    pillar: null, treatment: null, date: null, time: null, name: '', email: '', phone: '', country: 'United Arab Emirates', notes: '',
  });
  const [submitting, setSubmitting] = React.useState(false);
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    if (!open) {
      // reset after close
      const t = setTimeout(() => { setStep(0); setDone(false); setData({ pillar: null, treatment: null, date: null, time: null, name: '', email: '', phone: '', country: 'United Arab Emirates', notes: '' }); }, 400);
      return () => clearTimeout(t);
    }
  }, [open]);

  const next = () => setStep((s) => Math.min(s + 1, 4));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  const submit = () => {
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); setDone(true); }, 1100);
  };

  const stepLabels = [
    ar ? 'الركيزة' : 'Pillar',
    ar ? 'العلاج' : 'Focus',
    ar ? 'الوقت' : 'When',
    ar ? 'التفاصيل' : 'Details',
    ar ? 'التأكيد' : 'Confirm',
  ];

  return (
    <div className={`modal-overlay ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        {/* Left rail — context */}
        <div style={{ background: 'var(--olive-deep)', color: 'var(--bone)', padding: '48px 40px', position: 'relative', overflow: 'hidden' }}>
          <ArchPattern color="rgba(232,214,168,0.2)" opacity={1} />
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
            <div>
              <PhiMark size={36} color="#E8D6A8" />
              <div className="mono" style={{ marginTop: 16, color: 'rgba(232,214,168,0.7)', fontSize: '0.65rem', letterSpacing: '0.22em' }}>OURONYX DUBAI · CONSULTATION</div>
            </div>
            <h2 className="serif" style={{ fontSize: '2.4rem', lineHeight: 1.1, margin: '36px 0', fontWeight: 300, color: 'var(--bone)' }}>
              {done ? (ar ? 'شكراً.' : <>Thank <em className="ital">you</em>.</>) : (ar ? <>إبدأ بمحادثة هادئة.</> : <>A quiet, doctor-led <em className="ital">conversation</em>.</>)}
            </h2>
            <p style={{ color: 'rgba(242,237,227,0.7)', fontSize: '0.92rem', lineHeight: 1.6, marginBottom: 'auto' }}>
              {done
                ? (ar ? 'سنرد علیك من العیادة خلال یوم عمل واحد.' : 'A member of the Dubai team will be in touch within one working day.')
                : (ar ? 'لن نطلب أي معلومات طبیة في هذه المرحلة. سنرد لترتیب موعد مع طبیب.' : 'We won’t ask for any medical detail here. We’ll reach out to arrange a time with one of our doctors.')}
            </p>

            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(232,214,168,0.18)', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div className="mono" style={{ fontSize: '0.6rem', letterSpacing: '0.22em', color: 'rgba(232,214,168,0.7)' }}>STEP</div>
              <div className="serif" style={{ fontSize: '2rem', fontStyle: 'italic', color: 'var(--bone)', fontWeight: 300 }}>
                {done ? '✓' : `0${step + 1}`} <span style={{ color: 'rgba(242,237,227,0.4)' }}> / 05</span>
              </div>
              <div style={{ color: 'rgba(242,237,227,0.75)', fontSize: '0.85rem' }}>{stepLabels[step]}</div>
            </div>
          </div>
        </div>

        {/* Right pane — flow */}
        <div style={{ padding: 40, display: 'flex', flexDirection: 'column', maxHeight: '86vh', overflow: 'auto', background: 'var(--bone)' }}>
          <button onClick={onClose} style={{ alignSelf: 'flex-end', background: 'none', border: 0, padding: 0, cursor: 'pointer', color: 'var(--muted)', fontSize: '1.4rem', lineHeight: 1 }}>×</button>

          {done ? (
            <DoneState ar={ar} data={data} />
          ) : (
            <div style={{ marginTop: 12, flex: 1 }}>
              {/* Progress dots */}
              <div style={{ display: 'flex', gap: 6, marginBottom: 36 }}>
                {[0,1,2,3,4].map((i) => (
                  <div key={i} style={{ flex: 1, height: 2, background: i <= step ? 'var(--olive)' : 'var(--line)' }} />
                ))}
              </div>

              {step === 0 && <StepPillar ar={ar} data={data} setData={setData} next={next} />}
              {step === 1 && <StepFocus ar={ar} data={data} setData={setData} next={next} back={back} />}
              {step === 2 && <StepWhen ar={ar} data={data} setData={setData} next={next} back={back} />}
              {step === 3 && <StepDetails ar={ar} data={data} setData={setData} next={next} back={back} />}
              {step === 4 && <StepConfirm ar={ar} data={data} submit={submit} back={back} submitting={submitting} />}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// === STEP COMPONENTS ===

function StepPillar({ ar, data, setData, next }) {
  const pillars = Object.entries(TREATMENT_DATA);
  return (
    <>
      <h3 className="serif" style={{ fontSize: '1.8rem', marginBottom: 8, fontWeight: 400 }}>{ar ? 'مَا الذي تودین التركیز علیه؟' : 'Where would you like to focus?'}</h3>
      <p style={{ color: 'var(--muted)', fontSize: '0.92rem', marginBottom: 28 }}>{ar ? 'یمكنك تغییر هذا في الاستشارة.' : 'You can change this in the consultation.'}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {pillars.map(([k, p]) => (
          <button key={k} onClick={() => { setData({ ...data, pillar: k }); setTimeout(next, 250); }} style={{
            background: data.pillar === k ? 'var(--ink)' : 'transparent',
            color: data.pillar === k ? 'var(--bone)' : 'var(--ink)',
            border: '1px solid ' + (data.pillar === k ? 'var(--ink)' : 'var(--line)'),
            padding: '20px 22px', textAlign: 'left', cursor: 'pointer',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', transition: 'all 0.25s',
          }}>
            <div>
              <div className="serif" style={{ fontSize: '1.4rem', marginBottom: 4 }}>{ar ? p.nameAr : p.name}</div>
              <div style={{ fontSize: '0.82rem', color: data.pillar === k ? 'rgba(242,237,227,0.7)' : 'var(--muted)' }}>{ar ? p.blurbAr : p.blurb.slice(0, 70) + '…'}</div>
            </div>
            <span className="serif" style={{ fontSize: '1.4rem', fontStyle: 'italic', color: data.pillar === k ? '#E8D6A8' : 'var(--champagne)' }}>{p.no}</span>
          </button>
        ))}
        <button onClick={() => { setData({ ...data, pillar: 'unsure' }); setTimeout(next, 250); }} style={{
          background: data.pillar === 'unsure' ? 'var(--olive)' : 'transparent',
          color: data.pillar === 'unsure' ? 'var(--bone)' : 'var(--ink-soft)',
          border: '1px solid ' + (data.pillar === 'unsure' ? 'var(--olive)' : 'var(--line)'),
          padding: '16px 22px', textAlign: 'left', cursor: 'pointer', fontStyle: 'italic',
          fontFamily: 'var(--serif)', fontSize: '1.1rem',
        }}>
          {ar ? 'لست متأكدة — انصحوني' : 'I’m not sure — please advise'}
        </button>
      </div>
    </>
  );
}

function StepFocus({ ar, data, setData, next, back }) {
  const opts = data.pillar && data.pillar !== 'unsure' ? TREATMENT_DATA[data.pillar].devices : ['Skin assessment', 'Treatment plan review', 'Hair-loss assessment', 'General consultation'];
  return (
    <>
      <h3 className="serif" style={{ fontSize: '1.8rem', marginBottom: 8, fontWeight: 400 }}>{ar ? 'ما الذي تفكرین فیه؟' : 'What did you have in mind?'}</h3>
      <p style={{ color: 'var(--muted)', fontSize: '0.92rem', marginBottom: 28 }}>{ar ? 'اختیار واحد — وسیشكل نقطة البدایة لیس أكثر.' : 'Pick one. It only shapes the starting point of the conversation.'}</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        {opts.map((o) => (
          <button key={o} onClick={() => setData({ ...data, treatment: o })} style={{
            background: data.treatment === o ? 'var(--olive)' : 'transparent',
            color: data.treatment === o ? 'var(--bone)' : 'var(--ink)',
            border: '1px solid ' + (data.treatment === o ? 'var(--olive)' : 'var(--line)'),
            padding: '14px 18px', textAlign: 'left', cursor: 'pointer', fontSize: '0.92rem',
            transition: 'all 0.2s',
          }}>{o}</button>
        ))}
      </div>
      <NavButtons ar={ar} back={back} next={next} canNext={!!data.treatment} />
    </>
  );
}

function StepWhen({ ar, data, setData, next, back }) {
  // Build calendar for next 21 days
  const today = new Date(2026, 4, 25);
  const days = Array.from({ length: 21 }, (_, i) => {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    return d;
  });

  const times = ['10:00', '11:00', '12:00', '14:00', '15:00', '16:00', '17:00'];

  const fmtDay = (d) => d.toLocaleDateString('en-GB', { weekday: 'short' });
  const fmtDate = (d) => d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });

  return (
    <>
      <h3 className="serif" style={{ fontSize: '1.8rem', marginBottom: 8, fontWeight: 400 }}>{ar ? 'متى یناسبك؟' : 'When suits you?'}</h3>
      <p style={{ color: 'var(--muted)', fontSize: '0.92rem', marginBottom: 24 }}>{ar ? 'سنؤكد التوقیت — هذه تفضیلاتك فقط.' : 'These are just preferences. We’ll confirm with you.'}</p>

      <div className="mono" style={{ color: 'var(--muted)', marginBottom: 10 }}>{ar ? 'یوم' : 'Day'}</div>
      <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 12, marginBottom: 28 }}>
        {days.map((d, i) => {
          const key = d.toISOString();
          const selected = data.date === key;
          return (
            <button key={key} onClick={() => setData({ ...data, date: key })} style={{
              background: selected ? 'var(--ink)' : 'transparent',
              color: selected ? 'var(--bone)' : 'var(--ink)',
              border: '1px solid ' + (selected ? 'var(--ink)' : 'var(--line)'),
              padding: '12px 14px', cursor: 'pointer', flexShrink: 0,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              minWidth: 64,
            }}>
              <span className="mono" style={{ fontSize: '0.62rem', color: selected ? 'rgba(242,237,227,0.6)' : 'var(--muted)' }}>{fmtDay(d)}</span>
              <span className="serif" style={{ fontSize: '0.95rem', fontStyle: 'italic' }}>{fmtDate(d)}</span>
            </button>
          );
        })}
      </div>

      <div className="mono" style={{ color: 'var(--muted)', marginBottom: 10 }}>{ar ? 'وقت' : 'Time (GST)'}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {times.map((t) => {
          const selected = data.time === t;
          return (
            <button key={t} onClick={() => setData({ ...data, time: t })} style={{
              background: selected ? 'var(--olive)' : 'transparent',
              color: selected ? 'var(--bone)' : 'var(--ink)',
              border: '1px solid ' + (selected ? 'var(--olive)' : 'var(--line)'),
              padding: '12px 14px', cursor: 'pointer',
              fontFamily: 'var(--serif)', fontSize: '1.05rem', fontStyle: 'italic',
            }}>{t}</button>
          );
        })}
      </div>

      <NavButtons ar={ar} back={back} next={next} canNext={!!data.date && !!data.time} />
    </>
  );
}

function StepDetails({ ar, data, setData, next, back }) {
  const canNext = data.name && data.email && data.phone;
  return (
    <>
      <h3 className="serif" style={{ fontSize: '1.8rem', marginBottom: 8, fontWeight: 400 }}>{ar ? 'كیف نتواصل معك؟' : 'How shall we reach you?'}</h3>
      <p style={{ color: 'var(--muted)', fontSize: '0.92rem', marginBottom: 28 }}>{ar ? 'لا معلومات طبیة في هذه المرحلة.' : 'No medical detail at this stage.'}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div className="field"><label>{ar ? 'الاسم الكامل' : 'Full name'}</label><input type="text" value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} /></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div className="field"><label>{ar ? 'البرید الإلكتروني' : 'Email'}</label><input type="email" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} /></div>
          <div className="field"><label>{ar ? 'الهاتف' : 'Phone / WhatsApp'}</label><input type="tel" value={data.phone} onChange={(e) => setData({ ...data, phone: e.target.value })} /></div>
        </div>
        <div className="field"><label>{ar ? 'البلد' : 'Country'}</label><input type="text" value={data.country} onChange={(e) => setData({ ...data, country: e.target.value })} /></div>
        <div className="field"><label>{ar ? 'ملاحظات' : 'Anything to mention (optional)'}</label><textarea rows="2" value={data.notes} onChange={(e) => setData({ ...data, notes: e.target.value })} /></div>
      </div>
      <NavButtons ar={ar} back={back} next={next} canNext={canNext} />
    </>
  );
}

function StepConfirm({ ar, data, submit, back, submitting }) {
  const pillarName = data.pillar === 'unsure' ? 'Unsure — advise me' : TREATMENT_DATA[data.pillar]?.name;
  const dateStr = data.date ? new Date(data.date).toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' }) : '';

  return (
    <>
      <h3 className="serif" style={{ fontSize: '1.8rem', marginBottom: 8, fontWeight: 400 }}>{ar ? 'مراجعة' : 'A final review.'}</h3>
      <p style={{ color: 'var(--muted)', fontSize: '0.92rem', marginBottom: 28 }}>{ar ? 'ستتم تأكید الموعد من قبل العیادة.' : 'The clinic will confirm your appointment by phone or WhatsApp.'}</p>

      <div style={{ background: 'var(--porcelain)', border: '1px solid var(--line)', padding: 24, display: 'grid', gridTemplateColumns: '120px 1fr', gap: '14px 20px', fontSize: '0.92rem', marginBottom: 28 }}>
        {[
          ['Pillar', pillarName],
          ['Focus', data.treatment],
          ['Preferred', `${dateStr} · ${data.time}`],
          ['Name', data.name],
          ['Contact', `${data.email} · ${data.phone}`],
          ['Country', data.country],
          data.notes ? ['Notes', data.notes] : null,
        ].filter(Boolean).map(([k, v]) => (
          <React.Fragment key={k}>
            <div className="mono" style={{ color: 'var(--muted)' }}>{k}</div>
            <div>{v}</div>
          </React.Fragment>
        ))}
      </div>

      <div className="mono" style={{ fontSize: '0.62rem', color: 'var(--muted)', marginBottom: 28, lineHeight: 1.6 }}>
        {ar
          ? 'بإرسال هذا النموذج، توافقین على التواصل من فریق العیادة. لا یتم جمع أي بیانات طبیة في هذه المرحلة.'
          : 'By submitting, you consent to the clinic contacting you regarding this enquiry. No medical detail has been collected at this stage. This enquiry does not constitute a booking until confirmed by the clinic.'}
      </div>

      <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between' }}>
        <button onClick={back} className="btn btn-ghost" disabled={submitting}>{ar ? 'رجوع' : 'Back'}</button>
        <button onClick={submit} className="btn btn-olive" disabled={submitting} style={{ minWidth: 200, justifyContent: 'center' }}>
          {submitting ? <><span className="dot" /><span className="dot" /><span className="dot" /></> : (ar ? 'تأكید الطلب' : 'Confirm enquiry')}
        </button>
      </div>
    </>
  );
}

function NavButtons({ ar, back, next, canNext }) {
  return (
    <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between', marginTop: 36 }}>
      <button onClick={back} className="btn btn-ghost">{ar ? 'رجوع' : 'Back'}</button>
      <button onClick={next} className="btn btn-olive" disabled={!canNext} style={{ opacity: canNext ? 1 : 0.4, cursor: canNext ? 'pointer' : 'not-allowed' }}>
        {ar ? 'متابعة' : 'Continue'} →
      </button>
    </div>
  );
}

function DoneState({ ar, data }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', padding: '20px 0' }}>
      <PhiMark size={68} color="var(--olive)" />
      <h3 className="serif" style={{ fontSize: '2.4rem', marginTop: 24, marginBottom: 16, fontWeight: 300 }}>{ar ? 'تم استلام طلبك.' : <>Your enquiry is <em className="ital">in</em>.</>}</h3>
      <p style={{ color: 'var(--ink-soft)', maxWidth: 400, margin: '0 auto 32px', lineHeight: 1.6 }}>
        {ar
          ? `سنتواصل معك على ${data.email} أو ${data.phone} لتأكید موعدك.`
          : <>We’ll reach out at <em>{data.email}</em> or <em>{data.phone}</em> within one working day to confirm.</>}
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="https://wa.me/971586858562" className="btn btn-olive">WhatsApp now</a>
        <a href="tel:+97144562024" className="btn btn-ghost">Call clinic</a>
      </div>
    </div>
  );
}

Object.assign(window, { ContactPage, BookingModal });
