"use client"; /* eslint-disable @next/next/no-img-element -- served through /api/media with our own responsive variants */ import * as React from "react"; import Link from "next/link"; import { useConvex, useQuery } from "convex/react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ArrowRight, BadgeCheck, Bath, BedDouble, Building2, ChevronDown, Flame, Lock, LogIn, Mail, MapPin, Minus, Phone, Plus, Search, Sparkles, Users, X, Zap } from "lucide-react"; import { api } from "../../../convex/_generated/api"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { LoginForm } from "@/app/(auth)/login/login-form"; import { ApartmentSheet } from "./apartment-sheet"; import { ContactDock } from "./contact-dock"; import { LeadForm } from "./lead-form"; import { ReviewsSection, GoogleRatingChip, useGoogleReviews } from "./reviews-section"; import { BookingFlow } from "./booking-flow"; import { PulseToasts, type Pulse } from "./pulse-toasts"; import { ExitNudge } from "./exit-nudge"; import { FacebookPixel, track } from "./fb-pixel"; import { captureAttribution } from "@/lib/attribution"; import { AnimatedText } from "@/components/motion/animated-number"; import { fmtMoney, fmtPhone } from "@/lib/format"; import { addDays, dayKey, fmtDate, nightsBetween, parseDay } from "@/lib/dates"; export interface Apartment { id: string; code: string; name: string; city: string; building: string | null; floor: string | null; bedrooms: number; beds: number; bathrooms: number; maxGuests: number; basePrice: number; weekendPrice: number | null; amenities: string[]; images: { id: string; caption: string | null; category: string }[]; } export interface Business { name: string; phone: string; whatsapp: string; email: string; address: string; currency: string; checkInTime: string; checkOutTime: string; weekendDays: number[]; replyMinutes: number; reviewUrl: string; mapsUrl: string; hasGooglePlace: boolean; fbPixelId: string; } export interface Catalog { business: Business; apartments: Apartment[]; } export interface Avail { id: string; available: boolean; nights: number; subtotal: number; nightlyPrice: number; } const src = (id: string, w: number) => `/api/media/${id}?w=${w}`; const HERO_MS = 7000; const ease = [0.16, 1, 0.3, 1] as const; function useIsPhone() { const [phone, setPhone] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia("(max-width: 767px)"); const on = () => setPhone(mq.matches); on(); mq.addEventListener("change", on); return () => mq.removeEventListener("change", on); }, []); return phone; } /** * Public showroom + staff entrance. A cinematic hero cycles through the * apartments, a date bar checks live availability, cards show what is free * and for how much, and the staff sign-in slides in only when asked for. */ export function ShowroomPage({ initial, next, openSignIn, focus, presetIn, presetOut, presetGuests }: { initial: Catalog | null; next?: string; openSignIn?: boolean; /** apartment to open immediately (shared link) */ focus?: string; presetIn?: string; presetOut?: string; presetGuests?: number }) { const live = useQuery(api.showroom.catalog, {}) as Catalog | undefined; const catalog = live ?? initial; const apartments = React.useMemo(() => catalog?.apartments ?? [], [catalog]); const business: Business = catalog?.business ?? { name: "LocaJour", phone: "", whatsapp: "", email: "", address: "", currency: "MAD", checkInTime: "14:00", checkOutTime: "11:00", weekendDays: [5, 6], replyMinutes: 10, reviewUrl: "", mapsUrl: "", hasGooglePlace: false, fbPixelId: "" }; const reduced = useReducedMotion(); const phone = useIsPhone(); const [today] = React.useState(() => dayKey(new Date())); const [checkIn, setCheckIn] = React.useState(presetIn && presetIn >= today ? presetIn : today); const [checkOut, setCheckOut] = React.useState(presetIn && presetOut && presetOut > presetIn && presetIn >= today ? presetOut : dayKey(addDays(new Date(), 2))); const [guests, setGuests] = React.useState(presetGuests ?? 2); const [onlyFree, setOnlyFree] = React.useState(false); const [hero, setHero] = React.useState(() => Math.max(0, (initial?.apartments ?? []).findIndex((a) => a.id === focus))); const [signIn, setSignIn] = React.useState(!!openSignIn); const [selected, setSelected] = React.useState(focus ?? null); const nights = checkIn && checkOut ? nightsBetween(parseDay(checkIn), parseDay(checkOut)) : 0; const availData = useQuery(api.showroom.availability, nights > 0 ? { checkIn, checkOut } : "skip") as { items: Avail[] } | undefined; const avail = React.useMemo(() => new Map((availData?.items ?? []).map((a) => [a.id, a])), [availData]); const freeCount = apartments.filter((a) => avail.get(a.id)?.available && a.maxGuests >= guests).length; const [reviewsOk, setReviewsOk] = React.useState(false); const [booking, setBooking] = React.useState(null); const google = useGoogleReviews(business.hasGooglePlace); // Social proof is read once per visit, not subscribed: as a live query every // reservation anyone books would re-run it for every visitor on the site. const convex = useConvex(); const [pulse, setPulse] = React.useState(undefined); React.useEffect(() => { let alive = true; convex .query(api.showroom.pulse, {}) .then((p) => alive && setPulse(p as Pulse)) .catch(() => {}); return () => { alive = false; }; }, [convex]); const bookingApt = apartments.find((a) => a.id === booking) ?? null; const startBooking = (id: string) => { setSelected(null); setBooking(id); }; const quickDates = (kind: "tonight" | "weekend" | "3n") => { const t = parseDay(today); if (kind === "tonight") setDates(today, dayKey(addDays(t, 1))); else if (kind === "3n") setDates(today, dayKey(addDays(t, 3))); else { const dow = t.getUTCDay(); const fri = dow === 5 || dow === 6 ? t : addDays(t, (5 - dow + 7) % 7 || 7); setDates(dayKey(fri), dayKey(addDays(fri, 2))); } goResults(); }; React.useEffect(() => { captureAttribution(); }, []); React.useEffect(() => { if (nights > 0 && availData) track("Search", { checkIn, checkOut, guests }); // eslint-disable-next-line react-hooks/exhaustive-deps -- fire once per completed search }, [availData]); // Hero auto-advance React.useEffect(() => { if (reduced || apartments.length < 2 || selected || signIn || booking) return; const t = setInterval(() => setHero((h) => (h + 1) % apartments.length), HERO_MS); return () => clearInterval(t); }, [reduced, apartments.length, selected, signIn, booking, hero]); // Escape closes the sign-in panel React.useEffect(() => { if (!signIn) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setSignIn(false); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [signIn]); const cur = apartments[hero % Math.max(1, apartments.length)]; const resultsRef = React.useRef(null); const goResults = () => { resultsRef.current?.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "start" }); }; const setDates = (ci: string, co: string) => { setCheckIn(ci); setCheckOut(co); }; const list = apartments.filter((a) => (!onlyFree || (avail.get(a.id)?.available ?? true)) && (guests <= 1 || a.maxGuests >= guests || !onlyFree)); const selectedApt = apartments.find((a) => a.id === selected) ?? null; return (
{/* ── Hero ─────────────────────────────────────────────── */}
{cur ? ( ) : null}
{/* Top bar */}
{business.name}
{/* Hero copy */}
{cur ? (

{cur.city} {cur.building ? ` · ${cur.building}` : ""}

{cur.name}

{cur.bedrooms ? `${cur.bedrooms} bedroom${cur.bedrooms > 1 ? "s" : ""}` : "Studio"} {cur.bathrooms} bath up to {cur.maxGuests} guests from {fmtMoney(cur.basePrice, business.currency, { whole: true })} / night

{pulse && pulse.bookings30 >= 3 ? {pulse.bookings30} bookings in the last 30 days : null} No payment online
) : null}
{/* Thumbnail rail */} {apartments.length > 1 ? (
{apartments.map((a, i) => ( ))}
) : null}
{/* ── Date bar ──────────────────────────────────────────── */}
Guests
{guests}
{[["tonight", "Tonight"], ["weekend", "This weekend"], ["3n", "3 nights"]].map(([k, l]) => ( ))}

