mb-grid-solutions.com/src/pages/Home.tsx

import { Link } from 'react-router-dom';
import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2 } from 'lucide-react';

const Home = () => (
  <div className="home-page">
    <section
      className="hero"
      style={{
        minHeight: 'clamp(70vh, 80vh, 90vh)',
        display: 'flex',
        alignItems: 'center',
        background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/cables/HS Kabel 2.jpg")',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        position: 'relative',
        overflow: 'hidden',
        padding: 'clamp(2rem, 6vw, 4rem) 0',
        justifyContent: 'flex-start'
      }}
    >
      <div className="container" style={{ position: 'relative', zIndex: 1, margin: '0 auto', display: 'flex', justifyContent: 'flex-start', paddingLeft: 0 }}>
        <div className="hero-content" style={{ maxWidth: '700px', textAlign: 'left', paddingLeft: 0, marginLeft: 0 }}>
          <span className="badge">Engineering Excellence</span>
          <h1 style={{ marginBottom: 'var(--spacing-lg)' }}>
            Spezialisierter Partner für Energiekabelprojekte
          </h1>
          <p style={{
            fontSize: 'clamp(1.0625rem, 2.5vw, 1.2rem)',
            marginBottom: 'var(--spacing-2xl)',
            color: 'var(--text-secondary)',
            lineHeight: 1.6,
            maxWidth: '600px'
          }}>
            Herstellerneutrale technische Beratung ihrer Projekte für Mittel - und Hochspannungsnetze bis zu 110 kV
          </p>
          <div className="hero-actions" style={{
            display: 'flex',
            gap: 'var(--spacing-lg)',
            alignItems: 'center',
            flexWrap: 'wrap'
          }}>
            <Link to="/kontakt" className="cta-button" aria-label="Projekt anfragen">
              Projekt anfragen <ArrowRight size={18} strokeWidth={2.5} />
            </Link>
            <Link
              to="/ueber-uns"
              className="secondary-link"
              style={{
                fontWeight: 700,
                fontSize: '0.8rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                display: 'flex',
                alignItems: 'center',
                gap: '0.5rem',
                transition: 'all var(--transition-fast)'
              }}
              aria-label="Mehr über uns erfahren"
            >
              Mehr erfahren <ArrowRight size={16} strokeWidth={2.5} />
            </Link>
          </div>
        </div>
      </div>
    </section>

    <section style={{ background: '#f8fafc' }}>
      <div className="container">
        <div className="section-header" style={{ marginBottom: 'clamp(3rem, 8vw, 5rem)' }}>
          <span className="badge">Portfolio</span>
          <h2 style={{ border: 'none', padding: 0 }}>Unsere Leistungen</h2>
          <p style={{
            color: 'var(--text-secondary)',
            maxWidth: '600px',
            fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
            lineHeight: 1.65
          }}>
            Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion
          </p>
        </div>
        <div className="grid portfolio-grid" style={{
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 'var(--spacing-xl)'
        }}>
          {[
            { icon: <Zap size={32} strokeWidth={2} />, title: 'Technische Beratung', desc: 'Individuelle Konzepte, Vergleiche, Risikobetrachtung und Empfehlungen für Ihre Kabelinfrastruktur.' },
            { icon: <Shield size={32} strokeWidth={2} />, title: 'Projektbegleitung', desc: 'Trotz bester Planung entstehen bei der Verlegung und Installation oft zusätzliche Herausforderungen, wo wir sie gerne begleiten' },
            { icon: <BarChart3 size={32} strokeWidth={2} />, title: 'Produktbeschaffung', desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl in Hinblick auf Qualität, Lieferzeit, Preis und Nachhaltigkeit' }
          ].map((item, i) => (
            <div key={i} className="card portfolio-card">
              <div style={{
                color: 'var(--accent-green)',
                marginBottom: 'var(--spacing-lg)'
              }}>
                {item.icon}
              </div>
              <h3 style={{ marginBottom: 'var(--spacing-md)' }}>{item.title}</h3>
              <p style={{
                color: 'var(--text-secondary)',
                lineHeight: 1.7,
                fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
              }}>
                {item.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section style={{ background: 'white' }}>
      <div className="container">
        <div className="grid split-grid" style={{
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          alignItems: 'center',
          gap: 'clamp(2rem, 6vw, 4rem)'
        }}>
          <img
            src="/media/cables/HS Kabel.png"
            alt="Technical Engineering and Cable Infrastructure"
            className="split-img"
            style={{
              width: '100%',
              height: 'clamp(280px, 50vw, 400px)',
              objectFit: 'cover',
              marginBottom: 0,
              borderRadius: '12px'
            }}
            loading="lazy"
          />
          <div className="split-content">
            <span className="badge">Expertise</span>
            <h2>Anwendungen & Zielgruppen</h2>
            <p style={{
              marginBottom: 'var(--spacing-2xl)',
              color: 'var(--text-secondary)',
              fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
              lineHeight: 1.65
            }}>
              Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.
            </p>
            <div className="grid target-grid" style={{
              gridTemplateColumns: '1fr 1fr',
              gap: 'var(--spacing-md)'
            }}>
              {[
                'Energieversorger',
                'Ingenieurbüros',
                'Tiefbauunternehmen',
                'Industrie',
                'Projektierer EE',
                'Planungsbüros'
              ].map((item, i) => (
                <div
                  key={i}
                  className="target-item"
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '0.75rem',
                    fontSize: 'clamp(0.875rem, 2vw, 0.95rem)',
                    fontWeight: 600,
                    color: 'var(--primary-color)'
                  }}
                >
                  <CheckCircle2 size={18} strokeWidth={2.5} style={{ color: 'var(--accent-green)', flexShrink: 0 }} />
                  {item}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>

    <section style={{
      background: 'linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url("/media/drums/iStock-487538226 (1).jpg")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      color: 'white',
      padding: 'clamp(4rem, 10vw, 6rem) 0'
    }}>
      <div className="container">
        <div className="section-header" style={{ marginBottom: 'clamp(3rem, 8vw, 5rem)' }}>
          <span className="badge" style={{ color: 'white', opacity: 0.6 }}>Expertise</span>
          <h2 style={{ color: 'white', border: 'none', padding: 0 }}>Technische Spezifikationen</h2>
        </div>
        <div className="grid spec-grid" style={{
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 'var(--spacing-xl)'
        }}>
          {[
            { label: 'Kabeltypen im Hochspannungsbereich wie beispielsweise', value: 'N2XS(FL)2Y, N2X(F)KLD2Y, NA2XS(FL)2Y, NA2X(F)KLD2Y', desc: 'Umfassende Expertise des optimalen Designs gängiger Hochspannungskabel.' },
            { label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für die 110-kV-Ebene und komplexe Mittelspannungsprojekte.' },
            { label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Millikenleiter', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
          ].map((item, i) => (
            <div
              key={i}
              className="spec-card"
              style={{
                background: 'rgba(255,255,255,0.05)',
                padding: 'var(--spacing-2xl)',
                border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: '16px'
              }}
            >
              <h4 style={{
                fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
                textTransform: 'uppercase',
                color: 'var(--accent-green)',
                marginBottom: 'var(--spacing-md)',
                letterSpacing: '0.2em',
                fontWeight: 700
              }}>
                {item.label}
              </h4>
              <p style={{
                fontWeight: 700,
                fontSize: 'clamp(1rem, 2.5vw, 1.15rem)',
                marginBottom: 'var(--spacing-md)',
                color: 'white',
                lineHeight: 1.4
              }}>
                {item.value}
              </p>
              <p style={{
                fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                color: 'rgba(255,255,255,0.6)',
                lineHeight: 1.7
              }}>
                {item.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section style={{ background: 'white' }}>
      <div className="container">
        <div className="section-header" style={{ marginBottom: 'clamp(3rem, 8vw, 5rem)' }}>
          <span className="badge">Werte</span>
          <h2 style={{ border: 'none', padding: 0 }}>Unsere Leitprinzipien</h2>
        </div>
        <div className="grid principles-grid" style={{
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 'var(--spacing-2xl)'
        }}>
          {[
            { title: 'Exzellenz', desc: 'Höchste technische Präzision in jedem Detail. Wir suchen die optimale Lösung in Einklang mit Normen, technischen Spezifikation und den Umgebungsparametern.' },
            { title: 'Nachhaltigkeit', desc: 'Zukunftssichere Lösungen für die Infrastruktur. Wir denken in Lebenszyklen und Zuverlässigkeit.' },
            { title: 'Transparenz', desc: 'Ehrliche Beratung auf Augenhöhe. Wir kommunizieren klar und herstellerneutral.' }
          ].map((item, i) => (
            <div
              key={i}
              className="principle-item"
              style={{
                borderLeft: '4px solid var(--accent-green)',
                paddingLeft: 'var(--spacing-xl)'
              }}
            >
              <h3 style={{
                marginBottom: 'var(--spacing-md)',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                fontSize: 'clamp(1rem, 2.5vw, 1.1rem)'
              }}>
                {item.title}
              </h3>
              <p style={{
                color: 'var(--text-secondary)',
                lineHeight: 1.75,
                fontSize: 'clamp(0.9375rem, 2vw, 1rem)'
              }}>
                {item.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section
      className="cta-section"
      style={{
        background: 'var(--primary-color)',
        padding: 'clamp(3rem, 8vw, 6rem) 0',
        position: 'relative',
        overflow: 'hidden'
      }}
    >
      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'left' }}>
        <h2
          className="no-underline"
          style={{
            color: 'white',
            border: 'none',
            padding: 0,
            marginBottom: 'var(--spacing-lg)',
            fontSize: 'clamp(1.5rem, 6vw, 2.5rem)',
            lineHeight: 1.2,
            position: 'relative',
            textAlign: 'left'
          }}
        >
          Bereit für Ihr nächstes Projekt?
        </h2>
        <p style={{
          color: 'rgba(255,255,255,0.85)',
          marginBottom: 'var(--spacing-2xl)',
          fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
          maxWidth: '700px',
          margin: '0 0 var(--spacing-2xl) 0',
          lineHeight: 1.65,
          textAlign: 'left'
        }}>
          Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
        </p>
        <Link to="/kontakt" className="cta-button" aria-label="Jetzt Kontakt aufnehmen">
          Jetzt Kontakt aufnehmen <ArrowRight size={18} strokeWidth={2.5} />
        </Link>
      </div>
    </section>
  </div>
);

export default Home;