e.stopPropagation()} style={{ position: 'relative', maxWidth: 560, background: 'var(--muurx-panel)', border: '1px solid var(--border-subtle)', overflow: 'hidden' }}>

Mee verdienen

Zo werkt het

Bent u klant bij MuurX en kent u iemand die stucwerk nodig heeft? Dan kunt u met ons meeverdienen. Raadt u MuurX aan bij vrienden, familie of buren, dan belonen wij u daarvoor met 1 euro per vierkante meter stucwerk dat wij bij die persoon opleveren.

Het werkt heel eenvoudig. In uw persoonlijke klantportaal geeft u door wie u heeft aangeraden. Zodra wij de klus bij die persoon hebben afgerond, schrijven wij het bedrag bij op uw tegoed. Dat tegoed kunt u op elk moment laten uitbetalen.

De persoon die u aandraagt hoeft zelf niets te doen of te vermelden. Een klantaccount ontvangt u van ons zodra u klant wordt bij MuurX.

Naar het klantportaal

); } function FaqItem({ item, open, onToggle }) { return (

{item.body ? (

{item.body}

) : (

{item.a}

)}

); } function Faq() { const [open, setOpen] = React.useState(0); const [infoOpen, setInfoOpen] = React.useState(false); const faqP = { margin: '0 0 13px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.65, color: 'var(--muurx-gray)' }; const checkRow = { display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.5, color: 'var(--muurx-gray)' }; const checkIcon = ( ); const items = [ ...FAQS, { q: 'Wat kun je vertellen over je werkwijze?', body: (

Bij MuurX werken wij met een duidelijke en professionele werkwijze. Eerst bekijken wij samen met de klant het project en bespreken we de wensen. Daarna ontvangt u een heldere offerte zonder verborgen kosten.

Na akkoord plannen wij het werk zorgvuldig in en zorgen wij voor een nette voorbereiding van de ruimte. Tijdens het werk focussen wij op strak stucwerk, snelheid en een schone afwerking.

Ons doel is dat klanten niet alleen tevreden zijn met het resultaat, maar ons ook met vertrouwen kunnen aanbevelen aan anderen.

) }, { q: 'Waarom kiezen klanten voor MuurX?', body: (

{['Strak resultaat', 'Duidelijke afspraken', 'Eerlijke prijzen', 'Nette afwerking', 'Gratis offerte binnen 24 uur'].map((t) => (

{checkIcon}{t}

))}

{checkIcon} Mee verdienen

) }, { q: 'Hoe snel kunnen jullie beginnen?', a: 'In veel gevallen kunnen wij snel starten met nieuwe projecten. Neem contact met ons op en wij bekijken samen de mogelijkheden. Vaak kunnen wij binnen korte tijd langskomen voor een offerte en planning.' }, ]; return (

Goed om te weten

Veelgestelde vragen

Staat uw vraag er niet tussen? Wij denken graag met u mee. Neem gerust contact met ons op.

Neem contact op

{items.map((item, i) => ( setOpen(open === i ? -1 : i)} /> ))}

{infoOpen && setInfoOpen(false)} />}

); } /* ============ LANDING ============ */ function StarCheck({ size = 32 }) { return ( ); } function TrustBar() { const stats = [ { icon: 'starcheck', l: 'Geverifieerde partners' }, { n: '10+', l: 'Jaar vakervaring' }, { n: '9.4', l: 'Gemiddelde klantbeoordeling' }, { n: 'NL', l: 'Actief door heel Nederland' }, ]; return (

{stats.map((s, i) => (

{s.icon === 'starcheck' ? : s.n}

{s.l}

))}

); } /* ---------------- Offerte via videogesprek + boekingssysteem ---------------- */ const CALL_SLOTS = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']; const isoDate = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); const langeDag = (d) => d.toLocaleDateString('nl-NL', { weekday: 'long', day: 'numeric', month: 'long' }); const zelfdeDag = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); function eersteWerkdag() { const d = new Date(); d.setHours(0, 0, 0, 0); do { d.setDate(d.getDate() + 1); } while (d.getDay() === 0 || d.getDay() === 6); return d; } /* 42 cellen (6 weken) voor een maandweergave die op maandag begint */ function kalenderCellen(maand) { const eerste = new Date(maand.getFullYear(), maand.getMonth(), 1); const offset = (eerste.getDay() + 6) % 7; return Array.from({ length: 42 }, (_, i) => new Date(eerste.getFullYear(), eerste.getMonth(), 1 - offset + i)); } /* Maandkalender in de stijl van een klassieke datumkiezer: pijltjes-navigatie, weekdagen ma t/m zo, dagen buiten de maand gedimd, verleden en weekenden doorgestreept, vandaag met een gouden stip. */ function MaandKalender({ maand, setMaand, geselecteerd, onKies, minDatum, maxDatum }) { const vandaag = new Date(); vandaag.setHours(0, 0, 0, 0); const cellen = kalenderCellen(maand); const huidigeMaand = new Date(vandaag.getFullYear(), vandaag.getMonth(), 1); const vorigeKan = maand.getTime() > huidigeMaand.getTime(); const volgendeKan = new Date(maand.getFullYear(), maand.getMonth() + 1, 1) <= maxDatum; const maandLabel = maand.toLocaleDateString('nl-NL', { month: 'long', year: 'numeric' }); const navBtn = (kan) => ({ width: 32, height: 32, display: 'grid', placeItems: 'center', background: 'none', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', cursor: kan ? 'pointer' : 'default', opacity: kan ? 1 : 0.3, }); return (

{maandLabel}

{['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'].map((w) => ( {w} ))}

{cellen.map((d, i) => { const buiten = d.getMonth() !== maand.getMonth(); const weekend = d.getDay() === 0 || d.getDay() === 6; const uit = weekend || d < minDatum || d > maxDatum; const gekozen = zelfdeDag(d, geselecteerd); const isVandaag = zelfdeDag(d, vandaag); return ( ); })}

); } function PlanCallSection() { const minDatum = React.useMemo(() => eersteWerkdag(), []); const maxDatum = React.useMemo(() => { const d = new Date(); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() + 60); return d; }, []); const [selDate, setSelDate] = React.useState(minDatum); const [maand, setMaand] = React.useState(new Date(minDatum.getFullYear(), minDatum.getMonth(), 1)); const [geboekt, setGeboekt] = React.useState([]); const [tijd, setTijd] = React.useState(null); const [f, setF] = React.useState({ naam: '', email: '', telefoon: '', opmerking: '' }); const [busy, setBusy] = React.useState(false); const [error, setError] = React.useState(null); const [done, setDone] = React.useState(null); // {datum, tijd, meet, email} const [stap, setStap] = React.useState(1); // Op mobiel splitsen we in 3 stappen (dag → tijd → gegevens), op desktop in 2. const [isMobile, setIsMobile] = React.useState(() => (typeof window !== 'undefined' ? window.matchMedia('(max-width: 820px)').matches : false)); React.useEffect(() => { const mq = window.matchMedia('(max-width: 820px)'); const on = () => setIsMobile(mq.matches); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []); const stappen = isMobile ? 3 : 2; React.useEffect(() => { setStap((s) => Math.min(s, stappen)); }, [stappen]); const capNL = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s); // bezette tijden ophalen voor de gekozen dag React.useEffect(() => { let actief = true; setGeboekt([]); (async () => { try { const cfg = window.MUURX_CONFIG || {}; const res = await fetch(cfg.SUPABASE_URL + '/functions/v1/plan-gesprek', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + cfg.SUPABASE_ANON_KEY, apikey: cfg.SUPABASE_ANON_KEY }, body: JSON.stringify({ action: 'beschikbaarheid', datum: isoDate(selDate) }), }); const data = await res.json().catch(() => ({})); if (actief && res.ok && Array.isArray(data.geboekt)) { setGeboekt(data.geboekt); setTijd((t) => (t && data.geboekt.includes(t) ? null : t)); } } catch (e) { /* alles beschikbaar tonen; de server controleert alsnog */ } })(); return () => { actief = false; }; }, [selDate]); const fieldS = { width: '100%', padding: '12px 13px', background: 'var(--muurx-black)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', color: 'var(--muurx-white)', fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, outline: 'none', boxSizing: 'border-box', }; const labS = { fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muurx-gray)', marginBottom: 7, display: 'block' }; const submit = async (e) => { e.preventDefault(); if (tijd == null) { setError('Kies eerst een datum en tijdstip.'); return; } setBusy(true); setError(null); try { const cfg = window.MUURX_CONFIG || {}; const res = await fetch(cfg.SUPABASE_URL + '/functions/v1/plan-gesprek', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + cfg.SUPABASE_ANON_KEY, apikey: cfg.SUPABASE_ANON_KEY }, body: JSON.stringify({ ...f, datum: isoDate(selDate), tijd }), }); const data = await res.json().catch(() => ({})); if (!res.ok) { setError(data.error || 'Er ging iets mis. Probeer het later opnieuw.'); } else { setDone({ datum: langeDag(selDate), tijd, meet: !!data.meet, email: f.email }); } } catch (err) { setError('Er ging iets mis. Controleer uw verbinding en probeer het opnieuw.'); } setBusy(false); }; const isDagStap = isMobile && stap === 1; const isTijdStap = (!isMobile && stap === 1) || (isMobile && stap === 2); const toonForm = stap === stappen; const kanVolgende = isTijdStap ? tijd != null : true; const subtitel = toonForm ? 'Vul uw gegevens in en bevestig' : isDagStap ? 'Kies een dag' : (isMobile && isTijdStap) ? 'Kies een tijd' : 'Kies een datum en tijd, via Google Meet'; const volgendeLabel = (isTijdStap && tijd == null) ? 'Kies een tijdstip' : 'Volgende'; const goldBtnBase = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '15px 22px', background: 'var(--muurx-gradient-gold)', color: '#141210', border: 'none', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', boxShadow: 'var(--glow-gold-soft)', }; const ghostNavBtn = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '15px 18px', cursor: 'pointer', background: 'none', color: 'var(--muurx-gold)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 12.5, letterSpacing: '0.12em', textTransform: 'uppercase', flex: 'none', }; const slotKnop = (t) => { const bezet = geboekt.includes(t); return ( ); }; const whatsappLine = (