{nights > 0 ? ( availData ? ( <> apartments are free for {nights} night{nights > 1 ? "s" : ""} · {fmtDate(parseDay(checkIn), { style: "weekday" })} → {fmtDate(parseDay(checkOut), { style: "weekday" })} ) : ( "Checking availability…" ) ) : ( "Choose your dates to see what is free." )}

{/* ── Why book direct ───────────────────────────────────── */}
    {[ { icon: Lock, t: "Nothing to pay online", d: "Book in 30 seconds, pay at check-in." }, { icon: BadgeCheck, t: `Confirmed in ~${business.replyMinutes} min`, d: "A real person confirms on WhatsApp or by phone." }, { icon: Sparkles, t: "Direct price, no fees", d: "You talk to the owner's team, not a platform." }, ].map((x, i) => ( {x.t}{x.d} ))}
{/* ── Apartments ────────────────────────────────────────── */}

The collection

{apartments.length} apartment{apartments.length === 1 ? "" : "s"}, ready when you are

{nights > 0 ? ( ) : null}
{list.map((a, i) => { const av = avail.get(a.id); const tooSmall = a.maxGuests < guests; return (
{a.bedrooms || "Studio"} {a.bathrooms} {a.maxGuests} {fmtMoney(a.basePrice, business.currency, { whole: true })}/night
{nights > 0 && av?.available && !tooSmall ? (

{av.nights} night{av.nights > 1 ? "s" : ""} ·

) : (

{a.amenities.slice(0, 3).join(" · ")}

)} {!(nights > 0 && av && !av.available) ? ( ) : null}
); })}
{list.length === 0 ? (

Fully booked on these nights

Don't leave empty-handed.

Cancellations happen and we have partner apartments nearby. Leave your number: we call you the moment something opens for your dates.

 ) : null}
{/* ── Contact / footer ──────────────────────────────────── */} setSelected(null)} today={today} onBook={startBooking} /> setBooking(null)} onDates={setDates} /> setSelected(id)} /> 0 ? checkIn : undefined, checkOut: nights > 0 ? checkOut : undefined, guests }} onDates={() => document.getElementById("availability")?.scrollIntoView({ behavior: reduced ? "auto" : "smooth" })} reviewsAvailable={reviewsOk} /> 0 ? checkIn : undefined, checkOut: nights > 0 ? checkOut : undefined, guests }} suspended={!!selected || !!booking || signIn} /> {business.fbPixelId ? : null} {/* ── Staff sign-in panel ───────────────────────────────── */} {signIn ? ( <> setSignIn(false)} /> {phone ?
: null}
{business.name}

Staff area

Sign in

Private access for {business.name} staff.

Accounts are created by the administrator. Login activity is recorded.
) : null} Forgot password
); }