/* global React */ const { useState, useEffect, useRef } = React; // ===== ICONS ===== const Icon = { Check: (p) => , Phone: (p) => , Mail: (p) => , Pin: (p) => , Shield: (p) => , Clock: (p) => , File: (p) => , Award: (p) => , ArrowRight: (p) => , ArrowUpRight: (p) => , Wrench: (p) => , Home: (p) => , Drop: (p) => , Layers: (p) => , Pipe: (p) => , Chimney: (p) => }; // ===== LOGO ===== function Logo({ small }) { return ( Loep Woningstoffering ); } // ===== NAV ===== function Nav({ onQuoteClick }) { return (
); } // ===== HERO ===== function Hero({ layout, onQuoteClick }) { return (

Strakke vloeren, slimme gordijnen en altijd een pootje gezelligheid erbij.

+31 6 37564310
); } // ===== USP STRIP ===== function USPStrip() { const items = [ { icon: Icon.Award, title: '10+ jaar werkervaring', sub: 'Sinds 2015 actief' }, { icon: Icon.File, title: 'Neem contact op', sub: 'Snel persoonlijk antwoord' }, { icon: Icon.Clock, title: '24/7 bereikbaar', sub: 'Spoeddienst bij schade' }, { icon: Icon.Shield, title: '10 jaar garantie', sub: 'Schriftelijk vastgelegd' }]; return (
{items.map((it, i) =>
{it.title} {it.sub}
)}
); } // ===== SERVICES ===== const SERVICES = [ { num: '01', slug: 'allround-vloerenlegger', icon: Icon.Layers, title: 'Allround vloerenlegger', image: 'assets/floor-herringbone.png', intro: 'Van een enkele plank vervangen tot een volledige vloer leggen — wij doen het netjes, snel en zonder verrassingen.', body: 'Onze vloerleggers werken met PVC, laminaat, parket, visgraat en tapijt. We egaliseren, repareren ondervloeren, leveren materiaal en plaatsen plinten. Eén ploeg van begin tot eind, vaste prijs vooraf.', bullets: ['PVC, laminaat, parket en visgraat', 'Egaliseren en ondervloeren', 'Plinten en afwerking', 'Vaste prijs, geen meerwerk achteraf'], timelineTitle: 'Van kale ondervloer tot opgeleverde visgraat.', timeline: [ { day: 'Dag 1', title: 'Egaliseren', desc: 'Ondervloer vlak getrokken en strak afgewerkt — de basis voor elke nette vloer.', image: 'assets/timeline/01-egalisatie.png' }, { day: 'Dag 2', title: 'Ondervloer leggen', desc: 'Geluiddempende ondervloer uitgerold, op maat gesneden en vastgezet.', image: 'assets/timeline/02-ondervloer.png' }, { day: 'Dag 3', title: 'Eerste banen visgraat', desc: 'Het patroon wordt uitgezet vanuit het midden — hier valt of staat de hele vloer.', image: 'assets/timeline/03-eerste-banen.png' }, { day: 'Dag 3', title: 'Pasmaken bij randen', desc: 'Op iedere hoek en doorgang wordt elk plankje individueel ingemeten en bijgesneden.', image: 'assets/timeline/04-pasmaken.png' }, { day: 'Dag 4', title: 'Woonkamer in vorm', desc: 'De ruimte krijgt karakter — visgraat met lichte kaderafwerking langs de wanden.', image: 'assets/timeline/05-woonkamer.png' }, { day: 'Dag 4', title: 'Drempels en doorgangen', desc: 'Naadloze overgangen tussen kamers, zonder zichtbare drempelprofielen.', image: 'assets/timeline/06-drempels.png' }, { day: 'Dag 5', title: 'Oplevering', desc: 'Vloer geveegd, gecheckt op gelijkmatigheid en klaar voor gebruik. Klant tevreden.', image: 'assets/timeline/07-oplevering.png' }] }, { num: '02', slug: 'elektrische-raamdecoratie', icon: Icon.Home, title: 'Elektrische raamdecoratie', image: 'assets/raamdecoratie.png', intro: 'Op afstand bediende rolgordijnen, plissés en duettes — strak ingemeten en netjes weggewerkt.', body: 'We leveren en monteren elektrische raamdecoratie van A-merken, met bediening via afstandsbediening, schakelaar of app. Bekabeling weggewerkt, koppelbaar met domotica, en altijd binnen één bezoek geplaatst.', bullets: ['Plissé, duette, rol- en vouwgordijnen', 'Bediening per afstand of app', 'Koppelbaar met domotica', 'Inmeten en monteren in één bezoek'], timelineTitle: 'Van losse motoren tot een stille druk op de knop.', timeline: [ { day: 'Dag 1', title: 'Voorbereiding op locatie', desc: 'Motoren, kabels en bedieningen worden uitgelegd en gecontroleerd voordat de eerste schroef wordt gezet.', image: 'assets/timeline-raam/01-voorbereiding.png' }, { day: 'Dag 1', title: 'Glasdak in beeld', desc: 'Voor de montage brengen we de hele constructie in kaart — elke rail moet exact tussen de spanten passen.', image: 'assets/timeline-raam/02-inmeten.png' }, { day: 'Dag 2', title: 'Rails en geleiders plaatsen', desc: 'De donkere geleiders worden in het glasdak gemonteerd, perfect parallel en strak afgewerkt.', image: 'assets/timeline-raam/03-rails.png' }, { day: 'Dag 2', title: 'Plissés op hoogte hangen', desc: 'Vakman op de ladder — elk plissé wordt boven het kozijn ingehangen en op de motor aangesloten.', image: 'assets/timeline-raam/04-montage.png' }, { day: 'Dag 3', title: 'Buitenaanzicht', desc: 'Van buiten ogen de plissés als één strakke lijn onder het glasdak — geen rommelige beugels of zichtbare bedrading.', image: 'assets/timeline-raam/05-buitenaanzicht.png' }, { day: 'Dag 3', title: 'Oplevering', desc: 'Klaar om te genieten. Met één druk op de knop dimt de zon en wordt de loft een aangename ruimte.', image: 'assets/timeline-raam/06-oplevering.png' }] }]; function Services({ onQuoteClick }) { return (
Onze diensten

