/* ui.jsx — geteilte UI-Bausteine */
const { useEffect: useEffectUI, useRef: useRefUI, useState: useStateUI } = React;
/* ---- Kontaktformular-Versand ans CMS-Backend (Security-Standards §7: Honeypot
+ Server-Validation + Rate-Limit auf Backend-Seite, reCAPTCHA optional) ---- */
async function submitContact({ name, mail, msg, honeypot }) {
try {
const res = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email: mail, message: msg, honeypot, source: window.location.href }),
});
const data = await res.json();
if (!res.ok || !data.ok) return { ok: false, error: data.error || 'Senden fehlgeschlagen.' };
return { ok: true };
} catch (e) {
return { ok: false, error: 'Verbindung fehlgeschlagen. Bitte versuche es später erneut.' };
}
}
/* ---- Arrow icon ---- */
function Arrow({ s = 16 }) {
return (
);
}
/* ---- Logo (code-built so it adapts to theme) ---- */
function Logo({ onClick }) {
return (
#
Bevisible
social media consulting
);
}
/* ---- Buttons ---- */
function Btn({ children, variant = 'primary', onClick, arrow = true }) {
return (
);
}
function LinkArrow({ children, onClick }) {
return (
);
}
/* ---- Reveal on scroll (rect-based + React-state driven so it survives
re-renders, with a fail-open for environments whose transition
clock is frozen, e.g. offscreen-rendered capture iframes) ---- */
const _revQ = [];
function _checkReveals() {
const h = window.innerHeight || 800;
for (let i = _revQ.length - 1; i >= 0; i--) {
const en = _revQ[i];
if (!en || !en.el || !en.el.isConnected) {_revQ.splice(i, 1);continue;}
const r = en.el.getBoundingClientRect();
if (r.top < h * 0.94 && r.bottom > -60) {
en.show();
const el = en.el;
// fail-open: if the transition clock never advances, force final state
setTimeout(() => {
if (el.isConnected && parseFloat(getComputedStyle(el).opacity) < 0.85) {
el.style.transition = 'none';el.style.opacity = '1';el.style.transform = 'none';
}
}, 1400);
_revQ.splice(i, 1);
}
}
}
let _revBound = false;
function _bindReveals() {
if (_revBound) return;_revBound = true;
const run = () => requestAnimationFrame(_checkReveals);
window.addEventListener('scroll', run, { passive: true });
window.addEventListener('resize', run);
}
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {} }) {
const ref = useRefUI(null);
const [vis, setVis] = useStateUI(false);
useEffectUI(() => {
const el = ref.current;
if (!el) return;
const entry = { el, show: () => setVis(true) };
_revQ.push(entry);
_bindReveals();
_checkReveals();
const t1 = setTimeout(_checkReveals, 120);
const t2 = setTimeout(_checkReveals, 420);
return () => {clearTimeout(t1);clearTimeout(t2);const k = _revQ.indexOf(entry);if (k > -1) _revQ.splice(k, 1);};
}, []);
return (
{children}
);
}
/* ---- Marquee ---- */
function Marquee({ items }) {
const row = [...items, ...items];
return (
{row.map((it, i) =>
{it.t}
)}
);
}
/* ---- Media placeholder (drop zone look) ---- */
function MediaPlaceholder({ label = 'Bild', video = false, ratio = '4/3', style = {} }) {
return (
{video &&
}
{video ? '▢ Video folgt' : '▢ ' + label}
);
}
/* ---- Social icon chip ---- */
function Social({ label, href = '#' }) {
const map = { X: 'X', LinkedIn: 'in', Instagram: 'IG', Facebook: 'f' };
return e.preventDefault()}>{map[label] || label};
}
/* ---- NAV ---- */
const NAV_ITEMS = [
{ id: 'home', label: 'Start' },
{ id: 'projekte', label: 'Projekte' },
{ id: 'ueber', label: 'Über uns' },
{ id: 'schulungen', label: 'Schulungen' },
{ id: 'blog', label: 'Blog' },
{ id: 'portal', label: 'Kundenportal' }];
function Nav({ page, go }) {
const [scrolled, setScrolled] = useStateUI(false);
const [onCover, setOnCover] = useStateUI(page === 'home');
const [open, setOpen] = useStateUI(false);
useEffectUI(() => {
const onS = () => {
const y = window.scrollY;
setScrolled(y > 24);
setOnCover(page === 'home' && y < window.innerHeight * 0.66);
};
onS();
window.addEventListener('scroll', onS, { passive: true });
window.addEventListener('resize', onS);
return () => {window.removeEventListener('scroll', onS);window.removeEventListener('resize', onS);};
}, [page]);
const nav = (id) => {go(id);setOpen(false);};
return (
<>
{NAV_ITEMS.map((it) =>
)}
nav('kontakt')}>Projekt anfragen
{FLOAT_ITEMS.map((it) =>
)}
{row.map((l, i) =>
{l.name}{l.sub}
)}
);
}
const row = [...logos, ...logos];
return (
);
}
/* ---- Cookie-Consent (schlicht, nicht aufdringlich) ----
Setzt nur bei aktiver Zustimmung das Cookie `tracking_consent=yes`, das der
Server (trackVisit) auswertet. Ohne Zustimmung wird nichts getrackt (DSG-konform).
Die Entscheidung wird in localStorage gemerkt, damit der Banner nicht wiederkehrt. */
const CONSENT_KEY = 'bv_cookie_consent';
const CONSENT_MAX_AGE = 60 * 60 * 24 * 180; // 180 Tage
function setConsentCookie(on) {
document.cookie = on
? `tracking_consent=yes; path=/; max-age=${CONSENT_MAX_AGE}; SameSite=Lax`
: 'tracking_consent=; path=/; max-age=0; SameSite=Lax';
}
function CookieConsent({ go }) {
const [show, setShow] = useStateUI(false);
useEffectUI(() => {
const choice = localStorage.getItem(CONSENT_KEY);
if (choice === 'yes') { setConsentCookie(true); return; } // Cookie erneuern
if (choice === 'no') return;
const t = setTimeout(() => setShow(true), 800); // dezent verzögert einblenden
return () => clearTimeout(t);
}, []);
const decide = (accept) => {
localStorage.setItem(CONSENT_KEY, accept ? 'yes' : 'no');
setConsentCookie(accept);
setShow(false);
};
if (!show) return null;
return (
Wir erfassen anonymisierte Besucherstatistiken — aber nur mit Deiner Zustimmung.{' '}
go && go('datenschutz')}>Mehr dazu
);
}
Object.assign(window, {
Arrow, Logo, Btn, LinkArrow, Reveal, Marquee, MediaPlaceholder, Social, Nav, Footer, NAV_ITEMS,
SocialGlyph, FloatingSocials, LogoBand, submitContact, CookieConsent
});
)}