import { useState, useRef } from "react";
import { motion, useInView } from "framer-motion";
import { MessageCircle, Mail, MapPin, Clock } from "lucide-react";

function FadeIn({ children, delay = 0, className = "" }: { children: React.ReactNode; delay?: number; className?: string }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-40px" });
  return (
    <motion.div ref={ref} initial={{ opacity: 0, y: 24 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.65, delay, ease: [0.22, 1, 0.36, 1] }} className={className}>
      {children}
    </motion.div>
  );
}

const CITY_CONTACTS = [
  { city: "Mumbai", email: "mumbai@elitecompanions.in", whatsapp: "+91 98200 00001" },
  { city: "Delhi", email: "delhi@elitecompanions.in", whatsapp: "+91 98100 00001" },
  { city: "Bangalore", email: "bangalore@elitecompanions.in", whatsapp: "+91 98400 00001" },
  { city: "Hyderabad", email: "hyderabad@elitecompanions.in", whatsapp: "+91 98500 00001" },
  { city: "Pune", email: "pune@elitecompanions.in", whatsapp: "+91 98600 00001" },
  { city: "Indore", email: "indore@elitecompanions.in", whatsapp: "+91 98700 00001" },
];

export default function Contact() {
  const [sent, setSent] = useState(false);

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

  return (
    <div className="pt-20 min-h-screen">
      <div className="py-20 text-center border-b border-border bg-card">
        <FadeIn>
          <span className="text-xs tracking-[0.35em] uppercase text-primary mb-3 block">Get in Touch</span>
          <h1 className="font-serif text-5xl sm:text-6xl text-foreground mb-4">Contact Us</h1>
          <p className="text-muted-foreground max-w-xl mx-auto text-base">
            Every inquiry is handled personally by our concierge team. We respond within 24 hours with complete discretion.
          </p>
        </FadeIn>
      </div>

      <div className="max-w-6xl mx-auto px-6 py-20 grid grid-cols-1 lg:grid-cols-2 gap-16">
        {/* Form */}
        <FadeIn>
          <span className="text-xs tracking-[0.25em] uppercase text-primary mb-3 block">Private Inquiry</span>
          <h2 className="font-serif text-3xl text-foreground mb-8">Send an Inquiry</h2>
          {!sent ? (
            <form onSubmit={handleSubmit} className="space-y-5">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm tracking-widest uppercase text-muted-foreground block mb-1.5">First Name</label>
                  <input required placeholder="Your name" className="w-full bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/40 transition-colors placeholder:text-muted-foreground/40" />
                </div>
                <div>
                  <label className="text-sm tracking-widest uppercase text-muted-foreground block mb-1.5">City</label>
                  <select className="w-full bg-muted border border-border text-muted-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/40 transition-colors [color-scheme:dark]">
                    <option value="">Select city</option>
                    {CITY_CONTACTS.map(c => <option key={c.city} value={c.city}>{c.city}</option>)}
                  </select>
                </div>
              </div>
              <div>
                <label className="text-sm tracking-widest uppercase text-muted-foreground block mb-1.5">Email Address</label>
                <input required type="email" placeholder="your@email.com" className="w-full bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/40 transition-colors placeholder:text-muted-foreground/40" />
              </div>
              <div>
                <label className="text-sm tracking-widest uppercase text-muted-foreground block mb-1.5">WhatsApp Number (Optional)</label>
                <input type="tel" placeholder="+91 98XXX XXXXX" className="w-full bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/40 transition-colors placeholder:text-muted-foreground/40" />
              </div>
              <div>
                <label className="text-sm tracking-widest uppercase text-muted-foreground block mb-1.5">Type of Experience</label>
                <select className="w-full bg-muted border border-border text-muted-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/40 transition-colors [color-scheme:dark]">
                  <option value="">Select a service</option>
                  {["Dinner Companion", "Travel Companion", "Event Companion", "Corporate Event Partner", "Movie & Entertainment", "City Guide", "Weekend Experience"].map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>
              <div>
                <label className="text-sm tracking-widest uppercase text-muted-foreground block mb-1.5">Preferred Date</label>
                <input type="date" className="w-full bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/40 transition-colors [color-scheme:dark]" />
              </div>
              <div>
                <label className="text-sm tracking-widest uppercase text-muted-foreground block mb-1.5">Your Message</label>
                <textarea required rows={4} placeholder="Please describe the occasion, your preferences, and any special requirements..." className="w-full bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/40 transition-colors resize-none placeholder:text-muted-foreground/40" />
              </div>
              <button type="submit" className="w-full py-4 bg-primary text-background text-xs tracking-[0.3em] uppercase hover:bg-primary/90 transition-colors">
                Submit Inquiry
              </button>
              <p className="text-sm text-muted-foreground/50 text-center leading-relaxed">
                All submissions are handled with complete confidentiality by our senior concierge team.
              </p>
            </form>
          ) : (
            <div className="py-16 text-center border border-primary/20 bg-card">
              <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">Received</span>
              <h3 className="font-serif text-3xl text-foreground mb-4">Thank You</h3>
              <p className="text-muted-foreground text-sm max-w-sm mx-auto leading-relaxed">
                Your inquiry has been received. A member of our concierge team will contact you personally within 24 hours.
              </p>
            </div>
          )}
        </FadeIn>

        {/* Contact info */}
        <div className="space-y-12">
          <FadeIn delay={0.1}>
            <span className="text-xs tracking-[0.25em] uppercase text-primary mb-3 block">Direct Contact</span>
            <h2 className="font-serif text-3xl text-foreground mb-8">Reach Us Directly</h2>
            <div className="space-y-6">
              <div className="flex items-start gap-4 p-6 border border-border">
                <MessageCircle size={18} className="text-primary mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-foreground mb-1">WhatsApp</p>
                  <p className="text-xs text-muted-foreground mb-2">Preferred for urgent inquiries. Encrypted, discreet.</p>
                  <a href="https://wa.me/919820000000" className="text-sm text-primary hover:underline">+91 98200 00000 (Main Line)</a>
                </div>
              </div>
              <div className="flex items-start gap-4 p-6 border border-border">
                <Mail size={18} className="text-primary mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-foreground mb-1">Email</p>
                  <p className="text-xs text-muted-foreground mb-2">For detailed inquiries and documentation.</p>
                  <a href="mailto:concierge@elitecompanions.in" className="text-sm text-primary hover:underline">concierge@elitecompanions.in</a>
                </div>
              </div>
              <div className="flex items-start gap-4 p-6 border border-border">
                <Clock size={18} className="text-primary mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-foreground mb-1">Response Time</p>
                  <p className="text-xs text-muted-foreground">All inquiries responded to within 24 hours. Urgent matters within 2 hours during business hours (10am–10pm IST, 7 days).</p>
                </div>
              </div>
            </div>
          </FadeIn>

          <FadeIn delay={0.15}>
            <span className="text-xs tracking-[0.25em] uppercase text-primary mb-4 block">City-Specific Support</span>
            <div className="space-y-3">
              {CITY_CONTACTS.map(({ city, email, whatsapp }) => (
                <div key={city} className="flex items-center justify-between py-3 border-b border-border/50">
                  <div className="flex items-center gap-3">
                    <MapPin size={12} className="text-primary shrink-0" />
                    <span className="text-sm text-foreground">{city}</span>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-muted-foreground">{whatsapp}</p>
                  </div>
                </div>
              ))}
            </div>
          </FadeIn>
        </div>
      </div>
    </div>
  );
}