Kunt u niet tussen 08:00 en 18:00 uur?{' '} Stuur ons een WhatsApp-bericht {' '}voor andere mogelijkheden.

); return (

{/* korte uitleg */}

Offerte via videogesprek

Plan een online gesprek

Geen zin om te wachten tot er iemand langs kan komen? Plan gewoon een videogesprek en laat uw project zien via de camera van uw telefoon. Onze expert kijkt live met u mee en berekent direct een eerlijke prijs, zodat u nog dezelfde dag weet waar u aan toe bent. Het kost u niets, u plant het wanneer het u uitkomt en omdat er niemand op en neer hoeft te rijden is het ook nog eens beter voor het milieu.

{/* boekingskaart */}

{done ? (

Gesprek ingepland!

{done.meet ? (

Uw videogesprek staat gepland voor {done.datum} om {done.tijd} uur. {' '}De afspraak is in uw agenda gezet en de uitnodiging met de Google Meet link is verstuurd naar {done.email}.

) : (

Uw videogesprek staat genoteerd voor {done.datum} om {done.tijd} uur. {' '}U ontvangt de uitnodiging met de Google Meet link op {done.email}.

)}

) : (

Plan uw videogesprek

{subtitel}

Stap {stap} / {stappen}

{toonForm ? (

✓ {capNL(langeDag(selDate))} om {tijd} uur

{error && (

{error}

)}

Naam setF({ ...f, naam: e.target.value })} style={fieldS} placeholder="Uw naam" />

E-mail setF({ ...f, email: e.target.value })} style={fieldS} placeholder="naam@voorbeeld.nl" />

Telefoon (optioneel) setF({ ...f, telefoon: e.target.value })} style={fieldS} placeholder="Zodat wij u eventueel kunnen bellen" />

Opmerking (optioneel)

setF({ ...f, opmerking: e.target.value })} style={{ ...fieldS, resize: 'vertical' }} placeholder="Bijvoorbeeld iets over uw project" /></div>
                    <button type="submit" disabled={busy} style={{ ...goldBtnBase, width: '100%', marginTop: 2, cursor: 'pointer', opacity: busy ? 0.6 : 1 }}>
                      {busy ? 'Bezig…' : 'Plan gesprek'}
                      <DSIcon name="arrowRight" size={16} strokeWidth={1.8} color="#141210" />
                    </button>
                  </form>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  {isDagStap ? (
                    <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: 'var(--muurx-panel)', marginBottom: 16 }}>
                      <MaandKalender maand={maand} setMaand={setMaand} geselecteerd={selDate}
                        onKies={(d) => { setSelDate(d); setTijd(null); }} minDatum={minDatum} maxDatum={maxDatum} />
                    </div>
                  ) : (isMobile && stap === 2) ? (
                    <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--muurx-panel)', padding: '16px 14px', marginBottom: 16 }}>
                      <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13, color: 'var(--muurx-white)', marginBottom: 12 }}>
                        Beschikbare tijden op {selDate.toLocaleDateString('nl-NL', { weekday: 'long', day: 'numeric', month: 'long' })}
                      </span>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                        {CALL_SLOTS.map(slotKnop)}
                      </div>
                    </div>
                  ) : (
                    <div className="mx-cal-wrap" style={{ display: 'flex', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: 'var(--muurx-panel)', marginBottom: 16 }}>
                      <MaandKalender maand={maand} setMaand={setMaand} geselecteerd={selDate}
                        onKies={(d) => { setSelDate(d); setTijd(null); }} minDatum={minDatum} maxDatum={maxDatum} />
                      <div className="mx-slot-col" style={{ width: 150, flex: 'none', borderLeft: '1px solid var(--border-subtle)', padding: '14px 12px', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
                        <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12.5, color: 'var(--muurx-white)', marginBottom: 10, textTransform: 'capitalize' }}>
                          {selDate.toLocaleDateString('nl-NL', { weekday: 'long', day: 'numeric' })}
                        </span>
                        <div className="mx-slot-scroll" style={{ overflowY: 'auto', maxHeight: 252, display: 'grid', gridTemplateColumns: '1fr', gap: 6, paddingRight: 4 }}>
                          {CALL_SLOTS.map(slotKnop)}
                        </div>
                      </div>
                    </div>
                  )}

<div style={{ display: 'flex', gap: 10 }}>
                    {stap > 1 && (
                      <button type="button" onClick={() => { setError(null); setStap(stap - 1); }} style={ghostNavBtn}>Terug</button>
                    )}
                    <button type="button" disabled={!kanVolgende} onClick={() => { setError(null); setStap(stap + 1); }}
                      style={{ ...goldBtnBase, flex: 1, cursor: kanVolgende ? 'pointer' : 'default', opacity: kanVolgende ? 1 : 0.5 }}>
                      {volgendeLabel}
                      {kanVolgende && <DSIcon name="arrowRight" size={16} strokeWidth={1.8} color="#141210" />}
                    </button>
                  </div>

{isTijdStap && whatsappLine}
                </React.Fragment>
              )}
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Diensten: blueprint + fading photo decor ---------------- */
function DienstenDecor() {
  return (
    <React.Fragment>
      <div aria-hidden="true" className="mx-decor" style={{ position: 'absolute', top: 30, left: -30, width: 400, opacity: 0.55, WebkitMaskImage: 'radial-gradient(115% 115% at 22% 25%, #000 26%, transparent 70%)', maskImage: 'radial-gradient(115% 115% at 22% 25%, #000 26%, transparent 70%)', pointerEvents: 'none' }}>
        <img src={S.url('uploads/Ontwerp zonder titel.webp')} alt="" style={{ display: 'block', width: '100%', height: 'auto', mixBlendMode: 'multiply' }} />
      </div>
      <svg aria-hidden="true" className="mx-decor" viewBox="0 0 400 300" style={{ position: 'absolute', top: 8, left: 20, width: 480, opacity: 0.13, pointerEvents: 'none', color: 'var(--muurx-black)' }} fill="none" stroke="currentColor" strokeWidth="1">
        <rect x="24" y="34" width="224" height="152" />
        <rect x="24" y="34" width="122" height="92" />
        <line x1="146" y1="34" x2="146" y2="186" />
        <line x1="24" y1="126" x2="146" y2="126" />
        <rect x="158" y="46" width="80" height="60" />
        <line x1="158" y1="146" x2="238" y2="146" />
        <circle cx="112" cy="228" r="34" />
        <line x1="60" y1="228" x2="164" y2="228" />
        <path d="M262 62 L366 62 L366 196 L262 196" />
        <line x1="262" y1="129" x2="366" y2="129" />
        <line x1="314" y1="62" x2="314" y2="196" />
        <line x1="30" y1="204" x2="248" y2="204" strokeDasharray="5 5" />
        <line x1="262" y1="30" x2="366" y2="30" strokeDasharray="5 5" />
      </svg>
    </React.Fragment>
  );
}

