"use client";
import React, { useState } from "react";
import { motion } from "framer-motion";
import Image from "next/image";
import Header from "../components/Header";
import Footer from "../components/Footer";

const ContactSection: React.FC = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    company: "",
    service: "",
    message: "",
  });

  const [focusedField, setFocusedField] = useState<string>("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  // const handleSubmit = (e: React.FormEvent) => {
  //   e.preventDefault();
  //   setIsSubmitting(true);

  //   // Simulate API call
  //   setTimeout(() => {
  //     console.log("Form submitted:", formData);
  //     alert("Thank you! We'll get back to you soon.");
  //     setFormData({
  //       name: "",
  //       email: "",
  //       phone: "",
  //       company: "",
  //       service: "",
  //       message: "",
  //     });
  //     setIsSubmitting(false);
  //   }, 1500);
  // };

  const handleChange = (
    e: React.ChangeEvent<
      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
    >,
  ) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const contactInfo = [
    // {
    //   icon: (
    //     <svg
    //       className="w-6 h-6"
    //       fill="none"
    //       stroke="currentColor"
    //       viewBox="0 0 24 24"
    //     >
    //       <path
    //         strokeLinecap="round"
    //         strokeLinejoin="round"
    //         strokeWidth={2}
    //         d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
    //       />
    //     </svg>
    //   ),
    //   label: "Email",
    //   value: "info@crowncity.com",
    //   link: "mailto:info@crowncity.com",
    // },
    {
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
          />
        </svg>
      ),
      label: "Phone",
      value: " +233(0) 201089444",
      link: "tel:+233123456789",
    },
    {
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
          />
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>
      ),
      label: "Location",
      value: "North Legon,Accra, Ghana",
      link: "#",
    },
    {
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      ),
      label: "Business Hours",
      value: "Mon - Fri, 9AM - 6PM",
      link: "#",
    },
  ];

  const services = [
    "Custom Software Development",
    "Enterprise Solutions",
    "IT Consulting & Strategy",
    "E-Commerce Platforms",
    "Mobile App Development",
    "Cloud Services",
    "Other",
  ];

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        alert("Thank you! We'll get back to you soon.");
        setFormData({
          name: "",
          email: "",
          phone: "",
          company: "",
          service: "",
          message: "",
        });
      } else {
        alert("Something went wrong. Please try again.");
      }
    } catch (error) {
      console.error("Error:", error);
      alert("Failed to send message. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen bg-white">
      <Header />

      <main className="pt-[88px]">
        {/* HERO SECTION */}
        <section className="relative bg-[#00057b] text-white py-20 overflow-hidden">
          <div className="absolute inset-0 opacity-10">
            <motion.div
              className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#ffc400] rounded-full blur-3xl"
              animate={{
                x: [0, 50, 0],
                y: [0, 30, 0],
              }}
              transition={{
                duration: 10,
                repeat: Infinity,
                ease: "easeInOut",
              }}
            />
            <motion.div
              className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-white rounded-full blur-3xl"
              animate={{
                x: [0, -30, 0],
                y: [0, 50, 0],
              }}
              transition={{
                duration: 12,
                repeat: Infinity,
                ease: "easeInOut",
              }}
            />
          </div>

          <div className="relative max-w-7xl mx-auto px-6 text-center z-10">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
            >
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                className="inline-block mb-6"
              >
                <div className="w-20 h-20 bg-[#ffc400] rounded-2xl mx-auto flex items-center justify-center">
                  <svg
                    className="w-10 h-10 text-[#00057b]"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                    />
                  </svg>
                </div>
              </motion.div>
              <h1 className="text-5xl md:text-7xl font-bold mb-6">
                Get In <span className="text-[#ffc400]">Touch</span>
              </h1>
              <p className="text-xl md:text-2xl text-white/90 max-w-3xl mx-auto">
                Let's discuss how we can help transform your business with
                innovative technology solutions
              </p>
            </motion.div>
          </div>
        </section>

        {/* CONTACT INFO CARDS */}
        <section className="py-16 bg-gray-50">
          <div className="max-w-7xl mx-auto px-6">
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              {contactInfo.map((info, idx) => (
                <motion.a
                  key={idx}
                  href={info.link}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: idx * 0.1 }}
                  whileHover={{ y: -5 }}
                  className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all group cursor-pointer border-2 border-transparent hover:border-[#ffc400]"
                >
                  <div className="w-14 h-14 bg-[#00057b] group-hover:bg-[#ffc400] rounded-xl flex items-center justify-center text-[#ffc400] group-hover:text-[#00057b] mb-4 transition-colors">
                    {info.icon}
                  </div>
                  <p className="text-sm text-gray-500 mb-1">{info.label}</p>
                  <p className="font-semibold text-gray-900 group-hover:text-[#00057b]">
                    {info.value}
                  </p>
                </motion.a>
              ))}
            </div>
          </div>
        </section>

        {/* MAIN CONTACT SECTION */}
        <section className="py-20 bg-white">
          <div className="max-w-7xl mx-auto px-6">
            <div className="grid lg:grid-cols-2 gap-12 items-start">
              {/* LEFT SIDE - INFO & IMAGE */}
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                className="space-y-8"
              >
                {/* Info Card */}
                <div className="bg-gradient-to-br from-[#00057b] to-[#000340] rounded-3xl p-10 text-white shadow-2xl">
                  <h3 className="text-3xl font-bold mb-4">
                    Let's Create Something Amazing
                  </h3>
                  <p className="text-white/90 text-lg mb-8">
                    Whether you have a project in mind or just want to explore
                    possibilities, we're here to help turn your vision into
                    reality.
                  </p>

                  {/* Quick Stats */}
                  <div className="grid grid-cols-2 gap-6 mb-8">
                    <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                      <div className="text-3xl font-bold text-[#ffc400] mb-1">
                        24h
                      </div>
                      <div className="text-sm text-white/80">Response Time</div>
                    </div>
                    <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                      <div className="text-3xl font-bold text-[#ffc400] mb-1">
                        100%
                      </div>
                      <div className="text-sm text-white/80">
                        Satisfaction Rate
                      </div>
                    </div>
                  </div>

                  {/* Social Links */}
                  <div className="pt-8 border-t border-white/20">
                    <p className="text-white/70 text-sm mb-4 font-semibold">
                      Connect With Us
                    </p>
                    <div className="flex gap-3">
                      {[
                        { name: "LinkedIn", icon: "Li" },
                        // { name: "Twitter", icon: "X" },
                        // { name: "Facebook", icon: "Fb" },
                        // { name: "Instagram", icon: "Ig" },
                      ].map((social, idx) => (
                        <motion.a
                          key={idx}
                          href="#"
                          whileHover={{ scale: 1.1, rotate: 5 }}
                          whileTap={{ scale: 0.95 }}
                          className="w-12 h-12 rounded-xl bg-white/10 hover:bg-[#ffc400] flex items-center justify-center transition-all duration-300 border border-white/20 hover:border-[#ffc400]"
                        >
                          <span className="text-white hover:text-[#00057b] text-xs font-bold">
                            {social.icon}
                          </span>
                        </motion.a>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Image */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.95 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  className="relative rounded-3xl overflow-hidden shadow-2xl h-[300px]"
                >
                  <Image
                    src="/vision2.jpg"
                    alt="Contact CrownCity"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-[#00057b]/80 to-transparent flex items-end p-8">
                    <div className="text-white">
                      <h4 className="text-2xl font-bold mb-2">
                        Visit Our Office
                      </h4>
                      <p className="text-white/90">
                        Schedule a meeting with our team
                      </p>
                    </div>
                  </div>
                </motion.div>
              </motion.div>

              {/* RIGHT SIDE - FORM */}
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                className="bg-white rounded-3xl p-10 shadow-2xl border-2 border-gray-100"
              >
                <h3 className="text-3xl font-bold text-[#00057b] mb-2">
                  Send Us a Message
                </h3>
                <p className="text-gray-600 mb-8">
                  Fill out the form below and we'll get back to you shortly
                </p>

                <form onSubmit={handleSubmit} className="space-y-6">
                  {/* Name & Company */}
                  <div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <label
                        htmlFor="name"
                        className={`block text-sm font-semibold mb-2 transition-colors ${
                          focusedField === "name"
                            ? "text-[#00057b]"
                            : "text-gray-700"
                        }`}
                      >
                        Full Name *
                      </label>
                      <input
                        type="text"
                        id="name"
                        name="name"
                        required
                        value={formData.name}
                        onChange={handleChange}
                        onFocus={() => setFocusedField("name")}
                        onBlur={() => setFocusedField("")}
                        className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#ffc400] focus:outline-none transition-all duration-300"
                        placeholder="John Doe"
                      />
                    </div>

                    <div>
                      <label
                        htmlFor="company"
                        className={`block text-sm font-semibold mb-2 transition-colors ${
                          focusedField === "company"
                            ? "text-[#00057b]"
                            : "text-gray-700"
                        }`}
                      >
                        Company
                      </label>
                      <input
                        type="text"
                        id="company"
                        name="company"
                        value={formData.company}
                        onChange={handleChange}
                        onFocus={() => setFocusedField("company")}
                        onBlur={() => setFocusedField("")}
                        className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#ffc400] focus:outline-none transition-all duration-300"
                        placeholder="Your Company"
                      />
                    </div>
                  </div>

                  {/* Email & Phone */}
                  <div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <label
                        htmlFor="email"
                        className={`block text-sm font-semibold mb-2 transition-colors ${
                          focusedField === "email"
                            ? "text-[#00057b]"
                            : "text-gray-700"
                        }`}
                      >
                        Email Address *
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        value={formData.email}
                        onChange={handleChange}
                        onFocus={() => setFocusedField("email")}
                        onBlur={() => setFocusedField("")}
                        className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#ffc400] focus:outline-none transition-all duration-300"
                        placeholder="john@company.com"
                      />
                    </div>

                    <div>
                      <label
                        htmlFor="phone"
                        className={`block text-sm font-semibold mb-2 transition-colors ${
                          focusedField === "phone"
                            ? "text-[#00057b]"
                            : "text-gray-700"
                        }`}
                      >
                        Phone Number
                      </label>
                      <input
                        type="tel"
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        onFocus={() => setFocusedField("phone")}
                        onBlur={() => setFocusedField("")}
                        className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#ffc400] focus:outline-none transition-all duration-300"
                        placeholder="+233 123 456 789"
                      />
                    </div>
                  </div>

                  {/* Service */}
                  <div>
                    <label
                      htmlFor="service"
                      className={`block text-sm font-semibold mb-2 transition-colors ${
                        focusedField === "service"
                          ? "text-[#00057b]"
                          : "text-gray-700"
                      }`}
                    >
                      Service Interested In *
                    </label>
                    <select
                      id="service"
                      name="service"
                      required
                      value={formData.service}
                      onChange={handleChange}
                      onFocus={() => setFocusedField("service")}
                      onBlur={() => setFocusedField("")}
                      className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#ffc400] focus:outline-none transition-all duration-300 bg-gray text-black"
                    >
                      <option value="" className="text-black">Select a service...</option>
                      {services.map((service, idx) => (
                        <option key={idx} value={service} className="text-black">
                          {service}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Message */}
                  <div>
                    <label
                      htmlFor="message"
                      className={`block text-sm font-semibold mb-2 transition-colors ${
                        focusedField === "message"
                          ? "text-[#00057b]"
                          : "text-gray-700"
                      }`}
                    >
                      Project Details *
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      required
                      value={formData.message}
                      onChange={handleChange}
                      onFocus={() => setFocusedField("message")}
                      onBlur={() => setFocusedField("")}
                      rows={5}
                      className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-[#ffc400] focus:outline-none transition-all duration-300 resize-none text-black"
                      placeholder="Tell us about your project, goals, and timeline..."
                    />
                  </div>

                  {/* Submit Button */}
                  <motion.button
                    type="submit"
                    disabled={isSubmitting}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                    className={`w-full py-4 bg-[#00057b] text-white font-bold rounded-xl hover:bg-black transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center gap-2 ${
                      isSubmitting ? "opacity-70 cursor-not-allowed" : ""
                    }`}
                  >
                    {isSubmitting ? (
                      <>
                        <svg
                          className="animate-spin h-5 w-5"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                            fill="none"
                          />
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                          />
                        </svg>
                        Sending...
                      </>
                    ) : (
                      <>
                        Send Message
                        <svg
                          className="w-5 h-5"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M14 5l7 7m0 0l-7 7m7-7H3"
                          />
                        </svg>
                      </>
                    )}
                  </motion.button>
                </form>
              </motion.div>
            </div>
          </div>
        </section>

        {/* MAP SECTION (Optional - can add actual map later) */}
        {/* <section className="py-20 bg-gray-50">
          <div className="max-w-7xl mx-auto px-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="bg-[#00057b] rounded-3xl overflow-hidden shadow-2xl"
            >
              <div className="grid md:grid-cols-2">
                <div className="p-12 text-white">
                  <h3 className="text-3xl font-bold mb-4">Visit Our Office</h3>
                  <p className="text-white/90 mb-8">
                    We'd love to meet you in person. Schedule a visit to our
                    office and let's discuss your project over coffee.
                  </p>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <div className="w-6 h-6 text-[#ffc400] flex-shrink-0 mt-1">
                        <svg
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                          />
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p className="font-semibold">Address</p>
                        <p className="text-white/80">
                          123 Tech Boulevard, Accra, Ghana
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="w-6 h-6 text-[#ffc400] flex-shrink-0 mt-1">
                        <svg
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p className="font-semibold">Office Hours</p>
                        <p className="text-white/80">
                          Monday - Friday: 9:00 AM - 6:00 PM
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="relative h-[400px] bg-gray-200">
                  {/* Placeholder for map - can integrate Google Maps later */}
                  {/* <div className="absolute inset-0 flex items-center justify-center text-gray-400">
                    <div className="text-center">
                      <svg
                        className="w-16 h-16 mx-auto mb-4"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
                        />
                      </svg>
                      <p className="text-lg font-semibold">Map Integration</p>
                      <p className="text-sm">Google Maps can be added here</p>
                    </div>
                  </div> */}
                {/* </div>
              </div>
            </motion.div>
          </div>
        </section> */} 
      </main>

      <Footer />
    </div>
  );
};

export default ContactSection;