import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Layout from '@/components/Layout';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import HeroSlider from '@/components/HeroSlider';
import { Shield, Clock, Users, DollarSign, TrendingUp, MapPin, Phone } from 'lucide-react';
import ChatbotHint from '@/components/ChatbotHint';

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

  const topics = [
    {
      title: t('topics.hausrat', 'Hausratversicherung'),
      href: '/hausratversicherung',
      image: assetUrl('iStock-482694353.jpg')
    },
    {
      title: t('topics.wohngebaeude', 'Wohngebäudeversicherung'),
      href: '/wohngebaeudeversicherung',
      image: assetUrl('iStock-928087944.jpg')
    },
    {
      title: t('topics.haftpflicht', 'Haftpflichtversicherung'),
      href: '/haftpflichtversicherung',
      image: assetUrl('iStock-638637534.jpg')
    },
    {
      title: t('topics.tiere', 'Tierversicherung'),
      href: '/tierversicherung',
      image: assetUrl('Kunden Fotos/Facebook- i_jasinski.png')
    },
    {
      title: t('topics.rechtsschutz', 'Rechtsschutzversicherung'),
      href: '/rechtsschutzversicherung',
      image: assetUrl('iStock-1067720324.jpg')
    },
    {
      title: t('topics.elektro', 'Elektrogeräteversicherung'),
      href: '/elektrogeraeteversicherung',
      image: assetUrl('Fotolia_8654128_XS.jpg')
    }
  ];

  return (
    <Layout>
      <HeroSlider
        persistKey="sachversicherung"
        slides={[
          {
            id: 'sachversicherung-1',
            kicker: t('hero.kicker', 'Haus & Wohnung'),
            title: t('hero.title', 'Sachversicherung'),
            subtitle: t('hero.subtitle', 'Schutz für Ihr Hab und Gut - von Hausrat bis Immobilie'),
            imageUrl: assetUrl('iStock-897545934.jpg'),
            imagePosition: 'center 70%',
            ctas: [
              { label: t('hero.primaryCta', 'Beratung'), href: '/contact' },
              { label: t('hero.secondaryCta', 'Leistungen'), href: '/leistungen' },
            ],
          },
        ]}
      />

      <div className="bg-gray-50">

        {/* Kacheln */}
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-10">
              <div className="text-3xl md:text-4xl font-bold text-gray-900">
                {t('tiles.title', 'Unsere Sachversicherungen')}
              </div>
              <div className="mt-3 text-gray-600">
                {t('tiles.subtitle', 'Wählen Sie den passenden Schutz für Haus, Wohnung und Alltag.')}
              </div>
            </div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
              {topics.map((topic, index) => (
                <Link key={index} to={topic.href}>
                  <Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden">
                    <div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
                      <img 
                        src={topic.image} 
                        alt={topic.title}
                        className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-[1.081]"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                      <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
                        <div className="text-xl font-bold">{topic.title}</div>
                      </div>
                    </div>
                  </Card>
                </Link>
              ))}
            </div>

            <div className="mt-14">
              <div className="text-center">
                <div className="text-3xl md:text-4xl font-bold text-gray-900">
                  {t('benefits.title', 'Ihre Vorteile als Privatkunde')}
                </div>
                <div className="mt-3 text-gray-600">
                  {t(
                    'benefits.subtitle',
                    'Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre persönliche Absicherung'
                  )}
                </div>
              </div>

              <div className="mt-8 rounded-2xl border bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm">
                <div className="grid gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
                  <div className="flex gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
                      <Shield className="h-6 w-6" />
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">
                        {t('benefits.items.protection.title', 'Umfassender Schutz')}
                      </div>
                      <div className="text-sm text-gray-600">
                        {t('benefits.items.protection.text', 'Für alle Lebensbereiche')}
                      </div>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
                      <Users className="h-6 w-6" />
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">
                        {t('benefits.items.family.title', 'Familienfreundlich')}
                      </div>
                      <div className="text-sm text-gray-600">
                        {t('benefits.items.family.text', 'Optimale Lösungen für Familien')}
                      </div>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
                      <TrendingUp className="h-6 w-6" />
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">
                        {t('benefits.items.optimization.title', 'Vertragsoptimierung')}
                      </div>
                      <div className="text-sm text-gray-600">
                        {t('benefits.items.optimization.text', 'Bestehende Verträge verbessern')}
                      </div>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
                      <Clock className="h-6 w-6" />
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">
                        {t('benefits.items.fasthelp.title', 'Schnelle Hilfe')}
                      </div>
                      <div className="text-sm text-gray-600">
                        {t('benefits.items.fasthelp.text', 'Rasche Schadenabwicklung')}
                      </div>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
                      <DollarSign className="h-6 w-6" />
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">
                        {t('benefits.items.costs.title', 'Transparente Kosten')}
                      </div>
                      <div className="text-sm text-gray-600">
                        {t('benefits.items.costs.text', 'Keine versteckten Gebühren')}
                      </div>
                    </div>
                  </div>

                  <div className="flex gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
                      <MapPin className="h-6 w-6" />
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">
                        {t('benefits.items.local.title', 'Persönliche Betreuung')}
                      </div>
                      <div className="text-sm text-gray-600">
                        {t('benefits.items.local.text', 'Vor Ort in Ihrer Nähe')}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-10 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-10 text-white shadow-lg">
                <div className="mx-auto max-w-4xl text-center">
                  <div className="text-3xl md:text-4xl font-bold">
                    {t('cta.title', 'Kontaktieren Sie uns')}
                  </div>
                  <div className="mt-3 text-white/90">
                    {t(
                      'cta.subtitle',
                      'Lassen Sie sich unverbindlich zu Ihren Privatkunden-Lösungen beraten.'
                    )}
                  </div>

                  <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
                    <Button asChild variant="secondary" className="w-full sm:w-auto">
                      <a href="tel:+49">
                        <span className="inline-flex items-center gap-2">
                          <Phone className="h-4 w-4" />
                          {t('cta.call', 'Jetzt anrufen')}
                        </span>
                      </a>
                    </Button>

                    <Button asChild className="w-full sm:w-auto bg-white text-blue-700 hover:bg-white/90">
                      <Link to="/contact">{t('cta.contact', 'Kontaktformular')}</Link>
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default Sachversicherung;