import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck } from 'lucide-react';

export default function About() {
  return (
    <div>
      <section style={{
        background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/drums/iStock-487538226 (1).jpg")',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        minHeight: 'clamp(60vh, 70vh, 80vh)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-start'
      }}>
        <div className="container" style={{ margin: '0 auto', display: 'flex', justifyContent: 'flex-start' }}>
          <div className="about-hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
            <h1 className="no-underline">Über uns</h1>
            <p style={{
              fontSize: 'clamp(1.125rem, 2.5vw, 1.25rem)',
              color: 'var(--text-secondary)',
              marginBottom: 'var(--spacing-xl)',
              lineHeight: 1.6
            }}>
              Wir verbinden Energie, Know-how und Innovation, um die Infrastruktur der Zukunft zu gestalten.
            </p>
            <p style={{
              marginBottom: 'var(--spacing-lg)',
              lineHeight: 1.7,
              fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
            }}>
              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 style={{
              lineHeight: 1.7,
              fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
            }}>
              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 und bei Bedarf darüber hinaus zu realisieren.
            </p>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{
            textAlign: 'center',
            marginBottom: 'clamp(3rem, 6vw, 4rem)'
          }}>
            <h2 className="no-underline">Die Köpfe und Koordinatoren hinter MB Grid Solution</h2>
          </div>
          <div className="grid team-grid" style={{
            gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
            gap: 'var(--spacing-xl)'
          }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
                <h3 style={{ marginBottom: 0 }}>Michael Bodemer</h3>
                <a
                  href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: '#0077b5', display: 'flex' }}
                  aria-label="Michael Bodemer auf LinkedIn"
                >
                  <Linkedin size={20} />
                </a>
              </div>
              <p style={{
                color: 'var(--accent-green)',
                fontWeight: 600,
                fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
                textTransform: 'uppercase',
                letterSpacing: '0.05em',
              }}>
                Geschäftsführung und Inhaber
              </p>
            </div>

            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }}>
                <h3 style={{ marginBottom: 0 }}>Klaus Mintel</h3>
                <a
                  href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: '#0077b5', display: 'flex' }}
                  aria-label="Klaus Mintel auf LinkedIn"
                >
                  <Linkedin size={20} />
                </a>
              </div>
              <p style={{
                color: 'var(--accent-green)',
                fontWeight: 600,
                fontSize: 'clamp(0.8125rem, 2vw, 0.85rem)',
                textTransform: 'uppercase',
                letterSpacing: '0.05em',
              }}>
                Geschäftsführung
              </p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: 'white' }}>
        <div className="container">
          <div style={{
            textAlign: 'center',
            marginBottom: 'clamp(3rem, 8vw, 5rem)'
          }}>
            <h2 className="no-underline">Unser Manifest</h2>
            <p style={{
              color: 'var(--text-secondary)',
              fontSize: 'clamp(1rem, 2.5vw, 1.1rem)'
            }}>
              Werte, die unsere tägliche Arbeit leiten.
            </p>
          </div>
          <div className="grid manifest-grid" style={{
            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
            gap: 'var(--spacing-2xl)'
          }}>
            <div className="manifest-item" style={{
              display: 'flex',
              gap: 'var(--spacing-lg)'
            }}>
              <div style={{
                color: 'var(--accent-green)',
                flexShrink: 0
              }}>
                <Award size={32} strokeWidth={2} />
              </div>
              <div>
                <h4 style={{
                  marginBottom: 'var(--spacing-xs)',
                  fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                  fontWeight: 600
                }}>
                  1. Kompetenz
                </h4>
                <p style={{
                  fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                  color: 'var(--text-secondary)',
                  lineHeight: 1.7
                }}>
                  Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.
                </p>
              </div>
            </div>
            <div className="manifest-item" style={{
              display: 'flex',
              gap: 'var(--spacing-lg)'
            }}>
              <div style={{
                color: 'var(--accent-green)',
                flexShrink: 0
              }}>
                <Clock size={32} strokeWidth={2} />
              </div>
              <div>
                <h4 style={{
                  marginBottom: 'var(--spacing-xs)',
                  fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                  fontWeight: 600
                }}>
                  2. Verfügbarkeit
                </h4>
                <p style={{
                  fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                  color: 'var(--text-secondary)',
                  lineHeight: 1.7
                }}>
                  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 className="manifest-item" style={{
              display: 'flex',
              gap: 'var(--spacing-lg)'
            }}>
              <div style={{
                color: 'var(--accent-green)',
                flexShrink: 0
              }}>
                <Lightbulb size={32} strokeWidth={2} />
              </div>
              <div>
                <h4 style={{
                  marginBottom: 'var(--spacing-xs)',
                  fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                  fontWeight: 600
                }}>
                  3. Lösungen
                </h4>
                <p style={{
                  fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                  color: 'var(--text-secondary)',
                  lineHeight: 1.7
                }}>
                  Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung. Und reduziert Risiken.
                </p>
              </div>
            </div>
            <div className="manifest-item" style={{
              display: 'flex',
              gap: 'var(--spacing-lg)'
            }}>
              <div style={{
                color: 'var(--accent-green)',
                flexShrink: 0
              }}>
                <Truck size={32} strokeWidth={2} />
              </div>
              <div>
                <h4 style={{
                  marginBottom: 'var(--spacing-xs)',
                  fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                  fontWeight: 600
                }}>
                  4. Logistik & Überwachung
                </h4>
                <p style={{
                  fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                  color: 'var(--text-secondary)',
                  lineHeight: 1.7
                }}>
                  Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.
                </p>
              </div>
            </div>
            <div className="manifest-item" style={{
              display: 'flex',
              gap: 'var(--spacing-lg)'
            }}>
              <div style={{
                color: 'var(--accent-green)',
                flexShrink: 0
              }}>
                <MessageSquare size={32} strokeWidth={2} />
              </div>
              <div>
                <h4 style={{
                  marginBottom: 'var(--spacing-xs)',
                  fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                  fontWeight: 600
                }}>
                  5. Offenheit
                </h4>
                <p style={{
                  fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                  color: 'var(--text-secondary)',
                  lineHeight: 1.7
                }}>
                  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 className="manifest-item" style={{
              display: 'flex',
              gap: 'var(--spacing-lg)'
            }}>
              <div style={{
                color: 'var(--accent-green)',
                flexShrink: 0
              }}>
                <ShieldCheck size={32} strokeWidth={2} />
              </div>
              <div>
                <h4 style={{
                  marginBottom: 'var(--spacing-xs)',
                  fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                  fontWeight: 600
                }}>
                  6. Zuverlässigkeit
                </h4>
                <p style={{
                  fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                  color: 'var(--text-secondary)',
                  lineHeight: 1.7
                }}>
                  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: 'left',
            padding: 'clamp(3rem, 6vw, 4rem)'
          }}>
            <h2
              className="no-underline"
              style={{
                color: 'white',
                border: 'none',
                padding: 0,
                marginBottom: 'var(--spacing-lg)',
                fontSize: 'clamp(1.5rem, 6vw, 2rem)',
                position: 'relative',
                textAlign: 'left'
              }}
            >
              Bereit für Ihr nächstes Projekt?
            </h2>
            <p style={{
              marginBottom: 'var(--spacing-2xl)',
              opacity: 0.9,
              fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
              lineHeight: 1.65,
              textAlign: 'left'
            }}>
              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)'
              }}
              aria-label="Jetzt Kontakt aufnehmen"
            >
              Jetzt Kontakt aufnehmen
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}