Alles voor uw vloer,
in één opdracht.

Ik leg vloeren en installeer elektrische gordijnen met oog voor kwaliteit en afwerking. Bij iedere klus gaat mijn hond gezellig mee — een trouwe collega die vaak zorgt voor een glimlach bij de klant.

{SERVICES.map((s) =>
— {s.num}

{s.title}

{s.image ?
{s.title}
:

{s.desc}

} Lees meer )}
); } // ===== SERVICE DETAIL PAGE ===== function ServiceDetail({ service, onQuoteClick }) { const storageKey = 'loep-photos-' + service.slug; const [photos, setPhotos] = useState(() => { try {return JSON.parse(localStorage.getItem(storageKey) || '[]');} catch (e) {return [];} }); const [dragOver, setDragOver] = useState(false); const [lightbox, setLightbox] = useState(null); const fileInputRef = useRef(null); useEffect(() => { try {localStorage.setItem(storageKey, JSON.stringify(photos));} catch (e) {/* quota */} }, [photos, storageKey]); useEffect(() => {window.scrollTo(0, 0);}, [service.slug]); const addFiles = (files) => { const list = Array.from(files).filter((f) => f.type.startsWith('image/')); list.forEach((f) => { const reader = new FileReader(); reader.onload = (ev) => { setPhotos((p) => [...p, { id: Date.now() + '-' + Math.random().toString(36).slice(2, 8), src: ev.target.result, name: f.name, caption: '' }]); }; reader.readAsDataURL(f); }); }; const onDrop = (e) => { e.preventDefault(); setDragOver(false); if (e.dataTransfer.files && e.dataTransfer.files.length) addFiles(e.dataTransfer.files); }; const removePhoto = (id) => setPhotos((p) => p.filter((x) => x.id !== id)); const updateCaption = (id, caption) => setPhotos((p) => p.map((x) => x.id === id ? { ...x, caption } : x)); const clearAll = () => {if (confirm('Alle foto\'s verwijderen?')) setPhotos([]);}; return (
Terug naar diensten
Dienst — {service.num}

{service.title}

Bel direct
{service.timeline &&
Werk in beeld

{service.timelineTitle || 'Van eerste schets\ntot oplevering.'}

Een recent project, stap voor stap. Zo ziet het eruit als wij van begin tot eind doen wat we beloven.

    {service.timeline.map((step, i) =>
  1. {String(i + 1).padStart(2, '0')}
    {i < service.timeline.length - 1 &&
    }
    {step.day} · Stap {i + 1} van {service.timeline.length}

    {step.title}

    {step.desc}

    {step.title}
    2. )}
}
); } // ===== ABOUT ===== function About() { return (
Rick Diemeer, oprichter Loep Woningstoffering
Rick Diemeer Oprichter & vloerlegger

Hoi, ik ben Rick — woningstoffeerder.

Ik lever graag mooi werk af. Geen klus is voor mij "gewoon een klus". Ik let op details en ga pas weg als alles klopt.

Samen met mijn trouwe viervoeter Dirkje rijd ik dagelijks rond. We leggen vloeren en hangen raamdecoratie op. Mijn lengte komt daarbij goed van pas — bij lage plafonds sla ik het trapje vaak over.

Kwaliteit en afspraken nakomen staan bij mij voorop, maar minstens zo belangrijk: een goed gesprek en een kop koffie tussendoor.

