import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
 
export default function ContactSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <div className="grid items-center gap-12 lg:grid-cols-2">
                    <div className="lg:order-2">
                        <div className="text-center lg:ml-auto lg:max-w-lg lg:text-left">
                            <h2 className="text-3xl/tight font-semibold tracking-tight sm:text-4xl/tight">Contact Us</h2>
                            <p className="text-muted-foreground mt-4 text-base/7 sm:text-lg/8">Aliquet adipiscing lectus praesent lectus.</p>
                            <form className="mt-12 space-y-6">
                                <div className="space-y-2">
                                    <Label htmlFor="name">Name</Label>
                                    <Input id="name" name="name" type="text" className="h-10" required />
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="email">Email</Label>
                                    <Input id="email" name="email" type="email" className="h-10" required />
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="message">Message</Label>
                                    <Textarea id="message" name="message" className="h-32" required />
                                </div>
                                <Button className="w-full" size="lg">
                                    Send Message
                                </Button>
                            </form>
                            <div className="my-8 flex items-center">
                                <span className="flex-grow border-t"></span>
                                <span className="text-muted-foreground mx-4 text-xs font-medium uppercase">Or Call Us</span>
                                <span className="flex-grow border-t"></span>
                            </div>
                            <a href="tel:+1234567890" className="flex justify-center text-base font-medium hover:underline">
                                +1 555 505 5050
                            </a>
                        </div>
                    </div>
 
                    <div className="hidden lg:block">
                        <img
                            className="aspect-[4/5] rounded-xl object-cover object-center shadow-sm"
                            src="https://blookie.io/stock/contacts-1-1.webp"
                            alt="Contact illustration"
                        />
                    </div>
                </div>
            </div>
        </section>
    );
}