import React from 'react';
import Link from 'next/link';

interface PowerCTAProps {
  locale: string;
}

export default function PowerCTA({ locale }: PowerCTAProps) {
  const isDe = locale === 'de';

  return (
    <div className="my-16 p-10 md:p-16 bg-neutral-dark rounded-[2rem] shadow-2xl relative overflow-hidden group">
      {/* Industrial background pattern */}
      <div className="absolute inset-0 opacity-10 pointer-events-none">
        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:40px_40px]" />
      </div>
      
      {/* Decorative accent */}
      <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl -mr-32 -mt-32 transition-transform group-hover:scale-110 duration-1000" />
      
      <div className="relative z-10">
        <div className="inline-block px-4 py-1 bg-accent/20 text-accent text-xs font-bold uppercase tracking-[0.2em] rounded-full mb-8">
          {isDe ? 'Lösungen' : 'Solutions'}
        </div>
        
        <h3 className="text-2xl md:text-4xl font-bold text-white mb-8 leading-tight">
          {isDe ? 'Bereit für die' : 'Ready for the'} 
          <span className="text-accent block">{isDe ? 'Energiewende?' : 'Energy Transition?'}</span>
        </h3>
        
        <p className="text-xl text-white/70 mb-10 leading-relaxed max-w-2xl">
          {isDe 
            ? 'Von der Planung von Wind- und Solarparks bis zur Lieferung hochwertiger Energiekabel erwecken wir Ihre Projekte zum Leben.'
            : 'From wind and solar park planning to delivering high-quality energy cables, we bring your projects to life.'
          }
        </p>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
          {[
            isDe ? 'Strategischer Hub für schnelle Lieferung' : 'Strategic hub for fast delivery',
            isDe ? 'Nachhaltige Kabelinfrastruktur' : 'Sustainable cable infrastructure',
            isDe ? 'Expertenberatung für Großprojekte' : 'Expert consulting for large-scale projects',
            isDe ? 'Zertifizierte Qualität nach EU-Standards' : 'Certified quality according to EU standards'
          ].map((item, i) => (
            <div key={i} className="flex items-center gap-4 text-white/80">
              <div className="w-6 h-6 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
                <svg className="w-3 h-3 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <span className="text-sm font-medium">{item}</span>
            </div>
          ))}
        </div>
        
        <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center pt-8 border-t border-white/10">
          <Link
            href={`/${locale}/contact`}
            className="inline-flex items-center gap-3 px-8 py-4 bg-primary text-white font-bold rounded-full hover:bg-primary/90 transition-all shadow-xl hover:shadow-primary/20 transform hover:-translate-y-1 group/btn"
          >
            {isDe ? 'Projekt anfragen' : 'Inquire Project'}
            <svg className="w-5 h-5 transition-transform group-hover/btn:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </Link>
          <p className="text-white/50 text-sm font-medium">
            {isDe ? 'Kostenlose Erstberatung für Ihr Vorhaben.' : 'Free initial consultation for your project.'}
          </p>
        </div>
      </div>
    </div>
  );
}