function ServiceLightCard({ s }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={S.url('diensten/' + s.slug + '.html')} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: 'relative', display: 'block', textDecoration: 'none', background: '#FFFFFF', border: '1px solid rgba(11,11,12,0.08)', borderRadius: 'var(--radius-md)', padding: '34px 30px 30px', transition: 'transform 260ms var(--ease-standard), box-shadow 260ms', transform: h ? 'translateY(-6px)' : 'none', boxShadow: h ? '0 28px 54px -26px rgba(11,11,12,0.5)' : '0 1px 0 rgba(11,11,12,0.05)' }}>
      <div aria-hidden={!h} style={{ position: 'absolute', top: -30, right: 20, width: 190, borderRadius: 'var(--radius-sm)', overflow: 'hidden', boxShadow: '0 22px 44px -18px rgba(11,11,12,0.65)', border: '3px solid #fff', transform: h ? 'rotate(-7deg) translateY(0) scale(1)' : 'rotate(-7deg) translateY(16px) scale(0.9)', opacity: h ? 1 : 0, transition: 'opacity 300ms var(--ease-standard), transform 360ms var(--ease-standard)', pointerEvents: 'none', zIndex: 6 }}>
        <S.Placeholder id={'card-' + s.slug} ratio="4 / 3" radius="0" label="" />
      </div>
      <span style={{ width: 56, height: 56, display: 'grid', placeItems: 'center', borderRadius: '50%', background: 'var(--muurx-gradient-gold)', boxShadow: 'var(--glow-gold-soft)' }}>
        <DSIcon name={s.icon} size={26} color="#141210" />
      </span>
      <h3 style={{ margin: '22px 0 12px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 22, color: 'var(--muurx-black)' }}>{s.title}</h3>
      <p style={{ margin: '0 0 20px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14.5, lineHeight: 1.6, color: 'var(--muurx-muted)', maxWidth: '34ch' }}>{s.short}</p>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muurx-gold-deep)' }}>
        Meer over deze dienst <DSIcon name="arrowRight" size={15} strokeWidth={1.8} color="var(--muurx-gold-deep)" />
      </span>
    </a>
  );
}

function Landing() {
  const trust = ['Vaste, ervaren vakmensen', 'Heldere afspraken & transparante prijzen', 'Nette werkplek, strak resultaat', 'Bewezen staat van dienst'];
  return (
    <div style={{ background: 'var(--muurx-black)' }}>
      <S.SiteHeader active="home" />

{/* HERO */}
      <section id="offerte" style={{ position: 'relative', overflow: 'hidden', background: 'var(--muurx-gradient-concrete)' }}>
        <div className="mx-hero-bg" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
          <S.Placeholder id="hero-bg" ratio="auto" radius="0" size="2400×1400" style={{ height: '100%', border: 'none', borderRadius: 0 }} label="Achtergrond: sfeervolle, warm belichte muur met stucwerk" />
        </div>
        <div aria-hidden="true" className="mx-hero-bg" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(11,11,12,0.86) 0%, rgba(11,11,12,0.6) 45%, rgba(11,11,12,0.3) 100%)' }} />
        {/* mobile-only: van photo as full hero background, text + buttons on top */}
        <div aria-hidden="true" className="mx-hero-bg-mobile" style={{ position: 'absolute', inset: 0 }}>
          <img src={S.url('uploads/Muurx bus.webp')} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,11,12,0.84) 0%, rgba(11,11,12,0.7) 42%, rgba(11,11,12,0.92) 100%)' }} />
        </div>
        <div className="mx-hero-grid" style={{ ...wrap, position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center', padding: '90px 40px' }}>
          <div>
            <div style={{ marginBottom: 22, textShadow: '0 2px 16px rgba(0,0,0,0.55)' }}><DSOverline>Stukadoor & klusdiensten · Heel Nederland</DSOverline></div>
            <h1 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 60, lineHeight: 1.03, letterSpacing: '0.01em', textTransform: 'uppercase', color: 'var(--muurx-white)', textShadow: '0 4px 28px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.8)' }}>Alles voor uw muur</h1>
            <p style={{ margin: '24px 0 28px', maxWidth: '48ch', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 17, lineHeight: 1.65, color: 'var(--muurx-gray)', textShadow: '0 2px 12px rgba(0,0,0,0.65)' }}>
              Een betrouwbaar bedrijf dat door heel Nederland werkt met de beste vakmensen in het vak. Wij groeien, leveren de beste service en willen de beste van Nederland zijn met een bewezen staat van dienst.
            </p>
            <ul className="mx-hero-trust" style={{ listStyle: 'none', margin: '0 0 34px', padding: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 22px' }}>
              {trust.map((t, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, color: 'var(--muurx-white)', textShadow: '0 2px 10px rgba(0,0,0,0.6)' }}>
                  <span style={{ width: 22, height: 22, flex: 'none', display: 'grid', placeItems: 'center', border: '1px solid var(--hairline-strong)', borderRadius: '50%' }}><DSIcon name="check" size={12} strokeWidth={2} /></span>{t}
                </li>
              ))}
            </ul>
            <div className="mx-hero-btns" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="#diensten" className="mx-hero-btn" style={{ textDecoration: 'none' }}><DSButton variant="ghost" size="lg">Bekijk diensten</DSButton></a>
              <a href="#over" className="mx-hero-btn mx-hide-mobile" style={{ textDecoration: 'none' }}><DSButton variant="ghost" size="lg">Over ons</DSButton></a>
              <a href={S.url('contact.html')} className="mx-hero-btn mx-show-mobile" style={{ textDecoration: 'none' }}>
                <button style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, width: '100%',
                  padding: '16px 24px', cursor: 'pointer', background: 'var(--muurx-gradient-gold)',
                  color: '#FFFFFF', border: 'none', borderRadius: 'var(--radius-sm)',
                  fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, letterSpacing: '0.14em',
                  textTransform: 'uppercase', boxShadow: 'var(--glow-gold-soft)',
                }}>
                  Gratis offerte aanvragen
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </button>
              </a>
            </div>
          </div>
          <div className="mx-hero-form"><S.QuoteForm /></div>
        </div>
      </section>

{/* OFFERTE VIA VIDEOGESPREK + BOEKING */}
      <PlanCallSection />

{/* DIENSTEN */}
      <section id="diensten" style={{ position: 'relative', overflow: 'hidden', background: 'var(--muurx-white)', padding: '104px 40px' }}>
        <DienstenDecor />
        <div style={{ ...wrap, position: 'relative' }}>
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 58px' }}>
            <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'center' }}><DSOverline>Onze diensten</DSOverline></div>
            <h2 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 46, lineHeight: 1.08, letterSpacing: '0.01em', color: 'var(--muurx-black)' }}>Vakmanschap in elke laag</h2>
            <p style={{ margin: '18px auto 0', maxWidth: '54ch', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.6, color: 'var(--muurx-muted)' }}>
              Van strak stucwerk tot netjes schilderwerk, bekijk elke dienst en ontdek precies wat wij voor uw muur kunnen betekenen.
            </p>
          </div>
          <div className="mx-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '44px 26px' }}>
            {S.SERVICES.map((s) => <ServiceLightCard key={s.slug} s={s} />)}
          </div>
        </div>
      </section>

