import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { CheckCircle, Award, Users, Globe } from 'lucide-react';

const About: React.FC = () => {
  const features = [
    {
      icon: Award,
      title: 'Zertifizierte Qualität',
      description: 'TÜV- und CE-zertifizierte Reinigungsroboter nach deutschen Standards',
    },
    {
      icon: Users,
      title: 'Erfahrenes Team',
      description: 'Über 5 Jahre Erfahrung in der Solarbranche',
    },
    {
      icon: Globe,
      title: 'International',
      description: 'Tätig in Deutschland, Türkei und ganz Europa',
    },
  ];

  return (
    <section id="about" className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Image Side */}
          <div className="relative">
            <div className="relative rounded-2xl overflow-hidden shadow-2xl">
              <img 
                src="/technician.jpg" 
                alt="SECKIN ENERJI Techniker" 
                className="w-full h-[500px] object-cover"
              />
            </div>
            
            {/* Experience Badge */}
            <div className="absolute -bottom-6 -right-6 bg-blue-600 text-white p-6 rounded-2xl shadow-xl">
              <div className="text-4xl font-bold">5+</div>
              <div className="text-sm text-blue-100">Jahre Erfahrung</div>
            </div>
          </div>

          {/* Content Side */}
          <div>
            <div className="inline-block bg-blue-100 text-blue-800 px-4 py-1 rounded-full text-sm font-semibold mb-4">
              Über uns
            </div>
            
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
              Ihr Partner für professionelle Solarreinigung
            </h2>
            
            <p className="text-lg text-gray-600 mb-6">
              SECKIN ENERJI ist Ihr Spezialist für effiziente und schonende Reinigung 
              von Solaranlagen. Mit modernster Robotertechnologie und einem erfahrenen 
              Team sorgen wir für maximale Leistung Ihrer Photovoltaikanlage.
            </p>

            <p className="text-gray-600 mb-8">
              Unsere patentierten Reinigungsroboter arbeiten nach den höchsten 
              deutschen Qualitätsstandards und sind TÜV- sowie CE-zertifiziert. 
              So garantieren wir eine schonende und effektive Reinigung Ihrer 
              wertvollen Solaranlage.
            </p>

            <div className="space-y-4 mb-8">
              {[
                'Deionisiertes Wasser für streifenfreie Reinigung',
                'Keine Kratzer oder Mikrorisse durch sanfte Bürsten',
                '10x schneller als manuelle Reinigung',
                'Thermografie-Kontrolle vor und nach der Reinigung',
              ].map((item, index) => (
                <div key={index} className="flex items-center gap-3">
                  <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
                  <span className="text-gray-700">{item}</span>
                </div>
              ))}
            </div>

            {/* Feature Cards */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              {features.map((feature, index) => {
                const Icon = feature.icon;
                return (
                  <Card key={index} className="bg-gray-50 border-0">
                    <CardContent className="p-4 text-center">
                      <Icon className="h-8 w-8 text-blue-600 mx-auto mb-2" />
                      <h4 className="font-semibold text-gray-900 text-sm">{feature.title}</h4>
                      <p className="text-xs text-gray-600 mt-1">{feature.description}</p>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </div>
        </div>

        {/* Before/After Section */}
        <div className="mt-20">
          <div className="text-center mb-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-2">Vorher / Nachher</h3>
            <p className="text-gray-600">Sehen Sie den Unterschied professioneller Reinigung</p>
          </div>
          <div className="rounded-2xl overflow-hidden shadow-xl">
            <img 
              src="/before-after.jpg" 
              alt="Vorher Nachher Solarreinigung" 
              className="w-full h-auto"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default About;