{MONTHS[view.getMonth()]} {view.getFullYear()}

{DOW.map((d) =>

{d}

)}

{grid.map((d, i) => { if (!d) return

; const ok = isSelectable(d); const sel = sameDay(selected, d); return ( ); })}

); } /* ------------------------------- Stepper ------------------------------- */ function Stepper({ step }) { const steps = ["Date & time", "Your details", "Confirmed"]; return (

{steps.map((label, i) => { const n = i + 1; const done = step > n; const active = step === n; return (

{done ? : n}

{i < steps.length - 1 &&

} ); })}

); } /* ---------------------------- Summary Card ----------------------------- */ function SummaryCard({ date, time, tz }) { return (

MedReachIQ

Discovery Call

30 minutes

Zoom video call

{tz}

Your selection

{date ?

{fmtLongDate(date)}

{time ? time : "Select a time"}

No date selected yet

}

What you'll get

); } /* --------------------------- Field components -------------------------- */ function Field({ label, required, error, children }) { return ( {label}{required && *} {children} {error && {error}} ); } const inputCls = "w-full rounded-lg border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-ink placeholder:text-slate-400 focus:outline-none focus:border-teal2 focus:ring-2 focus:ring-teal3/25 transition"; /* ----------------------------- Booking flow ---------------------------- */ function Booking() { const tz = "Eastern Time (ET)"; const [step, setStep] = useState(1); const [date, setDate] = useState(null); const [slot, setSlot] = useState(null); // index into TIME_SLOTS const [form, setForm] = useState({ name: "", email: "", phone: "", org: "", role: "", topics: [], notes: "" }); const [errors, setErrors] = useState({}); const timeLabel = slot != null ? fmtTime(TIME_SLOTS[slot].h, TIME_SLOTS[slot].m) : null; const set = (k, v) => setForm((f) => ({ ...f, [k]: v })); const toggleTopic = (t) => setForm((f) => ({ ...f, topics: f.topics.includes(t) ? f.topics.filter((x) => x !== t) : [...f.topics, t] })); const goDetails = () => {if (date && slot != null) setStep(2);}; const validate = () => { const e = {}; if (!form.name.trim()) e.name = "Please enter your name."; if (!form.email.trim()) e.email = "Email is required.";else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Enter a valid email."; setErrors(e); return Object.keys(e).length === 0; }; const confirm = () => {if (validate()) {setStep(3);window.scrollTo({ top: 0, behavior: "smooth" });}}; const reset = () => { setStep(1);setDate(null);setSlot(null); setForm({ name: "", email: "", phone: "", org: "", role: "", topics: [], notes: "" }); setErrors({}); }; const downloadIcs = () => { const s = TIME_SLOTS[slot]; const start = new Date(date);start.setHours(s.h, s.m, 0, 0); const end = new Date(start.getTime() + 30 * 60000); const pad = (n) => String(n).padStart(2, "0"); const f = (d) => `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}T${pad(d.getHours())}${pad(d.getMinutes())}00`; const ics = [ "BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//MedReachIQ//Discovery Call//EN", "BEGIN:VEVENT", `UID:${Date.now()}@medreachiq`, `DTSTART:${f(start)}`, `DTEND:${f(end)}`, "SUMMARY:MedReachIQ Discovery Call (Zoom)", "DESCRIPTION:A Zoom link will be included in your confirmation email.", "LOCATION:Zoom", "END:VEVENT", "END:VCALENDAR"].join("\r\n"); const url = URL.createObjectURL(new Blob([ics], { type: "text/calendar" })); const a = document.createElement("a");a.href = url;a.download = "medreachiq-discovery-call.ics"; document.body.appendChild(a);a.click();a.remove();URL.revokeObjectURL(url); }; const firstName = (() => { const parts = form.name.trim().split(/\s+/).filter(Boolean); const titles = ["dr", "dr.", "mr", "mr.", "ms", "ms.", "mrs", "mrs.", "prof", "prof.", "dr.med"]; const named = parts.find((p) => !titles.includes(p.toLowerCase())); return named || parts[0] || "there"; })(); /* ---- Confirmation ---- */ if (step === 3) { return (

You're booked, {firstName}!

A calendar invite with your Zoom link is on its way to {form.email}.

Discovery Call · Zoom

30 minutes

{fmtLongDate(date)}

{timeLabel} · {tz}

{form.topics.length > 0 &&

{form.topics.join(", ")}

}

); } /* ---- Steps 1 & 2 ---- */ return (

{step === 2 &&

}

{step === 1 &&

Pick a date

{setDate(d);setSlot(null);}} />

Available times

{date ?

{TIME_SLOTS.map((s, i) => { const sel = slot === i; return ( ); })}

Select a date to see open times

}

} {step === 2 &&

set("name", e.target.value)} placeholder="Dr. Jane Smith" /> set("email", e.target.value)} placeholder="jane@institution.org" /> set("phone", e.target.value)} placeholder="(555) 123-4567" /> set("org", e.target.value)} placeholder="Accredited CME provider" />

What would you like to cover?

{TOPICS.map((t) => { const on = form.topics.includes(t); return ( ); })}

set("notes", e.target.value)}
                  placeholder="Tell us about your programs, specialties, or goals so we can tailor the call…" />
                </div>

<div className="flex items-center justify-between gap-4 mt-8 pt-6 border-t border-slate-100">
                  <span className="text-xs text-slate-400 flex items-center gap-1.5"><Icon name="lock" size={13} /> HIPAA-aware. We never sell your data.</span>
                  <button onClick={confirm} className="px-6 py-3 rounded-lg font-bold bg-gradient-to-br from-gold2 to-gold text-ink shadow-md hover:shadow-lg transition lift flex items-center gap-2 shrink-0">
                    Confirm booking <Icon name="check" size={18} />
                  </button>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);
}

/* ------------------------------- Page ---------------------------------- */
function ContactPage() {
  useEffect(() => {
    document.title = "Contact | MedReachIQ";
  }, []);
  return (
    <div className="bg-white text-ink font-sans antialiased selection:bg-teal2 selection:text-white">
      <Nav />
      <ContactHero />
      <Booking />
      <Footer />
    </div>);
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);