"use client";
import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Phone, MapPin, Mail } from "lucide-react";

const ContactUs: React.FC = () => {
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    message: "",
  });

  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState("");

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setStatus("");

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

   await res.json();
      if (res.ok) {
        setStatus("Message sent successfully.");
        setFormData({ name: "", phone: "", email: "", message: "" });
      } else {
        setStatus("Failed to send message.");
      }
    } catch (error) {
      setStatus(`Something went wrong.${ error}` );
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="bg-gray-50 py-12">
      <div className="max-w-6xl mx-auto px-6 text-center">
        <h2 className="text-4xl md:text-5xl font-extrabold text-gray-800 mb-4">
          How To <span className="text-blue-600">Reach</span> Us
        </h2>
        <p className="text-lg md:text-xl text-gray-600 mx-auto max-w-2xl leading-relaxed">
          We’re here to help you. Please feel free to send us an email or call us for any concerns that you may have. We will always be happy to assist you.
        </p>

        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Info Card */}
          <Card className="shadow-md flex flex-col justify-between h-full text-left">
            <CardContent className="space-y-6 my-4">
              <div>
                <h3 className="flex items-center text-gray-700 font-medium text-lg mb-2 gap-2">
                  <Phone className="w-5 h-5 text-blue-600" />
                  Call Us / WhatsApp on
                </h3>
                <p className="text-blue-600 font-semibold">+971 58 556 1554</p>
                <p className="text-blue-600 font-semibold">+971 56 451 8089</p>
                <p className="text-blue-600 font-semibold">+971 2 5561570</p>
              </div>

              <div>
                <h3 className="flex items-center text-gray-700 font-medium text-lg mb-2 gap-2">
                  <MapPin className="w-5 h-5 text-blue-600" />
                  Office Address
                </h3>
                <p className="text-blue-600 font-semibold">
                  802 Al Ain Ahalia Insurance Building, Hamdan Street, Near To Starbucks, Abu Dhabi UAE.
                </p>
                <p className="text-sm text-gray-500">Working hours: 8 AM - 8 PM (Mon-Sun)</p>
              </div>

              <div>
                <h3 className="flex items-center text-gray-700 font-medium text-lg mb-2 gap-2">
                  <Mail className="w-5 h-5 text-blue-600" />
                  Email Us
                </h3>
                <p className="text-gray-500">For General Inquiries</p>
                <p className="text-blue-600 font-semibold">apply@banksfinders.com</p>
              </div>
            </CardContent>
          </Card>

          {/* Form Card */}
          <Card className="shadow-md flex flex-col justify-between h-full">
            <CardContent className="space-y-6 my-4">
              <form onSubmit={handleSubmit} className="space-y-4 w-full text-left">
                <input
                  type="text"
                  name="name"
                  placeholder="Enter your name"
                  value={formData.name}
                  onChange={handleChange}
                  className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 w-full"
                />
                <input
                  type="tel"
                  name="phone"
                  placeholder="Enter your phone number"
                  value={formData.phone}
                  onChange={handleChange}
                  className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 w-full"
                />
                <input
                  type="email"
                  name="email"
                  placeholder="Enter your email address"
                  value={formData.email}
                  onChange={handleChange}
                  className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 w-full"
                />
                <textarea
                  name="message"
                  placeholder="Enter your message"
                  rows={4}
                  value={formData.message}
                  onChange={handleChange}
                  className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 w-full"
                />
                <button
                  type="submit"
                  disabled={loading}
                  className="mt-4 bg-blue-600 text-white p-2 rounded-md w-full hover:bg-blue-700 transition disabled:opacity-50"
                >
                  {loading ? "Sending..." : "Submit"}
                </button>
                {status && <p className="text-sm text-center mt-2">{status}</p>}
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
};

export default ContactUs;