← back to Prestige Car Wash
public/index.html
171 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Prestige Car Wash — Hand Wash, Detail & Ceramic in the San Fernando Valley</title>
<meta name="description" content="Prestige Car Wash: no-pressure flat pricing, two-bucket hand wash, full detailing and ceramic coating across the San Fernando Valley. Every seat touched, guaranteed.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/pcw.css">
</head>
<body>
<nav class="nav"><div class="wrap row">
<div class="brand"><span class="mk">🚗</span><div>Prestige<br><small>Car Wash · SFV</small></div></div>
<button class="hamb" aria-label="Menu" aria-expanded="false" onclick="var o=document.getElementById('lnk').classList.toggle('open');this.setAttribute('aria-expanded',o)">☰</button>
<div class="links" id="lnk">
<a href="/" class="on">Home</a>
<a href="/services">Services</a>
<a href="/contact">Book / Contact</a>
<a class="btn" href="/contact">Book a Wash</a>
</div>
</div></nav>
<header class="hero"><div class="wrap">
<span class="pill">San Fernando Valley · Hand Wash & Detail</span>
<h1>The Prestige treatment,<br>without the upsell.</h1>
<p class="lead">Two-bucket hand wash, full-service detailing, and 9H ceramic coating across Sherman Oaks, Encino, Van Nuys, Studio City & the whole Valley. Flat pricing. Every seat touched, guaranteed.</p>
<div class="cta">
<a class="btn" href="/contact">Book a Wash</a>
<a class="btn ghost" href="/services">See Services & Pricing</a>
</div>
<div id="waitchip" style="display:none;margin-top:16px;padding:7px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:13.5px;width:fit-content" title=""></div>
</div></header>
<script>
// Honest "typical wait" chip on the hero — estimate from the demand model, not a live count.
fetch('/api/wait').then(r=>r.json()).then(w=>{const el=document.getElementById('waitchip');
el.innerHTML=`⏱️ ${w.day} is typically <b>${w.level.toLowerCase()}</b> — ${w.phrase}. <a href="/contact" style="color:inherit;text-decoration:underline">book ahead</a>`;
el.title=w.basis||'';el.style.display='';}).catch(()=>{});
</script>
<section class="section"><div class="wrap">
<h2>Why drivers switch to Prestige</h2>
<p class="sub">Built to fix what the Valley complains about most.</p>
<div class="grid" style="--cols:4">
<div class="card"><div class="body"><div class="cat">No games</div><div class="ttl">Flat, honest pricing</div><div class="blurb">The price on the sign is the price you pay. No commission-driven wax-and-polish pressure.</div></div></div>
<div class="card"><div class="body"><div class="cat">Guaranteed</div><div class="ttl">Every seat touched</div><div class="blurb">Back seats and door jambs included — always. Miss a spot? We re-do it free.</div></div></div>
<div class="card"><div class="body"><div class="cat">Paint-safe</div><div class="ttl">Two-bucket, no swirls</div><div class="blurb">Hand wash with foam cannon — safe for ceramic, matte, and PPF. No tunnel scratches.</div></div></div>
<div class="card"><div class="body"><div class="cat">Peace of mind</div><div class="ttl">48-hour rain check</div><div class="blurb">Rains within two days? Your next wash is on us. Fragrance-free option, too.</div></div></div>
</div>
</div></section>
<section class="section"><div class="wrap">
<h2>See the shine in motion</h2>
<p class="sub">Wash & wax, up close.</p>
<div class="card" style="max-width:820px;margin:0 auto">
<div class="media" id="heroClip" style="aspect-ratio:16/9">
<div class="ph"><div style="font-size:22px;font-weight:800;color:var(--ink)">✨ The two-bucket hand wash</div><div style="opacity:.75;margin-top:6px">Foam cannon · spot-free rinse · ceramic seal</div></div>
</div>
</div>
</div></section>
<section class="section"><div class="wrap">
<div class="row" style="display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap">
<div><h2>Popular services</h2><p class="sub">Flat pricing, no surprises.</p></div>
<a class="btn ghost" href="/services">View all & filter →</a>
</div>
<div class="grid" id="feat" style="--cols:4"></div>
</div></section>
<section class="section"><div class="wrap">
<h2>Visit us</h2>
<p class="sub">Serving the whole San Fernando Valley.</p>
<div class="grid" style="--cols:2">
<div class="card"><div class="body">
<div class="ttl" id="locName">Prestige Car Wash</div>
<div class="blurb" id="locAddr">San Fernando Valley, CA</div>
<div id="locHours" style="margin-top:8px"></div>
</div></div>
<div class="card"><div class="body">
<div class="ttl">Neighborhoods we serve</div>
<div class="blurb">Sherman Oaks · Encino · Van Nuys · Studio City · Northridge · Reseda · Tarzana · Woodland Hills · North Hollywood</div>
<a class="btn" href="/contact" style="margin-top:8px">Book a wash</a>
</div></div>
</div>
<div class="grid" id="locVideos" style="--cols:3;margin-top:16px"></div>
<div class="grid" id="locPhotos" style="--cols:6;margin-top:16px"></div>
</div></section>
<section class="section" id="findreview"><div class="wrap">
<h2>Find us — and tell the Valley</h2>
<p class="sub">We're a real, family-run shop. Look us up, get directions, and if we did right by your car, a review means the world.</p>
<!-- Links rendered server-side into #findReview from the REAL places() profiles; no star
numbers are reproduced on-page (they'd drift) — the live profile is the source of truth. -->
<div id="findReview" style="max-width:820px"></div>
</div></section>
<style>
#faq summary::-webkit-details-marker{display:none}
#faq summary{list-style:none}
#faq .faq-mk{display:inline-block;transition:transform .15s ease}
#faq details[open] .faq-mk{transform:rotate(45deg)}
</style>
<section class="section" id="faq"><div class="wrap">
<h2>Questions? Answered.</h2>
<p class="sub">The things drivers ask before booking — straight answers, no fine print.</p>
<!-- Accordion is rendered server-side into #faqList from faqs() so it ships in the HTML
and matches the FAQPage JSON-LD; native <details> + the CSS above need no JS. -->
<div id="faqList" style="max-width:820px"></div>
<div style="margin-top:20px"><a class="btn" href="/contact">Book a Wash</a></div>
</div></section>
<section class="section"><div class="wrap">
<div class="card" style="text-align:center;max-width:720px;margin:0 auto">
<div class="body">
<div class="cat">Coming soon</div>
<div class="ttl" style="font-size:22px">Unlimited Monthly Membership</div>
<div class="blurb">One flat monthly price, wash as often as you like — the same flat, honest pricing, no upsell. Memberships are launching soon. Want first access and founding-member pricing?</div>
<a class="btn" href="/contact?intent=membership" style="margin-top:12px">Join the membership list</a>
</div>
</div>
</div></section>
<footer class="foot"><div class="wrap">
© 2026 Prestige Car Wash · San Fernando Valley, CA · <a href="/services">Services</a> · <a href="/guides">Guides</a> · <a href="/contact">Book</a>
<div style="margin-top:6px;opacity:.7">Instagram @prestigecwash</div>
</div></footer>
<script>
fetch('/api/services?sort=featured').then(r=>r.json()).then(list=>{
const feat = list.filter(s=>s.featured).slice(0,4);
document.getElementById('feat').innerHTML = feat.map(s=>`
<div class="card">
<div class="media">${clip(s)}</div>
<div class="body">
<div class="cat">${s.category}</div>
<div class="ttl">${s.name}</div>
<div class="blurb">${s.blurb}</div>
<div class="row"><span class="price">${s.price_display||('$'+s.price)}</span><a class="btn" href="/contact?service=${encodeURIComponent(s.name)}">Book</a></div>
</div>
</div>`).join('');
});
function clip(s){
// Prefer generated video; fall back to still; fall back to placeholder.
return `<video src="/${s.media_clip}" muted loop autoplay playsinline
onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'ph',innerHTML:'🚿 ${s.name}'}))"></video>`;
}
// Hero: swap in the wash/wax clip ONLY if it exists; otherwise the branded copy stays.
(function(){
var v=document.createElement('video');
v.src='/media/full-service.mp4'; v.muted=v.loop=v.autoplay=v.playsInline=true;
v.style.cssText='width:100%;height:100%;object-fit:cover';
v.addEventListener('canplay',function(){ v.play&&v.play(); document.getElementById('heroClip').replaceChildren(v); });
})();
// Location block from Google Places (mock until the API key is added).
fetch('/api/places').then(r=>r.json()).then(p=>{
if(p.name) document.getElementById('locName').textContent=p.name;
document.getElementById('locAddr').textContent=(p.address||'San Fernando Valley, CA')+(p.phone?' · '+p.phone:'');
document.getElementById('locHours').innerHTML=(p.hours||[]).map(h=>
`<div style="padding:5px 0;border-top:1px solid var(--line);font-size:13px;color:var(--mut)">${h}</div>`).join('');
// Real business photos (server emits ready-to-use URLs: local paths or proxied Google refs).
const urls=p.photo_urls||[];
if(urls.length) document.getElementById('locPhotos').innerHTML=urls.map(u=>
`<img src="${u}${u.startsWith('/api/')?'?w=400':''}" loading="lazy" style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line)">`).join('');
// Real business videos (lot tour, wheel detail, member visit).
const vids=p.videos||[];
if(vids.length) document.getElementById('locVideos').innerHTML=vids.map(v=>
`<div class="card"><div class="media" style="aspect-ratio:16/9"><video src="${v.src}" ${v.poster?`poster="${v.poster}"`:''} muted loop autoplay playsinline style="width:100%;height:100%;object-fit:cover"></video></div>${v.label?`<div class="body"><div class="blurb" style="margin:0">${v.label}</div></div>`:''}</div>`).join('');
});
</script>
<a href="/slideshow" style="position:fixed;bottom:20px;right:20px;z-index:60;background:#c6a765;color:#12100e;font-family:system-ui,-apple-system,sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:11px 18px;border-radius:4px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.45)">▶ Present</a>
</body>
</html>