"use client";
import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import {
  Phone,
  MapPin,
  Mail
} from "lucide-react"; // Make sure lucide-react is installed
const ContactUs: React.FC = () => {
  return (
    <section className="bg-gray-50 py-12">
      <div className="max-w-6xl mx-auto px-6 text-center">
        {/* Heading and Description */}
        <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>

        {/* Contact Cards */}
        <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">
    {/* Phone Section */}
    <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>
    </div>

    {/* Address Section */}
    <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 Startbucks, Abu Dhabi UAE.
      </p>
      <p className="text-sm text-gray-500">
        Working hours: 8 AM - 8 PM (Mon-Sun)
      </p>
    </div>

    {/* Email Section */}
    <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 className="space-y-4 w-full">
                <div className="flex flex-col">
                 
                  <input
                    type="text"
                    placeholder="Enter your name"
                    className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
                  />
                </div>
                <div className="flex flex-col">
                  
                  <input
                    type="tel"
                    placeholder="Enter your phone number"
                    className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
                  />
                </div>
                <div className="flex flex-col">
                  
                  <input
                    type="email"
                    placeholder="Enter your email address"
                    className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
                  />
                </div>
                <div className="flex flex-col">
                
                  <textarea
                    placeholder="Enter your message"
                    rows={4}
                    className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
                  />
                </div>
                <button
                  type="submit"
                  className="mt-4 bg-blue-600 text-white p-2 rounded-md w-full hover:bg-blue-700 transition"
                >
                  Submit
                </button>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
};

export default ContactUs;