'use client';

import React from 'react';
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';
import { Reveal } from './Reveal';
import { TechBackground } from './TechBackground';
import { Counter } from './Counter';
import { Button } from './Button';

export default function About() {
  return (
    <div className="overflow-hidden relative">
      {/* Hero Section */}
      <section className="relative min-h-[60vh] flex items-center pt-32 pb-20 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <div 
            className="absolute inset-0 bg-cover bg-center"
            style={{ backgroundImage: 'url("/media/drums/iStock-487538226 (1).jpg")' }}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
          <TechBackground />
        </div>

        <div className="container-custom relative z-10">
          <div className="text-left relative">
            <Counter value={1} className="section-number" />
            <Reveal delay={0.1}>
              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
                Über uns
              </span>
            </Reveal>
            <Reveal delay={0.2}>
              <h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
                Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
              </h1>
            </Reveal>
            <Reveal delay={0.3}>
              <p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8">
                MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Content Section */}
      <section className="bg-white relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <div className="section-number">02</div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <Reveal direction="right">
              <div className="space-y-6 text-lg text-slate-600 leading-relaxed relative">
                <div className="absolute -left-4 top-0 w-1 h-full bg-accent/10" />
                <p>
                  Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
                </p>
                <p>
                  Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
                </p>
              </div>
            </Reveal>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {[
                { name: 'Michael Bodemer', role: 'Geschäftsführung & Inhaber', linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/' },
                { name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
              ].map((person, i) => (
                <Reveal key={i} delay={i * 0.1}>
                  <div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300 relative overflow-hidden tech-card-border">
                    <div className="flex justify-between items-start mb-4 relative z-10">
                      <h3 className="text-xl font-bold text-primary">{person.name}</h3>
                      <a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
                        <Linkedin size={20} />
                      </a>
                    </div>
                    <p className="text-accent text-sm font-bold uppercase tracking-wider relative z-10">{person.role}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Manifest Section */}
      <section className="bg-slate-950 text-accent relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <Counter value={3} className="section-number !text-white/5" />
          <Reveal className="mb-20">
            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Werte</span>
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Unser Manifest</h2>
            <p className="text-slate-400 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              { icon: Award, title: 'Kompetenz', desc: 'Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how in modernsten Anlagen.' },
              { icon: Clock, title: 'Verfügbarkeit', desc: 'Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen.' },
              { icon: Lightbulb, title: 'Lösungen', desc: 'Wir stellen die richtigen Fragen, um die technisch und wirtschaftlich beste Lösung zu finden.' },
              { icon: Truck, title: 'Logistik', desc: 'Von der Fertigungsüberwachung bis zum termingerechten Fracht-Tracking.' },
              { icon: MessageSquare, title: 'Offenheit', desc: 'Wir hören zu und passen unsere Prozesse kontinuierlich an Ihren Erfolg an.' },
              { icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="bg-white/5 p-10 rounded-3xl border border-white/10 group hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix relative overflow-hidden">
                  <div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
                  <div className="text-accent mb-6">
                    <item.icon size={32} />
                  </div>
                  <h4 className="text-xl font-bold text-white mb-4">{i + 1}. {item.title}</h4>
                  <p className="text-slate-400 leading-relaxed">{item.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-white relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <div className="section-number">04</div>
          <Reveal>
            <div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden group">
              <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
              <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
              <div className="relative z-10 max-w-2xl">
                <h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
                  Bereit für Ihr nächstes Projekt?
                </h2>
                <p className="text-slate-400 text-xl mb-12">
                  Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
                </p>
                <Button href="/kontakt" variant="accent" showArrow className="!px-10 !py-5 text-lg">
                  Jetzt Kontakt aufnehmen
                </Button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}