/* WhatsApp Section — Kunden-Kommunikation via WhatsApp */ const WhatsAppSection = () => { // Animated car position on mini-map — follows real streets. // Map canvas is 300×180. Roads (in px, on SVG grid): // Horizontal: y=48 (minor), y=110 (major) // Vertical: x=108 (minor), x=196 (major) // Pin at (90, 60) → 30%, 33%. // Waypoints in PERCENT so they map directly to CSS left/top on the 300×180 map. // % = px/3 for x, px/1.8 for y const WAYPOINTS = [ { x: 65.3, y: 88 }, // start on major V road (x=196), near bottom edge { x: 65.3, y: 61 }, // up to major H road (y=110) { x: 36, y: 61 }, // left along major H road to minor V intersection (x=108) { x: 36, y: 33 }, // up minor V road to height of pin (y=60) { x: 30, y: 33 }, // short hop west to pin (90,60) ]; // Cumulative segment lengths for constant-speed traversal const segLens = WAYPOINTS.slice(1).map((p, i) => { const a = WAYPOINTS[i]; return Math.hypot(p.x - a.x, p.y - a.y); }); const totalLen = segLens.reduce((s, v) => s + v, 0); const [t, setT] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setT(v => (v + 1) % 100), 120); return () => clearInterval(id); }, []); // Fly-in annotations on scroll into view const phoneWrapRef = React.useRef(null); const [annoIn, setAnnoIn] = React.useState(false); React.useEffect(() => { if (!phoneWrapRef.current) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setAnnoIn(true); io.disconnect(); } }); }, { threshold: 0.35 }); io.observe(phoneWrapRef.current); return () => io.disconnect(); }, []); // t: 0..100 → distance travelled along polyline const dist = (t / 100) * totalLen; let acc = 0; let px = WAYPOINTS[0].x, py = WAYPOINTS[0].y; for (let i = 0; i < segLens.length; i++) { if (dist <= acc + segLens[i]) { const f = segLens[i] === 0 ? 0 : (dist - acc) / segLens[i]; const a = WAYPOINTS[i], b = WAYPOINTS[i + 1]; px = a.x + (b.x - a.x) * f; py = a.y + (b.y - a.y) * f; break; } acc += segLens[i]; px = WAYPOINTS[i + 1].x; py = WAYPOINTS[i + 1].y; } const eta = Math.max(1, Math.round(8 - t * 0.07)); const WA_GREEN = '#25D366'; const WA_GREEN_DEEP = '#128C7E'; const WA_BG = '#E5DDD5'; const DOODLE_SVG = ``; const DOODLE_URL = `url("data:image/svg+xml;utf8,${DOODLE_SVG}")`; return (
{/* LEFT — copy */}
Für Ihre Kunden · WhatsApp

Jede Fahrt direkt in WhatsApp.

Statt SMS oder App-Download: Ihre Kunden erhalten Bestätigung, Live-Position des Fahrers und Ankunftszeit direkt auf WhatsApp — da, wo sie ohnehin sind.

{[ {t:'Buchungsbestätigung in Sekunden', d:'Sobald AIVENT disponiert, geht die Nachricht raus — mit Adresse, Uhrzeit und Fahrer.'}, {t:'Live-Karte mit Fahrer-Position', d:'Eingebettete Web-Ansicht zeigt in Echtzeit, wo der Wagen ist und wann er eintrifft.'}, {t:'Updates ohne Nachfrage', d:'„Fahrer ist in 2 Minuten da", „Fahrer ist angekommen" — automatische Push-Nachrichten statt nervöser Rückrufe.'}, {t:'Offizielle WhatsApp Business API', d:'Zertifiziertes Template-Messaging, End-to-End verschlüsselt, DSGVO-konform.'}, ].map((row,i)=>(
{row.t}
{row.d}
))}
{/* RIGHT — WhatsApp chat mockup */}
{/* Green glow */}
{/* Chat frame */}
{/* Header */}
TR
Taxi Ruf
online · Business
{/* Chat body */}
{/* Date divider */}
HEUTE
{/* Bubble — confirmation */}
Buchung bestätigt ✓
Morgen 06:30 Uhr
Mozartstr. 42 → Hauptbahnhof
gestern 18:32 ✓✓
{/* Bubble — driver assigned */}
Ihr Fahrer Max ist unterwegs. Kennzeichen B-TX 4711 · Mercedes E-Klasse
06:22 ✓✓
{/* Bubble — LIVE MAP */}
{/* Map — Uber-style: cool neutral base, bold white roads, minimal detail */}
{/* Base */} {/* Block tiles — slightly lighter than base, like Uber's parcel polygons */} {/* Park — sage green, Uber-style */} {/* Water — soft cool blue, only in SE corner */} {/* A handful of large, simple building blocks — subtle gray fill, no outlines */} {/* Kept very sparse and rectangular-but-big, like Uber footprints at this zoom */} {/* Block B */} {/* Block C */} {/* Block D */} {/* Block E */} {/* Block F */} {/* Block G */} {/* Block H */} {/* ROADS — Uber-style bold white with no casing */} {/* Minor streets */} {/* Major roads — a touch thicker */} {/* Route — black line underneath for Uber-style contrast, then accent on top */} `${p.x*3},${p.y*1.8}`).join(' ')} stroke="#6B7280" strokeWidth="3" fill="none" strokeDasharray="6 5" strokeLinecap="round" strokeLinejoin="round" opacity="0.85"/> {/* Destination pin (pickup) */}
{/* Car (moving) */}
{/* Arrival pill */}
Ankunft in {eta} Min
{/* Attribution */}
TAXI RUF · LIVE
{/* Map caption */}
Fahrer: Max · B-TX 4711
{eta} Minuten entfernt · Karte öffnen →
06:24 ✓✓
{/* Typing indicator */}
{[0,0.15,0.3].map((d,i)=>( ))}
{/* Input bar */}
😊 Nachricht schreiben...
{/* Floating annotations — fly in when scrolled into view */}
↙ EINGEBETTETE
LIVE-KARTE
AUTOMATISCHE
UPDATES
); }; window.WhatsAppSection = WhatsAppSection;