import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import Layout from '@/layouts/client/layout';
import { Form, Head } from '@inertiajs/react';
import { Mail, MapPin, Phone } from 'lucide-react';

export default function Contact() {
    return (
        <>
            <Layout>
                <Head title="Contact Us" />
                <section className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-12 max-md:px-8">
                    <div className="flex flex-col gap-4">
                        <h1 className="text-center font-serif text-5xl font-medium tracking-tight max-md:text-3xl">
                            Connect with Kaleen Carpets
                        </h1>
                        <p className="text-center text-sm">
                            We are here to assist you with any inquiries,
                            bespoke design requests, or partnership
                            opportunities. <br /> Reach out to our team through
                            our offices or the contact form below.
                        </p>
                    </div>
                    <div className="flex flex-col gap-8">
                        <h2 className="text-center font-serif text-3xl font-medium tracking-tight">
                            Our Global Offices
                        </h2>
                        <div className="flex items-start justify-center gap-24 max-md:flex-col max-md:gap-12">
                            <div className="flex flex-col gap-6">
                                <div className="flex flex-col gap-1">
                                    <p className="font-serif text-xl font-medium tracking-tight">
                                        Soorya Carpet Industries
                                    </p>
                                    <p className="text-sm text-gray-500">
                                        Our global presence to serve you better.
                                    </p>
                                </div>

                                <ul className="flex flex-col gap-2">
                                    <li className="flex items-center gap-2 text-sm">
                                        <MapPin size={16} /> G.P.O Box 1765 2
                                        Swet Binayak Marg Thapathali -11,
                                        Kathmandu, Nepal
                                    </li>{' '}
                                    <li className="flex items-center gap-2 text-sm">
                                        <Phone size={16} /> [+977-1] 4780923,
                                        4783003
                                    </li>{' '}
                                    <li className="flex items-center gap-2 text-sm">
                                        <Mail size={16} />{' '}
                                        sooryacarpets@gmail.com
                                    </li>
                                </ul>
                            </div>
                            <div className="flex flex-col gap-6">
                                <div className="flex flex-col gap-1">
                                    <p className="font-serif text-xl font-medium tracking-tight">
                                        Kaleen Studio
                                    </p>
                                    <p className="text-sm text-gray-500">
                                        Our global presence to serve you better.
                                    </p>
                                </div>

                                <ul className="flex flex-col gap-2">
                                    <li className="flex items-center gap-2 text-sm">
                                        <MapPin size={16} /> Kadel Chautari
                                        Prasuti Griha Marg Ward No. 11,
                                        Babarmahal Kathmandu, Nepal
                                    </li>{' '}
                                    <li className="flex items-center gap-2 text-sm">
                                        <Phone size={16} /> 9802341880
                                    </li>
                                </ul>
                                <a
                                    href="https://maps.app.goo.gl/666dbJEfsVvjJ3fu9"
                                    target="_blank"
                                    className="cursor-pointer"
                                >
                                    <Button
                                        className="w-full cursor-pointer border border-primary text-primary ring-primary"
                                        variant={'outline'}
                                    >
                                        Visit Studio
                                    </Button>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 py-12">
                        <div className="flex flex-col gap-1">
                            <h3 className="font-serif text-3xl font-medium">
                                Send us a Message
                            </h3>
                            <p className="text-sm text-gray-500">
                                Fill out the form below and we'll get back to
                                you as soon as possible.
                            </p>
                        </div>

                        <Form action={'/'} className="flex flex-col gap-2">
                            <div>
                                <Label htmlFor="name">Name</Label>
                                <Input
                                    placeholder="Full Name"
                                    id="name"
                                    name="name"
                                />
                            </div>
                            <div>
                                <Label htmlFor="email">Email</Label>
                                <Input
                                    placeholder="your.email@example.com"
                                    id="email"
                                    name="email"
                                />
                            </div>{' '}
                            <div>
                                <Label htmlFor="email">Email</Label>
                                <Select>
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder="Select an inquiry type" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="problem">
                                            Problem in product
                                        </SelectItem>
                                        <SelectItem value="contact">
                                            Contacting
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div>
                                <Label htmlFor="message">Message</Label>
                                <Textarea
                                    id="message"
                                    placeholder="Tell us how can we help you"
                                />
                            </div>
                            <Button type="submit" className="my-4">
                                Send Message
                            </Button>
                        </Form>
                    </div>
                    <div className="flex flex-col items-center gap-8">
                        <div className="flex flex-col items-center gap-2">
                            <h4 className="text-center font-serif text-3xl font-medium tracking-tight">
                                Direct Engagement
                            </h4>
                            <p className="text-center text-sm text-gray-500">
                                Prefer to speak with us directly or send a quick
                                email? <br /> Our team is ready to assist.
                            </p>
                        </div>
                        <div className="flex items-center gap-4">
                            <a href="tel:9802341880">
                                <Button className="cursor-pointer">
                                    <Phone /> Call Us Now
                                </Button>
                            </a>
                            <a href="mailto:info@soory.com">
                                <Button
                                    variant={'outline'}
                                    className="cursor-pointer border border-primary text-primary ring-primary"
                                >
                                    <Mail /> Email Our Team
                                </Button>
                            </a>
                        </div>
                    </div>
                </section>
            </Layout>
        </>
    );
}
