import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import Layout from '@/layouts/client/layout';
import skill from '@asset/img/material/silk balls.jpg';
import skillYarn from '@asset/img/material/silk yarn.jpg';
import woolBall from '@asset/img/material/wool balls.jpg';
import woolYarn from '@asset/img/material/wool yarn.jpg';
import artOfWeaving from '@asset/img/production/IMG_2719.jpg';
import { Head } from '@inertiajs/react';
import { Flower, Hand, Package, Palette, Shirt } from 'lucide-react';

export default function Art() {
    return (
        <>
            <Layout>
                <Head title="Art of Weaving" />
                <section>
                    <div className="relative">
                        <div className="absolute h-full w-full bg-white/60"></div>
                        <img
                            src={artOfWeaving}
                            alt="Art of Weaving"
                            className="aspect-[16/4] object-cover object-center"
                        />
                        <h1 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-serif text-7xl font-medium tracking-tight">
                            The Art of Weaving
                        </h1>
                    </div>

                    <div className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-12">
                        <h2 className="text-center font-serif text-4xl font-medium">
                            Our Craft: From Fiber to Fine Rug
                        </h2>
                        <Tabs
                            defaultValue="wool"
                            className="grid grid-cols-4 gap-8"
                        >
                            <TabsList className="!h-auto w-full flex-col">
                                <TabsTrigger
                                    value="wool"
                                    className="flex w-full gap-2 py-4"
                                >
                                    <Shirt size={24} /> Wool Selection & Sorting
                                </TabsTrigger>
                                <TabsTrigger
                                    value="dyeing"
                                    className="w-full py-4"
                                >
                                    <Palette /> Artisan Dyeing
                                </TabsTrigger>
                                <TabsTrigger
                                    value="hand"
                                    className="w-full py-4"
                                >
                                    <Hand /> Hand Weaving
                                </TabsTrigger>
                                <TabsTrigger
                                    value="finish"
                                    className="w-full py-4"
                                >
                                    <Flower /> Finishing & Washing
                                </TabsTrigger>
                                <TabsTrigger
                                    value="quality"
                                    className="w-full py-4"
                                >
                                    <Package /> Quality Control & Packing
                                </TabsTrigger>
                            </TabsList>
                            <div className="col-span-3">
                                <TabsContent value="wool">
                                    <div className="flex flex-col gap-2">
                                        <p className="font-serif text-2xl font-medium">
                                            Wool Selection & Sorting
                                        </p>
                                        <p>
                                            Careful selection of the finest wool
                                            fibers, meticulously sorted by
                                            quality and texture to ensure only
                                            the best make it into our carpets.
                                        </p>
                                    </div>
                                </TabsContent>
                                <TabsContent value="dyeing">
                                    <div className="flex flex-col gap-2">
                                        <p className="font-serif text-2xl font-medium">
                                            Artisan Dyeing
                                        </p>
                                        <p>
                                            Fibers are dyed using traditional
                                            methods and natural pigments,
                                            achieving rich, vibrant, and
                                            enduring colors that tell a story.
                                        </p>
                                    </div>
                                </TabsContent>
                                <TabsContent value="hand">
                                    <div className="flex flex-col gap-2">
                                        <p className="font-serif text-2xl font-medium">
                                            Hand Weaving
                                        </p>
                                        <p>
                                            Skilled artisans hand-weave each
                                            knot with precision and passion,
                                            creating intricate patterns and
                                            unparalleled durability.
                                        </p>
                                    </div>
                                </TabsContent>
                                <TabsContent value="finish">
                                    <div className="flex flex-col gap-2">
                                        <p className="font-serif text-2xl font-medium">
                                            Finishing & Washing
                                        </p>
                                        <p>
                                            Carpets undergo specialized washing,
                                            shearing, and meticulous
                                            hand-finishing to enhance their
                                            luster and softness.
                                        </p>
                                    </div>
                                </TabsContent>
                                <TabsContent value="quality">
                                    <div className="flex flex-col gap-2">
                                        <p className="font-serif text-2xl font-medium">
                                            Quality Control & Packing
                                        </p>
                                        <p>
                                            Each rug passes rigorous quality
                                            checks before being carefully packed
                                            for its journey to your home,
                                            ensuring perfection.
                                        </p>
                                    </div>
                                </TabsContent>
                            </div>
                        </Tabs>
                    </div>

                    <div className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-8">
                        <h3 className="text-center font-serif text-4xl font-medium">
                            Exquisite Materials
                        </h3>
                        <div className="grid grid-cols-4 gap-6">
                            <div className="flex flex-col items-center gap-2">
                                <img
                                    src={skill}
                                    alt="Skill ball"
                                    className="aspect-square rounded-lg object-cover object-center"
                                />
                                <p className="font-serif text-lg font-medium">
                                    Skill Ball
                                </p>
                            </div>
                            <div className="flex flex-col items-center gap-2">
                                <img
                                    src={skillYarn}
                                    alt="Skill yarn"
                                    className="aspect-square rounded-lg object-cover object-center"
                                />
                                <p className="font-serif text-lg font-medium">
                                    Skill Yarn
                                </p>
                            </div>
                            <div className="flex flex-col items-center gap-2">
                                <img
                                    src={woolBall}
                                    alt="wool ball"
                                    className="aspect-square rounded-lg object-cover object-center"
                                />
                                <p className="font-serif text-lg font-medium">
                                    Wool Ball
                                </p>
                            </div>
                            <div className="flex flex-col items-center gap-2">
                                <img
                                    src={woolYarn}
                                    alt="wool yarn"
                                    className="aspect-square rounded-lg object-cover object-center"
                                />
                                <p className="font-serif text-lg font-medium">
                                    Wool Yarn
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </Layout>
        </>
    );
}