Op zoek naar een stoffeerder met vakmanschap én persoonlijke aandacht? Dan kom ik graag een keer kennismaken!

); } // ===== QUOTE FORM ===== function QuoteForm({ mode }) { // mode: 'multi' | 'single' const [step, setStep] = useState(0); // 0,1,2 then 3 = success const [data, setData] = useState({ postcode: '', huisnr: '', services: [], naam: '', telefoon: '', email: '', bericht: '' }); const [errors, setErrors] = useState({}); const [pcStatus, setPcStatus] = useState(null); // null | 'checking' | 'ok' | 'no' const pcTimer = useRef(null); const update = (k, v) => setData((d) => ({ ...d, [k]: v })); // postcode check useEffect(() => { if (!data.postcode || data.postcode.length < 4) {setPcStatus(null);return;} setPcStatus('checking'); clearTimeout(pcTimer.current); pcTimer.current = setTimeout(() => { // Noord-Holland postcodes 1000-2199 globally const num = parseInt(data.postcode.slice(0, 4), 10); if (isNaN(num)) {setPcStatus('no');return;} setPcStatus(num >= 1000 && num <= 2199 ? 'ok' : 'no'); }, 600); return () => clearTimeout(pcTimer.current); }, [data.postcode]); const toggleService = (s) => { setData((d) => ({ ...d, services: d.services.includes(s) ? d.services.filter((x) => x !== s) : [...d.services, s] })); }; const validateStep = (s) => { const e = {}; if (mode === 'single' || s === 0) { if (!data.postcode || !/^\d{4}\s?[A-Za-z]{0,2}$/.test(data.postcode)) e.postcode = 'Vul een geldige postcode in'; if (!data.huisnr) e.huisnr = 'Huisnummer ontbreekt'; } if (mode === 'single' || s === 1) { if (data.services.length === 0) e.services = 'Kies minstens één dienst'; } if (mode === 'single' || s === 2) { if (!data.naam.trim()) e.naam = 'Vul uw naam in'; if (!data.telefoon || data.telefoon.replace(/\D/g, '').length < 9) e.telefoon = 'Vul een geldig telefoonnummer in'; if (!data.email || !/^\S+@\S+\.\S+$/.test(data.email)) e.email = 'Vul een geldig e-mailadres in'; } setErrors(e); return Object.keys(e).length === 0; }; const next = () => { if (validateStep(step)) setStep((s) => s + 1); }; const buildWaLink = () => { const lines = ['Hallo Rick, ik wil graag contact opnemen.', '']; if (data.naam) lines.push('Naam: ' + data.naam); if (data.telefoon) lines.push('Telefoon: ' + data.telefoon); if (data.email) lines.push('E-mail: ' + data.email); if (data.postcode || data.huisnr) lines.push('Adres: ' + [data.postcode, data.huisnr].filter(Boolean).join(' ')); if (data.services.length) lines.push('Dienst(en): ' + data.services.join(', ')); if (data.bericht) lines.push('Bericht: ' + data.bericht); return 'https://wa.me/31637564310?text=' + encodeURIComponent(lines.join('\n')); }; const submit = () => { if (mode === 'single') { if (!validateStep(0) || !validateStep(1) || !validateStep(2)) return; } else { if (!validateStep(2)) return; } window.open(buildWaLink(), '_blank', 'noopener'); setStep(3); }; const SERVICE_OPTIONS = [ 'Allround vloerenlegger', 'Elektrische raamdecoratie']; if (step === 3) { return (

Bijna klaar — verstuur uw bericht in WhatsApp.

We hebben WhatsApp voor u geopend met uw gegevens ingevuld. Druk daar op verzenden en we reageren persoonlijk. Werkt dat niet? Bereik ons hieronder.

Open WhatsApp Mail ons Bel ons
); } // Multi-step view if (mode === 'multi') { return (
Neem contact op
STAP {step + 1} / 3
{[0, 1, 2].map((i) => )}
{step === 0 &&

Eerst even checken: werken we bij u in de buurt?

update('postcode', e.target.value.toUpperCase())} /> {errors.postcode &&
{errors.postcode}
} {pcStatus === 'checking' &&
Controleren…
} {pcStatus === 'ok' &&
Top — we werken hier
} {pcStatus === 'no' &&
Buiten ons werkgebied — bel even, soms doen we 't toch
}
update('huisnr', e.target.value)} /> {errors.huisnr &&
{errors.huisnr}
}
} {step === 1 &&

Waarvoor heeft u ons nodig? (meerdere mogelijk)

{SERVICE_OPTIONS.map((s) => )}
{errors.services &&
{errors.services}
}
} {step === 2 &&

Bijna klaar — hoe kunnen we u bereiken?

update('naam', e.target.value)} /> {errors.naam &&
{errors.naam}
}
update('telefoon', e.target.value)} /> {errors.telefoon &&
{errors.telefoon}
}
update('email', e.target.value)} /> {errors.email &&
{errors.email}
}