/* Hero (3 variants) + Home page. Props: lang, navigate, heroVariant, showMarquee */ (function () { const Icon = window.Icon; const { Reveal, Btn, TextLink, SectionHead, Tag } = window; /* ---------- Hero ---------- */ const Hero = ({ lang, navigate, variant = 'photo' }) => { const t = (v) => window.tr(lang, v); const H = window.SITE.hero; const S = window.SITE.ui; const slides = React.useMemo(() => { const a = window.SITE.heroImages.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; }, []); const [idx, setIdx] = React.useState(0); React.useEffect(() => { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (variant !== 'photo' || reduce || slides.length < 2) return undefined; const id = setInterval(() => setIdx((i) => (i + 1) % slides.length), 6500); return () => clearInterval(id); }, [variant, slides.length]); const img = slides[0].src; const Eyebrow = React.createElement('p', { className: 'eyebrow' }, t(H.eyebrow)); const Title = React.createElement('h1', { className: 'display' }, t(H.headline)); const Lead = React.createElement('p', { className: 'hero__lead' }, t(H.lead)); const Actions = React.createElement('div', { className: 'hero__actions' }, React.createElement(Btn, { variant: variant === 'photo' ? 'primary' : 'primary', icon: 'layers', onClick: () => navigate('system') }, t(S.cta.system)), React.createElement(Btn, { variant: variant === 'photo' ? 'ghost-on-dark' : 'outline', icon: 'map-pin', onClick: () => navigate('contact') }, t(S.cta.partner)) ); const Proof = React.createElement('div', { className: 'hero__proof' }, React.createElement(Icon, { name: 'check', size: 20, style: { color: 'var(--brand)', flex: '0 0 auto' } }), React.createElement('span', null, t(H.proof))); if (variant === 'split') { return React.createElement('section', { className: 'hero hero--split' }, React.createElement('div', { className: 'container hero__grid' }, React.createElement('div', { className: 'hero__text' }, Eyebrow, Title, Lead, Actions, Proof), React.createElement('div', { className: 'hero__media' }, React.createElement('img', { src: slides[1].src, alt: t(slides[1].alt) })) ) ); } if (variant === 'light') { return React.createElement('section', { className: 'hero hero--light' }, React.createElement('div', { className: 'container hero__inner' }, Eyebrow, Title, Lead, Actions, Proof, React.createElement('div', { className: 'hero__media' }, React.createElement('img', { src: img, alt: t(slides[0].alt) })) ) ); } /* photo (default) — serious crossfading slideshow with slow Ken-Burns */ return React.createElement('section', { className: 'hero hero--photo' }, React.createElement('div', { className: 'hero__slides' }, slides.map((sl, i) => React.createElement('div', { key: i, className: 'hero__slide' + (i === idx ? ' is-active' : ''), 'aria-hidden': i !== idx, }, React.createElement('img', { src: sl.src, alt: t(sl.alt), loading: i === 0 ? 'eager' : 'lazy' })))), React.createElement('div', { className: 'hero__scrim' }), React.createElement('div', { className: 'container hero__inner' }, Eyebrow, Title, Lead, Actions, Proof), React.createElement('div', { className: 'hero__dots', role: 'tablist', 'aria-label': t({ de: 'Bildwechsel', en: 'Slide selection' }) }, slides.map((sl, i) => React.createElement('button', { key: i, type: 'button', className: 'hero__dot' + (i === idx ? ' is-active' : ''), 'aria-label': t(sl.alt), 'aria-selected': i === idx, onClick: () => setIdx(i), }))) ); }; /* ---------- Marquee ---------- */ const PartnerMarquee = ({ lang }) => { const logos = window.SITE.logoStrip; const seq = logos.concat(logos); return React.createElement('section', { className: 'partners-strip' }, React.createElement('p', { className: 'partners-strip__label' }, window.tr(lang, { de: 'Unsere Lizenzpartner', en: 'Our licence partners' })), React.createElement('div', { className: 'marquee' }, React.createElement('div', { className: 'marquee__track' }, seq.map((l, i) => React.createElement('div', { className: 'marquee__item', key: i }, React.createElement('img', { className: 'marquee__logo', src: l.src, alt: l.name, loading: 'eager', decoding: 'async' })))) ) ); }; /* ---------- Home ---------- */ const Home = ({ lang, navigate, heroVariant, showMarquee }) => { const t = (v) => window.tr(lang, v); const S = window.SITE.ui; const claims = window.SITE.claims; const products = window.SITE.products; const cats = window.SITE.categories; const P = window.SITE.proof; return React.createElement(React.Fragment, null, React.createElement('div', { className: 'home-hero-pin' }, React.createElement(Hero, { lang, navigate, variant: heroVariant })), React.createElement('div', { className: 'reveal-sheet home-sheet' }, showMarquee ? React.createElement(PartnerMarquee, { lang }) : null, /* Claims + aerial reveal pair: claims cover scrolls up to uncover the pinned aerial */ React.createElement('div', { className: 'reveal-pair' }, /* Claims (cover, rounded bottom, scrolls away) */ React.createElement('section', { className: 'section claims-cover', style: { paddingTop: 'var(--space-16)' } }, React.createElement('div', { className: 'container' }, React.createElement(SectionHead, { align: 'center', eyebrow: t({ de: 'Warum EINSTEIN®', en: 'Why EINSTEIN®' }), title: t({ de: 'Verzahnt, geprüft, dauerhaft.', en: 'Interlocked, tested, durable.' }), lead: t({ de: 'Vier Eigenschaften, deren Summe unser System von anderem Pflaster unterscheidet.', en: 'Four properties whose sum sets our system apart from other paving.' }), }), React.createElement('div', { className: 'claims-body' }, React.createElement('div', { className: 'feature-grid' }, claims.map((c, i) => React.createElement(Reveal, { key: c.icon, delay: i * 80, className: 'feature' }, React.createElement('div', { className: 'feature__icon' }, React.createElement(Icon, { name: c.icon, size: 30 })), React.createElement('div', { className: 'feature__txt' }, React.createElement('h3', { className: 'feature__title' }, t(c.title)), React.createElement('p', { className: 'feature__body' }, t(c.body))) )) ), React.createElement('div', { className: 'claims-stone-col' }, React.createElement('img', { className: 'claims-stone', src: 'assets/einstein-stein.png', alt: t({ de: 'EINSTEIN® Pflasterstein mit D-Punkt-Verzahnung', en: 'EINSTEIN® paving stone with D-point interlock' }), loading: 'lazy', decoding: 'async' })) ) ) ), /* System teaser — aerial pinned behind, revealed as the claims cover scrolls away. Side fade carries the headline. */ React.createElement('section', { className: 'system-immersive' }, React.createElement('div', { className: 'system-immersive__bg', style: { backgroundImage: 'url(assets/obj-commercial-yard.jpg)' } }), React.createElement('div', { className: 'system-immersive__fade' }, React.createElement('p', { className: 'eyebrow' }, t(window.SITE.system.eyebrow)), React.createElement('h2', { className: 'system-immersive__headline' }, t({ de: 'Maßstäbe neu gesetzt', en: 'Standards, redefined' })), React.createElement('div', { style: { marginTop: 'var(--space-6)' } }, React.createElement(Btn, { variant: 'primary', iconRight: 'arrow', onClick: () => navigate('system') }, t(S.cta.system))) ) ) ), React.createElement('div', { className: 'dark-stage' }, /* Projects teaser — floating rounded layer over the aerial, melting into the dark below */ React.createElement('section', { className: 'section objekte-float' }, React.createElement('div', { className: 'container' }, React.createElement(SectionHead, { eyebrow: t({ de: 'Objekte', en: 'Projects' }), title: t({ de: 'Wo EINSTEIN® bereits trägt.', en: 'Where EINSTEIN® already carries the load.' }), lead: t({ de: 'Von Logistikhöfen bis zu historischen Ortskernen — vier Anwendungsfelder.', en: 'From logistics yards to historic town centres — four fields of application.' }), }), React.createElement('div', { className: 'cat-grid' }, cats.map((c, i) => React.createElement(Reveal, { key: c.id, delay: i * 70, as: 'article', className: 'cat', onClick: () => navigate('projects', { cat: c.id }) }, React.createElement('img', { src: c.img, alt: t(c.title) }), React.createElement('div', { className: 'cat__inner' }, React.createElement('h3', { className: 'cat__title' }, t(c.title)), React.createElement('p', { className: 'cat__blurb' }, t(c.blurb)), React.createElement('span', { className: 'cat__more' }, t(S.cta.more), React.createElement(Icon, { name: 'arrow', size: 16 }))) )) ) ) ), /* Proof band */ React.createElement('section', { className: 'section section--ink' }, React.createElement('div', { className: 'container' }, React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr', gap: 'var(--space-7)' } }, React.createElement('div', { style: { maxWidth: 720 } }, React.createElement('p', { className: 'eyebrow' }, t(P.eyebrow)), React.createElement('h2', { className: 'display display--lg', style: { marginTop: 12 } }, t(P.title)), React.createElement('p', { className: 'lead', style: { marginTop: 16 } }, t(P.lead))), React.createElement('div', { className: 'stat-grid' }, P.stats.map((s, i) => React.createElement('div', { key: i, className: 'stat' + (i === 1 ? ' stat--hi' : '') }, React.createElement('div', { className: 'stat__val' }, s.value, React.createElement('span', { className: 'u' }, t(s.unit))), React.createElement('p', { className: 'stat__note' }, t(s.note))))), React.createElement('div', null, React.createElement(Btn, { variant: 'on-dark', iconRight: 'arrow', onClick: () => navigate('system', { anchor: 'proof' }) }, t({ de: 'Zur Versuchsreihe', en: 'See the test series' }))) ) ) ) ) ) ); }; Object.assign(window, { Hero, PartnerMarquee, Home }); })();