// ============================================= // Flacenter v3 — Components (header, hero, cards) // ============================================= const { useState, useEffect, useRef, useMemo } = React; const Icon = { Phone: (p) => , Wa: (p) => , Check: (p) => , Plus: (p) => , Star: (p) => , Arrow: (p) => , Close: (p) => , Pin: (p) => , Clock: (p) => , Mail: (p) => , Message: (p) => , Shield: (p) => , Heart: (p) => , Globe: (p) => , Sedan: (p) => , Ig: (p) => , Fb: (p) => }; const fmt = (n) => n.toLocaleString('en-US'); const STORE_SMS_NUMBER = '+18575754670'; const smsHref = (body = 'Hello! I saw a vehicle on your website and would like more details.') => { const message = (body || '').trim(); if (!message) return `sms:${STORE_SMS_NUMBER}`; const ua = (typeof navigator !== 'undefined' && navigator.userAgent) ? navigator.userAgent : ''; const separator = /iPad|iPhone|iPod/i.test(ua) ? '&' : '?'; return `sms:${STORE_SMS_NUMBER}${separator}body=${encodeURIComponent(message)}`; }; const vehicleSmsMessage = (car = {}) => { const vehicle = [car.year, car.make, car.model, car.trim || car.version].filter(Boolean).join(' ') || car.fullName || car.name || 'vehicle'; const stockPart = car.stock ? ` (Stock ${car.stock})` : ''; return `Hello! I'm interested in the ${vehicle}${stockPart} listed on your website. Could you help me?`; }; // ---------- Top CTA Strip ---------- function CtaStrip({ t }) { return (

{t.hero.open} ★ 4.8 · 600+ Google reviews {t.hero.delivery}

(407) 802 4670 SMS WhatsApp

); } // ---------- Header ---------- function Header({ lang, setLang, t, openApply }) { const blogHref = `/${lang}/blog`; const staticLangQuery = `?lang=${lang}`; const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html'; const homeHref = (id) => isHomePage ? `#${id}` : `/#${id}`; return (

{['en','es','pt'].map(L => ( ))}

); } // ---------- Hero ---------- function Hero({ t, makes, scrollToInv, setFilter, openApply, scrollToLead }) { const [tab, setTab] = useState('lead'); const [make, setMake] = useState(''); const [body, setBody] = useState(''); const [maxP, setMaxP] = useState(''); const [lead, setLead] = useState({ name: '', phone: '', email: '', preferred: 'SMS' }); const [leadSending, setLeadSending] = useState(false); const [leadSent, setLeadSent] = useState(false); const [leadError, setLeadError] = useState(''); const submit = () => { window.FlacenterTracking?.track?.('search', { form_id: 'hero_vehicle_search', search_make: make, search_body: body, max_price: maxP ? Number(maxP) : 50000 }); setFilter({ make, body, maxPrice: maxP ? Number(maxP) : 50000 }); scrollToInv(); }; const setLeadField = (key, value) => { setLead(prev => ({ ...prev, [key]: value })); if (leadError) setLeadError(''); }; const contactOptions = t.contactOptions || { sms: 'SMS', email: 'Email', whatsapp: 'WhatsApp', phone: 'Phone call' }; const quickLeadCta = { SMS: t.hero.leadCtaSms || 'Text me the best options', Email: t.hero.leadCtaEmail || 'Email me the options', WhatsApp: t.hero.leadCtaWhatsapp || t.hero.leadCta || 'Send options on WhatsApp', 'Phone call': t.hero.leadCtaPhone || 'Call me about options' }; const QuickLeadIcon = lead.preferred === 'Email' ? Icon.Mail : (lead.preferred === 'WhatsApp' ? Icon.Wa : Icon.Phone); const submitLead = async () => { if (leadSending || leadSent) return; if (!lead.name || (lead.preferred === 'Email' ? !lead.email : !lead.phone)) { setLeadError(lead.preferred === 'Email' ? (t.leadForm.emailRequired || 'Please add your name and email.') : (t.leadForm.errorRequired || 'Please add your name and phone.')); return; } setLeadSending(true); setLeadError(''); try { if (!window.FlacenterApi?.submitLead) throw new Error('Lead API client unavailable'); await window.FlacenterApi.submitLead({ ...lead, preferred: lead.preferred || 'SMS', time: 'ASAP', msg: 'Hero quick lead', lang: document.documentElement.lang, source: 'website-v3-hero', formId: 'hero_quick_lead', conversionEvent: 'generate_lead' }); setLeadSent(true); } catch (err) { setLeadError(err.message || t.leadForm.error || 'Could not send your request. Please call or WhatsApp us.'); } finally { setLeadSending(false); } }; return (

