import React from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import { Package } from '@/types'; // Annahme: Typ für Package

interface Props {
  packages: Package[];
}

const Home: React.FC<Props> = ({ packages }) => {
  const { data, setData, post, processing, errors, reset } = useForm({
    name: '',
    email: '',
    message: '',
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    post('/kontakt', {
      onSuccess: () => reset(),
    });
  };

  return (
    <MarketingLayout title="Home - Fotospiel">
      <Head title="Fotospiel - Event-Fotos einfach und sicher mit QR-Codes" />
      {/* Hero Section */}
      <section id="hero" className="bg-aurora-enhanced text-white py-20 px-4">
        <div className="container mx-auto flex flex-col md:flex-row items-center gap-8 max-w-6xl">
          <div className="md:w-1/2 text-center md:text-left">
            <h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Fotospiel</h1>
            <p className="text-xl md:text-2xl mb-8 font-sans-marketing">Sammle Gastfotos für Events mit QR-Codes. Unsere sichere PWA-Plattform für Gäste und Organisatoren – einfach, mobil und datenschutzkonform. Besser als Konkurrenz, geliebt von Tausenden.</p>
            <Link href="/packages" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition font-sans-marketing">
              Jetzt starten – Kostenlos
            </Link>
          </div>
          <div className="md:w-1/2">
            <img
              src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop"
              alt="Event-Fotos mit QR"
              className="rounded-lg shadow-lg w-full"
              style={{ filter: 'drop-shadow(0 10px 8px rgba(0,0,0,0.1))' }}
            />
          </div>
        </div>
      </section>

      {/* How it works Section */}
      <section id="how-it-works" className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 font-display">So funktioniert es – in 4 einfachen Schritten mit QR-Codes</h2>
          <div className="grid md:grid-cols-4 gap-8">
            <div className="text-center">
              <img
                src="https://images.unsplash.com/photo-1558618047-3c8d6b4d3b0a?w=300&h=200&fit=crop"
                alt="QR-Code generieren"
                className="w-12 h-12 mx-auto mb-4 rounded-full"
              />
              <h3 className="font-semibold mb-2 font-sans-marketing">Event erstellen & QR generieren</h3>
              <p className="text-gray-600 font-serif-custom">Als Organisator: Registrieren, Event anlegen, QR-Code erstellen und drucken/teilen.</p>
            </div>
            <div className="text-center">
              <img
                src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=300&h=200&fit=crop"
                alt="Fotos hochladen"
                className="w-12 h-12 mx-auto mb-4 rounded-full"
              />
              <h3 className="font-semibold mb-2 font-sans-marketing">Fotos hochladen via QR</h3>
              <p className="text-gray-600 font-serif-custom">Gäste: QR scannen, PWA öffnen, Fotos via Kamera oder Galerie teilen.</p>
            </div>
            <div className="text-center">
              <img
                src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop"
                alt="Freigaben & Likes"
                className="w-12 h-12 mx-auto mb-4 rounded-full"
              />
              <h3 className="font-semibold mb-2 font-sans-marketing">Freigaben & Likes</h3>
              <p className="text-gray-600 font-serif-custom">Emotions auswählen, Fotos liken, Galerie browsen – alles anonym.</p>
            </div>
            <div className="text-center">
              <img
                src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=300&h=200&fit=crop"
                alt="Download & Teilen"
                className="w-12 h-12 mx-auto mb-4 rounded-full"
              />
              <h3 className="font-semibold mb-2 font-sans-marketing">Download & Teilen</h3>
              <p className="text-gray-600 font-serif-custom">Freigegebene Fotos herunterladen, Event abschließen und QR archivieren.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 px-4 bg-white">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel mit QR?</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center p-6">
              <img
                src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop"
                alt="Sichere QR-Uploads"
                className="w-16 h-16 mx-auto mb-4 rounded-full"
              />
              <h3 className="text-xl font-semibold mb-2 font-display">Sichere QR-Uploads</h3>
              <p className="text-gray-600 font-serif-custom">GDPR-konform, anonyme Sessions, QR-basierte Zugriffe ohne PII-Speicherung.</p>
            </div>
            <div className="text-center p-6">
              <img
                src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=250&fit=crop"
                alt="Mobile PWA & QR"
                className="w-16 h-16 mx-auto mb-4 rounded-full"
              />
              <h3 className="text-xl font-semibold mb-2 font-display">Mobile PWA & QR</h3>
              <p className="text-gray-600 font-serif-custom">Offline-fähig, App-ähnlich für iOS/Android, QR-Scan für schnellen Einstieg.</p>
            </div>
            <div className="text-center p-6">
              <img
                src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop"
                alt="Schnell & Einfach"
                className="w-16 h-16 mx-auto mb-4 rounded-full"
              />
              <h3 className="text-xl font-semibold mb-2 font-display">Schnell & Einfach mit QR</h3>
              <p className="text-gray-600 font-serif-custom">Automatische Thumbnails, Echtzeit-Updates, QR-Sharing für Gäste.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Packages Teaser Section */}
      <section id="pricing" className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Packages</h2>
          <p className="text-center text-lg text-gray-600 mb-8 font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
          <div className="text-center">
            <Link href="/packages" className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-[#FF69B4] transition font-sans-marketing">
              Alle Packages ansehen
            </Link>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 px-4 bg-white">
        <div className="container mx-auto max-w-2xl">
          <h2 className="text-3xl font-bold text-center mb-12 font-display">Kontakt</h2>
          <form key={`home-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="name" className="block text-sm font-medium mb-2 font-sans-marketing">Name</label>
              <input
                type="text"
                id="name"
                value={data.name}
                onChange={(e) => setData('name', e.target.value)}
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
              />
              {errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
            </div>
            <div>
              <label htmlFor="email" className="block text-sm font-medium mb-2 font-sans-marketing">E-Mail</label>
              <input
                type="email"
                id="email"
                value={data.email}
                onChange={(e) => setData('email', e.target.value)}
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
              />
              {errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
            </div>
            <div>
              <label htmlFor="message" className="block text-sm font-medium mb-2 font-sans-marketing">Nachricht</label>
              <textarea
                id="message"
                value={data.message}
                onChange={(e) => setData('message', e.target.value)}
                rows={4}
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
              ></textarea>
              {errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
            </div>
            <button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
              {processing ? 'Sendet...' : 'Senden'}
            </button>
          </form>
          {Object.keys(errors).length === 0 && data.message && !processing && (
            <p className="mt-4 text-green-600 text-center font-serif-custom">Nachricht gesendet!</p>
          )}

          React.useEffect(() => {
              if (Object.keys(errors).length > 0) {
                  window.scrollTo({ top: 0, behavior: 'smooth' });
              }
          }, [errors]);
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 font-display">Was unsere Kunden sagen</h2>
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="bg-white p-6 rounded-lg">
              <p className="mb-4 font-serif-custom">"Perfekt für unsere Hochzeit! QR-Sharing war super einfach."</p>
              <p className="font-semibold font-sans-marketing">- Anna & Max</p>
            </div>
            <div className="bg-white p-6 rounded-lg">
              <p className="mb-4 font-serif-custom">"Großes Firmenevent – alle Fotos zentral via QR."</p>
              <p className="font-semibold font-sans-marketing">- Team XYZ GmbH</p>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-20 px-4 bg-white">
        <div className="container mx-auto max-w-3xl">
          <h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
          <div className="space-y-4">
            <div className="bg-gray-50 p-4 rounded-lg">
              <h3 className="font-semibold font-display">Ist es kostenlos?</h3>
              <p className="font-serif-custom">Ja, der Basic-Tarif ist kostenlos für 1 Event mit QR. Upgrades ab 99€.</p>
            </div>
            <div className="bg-gray-50 p-4 rounded-lg">
              <h3 className="font-semibold font-display">Datenschutz?</h3>
              <p className="font-serif-custom">100% GDPR-konform. Keine personenbezogenen Daten gespeichert. QR-Zugriffe anonym. Siehe <Link href="/datenschutz" className="text-[#FFB6C1]">Datenschutzerklärung</Link>.</p>
            </div>
            <div className="bg-gray-50 p-4 rounded-lg">
              <h3 className="font-semibold font-display">Wie funktioniert QR-Sharing?</h3>
              <p className="font-serif-custom">Generiere QR im Dashboard, teile es – Gäste scannen, laden Fotos hoch in der PWA.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Packages Section (aus aktuellem TSX, angepasst) */}
      <section className="py-20 px-4 bg-white">
        <div className="container mx-auto max-w-4xl">
          <h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Pakete</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {packages.map((pkg) => (
              <div key={pkg.id} className="bg-gray-50 p-6 rounded-lg text-center">
                <h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
                <p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
                <p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-display">€{pkg.price}</p>
                <Link
                  href={`/marketing/buy/${pkg.id}`}
                  className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition font-sans-marketing"
                >
                  Kaufen
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>
    </MarketingLayout>
  );
};

export default Home;