import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Shield, Users, Phone, Mail, CheckCircle, Download, AlertTriangle, FileCheck, Home, FileText, Calculator } from 'lucide-react';
import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
import RightImageCard from '@/components/tab-pages/RightImageCard';

const FamilienHaftpflicht = () => {
  const navigate = useNavigate();
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
  const [activeTab, setActiveTab] = useState('overview');

  return (
    <Layout>
      <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">Haftpflicht (Familie)</h2>

            <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                <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-1 md:grid-cols-2 lg:grid-cols-3 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" />
                      Ü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" />
                      Details
                    </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" />
                      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"
                    >
                      <AlertTriangle className="w-4 h-4 mr-1.5" />
                      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" />
                      Ratgeber
                    </TabsTrigger>
                  </TabsList>
                </div>

                <div className="p-4 md:p-6">
                  <TabsContent value="overview" className="mt-0">
                    <TwoColumnTab
                      className="gap-8 items-center"
                      left={
                        <>
                          <div className="inline-flex items-center gap-2 rounded-full bg-green-50 border border-green-200 px-3 py-1 text-sm text-green-800 mb-4">
                            <Shield className="w-4 h-4" />
                            <span>Schutz vor hohen Forderungen</span>
                          </div>
                          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
                            Privathaftpflicht für Familien
                            <span className="block text-green-700">Kinder & Eltern abgesichert</span>
                          </h1>
                          <p className="mt-4 text-gray-600 text-lg">
                            Wenn etwas passiert, kann es teuer werden. Die Privathaftpflicht schützt vor Schadenersatzforderungen.
                          </p>

                          <div className="mt-6 flex flex-col sm:flex-row gap-3">
                            <Button onClick={() => setActiveTab('form')} className="bg-green-700 hover:bg-green-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">
                              <Users className="w-5 h-5 text-green-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">Familien-Schutz</div>
                                <div className="text-gray-600">Kinder mitversichert</div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
                              <Shield className="w-5 h-5 text-green-700" />
                              <div className="text-sm">
                                <div className="font-semibold text-gray-900">Hohe Deckung</div>
                                <div className="text-gray-600">sinnvoll & wichtig</div>
                              </div>
                            </div>
                          </div>
                        </>
                      }
                      right={
                        <div className="relative">
                          <div className="absolute inset-0 bg-gradient-to-tr from-green-100 to-white rounded-2xl" />
                          <div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                            <img
                              src={assetUrl('iStock-956005062.jpg')}
                              alt="Haftpflicht Familie"
                              className="w-full h-[240px] 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">
                                <Shield className="w-4 h-4" />
                                <span>Alltag, Spiel, Missgeschick</span>
                              </div>
                              <div className="mt-2 text-sm text-gray-600">Tarifcheck – schnell und fair.</div>
                            </div>
                          </div>
                        </div>
                      }
                    />
                  </TabsContent>

                  <TabsContent value="details" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Worauf achten?</h3>
                          <p className="mt-2 text-gray-600">
                            Deckungssumme, deliktunfähige Kinder, Mietsachschäden, Schlüsselverlust, Forderungsausfalldeckung.
                          </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">
                                  <Shield className="w-5 h-5 text-green-700" />
                                  Deliktunfähig
                                </CardTitle>
                                <CardDescription>Absicherung bei Schäden durch kleine Kinder.</CardDescription>
                              </CardHeader>
                            </Card>
                            <Card className="border-gray-200">
                              <CardHeader>
                                <CardTitle className="text-base flex items-center gap-2">
                                  <Shield className="w-5 h-5 text-green-700" />
                                  Schlüssel/Miete
                                </CardTitle>
                                <CardDescription>Wichtige Bausteine im Alltag.</CardDescription>
                              </CardHeader>
                            </Card>
                          </div>
                        </>
                      }
                      right={
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Tipp</CardTitle>
                            <CardDescription>Deckungssumme nicht zu niedrig</CardDescription>
                          </CardHeader>
                          <CardContent className="text-sm text-gray-700">Heute sind 10–50 Mio. € häufig sinnvoll.</CardContent>
                        </Card>
                      }
                    />
                  </TabsContent>

                  <TabsContent value="form" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
                          <p className="mt-2 text-gray-600">Wir vergleichen passende Tarife für deine Familie.</p>

                          <div className="mt-4 flex flex-col sm:flex-row gap-3">
                            <Link to="/contact" className="inline-flex">
                              <Button className="bg-green-700 hover:bg-green-800">Kontaktformular öffnen</Button>
                            </Link>
                            <Button variant="outline" className="gap-2" onClick={() => window.print()}>
                              <Download className="w-4 h-4" />
                              Als PDF speichern
                            </Button>
                          </div>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('iStock-956005062.jpg')} alt="Anfrage">
                          <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-green-700" />
                                <span>Telefon: 0171 / 9864053</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <Mail className="w-4 h-4 text-green-700" />
                                <span>E-Mail: info@finanzen-mizera.de</span>
                              </div>
                            </CardContent>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

                  <TabsContent value="claims" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Schadenmeldung</h3>
                          <p className="mt-2 text-gray-600">Kurz-Checkliste für den Schadenfall.</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-green-700 mt-0.5" />
                              <div>
                                <div className="font-semibold text-gray-900">Daten sichern</div>
                                <div className="text-gray-600 text-sm">Fotos, Zeugen, Ablauf notieren.</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-green-700 mt-0.5" />
                              <div>
                                <div className="font-semibold text-gray-900">Melden</div>
                                <div className="text-gray-600 text-sm">Wir helfen bei der Regulierung.</div>
                              </div>
                            </div>
                          </div>
                        </>
                      }
                      right={
                        <Card className="border-gray-200">
                          <CardHeader>
                            <CardTitle className="text-lg">Hinweis</CardTitle>
                            <CardDescription>Keine Schuldanerkenntnisse</CardDescription>
                          </CardHeader>
                          <CardContent className="text-sm text-gray-700">Keine Zusagen ohne Prüfung. Erst melden.</CardContent>
                        </Card>
                      }
                    />
                  </TabsContent>

                  <TabsContent value="catalog" className="mt-0">
                    <TwoColumnTab
                      left={
                        <>
                          <h3 className="text-2xl font-bold text-gray-900">Ratgeber</h3>
                          <p className="mt-2 text-gray-600">Typische Fragen in Familien.</p>

                          <Card className="mt-6 border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Das Gröbste auf einen Blick</CardTitle>
                              <CardDescription>Beispiele – Details je nach Tarif.</CardDescription>
                            </CardHeader>
                            <CardContent className="text-sm">
                              <div className="space-y-2">
                                {[
                                  'Sind Kinder deliktunfähig mitversichert?',
                                  'Mietsachschäden enthalten?',
                                  'Schlüsselverlust enthalten?',
                                  'Forderungsausfalldeckung vorhanden?',
                                ].map((row) => (
                                  <div key={row} className="flex items-start gap-2">
                                    <CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
                                    <span className="text-gray-900">{row}</span>
                                  </div>
                                ))}
                              </div>
                            </CardContent>
                          </Card>
                        </>
                      }
                      right={
                        <RightImageCard src={assetUrl('iStock-956005062.jpg')} alt="Ratgeber">
                          <Card className="border-gray-200">
                            <CardHeader>
                              <CardTitle className="text-lg">Frage?</CardTitle>
                              <CardDescription>Wir beraten persönlich.</CardDescription>
                            </CardHeader>
                          </Card>
                        </RightImageCard>
                      }
                    />
                  </TabsContent>

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

export default FamilienHaftpflicht;