/* global React */ /* UC365 — Subpage components (depends on components.jsx loaded first) */ const { useState: useSubState } = React; // ========================================================= // PAGE HERO — for all subpages // ========================================================= function PageHero({ eyebrow, title, lead, image, breadcrumb }) { return (
{breadcrumb &&
Start {breadcrumb.map((b, i) => / {b.href ? {b.label} : {b.label} } )}
} {eyebrow && {eyebrow}}

{title}

{lead &&

{lead}

}
{image &&
}
); } // ========================================================= // STEP PROCESS — 3-step "Weg in die Community" // ========================================================= function StepProcess({ steps }) { return (
{steps.map((s, i) =>
0{i + 1}

{s.title}

{s.body}

)}
); } // ========================================================= // PROGRAM TIMELINE // ========================================================= function Timeline({ items }) { return (
{items.map((it, i) =>
{it.time}

{it.title}

{it.body &&

{it.body}

}
)}
); } // ========================================================= // GALLERY // ========================================================= function Gallery({ images }) { // images: array of { src, span?, alt? } — span: 'wide' | 'tall' const [openIdx, setOpenIdx] = useSubState(-1); const isOpen = openIdx >= 0; React.useEffect(() => { if (!isOpen) return; const onKey = (e) => { if (e.key === 'Escape') setOpenIdx(-1);else if (e.key === 'ArrowRight') setOpenIdx((i) => (i + 1) % images.length);else if (e.key === 'ArrowLeft') setOpenIdx((i) => (i - 1 + images.length) % images.length); }; window.addEventListener('keydown', onKey); const prevOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = prevOverflow; }; }, [isOpen, images.length]); return ( <>
{images.map((img, i) =>
setOpenIdx(i)} onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();setOpenIdx(i);}}} /> )}
{isOpen &&
setOpenIdx(-1)} role="dialog" aria-modal="true">
e.stopPropagation()}> {images[openIdx].alt {images[openIdx].alt &&
{images[openIdx].alt}
}
{openIdx + 1} / {images.length}
} ); } // ========================================================= // TEAM GRID // ========================================================= function TeamGrid({ members }) { return (
{members.map((m) =>

{m.name}

{m.role}

{m.link && LinkedIn →}
)}
); } // ========================================================= // TRIP DETAIL CARD (Reisen) // ========================================================= function TripCard({ image, title, body, date, location, seats, price, id, href, ctaLabel }) { return ( ); } // ========================================================= // CONTACT FORM // ========================================================= function ContactForm() { const [submitted, setSubmitted] = useSubState(false); const [form, setForm] = useSubState({ name: '', email: '', company: '', topic: 'membership', message: '' }); const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); if (submitted) { return (
Danke, {form.name.split(' ')[0] || 'wir haben deine Nachricht'}.
Wir melden uns innerhalb eines Werktags zurück. In dringenden Fällen erreichst du Christian direkt unter mail@uc365.community.
); } return (
{e.preventDefault();setSubmitted(true);}}>