{/* OVER ONS */}
      <section id="over" style={{ background: 'var(--muurx-white)', padding: '96px 40px', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div className="mx-2col" style={{ ...wrap, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ marginBottom: 14 }}><DSOverline>Over MuurX</DSOverline></div>
            <H2 style={{ fontSize: 34, color: 'var(--muurx-black)' }}>Een bedrijf dat levert</H2>
            <p style={{ margin: '0 0 18px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.65, color: 'var(--muurx-muted)', maxWidth: '48ch' }}>
              MuurX is een betrouwbaar bedrijf dat door heel Nederland werkt met de beste vakmensen in het vak. Wij zijn volop aan het groeien en hebben één doel: de beste service leveren en de beste stukadoor van Nederland worden.
            </p>
            <p style={{ margin: '0 0 26px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.65, color: 'var(--muurx-muted)', maxWidth: '48ch' }}>
              Met een bewezen staat van dienst weet u zeker dat het werk klopt. Strak, netjes en op tijd. Geen loze beloftes, wel een resultaat waar u trots op bent.
            </p>
            <a href="#offerte" style={{ textDecoration: 'none' }}><DSButton icon="arrowRight">Vraag een offerte aan</DSButton></a>
          </div>
          <S.Placeholder id="over-team" ratio="4 / 3" label="Team of vakman aan het werk: warm, professioneel, on-brand" size="1200×900" />
        </div>
      </section>

{/* TRUSTOO REVIEWS */}
      <TrustooReviews />

{/* LOCATIE */}
      <section id="locatie" style={{ position: 'relative', overflow: 'hidden', background: 'var(--muurx-white)', padding: '96px 40px' }}>
        {/* mobile-only: NL-kaart als subtiel, vervaagd watermerk achter de tekst */}
        <div aria-hidden="true" className="mx-locatie-bg" style={{ position: 'absolute', inset: 0, display: 'none', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
          <img src={S.url('uploads/NL Kaart Transparant.webp')} alt="" style={{ width: '124%', maxWidth: 'none', maxHeight: '92%', objectFit: 'contain', opacity: 0.16, mixBlendMode: 'multiply', WebkitMaskImage: 'radial-gradient(closest-side, #000 38%, transparent 82%)', maskImage: 'radial-gradient(closest-side, #000 38%, transparent 82%)' }} />
        </div>
        <div className="mx-2col" style={{ ...wrap, position: 'relative', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ marginBottom: 14 }}><DSOverline>Werkgebied</DSOverline></div>
            <H2 style={{ fontSize: 34, color: 'var(--muurx-black)' }}>Actief door heel Nederland</H2>
            <p style={{ margin: '0 0 24px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.65, color: 'var(--muurx-muted)', maxWidth: '46ch' }}>
              Waar u ook zit, via ons netwerk van zorgvuldig geselecteerde partners zijn wij in het hele land inzetbaar. Vanuit onze thuisbasis in Tzum (Friesland) tot in de Randstad en daarbuiten.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 20px', marginBottom: 28 }}>
              {['Friesland', 'Groningen', 'Drenthe', 'Overijssel', 'Flevoland', 'Gelderland', 'Utrecht', 'Noord-Holland', 'Zuid-Holland', 'Noord-Brabant'].map((p) => (
                <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, color: 'var(--muurx-muted)' }}>
                  <DSIcon name="mapPin" size={16} />{p}
                </div>
              ))}
            </div>
            <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, color: 'var(--muurx-muted)' }}>Niet zeker of wij bij u komen? Vraag het gerust, wij denken graag mee.</p>
          </div>
          <div className="mx-locatie-map" style={{ position: 'relative' }}>
            <img src={S.url('uploads/NL Kaart Transparant.webp')} alt="Kaart van Nederland, het werkgebied van MuurX" style={{ display: 'block', width: '100%', height: 'auto' }} />
          </div>
        </div>
      </section>

{/* FAQ + CTA — één doorlopende betonachtergrond */}
      <div style={{ background: 'var(--muurx-gradient-concrete)', borderTop: '1px solid var(--border-subtle)' }}>
        <Faq />

{/* CTA band */}
        <section style={{ position: 'relative', overflow: 'hidden', padding: '72px 40px', borderTop: '1px solid var(--border-subtle)', backgroundColor: 'var(--muurx-white)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -60, right: -100, width: 420, height: '200%', transform: 'skewX(-24deg)', opacity: 0.1, backgroundColor: 'var(--muurx-gold)' }} />
        <div style={{ ...wrap, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 30, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ margin: '0 0 8px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 30, color: 'var(--muurx-black)' }}>Klaar voor een strak resultaat?</h2>
            <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, color: 'var(--muurx-gray)' }}>Vraag vandaag nog een gratis, vrijblijvende offerte aan.</p>
          </div>
          <a href="#offerte" style={{ textDecoration: 'none' }}><DSButton size="lg" icon="arrowRight">Vraag gratis offerte aan</DSButton></a>
        </div>
      </section>
      </div>

<S.SiteFooter />
    </div>
  );
}

/* ---------------- Pakketten carousel ---------------- */
function PackageCard({ p }) {
  return (
    <div className="mx-pkg-card" style={{
      flex: '0 0 auto', width: 300, background: 'var(--muurx-panel)', border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-md)', padding: 26, display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <span style={{ alignSelf: 'flex-start', padding: '5px 11px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--hairline)', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muurx-gold)' }}>{p.size}</span>
      <div>
        <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 19, color: 'var(--muurx-white)' }}>{p.title}</h3>
        <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13.5, lineHeight: 1.55, color: 'var(--muurx-gray)' }}>{p.subtitle}</p>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-subtle)', whiteSpace: 'nowrap' }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 26, color: 'var(--muurx-gold)' }}>{p.price}</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 12.5, color: 'var(--muurx-muted)' }}>{p.unit}</span>
      </div>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
        {p.features.map((f, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, lineHeight: 1.45, color: 'var(--muurx-white)' }}>
            <span style={{ width: 18, height: 18, flex: 'none', marginTop: 1, display: 'grid', placeItems: 'center', border: '1px solid var(--hairline-strong)', borderRadius: '50%' }}><DSIcon name="check" size={10} strokeWidth={2} /></span>{f}
          </li>
        ))}
      </ul>
    </div>
  );
}

const hasSegments = packages.some((p) => p.segment);
  const shown = seg === 'alle' ? packages : packages.filter((p) => p.segment === seg || p.segment === 'beide');

return (
    <div>
      {hasSegments && (
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 24 }}>
          {segBtn('alle', 'Alles')}
          {segBtn('particulier', 'Particulier')}
          {segBtn('zakelijk', 'Zakelijk')}
        </div>
      )}
      {expanded ? (
        <div className="mx-pkg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
          {shown.map((p) => <PackageCard key={p.id} p={p} />)}
        </div>
      ) : (
        <div style={{ position: 'relative' }}>
          <div ref={trackRef} style={{ display: 'flex', gap: 22, overflowX: 'auto', scrollSnapType: 'x mandatory', paddingBottom: 6 }}>
            {shown.map((p) => (
              <div key={p.id} style={{ scrollSnapAlign: 'start' }}><PackageCard p={p} /></div>
            ))}
          </div>
          <button className="mx-carousel-arrow" onClick={() => scrollBy(-1)} aria-label="Vorige" style={{ position: 'absolute', top: '38%', left: -18, width: 40, height: 40, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'var(--muurx-black)', border: '1px solid var(--hairline)', cursor: 'pointer' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="2"><path d="M15 5l-7 7 7 7" /></svg>
          </button>
          <button className="mx-carousel-arrow" onClick={() => scrollBy(1)} aria-label="Volgende" style={{ position: 'absolute', top: '38%', right: -18, width: 40, height: 40, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'var(--muurx-black)', border: '1px solid var(--hairline)', cursor: 'pointer' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="2"><path d="M9 5l7 7-7 7" /></svg>
          </button>
        </div>
      )}
      <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center' }}>
        <button onClick={() => setExpanded(!expanded)} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, padding: '12px 22px', cursor: 'pointer',
          background: 'none', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-sm)',
          fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muurx-gold)',
        }}>
          {expanded ? 'Toon minder pakketten' : `Bekijk alle ${shown.length} pakketten`}
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="2.4" style={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 160ms' }}><path d="M5 9l7 7 7-7"/></svg>
        </button>
      </div>
      {addon && (
        <div style={{ marginTop: 30, padding: '18px 22px', background: 'var(--muurx-gradient-concrete)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
          <div>
            <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, color: 'var(--muurx-white)' }}>{addon.title}</span>
            <span style={{ marginLeft: 10, fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 14, color: 'var(--muurx-gold)' }}>{addon.price}</span>
          </div>
          <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 12.5, color: 'var(--muurx-muted)', maxWidth: '48ch' }}>{addon.note}</p>
        </div>
      )}
    </div>
  );
}

