import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowRight, CalendarDays, Car, CheckCircle2, Clock, MapPin, ShieldCheck, Sparkles, Star, } from 'lucide-react'; import { PublicHeader } from '@/components/public-header'; import { FaqSection, type WelcomeFaq, } from '@/components/homepage/faq-section'; import { Badge } from '@/components/ui/badge'; import { buttonVariants } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { cn } from '@/lib/utils'; import { dashboard, login } from '@/routes'; type WelcomePackage = { id: number; name: string; description: string | null; duration_minutes: number; min_price_cents: number; is_featured: boolean; icon: string | null; icon_svg: string | null; col_span: number; row_span: number; }; // Static class maps so Tailwind keeps these utilities in the build. const BENTO_COL_SPAN: Record = { 1: 'lg:col-span-1', 2: 'lg:col-span-2', 3: 'lg:col-span-3', 4: 'sm:col-span-2 lg:col-span-4', }; const BENTO_ROW_SPAN: Record = { 1: 'lg:row-span-1', 2: 'lg:row-span-2', 3: 'lg:row-span-3', 4: 'lg:row-span-4', }; function formatStartingRate(cents: number): string { if (cents <= 0) return 'Contact us'; return `$${Math.floor(cents / 100)}`; } // The marquee row's width (and thus how far a 50% translate travels) grows // with the package count, so the duration must scale with it too — otherwise // more packages would visually scroll faster for the same fixed duration. const MARQUEE_SECONDS_PER_PACKAGE = 8; const STEPS = [ { icon: MapPin, label: 'Choose your service', description: 'Pick mobile or drop-off, then select a package.', }, { icon: CalendarDays, label: 'Pick a date & time', description: 'Choose any available slot that works for you.', }, { icon: Car, label: 'We handle the rest', description: 'Our team arrives and delivers a spotless result.', }, ] as const; const TRUST = [ { icon: Star, text: '5-star rated service' }, { icon: ShieldCheck, text: 'Licensed & insured' }, { icon: CheckCircle2, text: 'Satisfaction guaranteed' }, { icon: Clock, text: 'On-time, every time' }, ] as const; type Props = { packages: WelcomePackage[]; servicesStyle: 'bento' | 'list' | 'marquee'; servicesSectionEnabled: boolean; faq: WelcomeFaq; }; export default function Welcome({ packages, servicesStyle, servicesSectionEnabled, faq }: Props) { const { auth } = usePage().props as { auth?: { user?: { name?: string; role?: string } }; }; const isStaff = ['admin', 'manager', 'technician'].includes( auth?.user?.role ?? '', ); return ( <>
{/* ── Header ── */}
{/* ── Hero ── */}
{/* ── How it works ── */}

How it works

Three simple steps and your car is on its way to sparkling clean.

{STEPS.map( ({ icon: Icon, label, description }, i) => (
{i + 1}

{label}

{description}

), )}
{servicesSectionEnabled && ( <> {/* ── Services ── */}

Our services

Every service includes our quality guarantee.

{servicesStyle === 'bento' && (
{packages.map((pkg) => { const isLarge = pkg.row_span >= 2; return (
{pkg.is_featured && ( Most popular )}
{pkg.icon_svg ? (
) : ( )}

{pkg.name}

{pkg.description}

{pkg.duration_minutes} min
{formatStartingRate( pkg.min_price_cents, )} {pkg.min_price_cents > 0 && ( Starting rate )}
Book now
); })}
)} {servicesStyle === 'list' && (
{packages.map((pkg, index) => (
0 && 'border-t border-border', pkg.is_featured && 'bg-primary/5', )} >
{pkg.icon_svg ? (
) : ( )}

{pkg.name}

{pkg.is_featured && ( Most popular )}

{pkg.duration_minutes} min {pkg.description && ( <> {pkg.description} )}

{formatStartingRate( pkg.min_price_cents, )}
{pkg.min_price_cents > 0 && (
Starting rate
)}
Book now
))}
)} {servicesStyle === 'marquee' && (
{[0, 1].map((rowIndex) => (
{[...packages, ...packages].map( (pkg, index) => ( = packages.length || rowIndex === 1 ? 'true' : undefined } className={cn( 'inline-flex items-center rounded-full border px-5 py-2.5 text-sm font-semibold whitespace-nowrap', pkg.is_featured ? 'border-primary bg-primary/5 text-primary' : 'border-border bg-muted/20 text-foreground', )} > {pkg.name} ), )}
))}
)}

Prices vary by vehicle size. Add-ons available at checkout.

)} {/* ── Trust signals ── */}
{TRUST.map(({ icon: Icon, text }) => (
{text}
))}
{/* ── Bottom CTA ── */}

Ready for a clean car?

Book in 2 minutes. No account needed.

Get Started

Questions? Call us at{' '} (800) 555-1234

{faq.categories.length > 0 && ( <> )} {/* ── Footer ── */}
); }