mb-grid-solutions.com/components/AboutContent.tsx

'use client';

import React from 'react';
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
import { motion } from 'framer-motion';
import Link from 'next/link';

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
};

const stagger = {
  animate: {
    transition: {
      staggerChildren: 0.1
    }
  }
};

export default function About() {
  return (
    <div className="overflow-hidden">
      {/* Hero Section */}
      <section className="relative min-h-[60vh] flex items-center pt-32 pb-20">
        <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" />
        </div>

        <div className="container-custom relative z-10">
          <motion.div
            initial="initial"
            animate="animate"
            variants={stagger}
            className="text-left"
          >
            <motion.span 
              variants={fadeInUp}
              className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block"
            >
              Über uns
            </motion.span>
            <motion.h1 
              variants={fadeInUp}
              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
            </motion.h1>
            <motion.p 
              variants={fadeInUp}
              className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8"
            >
              MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
            </motion.p>
          </motion.div>
        </div>
      </section>

      {/* Content Section */}
      <section className="bg-white">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="space-y-6 text-lg text-slate-600 leading-relaxed"
            >
              <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>
            </motion.div>
            <motion.div 
              variants={stagger}
              initial="initial"
              whileInView="animate"
              viewport={{ once: true }}
              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) => (
                <motion.div key={i} variants={fadeInUp} className="card-modern !p-6">
                  <div className="flex justify-between items-start mb-4">
                    <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">{person.role}</p>
                </motion.div>
              ))}
            </motion.div>
          </div>
        </div>
      </section>

      {/* Manifest Section */}
      <section className="bg-slate-50">
        <div className="container-custom">
          <motion.div
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
            variants={fadeInUp}
            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-primary mb-6">Unser Manifest</h2>
            <p className="text-slate-600 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
          </motion.div>

          <motion.div 
            variants={stagger}
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
            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) => (
              <motion.div
                key={i}
                variants={fadeInUp}
                className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix"
              >
                <div className="text-accent mb-6">
                  <item.icon size={32} />
                </div>
                <h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
                <p className="text-slate-600 leading-relaxed">{item.desc}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-white">
        <div className="container-custom">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden"
          >
            <div className="relative z-10">
              <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>
              <Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
                Jetzt Kontakt aufnehmen
                <ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
              </Link>
            </div>
          </motion.div>
        </div>
      </section>
    </div>
  );
}