); } // ============================================ // Hero // ============================================ function Hero({ heroImage }) { return (

Uitvaartzorg sinds 1998

In stilte
begeleiden wij
u verder.

Bij een overlijden hoeft u niets meteen te weten of te beslissen. Wij komen langs, luisteren, en regelen samen met u wat nodig is, in uw eigen tempo.

Dag en nacht bereikbaar 020 123 4567 Ook 's nachts en in het weekend

Zacht ochtendlicht door takken in een rustig landschap

28 jaar ervaring

Klein team van drie

Aangesloten bij BGNU

Noord-Holland en het Gooi

); } // ============================================ // Direct contact bar // ============================================ function ContactBar() { return (

Iemand overleden?

Belt u ons gerust direct, ook buiten kantooruren.

020 123 4567 WhatsApp

); } // ============================================ // Diensten // ============================================ const DIENSTEN = [ { n: '01', title: 'Uitvaartbegeleiding', body: 'Persoonlijke begeleiding van het eerste gesprek tot de dag zelf. Wij regelen wat geregeld moet worden, en geven u de ruimte om er voor uw naasten te zijn.', }, { n: '02', title: 'Begrafenis', body: 'Een uitvaart op een begraafplaats van uw keuze, in alle rust voorbereid. Wij verzorgen de samenwerking met de begraafplaats en alle formaliteiten.', }, { n: '03', title: 'Crematie', body: 'Een crematieplechtigheid in een crematorium in de regio, of op een andere passende locatie. Met of zonder ceremonie, geheel zoals u wenst.', }, { n: '04', title: 'Voorregeling', body: 'Voor wie zelf wil vastleggen hoe afscheid genomen wordt. Een rustig gesprek aan tafel, geen verplichtingen, alles helder op papier voor uw nabestaanden.', }, ]; function Diensten() { return (

Wat wij doen

Vier vormen van zorg.

Iedere uitvaart is anders. Wij richten ons op wat past bij de overledene en bij u, niet op wat gangbaar is.

Of u kiest voor een begrafenis op een begraafplaats van uw keuze of een crematie in alle rust, wij begeleiden u vanaf het eerste gesprek tot de dag zelf, en regelen wat geregeld moet worden zodat u er voor uw naasten kunt zijn.

Voor wie zelf wil vastleggen hoe afscheid genomen wordt, bieden wij een vrijblijvende voorregeling aan tafel. Geen verplichtingen, alles helder op papier voor uw nabestaanden.

{DIENSTEN.map((d) => (

{d.n}

{d.title}

{d.body}

))}

); } // ============================================ // Werkwijze // ============================================ const STAPPEN = [ { n: 'I', title: 'U belt ons', body: 'U bereikt ons direct, dag en nacht. Wij luisteren eerst, er hoeven nog geen beslissingen genomen te worden. Vaak is een afspraak voor een huisbezoek de eerste stap.', }, { n: 'II', title: 'Wij komen bij u langs', body: 'Bij u thuis of op een andere plek waar u zich op uw gemak voelt. We maken samen een eerste plan, en bespreken wat er praktisch geregeld moet worden.', }, { n: 'III', title: 'Voorbereiding in uw tempo', body: 'In de dagen die volgen vullen we het plan verder in. Locatie, kist of mand, muziek, sprekers, bloemen, kaarten. Niets hoeft, alles kan.', }, { n: 'IV', title: 'De afscheidsdag', body: 'Wij zijn er die dag van begin tot eind. U hoeft alleen aanwezig te zijn, voor uzelf en voor uw naasten.', }, { n: 'V', title: 'Nazorg', body: 'Een paar weken na de uitvaart komen wij nog eens langs. Voor het afronden van papieren, en om te horen hoe het met u gaat.', }, ]; function Werkwijze() { return (

Werkwijze

Wat er gebeurt nadat u belt.

U hoeft niets voor te bereiden. Het enige wat van u verwacht wordt, is dat u belt. De rest komt op zijn tijd.

{STAPPEN.map((s) => (

{s.n}

{s.title}

{s.body}

))}

); } // ============================================ // Over ons // ============================================ function OverOns({ portraitImage }) { return (