/* ---------------- Voor & na carousel ---------------- */
function BeforeAfterCarousel({ images }) {
  const [idx, setIdx] = React.useState(0);
  const [lightbox, setLightbox] = React.useState(false);
  const go = (dir) => setIdx((idx + dir + images.length) % images.length);
  const navBtn = { width: 32, height: 32, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'var(--muurx-black)', border: '1px solid var(--hairline)', cursor: 'pointer', flex: 'none' };
  return (
    <div>
      <button onClick={() => setLightbox(true)} style={{ display: 'block', width: '100%', padding: 0, border: 'none', background: 'none', cursor: 'zoom-in' }}>
        <img src={S.url(images[idx])} alt="Voor en na" style={{ display: 'block', width: '100%', height: 'auto' }} />
      </button>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
        <button onClick={() => go(-1)} aria-label="Vorige" style={navBtn}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="2"><path d="M15 5l-7 7 7 7" /></svg>
        </button>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--muurx-muted)' }}>{idx + 1} / {images.length}</span>
        <button onClick={() => go(1)} aria-label="Volgende" style={navBtn}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="2"><path d="M9 5l7 7-7 7" /></svg>
        </button>
      </div>
      {lightbox && (
        <div onClick={() => setLightbox(false)} style={{
          position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(11,11,12,0.92)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40, cursor: 'zoom-out',
        }}>
          <img src={S.url(images[idx])} alt="Voor en na" style={{ maxWidth: '90vw', maxHeight: '86vh', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-lg)' }} />
          <button onClick={() => setLightbox(false)} aria-label="Sluiten" style={{ position: 'absolute', top: 24, right: 28, width: 42, height: 42, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'var(--muurx-panel)', border: '1px solid var(--hairline)', cursor: 'pointer' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>
        </div>
      )}
    </div>
  );
}

/* ============ SERVICE DETAIL PAGE ============ */
function ServicePage({ slug }) {
  const s = S.serviceBySlug(slug);
  return (
    <div style={{ background: 'var(--muurx-black)' }}>
      <S.SiteHeader active="diensten" />

{/* breadcrumb + hero */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--muurx-gradient-concrete)', paddingTop: 40 }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -80, right: -160, width: 480, height: '160%', background: 'var(--muurx-gradient-gold)', transform: 'skewX(-24deg)', opacity: 0.12 }} />
        <div className="mx-pad-x" style={{ ...wrap, position: 'relative', padding: '0 40px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 28, fontFamily: 'var(--font-sans)', fontSize: 12, letterSpacing: '0.08em', color: 'var(--muurx-muted)' }}>
            <a href={S.url('index.html')} style={{ color: 'var(--muurx-muted)', textDecoration: 'none' }}>Home</a>
            <span>/</span><a href={S.url('index.html') + '#diensten'} style={{ color: 'var(--muurx-muted)', textDecoration: 'none' }}>Diensten</a>
            <span>/</span><span style={{ color: 'var(--muurx-gold)' }}>{s.title}</span>
          </div>
          <div style={{ paddingBottom: 72 }}>
            <div>
              <h1 style={{ margin: '0 0 20px', fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 52, lineHeight: 1.05, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--muurx-white)' }}>{s.title}</h1>
              <p style={{ margin: '0 0 30px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 17, lineHeight: 1.65, color: 'var(--muurx-gray)', maxWidth: '58ch' }}>{s.intro}</p>
              <a href={S.url('index.html') + '#offerte'} style={{ textDecoration: 'none' }}><DSButton size="lg" icon="arrowRight">Offerte voor {s.title.toLowerCase()}</DSButton></a>
            </div>
          </div>
        </div>
      </section>

{/* body */}
      <section style={{ background: 'var(--muurx-black)', padding: '84px 40px' }}>
        <div className="mx-svc-grid" style={{ ...wrap, display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gridTemplateRows: 'auto auto', columnGap: 56, rowGap: 32, alignItems: 'start' }}>
          <div style={{ gridColumn: 1, gridRow: 1 }}>
            <H2 style={{ fontSize: 30 }}>Wat wij doen</H2>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {s.doen.map((d, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.5, color: 'var(--muurx-white)' }}>
                  <span style={{ width: 26, height: 26, flex: 'none', marginTop: 1, display: 'grid', placeItems: 'center', border: '1px solid var(--hairline-strong)', borderRadius: 'var(--radius-sm)' }}><DSIcon name="check" size={14} strokeWidth={1.8} /></span>{d}
                </li>
              ))}
            </ul>
          </div>
          <aside style={{ gridColumn: 2, gridRow: 1 }}>
            <div style={{ background: 'var(--muurx-panel)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 30 }}>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, color: 'var(--muurx-white)', marginBottom: 18 }}>Wat zit erbij</div>
              <DSInclusionList items={s.inclusion} />
            </div>
          </aside>
          {s.beforeAfter && (
            <div style={{ gridColumn: 1, gridRow: 2 }}>
              <BeforeAfterCarousel images={s.beforeAfter} />
            </div>
          )}
          <div style={{ gridColumn: 2, gridRow: 2, position: 'relative', overflow: 'hidden', background: 'var(--muurx-gradient-concrete)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', padding: 28 }}>
            <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--muurx-gradient-gold)' }} />
            <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 20, color: 'var(--muurx-white)' }}>Gratis offerte</h3>
            <p style={{ margin: '0 0 18px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: 'var(--muurx-gray)' }}>Vrijblijvend en binnen 24 uur reactie.</p>
            <a href={S.url('index.html') + '#offerte'} style={{ textDecoration: 'none' }}><DSButton icon="arrowRight">Vraag aan</DSButton></a>
          </div>
        </div>
      </section>

{/* pakketten */}
      {s.packages && (
        <section style={{ background: 'var(--muurx-black)', padding: '0 40px 84px' }}>
          <div style={wrap}>
            <div style={{ marginBottom: 14 }}><DSOverline>Onze pakketten</DSOverline></div>
            <H2 style={{ fontSize: 30 }}>Kies het pakket dat bij uw project past</H2>
            <p style={{ margin: '0 0 40px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.65, color: 'var(--muurx-gray)', maxWidth: '62ch' }}>
              Van kleine reparaties tot grootschalige projecten. Hieronder ziet u onze pakketten met bijbehorende prijzen en wat er telkens is inbegrepen.
            </p>
            <PackagesCarousel packages={s.packages} addon={s.addon} />
            <div style={{ marginTop: 44, textAlign: 'center' }}>
              <p style={{ margin: '0 0 20px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.6, color: 'var(--muurx-gray)' }}>
                Niet zeker welk pakket het beste bij uw project past? Neem gerust contact met ons op, wij denken graag met u mee.
              </p>
              <a href={S.url('contact.html')} style={{ textDecoration: 'none' }}><DSButton size="lg" icon="arrowRight">Neem contact op</DSButton></a>
            </div>
          </div>
        </section>
      )}

<S.SiteFooter />
    </div>
  );
}

/* ============ CONTACT / OVER DE EIGENAAR ============ */
function ContactPage() {
  const MB = S.MUURX_BEDRIJF || {};
  const richP = { margin: '0 0 18px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.75, color: 'var(--muurx-muted)' };
  const richH = { margin: '38px 0 14px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, color: 'var(--muurx-black)' };
  const contactRow = { display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, color: 'var(--muurx-white)', textDecoration: 'none' };
  const contactIcon = { width: 30, height: 30, flex: 'none', display: 'grid', placeItems: 'center', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-sm)' };
  return (
    <div style={{ background: 'var(--muurx-white)' }}>
      <S.SiteHeader active="contact" />

{/* portret + rich text */}
      <section style={{ background: 'var(--muurx-white)', padding: '64px 40px 84px' }}>
        <div className="mx-contact-grid" style={{ ...wrap, display: 'grid', gridTemplateColumns: '0.82fr 1.18fr', gap: 60, alignItems: 'start' }}>
          <div className="mx-sticky-side" style={{ position: 'sticky', top: 96 }}>
            <div style={{ position: 'relative', overflow: 'hidden', padding: 24, background: 'var(--muurx-panel)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
              <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--muurx-gradient-gold)' }} />
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 18, color: 'var(--muurx-white)' }}>MuurX</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, color: 'var(--muurx-gold)', margin: '4px 0 18px', letterSpacing: '0.06em' }}>Alles voor uw muur</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
                <a href="tel:0638144883" style={contactRow}>
                  <span style={contactIcon}><DSIcon name="phone" size={14} /></span>06 38144883
                </a>
                <a href="mailto:muurx.info@gmail.com" style={{ ...contactRow, wordBreak: 'break-all' }}>
                  <span style={contactIcon}><DSIcon name="mail" size={14} /></span>muurx.info@gmail.com
                </a>
                {(MB.adres || MB.plaats) && (
                  <div style={{ ...contactRow, alignItems: 'flex-start' }}>
                    <span style={contactIcon}><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="1.6"><path d="M12 21s7-6.2 7-11a7 7 0 0 0-14 0c0 4.8 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></span>
                    <span>
                      {[MB.adres, [MB.postcode, MB.plaats].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
                      <span style={{ display: 'block', fontSize: 12, color: 'var(--muurx-muted)' }}>Let op: dit is geen bezoekadres.</span>
                    </span>
                  </div>
                )}
                <a href="https://www.instagram.com/muurx.stukadoor.fr01" target="_blank" rel="noopener noreferrer" style={contactRow}>
                  <span style={contactIcon}><S.FooterSocialIcon type="instagram" /></span>Instagram
                </a>
                <a href="https://www.facebook.com/profile.php?id=61587981926264" target="_blank" rel="noopener noreferrer" style={contactRow}>
                  <span style={contactIcon}><S.FooterSocialIcon type="facebook" /></span>Facebook
                </a>
              </div>
              {(MB.kvk || MB.btw) && (
                <div style={{ margin: '0 0 18px', paddingTop: 14, borderTop: '1px solid var(--border-subtle)', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 12, lineHeight: 1.7, color: 'var(--muurx-muted)' }}>
                  {MB.kvk && <div>KVK: {MB.kvk}</div>}
                  {MB.btw && <div>BTW: {MB.btw}</div>}
                </div>
              )}
              <a href={S.url('index.html') + '#offerte'} style={{ textDecoration: 'none' }}><DSButton icon="arrowRight">Vraag een offerte aan</DSButton></a>
            </div>
          </div>

<div id="over" style={{ scrollMarginTop: 90 }}>
            <div style={{ marginBottom: 16 }}><DSOverline tick={false}>Over ons</DSOverline></div>
            <h2 style={{ margin: '0 0 22px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 34, lineHeight: 1.15, color: 'var(--muurx-black)' }}>Over MuurX</h2>

<p style={richP}>
              MuurX is begonnen vanuit een simpele gedachte, als je goed werk levert komen klanten vanzelf terug. Wat begon met losse stukadoorklussen is uitgegroeid tot een bedrijf dat door heel Nederland strak, duurzaam en op maat werk levert, met dezelfde persoonlijke betrokkenheid als op de eerste dag.
            </p>
            <p style={richP}>
              Als eigenaar sta ik zelf op de projecten en houd ik de kwaliteit in de gaten van begin tot eind. Ik geloof in <strong style={{ color: 'var(--muurx-black)', fontWeight: 500 }}>heldere afspraken</strong>, een nette werkplek en een resultaat waar u tevreden over bent. Geen loze beloftes, gewoon vakwerk dat klopt.
            </p>

<h3 style={richH}>Hoe ik te werk ga</h3>
            <p style={richP}>
              Elk project begint met luisteren. Ik kom langs, denk mee over de beste aanpak en geef een duidelijke offerte, zonder kleine lettertjes. Tijdens de uitvoering houd ik u op de hoogte, werk ik stofarm en netjes, en lever ik pas op als het echt klopt.
            </p>
            <ul style={{ listStyle: 'none', margin: '0 0 8px', padding: 0, display: 'flex', flexDirection: 'column', gap: 13 }}>
              {[
                'Persoonlijk contact, u weet altijd met wie u werkt',
                'Duidelijke prijzen en een planning die klopt',
                'Alleen ervaren vakmensen die ik zelf heb uitgezocht',
                'Strak, sausklaar en op tijd opgeleverd',
              ].map((t, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.5, color: 'var(--muurx-black)' }}>
                  <span style={{ width: 26, height: 26, flex: 'none', marginTop: 1, display: 'grid', placeItems: 'center', border: '1px solid var(--hairline-strong)', borderRadius: 'var(--radius-sm)' }}><DSIcon name="check" size={14} strokeWidth={1.8} /></span>{t}
                </li>
              ))}
            </ul>

<h3 style={richH}>Waar ik naartoe werk</h3>
            <p style={richP}>
              Mijn doel is simpel, de beste stukadoor van Nederland worden. Niet de grootste, maar de betrouwbaarste, een naam waar mensen aan denken zodra het om hun muur gaat. Daarom blijf ik investeren in vakmanschap, in goede mensen en in de service die u van MuurX mag verwachten.
            </p>
            <p style={richP}>
              Ik lever nooit in op de kwaliteit van uw muur. Dat is en blijft mijn belofte aan u.
            </p>

<div style={{ marginTop: 44 }}>
              <div style={{ marginBottom: 16 }}><DSOverline tick={false}>Offerte aanvragen</DSOverline></div>
              <S.QuoteForm />
            </div>
          </div>
        </div>
      </section>

<S.SiteFooter />
    </div>
  );
}

/* ============ BLOG ============ */
function BlogCard({ b }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={S.url('blog/' + b.slug + '.html')} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none', background: 'var(--muurx-panel)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden', transition: 'transform 220ms var(--ease-standard), border-color 220ms', transform: h ? 'translateY(-4px)' : 'none', borderColor: h ? 'var(--hairline)' : 'var(--border-subtle)' }}>
      <S.Placeholder id={'blog-' + b.slug} ratio="16 / 9" radius="0" label="" />
      <div style={{ padding: '24px 24px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muurx-gold)', marginBottom: 12 }}>{b.cat}</div>
        <h3 style={{ margin: '0 0 12px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 19, lineHeight: 1.25, color: 'var(--muurx-white)' }}>{b.title}</h3>
        <p style={{ margin: '0 0 20px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: 'var(--muurx-gray)' }}>{b.excerpt}</p>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muurx-gold)' }}>
            Lees meer <DSIcon name="arrowRight" size={15} strokeWidth={1.8} />
          </span>
          <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 12, color: 'var(--muurx-muted)' }}>{b.date}</span>
        </div>
      </div>
    </a>
  );
}

function BlogIndex() {
  return (
    <div style={{ background: 'var(--muurx-black)' }}>
      <S.SiteHeader active="blog" />
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--muurx-gradient-concrete)', padding: '80px 40px 64px', borderBottom: '1px solid var(--border-subtle)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -80, right: -160, width: 480, height: '180%', background: 'var(--muurx-gradient-gold)', transform: 'skewX(-24deg)', opacity: 0.1 }} />
        <div style={{ ...wrap, position: 'relative' }}>
          <h1 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 52, lineHeight: 1.05, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--muurx-white)' }}>Blog & inzichten</h1>
          <p style={{ margin: '22px 0 0', maxWidth: '54ch', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 17, lineHeight: 1.65, color: 'var(--muurx-gray)' }}>
            Praktische kennis over stucwerk, schilderwerk en vakmanschap. Zo haalt u het beste uit uw muur.
          </p>
        </div>
      </section>
      <section style={{ background: 'var(--muurx-white)', padding: '80px 40px' }}>
        <div className="mx-cards-3" style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 26 }}>
          {S.BLOGS.map((b) => <BlogCard key={b.slug} b={b} />)}
        </div>
      </section>
      <S.SiteFooter />
    </div>
  );
}

{/* hero */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--muurx-gradient-concrete)', padding: '72px 40px 48px' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -80, right: -160, width: 480, height: '160%', background: 'var(--muurx-gradient-gold)', transform: 'skewX(-24deg)', opacity: 0.1 }} />
        <div style={{ ...wrap, position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 26, fontFamily: 'var(--font-sans)', fontSize: 12, letterSpacing: '0.08em', color: 'var(--muurx-muted)' }}>
            <a href={S.url('index.html')} style={{ color: 'var(--muurx-muted)', textDecoration: 'none' }}>Home</a>
            <span>/</span><a href={S.url('blog.html')} style={{ color: 'var(--muurx-muted)', textDecoration: 'none' }}>Blog</a>
            <span>/</span><span style={{ color: 'var(--muurx-gold)' }}>{b.cat}</span>
          </div>
          <div style={{ maxWidth: 820 }}>
            <div style={{ marginBottom: 16 }}><DSOverline tick={false}>{b.cat}</DSOverline></div>
            <h1 style={{ margin: '0 0 18px', fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 44, lineHeight: 1.1, color: 'var(--muurx-white)' }}>{b.title}</h1>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muurx-muted)' }}>{b.date} · MuurX</div>
          </div>
        </div>
      </section>

{/* body */}
      <section style={{ background: 'var(--muurx-white)', padding: '64px 40px 84px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {b.body.map((blk, i) => {
            if (blk.h) return <h2 key={i} style={blogH}>{blk.h}</h2>;
            if (blk.ul) return (
              <ul key={i} style={{ listStyle: 'none', margin: '0 0 26px', padding: 0, display: 'flex', flexDirection: 'column', gap: 13 }}>
                {blk.ul.map((t, j) => (
                  <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.55, color: 'var(--muurx-black)' }}>
                    <span style={{ width: 24, height: 24, flex: 'none', marginTop: 1, display: 'grid', placeItems: 'center', border: '1px solid var(--hairline-strong)', borderRadius: 'var(--radius-sm)' }}><DSIcon name="check" size={13} strokeWidth={1.8} /></span>{t}
                  </li>
                ))}
              </ul>
            );
            return <p key={i} style={blogP}>{blk.p}</p>;
          })}

