"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import {
  MapPin,
  Mail,
  Phone,
  MessageCircle,
  ArrowRight,
  Home,
  ChevronRight,
  Send,
  Box,
} from "lucide-react";
import Header from "@/sections/Header";

gsap.registerPlugin(ScrollTrigger);

const contactCards = [
  {
    icon: MapPin,
    title: "Our Location",
    content: "Dubai, United Arab Emirates",
    href: null as string | null,
  },
  {
    icon: Mail,
    title: "Email us",
    content: ["vedant.makhija@oxyfinz.com", "info@oxyfinz.com"],
    href: "mailto:vedant.makhija@oxyfinz.com",
  },
  {
    icon: Phone,
    title: "Call us",
    content: ["+971 50 718 0920"],
    href: "tel:+971507180920",
  },
  {
    icon: MessageCircle,
    title: "Live chat",
    content: ["Need help?"],
    href: "/contact",
  },
];

const subjectOptions = [
  "Choose a topic",
  "Portfolio & Analytics",
  "Product Demo",
  "Support",
  "Partnership",
  "Other",
];

export default function ContactPage() {
  const breadcrumbRef = useRef<HTMLElement>(null);
  const cardsRef = useRef<HTMLElement>(null);
  const formRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<HTMLDivElement>(null);
  const ctaRef = useRef<HTMLElement>(null);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    subject: "",
    message: "",
  });
  const [isSubmitted, setIsSubmitted] = useState(false);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        breadcrumbRef.current,
        { y: 20, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.65, ease: "power2.out" }
      );
      gsap.utils.toArray<HTMLElement>(".contact-page-card").forEach((el, i) => {
        gsap.fromTo(
          el,
          { y: 28, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.55,
            ease: "power2.out",
            scrollTrigger: { trigger: cardsRef.current, start: "top 82%" },
            delay: i * 0.1,
          }
        );
      });
      if (formRef.current) {
        gsap.fromTo(
          formRef.current,
          { x: -24, opacity: 0 },
          {
            x: 0,
            opacity: 1,
            duration: 0.6,
            ease: "power2.out",
            scrollTrigger: { trigger: formRef.current, start: "top 88%" },
          }
        );
      }
      if (mapRef.current) {
        gsap.fromTo(
          mapRef.current,
          { x: 24, opacity: 0 },
          {
            x: 0,
            opacity: 1,
            duration: 0.6,
            ease: "power2.out",
            scrollTrigger: { trigger: mapRef.current, start: "top 88%" },
          }
        );
      }
      if (ctaRef.current) {
        gsap.fromTo(
          ctaRef.current,
          { y: 24, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.6,
            ease: "power2.out",
            scrollTrigger: { trigger: ctaRef.current, start: "top 90%" },
          }
        );
      }
    });
    return () => ctx.revert();
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitted(true);
    setTimeout(() => {
      setIsSubmitted(false);
      setFormData({ name: "", email: "", phone: "", subject: "", message: "" });
    }, 3000);
  };

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

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

      <main className="site-main">
        <div className="h-16 lg:h-20" aria-hidden="true" />

        {/* Reach Out to Us – contact info cards */}
        <section ref={cardsRef} className="py-16 lg:py-20 bg-white">
          <div className="landing-container">
            <div className="text-center mb-12 lg:mb-14">
              <p className="landing-section-eyebrow mb-3 inline-flex items-center gap-2">
                <Box className="h-4 w-4" aria-hidden />
                Contact info
              </p>
              <h2 className="landing-section-title">
                <span className="text-[#0a0a0a]">Reach</span>{" "}
                <span className="text-[#428b4d]">Out to Us</span>
              </h2>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {contactCards.map((item, i) => {
                const Icon = item.icon;
                const content = Array.isArray(item.content) ? item.content : [item.content];
                return (
                  <div
                    key={i}
                    className="contact-page-card rounded-2xl border border-slate-200 bg-[#fafbfc] p-6 lg:p-8 hover:border-[#428b4d]/25 hover:shadow-lg transition-all duration-300"
                  >
                    <div className="w-12 h-12 rounded-xl bg-[#428b4d]/10 flex items-center justify-center mb-4">
                      <Icon className="w-6 h-6 text-[#428b4d]" aria-hidden />
                    </div>
                    <h3 className="font-heading font-bold text-lg text-[#0a0a0a] mb-3">
                      {item.title}
                    </h3>
                    {item.href != null ? (
                      <ul className="space-y-1">
                        {content.map((line, j) => {
                          const href = item.href as string;
                          return (
                            <li key={j}>
                              {href.startsWith("/") ? (
                                <Link href={href} className="text-slate-600 hover:text-[#428b4d] transition-colors">
                                  {line}
                                </Link>
                              ) : (
                                <a href={href} className="text-slate-600 hover:text-[#428b4d] transition-colors">
                                  {line}
                                </a>
                              )}
                            </li>
                          );
                        })}
                      </ul>
                    ) : (
                      <p className="text-slate-600">{content[0]}</p>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* Contact form + Map */}
        <section className="py-16 lg:py-20 bg-[#fafbfc] border-t border-slate-200/80">
          <div className="landing-container">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14">
              <div ref={formRef}>
                <h3 className="font-heading font-bold text-2xl lg:text-3xl text-[#0a0a0a] mb-6">
                  Feel Free to Get in Touch or Visit our Location.
                </h3>
                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1.5">
                        Full Name <span className="text-[#428b4d]">*</span>
                      </label>
                      <input
                        type="text"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        required
                        placeholder="Full Name"
                        className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[#0a0a0a] placeholder:text-slate-400 focus:outline-none focus:border-[#428b4d] focus:ring-2 focus:ring-[#428b4d]/20 transition-all"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1.5">
                        Email Address <span className="text-[#428b4d]">*</span>
                      </label>
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        placeholder="Email Address"
                        className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[#0a0a0a] placeholder:text-slate-400 focus:outline-none focus:border-[#428b4d] focus:ring-2 focus:ring-[#428b4d]/20 transition-all"
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1.5">
                        Phone number <span className="text-[#428b4d]">*</span>
                      </label>
                      <input
                        type="tel"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        required
                        placeholder="Phone number"
                        className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[#0a0a0a] placeholder:text-slate-400 focus:outline-none focus:border-[#428b4d] focus:ring-2 focus:ring-[#428b4d]/20 transition-all"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1.5">
                        Subject
                      </label>
                      <select
                        name="subject"
                        value={formData.subject}
                        onChange={handleChange}
                        className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[#0a0a0a] focus:outline-none focus:border-[#428b4d] focus:ring-2 focus:ring-[#428b4d]/20 transition-all"
                      >
                        {subjectOptions.map((opt) => (
                          <option key={opt} value={opt === "Choose a topic" ? "" : opt}>
                            {opt}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1.5">
                      Message <span className="text-[#428b4d]">*</span>
                    </label>
                    <textarea
                      name="message"
                      value={formData.message}
                      onChange={handleChange}
                      required
                      rows={5}
                      placeholder="Type your message"
                      className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-[#0a0a0a] placeholder:text-slate-400 focus:outline-none focus:border-[#428b4d] focus:ring-2 focus:ring-[#428b4d]/20 transition-all resize-none"
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={isSubmitted}
                    className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl bg-[#428b4d] text-white font-semibold text-sm shadow-lg shadow-[#428b4d]/20 hover:bg-[#3a7a42] transition-all disabled:opacity-70"
                  >
                    {isSubmitted ? (
                      <>
                        Message sent!
                        <Send className="h-4 w-4" aria-hidden />
                      </>
                    ) : (
                      <>
                        Submit Now
                        <ArrowRight className="h-4 w-4" aria-hidden />
                      </>
                    )}
                  </button>
                </form>
              </div>
              <div ref={mapRef} className="rounded-2xl overflow-hidden border border-slate-200 bg-white shadow-sm h-[320px] lg:h-full min-h-[320px]">
                <iframe
                  title="Office location"
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.178509650649!2d55.2708!3d25.2048!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f682d8b57b70f%3A0x6e7e2e8b5b5b5b5b!2sDubai!5e0!3m2!1sen!2sae!4v1745918398047"
                  width="100%"
                  height="100%"
                  style={{ border: 0, minHeight: "320px" }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  className="block w-full h-full min-h-[320px]"
                />
              </div>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section
          ref={ctaRef}
          className="py-16 lg:py-20 relative overflow-hidden"
          style={{
            background:
              "linear-gradient(135deg, rgba(66, 139, 77, 0.08) 0%, rgba(250, 251, 252, 0.95) 100%)",
          }}
        >
          <div className="landing-container text-center">
            <h2 className="font-heading font-bold text-3xl sm:text-4xl lg:text-5xl text-[#0a0a0a] mb-6">
              Let&apos;s Build Future Together.
            </h2>
            <Link
              href="/contact"
              className="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-[#428b4d] text-white font-semibold text-base shadow-xl shadow-[#428b4d]/25 hover:bg-[#3a7a42] transition-all duration-300"
            >
              Get Started Now
              <ArrowRight className="h-5 w-5" aria-hidden />
            </Link>
          </div>
        </section>
      </main>
    </div>
  );
}