// ---- Site chrome: announcement, header, footer, cart drawer ---------
function AnnouncementBar() {
const items = [
"Versand für 4,95 € in ganz Deutschland",
"Produziert in Deutschland",
"Jedes Buch ein Unikat, auf dich personalisiert",
"Lieferung in 8 bis 10 Tagen",
];
return (
);
}
function Header({ go, route, cartCount, openCart }) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const nav = [
{ label: "Das Journal", to: () => go("product") },
{ label: "So funktioniert's", to: () => go("home", "how") },
{ label: "Magazin", to: () => go("blog") },
{ label: "Bewertungen", to: () => go("home", "reviews") },
{ label: "FAQ", to: () => go("home", "faq") },
];
return (
);
}
function CartDrawer({ open, onClose, items, setItems, go }) {
const [stage, setStage] = useState("cart"); // cart | success
useEffect(() => { if (open) setStage("cart"); }, [open]);
const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
const setQty = (i, q) => {
if (q < 1) { setItems(items.filter((_, idx) => idx !== i)); return; }
setItems(items.map((it, idx) => idx === i ? { ...it, qty: q } : it));
};
return (
<>
{stage === "cart" ? "Dein Warenkorb" : "Bestellung bestätigt"}
{stage === "success" ? (
Danke von Herzen.
Dein Journal wird jetzt eigens für dich gebunden. Eine Bestätigung ist auf dem Weg in dein Postfach.
{ onClose(); }}>Weiter stöbern
) : items.length === 0 ? (
Dein Warenkorb ist noch leer.
{ onClose(); go("product"); }}>Journal personalisieren
) : (
<>
{items.map((it, i) => (
Schwangerschaftsjournal
{it.data.name ? <>für {it.data.name} > : null}
{window.formatDateDE(it.data.et) || "Termin offen"}, {BIRTHPLACES[it.data.ort].label}
setQty(i, it.qty - 1)} aria-label="weniger">
{it.qty}
setQty(i, it.qty + 1)} aria-label="mehr">
{eur(it.price * it.qty)}
))}
Zwischensumme
{eur(subtotal)}
Versand 4,95 €
setStage("success")}>Zur Kasse · {eur(subtotal + 4.95)}
30 Tage Geld-zurück-Garantie · Sichere Zahlung
>
)}
>
);
}
function Footer({ go }) {
const cols = [
{ h: "Journella", links: ["Das Journal", "So funktioniert's", "Magazin", "Bewertungen", "Geschenkgutschein"] },
{ h: "Hilfe", links: ["Kontakt", "Versand und Lieferung", "Personalisierung ändern", "Retoure"] },
{ h: "Rechtliches", links: ["AGB", "Datenschutz", "Widerrufsrecht", "Impressum"] },
];
return (
);
}
Object.assign(window, { AnnouncementBar, Header, CartDrawer, Footer });