'use client';

import Link from 'next/link';
import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2 } from 'lucide-react';

export default function Home() {
  return (
    <div className="bg-bg-color">
      <section
        className="relative min-h-[70vh] md:min-h-[80vh] flex items-center overflow-hidden py-8 md:py-16"
        style={{
          background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/business/iStock-1068752548.jpg")',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      >
        <div className="max-w-[1200px] mx-auto px-4 relative z-10">
          <div className="max-w-[700px]">
            <span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Engineering Excellence</span>
            <h1 className="text-primary text-4xl md:text-6xl font-extrabold mb-6 tracking-tight leading-[1.15]">
              Spezialisierter Partner für Energiekabelprojekte
            </h1>
            <p className="text-text-secondary text-lg md:text-xl leading-relaxed max-w-[600px] mb-10">
              Herstellerneutrale technische Beratung ihrer Projekte für Mittel - und Hochspannungsnetze bis zu 110 kV
            </p>
            <div className="flex flex-wrap gap-6 items-center">
              <Link href="/kontakt" className="bg-primary text-white px-8 py-4 rounded-lg font-bold uppercase tracking-widest text-xs hover:bg-text-primary transition-all flex items-center gap-3">
                Projekt anfragen <ArrowRight size={18} strokeWidth={2.5} />
              </Link>
              <Link
                href="/ueber-uns"
                className="text-primary font-bold text-xs uppercase tracking-widest flex items-center gap-2 hover:text-accent-green transition-all"
              >
                Mehr erfahren <ArrowRight size={16} strokeWidth={2.5} />
              </Link>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-[#f8fafc]">
        <div className="max-w-[1200px] mx-auto px-4">
          <div className="mb-12 md:mb-20">
            <span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Portfolio</span>
            <h2 className="text-primary text-3xl md:text-4xl font-bold mb-6 relative inline-block after:content-[''] after:absolute after:-bottom-3 after:left-0 after:w-12 after:h-1 after:bg-accent-green after:rounded-sm">Unsere Leistungen</h2>
            <p className="text-text-secondary text-lg md:text-xl leading-relaxed max-w-[600px] mt-8">
              Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              { 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="bg-white p-8 md:p-10 border border-secondary-bg rounded-2xl shadow-sm hover:border-primary hover:shadow-md transition-all duration-300">
                <div className="text-accent-green mb-6">
                  {item.icon}
                </div>
                <h3 className="text-primary text-xl font-bold mb-4">{item.title}</h3>
                <p className="text-text-secondary leading-relaxed text-base md:text-lg">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-white">
        <div className="max-w-[1200px] mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 md:gap-16">
            <img
              src="/media/cables/HS Kabel.png"
              alt="Technical Engineering and Cable Infrastructure"
              className="w-full h-[300px] md:h-[400px] object-cover rounded-2xl"
              loading="lazy"
            />
            <div>
              <span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Expertise</span>
              <h2 className="text-primary text-3xl md:text-4xl font-bold mb-6 relative inline-block after:content-[''] after:absolute after:-bottom-3 after:left-0 after:w-12 after:h-1 after:bg-accent-green after:rounded-sm">Anwendungen & Zielgruppen</h2>
              <p className="text-text-secondary text-lg md:text-xl leading-relaxed mb-10 mt-8">
                Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte.
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {[
                  'Energieversorger',
                  'Ingenieurbüros',
                  'Tiefbauunternehmen',
                  'Industrie',
                  'Projektierer EE',
                  'Planungsbüros'
                ].map((item, i) => (
                  <div
                    key={i}
                    className="flex items-center gap-3 p-4 bg-white border border-accent-green/15 border-l-4 border-l-accent-green rounded-xl shadow-sm hover:translate-x-1 transition-all"
                  >
                    <CheckCircle2 size={18} strokeWidth={2.5} className="text-accent-green shrink-0" />
                    <span className="text-primary font-semibold text-sm md:text-base">{item}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="relative py-16 md:py-24 text-white overflow-hidden"
        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',
        }}
      >
        <div className="max-w-[1200px] mx-auto px-4 relative z-10">
          <div className="mb-12 md:mb-20">
            <span className="inline-block text-white/60 text-xs font-bold uppercase tracking-[0.15em] mb-3">Expertise</span>
            <h2 className="text-white text-3xl md:text-4xl font-bold mb-6">Technische Spezifikationen</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              { 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="bg-white/5 p-8 md:p-10 border border-white/10 rounded-2xl backdrop-blur-sm"
              >
                <h4 className="text-[10px] md:text-xs uppercase text-accent-green font-bold tracking-[0.2em] mb-4">
                  {item.label}
                </h4>
                <p className="text-white text-lg md:text-xl font-bold mb-4 leading-tight">
                  {item.value}
                </p>
                <p className="text-white/60 text-sm md:text-base leading-relaxed">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-white">
        <div className="max-w-[1200px] mx-auto px-4">
          <div className="mb-12 md:mb-20">
            <span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Werte</span>
            <h2 className="text-primary text-3xl md:text-4xl font-bold mb-6 relative inline-block after:content-[''] after:absolute after:-bottom-3 after:left-0 after:w-12 after:h-1 after:bg-accent-green after:rounded-sm">Unsere Leitprinzipien</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
            {[
              { 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="border-l-4 border-l-accent-green pl-8"
              >
                <h3 className="text-primary text-lg md:text-xl font-bold uppercase tracking-widest mb-4">
                  {item.title}
                </h3>
                <p className="text-text-secondary leading-relaxed text-base md:text-lg">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="relative py-16 md:py-24 bg-primary overflow-hidden">
        <div className="max-w-[1200px] mx-auto px-4 relative z-10">
          <h2 className="text-white text-3xl md:text-5xl font-bold mb-6 tracking-tight leading-tight">
            Bereit für Ihr nächstes Projekt?
          </h2>
          <p className="text-white/85 text-lg md:text-xl leading-relaxed max-w-[700px] mb-10">
            Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
          </p>
          <Link href="/kontakt" className="inline-flex bg-white text-primary px-8 py-4 rounded-lg font-bold uppercase tracking-widest text-xs hover:bg-accent-green hover:text-white transition-all items-center gap-3">
            Jetzt Kontakt aufnehmen <ArrowRight size={18} strokeWidth={2.5} />
          </Link>
        </div>
      </section>
    </div>
  );
}