const { useState, useEffect, useRef } = React; const sb = window.sb; const IMG = { hero: "uploads/chateau-hero.jpg", chateau: "uploads/histoire/13-chateau-restaure.jpg", cellar: "uploads/histoire/14-salon-chesterfield.jpg", stairs: "uploads/histoire/13-chateau-restaure.jpg", tasting: "https://lh3.googleusercontent.com/aida-public/AB6AXuAHJwQV32amumA2VNPkcxyK0mqqck94whlqiTvZYoe5v33SdH5mrSXdsGJZaARIMwKFnATDKC-wAxjqNuk4Chltwe0yhlYfSPloXG2pTLZRGIFUjwz9knongTB74vP_vLh1ApITo0TZV8P9QYwYOrzoqandKW53t0n8lVMYnxRiK-6NWmi8HHQgpOP4JT3MyCWYZe_UJC1HrSyn951uhlKMLx0jrWibIxlUgXv1k3L58fKCxvdyGAWnbgpdHaXvH9_XxnVP5XX5mFE" }; const NAV = ["Accueil","L'histoire","Boutique","Contact"]; const IDS = ["accueil","histoire","boutique","contact"]; const serif = { fontFamily:"'Malbonte', 'Noto Serif', serif" }; const mono = { fontFamily:"'Manrope', sans-serif" }; const GOLD = "#e9c176"; const goldGrad = "linear-gradient(135deg,#e9c176 0%,#c5a059 100%)"; // ─── PRIMITIVES ────────────────────────────────────────────────────────── function Label({ children, style={} }) { return {children}; } function GoldLine({ w=48, center=false }) { return
; } // ─── REVEAL ────────────────────────────────────────────────────────────── function Reveal({ children, delay="0s", style={}, ...rest }) { const [vis, setVis] = useState(false); const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const check = () => { const r = el.getBoundingClientRect(); return r.top < window.innerHeight + 120 && r.bottom > 0; }; if (check()) { setTimeout(() => setVis(true), 50); return; } const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold:0.05, rootMargin:"0px 0px -30px 0px" }); obs.observe(el); return () => obs.disconnect(); }, []); return (
{children}
); } // ─── ROUTING ───────────────────────────────────────────────────────────── function getRoute() { const h = (window.location.hash || "").replace(/^#\/?/, "").toLowerCase(); return IDS.includes(h) ? h : "accueil"; } function navigateTo(id) { if (window.location.hash.replace(/^#\/?/, "").toLowerCase() === id) { window.scrollTo({ top: 0, behavior: "smooth" }); } else { window.location.hash = "#" + id; } } function useRoute() { const [route, setRoute] = useState(getRoute); useEffect(() => { const h = () => { setRoute(getRoute()); window.scrollTo({ top: 0, behavior: "auto" }); }; window.addEventListener("hashchange", h); return () => window.removeEventListener("hashchange", h); }, []); return route; } // ─── NAV ───────────────────────────────────────────────────────────────── function Nav({ gold, onContact, route }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const active = Math.max(0, IDS.indexOf(route)); useEffect(() => { const h = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", h, { passive:true }); return () => window.removeEventListener("scroll", h); }, []); useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const go = (id) => { setMenuOpen(false); navigateTo(id); }; return ( <> {/* Burger menu: fixed top-right, hidden on desktop via CSS */} {/* Mobile side panel */}
setMenuOpen(false)} style={{ position:"fixed", inset:0, zIndex:150, background:"rgba(8,8,8,0.55)", backdropFilter:"blur(6px)", WebkitBackdropFilter:"blur(6px)", opacity:menuOpen?1:0, pointerEvents:menuOpen?"all":"none", transition:"opacity 0.4s ease" }} /> ); } // ─── HERO ──────────────────────────────────────────────────────────────── function Hero({ gold }) { return (

L'Excellence à la Française

