'use client';

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

export default function Home() {
  const serviceJsonLd = {
    "@context": "https://schema.org",
    "@type": "Service",
    "name": "Technische Beratung für Energiekabelprojekte",
    "provider": {
      "@type": "Organization",
      "name": "MB Grid Solutions GmbH"
    },
    "description": "Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.",
    "areaServed": "Europe",
    "hasOfferCatalog": {
      "@type": "OfferCatalog",
      "name": "Dienstleistungen",
      "itemListElement": [
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Technische Beratung"
          }
        },
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Projektbegleitung"
          }
        },
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Produktbeschaffung"
          }
        }
      ]
    }
  };

  return (
    <div className="overflow-hidden">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceJsonLd) }}
      />
      {/* Hero Section */}
      <section className="relative min-h-[90vh] 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/business/iStock-1068752548.jpg")' }}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40 md:to-transparent" />
        </div>

        <div className="container-custom relative z-10">
          <div className="text-left">
            <Reveal delay={0.1}>
              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
                </span>
                Engineering Excellence
              </span>
            </Reveal>
            
            <Reveal delay={0.2}>
              <h1 className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]">
                Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
              </h1>
            </Reveal>
            
            <Reveal delay={0.3}>
              <p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl">
                Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
              </p>
            </Reveal>
            
            <Reveal delay={0.4}>
              <div className="flex flex-wrap gap-4">
                <Link href="/kontakt" className="btn-accent group">
                  Projekt anfragen 
                  <ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
                </Link>
                <Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
                  Mehr erfahren
                </Link>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <section className="bg-slate-50">
        <div className="container-custom">
          <Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
            <div>
              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span>
              <h2 className="text-4xl md:text-5xl font-bold text-primary mb-6">Unsere Leistungen</h2>
              <p className="text-slate-600 text-lg md:text-xl">
                Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion.
              </p>
            </div>
            <Link href="/ueber-uns" className="text-primary font-bold flex items-center gap-2 hover:text-accent transition-colors group">
              Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
            </Link>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { 
                icon: <Zap size={32} />, 
                title: 'Technische Beratung', 
                desc: 'Individuelle Konzepte, Vergleiche, Risikobetrachtung und Empfehlungen für Ihre Kabelinfrastruktur.' 
              },
              { 
                icon: <Shield size={32} />, 
                title: 'Projektbegleitung', 
                desc: 'Wir begleiten Sie bei der Verlegung und Installation, um Herausforderungen proaktiv zu lösen.' 
              },
              { 
                icon: <BarChart3 size={32} />, 
                title: 'Produktbeschaffung', 
                desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.' 
              }
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="card-modern group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full">
                  <div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors">
                    {item.icon}
                  </div>
                  <h3 className="text-2xl font-bold text-primary mb-4">{item.title}</h3>
                  <p className="text-slate-600 leading-relaxed">
                    {item.desc}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Expertise Section */}
      <section className="bg-white">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
            <Reveal direction="right">
              <div className="relative overflow-hidden rounded-2xl shadow-lg">
                <img
                  src="/media/cables/HS Kabel.png"
                  alt="Technical Engineering"
                  className="w-full h-[400px] md:h-[500px] object-cover hover:scale-105 transition-transform duration-700"
                />
              </div>
            </Reveal>
            <div>
              <Reveal>
                <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span>
                <h2 className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</h2>
                <p className="text-slate-600 text-lg md:text-xl mb-12">
                  Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
                </p>
              </Reveal>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {[
                  'Energieversorger',
                  'Ingenieurbüros',
                  'Tiefbauunternehmen',
                  'Industrie',
                  'Projektierer EE',
                  'Planungsbüros'
                ].map((item, i) => (
                  <Reveal key={i} delay={i * 0.05}>
                    <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group">
                      <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
                        <CheckCircle2 size={16} />
                      </div>
                      <span className="text-primary font-semibold">{item}</span>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Technical Specs Section */}
      <section className="relative py-24 md:py-32 text-white overflow-hidden bg-slate-900">
        <div className="absolute inset-0 opacity-20">
          <img 
            src="/media/drums/iStock-487538226 (1).jpg" 
            alt="Background" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
        </div>
        
        <div className="container-custom relative z-10">
          <Reveal className="mb-20">
            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span>
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
          </Reveal>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y...', desc: 'Umfassende Expertise im Design gängiger Hochspannungskabel.' },
              { label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für komplexe Infrastrukturprojekte.' },
              { label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Milliken', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full">
                  <h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
                    {item.label}
                  </h4>
                  <p className="text-2xl font-bold text-white mb-4 leading-tight">
                    {item.value}
                  </p>
                  <p className="text-slate-400 leading-relaxed">
                    {item.desc}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-white">
        <div className="container-custom">
          <Reveal>
            <div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden">
              <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
                <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="400" cy="0" r="400" stroke="white" strokeWidth="2" />
                  <circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" />
                  <circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" />
                </svg>
              </div>
              
              <div className="relative z-10">
                <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
                  Bereit für Ihr nächstes Projekt?
                </h2>
                <p className="text-slate-300 text-xl mb-12 leading-relaxed">
                  Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
                </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>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}