// ===== Shared visual components and small primitives =====
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// -------- Icons (custom inline SVG, no external lib) --------
const Icon = {
Plane: (p) => (
),
PlaneTilt: (p) => (
),
Compass: (p) => (
),
Globe: (p) => (
),
Clock: (p) => (
),
Star: (p) => (
),
Ticket: (p) => (
),
Camera: (p) => (
),
ArrowEast: (p) => (
),
ArrowWest: (p) => (
),
Heart: (p) => (
),
};
// -------- Animated number counter --------
function useInView(ref, threshold = 0.2) {
const [seen, setSeen] = useState(false);
useEffect(() => {
if (!ref.current || seen) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { setSeen(true); obs.disconnect(); }
});
}, { threshold });
obs.observe(ref.current);
return () => obs.disconnect();
}, [ref, threshold, seen]);
return seen;
}
function Counter({ to, suffix = "", decimals = 0, duration = 1800, className }) {
const ref = useRef(null);
const seen = useInView(ref, 0.25);
const [val, setVal] = useState(0);
useEffect(() => {
if (!seen) return;
const start = performance.now();
let raf;
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
// easeOutCubic
const e = 1 - Math.pow(1 - p, 3);
setVal(to * e);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [seen, to, duration]);
const formatted = useMemo(() => {
if (decimals > 0) return val.toLocaleString("de-DE", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
return Math.round(val).toLocaleString("de-DE");
}, [val, decimals]);
return (
{formatted}
{suffix}
);
}
// -------- Reveal wrapper --------
function Reveal({ as: As = "div", delay = 0, className = "", children, ...rest }) {
const ref = useRef(null);
const seen = useInView(ref, 0.15);
const delayClass = delay ? `reveal-delay-${delay}` : "";
return (
{children}
);
}
// -------- Section shell --------
function Section({ id, eyebrow, kicker, title, intro, dark = false, children, className = "" }) {
const surface = dark
? "starry text-cream"
: "paper-soft text-night";
return (
{kicker}
{eyebrow}
{title}
{intro && (
{intro}
)}
{children}
);
}
// -------- Photo placeholder (clearly marked, with code-like comment) --------
function Photo({ note, ratio = "4/3", className = "", code = "" }) {
return (
Foto‑Platzhalter
{code &&
{`// ${code}`}
}
{note}
);
}
// -------- Stat block (counter + label) --------
function Stat({ value, label, suffix = "", note, decimals = 0, big = false, dark = false }) {
const numColor = dark ? "text-amber" : "text-night";
const labelColor = dark ? "text-cream/80" : "text-night/70";
const noteColor = dark ? "text-cream/50" : "text-night/45";
return (
);
}
// -------- Tiny pill / chip --------
function Pill({ children, tone = "amber", className = "" }) {
const tones = {
amber: "bg-amber/15 text-amber-deep border-amber/40",
night: "bg-night/5 text-night border-night/15",
inv: "bg-cream/10 text-cream border-cream/25",
};
return (
{children}
);
}
// -------- Boarding-card-like header strip --------
function Stub({ left, right, dark = false, className = "" }) {
const bg = dark ? "bg-night text-cream" : "bg-cream-soft text-night";
return (
);
}
Object.assign(window, {
Icon, Counter, Reveal, Section, Photo, Stat, Pill, Stub, useInView
});