import React, { useState } from 'react'; import { Head, useForm } from '@inertiajs/react'; import { PublicLayout } from '@/Layouts/PublicLayout'; import { Modal } from '@/Components/Modal'; import { CurrencyPrice } from '@/Components/CurrencyPrice'; import { Flower2, Clock, Sparkles, Check, Calendar, Heart } from 'lucide-react'; interface Props { categories: any[]; } export default function Spa({ categories = [] }: Props) { const [bookingModalOpen, setBookingModalOpen] = useState(false); const [selectedTreatment, setSelectedTreatment] = useState(null); const appointmentForm = useForm({ spa_treatment_id: '', guest_name: '', guest_email: '', guest_phone: '', appointment_date: new Date().toISOString().split('T')[0], appointment_time: '14:00', notes: '', }); const openBooking = (treatment: any) => { setSelectedTreatment(treatment); appointmentForm.setData('spa_treatment_id', treatment.id); setBookingModalOpen(true); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); appointmentForm.post('/spa/book-treatment', { preserveScroll: true, onSuccess: () => { setBookingModalOpen(false); appointmentForm.reset(); }, }); }; return ( {/* Header Hero */}

Holistic Sanctuary

Primon Spa Sanctuary

Restorative therapies combining African botanicals, eucalyptus oils, and deep tissue acupressure to dissolve stress and fatigue.

{/* Spa Intro */}

The Wellness Experience

Tailored Therapies for Restorative Rejuvenation.

Our private treatment rooms and couples suite offer an intimate haven of soft lighting, calming aromas, and herbal infusions. Every ritual is customized by our certified therapists to restore vitality and inner calm.

Daily 09:00 - 21:00

Flexible appointment booking

Couples Suite

Private dual rituals available

{/* Treatment Categories and List */}

{categories.map((category) => (

Treatment Collection

{category.name}

{category.description}

{(category.treatments || []).map((treatment: any) => (

{treatment.duration_minutes} Minutes

{treatment.name}

{treatment.description}

))}

{/* Spa Appointment Modal */} setBookingModalOpen(false)} title={`Book Treatment — ${selectedTreatment?.name || 'Primon Spa'}`} >

{selectedTreatment?.name} • {selectedTreatment?.duration_minutes} Mins

Full Name appointmentForm.setData('guest_name', e.target.value)} className="w-full bg-white border border-gray-300 rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]" />

Email Address appointmentForm.setData('guest_email', e.target.value)} className="w-full bg-white border border-gray-300 rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]" />

Phone appointmentForm.setData('guest_phone', e.target.value)} className="w-full bg-white border border-gray-300 rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]" />

Date appointmentForm.setData('appointment_date', e.target.value)} className="w-full bg-white border border-gray-300 rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]" />

Time Slot

Pressure Preferences or Health Notes