// sections.jsx — alle pagina-secties als losse componenten. const { useState, useEffect, useMemo, useRef } = React; // ── Book cover placeholder (stylized) ──────────────────────────────────────── function BookCover({ book, size = "md" }) { const palettes = { warm: { a: "#3a1f15", b: "#7a2d1a", c: "#e9b894" }, blue: { a: "#0e1a2b", b: "#1d3554", c: "#7ea4cf" }, ink: { a: "#0a0a0c", b: "#1c1c22", c: "#a39d8f" }, olive: { a: "#1e2316", b: "#3a4326", c: "#b8b58a" }, rust: { a: "#2a160e", b: "#5e2818", c: "#d99a73" }, }; const p = palettes[book.omslag] || palettes.ink; const dims = { sm: [120, 180], md: [220, 330], lg: [320, 480] }[size]; // Real cover from Elikser, if available if (book.cover) { return (
{`Omslag
); } // Stylized placeholder for books without uploaded cover yet return (
Gerard Legerstee
{book.titel}
{book.genre} · {book.jaar}
{book.isUpcoming && (
Najaar 2026
)}
); } // ── Hamburger nav ──────────────────────────────────────────────────────────── function HamburgerNav({ open, setOpen, activeView, onNavigate }) { const items = [ { id: "home", label: "Home" }, { id: "boeken", label: "Boeken" }, { id: "biografie", label: "Biografie" }, { id: "interviews", label: "Interviews" }, { id: "vragen", label: "Vragen aan auteur" }, { id: "agenda", label: "Agenda" }, { id: "contact", label: "Contact" }, ]; useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, setOpen]); return ( <>
{e.preventDefault(); onNavigate("home");}}> Gerard Legerstee © 2026
setOpen(false)}>
); } // ── Hero ───────────────────────────────────────────────────────────────────── function Hero({ onOpenBook }) { return (
Auteur · Bergschenhoek · thrillers en non-fictie · {BOOKS.length} titels

Welkom op de plaats delict

Portret van Gerard Legerstee Gerard Legerstee

{AUTHOR.korteBio}

); } // ── Home: alleen boekomslagen, twee per regel, nieuwste eerst ──────────────── function HomeCovers({ onOpenBook }) { const sorted = [...BOOKS].sort((a, b) => b.jaar - a.jaar); return (
{sorted.map(b => ( ))}
); } // ── Over de auteur ─────────────────────────────────────────────────────────── function About() { return (
{AUTHOR.langeBio.map((p, i) =>

{p}

)}
Schrijfstijl
{AUTHOR.stijl.map(s => {s})}
); } function SectHead({ nr, eyebrow, title, action }) { return (
{nr} — {eyebrow}

{title}

{action &&
{action}
}
); } // ── Books grid + filters ───────────────────────────────────────────────────── function Books() { const [genre, setGenre] = useState("Alle"); const [year, setYear] = useState("Alle"); const [trailer, setTrailer] = useState(null); const genres = useMemo(()=>["Alle", ...new Set(BOOKS.map(b=>b.genre))], []); const years = useMemo(()=>["Alle", ...new Set(BOOKS.map(b=>String(b.jaar)).sort((a,b)=>b.localeCompare(a)))], []); const filtered = BOOKS.filter(b => (genre === "Alle" || b.genre === genre) && (year === "Alle" || String(b.jaar) === year) ).sort((a, b) => b.jaar - a.jaar); return (

Boeken

{filtered.length} van {BOOKS.length} titels
{filtered.map(b => (
{b.jaar} · {b.genre} {b.paginas && <>·{b.paginas} p.} {b.isbn && <>·ISBN {b.isbn}}

{b.titel}

{b.isLatest && Nieuwste} {b.isUpcoming && Aankomend} {b.isFirstBook && Debuut} {b.isFirstThriller && Eerste thriller} {b.isDebut && Eerste Elikser-thriller} {b.gratis && Gratis · EPUB}
{b.flap.split("\n\n").map((para, i) => (

{para}

))}
{b.quote && (
"

{b.quote}

— {b.quoteBron}
)}
{b.elikserUrl && ( e.stopPropagation()}> Koop paperback )} {b.elikserEpubUrl && ( e.stopPropagation()}> Koop epub )} {b.elikserUrl && ( e.stopPropagation()}> Leen via bibliotheek )} {b.trailerUrl && ( )} {b.smashwordsUrl && ( e.stopPropagation()}> Gratis downloaden (epub) )}
))}
{trailer && setTrailer(null)} />}
); } // ── Trailer modal ──────────────────────────────────────────────────────────── function TrailerModal({ book, onClose }) { useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose]); return (
e.stopPropagation()}>
Boektrailer · {book.titel}
); } function FilterGroup({ label, value, options, onChange }) { return (
{label}
{options.map(o => ( ))}
); } // ── Nieuws & Agenda ────────────────────────────────────────────────────────── function Nieuws() { return (
Recent
{NIEUWS.map((n, i) => (
{n.datum} {n.label}

{n.titel}

{n.body}

))}
); } // ── Lezers ─────────────────────────────────────────────────────────────────── function Lezers() { const [openFaq, setOpenFaq] = useState(0); return (
{RECENSIES.map((r, i) => (
{r.bron} {r.rating && ★ {r.rating.toFixed(1)}}
"{r.quote}"
Over {r.boek} · {r.type}
))}

Voor leesclubs

{LEESCLUB.intro}

    {LEESCLUB.items.map((it, i) => (
  • {it.titel} {it.type}
    • ))}

Vragen aan de auteur

{FAQ.map((f, i) => (
{openFaq===i &&
{f.a}
}
))}
); } // ── Pers & Media ───────────────────────────────────────────────────────────── function Pers() { return (

{PERS.intro}

{PERS.bestanden.map((b, i) => (
{b.type}
{b.titel}
{b.grootte} · download
 ))}
); } // ── Blog ───────────────────────────────────────────────────────────────────── function Blog() { return (
{BLOG.map((b, i) => (
{b.datum} · {b.leestijd} leestijd

{b.titel}

{b.excerpt}

Lees verder
))}
); } // ── Contact ────────────────────────────────────────────────────────────────── function Contact() { const [form, setForm] = useState({ naam: "", email: "", onderwerp: "Algemeen", bericht: "" }); const [sent, setSent] = useState(false); const submit = (e) => { e.preventDefault(); if (!form.naam || !form.email || !form.bericht) return; setSent(true); }; return (
{sent ? (
Bericht ontvangen

Bedankt, {form.naam.split(" ")[0]}.

Je bericht is verstuurd. De auteur (of zijn uitgever) reageert doorgaans binnen een week.

) : ( <> setForm({...form, naam: e.target.value})} placeholder="Voor- en achternaam" /> setForm({...form, email: e.target.value})} placeholder="je@email.nl" />
{["Algemeen","Leesclub","Pers","Lezing"].map(o => ( ))}