// Warmteo LP — Sections: Reality (team), Comparison, Cost-vs-Internal, Proof, FAQ, Form /** Query na lokální JPG/PNG: Browser cachuje / starý `sections.jsx` sonst keine neuen Fotos. Bei Asset-Tausch hochsetzen. */ const ASSET_BUST = '?v=w3-20260521c'; const bust = (path) => (path && path.includes('?') ? path : path + ASSET_BUST); /** Google reCAPTCHA v3 vor Absenden — liefert null ohne Site-Key (Demo). Secret niemals im Client. */ async function fetchRecaptchaToken() { const siteKey = (typeof window !== 'undefined' && (window.WARMTEO_RECAPTCHA_SITE_KEY || '').trim()) || ''; if (!siteKey) return null; const deadline = Date.now() + 15000; while (Date.now() < deadline) { const gr = typeof window !== 'undefined' ? window.grecaptcha : undefined; if (gr && typeof gr.ready === 'function') { return new Promise((resolve, reject) => { gr.ready(() => { gr.execute(siteKey, { action: 'warmteo_form_submit' }).then(resolve).catch(reject); }); }); } await new Promise((r) => setTimeout(r, 80)); } throw new Error('reCAPTCHA nicht geladen (Script blockiert?). Bitte Seite neu laden.'); } // ────────── 02 · REALITY (Team + Realisations merged) ────────── const REALITY_ITEMS = [ { kind: 'photo', label: 'Markus · Team-Lead', stamp: 'TEAM-LEAD', big: true, quote: '„Wir reden nicht.\nWir schrauben."', src: 'assets/realitaet-monteur-waermepumpen-aussen.png', alt: 'Monteur in gelbem Shirt und schwarzer Arbeitslatzhose lehnt entspannt an einer schwarzen Luft-Wasser-Wärmepumpe vor modernem Haus mit Rasen — freundlicher Blick in die Kamera.', objectPosition: 'center 42%', }, { kind: 'photo', label: 'Vaillant · aroTHERM plus', stamp: '2× AUSSENEINHEIT', meta: 'Zwei Luft-Wasser-Außeneinheiten auf Ortbeton — ausgerichtet, entkoppelt, dokumentiert montiert.', src: 'assets/realitaet-vaillant-arotherm-duo-aussen.jpg', alt: 'Parallele Außenaufstellung zweier Vaillant aroTHERM plus Luft-Wasser-Wärmepumpen auf Betonfundamenten mit Schwingungsdämpfern; dahinter dunkles Trapezblech, Gartenumfeld.', objectPosition: 'center 56%', }, { kind: 'spec', label: 'CREW SETUP', big: '4', sub: '× Monteure', tail: 'pro Einsatzteam · zertifiziert' }, { kind: 'photo', label: 'Wechselrichter · String-Anschluss', stamp: 'PV · DETAIL', meta: 'Beschriftete Leitungen · saubere Arbeit', src: 'assets/realitaet-pv-verkabelung.png', alt: 'Monteur steckt schwarze Solarkabel mit MC4-Steckern unter einen weißen Wechselrichter; beschriftete Leitungsetiketten.' }, { kind: 'stat', label: 'LIVE · DE', big: '14', sub: 'Crews · DE', signal: true }, { kind: 'photo', label: 'Viessmann · Außeneinheit', stamp: 'L/W AUSSEN', meta: 'Luft-Wasser-Gerät auf Kiesbett vor der Fassade — Leitungszuführungen und Aufstellfläche dokumentiert.', src: 'assets/realitaet-viessmann-luft-wasser-aussen.jpg', alt: 'Schwarze Viessmann-Außenluft-Wärmepumpe vor heller Hausfassade mit Kiesstreifen und kleinen Kellernfenstern.', objectPosition: 'center 48%', }, { kind: 'photo', label: 'Außenmodul · Montage vor Ort', stamp: 'MONTAGE', meta: 'Geöffnete Baugruppe · Handschuhe · dokumentiert', src: 'assets/realitaet-wp-montage-aussen.png', alt: 'Techniker mit Werkzeug und Handschuhen arbeitet hockend am geöffneten grauen Außenmodul einer Wärmepumpe vor einem modernen Haus; Verkabelung und Verrohrung sichtbar.' }, { kind: 'photo', label: 'Mitsubishi Ecodan · Heizungszentrale', stamp: 'EFH · 11 kW', meta: 'Ecodan Innenmodul · Speicher · gedämmte Verrohrung', src: 'assets/realitaet-ecodan-heizungsraum.png', alt: 'Heiztechnikraum mit Mitsubishi-Ecodan-Wandgerät, weißem Speicher, rotem Ausdehnungsgefäß und grau isolierter Rohrleitungsführung.' }, { kind: 'photo', label: 'Innenmodul · Heizwand', stamp: 'TECHNIKRAUM', meta: 'Silbergedämmte Vorlauf-/Rücklaufstrassen, Armaturenzugänglichkeit und Kondensatführung — sauber an der Nassfliese ausgerichtet.', src: 'assets/realitaet-innenmodul-verrohrung.jpg', alt: 'Weisses Wand-Innengerät einer Wärmebereitung mit digitalem Farbdisplay, silberisolierter Verrohrung, roten Absperrkugelhähnen, seitlichem Pufferspeicher und Kondensattechnik unter dem Feld.', objectPosition: 'center 45%', }, { kind: 'photo', label: 'NIBE F1145 · Bedienservice', stamp: 'INNENMODUL', meta: 'Farbdisplay · gedämmte Rohre · Manometer', src: 'assets/realitaet-nibe-f1145.png', alt: 'Techniker bedient die Steuerung einer weißen NIBE-Wärmepumpe F1145; im Hintergrund gedämmte Rohrleitungen, Manometer und weiterer Speicher.' }, { kind: 'photo', label: 'Schlieger · Puffer & Speicher', stamp: 'KELLER · HYDRAULIK', meta: 'Zwei zylindrische Schlieger-Speicher mit Kupfer- und Kunststoffverrohrung, Ausdehnungsgefäßen und strukturierten Messstellen.', src: 'assets/realitaet-schlieger-zwei-speicher-keller.png', alt: 'Technikbereich mit zwei grossen beschichteten Speicherzylindern der Marke Schlieger; rotes Kugelausgleichsfass am Boden, weiteres Membranausgleichsgefäss an der Wand, Kupferverteilungen und Armaturenkreuz.', objectPosition: 'center 42%', }, { kind: 'photo', label: 'Heiztechnik · Pufferspeicher', stamp: 'EFH · REAL', meta: 'Stehendes Speichervolumen mit Anschlussscheibe, isolierte Leitungstrassen zur Wandverteilung — realer Kellerraum unter Last.', src: 'assets/realitaet-pufferspeicher-heizraum.jpg', alt: 'Blick in einen bestehenden Heiztechnikraum: grosser vertikaler Pufferspeicher mit Anschlüssen und Manometer, rotes Ausdehnungsgefäss, Schaltschrank mit Sicherungen, Licht von einem Kellerfenster.', objectPosition: 'center 44%', }, ]; function RealityCard({ it }) { const baseStyle = { flex: '0 0 auto', width: it.big ? 460 : 300, height: 380, borderRadius: 22, overflow: 'hidden', position: 'relative', background: it.kind === 'spec' ? WARMTEO.ink2 : WARMTEO.ink2, border: `1px solid ${WARMTEO.lineDark}`, }; if (it.kind === 'photo') { return (
● {it.stamp}
{it.quote && (
{it.quote}
)} {it.meta && !it.quote && (
{it.meta}
)}
); } if (it.kind === 'spec') { return (
// {it.label}
{it.big} {it.sub}
{it.tail}
); } // stat return (
// {it.label}
{it.big}
{it.sub}
); } function RealitySection() { const [paused, setPaused] = useState(false); const [dragging, setDragging] = useState(false); const [dragX, setDragX] = useState(0); // accumulated user offset in px const dragRef = React.useRef({ active: false, startX: 0, baseX: 0, moved: false }); const trackRef = React.useRef(null); const carouselRef = React.useRef(null); const resumeAfterInputRef = React.useRef(null); const mouseInsideRef = React.useRef(false); // duplicate for seamless loop const items = [...REALITY_ITEMS, ...REALITY_ITEMS]; // wrap dragX so user scrolling never escapes the looped track width const wrapDrag = (x) => { const el = trackRef.current; if (!el) return x; const half = el.scrollWidth / 2; // one full set width if (!half) return x; let v = x % half; if (v > 0) v -= half; return v; }; const clearInputResume = () => { if (resumeAfterInputRef.current) { clearTimeout(resumeAfterInputRef.current); resumeAfterInputRef.current = null; } }; const scheduleResumeAfterInput = React.useCallback(() => { clearInputResume(); resumeAfterInputRef.current = setTimeout(() => { if (!mouseInsideRef.current) setPaused(false); resumeAfterInputRef.current = null; }, 2200); }, []); React.useEffect(() => () => clearInputResume(), []); React.useEffect(() => { const el = carouselRef.current; if (!el) return; const onWheel = (e) => { let dx = e.deltaX; if (e.shiftKey) dx -= e.deltaY; else if (Math.abs(e.deltaY) >= Math.abs(e.deltaX)) dx = -e.deltaY; if (Math.abs(dx) < 1) return; e.preventDefault(); setPaused(true); setDragX((x) => wrapDrag(x + dx)); scheduleResumeAfterInput(); }; el.addEventListener('wheel', onWheel, { passive: false }); return () => el.removeEventListener('wheel', onWheel); }, [scheduleResumeAfterInput]); const onPointerDown = (e) => { if (e.button !== 0) return; clearInputResume(); dragRef.current = { active: true, startX: e.clientX, baseX: dragX, moved: false }; setDragging(true); setPaused(true); e.preventDefault(); e.currentTarget.setPointerCapture?.(e.pointerId); }; const onPointerMove = (e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; if (Math.abs(dx) > 3) dragRef.current.moved = true; setDragX(wrapDrag(dragRef.current.baseX + dx)); }; const endPointerDrag = (e) => { if (!dragRef.current.active) return; dragRef.current.active = false; setDragging(false); e?.currentTarget?.releasePointerCapture?.(e.pointerId); setTimeout(() => { if (!mouseInsideRef.current) setPaused(false); }, 600); }; const ARROW_STEP = 320; const onCarouselKeyDown = (e) => { if (e.key === 'ArrowLeft') { e.preventDefault(); setPaused(true); setDragX((x) => wrapDrag(x + ARROW_STEP)); scheduleResumeAfterInput(); } else if (e.key === 'ArrowRight') { e.preventDefault(); setPaused(true); setDragX((x) => wrapDrag(x - ARROW_STEP)); scheduleResumeAfterInput(); } }; return (

Echte Monteure.
Echte Baustellen.

Keine Stockfotos, keine Agentur-Models. Das ist unser Team — auf der Baustelle, im Schmutz, mit Werkzeug in der Hand.

{/* Marquee track — Ziehen, Mausrad (vertikal/Shift+Rad), Pfeiltasten nach Fokus (Tab) */}
{ mouseInsideRef.current = true; if (!dragRef.current.active) setPaused(true); }} onMouseLeave={() => { mouseInsideRef.current = false; if (!dragRef.current.active) setPaused(false); }} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endPointerDrag} onPointerCancel={endPointerDrag} onLostPointerCapture={() => { if (!dragRef.current.active) return; dragRef.current.active = false; setDragging(false); }} style={{ position: 'relative', maskImage: 'linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%)', WebkitMaskImage: 'linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%)', cursor: dragging ? 'grabbing' : 'grab', touchAction: 'none', WebkitUserSelect: 'none', userSelect: 'none', }}>
{items.map((it, i) => )}
); } // ────────── Inline Section CTA (button at end of a section, inside its container) ────────── function SectionCTA({ children, onCTA }) { return (
{children}
); } // ────────── Inline CTA Block ────────── function InlineCTA({ tone = 'light', eyebrow, headline, sub, primary = 'Verfügbarkeit prüfen', secondary, onPrimary, onSecondary }) { const dark = tone === 'dark'; return (
{/* decorative dot */}
{eyebrow && (
{eyebrow}
)}

