// ---- SÉRÈNE — pages : Accueil, Catégorie, Fiche produit --------------- /* =================== HOME =================== */ function HomePage({ go, addToCart }) { return (
{/* Hero */}
Collection Printemps · 2026

La maison,
posément habitée.

Des objets tournés, tissés et soufflés main. Choisis pour durer, pensés pour apaiser le quotidien.

{/* Categories */}
{CATEGORIES.map((c) => ( ))}
{/* Featured products */}
go("category", { cat: "all" })} />
{PRODUCTS.slice(0, 4).map((p) => ( go("product", { id })} onAdd={addToCart} /> ))}
{/* Editorial band */}
Notre fabrique

Le temps comme matière première.

Chaque pièce naît d'un geste lent — celui d'artisans qui prennent le temps. Nous travaillons en petites séries, avec des matières nobles et des ateliers que nous connaissons par leur prénom.

{/* Values */}
{[ [, "Matières durables", "Lin, laine, grès et verre, sourcés en Europe."], [, "Livraison soignée", "Offerte dès 120 € · emballage zéro plastique."], [, "Emballage cadeau", "Furoshiki en lin sur demande, gratuit."], ].map(([ic, t, d], i) => (
{ic}

{t}

{d}

))}
); } /* =================== CATEGORY =================== */ function CategoryPage({ params, go, addToCart }) { const all = params.cat === "all"; const cat = CATEGORIES.find((c) => c.id === params.cat); const base = all ? PRODUCTS : productsByCat(params.cat); const [sort, setSort] = useState("featured"); const [activeCat, setActiveCat] = useState(params.cat); const [maxPrice, setMaxPrice] = useState(260); useEffect(() => { setActiveCat(params.cat); }, [params.cat]); let list = (activeCat === "all" ? PRODUCTS : productsByCat(activeCat)).filter((p) => p.price <= maxPrice); if (sort === "low") list = [...list].sort((a, b) => a.price - b.price); if (sort === "high") list = [...list].sort((a, b) => b.price - a.price); return (
{/* Header band */}
/ {all ? "Boutique" : cat?.name}

{all ? "Toute la boutique" : cat?.name}

{all ? "L'intégralité de nos pièces, du grès tourné au verre soufflé." : cat?.blurb}

{/* Filters */} {/* Grid */}
{list.length} pièce{list.length > 1 ? "s" : ""}
{list.length === 0 ? (

Aucune pièce sous ce prix. Augmente le curseur.

) : (
{list.map((p) => ( go("product", { id })} onAdd={addToCart} /> ))}
)}
); } const FilterGroup = ({ title, children }) => (

{title}

{children}
); const FilterLink = ({ active, onClick, label, count }) => ( ); /* =================== PRODUCT =================== */ function ProductPage({ params, go, addToCart }) { const p = productById(params.id) || PRODUCTS[0]; const [color, setColor] = useState(0); const [qty, setQty] = useState(1); const [activeImg, setActiveImg] = useState(0); const [openAcc, setOpenAcc] = useState("details"); const [added, setAdded] = useState(false); const related = PRODUCTS.filter((x) => x.cat === p.cat && x.id !== p.id).concat(PRODUCTS.filter((x) => x.cat !== p.cat)).slice(0, 4); useEffect(() => { setColor(0); setQty(1); setActiveImg(0); setAdded(false); window.scrollTo(0, 0); }, [params.id]); const doAdd = () => { addToCart(p, qty, p.colors[color][0]); setAdded(true); setTimeout(() => setAdded(false), 2200); }; const views = ["produit", "détail", "en situation"]; return (
/ / {p.name}
{/* Gallery */}
{views.map((v, i) => ( ))}
{/* Info */}
{p.tag &&
{p.tag}
}

{p.name}

{fmt(p.price)}

{p.desc}

{/* Colors */}
Coloris — {p.colors[color][0]}
{p.colors.map((c, i) => ( setColor(i)} title={c[0]} /> ))}
{/* Qty + add */}
Expédié sous 48 h · livraison offerte dès 120 €
{/* Accordions */}
{Object.entries(p.details).map(([k, v]) => (
{k}
{v}
 ))}

Expédition soignée sous 48 h ouvrées. Livraison offerte dès 120 € d'achat. Retours acceptés sous 30 jours, dans leur emballage d'origine.

Pièce fabriquée à la main : de légères variations sont normales et garantissent l'unicité. Voir les recommandations propres à la matière ci-dessus.

{/* Related */}
{related.map((rp) => ( go("product", { id })} onAdd={addToCart} /> ))}
); } const Accordion = ({ id, open, setOpen, title, children }) => { const isOpen = open === id; return (
{children}
); }; /* =================== Newsletter (shared) =================== */ function Newsletter() { const [sent, setSent] = useState(false); return (
La lettre SÉRÈNE

Le calme, une fois par mois.

Nouvelles pièces, coulisses d'atelier et rituels de saison. Rien de plus.

{ e.preventDefault(); setSent(true); }} style={{ display: "flex", gap: 10, maxWidth: 440, margin: "34px auto 0", flexWrap: "wrap", justifyContent: "center" }}> {sent ? (
Merci — à très vite.
) : ( <> )}
); } Object.assign(window, { HomePage, CategoryPage, ProductPage, Newsletter, Accordion, FilterGroup, FilterLink });