import React from 'react';
import { BusFront, ShieldCheck, ArrowRight, PlayCircle, LayoutDashboard, CalendarDays, Users, BarChart3, Settings, CheckCircle, FileText, Sparkles, Clock, Home, Map, MessageSquare, User, ClipboardCheck, HeartHandshake, Server, Leaf, Lock } from 'lucide-react';

export default function App() {
  return (
    <div className="min-h-screen bg-slate-50 font-sans selection:bg-blue-200 selection:text-blue-900">
      
      {/* Navigation */}
      <nav className="fixed w-full z-50 top-0 transition-all duration-300 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo */}
            <div className="flex items-center gap-2">
              <div className="bg-blue-600 p-2 rounded-lg">
                <BusFront className="w-6 h-6 text-white" />
              </div>
              <span className="text-2xl font-bold text-slate-900 tracking-tight">Betterbus</span>
            </div>
            
            {/* Desktop Menu (Placeholder) */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#funktionen" className="text-slate-600 hover:text-blue-600 font-medium transition-colors">Funktionen</a>
              <a href="#vorteile" className="text-slate-600 hover:text-blue-600 font-medium transition-colors">Vorteile</a>
              <a href="#preise" className="text-slate-600 hover:text-blue-600 font-medium transition-colors">Preise</a>
              <button className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-full font-medium transition-all shadow-sm shadow-blue-200">
                Demo buchen
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <main className="pt-32 pb-16 sm:pt-40 sm:pb-24 lg:pb-32 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
            
            {/* Left Column: Text Content */}
            <div className="max-w-2xl">
              {/* Topline Badge */}
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 border border-blue-100 mb-6">
                <ShieldCheck className="w-4 h-4 text-blue-600" />
                <span className="text-sm font-semibold text-blue-800 tracking-wide uppercase">
                  Digital Souverän & Made in Germany
                </span>
              </div>
              
              {/* Heading */}
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.15] tracking-tight mb-6">
                Die All-in-One Software für <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Busunternehmen</span> und Fahrdienste
              </h1>
              
              {/* Text Paragraphs */}
              <div className="text-lg sm:text-xl text-slate-600 mb-8 space-y-4 leading-relaxed">
                <p>
                  <strong className="text-slate-800">BetterBus</strong> verwandelt Ihren Betrieb in einen reibungslosen digitalen Workflow — von der ersten Kundenanfrage über die smarte Angebotserstellung bis hin zu Disposition und Abrechnung. Alles an einem sicheren Ort und nahtlos miteinander verbunden.
                </p>
                <p>
                  Verabschieden Sie sich von unübersichtlichen Excel-Tabellen, Papierchaos und zeitfressenden E-Mail-Verläufen. Unsere intuitive Cloud-Software automatisiert Ihre Kernprozesse, optimiert die Fahrzeugauslastung und schützt Sie vor Fehlern in der Disposition.
                </p>
                <p className="font-medium text-slate-800 pt-2 border-t border-slate-200">
                  Der Weg in die Zukunft: Integriert, effizient, fehlerfrei und digital souverän.
                </p>
              </div>
              
              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4">
                <button className="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5">
                  Kostenlose Demo anfragen
                  <ArrowRight className="w-5 h-5" />
                </button>
                <button className="flex items-center justify-center gap-2 bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 px-8 py-4 rounded-full text-lg font-semibold transition-all hover:border-slate-300">
                  <PlayCircle className="w-5 h-5 text-slate-400" />
                  Tour ansehen
                </button>
              </div>
              
              {/* Trust Indicators */}
              <div className="mt-10 flex items-center gap-4 text-sm text-slate-500">
                <div className="flex -space-x-2">
                  {[1,2,3,4].map((i) => (
                    <div key={i} className="w-8 h-8 rounded-full bg-slate-200 border-2 border-slate-50 flex items-center justify-center overflow-hidden">
                      <img src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${i}&backgroundColor=e2e8f0`} alt="User" />
                    </div>
                  ))}
                </div>
                <p>Bereits von über <span className="font-semibold text-slate-700">250+</span> Disponenten genutzt</p>
              </div>
            </div>

            {/* Right Column: Abstract App UI Mockup */}
            <div className="relative mx-auto w-full max-w-lg lg:max-w-none">
              {/* Background decoration */}
              <div className="absolute -inset-0.5 bg-gradient-to-tr from-blue-500 to-indigo-500 rounded-[2.5rem] blur-2xl opacity-20 animate-pulse"></div>
              
              {/* Mockup Container */}
              <div className="relative bg-white rounded-[2rem] border border-slate-200 shadow-2xl overflow-hidden flex flex-col h-[600px]">
                
                {/* Mac-style Top Bar */}
                <div className="h-12 bg-slate-50 border-b border-slate-100 flex items-center px-4 gap-2">
                  <div className="flex gap-1.5">
                    <div className="w-3 h-3 rounded-full bg-red-400"></div>
                    <div className="w-3 h-3 rounded-full bg-amber-400"></div>
                    <div className="w-3 h-3 rounded-full bg-green-400"></div>
                  </div>
                  <div className="mx-auto bg-white border border-slate-200 rounded-md px-24 py-1 text-xs text-slate-400 flex items-center gap-2">
                    <ShieldCheck className="w-3 h-3 text-green-500" /> app.betterbus.de
                  </div>
                </div>

                {/* Dashboard Inner Layout */}
                <div className="flex flex-1 overflow-hidden">
                  
                  {/* Sidebar */}
                  <div className="w-20 lg:w-48 border-r border-slate-100 bg-slate-50 flex flex-col py-4">
                    <div className="px-4 mb-8 hidden lg:block">
                      <div className="h-8 bg-blue-100 rounded flex items-center px-2">
                        <span className="text-xs font-bold text-blue-800">Betterbus Workspace</span>
                      </div>
                    </div>
                    <div className="flex flex-col gap-2 px-3">
                      <div className="w-full h-10 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center lg:justify-start lg:px-3 gap-3">
                        <LayoutDashboard className="w-5 h-5" />
                        <span className="hidden lg:block text-sm font-medium">Dashboard</span>
                      </div>
                      <div className="w-full h-10 text-slate-400 rounded-lg flex items-center justify-center lg:justify-start lg:px-3 gap-3 hover:bg-slate-100">
                        <CalendarDays className="w-5 h-5" />
                        <span className="hidden lg:block text-sm font-medium">Disposition</span>
                      </div>
                      <div className="w-full h-10 text-slate-400 rounded-lg flex items-center justify-center lg:justify-start lg:px-3 gap-3 hover:bg-slate-100">
                        <BusFront className="w-5 h-5" />
                        <span className="hidden lg:block text-sm font-medium">Fuhrpark</span>
                      </div>
                      <div className="w-full h-10 text-slate-400 rounded-lg flex items-center justify-center lg:justify-start lg:px-3 gap-3 hover:bg-slate-100">
                        <Users className="w-5 h-5" />
                        <span className="hidden lg:block text-sm font-medium">Personal</span>
                      </div>
                      <div className="w-full h-10 text-slate-400 rounded-lg flex items-center justify-center lg:justify-start lg:px-3 gap-3 hover:bg-slate-100">
                        <BarChart3 className="w-5 h-5" />
                        <span className="hidden lg:block text-sm font-medium">Abrechnung</span>
                      </div>
                    </div>
                    <div className="mt-auto px-3">
                      <div className="w-full h-10 text-slate-400 rounded-lg flex items-center justify-center lg:justify-start lg:px-3 gap-3 hover:bg-slate-100">
                        <Settings className="w-5 h-5" />
                        <span className="hidden lg:block text-sm font-medium">Einstellungen</span>
                      </div>
                    </div>
                  </div>

                  {/* Main Content Area */}
                  <div className="flex-1 p-6 bg-white overflow-hidden">
                    {/* Header */}
                    <div className="flex justify-between items-center mb-8">
                      <div>
                        <h2 className="text-xl font-bold text-slate-800">Disposition Heute</h2>
                        <p className="text-xs text-slate-500">Donnerstag, 14. Mai</p>
                      </div>
                      <div className="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
                        MH
                      </div>
                    </div>

                    {/* Stats Row */}
                    <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                      <div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
                        <p className="text-xs text-slate-500 mb-1">Aktive Fahrten</p>
                        <p className="text-2xl font-bold text-slate-800">12</p>
                      </div>
                      <div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
                        <p className="text-xs text-slate-500 mb-1">Verfügbare Busse</p>
                        <p className="text-2xl font-bold text-green-600">4</p>
                      </div>
                      <div className="p-4 rounded-xl border border-slate-100 bg-slate-50 hidden lg:block">
                        <p className="text-xs text-slate-500 mb-1">Offene Anfragen</p>
                        <p className="text-2xl font-bold text-amber-500">7</p>
                      </div>
                    </div>

                    {/* Timeline/Gantt Mockup */}
                    <div className="w-full h-48 border border-slate-100 rounded-xl bg-slate-50 p-4 relative overflow-hidden">
                       <div className="absolute top-0 left-16 bottom-0 w-px bg-slate-200"></div>
                       <div className="absolute top-0 left-1/3 bottom-0 w-px bg-slate-200 border-dashed"></div>
                       <div className="absolute top-0 left-2/3 bottom-0 w-px bg-slate-200 border-dashed"></div>
                       
                       <div className="flex flex-col gap-4 mt-2">
                         {/* Bus 1 */}
                         <div className="flex items-center gap-4">
                           <div className="w-10 text-xs font-medium text-slate-500">M-B 101</div>
                           <div className="h-6 w-1/2 bg-blue-500 rounded-md relative shadow-sm">
                             <span className="absolute left-2 top-1 text-[10px] text-white font-medium">Schulausflug</span>
                           </div>
                         </div>
                         {/* Bus 2 */}
                         <div className="flex items-center gap-4">
                           <div className="w-10 text-xs font-medium text-slate-500">M-B 205</div>
                           <div className="h-6 w-1/3 ml-[20%] bg-indigo-500 rounded-md relative shadow-sm">
                             <span className="absolute left-2 top-1 text-[10px] text-white font-medium">Flughafentransfer</span>
                           </div>
                         </div>
                         {/* Bus 3 */}
                         <div className="flex items-center gap-4">
                           <div className="w-10 text-xs font-medium text-slate-500">M-B 330</div>
                           <div className="h-6 w-1/4 ml-[60%] bg-emerald-500 rounded-md relative shadow-sm">
                             <span className="absolute left-2 top-1 text-[10px] text-white font-medium">Linienersatz</span>
                           </div>
                         </div>
                       </div>
                    </div>

                  </div>
                </div>
              </div>

              {/* Floating Feature Card */}
              <div className="absolute -bottom-6 -left-6 bg-white p-4 rounded-2xl shadow-xl border border-slate-100 flex items-center gap-4 animate-bounce hover:animate-none transition-all" style={{ animationDuration: '3s' }}>
                <div className="bg-green-100 p-2 rounded-full">
                  <ShieldCheck className="w-6 h-6 text-green-600" />
                </div>
                <div>
                  <p className="text-sm font-bold text-slate-800">Kollisionsprüfung</p>
                  <p className="text-xs text-slate-500">Keine Doppelbuchungen mehr</p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </main>

      {/* CTA Section */}
      <section className="bg-blue-600 py-16 sm:py-24 relative overflow-hidden">
        {/* Subtle Background Pattern */}
        <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '32px 32px' }}></div>
        
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4 tracking-tight">
            Starten Sie in die digitale Zukunft.
          </h2>
          <p className="text-xl text-blue-100 mb-8 font-medium">
            Ab 9 Euro pro Fahrzeug und Monat
          </p>
          
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-8 mb-10 text-white font-medium">
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-400" />
              <span>Keine Setup Gebühren</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-400" />
              <span>Keine Mindestvertragslaufzeit</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-400" />
              <span>Keine Kopfschmerzen</span>
            </div>
          </div>

          <button className="bg-white text-blue-600 hover:bg-slate-50 px-8 py-4 rounded-full text-lg font-bold transition-all shadow-xl shadow-black/10 hover:shadow-2xl hover:shadow-black/20 hover:-translate-y-1">
            Jetzt 30 Tage kostenlos testen
          </button>
        </div>
      </section>

      {/* Features Section */}
      <section id="funktionen" className="py-20 sm:py-32 bg-white relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center max-w-3xl mx-auto mb-20">
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4 tracking-tight">Alles, was Sie für Ihren Betrieb brauchen</h2>
            <p className="text-lg text-slate-600">Leistungsstarke Funktionen, die Ihren Alltag erleichtern und für reibungslose Abläufe sorgen.</p>
          </div>

          <div className="space-y-24 sm:space-y-32">
            
            {/* 1. Angebotserstellung */}
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
                  <FileText className="w-6 h-6 text-blue-600" />
                </div>
                <h3 className="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">Smarte Angebote, die überzeugen</h3>
                <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                  BetterBus unterstützt Sie vollautomatisiert bei der Kalkulation und Erstellung von Angeboten und integriert diesen Prozess nahtlos in Ihre Kundenkommunikation. 
                  Auftragsdaten werden entweder über Ihr Website-Formular übermittelt, <strong className="text-slate-800"><Sparkles className="w-4 h-4 text-blue-500 inline-block mb-0.5 mr-1" />per KI aus Anfragemails extrahiert</strong> oder blitzschnell manuell hinterlegt. 
                  In Sekunden kalkuliert BetterBus auf Basis Ihrer eigenen Fahrzeugkostenrechnung einen Angebotspreis – <strong className="font-semibold text-slate-800">und zwar simultan für sämtliche Fahrzeuge Ihres Fuhrparks.</strong>
                </p>
                <ul className="space-y-3 text-slate-700">
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Professionelle Angebote, die Ihre Kunden überzeugen</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Automatisiert vorkalkuliert für den gesamten Fuhrpark</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Eigener Route-Server: Realistische Fahrtzeiten & Distanzen durch selbst entwickelte Traffic-Modelle</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-blue-500 shrink-0 mt-0.5" /> <span className="font-medium text-slate-800 flex items-center gap-1"><Sparkles className="w-4 h-4 text-blue-500" /> Neu: KI-gestützte Extraktion von Daten aus Anfragemails</span></li>
                </ul>
              </div>
              <div className="bg-slate-50 rounded-[2rem] p-8 border border-slate-200 relative overflow-hidden">
                 {/* Abstract UI for AI Quote Extraction */}
                 <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5 max-w-sm mx-auto relative mt-2">
                    
                    {/* E-Mail Input */}
                    <div className="bg-slate-50 p-4 rounded-xl border border-slate-100 mb-6 relative">
                      <div className="text-[10px] text-slate-400 font-bold mb-2 uppercase tracking-wide">Eingehende E-Mail</div>
                      <p className="text-xs text-slate-600 italic leading-relaxed">
                        "Hallo, wir benötigen am 14. Mai einen Bus für 45 Schüler von München nach Berlin. Rückfahrt wäre am 16. Mai..."
                      </p>
                      
                      {/* AI Sparkles Badge */}
                      <div className="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-blue-100 text-blue-700 rounded-full p-2 border-4 border-white shadow-sm">
                        <Sparkles className="w-5 h-5 animate-pulse" />
                      </div>
                    </div>
                    
                    {/* Extracted Data */}
                    <div className="mt-8 space-y-3">
                      <div className="text-[10px] text-blue-600 font-bold uppercase tracking-wide flex items-center gap-1">
                        <Sparkles className="w-3 h-3" /> KI hat Reisedaten erkannt
                      </div>
                      <div className="flex gap-2">
                        <div className="flex-1 bg-white p-2.5 rounded-lg border border-slate-200 shadow-sm">
                          <div className="text-[10px] text-slate-400 mb-0.5">Route</div>
                          <div className="text-xs font-bold text-slate-700">München → Berlin</div>
                        </div>
                        <div className="flex-1 bg-white p-2.5 rounded-lg border border-slate-200 shadow-sm">
                          <div className="text-[10px] text-slate-400 mb-0.5">Fahrgäste</div>
                          <div className="text-xs font-bold text-slate-700">45 (Reisebus)</div>
                        </div>
                      </div>
                      <div className="bg-green-50 p-3 rounded-lg border border-green-100 flex justify-between items-center mt-2">
                         <div>
                           <span className="block text-[10px] font-bold text-green-600 uppercase">Kalkulierter Preis</span>
                           <span className="text-xs text-green-700">Gemäß Regel "Schulfahrt"</span>
                         </div>
                         <span className="text-lg font-bold text-green-700">850,00 €</span>
                      </div>
                    </div>

                 </div>
              </div>
            </div>

            {/* 2. Disposition & Aufträge */}
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div className="order-2 lg:order-1 bg-slate-50 rounded-[2rem] p-8 border border-slate-200">
                {/* Abstract UI for Dispo */}
                <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-4 relative">
                  {/* Warning Overlay */}
                  <div className="absolute -top-3 -right-3 bg-red-100 text-red-700 border border-red-200 text-[10px] font-bold px-3 py-1.5 rounded-full shadow-sm flex items-center gap-1 z-10 animate-pulse">
                    <ShieldCheck className="w-3 h-3" /> Lenkzeit überschritten (Bus 2)
                  </div>
                  
                  <div className="flex gap-2 mb-4">
                    <div className="h-6 w-16 bg-blue-100 text-blue-600 rounded text-[10px] flex items-center justify-center font-bold">Bus 1</div>
                    <div className="h-6 w-32 bg-blue-500 rounded relative group">
                      <div className="absolute left-2 top-1 text-[8px] text-white">Auftrag: #1042</div>
                      {/* Tooltip Hover */}
                      <div className="absolute bottom-full left-0 mb-1 hidden group-hover:block w-36 bg-slate-800 text-white text-[8px] p-2 rounded shadow-lg z-20">
                        <span className="text-blue-300 font-bold flex items-center gap-1 mb-1"><Sparkles className="w-3 h-3" /> KI-Briefing:</span>
                        Achtung, Baustelle auf A9. 15 Min Puffer eingeplant.
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2 mb-4">
                    <div className="h-6 w-16 bg-slate-100 text-slate-600 rounded text-[10px] flex items-center justify-center font-bold">Bus 2</div>
                    <div className="h-6 w-40 bg-red-500 rounded relative ml-4">
                      <div className="absolute left-2 top-1 text-[8px] text-white font-medium">Klassenfahrt (Konflikt)</div>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <div className="h-6 w-16 bg-slate-100 text-slate-600 rounded text-[10px] flex items-center justify-center font-bold">Bus 3</div>
                    <div className="h-6 w-20 bg-emerald-500 rounded relative ml-12">
                      <div className="absolute left-2 top-1 text-[8px] text-white">Transfer</div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="order-1 lg:order-2">
                <div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-6">
                  <CalendarDays className="w-6 h-6 text-indigo-600" />
                </div>
                <h3 className="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">Nahtlose Auftragsabwicklung & Disposition</h3>
                <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                  Aus Angeboten werden mit einem Klick operative Aufträge – ohne Systembrüche. 
                  BetterBus führt jeden Auftrag stringent von der Anfrage über das Fulfillment in der Disposition bis hin zur Abrechnung. 
                  Bei der Einsatzplanung prüft das System automatisch <strong className="text-slate-800">Lenk- und Arbeitszeiten</strong> und warnt Sie proaktiv vor Konflikten. 
                </p>
                <ul className="space-y-3 text-slate-700">
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Stringenter Workflow: Anfrage → Angebot → Auftrag → Rechnung</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Automatische Prüfung von Lenk- und Ruhezeiten</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-blue-500 shrink-0 mt-0.5" /> <span className="font-medium text-slate-800 flex items-center gap-1.5"><Sparkles className="w-4 h-4 text-blue-500" /> Übersichtliches KI-Briefing für jede Fahrt</span></li>
                </ul>
              </div>
            </div>

            {/* 3. Fahrpersonal-App */}
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <div className="w-12 h-12 bg-teal-100 rounded-xl flex items-center justify-center mb-6">
                  <PlayCircle className="w-6 h-6 text-teal-600" />
                </div>
                <h3 className="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">Mobile Fahrpersonal-App: Die digitale Zentrale</h3>
                <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                  Die Betterbus Fahrpersonal-App ist weit mehr als nur ein Auftragsbetrachter. Sie integriert den kompletten Fahrer-Alltag: Von der <strong className="text-slate-800">digitalen Abfahrtskontrolle</strong> über die <strong className="text-slate-800">Arbeitszeiterfassung</strong> bis hin zur Urlaubsverwaltung. 
                  Ein <strong className="text-slate-800"><Sparkles className="w-4 h-4 text-blue-500 inline-block mb-0.5 mr-1" />KI-generiertes Briefing</strong> bereitet Ihr Personal zudem optimal auf jede Tour vor. Ein besonderes Highlight ist die smarte <strong className="font-semibold text-slate-800">Check-in-Funktion</strong>: Fahrpersonal bestätigt rechtzeitig vor Dienstbeginn, dass es auf dem Weg ist – so wird die Disposition bei Ausfällen extrem frühzeitig gewarnt.
                </p>
                <ul className="space-y-3 text-slate-700">
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Frühwarnsystem durch Vorab-Check-in</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Digitale Abfahrtskontrollen, Zeiterfassung & Urlaubsanträge</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Live-Synchronisation von Aufträgen, <Sparkles className="w-4 h-4 text-blue-500 inline-block align-text-bottom mx-1" />KI-Briefing & Problemmeldungen</span></li>
                </ul>
              </div>
              <div className="bg-slate-50 rounded-[2rem] p-8 border border-slate-200 flex justify-center">
                 {/* Abstract UI for Mobile App */}
                 <div className="w-64 h-[480px] bg-slate-900 rounded-[2.5rem] p-2 shadow-2xl relative border-[6px] border-slate-800">
                    {/* Screen */}
                    <div className="bg-slate-50 w-full h-full rounded-[2rem] overflow-hidden flex flex-col relative">
                      {/* Dynamic Island / Notch */}
                      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-5 bg-slate-900 rounded-b-xl z-10"></div>
                      
                      {/* App Header */}
                      <div className="bg-blue-600 pt-8 pb-4 px-4 text-white">
                        <div className="text-xs opacity-80 mb-1">Hallo Max,</div>
                        <div className="font-bold">Deine Schicht heute</div>
                      </div>

                      {/* App Content */}
                      <div className="p-4 flex-1 overflow-y-auto pb-20 space-y-4">
                        
                        {/* Check-in Alert */}
                        <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 shadow-sm relative overflow-hidden">
                          <div className="absolute top-0 left-0 w-1 h-full bg-amber-400"></div>
                          <div className="text-xs font-bold text-amber-800 mb-1">Dienstbeginn in 45 Min</div>
                          <p className="text-[10px] text-amber-700 mb-2">Bitte bestätige, dass du auf dem Weg bist, um die Disposition zu informieren.</p>
                          <button className="w-full bg-amber-500 hover:bg-amber-600 text-white text-[10px] font-bold py-2 rounded-lg transition-colors shadow-sm flex items-center justify-center gap-1.5">
                            <CheckCircle className="w-3.5 h-3.5" /> Ich bin auf dem Weg
                          </button>
                        </div>

                        {/* Abfahrtskontrolle */}
                        <div className="bg-white border border-slate-200 rounded-xl p-3 shadow-sm">
                          <div className="flex justify-between items-center mb-2">
                            <div className="text-[10px] font-bold text-slate-800 uppercase">Anstehend</div>
                            <span className="text-[10px] bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-semibold">M-B 101</span>
                          </div>
                          <div className="text-xs font-bold text-slate-800 mb-2">Abfahrtskontrolle & Check</div>
                          <button className="w-full border border-slate-300 text-slate-700 hover:text-slate-900 text-[10px] font-bold py-1.5 rounded-lg hover:bg-slate-50 flex justify-center items-center gap-1.5 transition-colors">
                            <ClipboardCheck className="w-3.5 h-3.5" /> Checkliste starten
                          </button>
                        </div>

                        {/* Grid for other features */}
                        <div className="grid grid-cols-2 gap-2">
                          <div className="bg-white border border-slate-200 rounded-xl p-3 shadow-sm flex flex-col items-center justify-center gap-1 hover:bg-slate-50 cursor-pointer">
                            <div className="bg-indigo-100 p-2 rounded-full text-indigo-600"><Clock className="w-4 h-4" /></div>
                            <div className="text-[10px] font-medium text-slate-700">Zeiterfassung</div>
                          </div>
                          <div className="bg-white border border-slate-200 rounded-xl p-3 shadow-sm flex flex-col items-center justify-center gap-1 hover:bg-slate-50 cursor-pointer">
                            <div className="bg-teal-100 p-2 rounded-full text-teal-600"><CalendarDays className="w-4 h-4" /></div>
                            <div className="text-[10px] font-medium text-slate-700">Urlaub</div>
                          </div>
                        </div>

                      </div>

                      {/* Bottom Tab Bar */}
                      <div className="absolute bottom-0 left-0 right-0 bg-white border-t border-slate-200 flex justify-around py-3 px-2 pb-5 z-20">
                        <div className="flex flex-col items-center text-blue-600"><Home className="w-5 h-5 mb-0.5" /></div>
                        <div className="flex flex-col items-center text-slate-400 hover:text-slate-600 transition-colors"><Map className="w-5 h-5 mb-0.5" /></div>
                        <div className="flex flex-col items-center text-slate-400 hover:text-slate-600 transition-colors"><MessageSquare className="w-5 h-5 mb-0.5" /></div>
                        <div className="flex flex-col items-center text-slate-400 hover:text-slate-600 transition-colors"><User className="w-5 h-5 mb-0.5" /></div>
                      </div>
                    </div>
                 </div>
              </div>
            </div>

            {/* 4. Personal */}
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div className="order-2 lg:order-1 bg-slate-50 rounded-[2rem] p-8 border border-slate-200">
                {/* Abstract UI for Personal */}
                 <div className="space-y-3 max-w-sm mx-auto">
                    <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 relative overflow-hidden">
                      <div className="absolute left-0 top-0 bottom-0 w-1 bg-red-500"></div>
                      <div className="w-10 h-10 rounded-full bg-slate-200 overflow-hidden">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Max&backgroundColor=e2e8f0" alt="Max" />
                      </div>
                      <div className="flex-1">
                        <div className="text-sm font-bold text-slate-800">Max Mustermann</div>
                        <div className="text-[10px] text-red-600 font-bold flex items-center gap-1"><ShieldCheck className="w-3 h-3" /> Führerschein abgelaufen</div>
                      </div>
                      <div className="text-[10px] font-bold text-red-700 bg-red-50 px-2 py-1 rounded border border-red-100">Gesperrt</div>
                    </div>
                    <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4">
                      <div className="w-10 h-10 rounded-full bg-slate-200 overflow-hidden">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Anna&backgroundColor=e2e8f0" alt="Anna" />
                      </div>
                      <div className="flex-1">
                        <div className="text-sm font-bold text-slate-800">Anna Schmidt</div>
                        <div className="text-xs text-slate-500">Fahrerin</div>
                      </div>
                      <div className="text-xs font-medium text-amber-500 bg-amber-50 px-2 py-1 rounded">Urlaub</div>
                    </div>
                 </div>
              </div>
              <div className="order-1 lg:order-2">
                <div className="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center mb-6">
                  <Users className="w-6 h-6 text-emerald-600" />
                </div>
                <h3 className="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">Effizientes Personal- & Compliance-Management</h3>
                <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                  Verwalten Sie Fahrerstammdaten, Dokumente und Abwesenheiten sicher an einem Ort. BetterBus schützt Sie vor Compliance-Verstößen: 
                  Das System <strong className="text-slate-800">blockiert automatisch die Dienstzuweisung</strong>, wenn Führerscheine oder Module abgelaufen sind. Die nahtlose Anbindung an die Fahrpersonal-App importiert zudem Arbeitszeiten und Spesenbelege direkt in die Zentrale.
                </p>
                <ul className="space-y-3 text-slate-700">
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Automatische Sperrung bei abgelaufenen Dokumenten</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Zentrale Urlaubs-, Krankheits- & Spesenverwaltung</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Digitale Fahrer-Akte & Zeiterfassungs-Import</span></li>
                </ul>
              </div>
            </div>

            {/* 5. Fuhrpark */}
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-6">
                  <BusFront className="w-6 h-6 text-amber-600" />
                </div>
                <h3 className="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">Umfassende Fuhrparkverwaltung & Multi-Depot</h3>
                <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                  Behalten Sie alle Fahrzeugdaten, Depots und Wartungstermine zentral im Blick. Die vom Fahrpersonal per App durchgeführten <strong className="text-slate-800">Abfahrtskontrollen und Schadensmeldungen</strong> landen sofort im System. 
                  Bei abgelaufenem TÜV oder fehlenden Dokumenten verhindert BetterBus auch hier automatisch die Zuweisung in der Disposition.
                </p>
                <ul className="space-y-3 text-slate-700">
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Multi-Depot: Fahrzeuge standortübergreifend verwalten</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Digitale Fahrzeugakten & Wartungsterminplaner</span></li>
                  <li className="flex items-start gap-3"><CheckCircle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" /> <span>Integriertes Schadensmanagement & Inspektionsprotokolle</span></li>
                </ul>
              </div>
              <div className="bg-slate-50 rounded-[2rem] p-8 border border-slate-200">
                {/* Abstract UI for Fuhrpark */}
                 <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-5 max-w-sm mx-auto">
                    <div className="flex justify-between items-start mb-4">
                      <div>
                        <div className="text-lg font-bold text-slate-800">M-B 101</div>
                        <div className="text-xs text-slate-500">Mercedes-Benz Tourismo • Depot Süd</div>
                      </div>
                      <div className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded font-bold">Einsatzbereit</div>
                    </div>
                    <div className="space-y-2 mt-4 pt-4 border-t border-slate-100">
                      <div className="flex justify-between text-sm items-center">
                        <span className="text-slate-500">Letzte Abfahrtskontrolle</span>
                        <span className="text-[10px] bg-blue-50 text-blue-700 px-2 py-1 rounded border border-blue-100">Heute, 07:15 Uhr</span>
                      </div>
                      <div className="flex justify-between text-sm mt-2">
                        <span className="text-slate-500">Nächster TÜV</span>
                        <span className="font-medium text-slate-800">Okt 2024</span>
                      </div>
                    </div>
                 </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Aus der Branche Section */}
      <section className="py-20 sm:py-24 bg-slate-50 border-t border-slate-200">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
            <HeartHandshake className="w-8 h-8 text-blue-600" />
          </div>
          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-6 tracking-tight">Aus der Branche, für die Branche.</h2>
          <p className="text-xl text-slate-600 leading-relaxed mb-8">
            BetterBus ist nicht am Reißbrett entstanden. Unsere Software wurde von Tag eins an zusammen mit Busunternehmen entwickelt. Jedes einzelne Feature orientiert sich exakt an der echten Business-Logik Ihres Alltags. Bevor ein neues Update ausgerollt wird, testen wir es mit echten Aufträgen und Kunden in einer realen Live-Umgebung auf Herz und Nieren.
          </p>
        </div>
      </section>

      {/* Sicher, Nachhaltig, Digital Souverän Section */}
      <section className="py-20 sm:py-24 bg-slate-900 relative overflow-hidden">
        {/* Subtle Background Glow */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-2xl h-64 bg-blue-500/10 blur-[100px] rounded-full pointer-events-none"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4 tracking-tight">Sicher, Nachhaltig, Digital Souverän.</h2>
            <p className="text-lg text-slate-400">Höchste Standards für Datenschutz und Infrastruktur – ohne Kompromisse.</p>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
            {/* Card 1 */}
            <div className="bg-slate-800/50 border border-slate-700/50 p-6 rounded-2xl text-center backdrop-blur-sm hover:bg-slate-800 transition-colors">
              <ShieldCheck className="w-10 h-10 text-blue-400 mx-auto mb-4" />
              <h4 className="text-white font-bold mb-2">Made in Germany</h4>
              <p className="text-sm text-slate-400">Komplette Entwicklung und erstklassiger Support direkt aus Deutschland.</p>
            </div>
            {/* Card 2 */}
            <div className="bg-slate-800/50 border border-slate-700/50 p-6 rounded-2xl text-center backdrop-blur-sm hover:bg-slate-800 transition-colors">
              <Server className="w-10 h-10 text-blue-400 mx-auto mb-4" />
              <h4 className="text-white font-bold mb-2">Daten in Nürnberg</h4>
              <p className="text-sm text-slate-400">Alle Server und Daten lagern hochsicher in ISO-zertifizierten Rechenzentren in Nürnberg.</p>
            </div>
            {/* Card 3 */}
            <div className="bg-slate-800/50 border border-slate-700/50 p-6 rounded-2xl text-center backdrop-blur-sm hover:bg-slate-800 transition-colors">
              <Leaf className="w-10 h-10 text-green-400 mx-auto mb-4" />
              <h4 className="text-white font-bold mb-2">CO₂-Neutral</h4>
              <p className="text-sm text-slate-400">Unsere gesamte Infrastruktur und das Hosting werden zu 100% klimaneutral betrieben.</p>
            </div>
            {/* Card 4 */}
            <div className="bg-slate-800/50 border border-slate-700/50 p-6 rounded-2xl text-center backdrop-blur-sm hover:bg-slate-800 transition-colors">
              <Lock className="w-10 h-10 text-blue-400 mx-auto mb-4" />
              <h4 className="text-white font-bold mb-2">Keine US-Technologien</h4>
              <p className="text-sm text-slate-400">100% digitale Souveränität. Keine Abhängigkeiten und garantierte DSGVO-Konformität.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Bottom CTA Section */}
      <section className="bg-blue-600 py-16 sm:py-24 relative overflow-hidden">
        {/* Subtle Background Pattern */}
        <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '32px 32px' }}></div>
        
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4 tracking-tight">
            Starten Sie in die digitale Zukunft.
          </h2>
          <p className="text-xl text-blue-100 mb-8 font-medium">
            Ab 9 Euro pro Fahrzeug und Monat
          </p>
          
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-8 mb-10 text-white font-medium">
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-400" />
              <span>Keine Setup Gebühren</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-400" />
              <span>Keine Mindestvertragslaufzeit</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-400" />
              <span>Keine Kopfschmerzen</span>
            </div>
          </div>

          <button className="bg-white text-blue-600 hover:bg-slate-50 px-8 py-4 rounded-full text-lg font-bold transition-all shadow-xl shadow-black/10 hover:shadow-2xl hover:shadow-black/20 hover:-translate-y-1">
            Jetzt 30 Tage kostenlos testen
          </button>
        </div>
      </section>

    </div>
  );
}