import { Swiper, Testimonial } from '@/components/pages/Home';
import { Button } from '@/components/ui/button';
import Layout from '@/layouts/client/layout';
import { about, artOfWeaving } from '@/routes';
import { useTranslations } from '@/utils/i18n';
import artofWeaving from '@asset/img/carpet/IMG_1301.jpg';
import kaleenCarpet from '@asset/img/carpet/IMG_3401.jpg';
import sooryaCarpet from '@asset/img/carpet/sci trad 31.jpg';
import { Head, Link } from '@inertiajs/react';
import { MoveRight } from 'lucide-react';

export default function Welcome({
    data,
}: {
    data: {
        carousel: [{ image_url: string; alt: string }];
        testimonial: [
            {
                name: string;
                location: string;
                image: string;
                description: string;
            },
        ];
    };
}) {
    const { t } = useTranslations();
    return (
        <>
            <Head title="Premium Hand Knotted Carpets in Nepal">
                <link rel="preconnect" href="https://fonts.bunny.net" />
                <link
                    href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
                    rel="stylesheet"
                />
                <meta
                    name="description"
                    content="Experience the finest hand-knotted carpets in Nepal with Soorya Carpet. Each piece is crafted by skilled artisans to deliver unmatched quality, luxury, and timeless design."
                />
            </Head>
            <Layout>
                <div>
                    <Swiper item={data?.carousel} />
                    <section className="mx-auto grid max-w-screen-2xl grid-cols-2 gap-20 px-16 py-12">
                        <img
                            src={sooryaCarpet}
                            alt="Soorya Carpet"
                            className="aspect-video rounded-lg object-cover object-center"
                        />
                        <div className="flex flex-col gap-4">
                            <div className="flex flex-col gap-1">
                                <h2 className="font-serif text-3xl font-medium">
                                    {t('pages.home.sections.first.title')}
                                </h2>
                                <p className="text-gray-500">
                                    {t('pages.home.sections.first.desc')}
                                </p>
                            </div>
                            <Link href={about()}>
                                <Button
                                    variant={'outline'}
                                    className="w-fit cursor-pointer border border-primary bg-transparent font-serif ring-primary"
                                >
                                    {t('pages.home.sections.first.button')}{' '}
                                    <MoveRight />
                                </Button>
                            </Link>
                        </div>
                    </section>
                    <section className="mx-auto grid max-w-screen-2xl grid-cols-2 gap-20 px-16 py-12">
                        <div className="flex flex-col gap-4">
                            <div className="flex flex-col gap-1">
                                <h3 className="font-serif text-3xl font-medium">
                                    {t('pages.home.sections.second.title')}
                                </h3>
                                <p className="text-gray-500">
                                    {t('pages.home.sections.second.desc')}
                                </p>
                            </div>
                            <Link href={about()}>
                                <Button
                                    variant={'outline'}
                                    className="w-fit cursor-pointer border border-primary bg-transparent font-serif ring-primary"
                                >
                                    {t('pages.home.sections.second.button')}
                                    <MoveRight />
                                </Button>
                            </Link>
                        </div>
                        <img
                            src={kaleenCarpet}
                            alt="Kaleen Carpet"
                            className="aspect-video rounded-lg object-cover object-center"
                        />
                    </section>
                    <section className="mx-auto grid max-w-screen-2xl grid-cols-2 gap-20 px-16 py-12">
                        <img
                            src={artofWeaving}
                            alt="Art of Weaving"
                            className="aspect-video rounded-lg object-cover object-center"
                        />
                        <div className="flex flex-col gap-4">
                            <div className="flex flex-col gap-1">
                                <h2 className="font-serif text-3xl font-medium">
                                    {t('pages.home.sections.third.title')}
                                </h2>
                                <p className="text-gray-500">
                                    {t('pages.home.sections.third.desc')}
                                </p>
                            </div>
                            <Link href={artOfWeaving()}>
                                <Button
                                    variant={'outline'}
                                    className="w-fit cursor-pointer border border-primary bg-transparent font-serif ring-primary"
                                >
                                    {t('pages.home.sections.third.button')}{' '}
                                    <MoveRight />
                                </Button>
                            </Link>
                        </div>
                    </section>
                    <Testimonial testimonial={data?.testimonial} />
                </div>
            </Layout>
        </>
    );
}
