Calendario

• Periodo mínimo en temporada baja: 3 días (7 días en Navidad)
• Periodo mínimo en temporada media: 3 días (5 días en Junio y Semana Pascua y 7 días en Septiembre)
• Periodo mínimo en temporada alta: 7 días
• Periodo mínimo en el mes de agosto: 10 días

import { useState } from «react»; import { Calendar } from «@/components/ui/calendar»; import { Button } from «@/components/ui/button»; import { Card } from «@/components/ui/card»; import { Badge } from «@/components/ui/badge»; import { CalendarIcon, Users, Bed, MapPin } from «lucide-react»; import { format } from «date-fns»; import { es } from «date-fns/locale»; import { cn } from «@/lib/utils»; import { DateRange } from «react-day-picker»; import motorhome1 from «@/assets/motorhome-1.jpg»; import motorhome2 from «@/assets/motorhome-2.jpg»; import motorhome3 from «@/assets/motorhome-3.jpg»; interface Motorhome { id: string; name: string; image: string; capacity: number; beds: number; features: string[]; pricePerDay: number; } const motorhomes: Motorhome[] = [ { id: «compact», name: «Compacta Urban», image: motorhome2, capacity: 2, beds: 1, features: [«Cocina», «Baño», «Calefacción»], pricePerDay: 85, }, { id: «family», name: «Familiar Confort», image: motorhome1, capacity: 4, beds: 2, features: [«Cocina completa», «Baño», «Ducha», «Calefacción»], pricePerDay: 120, }, { id: «luxury», name: «Luxury Premium», image: motorhome3, capacity: 6, beds: 3, features: [«Cocina premium», «Baño completo», «Ducha», «Calefacción», «TV»], pricePerDay: 165, }, ]; export function RentalCalendar() { const [selectedMotorhome, setSelectedMotorhome] = useState(null); const [dateRange, setDateRange] = useState(); const selectedVehicle = motorhomes.find((m) => m.id === selectedMotorhome); const calculateTotalDays = () => { if (!dateRange?.from || !dateRange?.to) return 0; const diffTime = Math.abs(dateRange.to.getTime() – dateRange.from.getTime()); return Math.ceil(diffTime / (1000 * 60 * 60 * 24)); }; const totalDays = calculateTotalDays(); const totalPrice = selectedVehicle ? totalDays * selectedVehicle.pricePerDay : 0; return (

{/* Header */}

Reservas Anuales

Calendario de Alquiler

Selecciona tu autocaravana ideal y las fechas de tu aventura

{/* Motorhome Selection */}

1 Elige tu Autocaravana

{motorhomes.map((motorhome) => ( setSelectedMotorhome(motorhome.id)} >

{selectedMotorhome === motorhome.id && (

Seleccionada

)}

{motorhome.name}

{motorhome.capacity} {motorhome.beds}

{motorhome.features.map((feature) => ( {feature} ))}

{motorhome.pricePerDay}€/día

))}

{/* Calendar Section */} {selectedMotorhome && (

2 Selecciona las Fechas

date < new Date()} className="rounded-md border pointer-events-auto" />

{/* Booking Summary */}

Resumen de Reserva

Autocaravana

{selectedVehicle?.name}

{dateRange?.from && (

Fecha de recogida

{format(dateRange.from, «dd ‘de’ MMMM, yyyy», { locale: es })}

)} {dateRange?.to && (

Fecha de devolución

{format(dateRange.to, «dd ‘de’ MMMM, yyyy», { locale: es })}

)} {totalDays > 0 && ( <>

{totalDays} {totalDays === 1 ? «día» : «días»} {totalDays} × {selectedVehicle?.pricePerDay}€

Total {totalPrice}€

)}

Reservar Ahora

Recogida en Getxo, Vizcaya

)} {/* Info Section */}

Reserva Flexible

Cancela hasta 48h antes sin coste adicional

Recogida Fácil

En nuestras instalaciones de Getxo

Atención 24/7

Soporte durante todo tu viaje

); }