Portret van uitvaartverzorger Marieke Vermeer in haar werkkamer

Over ons

Een klein bureau, met aandacht voor één familie tegelijk.

Mijn naam is Marieke Vermeer. Sinds 1998 begeleid ik families bij een afscheid. Wat begon als een eenmansbureau is nu een klein team van drie, bewust klein gehouden, omdat goede zorg vraagt om tijd.

Wij werken niet met pakketten en niet met vaste draaiboeken. Iedere familie is anders, iedere overledene was anders. Onze taak is om goed te luisteren en daarna pas voor te stellen wat passend zou kunnen zijn.

U vindt bij ons geen marketingverhaal. Wel een telefoon die altijd opgenomen wordt, en mensen die hun werk al lang en met overgave doen.

Marieke Vermeer Uitvaartverzorger sinds 1998

); } // ============================================ // Tarieven // ============================================ const TARIEVEN = [ { title: 'Sobere uitvaart', price: 'vanaf € 4.250', note: 'Crematie, kleine kring', body: 'Een ingetogen afscheid in besloten kring. Inclusief begeleiding, vervoer, opbaring en een eenvoudige plechtigheid. Geschikt voor wie kiest voor stilte boven ceremonie.', }, { title: 'Volledige uitvaart', price: 'vanaf € 7.900', note: 'Indicatie, gemiddelde wensen', body: 'Een volledige uitvaart met plechtigheid, koffietafel, rouwkaarten en bloemen. De meeste families kiezen voor iets in deze richting; de exacte invulling bepaalt u.', }, { title: 'Begrafenis', price: 'vanaf € 6.500', note: 'Exclusief grafrechten', body: 'Een begrafenis op een door u gekozen begraafplaats. Grafrechten en kosten van de begraafplaats verschillen per gemeente en zijn niet inbegrepen.', }, { title: 'Voorregeling', price: '€ 0', note: 'Vrijblijvend gesprek', body: 'Een gesprek aan tafel om vast te leggen hoe u afscheid genomen wilt zien. U bent ons niets verschuldigd. Het gesprek heeft alleen waarde als u die wilt.', }, ]; function Tarieven() { return (

Tarieven

Wat kost een uitvaart bij ons.

De kosten van een uitvaart hangen af van uw keuzes. Hieronder ziet u richtbedragen. Voor een precieze opgave maken wij vooraf altijd een schriftelijke begroting.

Geen verborgen kosten, geen verrassingen achteraf. Kosten van derden, zoals gemeente, begraafplaats of crematorium, brengen wij apart in rekening en verantwoorden wij in een heldere eindafrekening.

Een uitvaartverzekering dekt vaak een groot deel van de kosten. Wij helpen u bij het opvragen van uw polis en het indienen van de declaratie. Voor wie geen verzekering heeft, bespreken wij de mogelijkheden in alle openheid.

{TARIEVEN.map((t) => (

{t.title}

{t.price} {t.note}

{t.body}

))}

Een uitvaartverzekering dekt vaak een deel van de kosten. Wij helpen u bij het opvragen van uw polis en het indienen van de declaratie.

); } // ============================================ // Reviews // ============================================ const REVIEWS = [ { body: 'Wij hadden geen idee waar te beginnen toen mijn vader plotseling overleed. Marieke kwam dezelfde middag nog langs, dronk een kopje koffie mee, en heeft ons in de dagen daarna door alles heen geholpen zonder ooit te haasten.', attr: 'Familie de Wit, Amstelveen', }, { body: 'Wat me vooral is bijgebleven: er werd niets opgelegd. Toen wij twijfelden over de muziek, hebben we samen gewoon even gezeten. De stilte daarbij was waardevoller dan elk advies.', attr: 'Anneke, Haarlem', }, { body: 'Mijn moeder had alles vooraf met hen besproken. Daardoor wisten wij precies wat zij wilde, en konden we ons concentreren op afscheid nemen. Daar zijn we haar, en hen, nog altijd dankbaar voor.', attr: 'Familie Bouwman, Hilversum', }, { body: 'Een prijsopgave kregen we vooraf op papier. Geen verrassingen achteraf. Dat lijkt vanzelfsprekend, maar het gaf ons enorm veel rust in een verwarrende periode.', attr: 'Peter, Amsterdam', }, ]; function Reviews() { return (

