import { useState } from "react";
import { MapPin, Phone, Mail, Clock } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const Contact = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    subject: "general",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

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

  return (
    <div className="min-h-screen bg-[#1a1a1a]">
      <Header />

      <div className="pt-20 lg:pt-24">
        {/* Header */}
        <section className="py-12 bg-[#222] border-b border-[#333]">
          <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
            <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-2">
              Get in Touch
            </p>
            <h1 className="font-playfair text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-3">
              Contact Us
            </h1>
            <p className="font-inter text-[#b0b0b0] text-base max-w-2xl">
              Have a question about a product? Need help choosing the right grill? Our BBQ specialists are here to help.
            </p>
          </div>
        </section>

        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* Contact Info */}
            <div className="space-y-8">
              <div>
                <h2 className="font-oswald text-lg font-bold text-white uppercase tracking-wider mb-6">
                  Visit Our Showroom
                </h2>
                <div className="space-y-5">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-full bg-[#d35400]/10 border border-[#d35400]/30 flex items-center justify-center shrink-0">
                      <MapPin className="w-5 h-5 text-[#d35400]" />
                    </div>
                    <div>
                      <p className="font-inter text-sm font-semibold text-white mb-0.5">Showroom Address</p>
                      <p className="font-inter text-sm text-[#888]">
                        1250 Firewood Lane<br />
                        Austin, TX 78701
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-full bg-[#d35400]/10 border border-[#d35400]/30 flex items-center justify-center shrink-0">
                      <Phone className="w-5 h-5 text-[#d35400]" />
                    </div>
                    <div>
                      <p className="font-inter text-sm font-semibold text-white mb-0.5">Phone</p>
                      <a href="tel:+18005551234" className="font-inter text-sm text-[#888] hover:text-[#d35400] transition-colors">
                        1-800-555-1234
                      </a>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-full bg-[#d35400]/10 border border-[#d35400]/30 flex items-center justify-center shrink-0">
                      <Mail className="w-5 h-5 text-[#d35400]" />
                    </div>
                    <div>
                      <p className="font-inter text-sm font-semibold text-white mb-0.5">Email</p>
                      <a href="mailto:support@grillmasterpro.com" className="font-inter text-sm text-[#888] hover:text-[#d35400] transition-colors">
                        support@grillmasterpro.com
                      </a>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-full bg-[#d35400]/10 border border-[#d35400]/30 flex items-center justify-center shrink-0">
                      <Clock className="w-5 h-5 text-[#d35400]" />
                    </div>
                    <div>
                      <p className="font-inter text-sm font-semibold text-white mb-0.5">Business Hours</p>
                      <p className="font-inter text-sm text-[#888]">
                        Mon - Fri: 9:00 AM - 7:00 PM<br />
                        Saturday: 10:00 AM - 6:00 PM<br />
                        Sunday: 11:00 AM - 5:00 PM
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Map Placeholder */}
              <div className="aspect-[4/3] bg-[#2b2b2b] border border-[#444] rounded-lg overflow-hidden flex items-center justify-center">
                <div className="text-center p-6">
                  <MapPin className="w-10 h-10 text-[#d35400] mx-auto mb-3" />
                  <p className="font-oswald text-base text-white uppercase tracking-wider mb-1">
                    GrillMaster Pro Showroom
                  </p>
                  <p className="font-inter text-sm text-[#888]">
                    1250 Firewood Lane, Austin, TX 78701
                  </p>
                  <a
                    href="https://maps.google.com/?q=1250+Firewood+Lane+Austin+TX+78701"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="font-oswald inline-block mt-3 text-[#d35400] hover:text-[#e67e22] text-sm uppercase tracking-wider transition-colors"
                  >
                    Open in Google Maps →
                  </a>
                </div>
              </div>
            </div>

            {/* Contact Form */}
            <div className="lg:col-span-2">
              <div className="bg-[#2b2b2b] border border-[#444] rounded-lg p-6 sm:p-8">
                <h2 className="font-oswald text-lg font-bold text-white uppercase tracking-wider mb-6">
                  Send Us a Message
                </h2>

                {submitted ? (
                  <div className="text-center py-12">
                    <div className="w-16 h-16 rounded-full bg-[#27ae60]/10 border border-[#27ae60]/30 flex items-center justify-center mx-auto mb-4">
                      <Mail className="w-7 h-7 text-[#27ae60]" />
                    </div>
                    <h3 className="font-playfair text-2xl font-bold text-white mb-2">
                      Message Sent!
                    </h3>
                    <p className="font-inter text-[#888] mb-6">
                      Thank you for reaching out. Our team will get back to you within 24 hours.
                    </p>
                    <button
                      onClick={() => {
                        setSubmitted(false);
                        setFormData({ name: "", email: "", phone: "", subject: "general", message: "" });
                      }}
                      className="font-oswald text-[#d35400] hover:text-[#e67e22] uppercase tracking-wider transition-colors"
                    >
                      Send Another Message
                    </button>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-5">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                      <div>
                        <label className="font-inter text-sm text-[#b0b0b0] block mb-1.5">
                          Full Name *
                        </label>
                        <input
                          type="text"
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          required
                          className="w-full bg-[#1a1a1a] border border-[#444] rounded px-4 py-3 text-sm text-white placeholder:text-[#666] focus:outline-none focus:border-[#d35400] transition-colors"
                          placeholder="John Smith"
                        />
                      </div>
                      <div>
                        <label className="font-inter text-sm text-[#b0b0b0] block mb-1.5">
                          Email Address *
                        </label>
                        <input
                          type="email"
                          name="email"
                          value={formData.email}
                          onChange={handleChange}
                          required
                          className="w-full bg-[#1a1a1a] border border-[#444] rounded px-4 py-3 text-sm text-white placeholder:text-[#666] focus:outline-none focus:border-[#d35400] transition-colors"
                          placeholder="john@example.com"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                      <div>
                        <label className="font-inter text-sm text-[#b0b0b0] block mb-1.5">
                          Phone Number
                        </label>
                        <input
                          type="tel"
                          name="phone"
                          value={formData.phone}
                          onChange={handleChange}
                          className="w-full bg-[#1a1a1a] border border-[#444] rounded px-4 py-3 text-sm text-white placeholder:text-[#666] focus:outline-none focus:border-[#d35400] transition-colors"
                          placeholder="(555) 123-4567"
                        />
                      </div>
                      <div>
                        <label className="font-inter text-sm text-[#b0b0b0] block mb-1.5">
                          Subject *
                        </label>
                        <select
                          name="subject"
                          value={formData.subject}
                          onChange={handleChange}
                          className="w-full bg-[#1a1a1a] border border-[#444] rounded px-4 py-3 text-sm text-white focus:outline-none focus:border-[#d35400] transition-colors"
                        >
                          <option value="general">General Inquiry</option>
                          <option value="product">Product Question</option>
                          <option value="order">Order Support</option>
                          <option value="warranty">Warranty Claim</option>
                          <option value="assembly">Assembly Services</option>
                          <option value="wholesale">Wholesale Inquiry</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label className="font-inter text-sm text-[#b0b0b0] block mb-1.5">
                        Message *
                      </label>
                      <textarea
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        required
                        rows={6}
                        className="w-full bg-[#1a1a1a] border border-[#444] rounded px-4 py-3 text-sm text-white placeholder:text-[#666] focus:outline-none focus:border-[#d35400] transition-colors resize-none"
                        placeholder="Tell us how we can help..."
                      />
                    </div>

                    <button
                      type="submit"
                      className="font-oswald bg-[#d35400] hover:bg-[#e67e22] text-white text-base font-semibold uppercase tracking-wider px-10 py-4 rounded transition-all duration-300 hover:shadow-[0_0_30px_rgba(211,84,0,0.3)]"
                    >
                      Send Message
                    </button>
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

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

export default Contact;