{label} {value && !expanded ? ( ) : (

{monthName}

{["S","M","T","W","T","F","S"].map((d, i) =>

{d}

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

; const dt = new Date(view.getFullYear(), view.getMonth(), d); const disabled = dt < today || dt > maxDate; const sel = value && dt.getTime() === value.getTime(); return ; })}

)}

); } function ReachChip({ label, icon, on, onClick }) { return (

{ if (e.key === " " || e.key === "Enter") { e.preventDefault(); onClick(); } }} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 12px", borderRadius: 99, cursor: "pointer", userSelect: "none", fontSize: 13, fontWeight: 600, transition: "all .15s", background: on ? "var(--bp-cyan-500)" : "var(--surface-inset)", color: on ? "#fff" : "var(--text-muted)", border: `1px solid ${on ? "var(--bp-cyan-500)" : "var(--border-subtle)"}` }}> {on ? "\u2713" : icon}{label}

); } function BookingModal({ open, onClose, prefill }) { const [step, setStep] = React.useState(0); const [dial, setDial] = React.useState(BP_DIAL_CODES[0]); const [date, setDate] = React.useState(null); const [trip, setTrip] = React.useState(""); const [boat, setBoat] = React.useState(""); const [guests, setGuests] = React.useState("6"); const [first, setFirst] = React.useState(""); const [last, setLast] = React.useState(""); const [email, setEmail] = React.useState(""); const [phone, setPhone] = React.useState(""); const [canCall, setCanCall] = React.useState(true); const [canText, setCanText] = React.useState(true); const [sending, setSending] = React.useState(false); const [sendError, setSendError] = React.useState(""); const TRIP_LABELS = { "full-basic": "Full-Day · Basic", "full-ai": "Full-Day · All-Inclusive", "half-basic": "Half-Day · Basic", "half-ai": "Half-Day · All-Inclusive", "sightseeing": "Sightseeing" }; React.useEffect(() => { if (open) { setStep(0); setTrip(prefill?.trip ?? ""); setBoat(prefill?.boat ?? ""); setDate(null); setGuests("6"); setFirst(""); setLast(""); setEmail(""); setPhone(""); setCanCall(true); setCanText(true); } }, [open]); if (!open) return null; const steps = ["Trip", "Details", "Confirm"]; const done = step === 3; const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim()); const phoneOk = phone.replace(/\D/g, "").length >= 7; const reachOk = canCall || canText; const phoneReach = [canCall && "Calls", canText && "Texts"].filter(Boolean).join(" & ") || "—"; const stepValid = step === 0 ? Boolean(trip && boat && date && guests) : step === 1 ? Boolean(first.trim() && last.trim() && emailOk && phoneOk && reachOk) : true; const dateLabel = date ? date.toLocaleDateString("en-US", { weekday: "short", month: "long", day: "numeric", year: "numeric" }) : "—"; const sendRequest = async () => { if (window.BOOKING_ENDPOINT) { setSending(true); setSendError(""); try { const r = await fetch(window.BOOKING_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ trip: TRIP_LABELS[trip] || "", boat, date: dateLabel, guests, first, last, name: [first, last].filter(Boolean).join(" "), email, phone: phone ? dial.d + " " + phone : "", phoneReach, canCall, canText }), }); if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || "Request failed"); setStep(3); } catch (err) { setSendError("We couldn't send that. Please call or email us and we'll take it from there."); } finally { setSending(false); } return; } mailtoFallback(); setStep(3); }; const mailtoFallback = () => { const lines = [ "NEW BOOKING REQUEST — Blue Phoenix Sportfishing", "", "TRIP", " Trip type: " + (TRIP_LABELS[trip] || "—"), " Charter: " + (boat || "—"), " Date: " + dateLabel, " Guests: " + guests, " Departure: TBD (recommended 6–7 AM)", "", "GUEST", " First name: " + (first || "—"), " Last name: " + (last || "—"), " Email: " + (email || "—"), " Phone: " + (phone ? dial.d + " " + phone : "—"), " Reachable: " + phoneReach, "", "Submitted from bluephoenixsportfishing.com", ]; const subject = "Booking request · " + (TRIP_LABELS[trip] || "Charter") + " · " + dateLabel; window.location.href = "mailto:info@bluephoenixsportfishing.com?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(lines.join("\n")); }; return (

e.stopPropagation()} style={{ width: 480, maxWidth: "100%", maxHeight: "92vh", overflowY: "auto", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg), var(--shadow-glow)" }}>

Book A Charter

Booking Request

{steps.map((s, i) => (

{i + 1}

{s}

))}

{step === 0 && <>

☀Recommended departure: 6–7 AM

} {step === 1 && <>

setFirst(e.target.value)} style={{ flex: 1 }} /> setLast(e.target.value)} style={{ flex: 1 }} />

setEmail(e.target.value)} />

setPhone(e.target.value)} style={{ flex: 1 }} />

This number can receive setCanCall(!canCall)} /> setCanText(!canText)} />

} {step === 2 &&

Request Summary

Trip{TRIP_LABELS[trip] || "—"}

Charter{boat || "—"}

Date{dateLabel}

Guests{guests}

DepartureTBD (recommended 6–7 AM)

Name{[first, last].filter(Boolean).join(" ") || "—"}

Email{email || "—"}

Phone{phone ? dial.d + " " + phone : "—"}

Reachable by{phoneReach}

} {step === 3 &&

✓

Thank You!

Your request is on its way. Once it reaches us, our team will contact you shortly to confirm your date and finalize the details.

+1 206 446 0449
info@bluephoenixsportfishing.com

} {!done && !stepValid &&

{step === 0 ? "Choose a trip, charter, date and guest count to continue." : !reachOk && phoneOk ? "Pick at least one way we can reach that number — calls or texts." : "Add your name, a valid email and a phone number to continue."}

} {sendError &&

{sendError}

}

{step > 0 && !done && }

); } window.BookingModal = BookingModal;