"use client";

import { motion } from "framer-motion";
import { useState } from "react";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import AnimatedButton from "../components/AnimatedButton";
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
import {
  PhoneIcon,
  MailIcon,
  MapPinIcon,
  ArrowRightIcon,
  CheckIcon,
} from "../components/Icons";

const contactInfo = [
  {
    icon: PhoneIcon,
    label: "Phone",
    value: "303-371-2810",
    href: "tel:303-371-2810",
    description: "Mon-Fri, 8am-5pm MST",
  },
  {
    icon: PhoneIcon,
    label: "Fax",
    value: "303-371-2807",
    href: null,
    description: "24/7 available",
  },
  {
    icon: MailIcon,
    label: "Email",
    value: "info@tcm-sales.com",
    href: "mailto:info@tcm-sales.com",
    description: "We'll respond within 24 hours",
  },
];

const territories = [
  "Colorado",
  "Washington",
  "Oregon",
  "Idaho",
  "Utah",
  "Wyoming",
  "Montana",
  "New Mexico",
  "Nebraska",
  "Arizona",
];

export default function ContactPage() {
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    company: "",
    phone: "",
    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, 1500));

    setIsSubmitting(false);
    setIsSubmitted(true);
  };

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

  return (
    <main className="relative">
      <Navigation />

      {/* Hero Section */}
      <section className="relative min-h-[50vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900">
        {/* Animated background */}
        <div className="absolute inset-0 overflow-hidden">
          <motion.div
            className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[150px] opacity-15"
            animate={{
              scale: [1, 1.2, 1],
              x: [0, 50, 0],
            }}
            transition={{
              duration: 10,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[hsl(0,100%,50%)] rounded-full filter blur-[180px] opacity-10"
            animate={{
              scale: [1.2, 1, 1.2],
              y: [0, -50, 0],
            }}
            transition={{
              duration: 12,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/10 mb-8"
          >
            <MailIcon size={16} className="text-[hsl(0,100%,60%)]" />
            <span className="text-sm font-medium text-white/80">
              Get In Touch
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.1 }}
            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6"
          >
            Let&apos;s{" "}
            <span className="bg-gradient-to-r from-[hsl(0,100%,50%)] to-[hsl(0,100%,65%)] bg-clip-text text-transparent">
              Talk
            </span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-300 leading-relaxed"
          >
            We would love to help you with all of your Foodservice and
            Janitorial needs. Reach out and let&apos;s start a conversation.
          </motion.p>
        </div>
      </section>

      {/* Contact Info Cards */}
      <section className="relative -mt-8 z-20 pb-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <StaggerContainer className="grid sm:grid-cols-3 gap-6">
            {contactInfo.map((info) => (
              <StaggerItem key={info.label}>
                <motion.div
                  whileHover={{ y: -5, scale: 1.02 }}
                  className="group bg-white dark:bg-neutral-800 p-6 rounded-2xl shadow-xl hover:shadow-2xl transition-all border border-neutral-100 dark:border-neutral-700"
                >
                  {info.href ? (
                    <a
                      href={info.href}
                      className="block"
                    >
                      <div className="flex items-start gap-4">
                        <motion.div
                          whileHover={{ rotate: 360 }}
                          transition={{ duration: 0.5 }}
                          className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
                        >
                          <info.icon
                            size={22}
                            className="text-[hsl(0,100%,40%)] group-hover:text-white transition-colors"
                          />
                        </motion.div>
                        <div>
                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-1">
                            {info.label}
                          </p>
                          <p className="text-lg font-semibold text-neutral-900 dark:text-white group-hover:text-[hsl(0,100%,40%)] transition-colors">
                            {info.value}
                          </p>
                          <p className="text-xs text-neutral-400 mt-1">
                            {info.description}
                          </p>
                        </div>
                      </div>
                    </a>
                  ) : (
                    <div className="flex items-start gap-4">
                      <motion.div
                        whileHover={{ rotate: 360 }}
                        transition={{ duration: 0.5 }}
                        className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
                      >
                        <info.icon
                          size={22}
                          className="text-[hsl(0,100%,40%)]"
                        />
                      </motion.div>
                      <div>
                        <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-1">
                          {info.label}
                        </p>
                        <p className="text-lg font-semibold text-neutral-900 dark:text-white">
                          {info.value}
                        </p>
                        <p className="text-xs text-neutral-400 mt-1">
                          {info.description}
                        </p>
                      </div>
                    </div>
                  )}
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* Contact Form & Location */}
      <section className="section-padding bg-neutral-50 dark:bg-neutral-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
            {/* Contact Form */}
            <FadeIn>
              <div className="bg-white dark:bg-neutral-900 p-8 md:p-10 rounded-3xl shadow-xl border border-neutral-100 dark:border-neutral-800">
                <h2 className="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
                  Send Us a Message
                </h2>
                <p className="text-neutral-600 dark:text-neutral-400 mb-8">
                  Fill out the form below and we&apos;ll get back to you shortly.
                </p>

                {isSubmitted ? (
                  <motion.div
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    className="text-center py-12"
                  >
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ type: "spring", stiffness: 200, delay: 0.2 }}
                      className="w-20 h-20 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center mx-auto mb-6"
                    >
                      <CheckIcon size={40} className="text-emerald-600" />
                    </motion.div>
                    <h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
                      Message Sent!
                    </h3>
                    <p className="text-neutral-600 dark:text-neutral-400 mb-6">
                      Thank you for reaching out. We&apos;ll be in touch soon.
                    </p>
                    <AnimatedButton
                      onClick={() => {
                        setIsSubmitted(false);
                        setFormState({
                          name: "",
                          email: "",
                          company: "",
                          phone: "",
                          message: "",
                        });
                      }}
                      variant="outline"
                    >
                      Send Another Message
                    </AnimatedButton>
                  </motion.div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid sm:grid-cols-2 gap-6">
                      <div>
                        <label
                          htmlFor="name"
                          className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
                        >
                          Name *
                        </label>
                        <motion.input
                          whileFocus={{ scale: 1.01 }}
                          type="text"
                          id="name"
                          name="name"
                          required
                          value={formState.name}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
                          placeholder="Your name"
                        />
                      </div>
                      <div>
                        <label
                          htmlFor="email"
                          className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
                        >
                          Email *
                        </label>
                        <motion.input
                          whileFocus={{ scale: 1.01 }}
                          type="email"
                          id="email"
                          name="email"
                          required
                          value={formState.email}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
                          placeholder="your@email.com"
                        />
                      </div>
                    </div>

                    <div className="grid sm:grid-cols-2 gap-6">
                      <div>
                        <label
                          htmlFor="company"
                          className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
                        >
                          Company
                        </label>
                        <motion.input
                          whileFocus={{ scale: 1.01 }}
                          type="text"
                          id="company"
                          name="company"
                          value={formState.company}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
                          placeholder="Your company"
                        />
                      </div>
                      <div>
                        <label
                          htmlFor="phone"
                          className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
                        >
                          Phone
                        </label>
                        <motion.input
                          whileFocus={{ scale: 1.01 }}
                          type="tel"
                          id="phone"
                          name="phone"
                          value={formState.phone}
                          onChange={handleChange}
                          className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none"
                          placeholder="(555) 555-5555"
                        />
                      </div>
                    </div>

                    <div>
                      <label
                        htmlFor="message"
                        className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
                      >
                        Message *
                      </label>
                      <motion.textarea
                        whileFocus={{ scale: 1.01 }}
                        id="message"
                        name="message"
                        required
                        rows={5}
                        value={formState.message}
                        onChange={handleChange}
                        className="w-full px-4 py-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-[hsl(0,100%,40%)] focus:border-transparent transition-all outline-none resize-none"
                        placeholder="How can we help you?"
                      />
                    </div>

                    <motion.button
                      type="submit"
                      disabled={isSubmitting}
                      whileHover={{ scale: 1.02, y: -2 }}
                      whileTap={{ scale: 0.98 }}
                      className="w-full py-4 px-6 bg-[hsl(0,100%,40%)] hover:bg-[hsl(0,100%,35%)] text-white font-medium rounded-xl shadow-lg hover:shadow-xl hover:shadow-[hsl(0,100%,40%)]/25 transition-all disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                    >
                      {isSubmitting ? (
                        <>
                          <motion.div
                            animate={{ rotate: 360 }}
                            transition={{
                              duration: 1,
                              repeat: Infinity,
                              ease: "linear",
                            }}
                            className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full"
                          />
                          Sending...
                        </>
                      ) : (
                        <>
                          Send Message
                          <ArrowRightIcon size={18} />
                        </>
                      )}
                    </motion.button>

                    <p className="text-xs text-neutral-500 dark:text-neutral-400 text-center">
                      By submitting this form, you agree to our privacy policy.
                    </p>
                  </form>
                )}
              </div>
            </FadeIn>

            {/* Location Info */}
            <FadeIn direction="right" delay={0.2}>
              <div className="space-y-8">
                {/* Address Card */}
                <motion.div
                  whileHover={{ y: -5 }}
                  className="bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-xl border border-neutral-100 dark:border-neutral-800"
                >
                  <div className="flex items-start gap-4 mb-6">
                    <motion.div
                      whileHover={{ rotate: 360 }}
                      transition={{ duration: 0.5 }}
                      className="w-14 h-14 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
                    >
                      <MapPinIcon size={28} className="text-[hsl(0,100%,40%)]" />
                    </motion.div>
                    <div>
                      <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-1">
                        Head Office
                      </h3>
                      <p className="text-neutral-600 dark:text-neutral-400">
                        TCM Sales & Marketing
                      </p>
                    </div>
                  </div>
                  <address className="not-italic text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6">
                    12424 East Weaver Place
                    <br />
                    Centennial, Colorado 80111
                    <br />
                    United States
                  </address>
                  <motion.a
                    href="https://maps.google.com/?q=12424+East+Weaver+Place,+Centennial,+CO+80111"
                    target="_blank"
                    rel="noopener noreferrer"
                    whileHover={{ x: 5 }}
                    className="inline-flex items-center gap-2 text-[hsl(0,100%,40%)] font-medium hover:underline"
                  >
                    Get Directions
                    <ArrowRightIcon size={16} />
                  </motion.a>
                </motion.div>

                {/* Map Placeholder */}
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  className="relative aspect-video bg-neutral-200 dark:bg-neutral-800 rounded-3xl overflow-hidden"
                >
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-center">
                      <motion.div
                        animate={{
                          scale: [1, 1.2, 1],
                          opacity: [0.5, 1, 0.5],
                        }}
                        transition={{
                          duration: 2,
                          repeat: Infinity,
                          ease: "easeInOut",
                        }}
                        className="w-16 h-16 rounded-full bg-[hsl(0,100%,40%)]/20 flex items-center justify-center mx-auto mb-4"
                      >
                        <div className="w-10 h-10 rounded-full bg-[hsl(0,100%,40%)]/40 flex items-center justify-center">
                          <MapPinIcon size={20} className="text-[hsl(0,100%,40%)]" />
                        </div>
                      </motion.div>
                      <p className="text-neutral-600 dark:text-neutral-400 font-medium">
                        Denver, Colorado
                      </p>
                      <p className="text-sm text-neutral-500">
                        Rocky Mountain Region HQ
                      </p>
                    </div>
                  </div>
                  {/* Decorative grid */}
                  <div
                    className="absolute inset-0 opacity-10"
                    style={{
                      backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 20h40M20 0v40'/%3E%3C/g%3E%3C/svg%3E")`,
                    }}
                  />
                </motion.div>

                {/* Territory Coverage */}
                <motion.div
                  whileHover={{ y: -5 }}
                  className="bg-gradient-to-br from-neutral-900 to-neutral-800 p-8 rounded-3xl text-white"
                >
                  <h3 className="text-xl font-bold mb-4">Service Territory</h3>
                  <p className="text-neutral-400 mb-6 text-sm">
                    We proudly serve the Rocky Mountain and Northwest regions:
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {territories.map((territory, index) => (
                      <motion.span
                        key={territory}
                        initial={{ opacity: 0, scale: 0.8 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        viewport={{ once: true }}
                        transition={{ delay: index * 0.05 }}
                        whileHover={{
                          scale: 1.05,
                          backgroundColor: "hsl(0, 100%, 40%)",
                        }}
                        className="px-3 py-1.5 text-sm font-medium bg-white/10 rounded-full cursor-default transition-colors"
                      >
                        {territory}
                      </motion.span>
                    ))}
                  </div>
                </motion.div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="section-padding bg-white dark:bg-neutral-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <FadeIn>
              <span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
                Common Questions
              </span>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h2 className="text-3xl sm:text-4xl font-bold text-neutral-900 dark:text-white">
                Frequently Asked{" "}
                <span className="text-[hsl(0,100%,40%)]">Questions</span>
              </h2>
            </FadeIn>
          </div>

          <div className="space-y-4">
            {[
              {
                q: "What areas do you service?",
                a: "We serve the Rocky Mountain and Northwest regions including Colorado, Washington, Oregon, Idaho, Utah, Wyoming, Montana, New Mexico, Nebraska, and Arizona.",
              },
              {
                q: "How quickly can I expect a response?",
                a: "We typically respond to all inquiries within 24 business hours. For urgent matters, please call us directly.",
              },
              {
                q: "Do you offer product samples?",
                a: "Yes! We provide comprehensive product samples to help you evaluate our offerings. Contact us to request samples.",
              },
              {
                q: "Can you help with sustainable product alternatives?",
                a: "Absolutely. We offer a full range of eco-friendly, compostable, and recyclable products to meet your sustainability goals.",
              },
            ].map((faq, index) => (
              <FadeIn key={faq.q} delay={index * 0.1}>
                <motion.div
                  whileHover={{ x: 5 }}
                  className="bg-neutral-50 dark:bg-neutral-800 p-6 rounded-2xl"
                >
                  <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
                    {faq.q}
                  </h3>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    {faq.a}
                  </p>
                </motion.div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
        {/* Background pattern */}
        <div className="absolute inset-0 opacity-10">
          <svg
            className="w-full h-full"
            viewBox="0 0 100 100"
            preserveAspectRatio="none"
          >
            <pattern
              id="grid-contact"
              width="10"
              height="10"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M 10 0 L 0 0 0 10"
                fill="none"
                stroke="white"
                strokeWidth="0.5"
              />
            </pattern>
            <rect width="100%" height="100%" fill="url(#grid-contact)" />
          </svg>
        </div>

        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <FadeIn>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
              Prefer to Talk?
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-xl text-white/90 mb-8 leading-relaxed">
              Give us a call and speak directly with our team.
            </p>
          </FadeIn>
          <FadeIn delay={0.2}>
            <motion.a
              href="tel:303-371-2810"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="inline-flex items-center gap-3 bg-white text-[hsl(0,100%,40%)] px-8 py-4 rounded-full font-bold text-xl shadow-xl hover:shadow-2xl transition-shadow"
            >
              <PhoneIcon size={24} />
              303-371-2810
            </motion.a>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </main>
  );
}