import React from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import { Database, Settings, LayoutDashboard, Users, CheckCircle2 } from 'lucide-react';
import { useLanguage } from '@/contexts/LanguageContext';

const ServicesPage = () => {
  const { t } = useLanguage();

  const services = [
    {
      id: 'sapqm-optimierung',
      icon: Database,
      title: t('services.items.sapqm.title'),
      description: t('services.items.sapqm.description'),
      features: t('services.items.sapqm.features'),
    },
    {
      id: 'caqnet-einfuehrung',
      icon: Settings,
      title: t('services.items.caqnet.title'),
      description: t('services.items.caqnet.description'),
      features: t('services.items.caqnet.features'),
    },
    {
      id: 'restrukturierung-qm',
      icon: LayoutDashboard,
      title: t('services.items.restructuring.title'),
      description: t('services.items.restructuring.description'),
      features: t('services.items.restructuring.features'),
    },
    {
      id: 'keyuser-entwicklung',
      icon: Users,
      title: t('services.items.keyuser.title'),
      description: t('services.items.keyuser.description'),
      features: t('services.items.keyuser.features'),
    },
  ];

  return (
    <>
      <Helmet>
        <title>{t('meta.services.title')}</title>
        <meta
          name="description"
          content={t('meta.services.description')}
        />
      </Helmet>

      <div className="min-h-screen pt-20 bg-charcoal" role="main" id="main-content" aria-label="Services">
        {/* Hero Section */}
        <section 
          className="bg-gradient-to-br from-charcoal to-teal text-white py-20"
          role="banner"
          aria-label="Services Header"
        >
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="max-w-4xl mx-auto text-center"
            >
              <h1 className="mb-6">{t('services.hero.title')}</h1>
              <p className="text-xl text-silver/90 leading-relaxed">
                {t('services.hero.subtitle')}
              </p>
            </motion.div>
          </div>
        </section>

        {/* Services Details */}
        <section className="py-16 bg-charcoal">
          <div className="container mx-auto px-4">
            <div className="space-y-20">
              {services.map((service, index) => (
                <motion.div
                  key={service.id}
                  id={service.id}
                  initial={{ opacity: 0, y: 40 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6 }}
                  className={`grid lg:grid-cols-2 gap-12 items-center ${
                    index % 2 === 1 ? 'lg:flex-row-reverse' : ''
                  }`}
                  role="article"
                  aria-labelledby={`service-title-${service.id}`}
                >
                  <div className={index % 2 === 1 ? 'lg:order-2' : ''}>
                    <div className="w-20 h-20 bg-gradient-to-br from-teal to-charcoal-light rounded-xl flex items-center justify-center mb-6 border border-silver/10" aria-hidden="true">
                      <service.icon className="w-10 h-10 text-silver" aria-hidden="true" />
                    </div>
                    <h2 id={`service-title-${service.id}`} className="text-white mb-4">{service.title}</h2>
                    <p className="text-xl text-silver/80 leading-relaxed mb-8">
                      {service.description}
                    </p>
                  </div>

                  <div className={index % 2 === 1 ? 'lg:order-1' : ''}>
                    <div className="glassmorphism bg-teal/40 rounded-xl shadow-lg p-8 border border-silver/10">
                      <h3 className="text-2xl text-white mb-6">{t('services.contentTitle')}</h3>
                      <ul className="space-y-4" role="list">
                        {service.features.map((feature, idx) => (
                          <li key={idx} className="flex items-start gap-3">
                            <CheckCircle2 className="w-6 h-6 text-emerald-400 flex-shrink-0 mt-1" aria-hidden="true" />
                            <span className="text-silver/80">{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </div>
    </>
  );
};

export default ServicesPage;