import React, { useState, useRef, useEffect } from 'react';
import { FileText, Send, Check, CreditCard, Building2, User, Mail, Phone, MapPin, Edit3, AlertCircle } from 'lucide-react';

const OnboardingSystem = () => {
  const [view, setView] = useState('admin'); // 'admin' or 'customer'
  const [adminData, setAdminData] = useState({
    offerPdf: null,
    projectName: '',
    projectDescription: '',
    price: '',
    oneTimeLink: ''
  });
  
  const [customerData, setCustomerData] = useState({
    company: '',
    street: '',
    postalCode: '',
    city: '',
    contactPerson: '',
    email: '',
    phone: '',
    websiteSupport: '',
    hostingOption: '',
    signature: '',
    signatureDate: '',
    ipAddress: '',
    location: ''
  });
  
  const [step, setStep] = useState(1);
  const [isDrawing, setIsDrawing] = useState(false);
  const canvasRef = useRef(null);
  const [paymentMethod, setPaymentMethod] = useState('');
  
  // Generate unique link
  const generateLink = () => {
    const uniqueId = Math.random().toString(36).substring(2, 15);
    setAdminData({...adminData, oneTimeLink: `https://ihr-portal.de/onboarding/${uniqueId}`});
  };
  
  // Handle file upload
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file && file.type === 'application/pdf') {
      setAdminData({...adminData, offerPdf: file});
    }
  };
  
  // Start customer flow
  const startCustomerFlow = () => {
    if (!adminData.offerPdf || !adminData.projectName) {
      alert('Bitte füllen Sie alle erforderlichen Felder aus und laden Sie ein PDF hoch.');
      return;
    }
    setView('customer');
    setStep(1);
    // Simulate IP and location capture
    setCustomerData({
      ...customerData,
      ipAddress: '192.168.1.100',
      location: 'Erlangen, DE'
    });
  };
  
  // Canvas drawing functions
  const startDrawing = (e) => {
    setIsDrawing(true);
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    ctx.beginPath();
    ctx.moveTo(x, y);
  };
  
  const draw = (e) => {
    if (!isDrawing) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    ctx.lineTo(x, y);
    ctx.strokeStyle = '#6d0202';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.stroke();
  };
  
  const stopDrawing = () => {
    setIsDrawing(false);
    if (canvasRef.current) {
      const signatureData = canvasRef.current.toDataURL();
      setCustomerData({
        ...customerData,
        signature: signatureData,
        signatureDate: new Date().toLocaleString('de-DE')
      });
    }
  };
  
  const clearSignature = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    setCustomerData({...customerData, signature: ''});
  };
  
  // Save contract to storage
  const finalizeContract = async () => {
    const contractData = {
      ...adminData,
      ...customerData,
      contractId: `CONTRACT-${Date.now()}`,
      timestamp: new Date().toISOString()
    };
    
    try {
      await window.storage.set(
        `contract:${contractData.contractId}`,
        JSON.stringify(contractData)
      );
      setStep(9);
    } catch (error) {
      console.error('Error saving contract:', error);
      alert('Fehler beim Speichern des Vertrags');
    }
  };

  // Admin Panel View
  if (view === 'admin') {
    return (
      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-gray-800 rounded-2xl shadow-2xl border border-gray-700 overflow-hidden">
            <div className="bg-gradient-to-r from-[#6d0202] to-[#9d0303] p-8">
              <h1 className="text-4xl font-bold text-white flex items-center gap-3">
                <Building2 className="w-10 h-10" />
                Admin Panel - Onboarding Link erstellen
              </h1>
              <p className="text-gray-200 mt-2">Erstellen Sie einen Einmallink für Ihren Kunden</p>
            </div>
            
            <div className="p-8 space-y-6">
              <div>
                <label className="block text-gray-300 font-semibold mb-2">Projektname *</label>
                <input
                  type="text"
                  value={adminData.projectName}
                  onChange={(e) => setAdminData({...adminData, projectName: e.target.value})}
                  className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202] focus:border-transparent"
                  placeholder="z.B. Website Redesign für Firma XY"
                />
              </div>
              
              <div>
                <label className="block text-gray-300 font-semibold mb-2">Projektbeschreibung</label>
                <textarea
                  value={adminData.projectDescription}
                  onChange={(e) => setAdminData({...adminData, projectDescription: e.target.value})}
                  className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202] focus:border-transparent h-32"
                  placeholder="Beschreiben Sie das Projekt..."
                />
              </div>
              
              <div>
                <label className="block text-gray-300 font-semibold mb-2">Projektpreis (optional)</label>
                <input
                  type="text"
                  value={adminData.price}
                  onChange={(e) => setAdminData({...adminData, price: e.target.value})}
                  className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202] focus:border-transparent"
                  placeholder="z.B. 5.000,00 € netto"
                />
              </div>
              
              <div>
                <label className="block text-gray-300 font-semibold mb-2">Angebots-PDF hochladen *</label>
                <div className="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:border-[#6d0202] transition-colors cursor-pointer">
                  <input
                    type="file"
                    accept=".pdf"
                    onChange={handleFileUpload}
                    className="hidden"
                    id="pdf-upload"
                  />
                  <label htmlFor="pdf-upload" className="cursor-pointer">
                    <FileText className="w-16 h-16 mx-auto text-gray-500 mb-4" />
                    <p className="text-gray-300 font-semibold">
                      {adminData.offerPdf ? adminData.offerPdf.name : 'PDF-Datei hier hochladen'}
                    </p>
                    <p className="text-gray-500 text-sm mt-2">Klicken zum Auswählen</p>
                  </label>
                </div>
              </div>
              
              {adminData.oneTimeLink && (
                <div className="bg-gradient-to-r from-green-900/50 to-green-800/50 border border-green-700 rounded-lg p-6">
                  <p className="text-gray-300 font-semibold mb-2">Einmallink generiert:</p>
                  <div className="flex items-center gap-2">
                    <input
                      type="text"
                      value={adminData.oneTimeLink}
                      readOnly
                      className="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded text-white"
                    />
                    <button
                      onClick={() => navigator.clipboard.writeText(adminData.oneTimeLink)}
                      className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
                    >
                      Kopieren
                    </button>
                  </div>
                </div>
              )}
              
              <div className="flex gap-4">
                <button
                  onClick={generateLink}
                  className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all flex items-center justify-center gap-2"
                >
                  <Send className="w-5 h-5" />
                  Link generieren
                </button>
                
                <button
                  onClick={startCustomerFlow}
                  className="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-blue-900/50 transition-all flex items-center justify-center gap-2"
                >
                  <User className="w-5 h-5" />
                  Kunde-Ansicht testen
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Customer View
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-4">
      <div className="max-w-5xl mx-auto">
        {/* Progress Bar */}
        <div className="mb-8">
          <div className="flex justify-between items-center mb-4">
            {[1, 2, 3, 4, 5, 6, 7, 8].map((s) => (
              <div
                key={s}
                className={`w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all ${
                  step >= s
                    ? 'bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white shadow-lg shadow-red-900/50'
                    : 'bg-gray-700 text-gray-400'
                }`}
              >
                {step > s ? <Check className="w-5 h-5" /> : s}
              </div>
            ))}
          </div>
          <div className="h-2 bg-gray-700 rounded-full overflow-hidden">
            <div
              className="h-full bg-gradient-to-r from-[#6d0202] to-[#9d0303] transition-all duration-500"
              style={{ width: `${(step / 8) * 100}%` }}
            />
          </div>
        </div>

        <div className="bg-gray-800 rounded-2xl shadow-2xl border border-gray-700 overflow-hidden">
          {/* Step 1: Customer Data */}
          {step === 1 && (
            <div className="p-8">
              <h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
                <Building2 className="w-8 h-8 text-[#6d0202]" />
                Ihre Unternehmensdaten
              </h2>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-gray-300 font-semibold mb-2">Firmenname *</label>
                  <input
                    type="text"
                    value={customerData.company}
                    onChange={(e) => setCustomerData({...customerData, company: e.target.value})}
                    className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                    placeholder="Ihre Firma GmbH"
                  />
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-gray-300 font-semibold mb-2">Straße & Hausnummer *</label>
                    <input
                      type="text"
                      value={customerData.street}
                      onChange={(e) => setCustomerData({...customerData, street: e.target.value})}
                      className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                      placeholder="Musterstraße 123"
                    />
                  </div>
                  
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-gray-300 font-semibold mb-2">PLZ *</label>
                      <input
                        type="text"
                        value={customerData.postalCode}
                        onChange={(e) => setCustomerData({...customerData, postalCode: e.target.value})}
                        className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                        placeholder="12345"
                      />
                    </div>
                    <div>
                      <label className="block text-gray-300 font-semibold mb-2">Stadt *</label>
                      <input
                        type="text"
                        value={customerData.city}
                        onChange={(e) => setCustomerData({...customerData, city: e.target.value})}
                        className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                        placeholder="Musterstadt"
                      />
                    </div>
                  </div>
                </div>
                
                <div>
                  <label className="block text-gray-300 font-semibold mb-2">Ansprechpartner *</label>
                  <input
                    type="text"
                    value={customerData.contactPerson}
                    onChange={(e) => setCustomerData({...customerData, contactPerson: e.target.value})}
                    className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                    placeholder="Max Mustermann"
                  />
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-gray-300 font-semibold mb-2">E-Mail *</label>
                    <input
                      type="email"
                      value={customerData.email}
                      onChange={(e) => setCustomerData({...customerData, email: e.target.value})}
                      className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                      placeholder="info@firma.de"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-gray-300 font-semibold mb-2">Telefon *</label>
                    <input
                      type="tel"
                      value={customerData.phone}
                      onChange={(e) => setCustomerData({...customerData, phone: e.target.value})}
                      className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                      placeholder="+49 123 456789"
                    />
                  </div>
                </div>
              </div>
              
              <button
                onClick={() => setStep(2)}
                disabled={!customerData.company || !customerData.email}
                className="mt-8 w-full bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Weiter zum Angebot
              </button>
            </div>
          )}

          {/* Step 2: Offer Review */}
          {step === 2 && (
            <div className="p-8">
              <h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
                <FileText className="w-8 h-8 text-[#6d0202]" />
                Ihr Angebot
              </h2>
              
              <div className="bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl p-8 mb-6 border border-gray-600">
                <h3 className="text-2xl font-bold text-white mb-4">{adminData.projectName}</h3>
                {adminData.projectDescription && (
                  <p className="text-gray-300 mb-4">{adminData.projectDescription}</p>
                )}
                {adminData.price && (
                  <p className="text-xl font-semibold text-[#6d0202]">Preis: {adminData.price}</p>
                )}
                
                <div className="mt-6 p-6 bg-gray-900 rounded-lg border border-gray-600">
                  <p className="text-gray-300 mb-4 flex items-center gap-2">
                    <FileText className="w-5 h-5 text-[#6d0202]" />
                    <span className="font-semibold">Angebots-PDF:</span> {adminData.offerPdf?.name || 'Angebot.pdf'}
                  </p>
                  <button className="text-[#6d0202] hover:text-[#9d0303] font-semibold flex items-center gap-2">
                    PDF herunterladen und ansehen →
                  </button>
                </div>
              </div>
              
              <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-6 mb-6">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-6 h-6 text-blue-400 flex-shrink-0 mt-1" />
                  <div>
                    <p className="text-gray-200 font-semibold mb-2">Bitte prüfen Sie das Angebot sorgfältig</p>
                    <p className="text-gray-300 text-sm">
                      Laden Sie das PDF herunter und lesen Sie alle Details durch, bevor Sie fortfahren.
                    </p>
                  </div>
                </div>
              </div>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setStep(1)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold transition-all"
                >
                  Zurück
                </button>
                <button
                  onClick={() => setStep(3)}
                  className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all"
                >
                  Angebot bestätigen
                </button>
              </div>
            </div>
          )}

          {/* Step 3: Website Support Option */}
          {step === 3 && (
            <div className="p-8">
              <h2 className="text-3xl font-bold text-white mb-6">§ 4 Website-Betreuung und Support</h2>
              
              <p className="text-gray-300 mb-8 leading-relaxed">
                Der Auftraggeber kann optional eine aktive Betreuung der Website für zusätzlich <span className="font-bold text-white">79,00 € netto pro Monat</span>, 
                beginnend zwei Monate nach Vertragsschluss, beauftragen.
              </p>
              
              <div className="space-y-4">
                <div
                  onClick={() => setCustomerData({...customerData, websiteSupport: 'active'})}
                  className={`cursor-pointer p-6 rounded-xl border-2 transition-all ${
                    customerData.websiteSupport === 'active'
                      ? 'border-[#6d0202] bg-gradient-to-br from-red-900/30 to-red-800/20 shadow-lg shadow-red-900/30'
                      : 'border-gray-600 bg-gray-700 hover:border-gray-500'
                  }`}
                >
                  <div className="flex items-start gap-4">
                    <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-1 ${
                      customerData.websiteSupport === 'active' ? 'border-[#6d0202] bg-[#6d0202]' : 'border-gray-500'
                    }`}>
                      {customerData.websiteSupport === 'active' && <Check className="w-4 h-4 text-white" />}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-xl font-bold text-white mb-3">a) Aktive Betreuung</h3>
                      <p className="text-gray-300 mb-3">Diese umfasst u.a.:</p>
                      <ul className="space-y-2 text-gray-300">
                        <li className="flex items-start gap-2">
                          <Check className="w-4 h-4 text-[#6d0202] flex-shrink-0 mt-1" />
                          <span>Fortlaufende technische Überwachung und Sicherheitsupdates</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Check className="w-4 h-4 text-[#6d0202] flex-shrink-0 mt-1" />
                          <span>CMS- und Plugin-Updates</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Check className="w-4 h-4 text-[#6d0202] flex-shrink-0 mt-1" />
                          <span>Monitoring der Erreichbarkeit</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Check className="w-4 h-4 text-[#6d0202] flex-shrink-0 mt-1" />
                          <span>Funktionsprüfung der Website</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Check className="w-4 h-4 text-[#6d0202] flex-shrink-0 mt-1" />
                          <span>Kleinere inhaltliche Änderungen bis zu 30 Minuten pro Monat</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Check className="w-4 h-4 text-[#6d0202] flex-shrink-0 mt-1" />
                          <span>Priorisierte Bearbeitung im Support</span>
                        </li>
                      </ul>
                      <p className="text-sm text-gray-400 mt-4">
                        (Weitere Zeit wird auf Stundenbasis gem. Preisverzeichnis berechnet - 129,00 € netto/Stunde)
                      </p>
                    </div>
                  </div>
                </div>
                
                <div
                  onClick={() => setCustomerData({...customerData, websiteSupport: 'none'})}
                  className={`cursor-pointer p-6 rounded-xl border-2 transition-all ${
                    customerData.websiteSupport === 'none'
                      ? 'border-[#6d0202] bg-gradient-to-br from-red-900/30 to-red-800/20 shadow-lg shadow-red-900/30'
                      : 'border-gray-600 bg-gray-700 hover:border-gray-500'
                  }`}
                >
                  <div className="flex items-start gap-4">
                    <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-1 ${
                      customerData.websiteSupport === 'none' ? 'border-[#6d0202] bg-[#6d0202]' : 'border-gray-500'
                    }`}>
                      {customerData.websiteSupport === 'none' && <Check className="w-4 h-4 text-white" />}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-xl font-bold text-white mb-3">b) Keine Betreuung</h3>
                      <p className="text-gray-300">
                        In diesem Fall werden technische Anpassungen und Support auf Stundenbasis gem. 
                        Preisverzeichnis berechnet (129,00 € netto pro Stunde).
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="flex gap-4 mt-8">
                <button
                  onClick={() => setStep(2)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold transition-all"
                >
                  Zurück
                </button>
                <button
                  onClick={() => setStep(4)}
                  disabled={!customerData.websiteSupport}
                  className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Weiter
                </button>
              </div>
            </div>
          )}

          {/* Step 4: Hosting Option */}
          {step === 4 && (
            <div className="p-8">
              <h2 className="text-3xl font-bold text-white mb-6">§ 5 Hosting- und Betriebsgebühren</h2>
              
              <div className="bg-gray-700 rounded-xl p-6 mb-8">
                <h3 className="text-xl font-bold text-white mb-4">Wichtige Informationen:</h3>
                <ul className="space-y-3 text-gray-300">
                  <li className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-[#6d0202] rounded-full mt-2 flex-shrink-0" />
                    <span>Für monatlich abgerechnete Hostinggebühren ist ein gültiges SEPA-Lastschriftmandat verpflichtend</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-[#6d0202] rounded-full mt-2 flex-shrink-0" />
                    <span>Zu Beginn startet das Hosting als monatliches Abo per Überweisung</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-[#6d0202] rounded-full mt-2 flex-shrink-0" />
                    <span>Spätestens zwei Monate nach Vertragsschluss wird ein SEPA-Mandat benötigt</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-[#6d0202] rounded-full mt-2 flex-shrink-0" />
                    <span>Ohne SEPA-Mandat erfolgt automatisch die Umstellung auf jährliche Abrechnung</span>
                  </li>
                </ul>
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-6">Bitte wählen Sie Ihre Hosting-Option:</h3>
              
              <div className="space-y-4">
                <div
                  onClick={() => setCustomerData({...customerData, hostingOption: '1-month'})}
                  className={`cursor-pointer p-6 rounded-xl border-2 transition-all ${
                    customerData.hostingOption === '1-month'
                      ? 'border-[#6d0202] bg-gradient-to-br from-red-900/30 to-red-800/20 shadow-lg shadow-red-900/30'
                      : 'border-gray-600 bg-gray-700 hover:border-gray-500'
                  }`}
                >
                  <div className="flex items-start gap-4">
                    <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-1 ${
                      customerData.hostingOption === '1-month' ? 'border-[#6d0202] bg-[#6d0202]' : 'border-gray-500'
                    }`}>
                      {customerData.hostingOption === '1-month' && <Check className="w-4 h-4 text-white" />}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-xl font-bold text-white mb-2">1 Monat Laufzeit</h3>
                      <div className="flex items-baseline gap-2 mb-3">
                        <span className="text-3xl font-bold text-[#6d0202]">25,00 €</span>
                        <span className="text-gray-400">pro Monat</span>
                      </div>
                      <div className="space-y-1 text-gray-300 text-sm">
                        <p>• Monatlich, im Voraus</p>
                        <p>• 14 Tage Kündigungsfrist</p>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div
                  onClick={() => setCustomerData({...customerData, hostingOption: '1-year'})}
                  className={`cursor-pointer p-6 rounded-xl border-2 transition-all ${
                    customerData.hostingOption === '1-year'
                      ? 'border-[#6d0202] bg-gradient-to-br from-red-900/30 to-red-800/20 shadow-lg shadow-red-900/30'
                      : 'border-gray-600 bg-gray-700 hover:border-gray-500'
                  }`}
                >
                  <div className="flex items-start gap-4">
                    <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-1 ${
                      customerData.hostingOption === '1-year' ? 'border-[#6d0202] bg-[#6d0202]' : 'border-gray-500'
                    }`}>
                      {customerData.hostingOption === '1-year' && <Check className="w-4 h-4 text-white" />}
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="text-xl font-bold text-white">1 Jahr Laufzeit</h3>
                        <span className="bg-green-600 text-white text-xs font-bold px-2 py-1 rounded">BELIEBT</span>
                      </div>
                      <div className="flex items-baseline gap-2 mb-3">
                        <span className="text-3xl font-bold text-[#6d0202]">21,00 €</span>
                        <span className="text-gray-400">pro Monat</span>
                        <span className="text-sm text-green-400 font-semibold ml-2">16% Ersparnis</span>
                      </div>
                      <div className="space-y-1 text-gray-300 text-sm">
                        <p>• Jährlich, im Voraus</p>
                        <p>• 1 Monat Kündigungsfrist</p>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div
                  onClick={() => setCustomerData({...customerData, hostingOption: '2-years'})}
                  className={`cursor-pointer p-6 rounded-xl border-2 transition-all ${
                    customerData.hostingOption === '2-years'
                      ? 'border-[#6d0202] bg-gradient-to-br from-red-900/30 to-red-800/20 shadow-lg shadow-red-900/30'
                      : 'border-gray-600 bg-gray-700 hover:border-gray-500'
                  }`}
                >
                  <div className="flex items-start gap-4">
                    <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-1 ${
                      customerData.hostingOption === '2-years' ? 'border-[#6d0202] bg-[#6d0202]' : 'border-gray-500'
                    }`}>
                      {customerData.hostingOption === '2-years' && <Check className="w-4 h-4 text-white" />}
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="text-xl font-bold text-white">2 Jahre Laufzeit</h3>
                        <span className="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white text-xs font-bold px-2 py-1 rounded">BESTE ERSPARNIS</span>
                      </div>
                      <div className="flex items-baseline gap-2 mb-3">
                        <span className="text-3xl font-bold text-[#6d0202]">19,50 €</span>
                        <span className="text-gray-400">pro Monat</span>
                        <span className="text-sm text-green-400 font-semibold ml-2">22% Ersparnis</span>
                      </div>
                      <div className="space-y-1 text-gray-300 text-sm">
                        <p>• Zweijährlich, im Voraus</p>
                        <p>• 1 Monat Kündigungsfrist</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="flex gap-4 mt-8">
                <button
                  onClick={() => setStep(3)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold transition-all"
                >
                  Zurück
                </button>
                <button
                  onClick={() => setStep(5)}
                  disabled={!customerData.hostingOption}
                  className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Weiter zum Vertrag
                </button>
              </div>
            </div>
          )}

          {/* Step 5: Contract Content */}
          {step === 5 && (
            <div className="p-8">
              <h2 className="text-3xl font-bold text-white mb-6">Vertragsinhalte</h2>
              
              <div className="bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl p-8 mb-6 max-h-96 overflow-y-auto border border-gray-600">
                <div className="prose prose-invert max-w-none">
                  <h3 className="text-xl font-bold text-white mb-4">Webdesign-Vertrag</h3>
                  
                  <p className="text-gray-300 mb-4">
                    zwischen <strong className="text-white">{customerData.company}</strong> (nachfolgend "Auftraggeber") 
                    und FNO Media (nachfolgend "Auftragnehmer")
                  </p>
                  
                  <div className="space-y-6 text-gray-300">
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 1 Vertragsgegenstand</h4>
                      <p>Der Auftragnehmer erstellt für den Auftraggeber eine Website gemäß den vereinbarten Spezifikationen und dem Angebot.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 2 Leistungsumfang</h4>
                      <p>Der genaue Leistungsumfang ergibt sich aus dem beigefügten Angebot und umfasst Design, Entwicklung und Implementierung der Website.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 3 Vergütung</h4>
                      <p>Die Vergütung richtet sich nach dem beigefügten Angebot. Alle Preise verstehen sich zuzüglich der gesetzlichen Umsatzsteuer.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 4 Website-Betreuung</h4>
                      <p className="font-semibold">
                        Gewählte Option: {customerData.websiteSupport === 'active' ? 'Aktive Betreuung (79,00 € netto/Monat)' : 'Keine Betreuung'}
                      </p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 5 Hosting</h4>
                      <p className="font-semibold">
                        Gewählte Option: {
                          customerData.hostingOption === '1-month' ? '1 Monat Laufzeit - 25,00 € netto/Monat' :
                          customerData.hostingOption === '1-year' ? '1 Jahr Laufzeit - 21,00 € netto/Monat' :
                          '2 Jahre Laufzeit - 19,50 € netto/Monat'
                        }
                      </p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 6 Urheberrechte</h4>
                      <p>Der Auftragnehmer räumt dem Auftraggeber nach vollständiger Bezahlung ein nicht-exklusives, zeitlich und räumlich unbeschränktes Nutzungsrecht an der erstellten Website ein.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 7 Mitwirkungspflichten</h4>
                      <p>Der Auftraggeber stellt alle erforderlichen Inhalte, Texte, Bilder und Zugangsdaten rechtzeitig zur Verfügung.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 8 Gewährleistung</h4>
                      <p>Der Auftragnehmer gewährleistet, dass die Website zum Zeitpunkt der Abnahme frei von wesentlichen Mängeln ist.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 9 Haftung</h4>
                      <p>Die Haftung richtet sich nach den gesetzlichen Bestimmungen. Bei leicht fahrlässiger Verletzung unwesentlicher Vertragspflichten ist die Haftung ausgeschlossen.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 10 Vertragslaufzeit und Kündigung</h4>
                      <p>Der Vertrag wird auf unbestimmte Zeit geschlossen. Die Kündigungsfristen richten sich nach der gewählten Hosting-Option.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 11 Datenschutz</h4>
                      <p>Beide Parteien verpflichten sich zur Einhaltung der geltenden Datenschutzbestimmungen, insbesondere der DSGVO.</p>
                    </div>
                    
                    <div>
                      <h4 className="text-lg font-semibold text-white mb-2">§ 12 Schlussbestimmungen</h4>
                      <p>Es gilt das Recht der Bundesrepublik Deutschland. Gerichtsstand ist der Sitz des Auftragnehmers.</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-6 mb-6">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-6 h-6 text-blue-400 flex-shrink-0 mt-1" />
                  <div>
                    <p className="text-gray-200 font-semibold mb-2">Bitte lesen Sie den Vertrag sorgfältig durch</p>
                    <p className="text-gray-300 text-sm">
                      Mit Ihrer Unterschrift im nächsten Schritt bestätigen Sie, dass Sie den Vertrag gelesen haben und den Bedingungen zustimmen.
                    </p>
                  </div>
                </div>
              </div>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setStep(4)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold transition-all"
                >
                  Zurück
                </button>
                <button
                  onClick={() => setStep(6)}
                  className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all"
                >
                  Zur Vertragsunterzeichnung
                </button>
              </div>
            </div>
          )}

          {/* Step 6: Summary before Signature */}
          {step === 6 && (
            <div className="p-8">
              <h2 className="text-3xl font-bold text-white mb-6">Zusammenfassung Ihrer Auswahl</h2>
              
              <div className="space-y-4 mb-8">
                <div className="bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl p-6 border border-gray-600">
                  <h3 className="text-lg font-semibold text-white mb-4">Unternehmensdaten</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
                    <div>
                      <p className="text-sm text-gray-400">Firma</p>
                      <p className="font-semibold text-white">{customerData.company}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-400">Ansprechpartner</p>
                      <p className="font-semibold text-white">{customerData.contactPerson}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-400">Adresse</p>
                      <p className="font-semibold text-white">{customerData.street}, {customerData.postalCode} {customerData.city}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-400">Kontakt</p>
                      <p className="font-semibold text-white">{customerData.email}</p>
                      <p className="font-semibold text-white">{customerData.phone}</p>
                    </div>
                  </div>
                </div>
                
                <div className="bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl p-6 border border-gray-600">
                  <h3 className="text-lg font-semibold text-white mb-4">Gewählte Optionen</h3>
                  <div className="space-y-3 text-gray-300">
                    <div className="flex items-center justify-between p-3 bg-gray-900/50 rounded-lg">
                      <span>Website-Betreuung</span>
                      <span className="font-bold text-white">
                        {customerData.websiteSupport === 'active' ? 'Aktive Betreuung (79,00 € netto/Monat)' : 'Keine Betreuung'}
                      </span>
                    </div>
                    <div className="flex items-center justify-between p-3 bg-gray-900/50 rounded-lg">
                      <span>Hosting-Option</span>
                      <span className="font-bold text-white">
                        {
                          customerData.hostingOption === '1-month' ? '1 Monat - 25,00 € netto/Monat' :
                          customerData.hostingOption === '1-year' ? '1 Jahr - 21,00 € netto/Monat' :
                          '2 Jahre - 19,50 € netto/Monat'
                        }
                      </span>
                    </div>
                  </div>
                </div>
                
                <div className="bg-gradient-to-r from-red-900/30 to-red-800/20 border border-red-700 rounded-xl p-6">
                  <h3 className="text-lg font-semibold text-white mb-2">Monatliche Gesamtkosten</h3>
                  <p className="text-4xl font-bold text-[#6d0202]">
                    {
                      (customerData.websiteSupport === 'active' ? 79 : 0) +
                      (customerData.hostingOption === '1-month' ? 25 :
                       customerData.hostingOption === '1-year' ? 21 : 19.50)
                    },00 € netto
                  </p>
                  <p className="text-sm text-gray-300 mt-2">zzgl. gesetzlicher Umsatzsteuer</p>
                </div>
              </div>
              
              <div className="bg-yellow-900/30 border border-yellow-700 rounded-lg p-6 mb-6">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-6 h-6 text-yellow-400 flex-shrink-0 mt-1" />
                  <div>
                    <p className="text-gray-200 font-semibold mb-2">Wichtiger Hinweis</p>
                    <p className="text-gray-300 text-sm">
                      Im nächsten Schritt werden Sie den Vertrag rechtsverbindlich unterschreiben. 
                      Nach der Unterschrift ist keine Änderung mehr möglich. Bitte prüfen Sie alle Angaben sorgfältig.
                    </p>
                  </div>
                </div>
              </div>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setStep(5)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold transition-all"
                >
                  Zurück
                </button>
                <button
                  onClick={() => setStep(7)}
                  className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all flex items-center justify-center gap-2"
                >
                  <Edit3 className="w-5 h-5" />
                  Jetzt unterschreiben
                </button>
              </div>
            </div>
          )}

          {/* Step 7: Signature */}
          {step === 7 && (
            <div className="p-8">
              <h2 className="text-3xl font-bold text-white mb-6 flex items-center gap-3">
                <Edit3 className="w-8 h-8 text-[#6d0202]" />
                Vertragsunterzeichnung
              </h2>
              
              <div className="bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl p-8 mb-6 border border-gray-600">
                <p className="text-gray-300 mb-6 leading-relaxed">
                  Ich, <strong className="text-white">{customerData.contactPerson}</strong>, bestätige hiermit im Namen von 
                  <strong className="text-white"> {customerData.company}</strong>, dass ich den Vertrag vollständig gelesen und verstanden habe 
                  und mit allen Bedingungen einverstanden bin.
                </p>
                
                <div className="mb-6">
                  <label className="block text-gray-300 font-semibold mb-3">Ihre Unterschrift:</label>
                  <div className="bg-white rounded-lg p-4 border-2 border-gray-600">
                    <canvas
                      ref={canvasRef}
                      width={700}
                      height={200}
                      onMouseDown={startDrawing}
                      onMouseMove={draw}
                      onMouseUp={stopDrawing}
                      onMouseLeave={stopDrawing}
                      className="w-full cursor-crosshair"
                      style={{ touchAction: 'none' }}
                    />
                  </div>
                  <button
                    onClick={clearSignature}
                    className="mt-3 text-gray-400 hover:text-white text-sm flex items-center gap-2"
                  >
                    <Edit3 className="w-4 h-4" />
                    Unterschrift löschen und neu zeichnen
                  </button>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-300 bg-gray-900/50 rounded-lg p-4">
                  <div>
                    <p className="text-gray-400">Datum und Uhrzeit</p>
                    <p className="font-semibold text-white">{new Date().toLocaleString('de-DE')}</p>
                  </div>
                  <div>
                    <p className="text-gray-400">IP-Adresse</p>
                    <p className="font-semibold text-white">{customerData.ipAddress}</p>
                  </div>
                  <div>
                    <p className="text-gray-400">Standort</p>
                    <p className="font-semibold text-white">{customerData.location}</p>
                  </div>
                  <div>
                    <p className="text-gray-400">Unterzeichner</p>
                    <p className="font-semibold text-white">{customerData.contactPerson}</p>
                  </div>
                </div>
              </div>
              
              <div className="bg-red-900/30 border border-red-700 rounded-lg p-6 mb-6">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-6 h-6 text-red-400 flex-shrink-0 mt-1" />
                  <div>
                    <p className="text-gray-200 font-semibold mb-2">Rechtsverbindliche Unterschrift</p>
                    <p className="text-gray-300 text-sm">
                      Mit Klick auf "Vertrag abschließen" wird der Vertrag rechtsverbindlich geschlossen. 
                      Eine nachträgliche Änderung ist nicht mehr möglich. Ihre Unterschrift, IP-Adresse und 
                      der Zeitpunkt werden zu rechtlichen Zwecken gespeichert.
                    </p>
                  </div>
                </div>
              </div>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setStep(6)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold transition-all"
                >
                  Zurück
                </button>
                <button
                  onClick={finalizeContract}
                  disabled={!customerData.signature}
                  className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                  <Check className="w-5 h-5" />
                  Vertrag rechtsverbindlich abschließen
                </button>
              </div>
            </div>
          )}

          {/* Step 8: Payment Method */}
          {step === 8 && (
            <div className="p-8">
              <div className="text-center mb-8">
                <div className="w-20 h-20 bg-gradient-to-r from-green-600 to-green-700 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-green-900/50">
                  <Check className="w-10 h-10 text-white" />
                </div>
                <h2 className="text-3xl font-bold text-white mb-2">Vertrag erfolgreich abgeschlossen!</h2>
                <p className="text-gray-300">Vielen Dank für Ihr Vertrauen</p>
              </div>
              
              <div className="bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl p-6 mb-8 border border-gray-600">
                <h3 className="text-xl font-semibold text-white mb-4">Zahlungsmethode hinterlegen (Optional)</h3>
                <p className="text-gray-300 mb-6">
                  Sie können jetzt optional eine Zahlungsmethode für die automatische Abrechnung hinterlegen. 
                  Dies können Sie auch später in Ihrem Kundenbereich nachholen.
                </p>
                
                <div className="space-y-4">
                  <div
                    onClick={() => setPaymentMethod('sepa')}
                    className={`cursor-pointer p-6 rounded-xl border-2 transition-all ${
                      paymentMethod === 'sepa'
                        ? 'border-[#6d0202] bg-gradient-to-br from-red-900/30 to-red-800/20'
                        : 'border-gray-600 bg-gray-700 hover:border-gray-500'
                    }`}
                  >
                    <div className="flex items-center gap-4">
                      <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                        paymentMethod === 'sepa' ? 'border-[#6d0202] bg-[#6d0202]' : 'border-gray-500'
                      }`}>
                        {paymentMethod === 'sepa' && <Check className="w-4 h-4 text-white" />}
                      </div>
                      <div className="flex-1">
                        <h4 className="text-lg font-bold text-white">SEPA-Lastschrift</h4>
                        <p className="text-sm text-gray-400">Automatische monatliche Abbuchung</p>
                      </div>
                      <CreditCard className="w-8 h-8 text-gray-400" />
                    </div>
                  </div>
                  
                  <div
                    onClick={() => setPaymentMethod('card')}
                    className={`cursor-pointer p-6 rounded-xl border-2 transition-all ${
                      paymentMethod === 'card'
                        ? 'border-[#6d0202] bg-gradient-to-br from-red-900/30 to-red-800/20'
                        : 'border-gray-600 bg-gray-700 hover:border-gray-500'
                    }`}
                  >
                    <div className="flex items-center gap-4">
                      <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                        paymentMethod === 'card' ? 'border-[#6d0202] bg-[#6d0202]' : 'border-gray-500'
                      }`}>
                        {paymentMethod === 'card' && <Check className="w-4 h-4 text-white" />}
                      </div>
                      <div className="flex-1">
                        <h4 className="text-lg font-bold text-white">Kreditkarte</h4>
                        <p className="text-sm text-gray-400">Visa, Mastercard, American Express</p>
                      </div>
                      <CreditCard className="w-8 h-8 text-gray-400" />
                    </div>
                  </div>
                </div>
                
                {paymentMethod === 'sepa' && (
                  <div className="mt-6 space-y-4 animate-fadeIn">
                    <div>
                      <label className="block text-gray-300 font-semibold mb-2">IBAN</label>
                      <input
                        type="text"
                        placeholder="DE89 3704 0044 0532 0130 00"
                        className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                      />
                    </div>
                    <div>
                      <label className="block text-gray-300 font-semibold mb-2">Kontoinhaber</label>
                      <input
                        type="text"
                        placeholder="Max Mustermann"
                        className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                      />
                    </div>
                    <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-4 text-sm text-gray-300">
                      <p>Mit der Angabe Ihrer IBAN erteilen Sie ein SEPA-Lastschriftmandat für wiederkehrende Zahlungen.</p>
                    </div>
                  </div>
                )}
                
                {paymentMethod === 'card' && (
                  <div className="mt-6 space-y-4 animate-fadeIn">
                    <div>
                      <label className="block text-gray-300 font-semibold mb-2">Kartennummer</label>
                      <input
                        type="text"
                        placeholder="1234 5678 9012 3456"
                        className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-gray-300 font-semibold mb-2">Gültig bis</label>
                        <input
                          type="text"
                          placeholder="MM/JJ"
                          className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                        />
                      </div>
                      <div>
                        <label className="block text-gray-300 font-semibold mb-2">CVC</label>
                        <input
                          type="text"
                          placeholder="123"
                          className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-gray-300 font-semibold mb-2">Karteninhaber</label>
                      <input
                        type="text"
                        placeholder="Max Mustermann"
                        className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-[#6d0202]"
                      />
                    </div>
                  </div>
                )}
              </div>
              
              <div className="flex gap-4">
                <button
                  onClick={() => setStep(9)}
                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg font-semibold transition-all"
                >
                  Später hinterlegen
                </button>
                {paymentMethod && (
                  <button
                    onClick={() => setStep(9)}
                    className="flex-1 bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-6 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all"
                  >
                    Zahlungsmethode speichern
                  </button>
                )}
              </div>
            </div>
          )}

          {/* Step 9: Final Confirmation */}
          {step === 9 && (
            <div className="p-8 text-center">
              <div className="w-24 h-24 bg-gradient-to-r from-green-600 to-green-700 rounded-full flex items-center justify-center mx-auto mb-6 shadow-2xl shadow-green-900/50 animate-bounce">
                <Check className="w-12 h-12 text-white" />
              </div>
              
              <h2 className="text-4xl font-bold text-white mb-4">Alles erledigt!</h2>
              <p className="text-xl text-gray-300 mb-8">Ihr Onboarding wurde erfolgreich abgeschlossen</p>
              
              <div className="bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl p-8 mb-8 border border-gray-600 text-left">
                <h3 className="text-2xl font-bold text-white mb-6">Was passiert als Nächstes?</h3>
                
                <div className="space-y-6">
                  <div className="flex gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-r from-[#6d0202] to-[#9d0303] flex items-center justify-center flex-shrink-0 shadow-lg shadow-red-900/50">
                      <span className="text-white font-bold text-lg">1</span>
                    </div>
                    <div className="flex-1">
                      <h4 className="text-lg font-semibold text-white mb-2">Vertragsbestätigung per E-Mail</h4>
                      <p className="text-gray-300">Sie erhalten in Kürze eine E-Mail mit allen Vertragsunterlagen und einer Kopie Ihrer Unterschrift.</p>
                    </div>
                  </div>
                  
                  <div className="flex gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-r from-[#6d0202] to-[#9d0303] flex items-center justify-center flex-shrink-0 shadow-lg shadow-red-900/50">
                      <span className="text-white font-bold text-lg">2</span>
                    </div>
                    <div className="flex-1">
                      <h4 className="text-lg font-semibold text-white mb-2">Projektstart</h4>
                      <p className="text-gray-300">Unser Team wird sich innerhalb der nächsten 24 Stunden bei Ihnen melden, um die nächsten Schritte zu besprechen.</p>
                    </div>
                  </div>
                  
                  <div className="flex gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-r from-[#6d0202] to-[#9d0303] flex items-center justify-center flex-shrink-0 shadow-lg shadow-red-900/50">
                      <span className="text-white font-bold text-lg">3</span>
                    </div>
                    <div className="flex-1">
                      <h4 className="text-lg font-semibold text-white mb-2">Zugang zum Kundenportal</h4>
                      <p className="text-gray-300">Sie erhalten Zugangsdaten zu Ihrem persönlichen Kundenportal, wo Sie den Projektstatus jederzeit einsehen können.</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="bg-gradient-to-r from-blue-900/30 to-blue-800/20 border border-blue-700 rounded-xl p-6 mb-8">
                <h3 className="text-lg font-semibold text-white mb-2">Ihre Vertragsdaten</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left text-sm">
                  <div>
                    <p className="text-gray-400">Firma</p>
                    <p className="font-semibold text-white">{customerData.company}</p>
                  </div>
                  <div>
                    <p className="text-gray-400">Ansprechpartner</p>
                    <p className="font-semibold text-white">{customerData.contactPerson}</p>
                  </div>
                  <div>
                    <p className="text-gray-400">E-Mail</p>
                    <p className="font-semibold text-white">{customerData.email}</p>
                  </div>
                  <div>
                    <p className="text-gray-400">Unterschrieben am</p>
                    <p className="font-semibold text-white">{customerData.signatureDate || new Date().toLocaleString('de-DE')}</p>
                  </div>
                </div>
              </div>
              
              <div className="flex flex-col gap-4">
                <button
                  onClick={() => window.print()}
                  className="bg-gradient-to-r from-[#6d0202] to-[#9d0303] text-white px-8 py-4 rounded-lg font-semibold hover:shadow-lg hover:shadow-red-900/50 transition-all"
                >
                  Vertragsbestätigung drucken
                </button>
                
                <p className="text-gray-400 text-sm">
                  Bei Fragen erreichen Sie uns unter info@fno-media.de
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default OnboardingSystem;