{headline}

{sub && (

{sub}

)}
{primary} {secondary && ( )}
); } // ────────── 03 · COMPARISON (Problem vs Solution) ────────── function ComparisonSection({ variant, onCTA }) { const [side, setSide] = useState('loesung'); const [autoplay, setAutoplay] = useState(true); useEffect(() => { if (!autoplay) return; const t = setInterval(() => setSide((s) => (s === 'problem' ? 'loesung' : 'problem')), 4000); return () => clearInterval(t); }, [autoplay]); const pickSide = (k) => { setAutoplay(false); setSide(k); }; const problems = [ 'Aufträge ablehnen wegen Kapazität', 'Personalsuche dauert Monate', 'Reklamationen fressen die Marge', 'Wachstum scheitert am Bottleneck', ]; const solutions = [ 'Eingespielte Crews — sofort verfügbar', 'Anfahrt binnen 48–72 Stunden', '2.000+ saubere Installationen', 'Bundesweit · pay-per-Anlage', ]; const isProblem = side === 'problem'; return (

Heute sagen Sie ab.
Morgen sagen Sie zu.

{/* Segmented switch with sliding pill */}
{[ { k: 'problem', l: 'Ohne uns' }, { k: 'loesung', l: 'Mit Warmteo' }, ].map((o) => ( ))}
{/* Card with face background + flipping rows */}
{/* face photo placeholder filling left */}
{isProblem ? ( ) : ( )} {/* tint overlay */}
{/* big stamp */}
{isProblem ? 'ABGELEHNT' : 'ZUGESAGT'}
{/* List right */}
{isProblem ? '// IHR ALLTAG OHNE UNS' : '// IHR ALLTAG MIT UNS'}
    {(isProblem ? problems : solutions).map((t, i) => (
  • {isProblem ? '✕' : '✓'} {t}
    • ))}
{variant === 'aktion' ? 'Aktion sichern · 500 € Rabatt' : 'Partner werden'}
); } // ────────── 04 · COST VS INTERNAL TEAM ────────── function CostSection({ variant, onCTA }) { const [ref, inView] = useInView({ threshold: 0.4 }); const internalCost = useCountUp(486000, { duration: 1600, start: inView }); const ourCost = useCountUp(0, { duration: 600, start: inView }); // "alarm" fires after counter finishes — card turns red, stamp slams in const [alarm, setAlarm] = React.useState(false); React.useEffect(() => { if (!inView) { setAlarm(false); return; } const t = setTimeout(() => setAlarm(true), 1700); return () => clearTimeout(t); }, [inView]); return (

