import React from 'react';
import { Link } from 'react-router-dom';
import { Shield, Heart, Car, Home, Briefcase, Users } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import Layout from '@/components/Layout';
import { Card } from '@/components/ui/card';
import Disclaimer from '@/components/Disclaimer';

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

  const topics = [
    {
      title: t('topics.unfall', 'Unfallversicherung'),
      href: '/unfall',
      image: assetUrl('iStock-970876204.jpg')
    },
    {
      title: t('topics.bu', 'Berufsunfähigkeitsversicherung'),
      href: '/berufsunfaehigkeitsversicherung',
      image: assetUrl('iStock-957363908.jpg')
    },
    {
      title: t('topics.haftpflicht', 'Haftpflichtversicherung'),
      href: '/haftpflichtversicherung',
      image: assetUrl('iStock-943842590.jpg')
    },
    {
      title: t('topics.rechtsschutz', 'Rechtsschutzversicherung'),
      href: '/rechtsschutzversicherung',
      image: assetUrl('Fotolia_8654128_XS.jpg')
    },
    {
      title: t('topics.tierhalter', 'Tierhalterhaftpflicht'),
      href: '/tierhalterhaftpflicht',
      image: assetUrl('iStock-495809266.jpg')
    },
    {
      title: t('topics.dread', 'Dread-Disease Versicherung'),
      href: '/dread-disease-versicherung',
      image: assetUrl('Fotolia_67327775_XS.jpg')
    }
  ];

  return (
    <Layout>
      <div className="min-h-screen bg-white">
        {/* Header */}
        <div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h1 className="text-4xl font-bold text-gray-900 mb-6">
                {t('hero.title', 'Risikoschutz')}
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                {t('hero.subtitle', 'Umfassender Schutz für Sie und Ihre Familie bei unvorhergesehenen Ereignissen')}
              </p>
            </div>
          </div>
        </div>

        {/* Kacheln */}
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-6xl mx-auto">
            <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-110"
                      />
                      <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>
        </div>
      </div>

      <Disclaimer />
    </Layout>
  );
};

export default Risikoschutz;