Ervaringen van families

Wat anderen ons toevertrouwden.

{REVIEWS.map((r, i) => (

"{r.body}"

{r.attr}

))}

); } // ============================================ // Contact + form // ============================================ function ContactForm() { const [form, setForm] = useState({ naam: '', telefoon: '', bericht: '' }); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const validate = () => { const e = {}; if (!form.naam.trim()) e.naam = 'Vul uw naam in.'; if (!form.telefoon.trim()) e.telefoon = 'Vul uw telefoonnummer in.'; else if (!/^[\d\s\-+()]{8,}$/.test(form.telefoon.trim())) e.telefoon = 'Dit lijkt geen geldig telefoonnummer.'; return e; }; const onSubmit = (ev) => { ev.preventDefault(); const e = validate(); setErrors(e); if (Object.keys(e).length) return; setSubmitting(true); setTimeout(() => { setSubmitting(false); setSubmitted(true); }, 700); }; const update = (k, v) => { setForm((f) => ({ ...f, [k]: v })); if (errors[k]) setErrors((er) => ({ ...er, [k]: undefined })); }; if (submitted) { return (

Bericht ontvangen.

Dank u voor uw bericht. Wij nemen zo spoedig mogelijk contact met u op, meestal binnen het uur, ook 's avonds en in het weekend.

Heeft u haast? Belt u ons gerust op 020 123 4567.

); } return (

Korte vraag of verzoek.

Liever bellen? Dat kan altijd. Vult u liever iets in, dan nemen wij contact met u op.

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

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

Kort bericht (optioneel)

update('bericht', e.target.value)}
          rows={3}
        />
      </div>
      <button className="form__submit" type="submit" disabled={submitting}>
        {submitting ? 'Versturen…' : 'Verstuur bericht'}
        <Icon.ArrowRight />
      </button>
      <p className="form__privacy">
        Door dit formulier te versturen gaat u akkoord met onze{' '}
        <a href="#" onClick={(e) => { e.preventDefault(); window.openLegal && window.openLegal('privacy'); }}>privacyverklaring</a>.
        Uw gegevens worden uitsluitend gebruikt om contact met u op te nemen en niet gedeeld met derden.
      </p>
    </form>
  );
}

