'use client' import Image from '@/spa/components/ui/UnoptimizedImage' import React, { useState, useEffect, useRef } from 'react'; import { Link, useLocation } from '@/spa/router'; import { ArrowRight } from 'lucide-react'; import LoadingScreen from '@/spa/components/ui/LoadingScreen'; import { useIsMobile } from '@/spa/hooks/useIsMobile'; import { useApplicationPhase } from '@/spa/cmsRoute'; import { defaultFooterData, defaultHeaderData, type SpaFooterData, type SpaHeaderData, type SpaIconName, withoutLoginCtas, } from '@/spa/cmsNavigation'; interface LayoutProps { children: React.ReactNode; header?: SpaHeaderData; footer?: SpaFooterData; } /* ── SVG icons ─────────────────────────────────────────── */ const IgIcon = () => ; const LiIcon = () => ; const FbIcon = () => ; const ICONS: Record React.ReactElement> = { instagram: IgIcon, linkedin: LiIcon, facebook: FbIcon, }; /* ── Tokens ────────────────────────────────────────────── */ const ANTHRA = '#1A2030'; // nav + footer shared bg const GOLD = '#EFBF04'; const MUTED = '#D0D5DD'; const SEP = 'rgba(239,191,4,0.2)'; const LINE = 'rgba(239,191,4,0.35)'; const FF_DISPLAY = '"IBM Plex Sans", sans-serif'; const FF_BODY = '"Inter", sans-serif'; const HIDE_MEMBERSHIP_FOOTER_ENTRY = true; const APPLICATION_PHASE_OPEN = '0'; const isMembershipFooterLink = (link?: { label?: string; path?: string }) => link?.path === '/mitglied-werden' || link?.label?.trim().toLowerCase() === 'mitglied werden'; /* ── SocialLink helper ─────────────────────────────────── */ const SocialLink: React.FC<{ href:string; icon:SpaIconName; label:string }> = ({ href, icon, label }) => { const Icon = ICONS[icon] || LiIcon; return ( (e.currentTarget.style.color=GOLD)} onMouseLeave={e=>(e.currentTarget.style.color=MUTED)} > ); }; /* ── Component ──────────────────────────────────────────── */ const Layout: React.FC = ({ children, header = defaultHeaderData, footer = defaultFooterData }) => { const NAV = header.navItems; const SECONDARY = header.secondaryLinks; const linkedInHeaderSocial = header.socialLinks.filter((item) => item.icon === 'linkedin'); const linkedInFooterSocial = footer.socialLinks.filter((item) => item.icon === 'linkedin'); const HEADER_SOCIAL = linkedInHeaderSocial.length ? linkedInHeaderSocial : defaultHeaderData.socialLinks.filter((item) => item.icon === 'linkedin'); const FOOTER_SOCIAL = linkedInFooterSocial.length ? linkedInFooterSocial : defaultFooterData.socialLinks.filter((item) => item.icon === 'linkedin'); const logo = header.logo?.url || defaultHeaderData.logo?.url || ''; const footerLogo = footer.logo?.url || defaultFooterData.logo?.url || ''; const headerCtas = withoutLoginCtas(header.ctas); const footerCtas = withoutLoginCtas(footer.ctas); const fallbackHeaderCtas = withoutLoginCtas(defaultHeaderData.ctas); const fallbackFooterCtas = withoutLoginCtas(defaultFooterData.ctas); const applicationPhase = useApplicationPhase(); const showFloatingApplicationCta = applicationPhase?.activePhase === APPLICATION_PHASE_OPEN; const footerMembershipCta = footerCtas[1] || fallbackFooterCtas[1]; const showFooterMembershipCta = !HIDE_MEMBERSHIP_FOOTER_ENTRY || !isMembershipFooterLink(footerMembershipCta); const [open, setOpen] = useState(false); // desktop overlay const [activeKey, setActive] = useState(null); // desktop hover subnav const [mobileOpen, setMobileOpen] = useState(false); // mobile sidebar overlay const [expandKey, setExpand] = useState(null); // mobile accordion const [mounted, setMounted] = useState(false); const [showLoader, setShowLoader] = useState(true); const [formVisible, setFormVisible] = useState(false); const location = useLocation(); const firstLinkRef = useRef(null); const isLegalPage = ['/impressum', '/datenschutz'].includes(location.pathname); const isMobile = useIsMobile(); // Close everything on route change useEffect(() => { setTimeout(() => { setOpen(false); setMobileOpen(false); setExpand(null); }, 0); if (location.hash) { setTimeout(() => { const el = document.querySelector(location.hash); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 120); } else { window.scrollTo(0, 0); } }, [location]); // Reset mobile accordion when its overlay closes useEffect(() => { if (!mobileOpen) setTimeout(() => setExpand(null), 220); }, [mobileOpen]); // Body scroll lock (either overlay) useEffect(() => { const anyOpen = open || mobileOpen; const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; if (anyOpen) { document.body.style.overflow = 'hidden'; document.body.style.paddingRight = open ? `${scrollbarWidth}px` : ''; } else { document.body.style.overflow = ''; document.body.style.paddingRight = ''; setTimeout(() => setActive(null), 220); } return () => { document.body.style.overflow = ''; document.body.style.paddingRight = ''; }; }, [open, mobileOpen]); // Focus first desktop nav link on open useEffect(() => { if (open) setTimeout(() => firstLinkRef.current?.focus(), 300); }, [open]); // Escape closes either overlay useEffect(() => { const h = (e:KeyboardEvent) => { if (e.key === 'Escape') { if (open) setOpen(false); if (mobileOpen) setMobileOpen(false); } }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [open, mobileOpen]); useEffect(() => { const t = setTimeout(() => setMounted(true), 60); return () => clearTimeout(t); }, []); // Hide floating CTA when the form section (#bewerben) is in view – homepage only useEffect(() => { setTimeout(() => setFormVisible(false), 0); if (location.pathname !== '/') return; const el = document.getElementById('bewerben'); if (!el) return; const obs = new IntersectionObserver( ([entry]) => setFormVisible(entry.isIntersecting), { threshold: 0.05 } ); obs.observe(el); return () => obs.disconnect(); }, [location.pathname]); return (