<div style={{ marginTop: 44, position: 'relative', overflow: 'hidden', background: 'var(--muurx-gradient-concrete)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', padding: '30px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
            <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--muurx-gradient-gold)' }} />
            <div>
              <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 22, color: 'var(--muurx-white)' }}>Klaar voor een strak resultaat?</h3>
              <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, color: 'var(--muurx-gray)' }}>Vraag vrijblijvend een offerte aan. U ontvangt binnen 24 uur reactie.</p>
            </div>
            <a href={S.url('index.html') + '#offerte'} style={{ textDecoration: 'none' }}><DSButton icon="arrowRight">Vraag offerte aan</DSButton></a>
          </div>
        </div>
      </section>

{/* other blogs */}
      <section style={{ background: 'var(--muurx-panel)', padding: '72px 40px', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={wrap}>
          <div style={{ marginBottom: 26 }}><DSOverline>Meer uit onze kennisbank</DSOverline></div>
          <div className="mx-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 26 }}>
            {others.map((o) => <BlogCard key={o.slug} b={o} />)}
          </div>
        </div>
      </section>

<S.SiteFooter />
    </div>
  );
}

/* ---------------- Projecten ---------------- */
const _prange = (n, dir) => Array.from({ length: n }, (_, i) => dir + '/' + (i + 1) + '.jpeg');
const PROJECTS = [
  { slug: 'kornwerderzand', plaats: 'Kornwerderzand', voor: _prange(8, 'voor'), na: _prange(13, 'na'),
    info: 'Complete stucwerkklus in Kornwerderzand: wanden en plafond gingen van ruwe, kale ondergrond naar een strak, egaal en sausklaar eindresultaat.' },
  { slug: 'leeuwarden-2', plaats: 'Leeuwarden', voor: _prange(7, 'voor'), na: _prange(6, 'na'),
    info: 'Stucwerkproject in een kapruimte in Leeuwarden. De ruwe gipsplaten zijn volledig weggewerkt tot een gladde, sausklare afwerking rondom de dakconstructie.' },
  { slug: 'leeuwarden', plaats: 'Leeuwarden', fotos: _prange(14, 'fotos'),
    info: 'Stucwerkproject in Leeuwarden met meerdere ruimtes strak afgewerkt. Op de foto\'s ziet u het eindresultaat van begin tot eind.' },
  { slug: 'ferwerkt', plaats: 'Ferwerd', fotos: _prange(4, 'fotos'),
    info: 'Stucwerkklus in Ferwerd, netjes en secuur afgewerkt door het team van MuurX.' },
  { slug: 'heerenveen-2', plaats: 'Heerenveen', fotos: _prange(2, 'fotos'),
    info: 'Stucwerkproject in Heerenveen, opgeleverd met de vakkundige, strakke afwerking waar MuurX voor staat.' },
  { slug: 'heerenveen', plaats: 'Heerenveen',
    info: 'Stucwerkklus in Heerenveen, vastgelegd op video zodat u het resultaat in beweging kunt bekijken.' },
  { slug: 'lemmer', plaats: 'Lemmer',
    info: 'Stucwerkproject in Lemmer, van voorbereiding tot een strakke, sausklare oplevering.' },
];
const projMedia = (slug, rel) => S.url('projecten/' + slug + '/' + rel);
const projCover = (p) => projMedia(p.slug, 'video.mp4');
const projMeta = (p) => {
  const parts = ['Video'];
  if (p.voor || p.na) parts.push('Voor & na');
  else if (p.fotos) parts.push(p.fotos.length + ' foto\'s');
  return parts.join(' · ');
};

