/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, I, CarMedia, Nav, Footer, FabWa, useReveal, INVENTORY, fmtPrice, fmtKm, fullModel, fullVariant, useInventory, submitLead, submitWeb3Form, useGoogleReviews */ const { useState, useEffect } = React; /* ─── DATA ────────────────────────────────────────────────── */ /* FEATURED_CARS is derived inside via useInventory(). */ const SERVICES = [ { n: "01", id: "inkoop", title: "Inkoop & Verkoop", desc: "Verkoop je auto zonder gedoe — eerlijke prijs binnen 24 uur, direct uitbetaald." }, { n: "02", id: "import", title: "Import & Export", desc: "Wij halen jouw droomauto uit het buitenland, BPM en papierwerk volledig geregeld." }, { n: "03", id: "zoekopdracht", title: "Zoekopdracht", desc: "Specifieke wagen op het oog? Wij vinden 'm — afgestemd op jouw wensen en budget." }, { n: "04", id: "taxatie", title: "Taxatie", desc: "Onafhankelijke marktwaarde-bepaling met rapport — voor verkoop, verzekering of nalatenschap." }, ]; const TRUST_POINTS = [ { n: "01", title: "Volledig transparant", desc: "Geen verborgen kosten of kleine lettertjes. Wat je ziet, is wat je betaalt — altijd." }, { n: "02", title: "Persoonlijke begeleiding", desc: "Eén vast aanspreekpunt van eerste contact tot sleuteloverdracht. Wij kennen jouw dossier." }, { n: "03", title: "Internationaal netwerk", desc: "Direct contact met dealers en handelaren door heel Europa, BPM en papierwerk inbegrepen." }, { n: "04", title: "BOVAG-niveau service", desc: "Strikte voertuig-keuringen, garantie-opties en RDW-conforme afhandeling." }, ]; /* ─── HERO ────────────────────────────────────────────────── */ function GoogleReviewBadge() { const { rating, ratingCount, url, configured, loading } = useGoogleReviews(); const display = rating != null ? rating.toFixed(1).replace(".", ",") : "—"; const stars = rating || 0; return (
Google reviews Live
{loading ? "…" : display}
{[0, 1, 2, 3, 4].map((i) => ( ))}
Gebaseerd op {ratingCount != null ? ratingCount.toLocaleString("nl-NL") : "—"} reviews Bekijk alle →
); } function Hero({ overlayOpacity, brightness }) { const videoRef = React.useRef(null); const [showFallback, setShowFallback] = React.useState(true); React.useEffect(() => { const v = videoRef.current; if (!v) return; const onPlaying = () => setShowFallback(false); const onStalled = () => setShowFallback(true); v.addEventListener("playing", onPlaying); v.addEventListener("pause", onStalled); v.addEventListener("error", onStalled); // Probeer expliciet af te spelen; in iPhone-energiebesparingsmodus wordt // autoplay geweigerd — dan blijft de backup-afbeelding staan. const p = v.play && v.play(); if (p && typeof p.catch === "function") p.catch(() => setShowFallback(true)); return () => { v.removeEventListener("playing", onPlaying); v.removeEventListener("pause", onStalled); v.removeEventListener("error", onStalled); }; }, []); const heroUsps = [ { icon: , title: "Eerlijke prijs", sub: "Transparant, geen verborgen kosten" }, { icon: , title: "Import & export", sub: "BPM en papierwerk volledig geregeld" }, { icon: , title: "4,9/5 reviews", sub: "AutoScout24 · Marktplaats · Google" }, { icon: , title: "Gevestigd in Ede", sub: "Op afspraak, snel bereikbaar" }, ]; return (
Abba Automotive · sinds 2021

De beste deal
voor jouw auto.

Inkoop, verkoop en import/export met volledige transparantie. Persoonlijke service, eerlijke prijs, zorgeloos de weg op.

    {heroUsps.map((u, i) => (
  • {u.title}
    {u.sub}
  • ))}
); } /* ─── USP STRIP ───────────────────────────────────────────── */ function UspStrip() { const items = [ { icon: , title: "Eerlijke prijs", sub: "Transparant, geen verborgen kosten" }, { icon: , title: "Import & export", sub: "BPM en papierwerk volledig geregeld" }, { icon: , title: "4,9/5 reviews", sub: "AutoScout24 · Marktplaats · Google" }, { icon: , title: "Gevestigd in Ede", sub: "Op afspraak, snel bereikbaar" }, ]; return (
{items.map((u, i) => (
{u.icon}{u.title}
{u.sub}
))}
); } /* ─── MERKEN STRIP ────────────────────────────────────────── */ const BRANDS = [ { name: "Audi", file: "assets/brands/audi.png" }, { name: "BMW", file: "assets/brands/bmw.png" }, { name: "Kia", file: "assets/brands/kia.png", dark: true }, { name: "Mercedes-Benz", file: "assets/brands/mercedes-benz.png" }, { name: "Peugeot", file: "assets/brands/peugeot.png", dark: true }, { name: "SEAT", file: "assets/brands/seat.png", dark: true }, { name: "Volkswagen", file: "assets/brands/volkswagen.png", dark: true }, { name: "Volvo", file: "assets/brands/volvo.png" }, ]; function BrandStrip() { // Dupliceer voor naadloze marquee-loop. const loop = [...BRANDS, ...BRANDS]; return (
Merken waarmee wij werken {BRANDS.length} merken · doorlopend uitgebreid
{loop.map((b, i) => (
= BRANDS.length} data-brand={b.name.toLowerCase().replace(/[^a-z]/g, "")} title={b.name} > {b.name}
))}
); } /* ─── AANBOD (nieuwste binnen) ────────────────────────────── */ function FeaturedAanbod() { const { cars, fromLive } = useInventory(); // De 3 nieuwste auto's — exact dezelfde set die elders de "Nieuw binnen"-badge // krijgt (zie flagNewest in shared.jsx), zodat homepage en aanbod consistent zijn. const NEWEST = cars .filter((c) => c._isNew) .sort((a, b) => (b.voertuignr_hexon || 0) - (a.voertuignr_hexon || 0)); return (
Net binnengekomen

De nieuwste auto's
vers uit de voorraad.

Rechtstreeks uit onze live voorraad — zodra een auto wordt aangemeld, verschijnt hij hier. Elke wagen persoonlijk geïnspecteerd en klaar voor proefrit.

Live voorraad Volledig aanbod
{NEWEST.map((c) => (

{fullModel(c)}

{fullVariant(c)}
Carrosserie
{c.carrosserie}
Bouwjaar
{c.bouwjaar}
Brandstof
{c.brandstof}
KM-stand
{fmtKm(c.tellerstand)}
Vanaf{fmtPrice(c.verkoopprijs_particulier)}
Bekijk
))}
); } /* ─── DIENSTEN ────────────────────────────────────────────── */ function Diensten() { return (
Diensten

Wat wij voor jou
kunnen betekenen.

Vier diensten, één aanpak: persoonlijk, transparant en met oog voor detail. Wij begeleiden je van eerste vraag tot sleuteloverdracht.

{SERVICES.map((s, i) => (
{s.n}

{s.title}

{s.desc}

Meer over {s.id}
))}
); } /* ─── TRUST ───────────────────────────────────────────────── */ function Trust() { return (
Waarom Abba

Vertrouwen wordt
verdiend, niet beloofd.

Bij Abba Automotive draait alles om vertrouwen, transparantie en service.

Met jarenlange ervaring in de autobranche en een passie voor kwaliteit zorgen wij ervoor dat élke klant met een goed gevoel wegrijdt. Geen verborgen kosten of loze beloftes — maar duidelijke afspraken, persoonlijke aandacht en een eerlijke prijs.

{TRUST_POINTS.map((p) => (
{p.n}
{p.title}
{p.desc}
))}
); } /* ─── NIEUWSBRIEF ────────────────────────────────────────── */ function Newsletter() { const [email, setEmail] = useState(""); const [status, setStatus] = useState("idle"); // idle | sending | ok | err const submit = async (e) => { e.preventDefault(); if (status === "sending") return; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setStatus("err"); return; } setStatus("sending"); const r = await submitWeb3Form({ subject: "Nieuwe nieuwsbrief-inschrijving", from_name: "Nieuwsbrief", email, Inschrijving: email, message: `Nieuwe nieuwsbrief-inschrijving via de website: ${email}`, }); setStatus(r && r.success ? "ok" : "err"); }; return (

Nieuw aanbod als eerste in je inbox.

Schrijf je in voor onze nieuwsbrief — geen spam, alleen nieuwe occasions en exclusieve import-vondsten.

{status === "ok" ? (
Bedankt — je staat op de lijst.
) : (
{ setEmail(e.target.value); if (status === "err") setStatus("idle"); }} />
{status === "err" && (

Controleer je e-mailadres en probeer het opnieuw.

)}
)}
); } /* ─── TWEAKS ──────────────────────────────────────────────── */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "gold", "displayFont": "sans", "heroOverlay": 0.55, "heroBright": 0.85 }/*EDITMODE-END*/; function Tweaks({ children }) { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.body.dataset.palette = t.palette; document.body.dataset.displayFont = t.displayFont; }, [t.palette, t.displayFont]); return ( <> {typeof children === "function" ? children(t) : children} setTweak("palette", v)} /> setTweak("displayFont", v)} /> Math.round(v * 100) + "%"} onChange={(v) => setTweak("heroOverlay", v)} /> Math.round(v * 100) + "%"} onChange={(v) => setTweak("heroBright", v)} /> ); } /* ─── APP ─────────────────────────────────────────────────── */ function App() { useReveal(); return ( {(t) => ( <>