);
}
function SpecIcon({ kind }) {
const sp = { width:16, height:16, viewBox:'0 0 24 24', fill:'none', stroke:T_TEAL, strokeWidth:2, strokeLinecap:'round' };
if (kind === 'seats') return ;
if (kind === 'gearbox') return ;
if (kind === 'fuel') return ;
if (kind === 'clim') return ;
if (kind === 'gps') return ;
if (kind === 'bluetooth') return ;
const paths = {
bed: 'M3 7v10m0-4h18m0 4V11a2 2 0 00-2-2H7a2 2 0 00-2 2v0',
kitchen: 'M12 2v6m0 0l3-3m-3 3L9 5M3 12h18M5 22V12m14 10V12M9 22v-4a3 3 0 016 0v4',
shower: 'M12 3v3m0 0a3 3 0 013 3v1M8 22v-6a4 4 0 018 0v6',
solar: 'M12 3v1m0 16v1M21 12h-1M4 12H3M16 12a4 4 0 11-8 0 4 4 0 018 0z',
water: 'M12 2c-4 6-7 9-7 13a7 7 0 0014 0c0-4-3-7-7-13z',
toilet: 'M6 3h12v4a6 6 0 01-12 0V3zm2 10h8l1 8H7l1-8z',
roof: 'M3 21h18M5 21V9l7-6 7 6v12',
};
const key = kind.startsWith('custom_') ? kind.slice(7) : kind;
return ;
}
// ─── Search sidebar (formulaire + calendrier inline) ──────────────
const SS_TIMES = ['08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00'];
function SearchSidebar({ search, onUpdate, compact = false, variant = 'default' }) {
const pad = (n) => String(n).padStart(2, '0');
const isoOf = (y, m, d) => `${y}-${pad(m + 1)}-${pad(d)}`;
const TODAY = new Date(); TODAY.setHours(0, 0, 0, 0);
const init = search.startDate ? new Date(search.startDate) : TODAY;
const [viewYear, setViewYear] = React.useState(init.getFullYear());
const [viewMonth, setViewMonth] = React.useState(init.getMonth());
const [startDate, setStartDate] = React.useState(search.startDate);
const [endDate, setEndDate] = React.useState(search.endDate);
const [startTime, setStartTime] = React.useState('09:00');
const [endTime, setEndTime] = React.useState('17:00');
const [agencyId, setAgencyId] = React.useState(search.startAgencyId);
const [agencyName, setAgencyName] = React.useState(search.agencyName);
const [agencyOpen, setAgencyOpen] = React.useState(false);
const [error, setError] = React.useState('');
const days = React.useMemo(() => {
if (!startDate || !endDate) return 0;
return Math.max(0, Math.ceil((new Date(endDate) - new Date(startDate)) / 86400000));
}, [startDate, endDate]);
// Grille du mois affiché — semaines lun→dim, avec débordements mois adjacents
const grid = React.useMemo(() => {
const first = new Date(viewYear, viewMonth, 1);
const offset = (first.getDay() + 6) % 7; // lundi = 0
const cells = [];
const gridStart = new Date(viewYear, viewMonth, 1 - offset);
for (let i = 0; i < 42; i++) {
const d = new Date(gridStart); d.setDate(gridStart.getDate() + i);
cells.push(d);
}
// coupe la derniere semaine si entierement hors mois
while (cells.length > 35 && cells[35].getMonth() !== viewMonth) cells.splice(35, 7);
return cells;
}, [viewYear, viewMonth]);
const isDisabled = (d) => d < TODAY || d.getDay() === 0; // passé ou dimanche (agence fermée)
const isOtherMonth = (d) => d.getMonth() !== viewMonth;
function pickDay(d) {
if (isDisabled(d)) return;
const iso = isoOf(d.getFullYear(), d.getMonth(), d.getDate());
if (!startDate || (startDate && endDate) || iso < startDate) {
setStartDate(iso); setEndDate('');
} else if (iso === startDate) {
setStartDate(''); setEndDate('');
} else {
setEndDate(iso);
onUpdate({ startAgencyId: agencyId, agencyName, startDate, endDate: iso });
}
setError('');
}
function navMonth(delta) {
const d = new Date(viewYear, viewMonth + delta, 1);
setViewYear(d.getFullYear()); setViewMonth(d.getMonth());
}
function selectAgency(a) {
setAgencyId(a.id);
setAgencyName(`${a.public_name} - ${a.city}`);
setAgencyOpen(false);
if (startDate && endDate) onUpdate({ startAgencyId: a.id, agencyName: `${a.public_name} - ${a.city}`, startDate, endDate });
}
function submit() {
if (!agencyId) { setError('Veuillez sélectionner une agence'); return; }
if (!startDate || !endDate) { setError('Veuillez sélectionner vos dates'); return; }
if (days < 2) { setError('La durée minimale de location est de 2 jours'); return; }
onUpdate({ startAgencyId: agencyId, agencyName, startDate, endDate });
setError('');
}
const monthLabelRaw = new Date(viewYear, viewMonth, 1).toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' });
const monthLabel = monthLabelRaw.charAt(0).toUpperCase() + monthLabelRaw.slice(1);
return (
);
}
// ─── Bloc agence à proximité ────────────────────────────
function NearbyAgencyBlock({ search, compact = false }) {
const city = (search.agencyName || '').split(' - ').pop() || 'Toulouse';
return (
Vous n'avez pas trouvé le van idéal ?
Une autre agence Van-Away à moins de 300 km de {city} propose d'autres modèles disponibles pour ces dates. Cliquez sur sa ville pour voir ses véhicules.
{filteredUnavail.length} {filteredUnavail.length > 1 ? 'autres véhicules ne sont pas disponibles' : "autre véhicule n'est pas disponible"} pour ces dates