"use client";

import { motion } from "framer-motion";
import {
  MessageSquare,
  Phone,
  Mail,
  MapPin,
  ChevronRight,
  ArrowRight,
} from "lucide-react";
import { staggerContainer, fadeInUp, fadeInLeft, fadeInRight } from "../lib/animations";

export default function ContactSection() {
  return (
    <section id="contact" className="py-20 relative">
      <div className="absolute inset-0 bg-grid-pattern opacity-30" />
      
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="text-center mb-16"
        >
          <motion.div variants={fadeInUp} className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-500/10 border border-primary-500/20 mb-4">
            <MessageSquare className="w-4 h-4 text-primary-400" />
            <span className="text-primary-400 text-sm font-medium">Get In Touch</span>
          </motion.div>
          <motion.h2 variants={fadeInUp} className="text-3xl sm:text-4xl font-bold text-theme-primary mb-4">
            Let&apos;s Power Your <span className="text-gradient-green">Green Future</span>
          </motion.h2>
          <motion.p variants={fadeInUp} className="text-theme-secondary max-w-2xl mx-auto">
            Have questions? Need a quote? Want to partner with us? We&apos;re here to help!
          </motion.p>
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-12">
          {/* Contact Info */}
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeInLeft}
          >
            <div className="space-y-6 mb-8">
              {[
                { icon: Phone, label: "Call Us", value: "+91 99999 99999", href: "tel:+919999999999" },
                { icon: Mail, label: "Email Us", value: "info@msbsgov.com", href: "mailto:info@msbsgov.com" },
                { icon: MapPin, label: "Visit Us", value: "Maharashtra, India", href: "#" }
              ].map((contact) => (
                <a
                  key={contact.label}
                  href={contact.href}
                  className="flex items-center gap-4 p-4 glass-card glass-card-hover"
                >
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center">
                    <contact.icon className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="text-sm card-text-muted">{contact.label}</div>
                    <div className="card-title font-medium">{contact.value}</div>
                  </div>
                </a>
              ))}
            </div>

            {/* Quick Links */}
            <div className="glass-card p-6">
              <h3 className="text-lg font-bold card-title mb-4">Quick Links</h3>
              <div className="grid grid-cols-2 gap-3">
                {[
                  "Terms & Conditions",
                  "Privacy Policy",
                  "FAQ",
                  "Blog",
                  "Premium Membership",
                  "Careers"
                ].map((link) => (
                  <a
                    key={link}
                    href="#"
                    className="text-sm card-text-muted hover:text-primary-500 transition-colors flex items-center gap-2"
                  >
                    <ChevronRight className="w-4 h-4" />
                    {link}
                  </a>
                ))}
              </div>
            </div>
          </motion.div>

          {/* Contact Form */}
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeInRight}
            className="glass-card p-8"
          >
            <h3 className="text-xl font-bold card-title mb-6">Send us a message</h3>
            <form className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm card-text-muted mb-2">Name</label>
                  <input
                    type="text"
                    className="w-full px-4 py-3 rounded-xl bg-white/50 border border-primary-500/20 card-title placeholder-gray-400 focus:border-primary-500 focus:outline-none transition-colors"
                    placeholder="Your name"
                  />
                </div>
                <div>
                  <label className="block text-sm card-text-muted mb-2">Phone</label>
                  <input
                    type="tel"
                    className="w-full px-4 py-3 rounded-xl bg-white/50 border border-primary-500/20 card-title placeholder-gray-400 focus:border-primary-500 focus:outline-none transition-colors"
                    placeholder="Your phone"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm card-text-muted mb-2">Email</label>
                <input
                  type="email"
                  className="w-full px-4 py-3 rounded-xl bg-white/50 border border-primary-500/20 card-title placeholder-gray-400 focus:border-primary-500 focus:outline-none transition-colors"
                  placeholder="Your email"
                />
              </div>
              <div>
                <label className="block text-sm card-text-muted mb-2">Subject</label>
                <select className="w-full px-4 py-3 rounded-xl bg-white/50 border border-primary-500/20 card-title focus:border-primary-500 focus:outline-none transition-colors">
                  <option value="">Select a topic</option>
                  <option value="solar">Solar Project Inquiry</option>
                  <option value="ev">EV Charging Solutions</option>
                  <option value="tender">Tender Management</option>
                  <option value="finance">Finance & Loans</option>
                  <option value="partnership">Partnership Opportunity</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div>
                <label className="block text-sm card-text-muted mb-2">Message</label>
                <textarea
                  rows={4}
                  className="w-full px-4 py-3 rounded-xl bg-white/50 border border-primary-500/20 card-title placeholder-gray-400 focus:border-primary-500 focus:outline-none transition-colors resize-none"
                  placeholder="Tell us about your requirements..."
                />
              </div>
              <button type="submit" className="w-full btn-primary justify-center text-base">
                Send Message
                <ArrowRight className="w-5 h-5" />
              </button>
            </form>
          </motion.div>
        </div>
      </div>
    </section>
  );
}