// tunnel-shell.jsx // Van-Away tunnel shell: sticky header (logo + progress bar + back link) // + sliding reassurance marquee. Clear theme. const VA_TEAL = '#11978f'; const VA_INK = '#042828'; const VA_MUTED = '#5B7A82'; const VA_CREAM = '#F4F2EC'; const VA_SURFACE = '#FFFFFF'; const VA_BORDER = 'rgba(4,40,40,0.08)'; // ─── Progress bar ────────────────────────────────────────────── function ProgressBar({ currentVisualStep = 1 }) { const steps = [ { number: 1, label: 'Choix du véhicule' }, { number: 2, label: 'Options' }, { number: 3, label: 'Informations' }, { number: 4, label: 'Confirmation' }, ]; const stepState = (n) => n < currentVisualStep ? 'done' : n === currentVisualStep ? 'active' : 'pending'; return (
{steps.map((s, i) => (
{stepState(s.number) === 'done' ? ( ) : ( {s.number} )}
{s.label}
{i < steps.length - 1 && (
)} ))}
); } // ─── Van-Away wordmark ───────────────────────────────────────── function VanAwayLogo({ compact = false }) { const h = compact ? 30 : 44; return (
Van-Away
); } // ─── Tunnel header ───────────────────────────────────────────── function TunnelHeader({ compact = false, currentVisualStep = 1 }) { return (
e.preventDefault()}>
{!compact && ( e.preventDefault()}> Retour au site )}
); } // ─── Reassurance marquee ─────────────────────────────────────── const REASSURANCE_ITEMS = [ { icon: 'tag', text: 'Louez au meilleur prix', desc: 'Tarifs dégressifs, ANCV acceptés, paiements sécurisés' }, { icon: 'camping', text: 'Louez tout équipé', desc: 'Table, chaises, vaisselle, camping, chauffage autonome' }, { icon: 'pro', text: 'Louez chez un pro', desc: 'Désinfection rigoureuse, réseau de proximité' }, { icon: 'shield', text: 'Voyagez en sécurité', desc: 'Assurance ALLIANZ, assistance AXA 24/7, permis B' }, { icon: 'map', text: 'Voyagez en simplicité', desc: 'App spots, France Passion, OnlyCamp, roadbooks' }, ]; function ReassIcon({ kind }) { const common = { width:15, height:15, fill:'none', stroke:'currentColor', strokeWidth:2.2, viewBox:'0 0 24 24' }; if (kind === 'tag') return ; if (kind === 'camping') return ; if (kind === 'pro') return ; if (kind === 'shield') return ; if (kind === 'map') return ; return null; } function ReassuranceBar({ compact = false }) { // Mode compact (mobile) : rotateur — un seul item à la fois, fade in/out doux. // Mode desktop : marquee continu (legacy, plus utilisé en pratique). if (compact) { return ; } return (
{[0,1,2].map(n => (
Faites confiance à VAN-AWAY !
{REASSURANCE_ITEMS.map((it, i) => (
{it.text} {it.desc}
{i < REASSURANCE_ITEMS.length - 1 &&
} ))}
))}
); } // ─── Reassurance rotator (compact / mobile) ──────────────────── // Affiche les items un par un avec une transition douce (cross-fade + léger slide). function ReassuranceRotator({ intervalMs = 3200, fadeMs = 500 }) { const [idx, setIdx] = React.useState(0); React.useEffect(() => { const id = setInterval(() => { setIdx(i => (i + 1) % REASSURANCE_ITEMS.length); }, intervalMs); return () => clearInterval(id); }, [intervalMs]); return (
{REASSURANCE_ITEMS.map((it, i) => (
{it.text}
))}
); } // ─── Static reassurance block (desktop sidebar) ──────────────── function ReassuranceBlock({ variant = 'default' }) { return (
Faites confiance à Van-Away
    {REASSURANCE_ITEMS.map((it, i) => (
  • {it.text} {it.desc}
    • ))}
); } // ─── Google reviews inline row (desktop) ─────────────────────── function GoogleReviewsInline() { const rating = 4.9; const full = Math.floor(rating); const hasHalf = rating - full >= 0.25 && rating - full < 0.75; const stars = []; for (let i = 0; i < 5; i++) { stars.push(i < full ? 'full' : (i === full && hasHalf ? 'half' : 'empty')); } return (
e.preventDefault()} aria-label="Voir nos avis Google"> Avis Google Vérifiés {rating.toFixed(1).replace('.', ',')} sur 3 100 avis clients
); } // ─── Google reviews badge — premium inline version ───────────── function GoogleReviewsBadge({ compact = false }) { const rating = 4.9; const count = 3600; const full = Math.floor(rating); const frac = rating - full; const VA_GREEN = '#11978f'; const Star = ({ fill, i }) => { const gid = `va-gb-star-${i}-${Math.round(fill*100)}`; return ( ); }; return ( e.preventDefault()} aria-label={`${rating} sur 5 — ${count} avis Google`}> Évaluations Google {rating.toLocaleString('fr-FR')} Basé sur {count.toLocaleString('fr-FR').replace(/\u202f/g,' ')}+ avis ); } // ─── Google reviews mini-chip (inline) ───────────────────────── function GoogleReviewsChip({ compact = false }) { return ( e.preventDefault()} aria-label="Voir nos avis Google"> 4,9 {!compact && 3 100 avis} ); } // ─── Google reviews — floating badge (mobile) ────────────────── function GoogleReviewsFloating() { const rating = 4.9; const count = 3600; const VA_GREEN = '#11978f'; return ( e.preventDefault()} aria-label={`${rating} sur 5 — ${count} avis Google`}> {rating.toLocaleString('fr-FR')} {count.toLocaleString('fr-FR').replace(/\u202f/g,' ')}+ avis ); } Object.assign(window, { TunnelHeader, ReassuranceBar, ReassuranceBlock, GoogleReviewsInline, GoogleReviewsChip, GoogleReviewsBadge, GoogleReviewsFloating, ProgressBar, VanAwayLogo, VA_TEAL, VA_INK, VA_MUTED, VA_CREAM, VA_SURFACE, VA_BORDER });