"use client";

import { motion } from "framer-motion";
import { MessageSquare, PhoneCall, Mail, MapPin } from "lucide-react";

export default function Contact({ dict }: { dict: any }) {
  return (
    <section id="contact" className="py-24 bg-brand-black relative overflow-hidden">
      {/* Background patterns */}
      <div className="absolute inset-0 z-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2070')] bg-cover bg-center mix-blend-overlay" />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-4xl md:text-5xl font-black text-white mb-6"
          >
            {dict.contactSection?.title1 || "NEED THE RIGHT"} <span className="text-brand-accent">{dict.contactSection?.title2 || "SHREDDING SOLUTION?"}</span>
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-lg text-gray-400"
          >
            {dict.contactSection?.desc || "Speak with our industrial shredding experts to find the perfect machine for your security requirements and material volume."}
          </motion.p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          
          {/* Contact Info Cards */}
          <div className="lg:col-span-1 space-y-6">
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="bg-white/5 border border-white/10 p-6 rounded-xl flex items-start gap-4"
            >
              <div className="w-12 h-12 bg-brand-accent/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <PhoneCall className="w-6 h-6 text-brand-accent" />
              </div>
              <div>
                <h4 className="text-white font-bold mb-1">{dict.contactSection?.cards?.[0]?.title || "Speak With an Expert"}</h4>
                <p className="text-gray-400 text-sm mb-2">{dict.contactSection?.cards?.[0]?.sub || "Available Mon-Fri, 8am - 6pm"}</p>
                <a href="tel:+213555123456" className="text-brand-accent font-bold hover:underline">+213 555 123 456</a>
              </div>
            </motion.div>

            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
              className="bg-white/5 border border-white/10 p-6 rounded-xl flex items-start gap-4"
            >
              <div className="w-12 h-12 bg-brand-accent/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <Mail className="w-6 h-6 text-brand-accent" />
              </div>
              <div>
                <h4 className="text-white font-bold mb-1">{dict.contactSection?.cards?.[1]?.title || "Email Sales"}</h4>
                <p className="text-gray-400 text-sm mb-2">{dict.contactSection?.cards?.[1]?.sub || "We reply within 24 hours"}</p>
                <a href="mailto:sales@k-creation.dz" className="text-brand-accent font-bold hover:underline">sales@k-creation.dz</a>
              </div>
            </motion.div>

            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
              className="bg-white/5 border border-white/10 p-6 rounded-xl flex items-start gap-4"
            >
              <div className="w-12 h-12 bg-brand-accent/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <MapPin className="w-6 h-6 text-brand-accent" />
              </div>
              <div>
                <h4 className="text-white font-bold mb-1">{dict.contactSection?.cards?.[2]?.title || "Headquarters"}</h4>
                <p className="text-gray-400 text-sm" dangerouslySetInnerHTML={{ __html: dict.contactSection?.cards?.[2]?.sub || "Industrial Zone, Rouiba<br/>Algiers, Algeria" }} />
              </div>
            </motion.div>
          </div>

          {/* Quote Form */}
          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="lg:col-span-2 bg-white p-8 md:p-10 rounded-xl shadow-2xl"
          >
            <h3 className="text-2xl font-black text-brand-black mb-6">{dict.contactSection?.form?.title || "Request a Quote"}</h3>
            <form className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-bold text-gray-700 mb-2">{dict.contactSection?.form?.fullName || "Full Name *"}</label>
                  <input type="text" className="w-full bg-gray-50 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-transparent" required />
                </div>
                <div>
                  <label className="block text-sm font-bold text-gray-700 mb-2">{dict.contactSection?.form?.company || "Company / Organization *"}</label>
                  <input type="text" className="w-full bg-gray-50 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-transparent" required />
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-bold text-gray-700 mb-2">{dict.contactSection?.form?.email || "Email Address *"}</label>
                  <input type="email" className="w-full bg-gray-50 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-transparent" required />
                </div>
                <div>
                  <label className="block text-sm font-bold text-gray-700 mb-2">{dict.contactSection?.form?.phone || "Phone Number *"}</label>
                  <input type="tel" className="w-full bg-gray-50 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-transparent" required />
                </div>
              </div>

              <div>
                <label className="block text-sm font-bold text-gray-700 mb-2">{dict.contactSection?.form?.materialLabel || "What do you need to shred? *"}</label>
                <select className="w-full bg-gray-50 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-transparent">
                  <option value="">{dict.contactSection?.form?.materialSelect || "Select Material"}</option>
                  <option value="paper">{dict.contactSection?.form?.materials?.[0] || "Paper & Documents"}</option>
                  <option value="hdd">{dict.contactSection?.form?.materials?.[1] || "Hard Drives (HDD/SSD)"}</option>
                  <option value="cardboard">{dict.contactSection?.form?.materials?.[2] || "Cardboard Boxes"}</option>
                  <option value="plastic">{dict.contactSection?.form?.materials?.[3] || "Plastics"}</option>
                  <option value="metal">{dict.contactSection?.form?.materials?.[4] || "Light Metals"}</option>
                  <option value="mixed">{dict.contactSection?.form?.materials?.[5] || "Mixed Waste"}</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-bold text-gray-700 mb-2">{dict.contactSection?.form?.detailsLabel || "Additional Details"}</label>
                <textarea rows={4} className="w-full bg-gray-50 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:border-transparent" placeholder={dict.contactSection?.form?.detailsPlaceholder || "Specify volume, security level, or any special requirements..."}></textarea>
              </div>

              <button type="submit" className="w-full bg-brand-accent text-white font-bold text-lg py-4 rounded-md hover:bg-brand-accent/90 transition-colors flex items-center justify-center gap-2">
                <MessageSquare className="w-5 h-5" />
                {dict.contactSection?.form?.submit || "GET YOUR QUOTE"}
              </button>
            </form>
          </motion.div>

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