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 { useTranslations } from '@/utils/i18n';
import { Form, Head } from '@inertiajs/react';
import { Mail, MapPin, Phone } from 'lucide-react';

export default function Contact() {
    const { t } = useTranslations();
    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">
                            {t('pages.contact.sections.first.title')}
                        </h1>
                        <p className="text-center text-sm">
                            {t('pages.contact.sections.first.subTitle')} <br />{' '}
                            {t('pages.contact.sections.first.subTitle2')}
                        </p>
                    </div>
                    <div className="flex flex-col gap-8">
                        <h2 className="text-center font-serif text-3xl font-medium tracking-tight">
                            {t('pages.contact.sections.second.title')}
                        </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">
                                        {t(
                                            'pages.contact.sections.second.soorya.title',
                                        )}
                                    </p>
                                    <p className="text-sm text-gray-500">
                                        {t(
                                            'pages.contact.sections.second.soorya.subTitle',
                                        )}
                                    </p>
                                </div>

                                <ul className="flex flex-col gap-2">
                                    <li className="flex items-center gap-2 text-sm">
                                        <MapPin size={16} />{' '}
                                        {t(
                                            'pages.contact.sections.second.soorya.address',
                                        )}
                                    </li>{' '}
                                    <li className="flex items-center gap-2 text-sm">
                                        <Phone size={16} />{' '}
                                        {t(
                                            'pages.contact.sections.second.soorya.phone',
                                        )}
                                    </li>{' '}
                                    <li className="flex items-center gap-2 text-sm">
                                        <Mail size={16} />{' '}
                                        {t(
                                            'pages.contact.sections.second.soorya.email',
                                        )}
                                    </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">
                                        {t(
                                            'pages.contact.sections.second.kaleen.title',
                                        )}
                                    </p>
                                    <p className="text-sm text-gray-500">
                                        {t(
                                            'pages.contact.sections.second.kaleen.subTitle',
                                        )}
                                    </p>
                                </div>

                                <ul className="flex flex-col gap-2">
                                    <li className="flex items-center gap-2 text-sm">
                                        <MapPin size={16} />{' '}
                                        {t(
                                            'pages.contact.sections.second.kaleen.address',
                                        )}
                                    </li>{' '}
                                    <li className="flex items-center gap-2 text-sm">
                                        <Phone size={16} />{' '}
                                        {t(
                                            'pages.contact.sections.second.kaleen.phone',
                                        )}
                                    </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'}
                                    >
                                        {t(
                                            'pages.contact.sections.second.kaleen.button',
                                        )}
                                    </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">
                                {t('pages.contact.sections.third.title')}
                            </h3>
                            <p className="text-sm text-gray-500">
                                {t('pages.contact.sections.third.subTitle')}
                            </p>
                        </div>

                        <Form action={'/'} className="flex flex-col gap-2">
                            <div>
                                <Label htmlFor="name">
                                    {t(
                                        'pages.contact.sections.third.form.name.label',
                                    )}
                                </Label>
                                <Input
                                    placeholder={t(
                                        'pages.contact.sections.third.form.name.input',
                                    )}
                                    id="name"
                                    name="name"
                                />
                            </div>
                            <div>
                                <Label htmlFor="email">
                                    {t(
                                        'pages.contact.sections.third.form.email.label',
                                    )}
                                </Label>
                                <Input
                                    placeholder={t(
                                        'pages.contact.sections.third.form.email.input',
                                    )}
                                    id="email"
                                    name="email"
                                />
                            </div>{' '}
                            <div>
                                <Label htmlFor="email">
                                    {t(
                                        'pages.contact.sections.third.form.inquiry.label',
                                    )}
                                </Label>
                                <Select>
                                    <SelectTrigger className="w-full">
                                        <SelectValue
                                            placeholder={t(
                                                'pages.contact.sections.third.form.inquiry.input',
                                            )}
                                        />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="problem">
                                            Problem in product
                                        </SelectItem>
                                        <SelectItem value="contact">
                                            Contacting
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div>
                                <Label htmlFor="message">
                                    {t(
                                        'pages.contact.sections.third.form.message.label',
                                    )}
                                </Label>
                                <Textarea
                                    id="message"
                                    placeholder={t(
                                        'pages.contact.sections.third.form.message.input',
                                    )}
                                />
                            </div>
                            <Button type="submit" className="my-4">
                                {t('pages.contact.sections.third.form.button')}
                            </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">
                                {t('pages.contact.sections.fourth.title')}
                            </h4>
                            <p className="text-center text-sm text-gray-500">
                                {t('pages.contact.sections.fourth.desc')} <br />{' '}
                                {t('pages.contact.sections.fourth.desc2')}
                            </p>
                        </div>
                        <div className="flex items-center gap-4">
                            <a href="tel:9802341880">
                                <Button className="cursor-pointer">
                                    <Phone />{' '}
                                    {t('pages.contact.sections.fourth.callBtn')}
                                </Button>
                            </a>
                            <a href="mailto:info@soory.com">
                                <Button
                                    variant={'outline'}
                                    className="cursor-pointer border border-primary text-primary ring-primary"
                                >
                                    <Mail />{' '}
                                    {t(
                                        'pages.contact.sections.fourth.emailBtn',
                                    )}
                                </Button>
                            </a>
                        </div>
                    </div>
                </section>
            </Layout>
        </>
    );
}
