import { motion } from 'framer-motion';
import { Target, Network, Award, Clock, Lightbulb, Truck, MessageSquare, ShieldCheck } from 'lucide-react';

const About = () => (
  <div>
    <section style={{ background: 'white' }}>
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', alignItems: 'center', gap: '4rem' }}>
          <div>
            <h1 className="no-underline">Über uns</h1>
            <p style={{ fontSize: '1.25rem', color: 'var(--text-secondary)', marginBottom: '2rem', lineHeight: 1.5 }}>
              Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
            </p>
            <p style={{ marginBottom: '1.5rem' }}>
              MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse, der mit jahrzehntelanger Erfahrung und einem klaren Blick für zukunftsweisende Entwicklungen komplexe Projekte sicher zum Ziel führt.
            </p>
            <p>
              Unsere Wurzeln liegen in der tiefen praktischen Erfahrung. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV und darüber hinaus zu realisieren.
            </p>
          </div>
          <div className="img-placeholder" style={{ height: '500px', marginBottom: 0 }}>
            [ Engineering Excellence Visualization ]
          </div>
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
          <h2 className="no-underline">Die Köpfe hinter MB Grid Solution</h2>
          <p style={{ color: 'var(--text-secondary)' }}>Expertise, die Energie zum Laufen bringt.</p>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}>
          <div className="card">
            <div style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}>
              <div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
              <div>
                <h3 style={{ marginBottom: '0.25rem' }}>Michael Bodemer</h3>
                <p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Technische Leitung</p>
              </div>
            </div>
            <p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}>
              „Herausforderungen sind da, um gelöst zu werden – nicht, um über ihre Komplexität zu diskutieren.“
            </p>
            <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
              Michael Bodemer ist der Experte für komplexe Kabelnetze. Mit seinem scharfen Blick für praktikable Lösungen treibt er Projekte in der Planung und technischen Umsetzung voran. Er stellt sicher, dass für jedes Vorhaben die optimalen Komponenten ausgewählt werden.
            </p>
          </div>

          <div className="card">
            <div style={{ display: 'flex', gap: '2rem', marginBottom: '1.5rem' }}>
              <div style={{ width: '120px', height: '120px', background: 'var(--secondary-bg)', flexShrink: 0 }}></div>
              <div>
                <h3 style={{ marginBottom: '0.25rem' }}>Klaus Mintel</h3>
                <p style={{ color: 'var(--accent-green)', fontWeight: 600, fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Projektmanagement</p>
              </div>
            </div>
            <p style={{ fontStyle: 'italic', marginBottom: '1.5rem', color: 'var(--primary-color)', fontWeight: 500 }}>
              „Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.“
            </p>
            <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
              Klaus Mintel bewahrt auch bei komplexesten Anforderungen den Weitblick. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er für reibungslose Abläufe. Er bringt technische Themen präzise auf den Punkt und sichert den Projekterfolg.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section style={{ background: 'white' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: '5rem' }}>
          <h2 className="no-underline">Unser Manifest</h2>
          <p style={{ color: 'var(--text-secondary)' }}>Werte, die unsere tägliche Arbeit leiten.</p>
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '3rem' }}>
          <div style={{ display: 'flex', gap: '1.5rem' }}>
            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Award size={32} /></div>
            <div>
              <h4 style={{ marginBottom: '0.5rem' }}>1. Kompetenz</h4>
              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.</p>
            </div>
          </div>
          <div style={{ display: 'flex', gap: '1.5rem' }}>
            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Clock size={32} /></div>
            <div>
              <h4 style={{ marginBottom: '0.5rem' }}>2. Verfügbarkeit</h4>
              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.</p>
            </div>
          </div>
          <div style={{ display: 'flex', gap: '1.5rem' }}>
            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Lightbulb size={32} /></div>
            <div>
              <h4 style={{ marginBottom: '0.5rem' }}>3. Lösungen</h4>
              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung.</p>
            </div>
          </div>
          <div style={{ display: 'flex', gap: '1.5rem' }}>
            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><Truck size={32} /></div>
            <div>
              <h4 style={{ marginBottom: '0.5rem' }}>4. Logistik & Überwachung</h4>
              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.</p>
            </div>
          </div>
          <div style={{ display: 'flex', gap: '1.5rem' }}>
            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><MessageSquare size={32} /></div>
            <div>
              <h4 style={{ marginBottom: '0.5rem' }}>5. Offenheit</h4>
              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.</p>
            </div>
          </div>
          <div style={{ display: 'flex', gap: '1.5rem' }}>
            <div style={{ color: 'var(--accent-green)', flexShrink: 0 }}><ShieldCheck size={32} /></div>
            <div>
              <h4 style={{ marginBottom: '0.5rem' }}>6. Zuverlässigkeit</h4>
              <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist das Fundament unserer Zusammenarbeit.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="card" style={{ background: 'var(--primary-color)', color: 'white', textAlign: 'center', padding: '4rem' }}>
          <h2 style={{ color: 'white', border: 'none', padding: 0, marginBottom: '1.5rem' }}>Bereit für Ihr nächstes Projekt?</h2>
          <p style={{ marginBottom: '2.5rem', opacity: 0.9, fontSize: '1.1rem' }}>Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.</p>
          <a href="/kontakt" className="cta-button" style={{ background: 'white', color: 'var(--primary-color)' }}>Jetzt Kontakt aufnehmen</a>
        </div>
      </div>
    </section>
  </div>
);

export default About;