"use client";

import { useState } from "react";
import {
  Phone,
  Mail,
  MapPin,
  Clock,
  Facebook,
  Twitter,
  Linkedin,
  Send,
  CheckCircle,
} from "lucide-react";
import AnimatedBackground from "../components/AnimatedBackground";
import Button from "../components/Button";

const contactInfo = [
  {
    icon: Phone,
    label: "Phone",
    values: ["(866) 218-3322", "(305) 387-8582"],
    href: "tel:3053878582",
  },
  {
    icon: Mail,
    label: "Email",
    values: ["info@ab-groupllc.com"],
    href: "mailto:info@ab-groupllc.com",
  },
  {
    icon: Phone,
    label: "Fax",
    values: ["(866) 705-8254"],
  },
  {
    icon: MapPin,
    label: "Location",
    values: ["Florida, United States"],
  },
  {
    icon: Clock,
    label: "Hours",
    values: ["Monday - Friday", "By Appointment Only"],
  },
];

const socialLinks = [
  {
    name: "Facebook",
    href: "https://www.facebook.com/quickbooks.easybutton",
    icon: Facebook,
  },
  {
    name: "X",
    href: "https://x.com/Nicky_QB_Expert/",
    icon: Twitter,
  },
  {
    name: "LinkedIn",
    href: "https://www.linkedin.com/in/nicollealcazar/",
    icon: Linkedin,
  },
];

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    company: "",
    preferredContact: "email",
    message: "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setIsSubmitting(false);
    setIsSubmitted(true);
  };

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

  return (
    <>
      {/* Hero Section */}
      <section className="relative animated-gradient-bg text-white overflow-hidden">
        <AnimatedBackground variant="dark" orbCount={5} />
        <div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
          <div className="max-w-3xl">
            <p className="text-red-400 font-semibold mb-4 animate-fade-in">
              Contact Us
            </p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl animate-slide-up">
              Let&apos;s{" "}
              <span className="text-transparent bg-gradient-to-r from-red-400 via-red-500 to-red-600 bg-clip-text">
                Talk
              </span>{" "}
              About Your Business
            </h1>
            <p className="mt-6 text-lg text-zinc-300 animate-slide-up animation-delay-100">
              Ready to get started? Have questions? We&apos;re here to help.
              Reach out for a free consultation and needs analysis.
            </p>
          </div>
        </div>
        <div className="absolute right-10 top-1/4 w-64 h-64 bg-red-500/10 rounded-full blur-3xl animate-float" />
      </section>

      {/* Contact Content */}
      <section className="bg-white py-16 md:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
            {/* Contact Form */}
            <div>
              <h2 className="text-2xl font-semibold text-zinc-900">
                Send Us a Message
              </h2>
              <p className="mt-2 text-zinc-600">
                Fill out the form below and we&apos;ll get back to you as soon
                as possible.
              </p>

              {isSubmitted ? (
                <div className="mt-8 bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl p-8 text-center animate-scale-in">
                  <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <CheckCircle className="h-8 w-8 text-white" />
                  </div>
                  <h3 className="text-xl font-semibold text-zinc-900">
                    Message Sent!
                  </h3>
                  <p className="mt-2 text-zinc-600">
                    Thank you for contacting us. We&apos;ll be in touch shortly.
                  </p>
                  <button
                    onClick={() => {
                      setIsSubmitted(false);
                      setFormData({
                        name: "",
                        email: "",
                        phone: "",
                        company: "",
                        preferredContact: "email",
                        message: "",
                      });
                    }}
                    className="mt-4 text-red-600 font-medium hover:text-red-700 transition-colors"
                  >
                    Send another message
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="mt-8 space-y-6">
                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div className="group">
                      <label
                        htmlFor="name"
                        className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
                      >
                        Full Name *
                      </label>
                      <input
                        type="text"
                        id="name"
                        name="name"
                        required
                        value={formData.name}
                        onChange={handleChange}
                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
                        placeholder="John Smith"
                      />
                    </div>
                    <div className="group">
                      <label
                        htmlFor="email"
                        className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
                      >
                        Email Address *
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        value={formData.email}
                        onChange={handleChange}
                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
                        placeholder="john@company.com"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div className="group">
                      <label
                        htmlFor="phone"
                        className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
                      >
                        Phone Number
                      </label>
                      <input
                        type="tel"
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
                        placeholder="(555) 123-4567"
                      />
                    </div>
                    <div className="group">
                      <label
                        htmlFor="company"
                        className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
                      >
                        Company Name
                      </label>
                      <input
                        type="text"
                        id="company"
                        name="company"
                        value={formData.company}
                        onChange={handleChange}
                        className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all hover:border-zinc-300"
                        placeholder="Your Company LLC"
                      />
                    </div>
                  </div>

                  <div className="group">
                    <label
                      htmlFor="preferredContact"
                      className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
                    >
                      Preferred Contact Method
                    </label>
                    <select
                      id="preferredContact"
                      name="preferredContact"
                      value={formData.preferredContact}
                      onChange={handleChange}
                      className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all bg-white hover:border-zinc-300 cursor-pointer"
                    >
                      <option value="email">Email</option>
                      <option value="phone">Phone</option>
                      <option value="either">Either</option>
                    </select>
                  </div>

                  <div className="group">
                    <label
                      htmlFor="message"
                      className="block text-sm font-medium text-zinc-700 group-focus-within:text-red-600 transition-colors"
                    >
                      Message *
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      required
                      rows={5}
                      value={formData.message}
                      onChange={handleChange}
                      className="mt-1 w-full px-4 py-3 rounded-lg border border-zinc-200 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 outline-none transition-all resize-none hover:border-zinc-300"
                      placeholder="Tell us about your business needs..."
                    />
                  </div>

                  <Button type="submit" disabled={isSubmitting} className="w-full">
                    {isSubmitting ? (
                      <span className="flex items-center gap-2">
                        <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...
                      </span>
                    ) : (
                      <>
                        Send Message
                        <Send className="ml-2 h-5 w-5" />
                      </>
                    )}
                  </Button>
                </form>
              )}
            </div>

            {/* Contact Info */}
            <div>
              <h2 className="text-2xl font-semibold text-zinc-900">
                Contact Information
              </h2>
              <p className="mt-2 text-zinc-600">
                Prefer to reach out directly? Here&apos;s how you can contact
                us.
              </p>

              <div className="mt-8 space-y-6">
                {contactInfo.map((item, index) => (
                  <div
                    key={item.label}
                    className="flex items-start gap-4 group"
                    style={{ animationDelay: `${index * 100}ms` }}
                  >
                    <div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-gradient-to-br group-hover:from-red-500 group-hover:to-red-700 transition-all duration-300">
                      <item.icon className="h-6 w-6 text-red-600 group-hover:text-white transition-colors duration-300" />
                    </div>
                    <div>
                      <p className="font-medium text-zinc-900">{item.label}</p>
                      {item.values.map((value, idx) =>
                        item.href && idx === 0 ? (
                          <a
                            key={value}
                            href={item.href}
                            className="block text-zinc-600 hover:text-red-600 transition-colors duration-300"
                          >
                            {value}
                          </a>
                        ) : (
                          <p key={value} className="text-zinc-600">
                            {value}
                          </p>
                        )
                      )}
                    </div>
                  </div>
                ))}
              </div>

              {/* Social Links */}
              <div className="mt-12">
                <h3 className="text-lg font-semibold text-zinc-900">
                  Follow Us
                </h3>
                <div className="mt-4 flex gap-4">
                  {socialLinks.map((social) => (
                    <a
                      key={social.name}
                      href={social.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-12 h-12 bg-zinc-100 rounded-lg flex items-center justify-center text-zinc-600 hover:bg-gradient-to-br hover:from-red-500 hover:to-red-700 hover:text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/20"
                    >
                      <span className="sr-only">{social.name}</span>
                      <social.icon className="h-5 w-5" />
                    </a>
                  ))}
                </div>
              </div>

              {/* Se Habla Espanol */}
              <div className="mt-12 relative group overflow-hidden rounded-xl">
                <div className="absolute inset-0 bg-gradient-to-r from-red-500 to-red-700 opacity-10 group-hover:opacity-20 transition-opacity duration-300" />
                <div className="relative bg-red-50 rounded-xl p-6 border border-red-100">
                  <p className="text-xl font-semibold text-transparent bg-gradient-to-r from-red-500 to-red-700 bg-clip-text">
                    Se Habla Espanol
                  </p>
                  <p className="mt-2 text-zinc-600">
                    We proudly serve our Spanish-speaking clients in their
                    preferred language.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Banner */}
      <section className="relative animated-gradient-bg py-12 md:py-16 overflow-hidden">
        <AnimatedBackground variant="dark" orbCount={4} />
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-2xl font-semibold text-white sm:text-3xl">
              Got QuickBooks? We&apos;ve Got Answers.
            </h2>
            <p className="mt-2 text-zinc-400">
              Call us now for immediate assistance.
            </p>
            <Button href="tel:3053878582" size="lg" className="mt-6">
              <Phone className="mr-2 h-6 w-6" />
              (305) 387-8582
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}