"use client";

import { motion, useInView } from "framer-motion";
import { useRef, useState } from "react";
import { Navbar } from "@/components/home/Navbar";
import { Footer } from "@/components/home/Footer";
import { PageHeader } from "@/components/shared/PageHeader";
import { MapPin, Phone, Mail, Clock, Send } from "lucide-react";

export default function ContactPage() {
  const formRef = useRef(null);
  const formInView = useInView(formRef, { once: true, margin: "-50px" });
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    subject: "",
    message: "",
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
  };

  return (
    <div className="flex flex-1 flex-col">
      <Navbar />

      <PageHeader
        title="Contact Us"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Contact" },
        ]}
        backgroundImage="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop"
      />

      {/* Contact Info Cards */}
      <section className="py-20 lg:py-24 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                icon: <MapPin size={24} />,
                title: "Office Address",
                info: "Westlands Commercial Centre, Nairobi, Kenya",
              },
              {
                icon: <Phone size={24} />,
                title: "Phone Number",
                info: "+254 700 000 000\n+44 20 7946 0958",
              },
              {
                icon: <Mail size={24} />,
                title: "Email Address",
                info: "invest@diasporaproperty.com\nsupport@diasporaproperty.com",
              },
              {
                icon: <Clock size={24} />,
                title: "Working Hours",
                info: "Mon - Fri: 8AM - 6PM EAT\nSat: 9AM - 1PM EAT",
              },
            ].map((item, i) => (
              <motion.div
                key={item.title}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                className="group bg-obsidian-50 p-8 text-center hover:bg-obsidian-700 transition-colors duration-500"
              >
                <div className="w-14 h-14 bg-primary/10 group-hover:bg-primary flex items-center justify-center mx-auto mb-5 transition-colors duration-500">
                  <span className="text-primary group-hover:text-white transition-colors duration-500">
                    {item.icon}
                  </span>
                </div>
                <h3 className="font-display text-sm font-bold text-obsidian-700 group-hover:text-white uppercase tracking-wider transition-colors duration-500">
                  {item.title}
                </h3>
                <p className="mt-3 text-sm text-obsidian-400 group-hover:text-white/60 whitespace-pre-line transition-colors duration-500">
                  {item.info}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Form + Map */}
      <section className="py-20 lg:py-24 bg-obsidian-50" ref={formRef}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20">
            {/* Form */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={formInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.7 }}
            >
              <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
                //GET IN TOUCH
              </p>
              <h2 className="font-display text-3xl sm:text-4xl font-bold text-obsidian-700 leading-tight">
                SEND US A <span className="text-primary">MESSAGE</span>
              </h2>
              <p className="mt-4 text-sm text-obsidian-400 leading-relaxed">
                Have questions about investing in Kenyan property from abroad? Fill out
                the form and our team will get back to you within 24 hours.
              </p>

              <form onSubmit={handleSubmit} className="mt-8 space-y-5">
                <div className="grid sm:grid-cols-2 gap-5">
                  <div>
                    <label className="text-xs text-obsidian-500 uppercase tracking-wider font-medium mb-2 block">
                      Full Name
                    </label>
                    <input
                      type="text"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder="John Doe"
                      className="w-full bg-white border border-obsidian-200 px-4 py-3.5 text-sm text-obsidian-700 placeholder:text-obsidian-300 outline-none focus:border-primary transition-colors"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-obsidian-500 uppercase tracking-wider font-medium mb-2 block">
                      Email Address
                    </label>
                    <input
                      type="email"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      placeholder="john@example.com"
                      className="w-full bg-white border border-obsidian-200 px-4 py-3.5 text-sm text-obsidian-700 placeholder:text-obsidian-300 outline-none focus:border-primary transition-colors"
                    />
                  </div>
                </div>

                <div className="grid sm:grid-cols-2 gap-5">
                  <div>
                    <label className="text-xs text-obsidian-500 uppercase tracking-wider font-medium mb-2 block">
                      Phone Number
                    </label>
                    <input
                      type="tel"
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      placeholder="+44 123 456 7890"
                      className="w-full bg-white border border-obsidian-200 px-4 py-3.5 text-sm text-obsidian-700 placeholder:text-obsidian-300 outline-none focus:border-primary transition-colors"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-obsidian-500 uppercase tracking-wider font-medium mb-2 block">
                      Subject
                    </label>
                    <select
                      value={formData.subject}
                      onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                      className="w-full bg-white border border-obsidian-200 px-4 py-3.5 text-sm text-obsidian-700 outline-none focus:border-primary transition-colors appearance-none"
                    >
                      <option value="">Select a subject</option>
                      <option value="investment">Investment Inquiry</option>
                      <option value="property">Property Question</option>
                      <option value="company">Company Listing</option>
                      <option value="magazine">Magazine Subscription</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label className="text-xs text-obsidian-500 uppercase tracking-wider font-medium mb-2 block">
                    Message
                  </label>
                  <textarea
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                    placeholder="Tell us how we can help..."
                    rows={5}
                    className="w-full bg-white border border-obsidian-200 px-4 py-3.5 text-sm text-obsidian-700 placeholder:text-obsidian-300 outline-none focus:border-primary transition-colors resize-none"
                  />
                </div>

                <button
                  type="submit"
                  className="bg-primary text-white px-8 py-4 text-sm font-semibold uppercase tracking-wider hover:bg-orange-600 transition-colors inline-flex items-center gap-2"
                >
                  <Send size={16} /> Send Message
                </button>
              </form>
            </motion.div>

            {/* Map Placeholder */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={formInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.7, delay: 0.2 }}
              className="relative"
            >
              <div className="h-full min-h-[400px] bg-obsidian-200 relative overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2074&auto=format&fit=crop"
                  alt="Map"
                  className="h-full w-full object-cover opacity-70"
                />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="bg-white p-6 shadow-elevated text-center">
                    <div className="w-12 h-12 bg-primary flex items-center justify-center mx-auto mb-3">
                      <MapPin size={20} className="text-white" />
                    </div>
                    <p className="font-display text-sm font-bold text-obsidian-700 uppercase">
                      Diaspora Property HQ
                    </p>
                    <p className="text-xs text-obsidian-400 mt-1">
                      Westlands, Nairobi
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}