import { Button } from '@/components/ui/button';
import Layout from '@/layouts/client/layout';
import { useTranslations } from '@/utils/i18n';
import bespokeHeader from '@asset/img/products/color swatches.jpg';
import { Head } from '@inertiajs/react';
import { ClipboardList, Paintbrush, Palette, Truck } from 'lucide-react';

export default function Bespoke({
    product,
}: {
    product: [{ id: number; title: string; type: string; image_url: string }];
}) {
    console.log(product);
    const { t } = useTranslations();
    return (
        <>
            <Layout>
                <Head title="Bespoke Design" />
                <section className="">
                    <div className="relative">
                        <div className="absolute h-full w-full bg-white/30"></div>
                        <img
                            src={bespokeHeader}
                            alt="Bespoke Design"
                            className="aspect-[16/4] object-cover object-center max-sm:aspect-[16/9]"
                        />
                        <div className="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-2">
                            <h1 className="text-center font-serif text-5xl font-medium tracking-tight max-md:text-4xl max-sm:text-2xl">
                                {t('pages.bespoke.sections.banner.title')}
                            </h1>
                            <p className="text-center text-lg text-gray-800 max-sm:text-sm">
                                {t('pages.bespoke.sections.banner.subTitle')}
                            </p>
                        </div>
                    </div>
                </section>
                <section className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-18 max-sm:px-8">
                    <h2 className="text-center font-serif text-4xl font-medium max-md:text-2xl">
                        {t('pages.bespoke.sections.first.title')}
                    </h2>
                    <div className="grid grid-cols-4 gap-4 max-md:grid-cols-2 max-sm:grid-cols-1">
                        <div className="flex flex-col items-center justify-center gap-2">
                            <ClipboardList size={40} color="#5A1A1A" />
                            <p className="text-center font-serif text-xl font-medium">
                                {t(
                                    'pages.bespoke.sections.first.card.first.title',
                                )}
                            </p>
                            <p className="px-4 text-center text-sm">
                                {t(
                                    'pages.bespoke.sections.first.card.first.desc',
                                )}
                            </p>
                        </div>
                        <div className="flex flex-col items-center justify-center gap-2">
                            <Palette size={40} color="#5A1A1A" />
                            <p className="text-center font-serif text-xl font-medium">
                                {t(
                                    'pages.bespoke.sections.first.card.second.title',
                                )}
                            </p>
                            <p className="px-4 text-center text-sm">
                                {t(
                                    'pages.bespoke.sections.first.card.second.desc',
                                )}
                            </p>
                        </div>
                        <div className="flex flex-col items-center justify-center gap-2">
                            <Paintbrush size={40} color="#5A1A1A" />
                            <p className="text-center font-serif text-xl font-medium">
                                {t(
                                    'pages.bespoke.sections.first.card.third.title',
                                )}
                            </p>
                            <p className="px-4 text-center text-sm">
                                {t(
                                    'pages.bespoke.sections.first.card.third.desc',
                                )}
                            </p>
                        </div>
                        <div className="flex flex-col items-center justify-center gap-2">
                            <Truck size={40} color="#5A1A1A" />
                            <p className="text-center font-serif text-xl font-medium">
                                {t(
                                    'pages.bespoke.sections.first.card.fourth.title',
                                )}
                            </p>
                            <p className="px-4 text-center text-sm">
                                {t(
                                    'pages.bespoke.sections.first.card.fourth.desc',
                                )}
                            </p>
                        </div>
                    </div>
                </section>
                <section className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-18 max-sm:px-8">
                    <h3 className="text-center font-serif text-4xl font-medium max-md:text-2xl">
                        Bespoke Product
                    </h3>
                    <div className="grid grid-cols-4 gap-4">
                        {product.map((item) => (
                            <img
                                src={item.image_url}
                                alt={item.title}
                                className="aspect-[4/5] rounded-lg object-cover object-center"
                            />
                        ))}
                    </div>
                </section>
                <section className="mx-auto flex max-w-screen-2xl flex-col items-center gap-8 px-12 py-18 max-sm:px-8">
                    <div className="flex flex-col items-center gap-2">
                        <h4 className="text-center font-serif text-4xl font-medium max-md:text-2xl">
                            {t('pages.bespoke.sections.second.title')}
                        </h4>
                        <p className="text-center max-md:text-sm">
                            {t('pages.bespoke.sections.second.desc')} <br />{' '}
                            {t('pages.bespoke.sections.second.desc2')}
                        </p>
                    </div>

                    <Button className="cursor-pointer">
                        {t('pages.bespoke.sections.second.button')}
                    </Button>
                </section>
            </Layout>
        </>
    );
}