function ProjectFotoGrid({ urls, onOpen }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 12 }}>
      {urls.map((u, i) => (
        <button key={u} onClick={() => onOpen(i)} style={{ padding: 0, border: 'none', cursor: 'zoom-in', background: 'none', overflow: 'hidden', aspectRatio: '1 / 1' }}>
          <img src={u} loading="lazy" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </button>
      ))}
    </div>
  );
}

function ProjectDetail({ project, onClose }) {
  const [lb, setLb] = React.useState(null); // { images, index }
  const beforeAfter = !!(project.voor && project.na);
  const [tab, setTab] = React.useState('na'); // 'na' | 'voor'

React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape' && !lb) onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose, lb]);

const toUrls = (rels) => (rels || []).map((rel) => projMedia(project.slug, rel));
  const voorUrls = toUrls(project.voor);
  const naUrls = toUrls(project.na);
  const fotoUrls = toUrls(project.fotos);
  const activeUrls = tab === 'voor' ? voorUrls : naUrls;

return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 250, background: 'rgba(6,6,7,0.9)', overflowY: 'auto', padding: '32px 16px' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 940, margin: '0 auto', background: 'var(--muurx-panel)', border: '1px solid var(--border-subtle)', borderRadius: 0, overflow: 'hidden' }}>
        <div style={{ position: 'relative', padding: '22px 26px', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muurx-gold)' }}>Project</div>
            <h2 style={{ margin: '4px 0 0', fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 28, color: 'var(--muurx-white)' }}>{project.plaats}</h2>
          </div>
          <button aria-label="Sluiten" onClick={onClose} style={{ flex: 'none', width: 42, height: 42, display: 'grid', placeItems: 'center', background: 'var(--muurx-black)', border: '1px solid var(--hairline)', cursor: 'pointer' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--muurx-gold)" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>
        </div>

{beforeAfter && (
            <div style={{ marginTop: 30 }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', marginBottom: 18 }}>
                {segBtn('na', 'Na')}
                {segBtn('voor', 'Voor')}
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 12.5, color: 'var(--muurx-muted)' }}>
                  {tab === 'na' ? 'Het afgewerkte stucwerk' : 'De situatie voordat wij begonnen'}
                </span>
              </div>
              <ProjectFotoGrid urls={activeUrls} onOpen={(i) => setLb({ images: activeUrls, index: i })} />
            </div>
          )}
          {fotoUrls.length > 0 && (
            <div style={{ marginTop: 30 }}>
              <div style={sectionLabel}>Foto's</div>
              <ProjectFotoGrid urls={fotoUrls} onOpen={(i) => setLb({ images: fotoUrls, index: i })} />
            </div>
          )}
        </div>
      </div>
      {lb && (
        <ProjectLightbox images={lb.images} index={lb.index} onClose={() => setLb(null)}
          onIndex={(d) => setLb((s) => ({ ...s, index: (s.index + d + s.images.length) % s.images.length }))} />
      )}
    </div>
  );
}

function ProjectCard({ project, onOpen }) {
  return (
    <div className="mx-proj-card" style={{ display: 'flex', flexDirection: 'column', border: '1px solid var(--border-subtle)', borderRadius: 0, overflow: 'hidden', background: 'var(--muurx-panel)' }}>
      <div className="mx-proj-media" style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', background: 'var(--muurx-black)', overflow: 'hidden' }}>
        <video preload="metadata" muted playsInline className="mx-proj-img" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}>
          <source src={projCover(project) + '#t=0.1'} type="video/mp4" />
        </video>
        <div aria-hidden="true" style={{ position: 'absolute', top: 14, right: 14, width: 40, height: 40, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'rgba(20,18,16,0.7)', border: '1px solid var(--hairline)' }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="var(--muurx-gold)" stroke="none"><path d="M8 5v14l11-7z" /></svg>
        </div>
      </div>
      <div style={{ padding: '22px 24px 24px', borderTop: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muurx-gold)' }}>Project</div>
        <h2 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 24, color: 'var(--muurx-white)' }}>{project.plaats}</h2>
        <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 12.5, letterSpacing: '0.04em', color: 'var(--muurx-gray)' }}>{projMeta(project)}</div>
        {project.info && (
          <p style={{ margin: '4px 0 0', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: 'var(--muurx-gray)', flex: 1 }}>{project.info}</p>
        )}
        <div style={{ marginTop: 14 }}>
          <button onClick={onOpen} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 18px', cursor: 'pointer', background: 'var(--muurx-gradient-gold)', color: '#141210', border: 'none', borderRadius: 0, fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 11.5, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            Meer info
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#141210" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
          </button>
        </div>
      </div>
    </div>
  );
}

