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/90 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/90">
              <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"
                  aria-hidden="true"
                >
                  <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"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17 8l4 4m0 0l-4 4m4-4H3"
              />
            </svg>
          </Link>
          <p className="text-white/80 text-sm font-medium">
            {isDe
              ? 'Kostenlose Erstberatung für Ihr Vorhaben.'
              : 'Free initial consultation for your project.'}
          </p>
        </div>
      </div>
    </div>
  );
}
