import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail, Building, Briefcase, Truck, Star, Car, Home, CheckCircle, HeartPulse, LineChart, Globe, Calendar } from 'lucide-react';
import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice';

const Agentur = () => {
  const { t } = useTranslation('agentur');
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;

  const partnerLogoFallbackUrl = (url: string) => `https://www.google.com/s2/favicons?sz=128&domain_url=${encodeURIComponent(url)}`;

  const [activeTab, setActiveTab] = useState('overview');

  const partnerInsurers: Array<{ name: string; url: string; logoFile?: string }> = [
    { name: 'Allianz', url: 'https://www.allianz.de/', logoFile: 'allianz.svg' },
    { name: 'ARAG', url: 'https://www.arag.de/', logoFile: 'arag.svg' },
    { name: 'AXA', url: 'https://www.axa.de/', logoFile: 'axa.svg' },
    { name: 'Barmenia', url: 'https://www.barmenia.de/', logoFile: 'barmenia.svg' },
    { name: 'Concordia', url: 'https://www.concordia.de/', logoFile: 'concordia.svg' },
    { name: 'Continentale', url: 'https://www.continentale.de/', logoFile: 'continentale.svg' },
    { name: 'DEVK', url: 'https://www.devk.de/', logoFile: 'devk.svg' },
    { name: 'Die Bayerische', url: 'https://www.diebayerische.de/', logoFile: 'die-bayerische.svg' },
    { name: 'ERGO', url: 'https://www.ergo.de/', logoFile: 'ergo.svg' },
    { name: 'Gothaer', url: 'https://www.gothaer.de/', logoFile: 'gothaer.svg' },
    { name: 'HanseMerkur', url: 'https://www.hansemerkur.de/', logoFile: 'hansemerkur.svg' },
    { name: 'HDI', url: 'https://www.hdi.de/', logoFile: 'hdi.svg' },
    { name: 'INTER', url: 'https://www.inter.de/', logoFile: 'inter.svg' },
    { name: 'KRAVAG', url: 'https://www.kravag.de/', logoFile: 'kravag.svg' },
    { name: 'Lippische', url: 'https://www.lippische.de/', logoFile: 'lippische.svg' },
    { name: 'NÜRNBERGER', url: 'https://www.nuernberger.de/', logoFile: 'nuernberger.svg' },
    { name: 'R+V', url: 'https://www.ruv.de/', logoFile: 'ruv.svg' },
    { name: 'SIGNAL IDUNA', url: 'https://www.signal-iduna.de/', logoFile: 'signal-iduna.svg' },
    { name: 'Sparkassen DirektVersicherung', url: 'https://www.sparkassen-direkt.de/', logoFile: 'sparkassen-direkt.svg' },
    { name: 'Swiss Life', url: 'https://www.swisslife.de/', logoFile: 'swiss-life.svg' },
    { name: 'Verti', url: 'https://www.verti.de/', logoFile: 'verti.svg' },
    { name: 'VHV', url: 'https://www.vhv.de/', logoFile: 'vhv.svg' },
    { name: 'VKB', url: 'https://www.vkb.de/', logoFile: 'vkb.svg' },
    { name: 'Württembergische', url: 'https://www.wuerttembergische.de/', logoFile: 'wuerttembergische.svg' },
    { name: 'Zurich', url: 'https://www.zurich.de/', logoFile: 'zurich.svg' },
  ].sort((a, b) => a.name.localeCompare(b.name, 'de'));

  return (
    <Layout>
      <HeroSlider
        slides={[
          {
            id: 'agentur-1',
            kicker: t('hero.kicker', 'Ihr starker Partner für Sicherheit'),
            title: t('hero.title', 'Ihr starker Partner für Sicherheit.'),
            subtitle: t(
              'hero.subtitle',
              'Unabhängige Versicherung- und Finanzberatung – persönlich, verlässlich und auf Ihre Ziele ausgerichtet.'
            ),
            imageUrl: assetUrl('Fotolia_7809059_XS.jpg'),
            imagePosition: 'center',
            ctas: [
              { label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
              { label: t('hero.secondaryCta', 'Unsere Leistungen'), href: '/leistungen' },
            ],
          },
        ]}
      />
      {/* Content */}
      <div className="min-h-screen bg-gray-50">
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-6xl mx-auto">

            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
                <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
                <TabsList className="grid grid-cols-8 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
                  <TabsTrigger 
                    value="overview" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <Home className="w-4 h-4 mr-1" />
                    {t('tabs.overview', 'Philosophie')}
                  </TabsTrigger>
                  <TabsTrigger 
                    value="leistungen" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <Star className="w-4 h-4 mr-1" />
                    {t('tabs.leistungen', 'Leistungen')}
                  </TabsTrigger>
                  <TabsTrigger 
                    value="philosophie" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <Users className="w-4 h-4 mr-1" />
                    {t('tabs.partner', 'Partner')}
                  </TabsTrigger>
                  <TabsTrigger 
                    value="events" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <Calendar className="w-4 h-4 mr-1" />
                    Events
                  </TabsTrigger>
                  <TabsTrigger 
                    value="kontakt" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <TrendingUp className="w-4 h-4 mr-1" />
                    Finanz
                  </TabsTrigger>
                  <TabsTrigger 
                    value="links" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <Globe className="w-4 h-4 mr-1" />
                    Links
                  </TabsTrigger>
                  <TabsTrigger 
                    value="vermoegensverwaltung" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <DollarSign className="w-4 h-4 mr-1" />
                    Vermögen
                  </TabsTrigger>
                  <TabsTrigger 
                    value="investmentbanken" 
                    className="relative px-2 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
                  >
                    <Building className="w-4 h-4 mr-1" />
                    Banken
                  </TabsTrigger>
                </TabsList>
                </div>

                <TabsContent value="overview" className="p-4 md:p-6">
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
                    <div>
                      <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
                        <Star className="w-4 h-4" />
                        <span>Seit 1994 an Ihrer Seite</span>
                      </div>
                      <h2 className="text-2xl md:text-3xl font-bold text-gray-900 leading-tight">
                        Agentur Mizera & Partner
                        <span className="block text-blue-700">Versicherung, Finanzen, Beratung</span>
                      </h2>

                      <div className="mt-4 text-gray-600 text-lg space-y-4">
                        <p className="font-semibold text-gray-900">Herzlich willkommen</p>
                        <p>Liebe Kundinnen und Kunden,</p>
                        <p>sehr geehrte Damen und Herren,</p>
                        <p>
                          Hand aufs Herz: Wann haben Sie sich zuletzt intensiv mit Ihren Versicherungen oder Finanzanlagen beschäftigt – sie verglichen oder an Ihre aktuelle Lebenssituation angepasst? Und was haben Sie dadurch in den letzten fünf, zehn oder fünfzehn Jahren tatsächlich erreicht?
                        </p>
                        <p>
                          Finanzen und Versicherungen sind Themen von großer Bedeutung, denen im Alltag jedoch oft zu wenig Aufmerksamkeit geschenkt wird. Beruf, Familie, Kinder, Hobbys und die täglichen Verpflichtungen lassen dafür kaum Raum. Schnell vergeht eine Woche, ein Monat – und schließlich ein ganzes Jahr, ohne dass notwendige Entscheidungen getroffen oder Potenziale genutzt wurden.
                        </p>
                        <p>Versicherungen sind heute so vielschichtig wie nie zuvor.</p>
                        <p>
                          Als unabhängiger Versicherungsfachmann (BWV), Makler habe ich zur Auswahl alle bedeutendste und wichtigen Versicherungsgesellschaften für sie. Ein Angebot richtet sich nicht nach meine Interessen sondern zur Ihre Persönliche und Berufliche, Situation, Lebenslage und zur ihre Möglichkeit.
                        </p>
                        <p className="font-semibold text-gray-900">Genau hier setze ich an.</p>
                        <p>
                          Als unabhängiger Versicherungsfachmann (BWV) und Makler unterstütze ich Sie dabei, Ihre Versicherungs- und Finanzlösungen regelmäßig zu überprüfen, sinnvoll anzupassen und strategisch weiterzuentwickeln – abgestimmt auf Ihre jeweilige Lebenssituation. Gemeinsam analysieren wir, welche Veränderungen sinnvoll, notwendig oder vorteilhaft sind.
                        </p>
                        <p>
                          Mein besonderer Schwerpunkt liegt im Bereich der Finanzanlagen. Seit 1994 stehe ich im Dienst meiner Kundinnen und Kunden. Ein entscheidender Vorteil für Sie: Bestehende Verträge müssen bei Anpassungen nicht kostenintensiv gekündigt und neu abgeschlossen werden. Stattdessen prüfen wir effiziente Optimierungen innerhalb Ihrer bestehenden Strukturen.
                        </p>
                        <p>
                          Informieren Sie sich auf meiner Website über die Themen Finanzen und Versicherungen – oder lassen Sie uns Ihre Fragen und Wünsche persönlich besprechen.
                        </p>
                        <p>
                          Ich freue mich darauf, Sie kompetent und verlässlich zu begleiten.
                          <br />
                          Gerne stehe ich Ihnen zur Verfügung.
                        </p>
                        <div className="pt-2 text-gray-800">
                          <p className="font-semibold">Ihr Marian-Adam Mizera</p>
                          <p>Versicherungsfachmann (BWV)</p>
                          <p>BWV - Berufsbildungswerk der Deutschen Versicherungswirtschaft (BWV) e.V.</p>
                          <p>Versicherungsmakler mit Erlaubnis nach § 34d Abs. 1 GewO</p>
                        </div>
                      </div>

                      <div className="mt-6 flex flex-col sm:flex-row gap-3">
                        <Button asChild className="bg-blue-700 hover:bg-blue-800">
                          <Link to="/contact">Beratung vereinbaren</Link>
                        </Button>
                        <Button asChild variant="outline" className="border-gray-300">
                          <Link to="/leistungen">Leistungen ansehen</Link>
                        </Button>
                      </div>
                    </div>

                    <div className="relative">
                      <div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
                      <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                        <img
                          src={assetUrl('Fotolia_7809059_XS.jpg')}
                          alt="Agentur Mizera & Partner"
                          className="w-full h-[320px] object-cover"
                          onError={(e) => {
                            (e.currentTarget as HTMLImageElement).style.display = 'none';
                          }}
                        />
                        <div className="p-5">
                          <div className="mt-2 text-sm text-gray-600">
                            Versicherung, Finanzen und Beratung – alles aus einer Hand.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="leistungen" className="p-4 md:p-6 h-[75vh] overflow-y-auto">
                  <div className="mb-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
                    <div className="text-lg font-semibold text-gray-900 mb-2">Leistungen der Agentur</div>
                    <div className="text-gray-700 space-y-2">
                      <p>Versicherungen sind heute so vielschichtig wie nie zuvor.</p>
                      <p>
                        Als unabhängiger Versicherungsfachmann (BWV), Makler habe ich zur Auswahl alle bedeutendste und wichtigen Versicherungsgesellschaften für sie. Ein Angebot richtet sich nicht nach meine Interessen sondern zur Ihre Persönliche und Berufliche, Situation, Lebenslage und zur ihre Möglichkeit.
                      </p>
                    </div>
                  </div>

                  <div className="mt-8">
                    <h2 className="text-2xl md:text-3xl font-bold text-gray-900 text-center">
                      Unsere Versicherungslösungen
                    </h2>

                    <div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                      <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="w-12 h-12 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center mb-4">
                          <Car className="w-6 h-6 text-blue-700" />
                        </div>
                        <div className="text-lg font-semibold text-gray-900">KFZ-Versicherung</div>
                        <div className="mt-2 text-sm text-gray-600">
                          Umfassende Versicherungslösungen für alle Fahrzeugtypen
                        </div>
                        <div className="mt-4 space-y-2">
                          {['Haftpflicht', 'Vollkasko', 'Teilkasko', 'Insassenunfallversicherung'].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="w-12 h-12 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center mb-4">
                          <Home className="w-6 h-6 text-blue-700" />
                        </div>
                        <div className="text-lg font-semibold text-gray-900">Sachversicherung</div>
                        <div className="mt-2 text-sm text-gray-600">Schutz für Ihr Hab und Gut</div>
                        <div className="mt-4 space-y-2">
                          {['Hausratversicherung', 'Wohngebäudeversicherung', 'Rechtsschutz'].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="w-12 h-12 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center mb-4">
                          <Users className="w-6 h-6 text-blue-700" />
                        </div>
                        <div className="text-lg font-semibold text-gray-900">Personenversicherung</div>
                        <div className="mt-2 text-sm text-gray-600">Absicherung für Sie und Ihre Familie</div>
                        <div className="mt-4 space-y-2">
                          {['Lebensversicherung', 'Risikolebensversicherung', 'Berufsunfähigkeitsversicherung'].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="w-12 h-12 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center mb-4">
                          <HeartPulse className="w-6 h-6 text-blue-700" />
                        </div>
                        <div className="text-lg font-semibold text-gray-900">Gesundheitsversicherung</div>
                        <div className="mt-2 text-sm text-gray-600">Ihre Gesundheit optimal abgesichert</div>
                        <div className="mt-4 space-y-2">
                          {['Private Krankenversicherung', 'Krankenzusatzversicherung', 'Pflegezusatzversicherung'].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="w-12 h-12 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center mb-4">
                          <Briefcase className="w-6 h-6 text-blue-700" />
                        </div>
                        <div className="text-lg font-semibold text-gray-900">Betriebliche Vorsorge</div>
                        <div className="mt-2 text-sm text-gray-600">Lösungen für Unternehmen und Mitarbeiter</div>
                        <div className="mt-4 space-y-2">
                          {['Betriebliche Altersvorsorge', 'Betriebliche Krankenversicherung', 'Berufsgruppenlösungen'].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="w-12 h-12 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center mb-4">
                          <LineChart className="w-6 h-6 text-blue-700" />
                        </div>
                        <div className="text-lg font-semibold text-gray-900">Finanzberatung</div>
                        <div className="mt-2 text-sm text-gray-600">Strategische Planung für Ihre Ziele</div>
                        <div className="mt-4 space-y-2">
                          {['Vermögensaufbau', 'Altersvorsorge', 'Investmentplanung'].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>

                  <iframe
                    title="Leistungen der Agentur"
                    src="/leistungen?embed=1"
                    className="w-full h-[520px] rounded-lg border border-gray-200 bg-white"
                    loading="lazy"
                  />
                </TabsContent>

                <TabsContent value="philosophie" className="p-4 md:p-6">
                  <div className="mb-2">
                    <h2 className="text-2xl font-semibold text-gray-900 mb-6 text-center">
                      Partnerversicherungen
                    </h2>

                    <div className="bg-blue-50 rounded-lg p-6 md:p-8">
                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        {partnerInsurers.map((partner) => (
                          <a
                            key={partner.name}
                            href={partner.url}
                            target="_blank"
                            rel="noreferrer"
                            className="group flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-4 hover:bg-gray-50 transition-colors"
                          >
                            <div className="relative w-11 h-11 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center overflow-hidden">
                              <span className="text-sm font-semibold text-blue-800">
                                {partner.name.slice(0, 2).toUpperCase()}
                              </span>
                              <img
                                src={partner.logoFile ? assetUrl(`partner-logos/${partner.logoFile}`) : partnerLogoFallbackUrl(partner.url)}
                                alt={partner.name}
                                className="absolute inset-0 w-full h-full object-contain p-1 bg-blue-50"
                                onError={(e) => {
                                  const img = e.currentTarget as HTMLImageElement;
                                  const fallback = partnerLogoFallbackUrl(partner.url);
                                  if (img.src !== fallback) img.src = fallback;
                                }}
                              />
                            </div>
                            <div className="min-w-0">
                              <div className="font-semibold text-gray-900 truncate">{partner.name}</div>
                              <div className="text-xs text-gray-600 truncate">Website öffnen</div>
                            </div>
                          </a>
                        ))}
                      </div>

                      <div className="mt-4 text-center text-sm text-gray-600">
                        Links zu externen Diensten öffnen Seiten Dritter.
                      </div>
                    </div>

                    <div className="mt-8">
                      <h2 className="text-2xl font-semibold text-gray-900 mb-6 text-center">
                        Interner Auftritt der Investmenthäuser für ihre fondsgebundenen Produkte
                      </h2>

                      <div className="bg-green-50 rounded-lg p-6 md:p-8">
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                          {[
                            { name: 'DWS', url: 'https://www.dws.de' },
                            { name: 'Cominvest', url: 'https://www.cominvest.de' },
                            { name: 'Hansainvest', url: 'https://www.hansainvest.com' },
                            { name: 'MEAG', url: 'https://www.meag.com' },
                            { name: 'Allianz Global Investors', url: 'https://www.allianzgi.com' },
                            { name: 'AXA Investment Managers', url: 'https://www.axa-im.com' },
                            { name: 'BlackRock', url: 'https://www.blackrock.com' },
                            { name: 'J.P. Morgan Asset Management', url: 'https://www.jpmorgan.com' },
                            { name: 'Goldman Sachs Asset Management', url: 'https://www.goldmansachs.com' },
                            { name: 'UBS Asset Management', url: 'https://www.ubs.com' },
                            { name: 'Franklin Templeton', url: 'https://www.franklintempleton.com' },
                            { name: 'Fidelity', url: 'https://www.fidelity.com' },
                            { name: 'Sutor Bank', url: 'https://www.sutorbank.de' },
                          ].map((partner) => (
                            <a
                              key={partner.name}
                              href={partner.url}
                              target="_blank"
                              rel="noreferrer"
                              className="group flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-4 hover:bg-gray-50 transition-colors"
                            >
                              <div className="relative w-11 h-11 rounded-lg bg-green-50 border border-green-100 flex items-center justify-center overflow-hidden">
                                <span className="text-sm font-semibold text-green-800">
                                  {partner.name.slice(0, 2).toUpperCase()}
                                </span>
                                <img
                                  src={partnerLogoFallbackUrl(partner.url)}
                                  alt={partner.name}
                                  className="absolute inset-0 w-full h-full object-contain p-1 bg-green-50"
                                  onError={(e) => {
                                    const img = e.currentTarget as HTMLImageElement;
                                    const fallback = partnerLogoFallbackUrl(partner.url);
                                    if (img.src !== fallback) img.src = fallback;
                                  }}
                                />
                              </div>
                              <div className="min-w-0">
                                <div className="font-semibold text-gray-900 truncate">{partner.name}</div>
                                <div className="text-xs text-gray-600 truncate">Website öffnen</div>
                              </div>
                            </a>
                          ))}
                        </div>

                        <div className="mt-4 text-center text-sm text-gray-600">
                          Links zu externen Diensten öffnen Seiten Dritter.
                        </div>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="kontakt" className="p-4 md:p-6">
                  <div className="bg-gray-100 rounded-lg p-8 text-center">
                    <h2 className="text-2xl font-semibold text-gray-900 mb-4">Persönliche Beratung vereinbaren</h2>
                    <p className="text-gray-600 mb-6">
                      Lassen Sie sich von unseren Experten beraten und finden Sie die optimale Versicherung- und Finanzlösung für Ihre Bedürfnisse.
                    </p>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center">
                      <Button className="bg-blue-600 text-white hover:bg-blue-700">
                        <Phone className="h-5 w-5 mr-2" />
                        Beratung vereinbaren
                      </Button>
                      <Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-50">
                        <Mail className="h-5 w-5 mr-2" />
                        Kontakt aufnehmen
                      </Button>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="links" className="p-4 md:p-6 h-[75vh] overflow-hidden">
                  <iframe
                    title="Links"
                    src="/links?embed=1"
                    className="w-full h-full rounded-lg border border-gray-200 bg-white"
                    loading="lazy"
                  />
                </TabsContent>

                <TabsContent value="vermoegensverwaltung" className="p-4 md:p-6">
                  <div className="rounded-lg border border-gray-200 bg-gray-50 p-6">
                    <h2 className="text-2xl font-semibold text-gray-900 mb-2">Vermögensverwaltung</h2>
                    <p className="text-gray-700">
                      Mustertext: Wir unterstützen Sie bei der strukturierten Vermögensplanung – transparent, unabhängig und an Ihren Zielen ausgerichtet.
                    </p>

                    <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="rounded-lg border border-gray-200 bg-white p-4">
                        <div className="font-semibold text-gray-900 mb-2">Leistungsumfang (Beispiel)</div>
                        <div className="space-y-2">
                          {[
                            'Analyse Ihrer aktuellen Situation (Ziele, Risiko, Laufzeiten)',
                            'Strategie & Portfolio-Struktur (Diversifikation)',
                            'Regelmäßige Überprüfung und Anpassung',
                            'Transparente Kosten- und Produktübersicht',
                          ].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="rounded-lg border border-gray-200 bg-white p-4">
                        <div className="font-semibold text-gray-900 mb-2">Für wen? (Beispiel)</div>
                        <div className="space-y-2">
                          {[
                            'Privatkunden mit mittel-/langfristigen Zielen',
                            'Selbstständige & Unternehmer',
                            'Familien (Absicherung + Vermögensaufbau)',
                            'Ruhestandsplanung',
                          ].map((item) => (
                            <div key={item} className="flex items-start gap-2 text-sm text-gray-700">
                              <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                              <span>{item}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    <div className="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
                      <div className="font-semibold text-gray-900">Kontakt / Muster-CTA</div>
                      <div className="text-sm text-gray-700 mt-1">
                        Vereinbaren Sie einen Termin – wir besprechen Ziele, Zeitrahmen und passende Lösungen.
                      </div>
                      <div className="mt-3 flex flex-col sm:flex-row gap-3">
                        <Button asChild className="bg-blue-700 hover:bg-blue-800">
                          <Link to="/contact">Beratung vereinbaren</Link>
                        </Button>
                        <Button asChild variant="outline" className="border-gray-300">
                          <Link to="/leistungen">Leistungen ansehen</Link>
                        </Button>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="investmentbanken" className="p-4 md:p-6">
                  <div className="rounded-lg border border-gray-200 bg-gray-50 p-6">
                    <h2 className="text-2xl font-semibold text-gray-900 mb-2">Investment-Banken</h2>
                    <p className="text-gray-700">
                      Mustertext: Hier kann eine alphabetische Liste Ihrer Partnerbanken mit Links erscheinen.
                    </p>

                    <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                      {[
                        { name: 'Commerzbank', url: 'https://www.commerzbank.de/' },
                        { name: 'Sutor Bank', url: 'https://www.sutorbank.de/' },
                      ].map((bank) => (
                        <a
                          key={bank.name}
                          href={bank.url}
                          target="_blank"
                          rel="noreferrer"
                          className="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4 hover:bg-gray-50 transition-colors"
                        >
                          <div className="min-w-0">
                            <div className="font-semibold text-gray-900 truncate">{bank.name}</div>
                            <div className="text-xs text-gray-600 truncate">Website öffnen</div>
                          </div>
                          <div className="text-xs font-semibold text-blue-700">LINK</div>
                        </a>
                      ))}
                    </div>

                    <div className="mt-6 text-sm text-gray-600">
                      Hinweis: Sobald Sie mir die echten Banken + Links schicken, ersetze ich die Beispielbank-Liste 1:1.
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="events" className="p-4 md:p-6">
                  <div className="space-y-8">
                    <div className="text-center">
                      <Calendar className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                      <h3 className="text-2xl font-bold text-gray-900 mb-4">Schulungen & Events</h3>
                      <p className="text-gray-600 mb-8">
                        Besuchen Sie unsere exklusiven Schulungen und Events an historischen Orten wie dem SCHLOSS Hotel Fleesensee
                      </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                      <div className="rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow bg-white">
                        <div className="aspect-video bg-gray-100">
                          <img
                            src={assetUrl('iStock-928087944.jpg')}
                            alt="SCHLOSS Hotel Fleesensee 2026"
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="p-4">
                          <div className="flex items-center gap-2 text-sm text-blue-600 font-semibold mb-2">
                            <MapPin className="w-4 h-4" />
                            SCHLOSS Hotel Fleesensee
                          </div>
                          <h4 className="text-lg font-semibold text-gray-900 mb-1">Apella Jahresauftaktkongress 2026</h4>
                          <p className="text-sm text-gray-600 mb-4">12. - 17. Januar 2026 • 6 Tage</p>
                          <p className="text-gray-600 mb-4">
                            Exklusiver Jahresauftaktkongress der Apella-Gruppe im eleganten SCHLOSS Hotel Fleesensee mit FoFo-Präsentationen und Netzwerk-Events
                          </p>
                          <div className="space-y-2 mb-4">
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Users className="w-4 h-4" />
                              <span>Max. 150 Teilnehmer</span>
                            </div>
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Clock className="w-4 h-4" />
                              <span>9:00 - 20:00 Uhr</span>
                            </div>
                          </div>
                          <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
                            Jetzt anmelden
                          </Button>
                        </div>
                      </div>

                      <div className="rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow bg-white">
                        <div className="aspect-video bg-gray-100">
                          <img
                            src={assetUrl('iStock-957363908.jpg')}
                            alt="FoFo Presentation"
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="p-4">
                          <div className="flex items-center gap-2 text-sm text-blue-600 font-semibold mb-2">
                            <MapPin className="w-4 h-4" />
                            SCHLOSS Hotel Fleesensee
                          </div>
                          <h4 className="text-lg font-semibold text-gray-900 mb-1">FoFo-Präsentation</h4>
                          <p className="text-sm text-gray-600 mb-4">13. Januar 2026 • 1 Tag</p>
                          <p className="text-gray-600 mb-4">
                            Professionelle FoFo-Präsentationen (Follow-up/Follow-on) mit neuesten Markteinblicken und Strategien
                          </p>
                          <div className="space-y-2 mb-4">
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Users className="w-4 h-4" />
                              <span>Max. 50 Teilnehmer</span>
                            </div>
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Clock className="w-4 h-4" />
                              <span>14:00 - 18:00 Uhr</span>
                            </div>
                          </div>
                          <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
                            Jetzt anmelden
                          </Button>
                        </div>
                      </div>

                      <div className="rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow bg-white">
                        <div className="aspect-video bg-gray-100">
                          <img
                            src={assetUrl('iStock-948602744.jpg')}
                            alt="Networking Event"
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="p-4">
                          <div className="flex items-center gap-2 text-sm text-blue-600 font-semibold mb-2">
                            <MapPin className="w-4 h-4" />
                            SCHLOSS Hotel Fleesensee
                          </div>
                          <h4 className="text-lg font-semibold text-gray-900 mb-1">Networking-Event</h4>
                          <p className="text-sm text-gray-600 mb-4">15. Januar 2026 • 1 Abend</p>
                          <p className="text-gray-600 mb-4">
                            Exklusives Networking-Event mit Partnern und Kunden im eleganten Ambiente des SCHLOSS Hotels Fleesensee
                          </p>
                          <div className="space-y-2 mb-4">
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Users className="w-4 h-4" />
                              <span>Max. 80 Teilnehmer</span>
                            </div>
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Clock className="w-4 h-4" />
                              <span>18:00 - 22:00 Uhr</span>
                            </div>
                          </div>
                          <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
                            Jetzt anmelden
                          </Button>
                        </div>
                      </div>
                    </div>

                    <div className="bg-white rounded-xl border border-gray-200 p-6">
                      <h4 className="text-xl font-bold text-gray-900 mb-4">Warum SCHLOSS Hotel Fleesensee?</h4>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                          <p className="text-gray-600 mb-4">
                            Das elegante SCHLOSS Hotel Fleesensee bietet die perfekte Kulisse für unsere Apella Jahresauftaktkongresse:
                          </p>
                          <ul className="space-y-2 text-gray-600">
                            <li className="flex items-start gap-2">
                              <CheckCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                              <span>Exklusive Location am Fleesensee</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                              <span>Professionelle FoFo-Präsentationen</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                              <span>High-Level Networking</span>
                            </li>
                          </ul>
                        </div>
                        <div>
                          <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
                            <div className="flex items-center gap-2 text-sm font-semibold text-gray-900 mb-2">
                              <Calendar className="w-4 h-4 text-blue-600" />
                              Nächster Termin
                            </div>
                            <p className="text-gray-600">
                              <strong>12. - 17. Januar 2026</strong><br />
                              Apella Jahresauftaktkongress 2026<br />
                              <span className="text-blue-600">Noch 45 Plätze frei</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <div className="p-4 md:p-6">
                  <GeneralNotice className="rounded-md border border-gray-200 bg-white p-4" />
                </div>
              </Tabs>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default Agentur;