4.8 Google 170 point inspection EN · ES · PT

{t.hero.title1} {t.hero.title2} {t.hero.title3 ? {t.hero.title3} : null}

{t.hero.sub}

{t.heroBullets[0]}

{t.heroBullets[1]}

{t.heroBullets[2]}

SMS WhatsApp

{t.hero.searchTitle}

{t.hero.searchSub}

{tab === 'search' ? (

{t.hero.make}

{t.hero.model}

{t.hero.price}

) : (

{t.apply.fields.fullName} setLeadField('name', e.target.value)} placeholder="Emily Johnson" />

{t.apply.fields.phone}{lead.preferred === 'Email' ? '' : ' *'} setLeadField('phone', e.target.value)} placeholder="(407) 555 1234" />

{lead.preferred === 'Email' && (

{t.apply.fields.email} * setLeadField('email', e.target.value)} placeholder="you@email.com" />

)}

{t.leadForm.preferred}

{leadError &&

{leadError}

} {leadSent ? (

{t.leadForm.sentTitle}

) : ( )}

)}

{t.hero.privacyShort}

3,000+

{t.hero.statFamilies}

{t.hero.statYears}

170

{t.hero.statInspection}

4.8 / 5

{t.hero.statRating}

{[...Array(5)].map((_, i) => )}

); } // ---------- Lead Banner (between sections) ---------- function LeadBanner({ t, openApply }) { return (

{t.leadBanner.title}

{t.leadBanner.sub}

{t.leadBanner.sms || 'Text us'} {t.leadBanner.wa}

); } // ---------- Category Tiles ---------- function CategoryTiles({ t, inventory, setFilter, scrollToInv }) { const cats = [ { key: '', name: t.inv.all, img: '/assets/categories/all.webp' }, { key: 'sedan', name: t.inv.sedan, img: '/assets/categories/sedan.webp' }, { key: 'suv', name: t.inv.suv, img: '/assets/categories/suv.webp' }, { key: 'truck', name: t.inv.truck, img: '/assets/categories/truck.webp' }, { key: 'van', name: t.inv.van, img: '/assets/categories/minivan.webp' } ]; const counts = useMemo(() => { const c = {}; inventory.forEach(it => { c[it.body] = (c[it.body] || 0) + 1; }); c[''] = inventory.length; return c; }, [inventory]); return (

{cats.map(c => (

{ window.FlacenterTracking?.track?.('inventory_filter', { search_body: c.key || 'all', form_id: 'category_tiles' }); setFilter(f => ({ ...f, body: c.key })); scrollToInv(); }}>

{e.currentTarget.style.display='none'; e.currentTarget.parentElement.classList.add('fallback-img');}} />

{c.name}

{counts[c.key] || 0} {t.inv.available}

))}

); } // ---------- Car Card ---------- function CarCard({ car, t, onOpen, onCompare, isCompared, openApply }) { const trackCarAction = (eventName, extra = {}) => window.FlacenterTracking?.track?.(eventName, { item_id: car.slug || car.id, vehicle_id: car.vehicleId, item_name: car.fullName, item_brand: car.make, item_category: car.body, price: car.cashPrice || car.price, currency: 'USD', ...extra }); return (

{ trackCarAction('select_item'); onOpen(car); }}>

{car.new && {t.inv.newTag}} {car.featured && !car.new && {t.inv.featuredTag}}

{ e.currentTarget.style.display='none'; e.currentTarget.parentElement.classList.add('fallback-img'); }} />

{car.fullName}

{car.carfaxUrl && ( {e.stopPropagation(); trackCarAction('carfax_click');}}> CARFAX )}

{car.year} · {fmt(car.miles)} mi · {car.trans}

{t.inv.cash}

${fmt(car.cashPrice || car.price)}

{t.inv.finance}

${fmt(car.financePrice || Math.round(car.price * 1.13))}

${fmt(Math.round((car.financePrice || car.price * 1.13) / 60 * 1.05))}{t.inv.perMonth}

{t.inv.taxFee}

e.stopPropagation()}> SMS e.stopPropagation()}> WhatsApp

); } Object.assign(window, { Icon, fmt, CtaStrip, Header, Hero, LeadBanner, CategoryTiles, CarCard });