"use client";

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

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);

    // Simulate form submission
    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="bg-zinc-900 text-white">
        <div className="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-500 font-semibold mb-4">Contact Us</p>
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
              Let&apos;s <span className="text-red-500">Talk</span> About Your
              Business
            </h1>
            <p className="mt-6 text-lg text-zinc-300">
              Ready to get started? Have questions? We&apos;re here to help.
              Reach out for a free consultation and needs analysis.
            </p>
          </div>
        </div>
      </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-green-50 border border-green-200 rounded-xl p-8 text-center">
                  <CheckCircle className="h-12 w-12 text-green-600 mx-auto mb-4" />
                  <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"
                  >
                    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>
                      <label
                        htmlFor="name"
                        className="block text-sm font-medium text-zinc-700"
                      >
                        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"
                        placeholder="John Smith"
                      />
                    </div>
                    <div>
                      <label
                        htmlFor="email"
                        className="block text-sm font-medium text-zinc-700"
                      >
                        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"
                        placeholder="john@company.com"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                      <label
                        htmlFor="phone"
                        className="block text-sm font-medium text-zinc-700"
                      >
                        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"
                        placeholder="(555) 123-4567"
                      />
                    </div>
                    <div>
                      <label
                        htmlFor="company"
                        className="block text-sm font-medium text-zinc-700"
                      >
                        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"
                        placeholder="Your Company LLC"
                      />
                    </div>
                  </div>

                  <div>
                    <label
                      htmlFor="preferredContact"
                      className="block text-sm font-medium text-zinc-700"
                    >
                      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"
                    >
                      <option value="email">Email</option>
                      <option value="phone">Phone</option>
                      <option value="either">Either</option>
                    </select>
                  </div>

                  <div>
                    <label
                      htmlFor="message"
                      className="block text-sm font-medium text-zinc-700"
                    >
                      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"
                      placeholder="Tell us about your business needs..."
                    />
                  </div>

                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {isSubmitting ? (
                      "Sending..."
                    ) : (
                      <>
                        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) => (
                  <div key={item.label} className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                      <item.icon className="h-6 w-6 text-red-600" />
                    </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"
                          >
                            {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-red-100 hover:text-red-600 transition-colors"
                    >
                      <span className="sr-only">{social.name}</span>
                      <social.icon className="h-5 w-5" />
                    </a>
                  ))}
                </div>
              </div>

              {/* Se Habla Espanol */}
              <div className="mt-12 bg-red-50 rounded-xl p-6">
                <p className="text-xl font-semibold text-red-600">
                  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>
      </section>

      {/* CTA Banner */}
      <section className="bg-zinc-900 py-12 md:py-16">
        <div className="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>
            <a
              href="tel:3053878582"
              className="mt-6 inline-flex items-center justify-center px-8 py-4 bg-red-600 text-white text-lg font-medium rounded-lg hover:bg-red-700 transition-colors"
            >
              <Phone className="mr-2 h-6 w-6" />
              (305) 387-8582
            </a>
          </div>
        </div>
      </section>
    </>
  );
}
