import React from 'react';

const ContactPage = () => {
    async function contactForm(formData) {
        "use server";
        const rawFormData = {
            name: formData.get('name'),
            email: formData.get('email'),
            message: formData.get('message'),
        };
        console.log(rawFormData);
    };

    return (
        <div className="bg-gray-100 mx-auto text-gray-900 px-4 pt-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-6">Contact Techaro Computing Canada</h1>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="text-gray-900">
                    <h2 className="text-xl font-semibold mb-4">Get in Touch</h2>
                    <p className="mb-4">We would love to hear from you. Please fill out the form below or use our contact information.</p>

                    <h3 className="text-lg font-semibold mb-2">Contact Information</h3>
                    <p>Email: sales@techaro.lol</p>
                    <p>Phone: (123) 456-7890</p>
                    <p>Address: 123 Tech Street, Toronto, ON M5V 1J2</p>
                </div>

                <div className="pb-4">
                    <h2 className="text-xl font-semibold mb-4">Contact Form</h2>
                    <form className="space-y-4" action={contactForm}>
                        <div>
                            <label htmlFor="name" className="block mb-1">Name</label>
                            <input disabled type="text" id="name" name="name" className="w-full px-3 py-2 border rounded" required />
                        </div>
                        <div>
                            <label htmlFor="email" className="block mb-1">Email</label>
                            <input disabled type="email" id="email" name="email" className="w-full px-3 py-2 border rounded" required />
                        </div>
                        <div>
                            <label htmlFor="message" className="block mb-1">Message</label>
                            <textarea disabled id="message" name="message" rows="4" className="w-full px-3 py-2 border rounded" required></textarea>
                        </div>
                        <button type="submit" disabled className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    );
};

export default ContactPage;