Un lieu légendaire niché au cœur de la vallée de la Marne, où l'histoire carolingienne se mêle au raffinement contemporain.

); } // ─── HISTOIRE ───────────────────────────────────────────────────────────── function Histoire({ onModal }) { return (
{/* ── Intro ── */}
1760
Façade du Château Lazaar
1760

Une Métamorphose
Au Fil Des Siècles

Niché au cœur de la vallée de la Marne, le Château Lazaar vous invite à un voyage à travers le temps, où l'histoire se mêle au raffinement. Autrefois connu sous le nom de « Caroli Villa », domaine de Charles Martel, ce lieu légendaire est chargé d'une riche histoire intimement liée à la dynastie carolingienne.

En 2020, le Château Lazaar fut racheté et méticuleusement restauré par Monsieur Lazaar, lui insufflant une nouvelle vie tout en préservant son âme historique.

{/* ── Héritage carolingien ── */}

Un Héritage
Carolingien

Le nom de la commune, Charly-sur-Marne, trouve ses racines dans « Caroli Villa », signifiant « Domaine de Charles ». Ce nom rend hommage à Charles Martel, illustre maire du palais et ancêtre de Pépin III dit le Bref, fondateur de la dynastie carolingienne.

L'histoire du Château Lazaar est indissociable de cette figure historique majeure, dont la victoire face aux troupes arabes en 732 marqua un tournant crucial pour l'Europe.

{[ { label:"Caroli Villa", sub:"Domaine de Charles Martel" }, { label:"732 ap. J.-C.", sub:"Bataille de Poitiers" }, { label:"Un style intemporel", sub:"Château entièrement restauré" }, { label:"Région viticole", sub:"Au cœur de la vallée de la Marne" } ].map(({ label, sub }) => (
{label}
{sub}
))}
{/* ── Frise chronologique ── */}

Cinq Siècles d'Histoire

{[ { year:"~732", title:"Caroli Villa", text:"Domaine de Charles Martel, ancêtre de la dynastie carolingienne." }, { year:"1760", title:"Famille Vignon", text:"Acquis par la famille Vignon après avoir été « Hôtel Dieu » du Diocèse de Soissons." }, { year:"2006", title:"Charly-sur-Marne", text:"La commune adopte son nom en hommage à son illustre passé carolingien." }, { year:"2020", title:"Restauration", text:"Monsieur Lazaar rachète et restaure méticuleusement le château, préservant son âme historique." } ].map(({ year, title, text }) => (
{year}
{title}

{text}

))}
); } // ─── STATS ──────────────────────────────────────────────────────────────── function Stats() { const items = [ { value:"5 000", label:"Mètres carrés", sub:"de parc" }, { value:"3 000", label:"Mètres carrés", sub:"habitables" }, { value:"30", label:"Pièces", sub:"au total" } ]; return (

Construit en 1760 · Restauré en 2020

{items.map(({ value, label, sub }) => (
{value}
{label}
{sub}
))}
); } // ─── PRODUITS ───────────────────────────────────────────────────────────── function Produits() { const [hov, setHov] = useState(null); const [imgs, setImgs] = useState({}); const prods = [ { id:"miel", icon:"🍯", title:"Miel", sub:"Biologique", desc:"Un miel d'exception récolté dans le parc du château, aux saveurs florales et authentiques de la vallée de la Marne." }, { id:"epicerie", icon:"🫙", title:"Épicerie Fine", sub:"Produits originaux", desc:"Une sélection de produits artisanaux soigneusement choisis pour leur qualité et leur caractère authentique." }, { id:"parfum", icon:"🌸", title:"Parfum", sub:"Fragrances intemporelles", desc:"Des fragrances inspirées du château et de ses jardins, capturant l'essence de l'excellence à la française." } ]; useEffect(() => { (async () => { if (!sb) return; const { data } = await sb .from("products") .select("category,image_url,sort_order") .eq("is_published", true) .not("image_url", "is", null) .order("sort_order", { ascending: true }); if (!data) return; const byCat = {}; for (const p of data) { if (!byCat[p.category] && p.image_url) byCat[p.category] = p.image_url; } setImgs(byCat); })(); }, []); return (

