// MAZZU — Shared atoms: Reveal (IO-based fade-up), wordmark, icons, navbar
const { useEffect, useRef, useState } = React;
// ---------- Reveal (scroll-listener fade-up, robust inside iframes) ----------
function Reveal({ delay = 0, as = "div", style, className, children }) {
const ref = React.useRef(null);
const [v, setV] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let raf = 0;
const check = () => {
raf = 0;
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight - 80) {
setV(true);
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
}
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(check); };
check();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, []);
const Tag = as;
return (
{children}
);
}
// ---------- Icons (lucide-style, minimal monochrome) ----------
const Icon = ({ d, size = 18, stroke = 1.6 }) => (
);
const InstagramIcon = (props) => (
}/>
);
const FacebookIcon = (props) => (
}/>
);
const WhatsappIcon = (props) => (
}/>
);
const MapPinIcon = (props) => (
}/>
);
const ArrowRightIcon = (props) => (
}/>
);
// ---------- Wordmark — stacked MAZZU/MAZZU ----------
function Wordmark({ size = "sm" }) {
const fs = size === "lg" ? 16 : 11;
const lh = size === "lg" ? 0.95 : 0.92;
const tr = size === "lg" ? 4 : 2.4;
return (
MAZZU
MAZZU
);
}
// ---------- Large Editorial Mark (for CTA section) ----------
function EditorialMark() {
return (
Mazzu
Mazzu
);
}
// ---------- Avatar Stack ----------
function AvatarStack() {
return (
);
}
// ---------- Navbar (cinematic-style pill) ----------
function Navbar() {
const [open, setOpen] = useState(false);
const links = [
{ label: "Home", href: "#" },
{ label: "Beratung", href: "#beratung" },
{ label: "Story", href: "#story" },
{ label: "Labels", href: "#labels" },
{ label: "Store", href: "store.html" },
];
const close = () => setOpen(false);
return (
);
}
const navIconBtn = {
width: 38, height: 38, borderRadius: 9999,
display: "inline-flex", alignItems: "center", justifyContent: "center",
color: "hsla(0,0%,100%,0.85)", cursor: "pointer",
border: "none",
};
window.MazzuShared = {
Reveal, Wordmark, EditorialMark, AvatarStack, Navbar,
InstagramIcon, FacebookIcon, WhatsappIcon, MapPinIcon, ArrowRightIcon
};