function ProjectenPage() {
  const [active, setActive] = React.useState(null);
  return (
    <div style={{ minHeight: '100vh', background: 'var(--muurx-black)' }}>
      <S.SiteHeader active="projecten" />
      <section style={{ padding: '64px 40px 90px' }}>
        <div style={{ maxWidth: 1160, margin: '0 auto' }}>
          <div style={{ marginBottom: 10 }}><DSOverline>Projecten</DSOverline></div>
          <h1 style={{ margin: '0 0 10px', fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 42, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--muurx-white)' }}>Ons werk</h1>
          <p style={{ margin: '0 0 40px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.7, color: 'var(--muurx-gray)', maxWidth: '60ch' }}>
            Een greep uit afgeronde stucwerkprojecten door heel Friesland. Bekijk per project de video en de foto's, inclusief voor en na beelden waar beschikbaar.
          </p>
          <div className="mx-proj-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
            {PROJECTS.map((p) => <ProjectCard key={p.slug} project={p} onOpen={() => setActive(p)} />)}
          </div>
        </div>
      </section>
      <S.SiteFooter />
      {active && <ProjectDetail project={active} onClose={() => setActive(null)} />}
    </div>
  );
}

/* ---------------- Countdown (naar 1 januari 2027) ---------------- */
function Countdown({ target }) {
  const calc = React.useCallback(() => {
    const diff = Math.max(0, target - Date.now());
    const d = Math.floor(diff / 86400000);
    const h = Math.floor((diff % 86400000) / 3600000);
    return { d, h };
  }, [target]);
  const [t, setT] = React.useState(calc);
  React.useEffect(() => {
    const id = setInterval(() => setT(calc()), 30000);
    return () => clearInterval(id);
  }, [calc]);

const cell = (val, label) => (
    <div style={{ minWidth: 170, padding: '30px 22px', background: 'var(--muurx-panel)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 64, lineHeight: 1, color: 'var(--muurx-white)', fontVariantNumeric: 'tabular-nums' }}>{String(val).padStart(2, '0')}</div>
      <div style={{ marginTop: 12, fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muurx-muted)' }}>{label}</div>
    </div>
  );
  return (
    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
      {cell(t.d, 'Dagen')}{cell(t.h, 'Uren')}
    </div>
  );
}

/* ---------------- Partner worden (franchise — binnenkort) ---------------- */
function PartnerPage() {
  const waLink = 'https://wa.me/31638144883?text=' + encodeURIComponent('Beste MuurX, ik heb interesse om partner te worden en heb een vraag over');
  const p = { margin: '0 0 16px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.75, color: 'var(--muurx-gray)' };
  return (
    <div style={{ minHeight: '100vh', background: 'var(--muurx-black)' }}>
      <S.SiteHeader active="partner" />
      <section style={{ position: 'relative', overflow: 'hidden', padding: '84px 40px 96px' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -60, right: -120, width: 460, height: 420, background: 'var(--muurx-gradient-gold)', transform: 'skewX(-24deg)', opacity: 0.08 }} />
        <div style={{ position: 'relative', maxWidth: 820, margin: '0 auto' }}>
          <div style={{ marginBottom: 10 }}><DSOverline>Partner worden</DSOverline></div>
          <h1 style={{ margin: '0 0 10px', fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 46, lineHeight: 1.08, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--muurx-white)' }}>
            Samenwerken onder MuurX
          </h1>
          <div style={{ display: 'inline-block', margin: '0 0 26px', padding: '7px 16px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--hairline-strong)', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muurx-gold)' }}>
            Binnenkort beschikbaar
          </div>

<p style={p}>
            We werken achter de schermen aan iets nieuws: binnenkort wordt het mogelijk om <strong style={{ color: 'var(--muurx-white)', fontWeight: 500 }}>onder
            de vlag van MuurX te gaan samenwerken</strong>. Zo kunt u met onze naam, werkwijze en kwaliteit aan de slag
            en samen bouwen aan het beste stukadoorsnetwerk van Nederland.
          </p>
          <p style={p}>
            De precieze voorwaarden en details volgen. Houd deze pagina in de gaten, want de teller hieronder telt af
            naar het moment dat we meer bekendmaken.
          </p>

<div style={{ margin: '44px 0 40px', textAlign: 'center' }}>
            <div style={{ marginBottom: 20, fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muurx-muted)' }}>Aftellen naar 1 januari 2027</div>
            <Countdown target={new Date('2027-01-01T00:00:00+01:00').getTime()} />
          </div>

<div style={{ padding: 26, background: 'var(--muurx-gradient-concrete)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius-lg)' }}>
            <h2 style={{ margin: '0 0 8px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 20, color: 'var(--muurx-white)' }}>Nu al vragen?</h2>
            <p style={{ margin: '0 0 18px', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: 'var(--muurx-gray)', maxWidth: '56ch' }}>
              Bent u geïnteresseerd of heeft u vragen over samenwerken met MuurX? Stuur ons gerust een bericht via WhatsApp,
              dan houden we u op de hoogte zodra de details bekend zijn.
            </p>
            <a href={waLink} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 24px', background: 'var(--muurx-gradient-gold)', color: '#141210', textDecoration: 'none', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 12.5, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              Vraag stellen via WhatsApp
              <DSIcon name="arrowRight" size={16} strokeWidth={1.8} color="#141210" />
            </a>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, color: 'var(--muurx-muted)' }}>Of bel <a href="tel:0638144883" style={{ color: 'var(--muurx-gold)', textDecoration: 'none' }}>06 38144883</a></div>
          </div>
        </div>
      </section>
      <S.SiteFooter />
    </div>
  );
}

/* ---------------- Privacyverklaring (AVG) ---------------- */
function PrivacyPage() {
  const b = S.MUURX_BEDRIJF || {};
  const bedrijfsregel = [b.naam, b.adres, [b.postcode, b.plaats].filter(Boolean).join(' '), b.land].filter(Boolean).join(', ');
  const idRegels = [
    b.kvk && 'KVK-nummer: ' + b.kvk,
    b.btw && 'BTW-nummer: ' + b.btw,
    b.email && 'E-mail: ' + b.email,
    b.telefoon && 'Telefoon: ' + b.telefoon,
  ].filter(Boolean);

return (
    <div style={{ minHeight: '100vh', background: 'var(--muurx-black)' }}>
      <S.SiteHeader active="" />
      <div style={pageWrap}>
        <div style={{ marginBottom: 6 }}><DSOverline>Juridisch</DSOverline></div>
        <h1 style={h1}>Privacyverklaring</h1>
        <p style={{ ...p, marginBottom: 28 }}>Laatst bijgewerkt: {new Date().toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })}. In deze verklaring leggen wij uit welke persoonsgegevens MuurX verwerkt, waarom, hoe lang en welke rechten u heeft.</p>

<h2 style={h2}>1. Wie is verantwoordelijk?</h2>
        <p style={p}>De verwerkingsverantwoordelijke voor uw gegevens is <span style={strong}>{bedrijfsregel || 'MuurX'}</span>. Dit adres is geen bezoekadres.</p>
        {idRegels.length > 0 && <ul style={{ paddingLeft: 20, margin: '0 0 14px' }}>{idRegels.map((r, i) => <li key={i} style={li}>{r}</li>)}</ul>}

<h2 style={h2}>2. Welke gegevens verwerken wij?</h2>
        <p style={p}>Afhankelijk van uw relatie met MuurX verwerken wij:</p>
        <ul style={{ paddingLeft: 20, margin: '0 0 14px' }}>
          <li style={li}><span style={strong}>Contactgegevens</span>: voor- en achternaam, e-mailadres en telefoonnummer.</li>
          <li style={li}><span style={strong}>Adres- en betaalgegevens</span>: adres, postcode, plaats en IBAN, uitsluitend om uitbetalingen van uw doorverwijs-tegoed te kunnen doen en op de bijbehorende factuur te vermelden.</li>
          <li style={li}><span style={strong}>Administratieve gegevens</span>: doorverwijzingen (aantal m²), opgebouwd tegoed, facturen en betaalstatus.</li>
        </ul>

<h2 style={h2}>3. Waarvoor en op welke grondslag?</h2>
        <ul style={{ paddingLeft: 20, margin: '0 0 14px' }}>
          <li style={li}>Het uitvoeren van onze overeenkomst en het doorverwijs-programma (uitvoering overeenkomst).</li>
          <li style={li}>Het uitbetalen van tegoed en het opstellen van facturen (uitvoering overeenkomst en wettelijke verplichting).</li>
          <li style={li}>Het voldoen aan onze wettelijke, met name fiscale, verplichtingen (wettelijke verplichting).</li>
        </ul>

<h2 style={h2}>4. Uw gegevens worden niet doorverkocht</h2>
        <p style={p}><span style={strong}>Wij verkopen uw persoonsgegevens niet</span> en delen ze niet met derden voor commerciële doeleinden. Wij delen gegevens uitsluitend met de dienstverleners die wij nodig hebben om onze dienst te leveren (zie hieronder), en alleen voor zover dat nodig is.</p>

<h2 style={h2}>5. Met wie delen wij gegevens (verwerkers)?</h2>
        <p style={p}>Wij maken gebruik van zorgvuldig geselecteerde dienstverleners die namens ons gegevens verwerken op basis van een verwerkersovereenkomst:</p>
        <ul style={{ paddingLeft: 20, margin: '0 0 14px' }}>
          <li style={li}><span style={strong}>Supabase</span>: database en accountbeheer (opslag binnen de EU, regio Frankfurt).</li>
          <li style={li}><span style={strong}>Resend</span>: verzending van transactionele e-mail (meldingen). Kan gegevens buiten de EU (VS) verwerken.</li>
          <li style={li}><span style={strong}>Google</span>: agenda- en videogesprek-planning wanneer u een gesprek boekt. Kan gegevens buiten de EU (VS) verwerken.</li>
        </ul>
        <p style={p}>Voor doorgifte buiten de EU steunen deze partijen op passende waarborgen zoals de EU-standaardcontractbepalingen.</p>

<h2 style={h2}>6. Hoe lang bewaren wij uw gegevens?</h2>
        <p style={p}>Wij bewaren uw gegevens niet langer dan nodig. Facturen en de bijbehorende administratie bewaren wij <span style={strong}>7 jaar</span> in verband met de wettelijke fiscale bewaarplicht. Overige gegevens verwijderen wij wanneer uw account wordt beëindigd en er geen bewaarplicht meer geldt.</p>

<h2 style={h2}>7. Beveiliging</h2>
        <p style={p}>Wij nemen passende technische en organisatorische maatregelen. Toegang tot uw gegevens is beperkt via row-level security en verloopt uitsluitend over een beveiligde (HTTPS-)verbinding.</p>

<h2 style={h2}>8. Cookies</h2>
        <p style={p}>Het klantportaal gebruikt uitsluitend functionele cookies die nodig zijn om u ingelogd te houden. Wij gebruiken geen tracking- of marketingcookies.</p>

<h2 style={h2}>9. Uw rechten</h2>
        <p style={p}>U heeft het recht op inzage, correctie, verwijdering, beperking, dataportabiliteit en bezwaar. Neem hiervoor contact op via <a href={'mailto:' + (b.email || 'muurx.info@gmail.com')} style={{ color: 'var(--muurx-gold)', textDecoration: 'none' }}>{b.email || 'muurx.info@gmail.com'}</a>. U heeft daarnaast het recht een klacht in te dienen bij de <span style={strong}>Autoriteit Persoonsgegevens</span>.</p>

<p style={{ ...p, marginTop: 36, fontSize: 13, color: 'var(--muurx-muted)' }}>Deze verklaring kan van tijd tot tijd worden bijgewerkt. Raadpleeg deze pagina voor de meest recente versie.</p>
      </div>
      <S.SiteFooter />
    </div>
  );
}

Object.assign(window, { Landing, ServicePage, ContactPage, BlogIndex, BlogPost, PrivacyPage, PartnerPage, ProjectenPage });

{props.children}

Wat onze klanten zeggen

Zo werkt het

Veelgestelde vragen

Plan een online gesprek

Gesprek ingepland!

Plan uw videogesprek