"use client";

import { motion } from "framer-motion";
import { CheckCircle2, ArrowRight } from "lucide-react";

export default function WhyChooseUs({ dict }: { dict: any }) {
  const defaultReasons = [
    "Fabrication européenne de qualité supérieure",
    "Conformité aux normes de sécurité militaires",
    "Certifications ISO 9001 & NSA",
    "Expertise technique inégalée",
    "Livraison rapide et sécurisée",
    "Support prioritaire 24/7"
  ];

  const reasons: string[] = dict.whyChooseUs?.reasons || defaultReasons;

  return (
    <section id="about" className="py-24 bg-white">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-16 items-center">
          
          {/* Left: Content */}
          <motion.div 
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-1 bg-brand-accent"></div>
              <span className="text-sm font-bold tracking-widest text-brand-accent uppercase">
                {dict.whyChooseUs?.label || 'À Propos de Nous'}
              </span>
            </div>
            
            <h2 className="text-4xl md:text-5xl font-black text-foreground mb-4 leading-tight">
              {dict.whyChooseUs?.title1 || 'Kobra Shredders'} <br/>
              <span className="text-gray-500">{dict.whyChooseUs?.title2 || 'Made in Italy by Elcoman.'}</span>
            </h2>
            
            <p className="text-lg text-gray-600 mb-8 leading-relaxed font-medium">
              {dict.whyChooseUs?.desc || 'Depuis plus de deux décennies, nous sommes le partenaire de confiance des agences gouvernementales, des organisations militaires et des grandes entreprises. Nos solutions de destruction industrielle Kobra sont conçues pour offrir une sécurité maximale, une durabilité à toute épreuve et un fonctionnement continu.'}
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10">
              {reasons.map((reason, index) => (
                <div key={index} className="flex items-start gap-3">
                  <CheckCircle2 className="w-6 h-6 text-brand-accent flex-shrink-0 mt-0.5" />
                  <span className="text-foreground font-bold text-sm leading-snug">{reason}</span>
                </div>
              ))}
            </div>

            <a 
              href="#contact" 
              className="inline-flex items-center gap-2 bg-brand-accent text-white px-8 py-4 rounded-md font-bold hover:bg-red-700 transition-colors group shadow-sm"
            >
              {dict.whyChooseUs?.contactExperts || 'Contacter nos experts'}
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </a>
          </motion.div>

          {/* Right: YouTube Video Embed */}
          <motion.div 
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="w-full relative rounded-2xl overflow-hidden shadow-2xl bg-gray-100 border border-gray-200 aspect-video"
          >
            <iframe 
              className="absolute inset-0 w-full h-full"
              src="https://www.youtube.com/embed/b-ojvpbIrNk?si=EkYb5C8-VpLGuvWA&autoplay=0&rel=0" 
              title="{dict.whyChooseUs?.title1 || 'Kobra Shredders'}, Made in Italy by Elcoman" 
              frameBorder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
              referrerPolicy="strict-origin-when-cross-origin" 
              allowFullScreen
            ></iframe>
          </motion.div>

        </div>
      </div>
    </section>
  );
}