Pay-per-Anlage statt
fixe Lohnkosten.

Was ein 4-köpfiges internes Montageteam jährlich kostet — und was Sie mit Warmteo stattdessen flexibel bezahlen.

{/* INTERN — red */}
// INTERN · 4 MONTEURE
{internalCost.toLocaleString('de-DE')} €
/JAHR
Lohn · Lohnnebenkosten · Fahrzeug · Werkzeug · Schulung
    {[ 'Fixkosten — auch bei leeren Monaten', 'Recruiting 6–9 Monate, kein Garantie-Fit', 'Krankheitstage = ausfallende Aufträge', 'Reklamationen fressen die Marge', ].map((t, i) => (
  • ✕ {t}
    • ))}
{/* "REJECTED" stamp */}
NICHT SKALIERBAR
{/* WARMTEO — green */}
{/* shimmer sweep */}
Kostenloser Rechen-Vergleich
); } const costListStyle = (kind) => ({ listStyle: 'none', padding: 0, marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10, borderTop: `1px solid ${kind === 'green' ? 'rgba(255,255,255,0.1)' : WARMTEO.line}`, paddingTop: 20, }); const costItem = (color, dark = false) => ({ display: 'flex', alignItems: 'flex-start', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 15.5, color: dark ? 'rgba(255,255,255,0.92)' : WARMTEO.ink2, fontWeight: 500, lineHeight: 1.4, }); // ────────── 05 · PROOF — Logos & Realisations ────────── function ProofSection({ variant, onCTA }) { /** Marken-Logos als lokale SVGs (teilw. Wikimedia Commons; Mitsubishi/Panasonic Simple Icons). */ const brands = [ { name: 'Viessmann', logo: 'assets/brands/viessmann.svg' }, { name: 'Vaillant', logo: 'assets/brands/vaillant.svg' }, { name: 'Bosch', logo: 'assets/brands/bosch.svg' }, { name: 'Daikin', logo: 'assets/brands/daikin.svg' }, { name: 'Mitsubishi Electric', logo: 'assets/brands/mitsubishi.svg' }, { name: 'Panasonic', logo: 'assets/brands/panasonic.svg' }, { name: 'Buderus', logo: 'assets/brands/buderus.png' }, // Kein Logo — Platzhalter wie „u. a.“ { name: 'Weitere Marken', more: true }, ]; const cases = [ { city: 'Außen', kw: 'Montage', img: 'assets/carousel-crew-outdoor.png', model: 'Crew & Aufstellung', blurb: 'Koordination auf der Baustelle — von der Lieferung bis zu den ersten Rohr- und Elektroanschlüssen.', type: 'Team · Logistik', days: 2, }, { city: 'Keller', kw: 'Hydraulik', img: 'assets/realisation-pufferspeicher.png', model: 'Pufferspeicher & Rohrnetz', blurb: 'Isolierte Leitungen, Expansionsgefäß und saubere Anbindung im Technikraum.', type: 'Bestand · EFH', days: 3, }, { city: 'Garten', kw: 'L/W', img: 'assets/carousel-unit-outdoor.png', model: 'Außeneinheit im Betrieb', blurb: 'Luft-Wasser-Gerät auf Fundament — typische Montage bei Kundenprojekten.', type: 'Luft / Wasser', days: 2, }, { city: 'System', kw: 'Reflex', img: 'assets/carousel-buffer-reflex.png', model: 'Speicher-Integration', blurb: 'Hydraulische Einbindung für stabilen Vorlauf — nach Plan und Herstellervorgabe.', type: 'Puffer · Heizung', days: 3, }, { city: 'TWW', kw: 'Speicher', img: 'assets/carousel-tank-silver.png', model: 'Brauchwarmwasser-Speicher', blurb: 'Stehendes Volumen im Technikraum — Zirkulation und Frischwasser sauber dokumentiert, Armaturen beschriftet, Übergabe unter Last möglich.', type: 'Trinkwasser', days: 2, }, { city: 'Elektro', kw: 'PV+Speicher', img: 'assets/realisation-solar-battery.png', model: 'Wechselrichter & Batteriespeicher', blurb: 'Übersichtliche Verdrahtung, Schutzorgane und saubere Trassenführung an der Wand.', type: 'SolarEdge · AC/DC', days: 4, }, ]; return (

