import React from 'react';
import { useTranslation } from 'react-i18next';
import { Shield, Car, Home, Users, Briefcase, Heart, FileText, CheckCircle, Star, TrendingUp } from 'lucide-react';
import Layout from '@/components/Layout';

const Leistungen = () => {
  const { t } = useTranslation('leistungen');

  const translatedServices = t('services', { returnObjects: true }) as unknown;
  const services: Array<{ title: string; description: string; features: string[] }> = Array.isArray(translatedServices)
    ? (translatedServices as Array<{ title: string; description: string; features: string[] }>)
    : [];
  const serviceIcons = [Car, Home, Users, Heart, Briefcase, FileText];
  const translatedAdvantages = t('advantages', { returnObjects: true }) as unknown;
  const advantages: string[] = Array.isArray(translatedAdvantages) ? (translatedAdvantages as string[]) : [];

  return (
    <Layout>
      <div className="min-h-screen bg-gray-50">
      {/* Content */}
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto">
          
          {/* Services Grid */}
            
            {/* Services Grid */}
            <div className="mb-16">
              <h2 className="text-2xl font-semibold text-gray-900 mb-8 text-center">
                {t('servicesTitle', 'Unsere Versicherungslösungen')}
              </h2>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                {services.map((service, index) => {
                  const Icon = serviceIcons[index] ?? Shield;
                  return (
                    <div key={index} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
                      <div className="flex items-center mb-4">
                        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                          <Icon className="h-6 w-6 text-blue-600" />
                        </div>
                        <h3 className="text-xl font-semibold text-gray-900">{service.title}</h3>
                      </div>
                      
                      <p className="text-gray-600 mb-4">{service.description}</p>
                      
                      <div className="space-y-2">
                        {service.features.map((feature: string, featureIndex: number) => (
                          <div key={featureIndex} className="flex items-center text-sm text-gray-700">
                            <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" />
                            {feature}
                          </div>
                        ))}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Advantages Section */}
          <div className="mb-16">
            <div className="bg-blue-50 rounded-lg p-8">
              <h2 className="text-2xl font-semibold text-gray-900 mb-6 text-center">
                {t('advantagesTitle', 'Warum Agentur Mizera?')}
              </h2>
              
              <div className="grid md:grid-cols-2 gap-6">
                {advantages.map((advantage: string, index: number) => (
                  <div key={index} className="flex items-start space-x-3">
                    <Star className="h-5 w-5 text-blue-600 mt-1 flex-shrink-0" />
                    <p className="text-gray-700">{advantage}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Process Section */}
          <div className="mb-16">
            <h2 className="text-2xl font-semibold text-gray-900 mb-8 text-center">
              {t('processTitle', 'Unser Beratungsprozess')}
            </h2>
            
            <div className="grid md:grid-cols-4 gap-8">
              {[
                { step: '1', title: t('processStep1Title', 'Bedarfsanalyse'), description: t('processStep1Description', 'Gemeinsame Erfassung Ihrer individuellen Bedürfnisse und Wünsche') },
                { step: '2', title: t('processStep2Title', 'Vergleichsanalyse'), description: t('processStep2Description', 'Vergleich führender Versicherungsanbieter auf dem Markt') },
                { step: '3', title: t('processStep3Title', 'Individuelle Empfehlung'), description: t('processStep3Description', 'Präsentation der passenden Versicherungslösungen') },
                { step: '4', title: t('processStep4Title', 'Begleitung'), description: t('processStep4Description', 'Unterstützung bei der Vertragsabwicklung und laufenden Betreuung') }
              ].map((item, index) => (
                <div key={index} className="text-center">
                  <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                    {item.step}
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
                  <p className="text-gray-600 text-sm">{item.description}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Statistics Section */}
          <div className="mb-16">
            <div className="bg-white rounded-lg shadow-md p-8">
              <h2 className="text-2xl font-semibold text-gray-900 mb-8 text-center">
                {t('statisticsTitle', 'Unsere Erfolge in Zahlen')}
              </h2>
              
              <div className="grid md:grid-cols-4 gap-8 text-center">
                <div>
                  <div className="text-3xl font-bold text-blue-600 mb-2">50+</div>
                  <p className="text-gray-600">{t('statistics1', 'Versicherungspartner')}</p>
                </div>
                <div>
                  <div className="text-3xl font-bold text-blue-600 mb-2">1.000+</div>
                  <p className="text-gray-600">{t('statistics2', 'Zufriedene Kunden')}</p>
                </div>
                <div>
                  <div className="text-3xl font-bold text-blue-600 mb-2">15+</div>
                  <p className="text-gray-600">{t('statistics3', 'Jahre Erfahrung')}</p>
                </div>
                <div>
                  <div className="text-3xl font-bold text-blue-600 mb-2">98%</div>
                  <p className="text-gray-600">{t('statistics4', 'Kundenzufriedenheit')}</p>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Section */}
          <div className="bg-gray-100 rounded-lg p-8 text-center">
            <h2 className="text-2xl font-semibold text-gray-900 mb-4">
              {t('contactTitle', 'Persönliche Beratung')}
            </h2>
            <p className="text-gray-600 mb-6">
              {t('contactDescription', 'Lassen Sie sich von unseren Experten beraten und finden Sie die optimale Versicherungslösung für Ihre Bedürfnisse.')}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
                <Shield className="h-5 w-5 mr-2" />
                {t('contactButton', 'Beratung vereinbaren')}
              </button>
              <button className="bg-white text-blue-600 border border-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50 transition-colors flex items-center justify-center">
                <FileText className="h-5 w-5 mr-2" />
                {t('contactButton2', 'Informationsmaterial anfordern')}
              </button>
            </div>
          </div>

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

export default Leistungen;