import React from 'react';
import { Head, Link } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';

interface Props {
  type: string;
}

const Occasions: React.FC<Props> = ({ type }) => {
  const occasions = {
    weddings: {
      title: 'Hochzeiten',
      description: 'Erfangen Sie die magischen Momente Ihrer Hochzeit mit professionellen Fotos.',
      features: ['Unbegrenzte Fotos', 'Sofort-Download', 'Privat-Event-Code', 'Emotionen tracken'],
      image: '/images/wedding-lights-background.svg' // Platzhalter
    },
    birthdays: {
      title: 'Geburtstage',
      description: 'Feiern Sie Geburtstage unvergesslich mit unseren Event-Foto-Lösungen.',
      features: ['Schnelle Einrichtung', 'Gäste teilen Fotos', 'Themen-Filter', 'Druck-Optionen'],
      image: '/images/birthday-placeholder.jpg'
    },
    'corporate-events': {
      title: 'Firmenevents',
      description: 'Professionelle Fotos für Teamevents, Konferenzen und Unternehmensfeiern.',
      features: ['Branding-Integration', 'Sichere Cloud-Speicher', 'Analytics & Reports', 'Schnelle Bearbeitung'],
      image: '/images/corporate-placeholder.jpg'
    },
    'family-celebrations': {
      title: 'Familienfeiern',
      description: 'Erinnerungen an Taufen, Jubiläen und Familienzusammenkünfte festhalten.',
      features: ['Persönliche Alben', 'Gemeinsame Zugriffe', 'Einfache Bedienung', 'Hohe Qualität'],
      image: '/images/family-placeholder.jpg'
    }
  };

  const occasion = occasions[type as keyof typeof occasions] || occasions.weddings;

  return (
    <MarketingLayout title={`${occasion.title} - Fotospiel`}>
      <Head title={`${occasion.title} - Fotospiel`} />
      {/* Hero Section */}
      <section className="bg-aurora-enhanced text-white py-20 px-4">
        <div className="container mx-auto text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{occasion.title}</h1>
          <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{occasion.description}</p>
          {occasion.image && (
            <img
              src={occasion.image}
              alt={occasion.title}
              className="mx-auto rounded-lg shadow-lg max-w-4xl w-full"
            />
          )}
        </div>
      </section>

      {/* Features Section */}
      <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">Warum Fotospiel für {occasion.title}?</h2>
          <div className="grid md:grid-cols-2 gap-8">
            {occasion.features.map((feature, index) => (
              <div key={index} className="bg-gray-50 p-6 rounded-lg flex items-center">
                <div className="w-8 h-8 bg-[#FFB6C1] rounded-full flex items-center justify-center mr-4">
                  <span className="text-white text-sm font-bold font-sans-marketing">✓</span>
                </div>
                <p className="text-gray-700 font-serif-custom">{feature}</p>
              </div>
            ))}
          </div>
          <div className="text-center mt-12">
            <Link
              href="/marketing/packages"
              className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-[#FF69B4] transition"
            >
              Passendes Paket wählen
            </Link>
          </div>
        </div>
      </section>
    </MarketingLayout>
  );
};

export default Occasions;