Wir montieren diese Marken.

{/* Brand logos row */}
{brands.map((b, i) => (
{ e.currentTarget.style.background = WARMTEO.bone; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }} > {b.more ? (

u. a.
weitere Marken

) : ( {b.name} )}
))}
{/* Case grid */}

Letzte Einsätze.

{cases.map((c, i) => (
{ e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 20px 40px -16px rgba(0,0,0,0.18)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }} >
{c.img ? ( ) : ( )}
● {c.city.toUpperCase()}
{c.kw}
{c.model}
{c.blurb && (

{c.blurb}

)}
{c.type} ● {c.days} Tage
))}
Verfügbarkeit prüfen
); } // ────────── 06 · FAQ ────────── function FAQSection() { const items = [ { q: 'Wie schnell können Sie starten?', a: 'In der Regel binnen 48–72 Stunden. Nach dem ersten Kapazitäts-Check geben wir Ihnen ein verbindliches Startdatum für den ersten Einsatz.' }, { q: 'In welchen Regionen sind Sie aktiv?', a: 'Bundesweit — alle 16 Bundesländer. Unsere Crews sind über DE verteilt; Anfahrt und Übernachtung sind im Tagessatz enthalten.' }, { q: 'Wie läuft die erste Zusammenarbeit ab?', a: 'Kurzes Telefonat oder WhatsApp · Kapazitäts-Check und Region-Abgleich · erster Probe-Einsatz · danach Rahmenvertrag mit fixen Konditionen.' }, { q: 'Was kostet eine Montage konkret?', a: 'Pay-per-Anlage ab 5.000 € netto, je nach Modell und Aufwand. Bei Volumen ab 5 Anlagen/Monat gibt es Staffelpreise. Keine Fixkosten, keine Bereitschaftspauschale.' }, { q: 'Welche Marken montieren Sie?', a: 'Alle gängigen DE-Hersteller: Viessmann, Vaillant, Bosch, Daikin, Mitsubishi, Panasonic, Buderus, Wolf u.a.' }, { q: 'Wie ist das mit Reklamationen?', a: 'Wir übernehmen die volle Verantwortung für die Montagequalität. Reklamationen werden binnen 5 Werktagen vor Ort geprüft und behoben — ohne Zusatzkosten.' }, ]; const [open, setOpen] = useState(new Set([0, 1])); const toggle = (i) => { setOpen((s) => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; }); }; return (

