import Layout from '@/layouts/client/layout';
import { useTranslations } from '@/utils/i18n';
import kaleen from '@asset/img/about/kaleen.jpg';
import ns from '@asset/img/about/ns.gif';
import oko from '@asset/img/about/oko.gif';
import ourStory from '@asset/img/products/sci trad 8.jpg';
import { Head } from '@inertiajs/react';

import { HeartHandshake, Lightbulb, Target } from 'lucide-react';
export default function About() {
    const { t } = useTranslations();
    return (
        <>
            <Head title="About Us">
                <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>
                <section className="mx-auto flex max-w-screen-2xl flex-col gap-32 px-12 py-12 max-sm:px-8">
                    <div className="grid h-1/2 grid-cols-2 gap-20 overflow-clip max-md:grid-cols-1 max-md:gap-12">
                        <div className="flex flex-col gap-2">
                            <h1 className="font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
                                {t('pages.about.sections.first.title')}
                            </h1>
                            <div className="flex flex-col gap-4 text-sm max-sm:text-base">
                                <p>
                                    {t('pages.about.sections.first.desc.first')}
                                </p>
                                <p>
                                    {t(
                                        'pages.about.sections.first.desc.second',
                                    )}
                                </p>
                                <p>
                                    {t('pages.about.sections.first.desc.third')}
                                </p>
                            </div>
                        </div>
                        <img
                            src={ourStory}
                            alt="Our Story"
                            className="aspect-[5/3] h-full w-full rounded-xl object-cover object-center"
                        />
                    </div>{' '}
                    <div className="grid h-1/2 grid-cols-2 gap-20 overflow-clip max-md:grid-cols-1 max-md:gap-12">
                        <img
                            src={kaleen}
                            alt="Kaleen Story"
                            className="aspect-[5/3] h-full w-full rounded-xl object-cover object-center"
                        />
                        <div className="flex flex-col gap-2">
                            <h2 className="font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
                                {t('pages.about.sections.second.title')}
                            </h2>
                            <div className="flex flex-col gap-4 text-sm max-sm:text-base">
                                <p>
                                    {t(
                                        'pages.about.sections.second.desc.first',
                                    )}
                                </p>
                                <p>
                                    {t(
                                        'pages.about.sections.second.desc.second',
                                    )}
                                </p>
                                <p>
                                    {t(
                                        'pages.about.sections.second.desc.third',
                                    )}
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-12 max-md:px-6">
                    <h3 className="text-center font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
                        {t('pages.about.sections.third.title')}
                    </h3>
                    <div className="flex gap-8 max-md:flex-col">
                        <div className="flex flex-col items-center gap-4 rounded-xl bg-accent px-8 py-8 text-center max-sm:px-4">
                            <Lightbulb size={48} color="#5A1A1A" />
                            <p className="font-serif text-3xl font-semibold">
                                {t(
                                    'pages.about.sections.third.cards.first.title',
                                )}
                            </p>
                            <p className="text-justify text-lg tracking-tight">
                                {t(
                                    'pages.about.sections.third.cards.first.desc',
                                )}
                            </p>
                        </div>{' '}
                        <div className="flex flex-col items-center gap-4 rounded-xl bg-accent px-8 py-8 text-center">
                            <Target size={48} color="#5A1A1A" />
                            <p className="font-serif text-3xl font-semibold">
                                {t(
                                    'pages.about.sections.third.cards.second.title',
                                )}
                            </p>
                            <p className="text-justify text-lg tracking-tight">
                                {t(
                                    'pages.about.sections.third.cards.second.desc',
                                )}
                            </p>
                        </div>{' '}
                        <div className="flex flex-col items-center gap-4 rounded-xl bg-accent px-8 py-8 text-center">
                            <HeartHandshake size={48} color="#5A1A1A" />
                            <p className="font-serif text-3xl font-semibold">
                                {t(
                                    'pages.about.sections.third.cards.third.title',
                                )}
                            </p>
                            <p className="text-justify text-lg tracking-tight">
                                {t(
                                    'pages.about.sections.third.cards.third.desc',
                                )}
                            </p>
                        </div>
                    </div>
                </section>
                <section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-12">
                    <h4 className="text-center font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
                        {t('pages.about.sections.fourth.title')}
                    </h4>
                    <div className="flex items-center justify-center gap-8">
                        <img src={ns} alt="NS Standard" />
                        <img src={oko} alt="OKO Standard" />
                    </div>
                </section>
            </Layout>
        </>
    );
}
