"use client";

import { useState } from "react";
import { useScrollAnimation } from "@/lib/useScrollAnimation";
import { MapPin, Mail, Phone, Send, Facebook, Youtube, CheckCircle } from "lucide-react";

export default function ContactSection() {
  const ref = useScrollAnimation();
  const [form, setForm] = useState({
    name: "",
    phone: "",
    email: "",
    location: "",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);

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

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

  return (
    <section id="contact-us" className="py-24" style={{ background: "#F7F5F2" }} ref={ref as React.RefObject<HTMLElement>}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Header */}
        <div className="mb-16">
          <div className="animate-on-scroll inline-flex items-center gap-2 text-xs font-semibold tracking-widest uppercase mb-5" style={{ color: "#C9A84C" }}>
            <span className="w-8 h-px" style={{ background: "#C9A84C", display: "inline-block" }} aria-hidden="true" />
            Contact Us · 联系我们
          </div>
          <h2 className="animate-on-scroll font-serif text-4xl lg:text-5xl font-bold text-charcoal leading-snug">
            Get in <span style={{ color: "#2D5FA6" }}>Touch</span>
          </h2>
          <p className="animate-on-scroll text-charcoal/60 leading-relaxed mt-4 max-w-2xl">
            Reach out to our team for enquiries about membership, legal cooperation opportunities, or event participation. We are happy to assist.
          </p>
        </div>

        <div className="grid lg:grid-cols-5 gap-10">

          {/* Left: Contact info */}
          <div className="lg:col-span-2 space-y-6">

            {/* Primary address card */}
            <div
              className="animate-from-left rounded-2xl overflow-hidden"
              style={{ border: "1px solid rgba(45,95,166,0.12)", background: "white" }}
            >
              <div
                className="px-6 py-4 flex items-center gap-3"
                style={{ background: "linear-gradient(135deg, #1A1A2E 0%, #2D5FA6 100%)" }}
              >
                <div
                  className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
                  style={{ background: "rgba(255,255,255,0.12)" }}
                >
                  <MapPin className="w-4 h-4 text-white" />
                </div>
                <div>
                  <div className="text-white font-semibold text-sm">CALCC Malaysia</div>
                  <div className="text-white/50 text-xs">Secretariat Office · 秘书处</div>
                </div>
              </div>
              <div className="px-6 py-5 space-y-4">
                <div>
                  <div className="text-xs font-semibold text-charcoal/40 uppercase tracking-wider mb-1.5">Address</div>
                  <p className="text-sm text-charcoal/70 leading-relaxed">
                    AIAC, Bangunan Sulaiman<br />
                    Jalan Sultan Hishamuddin<br />
                    Kampung Attap<br />
                    50000 Kuala Lumpur, Malaysia
                  </p>
                </div>
                <div>
                  <div className="text-xs font-semibold text-charcoal/40 uppercase tracking-wider mb-1.5">Email</div>
                  <a
                    href="mailto:calcc.my@yahoo.com"
                    className="text-sm font-medium transition-colors cursor-pointer flex items-center gap-2"
                    style={{ color: "#2D5FA6" }}
                  >
                    <Mail className="w-4 h-4" />
                    calcc.my@yahoo.com
                  </a>
                </div>
                <div>
                  <div className="text-xs font-semibold text-charcoal/40 uppercase tracking-wider mb-1.5">Phone</div>
                  <a
                    href="tel:+60176122287"
                    className="text-sm font-medium transition-colors cursor-pointer flex items-center gap-2"
                    style={{ color: "#2D5FA6" }}
                  >
                    <Phone className="w-4 h-4" />
                    +60 17 612 2287
                  </a>
                </div>
              </div>
            </div>

            {/* Social links */}
            <div
              className="animate-from-left rounded-2xl p-6"
              style={{ background: "white", border: "1px solid rgba(45,95,166,0.1)", transitionDelay: "80ms" }}
            >
              <div className="text-xs font-semibold text-charcoal/40 uppercase tracking-wider mb-4">Follow Us</div>
              <div className="space-y-3">
                <a
                  href="https://www.facebook.com/calcc.world"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all duration-200 cursor-pointer group"
                  style={{ background: "rgba(24,119,242,0.06)", border: "1px solid rgba(24,119,242,0.12)", color: "#1877F2" }}
                >
                  <Facebook className="w-5 h-5 flex-shrink-0" />
                  <span>CALCC on Facebook</span>
                  <span className="ml-auto text-xs opacity-40 group-hover:opacity-70 transition-opacity">@calcc.world</span>
                </a>
                <a
                  href="https://www.youtube.com/@calcc"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all duration-200 cursor-pointer group"
                  style={{ background: "rgba(255,0,0,0.05)", border: "1px solid rgba(255,0,0,0.1)", color: "#FF0000" }}
                >
                  <Youtube className="w-5 h-5 flex-shrink-0" />
                  <span>CALCC on YouTube</span>
                  <span className="ml-auto text-xs opacity-40 group-hover:opacity-70 transition-opacity">@calcc</span>
                </a>
              </div>
            </div>

            {/* Working hours */}
            <div
              className="animate-from-left rounded-2xl p-6"
              style={{ background: "white", border: "1px solid rgba(45,95,166,0.1)", transitionDelay: "160ms" }}
            >
              <div className="text-xs font-semibold text-charcoal/40 uppercase tracking-wider mb-4">Office Hours</div>
              <div className="space-y-2 text-sm">
                {[
                  { day: "Monday – Friday", hours: "9:00 AM – 6:00 PM" },
                  { day: "Saturday", hours: "10:00 AM – 2:00 PM" },
                  { day: "Sunday & Public Holidays", hours: "Closed" },
                ].map((r) => (
                  <div key={r.day} className="flex justify-between items-center py-1.5" style={{ borderBottom: "1px solid rgba(0,0,0,0.05)" }}>
                    <span className="text-charcoal/60">{r.day}</span>
                    <span className={`font-medium ${r.hours === "Closed" ? "text-red-400" : "text-charcoal"}`}>{r.hours}</span>
                  </div>
                ))}
              </div>
              <p className="text-xs text-charcoal/40 mt-4">All times in MYT (UTC+8)</p>
            </div>
          </div>

          {/* Right: Contact form */}
          <div className="lg:col-span-3">
            <div
              className="animate-from-right rounded-2xl overflow-hidden"
              style={{ background: "white", border: "1px solid rgba(45,95,166,0.12)", boxShadow: "0 4px 24px rgba(45,95,166,0.06)" }}
            >
              <div className="px-8 py-6" style={{ borderBottom: "1px solid rgba(45,95,166,0.08)" }}>
                <h3 className="font-serif text-xl font-bold text-charcoal">Send Us a Message</h3>
                <p className="text-sm text-charcoal/50 mt-1">发送消息 · We'll get back to you within 2 business days</p>
              </div>

              {submitted ? (
                <div className="px-8 py-16 flex flex-col items-center text-center">
                  <div
                    className="w-16 h-16 rounded-full flex items-center justify-center mb-5"
                    style={{ background: "rgba(45,95,166,0.08)" }}
                  >
                    <CheckCircle className="w-8 h-8" style={{ color: "#2D5FA6" }} />
                  </div>
                  <h4 className="font-serif text-xl font-bold text-charcoal mb-2">Message Received</h4>
                  <p className="text-charcoal/60 text-sm leading-relaxed max-w-sm">
                    Thank you for reaching out. Our team will review your enquiry and respond within 2 business days.
                  </p>
                  <button
                    onClick={() => { setSubmitted(false); setForm({ name: "", phone: "", email: "", location: "", message: "" }); }}
                    className="mt-6 text-sm font-medium cursor-pointer transition-colors"
                    style={{ color: "#2D5FA6" }}
                  >
                    Send another message
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="px-8 py-6 space-y-5">
                  <div className="grid sm:grid-cols-2 gap-5">
                    <div>
                      <label htmlFor="contact-name" className="block text-xs font-semibold text-charcoal/60 uppercase tracking-wider mb-2">
                        Full Name <span style={{ color: "#C9A84C" }}>*</span>
                      </label>
                      <input
                        id="contact-name"
                        name="name"
                        type="text"
                        required
                        value={form.name}
                        onChange={handleChange}
                        placeholder="e.g. Ahmad bin Abdullah"
                        className="w-full rounded-xl px-4 py-3 text-sm text-charcoal placeholder:text-charcoal/30 outline-none transition-all duration-200"
                        style={{
                          border: "1.5px solid rgba(45,95,166,0.15)",
                          background: "#FAFAFA",
                        }}
                        onFocus={(e) => (e.currentTarget.style.border = "1.5px solid #2D5FA6")}
                        onBlur={(e) => (e.currentTarget.style.border = "1.5px solid rgba(45,95,166,0.15)")}
                      />
                    </div>
                    <div>
                      <label htmlFor="contact-phone" className="block text-xs font-semibold text-charcoal/60 uppercase tracking-wider mb-2">
                        Phone Number
                      </label>
                      <input
                        id="contact-phone"
                        name="phone"
                        type="tel"
                        value={form.phone}
                        onChange={handleChange}
                        placeholder="e.g. +60 12 345 6789"
                        className="w-full rounded-xl px-4 py-3 text-sm text-charcoal placeholder:text-charcoal/30 outline-none transition-all duration-200"
                        style={{
                          border: "1.5px solid rgba(45,95,166,0.15)",
                          background: "#FAFAFA",
                        }}
                        onFocus={(e) => (e.currentTarget.style.border = "1.5px solid #2D5FA6")}
                        onBlur={(e) => (e.currentTarget.style.border = "1.5px solid rgba(45,95,166,0.15)")}
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="contact-email" className="block text-xs font-semibold text-charcoal/60 uppercase tracking-wider mb-2">
                      Email Address <span style={{ color: "#C9A84C" }}>*</span>
                    </label>
                    <input
                      id="contact-email"
                      name="email"
                      type="email"
                      required
                      value={form.email}
                      onChange={handleChange}
                      placeholder="e.g. name@lawfirm.com"
                      className="w-full rounded-xl px-4 py-3 text-sm text-charcoal placeholder:text-charcoal/30 outline-none transition-all duration-200"
                      style={{
                        border: "1.5px solid rgba(45,95,166,0.15)",
                        background: "#FAFAFA",
                      }}
                      onFocus={(e) => (e.currentTarget.style.border = "1.5px solid #2D5FA6")}
                      onBlur={(e) => (e.currentTarget.style.border = "1.5px solid rgba(45,95,166,0.15)")}
                    />
                  </div>

                  <div>
                    <label htmlFor="contact-location" className="block text-xs font-semibold text-charcoal/60 uppercase tracking-wider mb-2">
                      Location / Country
                    </label>
                    <select
                      id="contact-location"
                      name="location"
                      value={form.location}
                      onChange={handleChange}
                      className="w-full rounded-xl px-4 py-3 text-sm text-charcoal outline-none transition-all duration-200 cursor-pointer"
                      style={{
                        border: "1.5px solid rgba(45,95,166,0.15)",
                        background: "#FAFAFA",
                        color: form.location ? "#1A1A2E" : "rgba(26,26,46,0.35)",
                        appearance: "none",
                      }}
                    >
                      <option value="" disabled>Select your country</option>
                      {["Malaysia", "China", "Singapore", "Thailand", "Philippines", "Vietnam", "Myanmar", "Cambodia", "Indonesia", "Laos", "Brunei", "Other"].map((c) => (
                        <option key={c} value={c}>{c}</option>
                      ))}
                    </select>
                  </div>

                  <div>
                    <label htmlFor="contact-message" className="block text-xs font-semibold text-charcoal/60 uppercase tracking-wider mb-2">
                      Message <span style={{ color: "#C9A84C" }}>*</span>
                    </label>
                    <textarea
                      id="contact-message"
                      name="message"
                      required
                      rows={5}
                      value={form.message}
                      onChange={handleChange}
                      placeholder="Please describe your enquiry — membership, legal services, event collaboration, MOU facilitation, etc."
                      className="w-full rounded-xl px-4 py-3 text-sm text-charcoal placeholder:text-charcoal/30 outline-none transition-all duration-200 resize-none"
                      style={{
                        border: "1.5px solid rgba(45,95,166,0.15)",
                        background: "#FAFAFA",
                      }}
                      onFocus={(e) => (e.currentTarget.style.border = "1.5px solid #2D5FA6")}
                      onBlur={(e) => (e.currentTarget.style.border = "1.5px solid rgba(45,95,166,0.15)")}
                    />
                  </div>

                  <div className="flex items-center justify-between pt-2">
                    <p className="text-xs text-charcoal/40">
                      <span style={{ color: "#C9A84C" }}>*</span> Required fields
                    </p>
                    <button
                      type="submit"
                      className="inline-flex items-center gap-2.5 px-6 py-3 rounded-xl text-sm font-semibold text-white transition-all duration-200 cursor-pointer"
                      style={{ background: "#2D5FA6" }}
                      onMouseEnter={(e) => (e.currentTarget.style.background = "#1e4a8a")}
                      onMouseLeave={(e) => (e.currentTarget.style.background = "#2D5FA6")}
                    >
                      <Send className="w-4 h-4" />
                      Send Message
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}