Die häufigsten Fragen.

{items.map((it, i) => { const isOpen = open.has(i); return (

{it.a}

); })}
); } // ────────── 07 · MULTI-STEP FORM ────────── // Vereinfachte Querstreifen oben → unten (ohne Wappen). Quellen: Landesflaggen / Landesfarben. const BUNDESLAENDER = [ { code: 'BW', name: 'Baden-Württemberg', stripes: ['#000000', '#FFCC00'] }, { code: 'BY', name: 'Bayern', stripes: ['#FFFFFF', '#0066B3'] }, { code: 'BE', name: 'Berlin', stripes: ['#E3000F', '#FFFFFF', '#E3000F'] }, { code: 'BB', name: 'Brandenburg', stripes: ['#E3000F', '#FFFFFF'] }, { code: 'HB', name: 'Bremen', stripes: ['#E3000F', '#FFFFFF', '#E3000F', '#FFFFFF'] }, { code: 'HH', name: 'Hamburg', stripes: ['#E3000F', '#FFFFFF'] }, { code: 'HE', name: 'Hessen', stripes: ['#E3000F', '#FFFFFF'] }, { code: 'MV', name: 'Mecklenburg-Vorpommern', stripes: ['#005CA9', '#FFFFFF', '#FFD300', '#FFFFFF', '#E3000F'] }, { code: 'NI', name: 'Niedersachsen', stripes: ['#000000', '#E3000F', '#FFCC00'] }, { code: 'NW', name: 'Nordrhein-Westfalen', stripes: ['#1F8A4C', '#FFFFFF', '#E3000F'] }, { code: 'RP', name: 'Rheinland-Pfalz', stripes: ['#000000', '#E3000F', '#FFCC00'] }, { code: 'SL', name: 'Saarland', stripes: ['#000000', '#E3000F', '#FFCC00'] }, { code: 'SN', name: 'Sachsen', stripes: ['#FFFFFF', '#1F8A4C'] }, { code: 'ST', name: 'Sachsen-Anhalt', stripes: ['#FFCC00', '#000000'] }, { code: 'SH', name: 'Schleswig-Holstein', stripes: ['#005CA9', '#FFFFFF', '#E3000F'] }, { code: 'TH', name: 'Thüringen', stripes: ['#FFFFFF', '#E3000F'] }, ]; function FlagStripes({ stripes, w = 32, h = 22 }) { return (
{stripes.map((c, i) => (
))}
); } function FormSection({ variant }) { const [step, setStep] = useState(0); const [data, setData] = useState({ volume: '', land: '', plz: '', firma: '', name: '', email: '', phone: '' }); const [errors, setErrors] = useState({}); const [submitState, setSubmitState] = useState('idle'); // idle | loading | success | error const [submitError, setSubmitError] = useState(''); const update = (k, v) => { setData((d) => ({ ...d, [k]: v })); if (errors[k]) setErrors((e) => { const n = { ...e }; delete n[k]; return n; }); }; // ── Validators ── const validatePLZ = (plz) => { const trimmed = (plz || '').trim(); if (!/^\d{5}$/.test(trimmed)) return false; const n = parseInt(trimmed, 10); // German PLZ valid range: 01067 (Dresden) – 99998 (Körner) return n >= 1067 && n <= 99998; }; const validateEmail = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(e.trim()); const validatePhone = (p) => { const cleaned = p.replace(/[\s\-()/.]/g, ''); return /^\+?\d{7,15}$/.test(cleaned); }; const validateStep = (s) => { const errs = {}; if (s === 0 && !data.volume) errs.volume = 'Bitte Volumen wählen'; if (s >= 1) { if (!data.land) errs.land = 'Bundesland erforderlich'; if (!data.plz.trim()) errs.plz = 'PLZ erforderlich'; else if (!validatePLZ(data.plz)) errs.plz = 'Ungültige PLZ (5 Ziffern, z.B. 80331)'; } if (s === 2) { if (!data.firma.trim()) errs.firma = 'Firma erforderlich'; if (!data.name.trim()) errs.name = 'Name erforderlich'; if (!validateEmail(data.email)) errs.email = 'Gültige E-Mail erforderlich'; if (!validatePhone(data.phone)) errs.phone = 'Gültige Telefonnummer erforderlich'; } setErrors(errs); return Object.keys(errs).length === 0; }; const submitForm = async () => { if (!validateStep(2)) return; setSubmitState('loading'); setSubmitError(''); const webhookUrl = (window.WARMTEO_WEBHOOK_URL || '').trim(); let recaptchaToken = null; try { recaptchaToken = await fetchRecaptchaToken(); } catch (capErr) { console.error('[Warmteo Form] reCAPTCHA', capErr); setSubmitError(capErr.message || 'reCAPTCHA'); setSubmitState('error'); return; } const payload = { ...data, variant, submittedAt: new Date().toISOString(), pageUrl: window.location.href, userAgent: navigator.userAgent, referrer: document.referrer || null, ...(recaptchaToken ? { recaptchaToken } : {}), }; try { if (!webhookUrl) { // Demo mode: log + simulate success console.log('[Warmteo Form] No webhook configured, demo payload:', payload); await new Promise((r) => setTimeout(r, 700)); setSubmitState('success'); return; } const res = await fetch(webhookUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!res.ok) throw new Error(`HTTP ${res.status}`); setSubmitState('success'); } catch (err) { console.error('[Warmteo Form] submit failed', err); setSubmitError(err.message || 'Unbekannter Fehler'); setSubmitState('error'); } }; const isAktion = variant === 'aktion'; const formCTA = isAktion ? 'Anfrage senden · 500 € Rabatt' : 'Partnerschaft anfragen'; const volumes = ['1–5', '5–10', '10–20', '20+']; const fc = isAktion ? { title: ( <> Aktuell nur 1 Slot für neue Partner. ), lead: ( <> Aktuell haben wir Kapazität für nur 1 neuen Partner. Sichern Sie sich Ihren Termin.{' '} Für die 500 €-Aktion füllen Sie die Schritte aus — Bestätigung binnen{' '} 24 Stunden. ), step1: 'Schritt 1 · Monatliches Montagevolumen', step2: 'Schritt 2 · Ihre Einsatzregion', step3: 'Schritt 3 · Kontakt für Rabatt & Rückruf', hStep1: 'Wie viele Anlagen pro Monat planen Sie?', hStep2: 'In welchem Bundesland liegen Ihre Einsätze?', hStep3: 'Wie erreichen wir Sie für Rabatt und Termin?', successLead: ( <> Wir prüfen Ihre Angaben und die Aktionsbedingungen — Rückruf in der Regel binnen{' '} 24 Stunden, meist per WhatsApp oder Telefon. ), } : { title: ( <> Aktuell nur 1 Slot für neue Partner. ), lead: ( <> Aktuell haben wir Kapazität für nur 1 neuen Partner. Sichern Sie sich Ihren Termin.{' '} Antwort binnen 24 Stunden. ), step1: 'Schritt 1 · Monatliches Volumen', step2: 'Schritt 2 · Region der Einsätze', step3: 'Schritt 3 · Kontakt', hStep1: 'Wie viele Anlagen pro Monat?', hStep2: 'In welchem Bundesland?', hStep3: 'Wer ist Ihr Ansprechpartner?', successLead: ( <> Wir melden uns mit den nächsten Schritten zur Partnerschaft — in der Regel binnen{' '} 24 Stunden, meist per WhatsApp oder Telefon. ), }; return (

{fc.title}

{fc.lead}

{/* progress */}
{[0, 1, 2].map((i) => (
= i ? WARMTEO.signal : 'transparent', border: `1.5px solid ${step >= i ? WARMTEO.signal : WARMTEO.lineDark}`, color: step >= i ? WARMTEO.ink : 'rgba(255,255,255,0.5)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 13, transition: 'all 0.2s', }}>{i + 1}
{i < 2 &&
i ? WARMTEO.signal : WARMTEO.lineDark, transition: 'background 0.2s' }} />} ))}
{step === 0 && (
{fc.step1}

{fc.hStep1}

{volumes.map((v) => { const active = data.volume === v; return ( ); })}
)} {step === 1 && (
{fc.step2}

{fc.hStep2}

{/* Desktop: grid karet s vlajkami */}
{BUNDESLAENDER.map((l) => { const active = data.land === l.code; return ( ); })}
{/* Mobile: native dropdown */}
▾
update('plz', e.target.value.replace(/\D/g, '').slice(0, 5))} className="form-input" style={{ ...inputStyle, borderColor: errors.plz ? WARMTEO.danger : inputStyle.borderColor }} /> {errors.plz &&
{errors.plz}
} {errors.land &&
{errors.land}
}
)} {step === 2 && (
{fc.step3}

{fc.hStep3}

{submitState === 'success' ? (
✓
Danke, {data.name.split(' ')[0] || 'wir haben Ihre Anfrage'}!
{fc.successLead}
) : (
update('firma', e.target.value)} className="form-input" style={{ ...inputStyle, borderColor: errors.firma ? WARMTEO.danger : inputStyle.borderColor, width: '100%' }} /> {errors.firma &&
{errors.firma}
}
update('name', e.target.value)} className="form-input" style={{ ...inputStyle, borderColor: errors.name ? WARMTEO.danger : inputStyle.borderColor, width: '100%' }} /> {errors.name &&
{errors.name}
}
update('email', e.target.value)} className="form-input" style={{ ...inputStyle, borderColor: errors.email ? WARMTEO.danger : inputStyle.borderColor, width: '100%' }} /> {errors.email &&
{errors.email}
}
update('phone', e.target.value)} className="form-input" style={{ ...inputStyle, borderColor: errors.phone ? WARMTEO.danger : inputStyle.borderColor, width: '100%' }} /> {errors.phone &&
{errors.phone}
}
{submitState === 'error' && (
Ups — Übermittlung fehlgeschlagen ({submitError}). Bitte erneut versuchen oder per WhatsApp.
)} {/* GDPR notice — passive (consent by submission) */}
Mit dem Absenden willigen Sie ein, dass Ihre Angaben zur Bearbeitung der Anfrage gespeichert und verarbeitet werden. Details in der{' '} Datenschutzerklärung. Widerruf jederzeit per E-Mail an info@warmteo.de möglich.
Zum Spam-Schutz nutzen wir{' '} Google reCAPTCHA{' '} (läuft im Hintergrund; kein sichtbarer Checkbox). Diese Website ist geschützt durch reCAPTCHA. Es gelten die{' '} Datenschutzerklärung {' '}und{' '} Nutzungsbedingungen {' '} von Google.
)}
)} {/* Nav */} {step > 0 && submitState !== 'success' && (
{step < 2 ? ( { if (validateStep(step)) setStep((s) => Math.min(2, s + 1)); }}>Weiter ) : ( {submitState === 'loading' ? 'Wird übermittelt…' : formCTA} )}
)}
{/* WhatsApp alt — muted, secondary to form */}
Lieber direkt schreiben?
WhatsApp an Justin · Antwort meist binnen 1 Stunde
Chat starten
); } const formLabel = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: WARMTEO.signal, marginBottom: 8, fontWeight: 600, }; const formH = { fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3vw, 32px)', fontWeight: 700, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 24px', }; const inputStyle = { width: '100%', appearance: 'none', background: WARMTEO.ink3, color: '#fff', border: `1.5px solid ${WARMTEO.lineDark}`, padding: '16px 18px', fontFamily: 'var(--font-sans)', fontSize: 16, outline: 'none', boxSizing: 'border-box', }; const errorStyle = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em', color: '#ff8a87', marginTop: 6, fontWeight: 600, }; // ────────── Footer ────────── function Footer() { const colLabel = { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.42)', marginBottom: 14, }; const linkStyle = { display: 'block', color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 14, lineHeight: 1.85, transition: 'color 0.15s', }; const onEnter = (e) => (e.currentTarget.style.color = WARMTEO.signal); const onLeave = (e) => (e.currentTarget.style.color = 'rgba(255,255,255,0.78)'); return ( ); } // ────────── Helpers ────────── function headingStyle(tone) { return { fontFamily: 'var(--font-display)', fontSize: 'clamp(34px, 4.5vw, 56px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.05, color: tone === 'dark' ? '#fff' : WARMTEO.ink, margin: '0 0 16px', textWrap: 'balance', }; } function paraStyle(tone) { return { fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.55, color: tone === 'dark' ? 'rgba(255,255,255,0.7)' : WARMTEO.ink3, }; } Object.assign(window, { RealitySection, ComparisonSection, CostSection, ProofSection, FAQSection, FormSection, Footer, InlineCTA, SectionCTA, });