import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Heart, Shield, Plane, ArrowRight } from 'lucide-react';
import Layout from '@/components/Layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import Disclaimer from '@/components/Disclaimer';

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

  // Add SEO metadata for search
  useEffect(() => {
    document.title = 'Gesundheitsvorsorge - Agentur Mizera';
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Gesundheitsvorsorge: Umfassende Vorsorge und Prävention für Ihre Gesundheit. Unabhängige Beratung für alle Bereiche der Gesundheitsvorsorge.');
    }
  }, []);

  const healthTopics = [
    {
      title: 'Private Krankenversicherung',
      href: '/private-krankenversicherung',
      image: assetUrl('head_kranken.jpg')
    },
    {
      title: 'Zahnzusatzversicherung',
      href: '/zahnzusatzversicherung',
      image: assetUrl('Fotolia_45263348_S.jpg')
    },
    {
      title: 'Auslandsreisekrankenversicherung',
      href: '/auslandsreisekrankenversicherung',
      image: assetUrl('iStock-637584740.jpg')
    }
  ];

  return (
    <Layout>
      <div className="min-h-screen bg-white">
        {/* Hero Section wie bei anderen Seiten */}
        <div className="relative">
          <div 
            className="h-96 bg-cover bg-center relative"
            style={{ backgroundImage: `url(${assetUrl('iStock-819100588.jpg')})` }}
          >
            <div className="absolute inset-0 bg-gray-900/20" />
            <div className="relative container mx-auto px-4 h-full flex items-center">
              <div className="max-w-3xl">
                <div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
                  <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
                    Gesundheitsvorsorge
                  </h1>
                  <p className="text-xl text-white/90 mb-8 max-w-2xl">
                    Umfassender Schutz für Ihre Gesundheit - im In- und Ausland
                  </p>
                  <div className="flex flex-col sm:flex-row gap-4">
                    <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
                      Jetzt beraten lassen
                      <ArrowRight className="ml-2 w-5 h-5" />
                    </Button>
                    <Button size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
                      Vergleich starten
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Kacheln */}
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">
                Wählen Sie Ihren Versicherungsschutz
              </h2>
              <p className="text-lg text-gray-600 max-w-3xl mx-auto">
                Wir bieten Ihnen maßgeschneiderte Lösungen für alle Bereiche der Gesundheitsvorsorge
              </p>
            </div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
              {healthTopics.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 Gesundheitsvorsorge;