// ============================================================ // Shared components: Header, Footer, Cart, Buttons, Icons, etc. // ============================================================ // ── Tiny Lucide-style inline icons (single-stroke, 2px) ───────────── const I = {}; const _svg = (paths, attrs = {}) => (props) => ( {paths} ); I.ArrowRight = _svg(<>); I.ArrowLeft = _svg(<>); I.ArrowUpRight = _svg(<>); I.Plus = _svg(<>); I.Minus = _svg(); I.Check = _svg(); I.X = _svg(<>); I.Cart = _svg(<>); I.Clock = _svg(<>); I.Tag = _svg(<>); I.Box = _svg(<>); I.Truck = _svg(<>); I.Sparkles = _svg(<>); I.Search = _svg(<>); I.User = _svg(<>); I.Menu = _svg(<>); I.MapPin = _svg(<>); I.Shield = _svg(); I.Zap = _svg(); I.Globe = _svg(<>); I.Heart = _svg(); I.Mail = _svg(<>); I.Phone = _svg(); // Generic platform "from" logo: a small monogram tile function PlatformTile({ p, size = 36 }) { return (
{p.short}
); } // Aartisan mark (logo without wordmark) function Mark({ size = 36 }) { return ( ); } // ── Header ────────────────────────────────────────────────────────── function Header({ current, onNav, headerStyle = "sticky" }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const fn = () => setScrolled(window.scrollY > 8); fn(); window.addEventListener("scroll", fn, { passive: true }); return () => window.removeEventListener("scroll", fn); }, []); React.useEffect(() => { if (headerStyle === "float") document.body.classList.add("float-header"); else document.body.classList.remove("float-header"); }, [headerStyle]); return (
); } // ── Footer ────────────────────────────────────────────────────────── function Footer({ onNav }) { return ( ); } // ── Product card ──────────────────────────────────────────────────── function ProductCard({ p, onOpen, onAdd, featured = false }) { return (
{p.tier} {p.badge && {p.badge}}

{p.title}

{fmtPrice(p.price)}
{p.priceSuffix}

{p.summary}

{p.duration && {p.duration}} {p.bestFor && {p.bestFor}}
); } // ── Reveal-on-scroll wrapper ──────────────────────────────────────── function Reveal({ children, delay = 0, as = "div", ...rest }) { const ref = React.useRef(null); const [seen, setSeen] = React.useState(false); React.useEffect(() => { if (!ref.current) return; // Immediate check: if element is already in viewport, reveal now. const rect = ref.current.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (rect.top < vh + 40 && rect.bottom > 0) { setSeen(true); return; } // Otherwise observe for entry — with a safety fallback in case IO never fires let observed = true; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) setSeen(true); }); }, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }); io.observe(ref.current); const fallback = setTimeout(() => { if (observed) setSeen(true); }, 1500); return () => { observed = false; io.disconnect(); clearTimeout(fallback); }; }, []); const Tag = as; return ( !["className","style"].includes(k)))} > {children} ); } // ── Stat band ─────────────────────────────────────────────────────── function StatBand() { return (
{STATS.map((s, i) => (
{s.num}
{s.label}
 ))}
); } // ── Marquee strip ────────────────────────────────────────────────── function Marquee({ items }) { const content = items.flatMap((it, i) => [ {it}, , ]); return ( ); } // ── Toast (cart-add confirmation) ────────────────────────────────── function Toast({ message, onClose }) { React.useEffect(() => { const t = setTimeout(onClose, 2200); return () => clearTimeout(t); }, [onClose]); return (
{message}
); } // Rubber stamp (SVG with rough edges) function Stamp({ children, color = "var(--color-plum-700)", rotate = -4, scale = 1 }) { return ( {children} ); } // Postmark function Postmark({ label = "Aartisan · Migration", date = "EST 2019", size = 110, rotate = -10 }) { return (
{label}
★ {date} ★
); } // SVG filter defs (for rough stamp edges) — render once at top of app function SvgDefs() { return ( ); } Object.assign(window, { I, PlatformTile, Mark, Header, Footer, ProductCard, Reveal, StatBand, Marquee, Toast, Stamp, Postmark, SvgDefs, });