import { Swiper, Testimonial } from '@/components/pages/Home';
import { Button } from '@/components/ui/button';
import Layout from '@/layouts/client/layout';
import { about } from '@/routes';
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 }] };
}) {
    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">
                                    Soorya Carpet
                                </h2>
                                <p className="text-gray-500">
                                    Discover the journey of Kaleen Carpets, a
                                    testament to enduring craftsmanship,
                                    innovative design, and a commitment to
                                    enriching lives through beautiful artistry.
                                </p>
                            </div>
                            <Link href={about()}>
                                <Button
                                    variant={'outline'}
                                    className="w-fit cursor-pointer border border-primary bg-transparent font-serif ring-primary"
                                >
                                    Learn More <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">
                                    The Kaleen Rebrand
                                </h3>
                                <p className="text-gray-500">
                                    In 2015, Kaleen embarked on a transformative
                                    journey, evolving from a traditional
                                    manufacturer to a dynamic, luxury lifestyle
                                    brand.
                                </p>
                            </div>
                            <Button
                                variant={'outline'}
                                className="w-fit border border-primary bg-transparent font-serif ring-primary"
                            >
                                Learn More <MoveRight />
                            </Button>
                        </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">
                                    Art of Weaving
                                </h2>
                                <p className="text-gray-500">
                                    Since time immemorial, the art of carpet
                                    making has captured millions of carpet
                                    connoisseurs from around the world and still
                                    continues to do so.
                                </p>
                            </div>
                            <Button
                                variant={'outline'}
                                className="w-fit border border-primary bg-transparent font-serif ring-primary"
                            >
                                Learn More <MoveRight />
                            </Button>
                        </div>
                    </section>
                    <Testimonial />
                </div>
            </Layout>
        </>
    );
}
