import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Heart, Building, Truck, Shield, Briefcase, TrendingUp, Clock, DollarSign, Users, Phone, Mail, MapPin } from 'lucide-react';
import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider';

const Geschaeftskunden = () => {
  const { t } = useTranslation('geschaeftskunden');
  const navigate = useNavigate();
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
  const [focusTopics, setFocusTopics] = useState<
    Array<{
      id: string;
      title: string;
      subtitle?: string;
      href: string;
      image: string;
      links: Array<{ title: string; href: string }>;
    }>
  >([]);
  const [showContactForm, setShowContactForm] = useState(false);

  useEffect(() => {
    const pool = [
      {
        id: 'flottenversicherung',
        title: t('topics.flotten.title', 'Flottenversicherung'),
        subtitle: t('topics.flotten.subtitle', 'Optimaler Schutz für Ihren Fuhrpark\nSicher und wirtschaftlich.'),
        href: '/geschaeftskunden/flottenversicherung',
        image: assetUrl('Geascheaftskunden/iStock-637230106.jpg'),
        links: [
          { title: t('topics.flotten.links.management', 'Flottenmanagement'), href: '/geschaeftskunden/flottenversicherung' },
        ],
      },
      {
        id: 'betriebsrente',
        title: t('topics.betriebsrente.title', 'Betriebsrente (BAV)'),
        subtitle: 'Altersvorsorge für Ihre Mitarbeiter\nZukunftssichere Lösungen.',
        href: '/geschaeftskunden/betriebsrente',
        image: assetUrl('Geascheaftskunden/iStock-917884956.jpg'),
        links: [
          { title: 'Mitarbeiter-Vorsorge', href: '/geschaeftskunden/betriebsrente' },
        ],
      },
      {
        id: 'betriebskrankenversicherung',
        title: 'Betriebskrankenversicherung',
        subtitle: 'Gesundheitsschutz für Ihre Mitarbeiter\nZukunftssicher investieren.',
        href: '/geschaeftskunden/betriebskrankenversicherung',
        image: assetUrl('Geascheaftskunden/iStock-1134003031.jpg'),
        links: [
          { title: 'Mitarbeiter schützen', href: '/geschaeftskunden/betriebskrankenversicherung' },
        ],
      },
      {
        id: 'vermoegen',
        title: t('focus.items.assets', 'Vermögenssicherung'),
        subtitle: 'Schützen Sie Ihr Unternehmensvermögen\nZukunftssicher handeln.',
        href: '/geschaeftskunden/vermoegen',
        image: assetUrl('Geascheaftskunden/iStock-948602744.jpg'),
        links: [
          { title: 'Unternehmensvermögen', href: '/geschaeftskunden/vermoegen' },
        ],
      },
      {
        id: 'gebaeudeversicherung',
        title: 'Gebäudeversicherung',
        subtitle: 'Schutz für Ihre Unternehmensgebäude\nSicher und umfassend.',
        href: '/geschaeftskunden/gebaeudeversicherung',
        image: assetUrl('Geascheaftskunden/iStock-115948634.jpg'),
        links: [
          { title: 'Gebäude schützen', href: '/geschaeftskunden/gebaeudeversicherung' },
        ],
      },
      {
        id: 'betriebshaftpflicht',
        title: 'Betriebshaftpflicht',
        subtitle: 'Schutz vor Haftungsansprüchen\nSicher für Ihr Business.',
        href: '/geschaeftskunden/betriebshaftpflicht',
        image: assetUrl('Geascheaftskunden/Fotolia_3984526_XS.jpg'),
        links: [
          { title: 'Haftpflicht schützen', href: '/geschaeftskunden/betriebshaftpflicht' },
        ],
      },
      {
        id: 'betriebsunterbrechung',
        title: 'Betriebsunterbrechung',
        subtitle: 'Absicherung bei Stillstand\nFinanzielle Sicherheit.',
        href: '/geschaeftskunden/betriebsunterbrechung',
        image: assetUrl('Geascheaftskunden/iStock-940251778.jpg'),
        links: [
          { title: 'Stillstand absichern', href: '/geschaeftskunden/betriebsunterbrechung' },
        ],
      },
      {
        id: 'sachversicherung',
        title: t('focus.items.property', 'Sachversicherung'),
        subtitle: 'Comprehensive protection for your business assets\nInsure what matters most.',
        href: '/geschaeftskunden/sachversicherung',
        image: assetUrl('iStock-943842590.jpg'),
        links: [
          { title: 'Business property', href: '/geschaeftskunden/sachversicherung' },
        ],
      },
      {
        id: 'risikoschutz',
        title: t('focus.items.risk', 'Risikoschutz'),
        subtitle: 'Umfassender Schutz für alle Unternehmensrisiken\nSicher in die Zukunft.',
        href: '/geschaeftskunden/risikoschutz',
        image: assetUrl('Geascheaftskunden/iStock-694835984.jpg'),
        links: [
          { title: 'Risikoanalyse', href: '/geschaeftskunden/risikoschutz' },
        ],
      },
      {
        id: 'rechtsschutz',
        title: 'Rechtsschutz',
        subtitle: 'Juristische Absicherung für Ihr Unternehmen\nRechtssicherheit gewähren.',
        href: '/geschaeftskunden/rechtsschutz',
        image: assetUrl('Geascheaftskunden/iStock-1079882856.jpg'),
        links: [
          { title: 'Unternehmens-Rechtsschutz', href: '/geschaeftskunden/rechtsschutz' },
        ],
      },
      {
        id: 'cyber',
        title: 'Cyber-Versicherung',
        subtitle: 'Schutz vor digitalen Risiken\nIT-Sicherheit für Ihr Business.',
        href: '/geschaeftskunden/cyber',
        image: assetUrl('Geascheaftskunden/iStock-922758092.jpg'),
        links: [
          { title: 'Details', href: '/geschaeftskunden/cyber' },
          { title: 'Cyber-Schutz', href: '/geschaeftskunden/cyber' },
        ],
      },
      {
        id: 'umwelt',
        title: 'Umwelthaftpflicht',
        subtitle: 'Umweltrechtliche Absicherung\nNachhaltig und sicher.',
        href: '/geschaeftskunden/umwelt',
        image: assetUrl('Geascheaftskunden/iStock-1039705312.jpg'),
        links: [
          { title: 'Umweltrisiken', href: '/geschaeftskunden/umwelt' },
          { title: 'Umwelt-Schutz', href: '/geschaeftskunden/umwelt' },
        ],
      },
    ];

    setFocusTopics(
      [...pool].sort((a, b) => a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }))
    );
  }, [t]);

  return (
    <Layout>
      <HeroSlider
        slides={[
          {
            id: 'geschaeftskunden-1',
            kicker: t('hero.kicker', 'Versicherungen für Geschäftskunden'),
            title: t('hero.title', 'Sicherheit für Ihr Unternehmen.'),
            subtitle: t(
              'hero.subtitle',
              'Professionelle Versicherungsberatung für Unternehmen und Selbstständige – individuell, transparent und zuverlässig.'
            ),
            imageUrl: assetUrl('iStock-943842590.jpg'),
            imagePosition: 'center',
            ctas: [
              { label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
              { label: t('hero.secondaryCta', 'Alle Leistungen'), href: '/leistungen' },
            ],
          },
        ]}
      />

      <section className="py-16 bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Themen für Geschäftskunden
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Die wichtigsten Lösungen für Ihr Unternehmen
            </p>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {focusTopics.map((item) => (
              <div
                key={`${item.id}-${item.title}`}
                className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
                role="link"
                tabIndex={0}
                onClick={() => navigate(item.href)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') navigate(item.href);
                }}
              >
                <div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
                  <div
                    className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
                    style={{ backgroundImage: `url(${item.image})` }}
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />

                  <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
                    <div className="text-xl font-bold">{item.title}</div>
                    {item.subtitle ? (
                      <div className="mt-1 text-sm text-white/90 whitespace-pre-line">{item.subtitle}</div>
                    ) : null}
                  </div>
                </div>

                <div className="mt-4 p-4 bg-white rounded-lg shadow-md">
                  <div className="space-y-2">
                    <div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">Details:</div>
                    <div className="grid grid-cols-1 gap-2">
                      {item.links.map((link) => (
                        <Link
                          key={`${item.id}-${link.href}-${link.title}`}
                          to={link.href}
                          className="text-blue-700 hover:text-blue-900 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
                          onClick={(e) => {
                            e.stopPropagation();
                            if (link.href.includes('#')) {
                              e.preventDefault();
                              navigate(link.href);
                            }
                          }}
                        >
                          <span className="w-2 h-2 bg-blue-700 rounded-full mr-2 group-hover:bg-blue-900 transition-colors" />
                          {link.title}
                        </Link>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">
            Ihre Vorteile als Geschäftskunde
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center">
              <TrendingUp className="w-16 h-16 text-blue-600 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-3">Wettbewerbsvorteil</h3>
              <p className="text-gray-600">Stärken Sie Ihre Marktposition durch optimierten Versicherungsschutz</p>
            </div>
            <div className="text-center">
              <Clock className="w-16 h-16 text-blue-600 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-3">Zeitersparnis</h3>
              <p className="text-gray-600">Effiziente Beratung und Verwaltung aller Versicherungsanliegen</p>
            </div>
            <div className="text-center">
              <DollarSign className="w-16 h-16 text-blue-600 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-3">Kostenoptimierung</h3>
              <p className="text-gray-600">Maßgeschneiderte Lösungen zu besten Konditionen für Ihr Unternehmen</p>
            </div>
            <div className="text-center">
              <Users className="w-16 h-16 text-blue-600 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-3">Persönliche Beratung</h3>
              <p className="text-gray-600">Individuelle Betreuung durch erfahrene Versicherungsexperten</p>
            </div>
          </div>
        </div>
      </section>

      {/* Geschäftskunden Kontakt Section */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-10 text-center text-white shadow-2xl max-w-6xl mx-auto mb-12">
        <h2 className="text-3xl md:text-4xl font-bold mb-4">
          Kontaktieren Sie uns
        </h2>
        <p className="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">
          Lassen Sie sich unverbindlich zu Ihren Geschäftskunden-Lösungen beraten.
        </p>
        
        {/* Buttons - immer sichtbar */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button 
            className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg"
            onClick={() => window.location.href = 'tel:01719864053'}
          >
            <Phone className="h-5 w-5 mr-2" />
            Jetzt anrufen
          </Button>
          <Button 
            variant="outline" 
            className="border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold"
            onClick={() => setShowContactForm(!showContactForm)}
          >
            <Mail className="h-5 w-5 mr-2" />
            Angebot anfordern
          </Button>
        </div>

        {/* Kontaktformular - erst sichtbar beim Klick auf "Angebot anfordern" */}
        {showContactForm && (
          <div className="mt-8 bg-white/10 backdrop-blur-sm rounded-xl p-6 max-w-2xl mx-auto animate-fade-in">
            <h3 className="text-2xl font-bold mb-4">Angebot anfordern</h3>
            <form className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-2">Firma*</label>
                  <input 
                    type="text" 
                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                    placeholder="Ihr Firmenname"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">Name*</label>
                  <input 
                    type="text" 
                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                    placeholder="Ihr Name"
                    required
                  />
                </div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-2">E-Mail*</label>
                  <input 
                    type="email" 
                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                    placeholder="ihre@email.de"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">Telefon</label>
                  <input 
                    type="tel" 
                    className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                    placeholder="0123 456789"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Interessierte Leistungen</label>
                <select className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-white/50">
                  <option value="">Bitte wählen...</option>
                  <option value="flottenversicherung">Flottenversicherung</option>
                  <option value="vermoegenssicherung">Vermögenssicherung</option>
                  <option value="sachversicherung">Sachversicherung</option>
                  <option value="risikoschutz">Risikoschutz</option>
                  <option value="betriebshaftpflicht">Betriebshaftpflicht</option>
                  <option value="betriebsunterbrechung">Betriebsunterbrechung</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Nachricht</label>
                <textarea 
                  className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 h-32 resize-none"
                  placeholder="Ihre Nachricht an uns..."
                ></textarea>
              </div>
              <div className="flex gap-4">
                <Button 
                  type="submit"
                  className="bg-white text-blue-600 hover:bg-gray-100 px-6 py-2 font-semibold"
                >
                  Anfrage senden
                </Button>
                <Button 
                  type="button"
                  variant="outline" 
                  className="border-white text-white hover:bg-white hover:text-blue-600 px-6 py-2 font-semibold"
                  onClick={() => setShowContactForm(false)}
                >
                  Abbrechen
                </Button>
              </div>
            </form>
          </div>
        )}
      </div>

    </Layout>
  );
};

export default Geschaeftskunden;