"use client";


export default function ContactUsForm() {
    return (
        <div
            className={"flex flex-col md:flex-row  items-center w-full border border-gray-200 bg-green-50/50 p-2 md:p-8 rounded-xl gap-x-8 space-y-8"}>

            <div className={"w-full md:w-1/2"}>
                <h1 className={"section-title-sm"}>Contact Us</h1>
                <p className={"mt-4 text-gray-500 dark:text-gray-400"}>
                    Fill out this form to connect with our dedicated Customer Support Team for any inquiries, issues, or
                    suggestions you may have.
                </p>

                <div className={"flex flex-col mt-4 p-4 border rounded-lg"}>
                    <p className={"text-lg md:xl "}>Email</p>
                    <a href={"mailto:info@lulamachat.co.za"}>info@lulamachat.co.za</a>
                </div>
                <div className={"flex flex-col mt-2 p-4 border rounded-lg"}>
                    <p className={"text-lg md:xl "}>Phone Number</p>
                    <a href={"tel:+26876000000"}>+268 7600 0000</a>
                </div>
                <div className={"flex flex-col mt-2 p-4 border rounded-lg"}>
                    <p className={"text-lg md:xl "}>Address</p>
                    <p>Mbabane, Mbabane, Eswatini</p>
                </div>
            </div>

            <form className="w-full md:w-1/2 border p-4 rounded-3xl bg-white">
                <div className="mb-6">
                    <label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
                        email</label>
                    <input type="email" id="email"
                           className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           placeholder="name@company.com" required/>
                </div>
                <div className="mb-6">
                    <label htmlFor="subject"
                           className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Subject</label>
                    <input type="text" id="subject"
                           className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           placeholder="Let us know how we can help you" required/>
                </div>
                <div className="mb-6">
                    <label htmlFor="message" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
                        message</label>
                    <textarea id="message" rows={4}
                              className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                              placeholder="Your message..."/>
                </div>
                <button type="submit"
                        className="text-white bg-green-700 hover:bg-green-800 w-full focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none dark:focus:ring-green-800 block">
                    Send message
                </button>
            </form>
        </div>
    )
}