Des Produits
Authentiques

{prods.map(({ id, icon, title, sub, desc }, i) => { const img = imgs[id]; return (
setHov(id)} onMouseLeave={() => setHov(null)} style={{ background: "#131313", padding:"56px 48px 64px", cursor:"pointer", height:"100%", transition:"background 0.4s ease", position:"relative", overflow:"hidden" }} >
{img ? ( {title} ) : ( {icon} )}

{title}

{desc}

Découvrir
); })}
); } // ─── SAVOIR-FAIRE ───────────────────────────────────────────────────────── function SavoirFaire() { const [cellarHov, setCellarHov] = useState(false); return (

Un Savoir-faire
d'Exception

Niché au cœur de la vallée de la Marne, le Château Lazaar perpétue un art de vivre à la française, alliant patrimoine historique et excellence contemporaine.

1760
setCellarHov(true)} onMouseLeave={() => setCellarHov(false)}> Salon du château

Un Intérieur d'Exception

Moulures dorées · Parquet d'origine
Façade du château

Une Bâtisse Mythique

Construite en 1760 · Style classique français
); } // ─── CTA BOUTIQUE ───────────────────────────────────────────────────────── function BoutiqueCTA() { const [btnHov, setBtnHov] = useState(false); return (
Lazaar

Découvrez
Notre Boutique
en Ligne

Nous vous proposons toute une gamme de produits authentiques issus du domaine — miel biologique, épicerie fine et fragrances intemporelles.

); } // ─── MODAL HISTOIRE ─────────────────────────────────────────────────────── function HistoireModal({ open, onClose }) { useEffect(() => { document.body.style.overflow = open?"hidden":""; return () => { document.body.style.overflow=""; }; }, [open]); return (

Un Lieu Chargé
d'Histoire

{[ ["Caroli Villa","Autrefois connu sous le nom de « Caroli Villa », domaine de Charles Martel, ce lieu légendaire est intimement lié à la dynastie carolingienne. La victoire de Charles Martel face aux troupes arabes en 732 marqua un tournant crucial pour l'Europe."], ["1760","Acquis par la famille Vignon en 1760, le château connut de nombreuses transformations. Légué au Diocèse de Soissons, il fut transformé en « Hôtel Dieu » avant d'être rendu à sa vocation résidentielle."], ["2006","La commune adopta le nom de Charly-sur-Marne, en référence à son illustre passé carolingien — « Caroli Villa » signifiant « Domaine de Charles »."], ["2020","Monsieur Lazaar rachète et restaure méticuleusement le château, lui insufflant une nouvelle vie tout en préservant son âme historique et son style classique français."] ].map(([year, text]) => (
{year}

{text}

))}

Charly-sur-Marne · Vallée de la Marne · Hauts-de-France

); } // ─── MODAL CONTACT ──────────────────────────────────────────────────────── function ContactModal({ open, onClose }) { const [sent, setSent] = useState(false); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); const [form, setForm] = useState({ name:"", email:"", message:"" }); useEffect(() => { document.body.style.overflow = open?"hidden":""; return () => { document.body.style.overflow=""; }; }, [open]); const submit = async (e) => { e.preventDefault(); if (busy) return; setBusy(true); setErr(""); const { error } = await sb.from("contact_messages").insert({ name: form.name.trim(), email: form.email.trim(), message: form.message.trim(), source: "modal" }); setBusy(false); if (error) { setErr("Une erreur est survenue. Merci de réessayer."); return; } setSent(true); }; return (
{!sent ? ( <>

Écrivez-nous

{[["name","Votre nom","text"],["email","Adresse e-mail","email"],["message","Votre message","textarea"]].map(([key,label,type]) => (
{type==="textarea" ?