import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, Home, FileCheck, AlertCircle, Users, Building } from 'lucide-react';
import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider';

const Hausrat = () => {
  const { t } = useTranslation('hausrat');
  const navigate = useNavigate();
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
  const [activeTab, setActiveTab] = useState('overview');
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    propertySize: '',
    propertyType: '',
    currentValue: '',
    currentInsurer: '',
    message: ''
  });

  const benefits = [
    { icon: Shield, title: 'Einbruchschutz', description: 'Sicherung gegen Diebstahl und Vandalismus' },
    { icon: Home, title: 'Feuerschutz', description: 'Abdeckung von Brandschäden und Überspannung' },
    { icon: AlertTriangle, title: 'Wasserschutz', description: 'Schutz vor Leitungswasserschäden' },
    { icon: Calculator, title: 'Günstige Prämien', description: 'Wettbewerbsfähige Beiträge durch Tarifvergleich' }
  ];

  const services = [
    'Hausratversicherung',
    'Gebäudeversicherung', 
    'Haftpflichtversicherung',
    'Wohngebäudeversicherung',
    'Elementarschadenversicherung',
    'Unterhaltsversicherung'
  ];

  const handleFormChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert('Vielen Dank! Wir melden uns kurzfristig bei dir.');
  };

  return (
    <Layout>
      <HeroSlider
        slides={[
          {
            id: 'hausrat-1',
            kicker: t('hero.kicker', 'Ihr Zuhause bestens geschützt'),
            title: t('hero.title', 'Hausratversicherung'),
            subtitle: t('hero.subtitle', 'Sicherheit für Ihre Einrichtung – Schutz vor Einbruch, Feuer, Wasser und Sturm'),
            imageUrl: assetUrl('iStock-495809266.jpg'),
            imagePosition: 'center',
            ctas: [
              { label: t('hero.primaryCta', 'Angebot anfordern'), href: '#form' },
              { label: t('hero.secondaryCta', 'Beratung'), href: '/contact' },
            ],
          },
        ]}
      />

      <div className="min-h-screen bg-gray-50">
        <div className="container mx-auto px-4 md:px-6 py-8">
          <div className="max-w-screen-2xl mx-auto">
            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
              {t('pageTitle', 'Hausratversicherung')}
            </h2>

            <Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
              <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
                <TabsTrigger 
                  value="overview" 
                  className="relative px-3 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.5" />
                  {t('tabs.overview', 'Übersicht')}
                </TabsTrigger>
                <TabsTrigger 
                  value="details" 
                  className="relative px-3 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"
                >
                  <FileText className="w-4 h-4 mr-1.5" />
                  {t('tabs.details', 'Details')}
                </TabsTrigger>
                <TabsTrigger 
                  value="statistics" 
                  className="relative px-3 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"
                >
                  <Calculator className="w-4 h-4 mr-1.5" />
                  {t('tabs.statistics', 'Statistik')}
                </TabsTrigger>
                  <TabsTrigger 
                  value="calculator" 
                  className="relative px-3 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"
                >
                  <Calculator className="w-4 h-4 mr-1.5" />
                  {t('tabs.calculator', 'Rechner')}
                </TabsTrigger>
                <TabsTrigger 
                  value="form" 
                  className="relative px-3 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"
                >
                  <Phone className="w-4 h-4 mr-1.5" />
                  {t('tabs.form', 'Anfrage')}
                </TabsTrigger>
                <TabsTrigger 
                  value="claims" 
                  className="relative px-3 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"
                >
                  <AlertCircle className="w-4 h-4 mr-1.5" />
                  {t('tabs.claims', 'Schaden')}
                </TabsTrigger>
                <TabsTrigger 
                  value="catalog" 
                  className="relative px-3 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"
                >
                  <FileCheck className="w-4 h-4 mr-1.5" />
                  {t('tabs.catalog', 'Infothek')}
                </TabsTrigger>
                </TabsList>

              <div className="p-4 md:p-6">
                <TabsContent value="overview" className="mt-0">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                      <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>Ihr Zuhause bestens geschützt</span>
                        </div>
                        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                          Hausratversicherung
                          <span className="block text-blue-700">Sicherheit für Ihre Einrichtung</span>
                        </h1>
                        <p className="mt-4 text-gray-600 text-lg">
                          Schutz vor Einbruch, Feuer, Wasser und Sturm. Wir vergleichen Tarife und finden den passenden Schutz für Ihr Hab und Gut.
                        </p>

                        <div className="mt-6 flex flex-col sm:flex-row gap-3">
                          <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
                            Angebot anfordern
                          </Button>
                          <Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
                            Beratung
                          </Button>
                        </div>

                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                            <Shield className="w-5 h-5 text-blue-700" />
                            <div className="text-sm">
                              <div className="font-semibold text-gray-900">Vollschutz</div>
                              <div className="text-gray-600">alle Risiken abgedeckt</div>
                            </div>
                          </div>
                          <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                            <Home className="w-5 h-5 text-blue-700" />
                            <div className="text-sm">
                              <div className="font-semibold text-gray-900">Möbel & Co.</div>
                              <div className="text-gray-600">bis zur Neuwertsumme</div>
                            </div>
                          </div>
                        </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('iStock-482694353.jpg')}
                            alt="Hausratversicherung"
                            className="w-full h-[320px] object-cover"
                            onError={(e) => {
                              (e.currentTarget as HTMLImageElement).style.display = 'none';
                            }}
                          />
                          <div className="p-5">
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Home className="w-4 h-4" />
                              <span>Wohnung, Haus, Mieter</span>
                            </div>
                            <div className="mt-2 text-sm text-gray-600">
                              Tarifcheck – schnell, fair und passend zu deinem Bedarf.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
                      <h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <CheckCircle className="w-4 h-4 text-blue-700" />
                              Empfehlenswert
                            </CardTitle>
                            <CardDescription>Für jeden Haushalt wichtig.</CardDescription>
                          </CardHeader>
                        </Card>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <Calculator className="w-4 h-4 text-blue-700" />
                              Vergleich lohnt sich
                            </CardTitle>
                            <CardDescription>Beiträge & Leistungen variieren stark.</CardDescription>
                          </CardHeader>
                        </Card>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <PhoneCall className="w-4 h-4 text-blue-700" />
                              Hilfe im Schadenfall
                            </CardTitle>
                            <CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
                          </CardHeader>
                        </Card>
                      </div>
                    </div>
                  </TabsContent>

                <TabsContent value="details" className="mt-0">
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div className="lg:col-span-2">
                      <h3 className="text-2xl font-bold text-gray-900">Details & Vorteile</h3>
                      <p className="mt-2 text-gray-600">
                        Die Hausratversicherung schützt Ihr Hab und Gut vor Feuer, Wasser, Einbruch und Sturm. 
                        Wir helfen Ihnen, den richtigen Schutzsumme und Tarif zu finden.
                      </p>

                      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                        {benefits.map((benefit, index) => {
                          const Icon = benefit.icon;
                          return (
                            <Card key={index} className="border-gray-200">
                              <CardHeader>
                                <CardTitle className="text-base flex items-center gap-2">
                                  <Icon className="h-5 w-5 text-blue-700" />
                                  {benefit.title}
                                </CardTitle>
                                <CardDescription className="text-gray-600">{benefit.description}</CardDescription>
                              </CardHeader>
                            </Card>
                          );
                        })}
                      </div>

                      <div className="mt-8">
                        <h4 className="text-lg font-semibold text-gray-900 mb-3">Leistungen (Auszug)</h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                          {services.map((service, index) => (
                            <div
                              key={index}
                              className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3"
                            >
                              <CheckCircle className="h-5 w-5 text-blue-700 mt-0.5 flex-shrink-0" />
                              <p className="text-gray-700">{service}</p>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

                    <div>
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">Tipp</CardTitle>
                          <CardDescription>Deckungssumme prüfen.</CardDescription>
                        </CardHeader>
                        <CardContent className="text-sm text-gray-700">
                          Achte auf ausreichende Versicherungssumme (ca. 650-750 €/m²) und 
                          optionalen Übergangsschutz bei Umzug.
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="statistics" className="mt-0">
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div className="lg:col-span-2">
                      <h3 className="text-2xl font-bold text-gray-900">Schadensstatistik</h3>
                      <p className="mt-2 text-gray-600">
                        Hausratschäden entstehen häufig durch Einbruch, Feuer oder Wasser. 
                        Eine gute Versicherung schützt vor finanziellen Folgen.
                      </p>

                      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <AlertTriangle className="w-5 h-5 text-blue-700" />
                              Häufige Schadensarten
                            </CardTitle>
                            <CardDescription>
                              Einbruchdiebstahl, Brandschäden, Leitungswasser.
                            </CardDescription>
                          </CardHeader>
                        </Card>
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2">
                              <Clock className="w-5 h-5 text-blue-700" />
                              Statistik
                            </CardTitle>
                            <CardDescription>
                              250.000 Schäden/Jahr, 2.500 Mio. € Schadenssumme.
                            </CardDescription>
                          </CardHeader>
                        </Card>
                      </div>
                    </div>

                    <div>
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">Tipp</CardTitle>
                          <CardDescription>Vorsorge ist besser als Nachsorge.</CardDescription>
                        </CardHeader>
                        <CardContent className="text-sm text-gray-700">
                          Rauchmelder, sichere Schlösser und regelmäßige Wartung können 
                          Schäden vermeiden und ggf. Prämien reduzieren.
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="calculator" className="mt-0">
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                      <h3 className="text-2xl font-bold text-gray-900">Hausrat-Rechner</h3>
                      <p className="mt-2 text-gray-600">
                        Richtwert zur Orientierung. Für ein exaktes Angebot brauchen wir u. a.
                        Wohnfläche, Lage und Wertgegenstände.
                      </p>

                      <Card className="mt-6 border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg flex items-center gap-2">
                            <Calculator className="w-5 h-5 text-blue-700" />
                            Grobe Beitragsschätzung
                          </CardTitle>
                          <CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                              <label className="text-sm font-medium text-gray-700">Wohnfläche</label>
                              <select
                                name="propertySize"
                                value={formData.propertySize}
                                onChange={handleFormChange}
                                className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
                              >
                                <option value="">Bitte wählen</option>
                                <option value="bis-50">bis 50 m²</option>
                                <option value="51-100">51-100 m²</option>
                                <option value="101-150">101-150 m²</option>
                                <option value="151+">151+ m²</option>
                              </select>
                            </div>
                            <div>
                              <label className="text-sm font-medium text-gray-700">Wohnungstyp</label>
                              <select
                                name="propertyType"
                                value={formData.propertyType}
                                onChange={handleFormChange}
                                className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
                              >
                                <option value="">Bitte wählen</option>
                                <option value="miete">Mietwohnung</option>
                                <option value="eigentum">Eigentumswohnung</option>
                                <option value="haus">Einfamilienhaus</option>
                              </select>
                            </div>
                          </div>

                          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
                            <div className="text-sm text-blue-900 font-semibold">Richtwert (Beispiel)</div>
                            <div className="mt-1 text-sm text-blue-900">
                              Ab <span className="font-bold">ca. 8 €</span>/Monat
                            </div>
                            <div className="text-xs text-blue-900/80 mt-2">
                              Abhängig von Wohnfläche, Lage, Tarif.
                            </div>
                          </div>

                          <Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
                            Jetzt konkretes Angebot anfordern
                          </Button>
                        </CardContent>
                      </Card>
                    </div>

                    <div>
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
                          <CardDescription>Je genauer, desto besser.</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-3 text-sm text-gray-700">
                          <div className="flex items-start gap-2">
                            <Home className="w-4 h-4 text-blue-700 mt-0.5" />
                            <span>Genaue Wohnfläche</span>
                          </div>
                          <div className="flex items-start gap-2">
                            <Search className="w-4 h-4 text-blue-700 mt-0.5" />
                            <span>Wertgegenstände (Schmuck, Elektronik)</span>
                          </div>
                          <div className="flex items-start gap-2">
                            <AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
                            <span>Sicherheitsausstattung? Alarmanlage?</span>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="form" className="mt-0">
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div className="lg:col-span-2">
                      <h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
                      <p className="mt-2 text-gray-600">
                        Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
                      </p>

                      <Card className="mt-6 border-gray-200">
                        <CardContent className="p-6">
                          <form onSubmit={handleSubmit} className="space-y-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                              <div>
                                <label className="text-sm font-medium text-gray-700">Name</label>
                                <input
                                  name="name"
                                  value={formData.name}
                                  onChange={handleFormChange}
                                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                  required
                                />
                              </div>
                              <div>
                                <label className="text-sm font-medium text-gray-700">Telefon</label>
                                <input
                                  name="phone"
                                  value={formData.phone}
                                  onChange={handleFormChange}
                                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                />
                              </div>
                            </div>

                            <div>
                              <label className="text-sm font-medium text-gray-700">E-Mail</label>
                              <input
                                type="email"
                                name="email"
                                value={formData.email}
                                onChange={handleFormChange}
                                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                required
                              />
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                              <div>
                                <label className="text-sm font-medium text-gray-700">Wohnfläche</label>
                                <select
                                  name="propertySize"
                                  value={formData.propertySize}
                                  onChange={handleFormChange}
                                  className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
                                >
                                  <option value="">Bitte wählen</option>
                                  <option value="bis-50">bis 50 m²</option>
                                  <option value="51-100">51-100 m²</option>
                                  <option value="101-150">101-150 m²</option>
                                  <option value="151+">151+ m²</option>
                                </select>
                              </div>
                              <div>
                                <label className="text-sm font-medium text-gray-700">Wohnungstyp</label>
                                <select
                                  name="propertyType"
                                  value={formData.propertyType}
                                  onChange={handleFormChange}
                                  className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
                                >
                                  <option value="">Bitte wählen</option>
                                  <option value="miete">Mietwohnung</option>
                                  <option value="eigentum">Eigentumswohnung</option>
                                  <option value="haus">Einfamilienhaus</option>
                                </select>
                              </div>
                              <div>
                                <label className="text-sm font-medium text-gray-700">Versicherungssumme</label>
                                <input
                                  name="currentValue"
                                  value={formData.currentValue}
                                  onChange={handleFormChange}
                                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                                  placeholder="z. B. 50.000 €"
                                />
                              </div>
                            </div>

                            <div>
                              <label className="text-sm font-medium text-gray-700">Aktueller Versicherer (optional)</label>
                              <input
                                name="currentInsurer"
                                value={formData.currentInsurer}
                                onChange={handleFormChange}
                                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
                              />
                            </div>

                            <div>
                              <label className="text-sm font-medium text-gray-700">Nachricht</label>
                              <textarea
                                name="message"
                                value={formData.message}
                                onChange={handleFormChange}
                                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
                                placeholder="Welche Leistungen sind dir wichtig? (Einbruchschutz, Überspannung, etc.)"
                              />
                            </div>

                            <Button type="submit" className="bg-blue-700 hover:bg-blue-800">
                              Anfrage senden
                            </Button>
                          </form>
                        </CardContent>
                      </Card>
                    </div>

                    <div>
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">Direktkontakt</CardTitle>
                          <CardDescription>Wenn es schnell gehen soll.</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-3 text-sm text-gray-700">
                          <div className="flex items-center gap-2">
                            <Phone className="w-4 h-4 text-blue-700" />
                            <span>Telefon: 0171 / 9864053</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Mail className="w-4 h-4 text-blue-700" />
                            <span>E-Mail: info@finanzen-mizera.de</span>
                          </div>
                          <div className="pt-2">
                            <Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
                              Kontaktseite
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="claims" className="mt-0">
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div className="lg:col-span-2">
                      <h3 className="text-2xl font-bold text-gray-900">Schadenmeldung</h3>
                      <p className="mt-2 text-gray-600">
                        Im Schadenfall zählt eine klare Reihenfolge. Hier ist die Kurz-Checkliste.
                      </p>

                      <div className="mt-6 space-y-3">
                        <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
                          <AlertTriangle className="w-5 h-5 text-blue-700 mt-0.5" />
                          <div>
                            <div className="font-semibold text-gray-900">Schaden stoppen</div>
                            <div className="text-gray-600 text-sm">Schaden eindämmen, Polizei rufen (bei Einbruch).</div>
                          </div>
                        </div>
                        <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
                          <FileCheck className="w-5 h-5 text-blue-700 mt-0.5" />
                          <div>
                            <div className="font-semibold text-gray-900">Dokumentation</div>
                            <div className="text-gray-600 text-sm">Fotos, Liste der gestohlenen/beschädigten Gegenstände.</div>
                          </div>
                        </div>
                        <div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
                          <PhoneCall className="w-5 h-5 text-blue-700 mt-0.5" />
                          <div>
                            <div className="font-semibold text-gray-900">Melden</div>
                            <div className="text-gray-600 text-sm">So schnell wie möglich melden – wir unterstützen dich.</div>
                          </div>
                        </div>
                      </div>

                      <div className="mt-6 flex flex-col sm:flex-row gap-3">
                        <Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
                          Hilfe anfordern
                        </Button>
                        <Link to="/kontakt" className="inline-flex">
                          <Button variant="outline">Kontakt</Button>
                        </Link>
                      </div>
                    </div>

                    <div>
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">Notfall-Info</CardTitle>
                          <CardDescription>Bei Einbruch immer 110 wählen.</CardDescription>
                        </CardHeader>
                        <CardContent className="text-sm text-gray-700 space-y-2">
                          <div className="flex items-start gap-2">
                            <PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
                            <span>Polizei: 110</span>
                          </div>
                          <div className="flex items-start gap-2">
                            <PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
                            <span>Feuerwehr: 112</span>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="catalog" className="mt-0">
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div className="lg:col-span-2">
                      <h3 className="text-2xl font-bold text-gray-900">Infothek</h3>
                      <p className="mt-2 text-gray-600">
                        Nützliche Informationen rund um die Hausratversicherung.
                      </p>

                      <div className="mt-4 flex flex-col sm:flex-row gap-3">
                        <Button className="bg-blue-700 hover:bg-blue-800">
                          Checkliste herunterladen
                        </Button>
                        <Button variant="outline" className="gap-2" onClick={() => window.print()}>
                          Seite drucken
                        </Button>
                      </div>
                    </div>

                    <div>
                      <Card className="border-gray-200">
                        <CardHeader>
                          <CardTitle className="text-lg">Hinweis</CardTitle>
                          <CardDescription>Informationen können sich ändern – bitte aktuelle Quellen prüfen.</CardDescription>
                        </CardHeader>
                      </Card>
                    </div>
                  </div>
                </TabsContent>

                <GeneralNotice />
              </div>
            </Tabs>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default Hausrat;