{showLoader && ( setShowLoader(false)} /> )} {/* ── GLOBAL BAYERN CSS ────────────────────────── */} {/* ═══════════════════════════════════════════════════════════ */} {/* ══ DESKTOP CHROME (≥768px) – original top bar + overlay ══ */} {/* ═══════════════════════════════════════════════════════════ */} {!isMobile && ( <> {/* ── TOP BAR ──────────────────────────────────── */}

{/* LEFT – logo */}

{/* CENTER – hamburger */}

◆ ◆

{/* RIGHT – social */}

{HEADER_SOCIAL.map(s => )}

{/* ── DESKTOP OVERLAY ──────────────────────────── */} )} {/* ═══════════════════════════════════════════════════════════ */} {/* ══ MOBILE CHROME (<768px) – top bar + fullscreen overlay ══ */} {/* ═══════════════════════════════════════════════════════════ */} {isMobile && ( <> {/* ── TOP BAR ──────────────────────────────────── */}

{/* Logo */}

{/* Hamburger */}

{/* ── FULLSCREEN OVERLAY ───────────────────────── */} )} {/* ── FLOATING CTA ─────────────────────────────── */} {location.pathname === '/' && showFloatingApplicationCta && !formVisible && !isMobile && ( { (e.currentTarget as HTMLElement).style.background = '#EFBF04'; (e.currentTarget as HTMLElement).style.color = '#101828'; }} onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = '#111D55'; (e.currentTarget as HTMLElement).style.color = '#fff'; }} > {headerCtas[0]?.label || fallbackHeaderCtas[0].label} )} {/* ── MAIN ─────────────────────────────────────── */}

{children}

{/* ── FOOTER ───────────────────────────────────── */}

); }; export default Layout;