function Contact() {
  return (
    <section id="contact" className="section contact">
      <div className="container">
        <div className="contact__grid">
          <div>
            <p className="eyebrow" style={{ color: 'color-mix(in srgb, var(--bg) 60%, transparent)' }}>Contact</p>
            <h2 className="contact__title">Wij zijn er voor u, ook nu.</h2>
            <p className="contact__lede">
              Belt u ons gerust, op welk moment ook. Voor een eerste gesprek of een vraag waar u in deze dagen mee zit. Een verplichting is er niet.
            </p>
            <div className="contact__details">
              <div className="contact__detail">
                <p className="contact__detail-label">Telefoon, 24 uur</p>
                <p className="contact__detail-value">
                  <a href="tel:+31201234567">020 123 4567</a>
                </p>
              </div>
              <div className="contact__detail">
                <p className="contact__detail-label">WhatsApp</p>
                <p className="contact__detail-value">
                  <a href="https://wa.me/31612345678">06 1234 5678</a>
                </p>
              </div>
              <div className="contact__detail">
                <p className="contact__detail-label">E-mail</p>
                <p className="contact__detail-value">
                  <a href="mailto:contact@stillewegen.nl">contact@stillewegen.nl</a>
                </p>
              </div>
              <div className="contact__detail">
                <p className="contact__detail-label">Werkgebied</p>
                <p className="contact__detail-value">
                  Amsterdam, Amstelveen, Haarlem,<br/>Hilversum en omstreken.
                </p>
              </div>
              <div className="contact__detail">
                <p className="contact__detail-label">Bezoek op afspraak</p>
                <p className="contact__detail-value">
                  Singelweg 14, Amsterdam
                </p>
              </div>
            </div>
          </div>
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

// ============================================
// Beeldenstrip — sober gallery before contact
// ============================================
const GALLERY = [
  {
    src: 'img/Bloemkist.png',
    alt: 'Een kist met bloemen',
    cap: 'Een laatste groet, in bloei',
  },
  {
    src: 'img/Kaarsen.png',
    alt: 'Brandende kaarsen in stilte',
    cap: 'Licht, in alle stilte',
  },
  {
    src: 'img/Sieraden.png',
    alt: 'Sobere herinneringssieraden',
    cap: 'Een tastbare herinnering',
  },
];

function Beelden() {
  return (
    <section className="section section--alt beelden">
      <div className="container">
        <div className="beelden__head">
          <p className="eyebrow">In beelden</p>
          <h2 className="kicker">Een afscheid, in tonen van rust.</h2>
        </div>
        <div className="beelden__grid">
          {GALLERY.map((g, i) => (
            <figure key={i} className={`beelden__item beelden__item--${i}`}>
              <img src={g.src} alt={g.alt} loading="lazy" />
              <figcaption>{g.cap}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// Werkgebied
// ============================================
const REGIOS = [
  { plaats: 'Amsterdam', sub: 'Centrum, Oud-West, Zuid, Noord' },
  { plaats: 'Amstelveen', sub: 'En omliggende gemeenten' },
  { plaats: 'Haarlem', sub: 'Bloemendaal, Heemstede' },
  { plaats: 'Hilversum', sub: 'Het Gooi, \'s-Graveland' },
  { plaats: 'Almere', sub: 'Stad en buitengebied' },
  { plaats: 'Zaandam', sub: 'Zaanstreek' },
];

function Werkgebied() {
  return (
    <section id="werkgebied" className="section">
      <div className="container">
        <div className="werkgebied__grid">
          <div className="werkgebied__copy">
            <p className="eyebrow">Werkgebied</p>
            <h2 className="kicker">Waar wij u kunnen bijstaan.</h2>
            <p className="intro-lede">Wij werken in de regio Noord-Holland en het Gooi. Voor families daarbuiten denken wij graag mee. Een eerste gesprek is altijd kosteloos en vrijblijvend.</p>
            <p className="intro-lede">
              Of u nu in Amsterdam, Amstelveen, Haarlem, Hilversum, Almere of Zaandam woont, wij komen bij u langs, doorgaans nog dezelfde dag. Bij u thuis of op een andere plek waar u zich op uw gemak voelt.
            </p>
            <p className="intro-lede">
              Wij kennen de begraafplaatsen, crematoria en aulae in de regio. Daardoor kunnen wij snel schakelen en zorgvuldig samenwerken met de plekken die voor u en uw naasten betekenis hebben.
            </p>
          </div>
          <figure className="werkgebied__image">
            <img src="img/Kistenvervoer.png" alt="Zorgvuldig kistenvervoer" loading="lazy" />
          </figure>
        </div>
        <div className="regios">
          {REGIOS.map((r) => (
            <div key={r.plaats} className="regio">
              <h3 className="regio__plaats">{r.plaats}</h3>
              <p className="regio__sub">{r.sub}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// Footer
// ============================================
function SellSection() {
  return null;
}

// ============================================
// Sticky mobile actions
// ============================================
function StickyActions() {
  return (
    <div className="sticky-actions">
      <a href="tel:+31201234567" className="sticky-bel">
        <Icon.Phone /> Bel direct
      </a>
      <a href="https://wa.me/31612345678" className="sticky-wa">
        <Icon.Whatsapp /> WhatsApp
      </a>
    </div>
  );
}

// ============================================
// Cookie banner (Telecommunicatiewet art 11.7a + AVG)
// ============================================
function CookieBanner() {
  const [visible, setVisible] = useState(false);

useEffect(() => {
    try {
      if (!localStorage.getItem('cookieConsent')) setVisible(true);
    } catch (e) { setVisible(true); }
  }, []);

const setConsent = (value) => {
    try { localStorage.setItem('cookieConsent', value); } catch (e) {}
    setVisible(false);
  };

if (!visible) return null;

return (
    <div className="cookiebanner" role="dialog" aria-live="polite" aria-label="Cookiemelding">
      <div className="cookiebanner__inner">
        <div className="cookiebanner__copy">
          <p className="cookiebanner__title">Cookies op deze website</p>
          <p className="cookiebanner__text">
            Wij plaatsen alleen functionele cookies die nodig zijn om de website goed te laten werken.
            Voor het meten van bezoek vragen wij eerst uw toestemming.
            Lees meer in onze{' '}
            <a href="#" onClick={(e) => { e.preventDefault(); window.openLegal && window.openLegal('cookies'); }}>cookieverklaring</a>{' '}en{' '}
            <a href="#" onClick={(e) => { e.preventDefault(); window.openLegal && window.openLegal('privacy'); }}>privacyverklaring</a>.
          </p>
        </div>
        <div className="cookiebanner__actions">
          <button type="button" className="cookiebanner__btn cookiebanner__btn--ghost" onClick={() => setConsent('declined')}>
            Alleen noodzakelijk
          </button>
          <button type="button" className="cookiebanner__btn cookiebanner__btn--solid" onClick={() => setConsent('accepted')}>
            Akkoord
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================
// Legal modals (Privacy, Cookies, Voorwaarden)
// ============================================
const LEGAL_CONTENT = {
  privacy: {
    title: 'Privacyverklaring',
    body: (
      <>
        <p><em>Laatst bijgewerkt: april 2026</em></p>
        <p>
          Begrafenisondernemer.nl, gevestigd aan Singelweg 14, 1015 AB Amsterdam (KvK 12345678),
          is verantwoordelijk voor de verwerking van persoonsgegevens zoals weergegeven in deze privacyverklaring.
          Wij hechten grote waarde aan de bescherming van uw persoonsgegevens en verwerken deze in overeenstemming met de Algemene Verordening Gegevensbescherming (AVG).
        </p>
        <h4>Welke gegevens verwerken wij</h4>
        <ul>
          <li>Naam en contactgegevens (telefoonnummer, e-mailadres, adres)</li>
          <li>Gegevens van de overledene voor zover nodig voor de uitvoering van de uitvaart</li>
          <li>Polisgegevens van uitvaartverzekeringen, indien van toepassing</li>
          <li>Financiële gegevens voor facturatie</li>
          <li>Gegevens die u zelf invult op het contactformulier</li>
        </ul>
        <h4>Met welk doel</h4>
        <ul>
          <li>Het uitvoeren van de uitvaartdienstverlening</li>
          <li>Contact met u opnemen naar aanleiding van uw verzoek</li>
          <li>Het afhandelen van betalingen en het voldoen aan wettelijke administratieplichten</li>
          <li>Het afwikkelen van een uitvaartverzekering bij de verzekeraar</li>
        </ul>
        <h4>Bewaartermijn</h4>
        <p>
          Wij bewaren uw gegevens niet langer dan strikt noodzakelijk. Voor de fiscale administratie hanteren wij de wettelijke bewaartermijn van zeven jaar.
          Contactformuliergegevens van niet-klanten worden binnen één jaar verwijderd.
        </p>
        <h4>Delen met derden</h4>
        <p>
          Wij delen uw gegevens uitsluitend met derden voor zover dat noodzakelijk is voor de uitvoering van de uitvaart
          (zoals gemeente, begraafplaats, crematorium, drukker van rouwkaarten, en uw verzekeraar) of om te voldoen aan een wettelijke verplichting.
          Met deze partijen sluiten wij waar nodig een verwerkersovereenkomst.
        </p>
        <h4>Uw rechten</h4>
        <p>
          U heeft het recht op inzage, rectificatie of verwijdering van uw persoonsgegevens, het recht op beperking van de verwerking, het recht op gegevensoverdraagbaarheid,
          en het recht om uw toestemming in te trekken. Stuur uw verzoek naar contact@begrafenisondernemer.nl.
          U heeft ook het recht een klacht in te dienen bij de Autoriteit Persoonsgegevens.
        </p>
        <h4>Beveiliging</h4>
        <p>
          Wij nemen passende technische en organisatorische maatregelen om misbruik, verlies en onbevoegde toegang tegen te gaan.
          Verzending van het contactformulier verloopt via een beveiligde verbinding (TLS).
        </p>
      </>
    ),
  },
  cookies: {
    title: 'Cookieverklaring',
    body: (
      <>
        <p><em>Laatst bijgewerkt: april 2026</em></p>
        <p>
          Een cookie is een klein tekstbestand dat bij uw bezoek aan deze website op uw apparaat wordt geplaatst.
          Op basis van de Telecommunicatiewet en de AVG informeren wij u over de cookies die wij gebruiken.
        </p>
        <h4>Functionele cookies (geen toestemming nodig)</h4>
        <p>
          Deze cookies zijn noodzakelijk om de website goed te laten functioneren, bijvoorbeeld om uw cookievoorkeur en weergaveinstellingen te onthouden.
          Deze worden zonder voorafgaande toestemming geplaatst.
        </p>
        <h4>Analytische cookies (alleen na toestemming)</h4>
        <p>
          Wij gebruiken privacy-vriendelijke statistieken om te begrijpen hoe bezoekers de site gebruiken. Deze worden uitsluitend geplaatst nadat u op "Akkoord" heeft geklikt in de cookiebanner.
          IP-adressen worden geanonimiseerd en gegevens worden niet gedeeld met derden.
        </p>
        <h4>Geen tracking of marketingcookies</h4>
        <p>
          Wij plaatsen geen advertentie- of trackingcookies. Wij gebruiken geen sociale-media-pixels.
        </p>
        <h4>Toestemming intrekken</h4>
        <p>
          U kunt uw cookievoorkeur op elk moment wijzigen door uw browsergeschiedenis (cookies en site-gegevens) van deze site te verwijderen.
          Bij uw volgende bezoek krijgt u opnieuw de cookiebanner te zien.
        </p>
      </>
    ),
  },
  voorwaarden: {
    title: 'Algemene voorwaarden',
    body: (
      <>
        <p><em>Versie april 2026</em></p>
        <h4>Artikel 1. Toepasselijkheid</h4>
        <p>
          Deze algemene voorwaarden zijn van toepassing op alle overeenkomsten tussen Begrafenisondernemer.nl (hierna: de uitvaartverzorger) en de opdrachtgever, tenzij schriftelijk anders is overeengekomen.
        </p>
        <h4>Artikel 2. Totstandkoming overeenkomst</h4>
        <p>
          De overeenkomst komt tot stand op het moment dat de opdrachtgever de uitvaartverzorger mondeling of schriftelijk opdracht geeft tot het verzorgen van de uitvaart.
          Een schriftelijke offerte of begroting wordt zo spoedig mogelijk na de eerste bespreking aan de opdrachtgever verstrekt.
        </p>
        <h4>Artikel 3. Uitvoering</h4>
        <p>
          De uitvaartverzorger voert de werkzaamheden uit overeenkomstig de wensen van de opdrachtgever en de geldende wet- en regelgeving (waaronder de Wet op de lijkbezorging).
          Wijzigingen in de opdracht worden zo veel mogelijk schriftelijk vastgelegd.
        </p>
        <h4>Artikel 4. Tarieven en betaling</h4>
        <p>
          De tarieven worden vooraf in een begroting vastgelegd. Door- en bijkomende kosten van derden (zoals gemeente, begraafplaats of crematorium) worden separaat in rekening gebracht.
          Betaling dient plaats te vinden binnen veertien dagen na factuurdatum, tenzij anders overeengekomen.
        </p>
        <h4>Artikel 5. Annulering</h4>
        <p>
          Bij annulering van de opdracht door de opdrachtgever worden de tot dat moment gemaakte kosten en bestede uren in rekening gebracht.
        </p>
        <h4>Artikel 6. Aansprakelijkheid</h4>
        <p>
          De aansprakelijkheid van de uitvaartverzorger is beperkt tot het bedrag dat in het betreffende geval door de aansprakelijkheidsverzekeraar wordt uitgekeerd.
          Indirecte schade en gevolgschade zijn van vergoeding uitgesloten.
        </p>
        <h4>Artikel 7. Klachten</h4>
        <p>
          Klachten over de uitvoering dienen binnen veertien dagen na de uitvaart schriftelijk te worden ingediend bij de uitvaartverzorger.
          De uitvaartverzorger is aangesloten bij de Branchevereniging Gecertificeerde Nederlandse Uitvaartondernemingen (BGNU). De geschillenregeling van de BGNU is van toepassing.
        </p>
        <h4>Artikel 8. Toepasselijk recht</h4>
        <p>
          Op deze overeenkomst is uitsluitend Nederlands recht van toepassing. Geschillen worden voorgelegd aan de bevoegde rechter in het arrondissement Amsterdam.
        </p>
      </>
    ),
  },
};

function LegalModal({ id, onClose }) {
  const isOpen = !!(id && LEGAL_CONTENT[id]);

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

if (!isOpen) return null;
  const { title, body } = LEGAL_CONTENT[id];

return (
    <div className="legal-modal" role="dialog" aria-modal="true" aria-labelledby="legal-modal-title" onClick={onClose}>
      <div className="legal-modal__panel" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="legal-modal__close" onClick={onClose} aria-label="Sluiten">×</button>
        <h2 id="legal-modal-title" className="legal-modal__title">{title}</h2>
        <div className="legal-modal__body">{body}</div>
      </div>
    </div>
  );
}

// ============================================
// Tweaks panel
// ============================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "anthracite",
  "typePairing": "cormorant"
}/*EDITMODE-END*/;

function TweaksUI() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const { TweaksPanel, TweakSection, TweakRadio, TweakSelect } = window;

React.useEffect(() => {
    const root = document.documentElement;
    if (tweaks.palette === 'default') root.removeAttribute('data-palette');
    else root.setAttribute('data-palette', tweaks.palette);
    if (tweaks.typePairing === 'cormorant') root.removeAttribute('data-type');
    else root.setAttribute('data-type', tweaks.typePairing);
  }, [tweaks.palette, tweaks.typePairing]);

return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Kleurpalet" />
      <TweakSelect
        label="Palet"
        value={tweaks.palette}
        onChange={(v) => setTweak('palette', v)}
        options={[
          { value: 'default', label: 'Crème + diepgroen' },
          { value: 'anthracite', label: 'Steen + inktzwart' },
          { value: 'brown', label: 'Goudgeel + terracotta' },
          { value: 'bordeaux', label: 'Roze + bordeaux' },
          { value: 'slate', label: 'Eucalyptus + leigroen' },
          { value: 'sand', label: 'Mosterd + olijf' },
          { value: 'ink', label: 'Donker, inkt + amber' },
          { value: 'moss', label: 'Limoengroen + bos' },
          { value: 'midnight', label: 'Donker, nacht + koper' },
        ]}
      />
      <TweakSection label="Typografie" />
      <TweakSelect
        label="Kop-lettertype"
        value={tweaks.typePairing}
        onChange={(v) => setTweak('typePairing', v)}
        options={[
          { value: 'cormorant', label: 'Cormorant Garamond' },
          { value: 'garamond', label: 'EB Garamond' },
          { value: 'lora', label: 'Lora' },
          { value: 'fraunces', label: 'Fraunces' },
        ]}
      />
    </TweaksPanel>
  );
}

// ============================================
// App
// ============================================
const HERO_IMG = 'img/begraafplaats.png';
const PORTRAIT_IMG = 'img/Bloemen.png';

function App() {
  const [legalOpen, setLegalOpen] = useState(null);

useEffect(() => {
    window.openLegal = (id) => setLegalOpen(id);
    return () => { delete window.openLegal; };
  }, []);

React.useEffect(() => {
    const els = document.querySelectorAll('.section, .hero, .contactbar');
    els.forEach((el) => el.classList.add('reveal'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('reveal--in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

return (
    <>
      <DemoBar />
      <Header />
      <main>
        <Hero heroImage={HERO_IMG} />
        <ContactBar />
        <Diensten />
        <Werkwijze />
        <OverOns portraitImage={PORTRAIT_IMG} />
        <Tarieven />
        <Reviews />
        <Beelden />
        <Werkgebied />
        <Contact />
        <SellSection />
      </main>
      <Footer />
      <StickyActions />
      <CookieBanner />
      <LegalModal id={legalOpen} onClose={() => setLegalOpen(null)} />
      <TweaksUI />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);