import React from 'react';
import { Link } from 'react-router-dom';
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
import Layout from '@/components/Layout';
import { Card } from '@/components/ui/card';
import Disclaimer from '@/components/Disclaimer';

const Altersvorsorge = () => {
  const baseUrl = import.meta.env.BASE_URL;
  const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;

  const topics = [
    {
      title: 'Riester-Rente',
      href: '/riester-rente',
      image: assetUrl('iStock-957363908.jpg')
    },
    {
      title: 'Rürup-Rente',
      href: '/ruerup-rente',
      image: assetUrl('iStock-943842590.jpg')
    },
    {
      title: 'Betriebliche Altersvorsorge',
      href: '/betriebliche-altersvorsorge',
      image: assetUrl('Fotolia_8654128_XS.jpg')
    },
    {
      title: 'Private Rentenversicherung',
      href: '/private-rentenversicherung',
      image: assetUrl('iStock-495809266.jpg')
    },
    {
      title: 'Kapitallebensversicherung',
      href: '/kapitallebensversicherung',
      image: assetUrl('Fotolia_67327775_XS.jpg')
    },
    {
      title: 'Fondsgebundene Versicherung',
      href: '/fondsgebundene-versicherung',
      image: assetUrl('iStock-970876204.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">
                Altersvorsorge
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                Sorgen Sie frühzeitig für Ihre finanzielle Zukunft vor
              </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 Altersvorsorge;