"use client";

interface TabItem {
    title: string;
    description: string;
    video: string;
}

interface VideoFeature {
    title: string;
    description: string;
    video: string;
    reverse?: boolean;
}

interface FeatureTabsSectionProps {
    sectionTitle: string;
    tabs: TabItem[];
    visionTitle: string;
    visionSubtitle: string;
    features: VideoFeature[];
}

export default function FeatureTabsSection({
    sectionTitle,
    tabs,
    visionTitle,
    visionSubtitle,
    features,
}: FeatureTabsSectionProps) {
    return (
        <section className="bg-black py-16 text-white">
            <div className="mx-auto max-w-7xl px-6">

                {/* Tabs Section */}
                <div className="mb-24">
                    <h2 className="mb-12 text-center text-5xl font-semibold text-[#bb13d1]">
                        {sectionTitle}
                    </h2>

                    <div className="grid gap-8">
                        {tabs.map((tab, index) => (
                            <div
                                key={index}
                                className="overflow-hidden rounded-lg"
                            >
                                <div className="mb-6">
                                    <h3 className="text-3xl font-semibold text-[#eca6f5]">
                                        {tab.title}
                                    </h3>

                                    <p className="mt-3 text-lg font-semibold leading-8 text-white">
                                        {tab.description}
                                    </p>
                                </div>

                                <video
                                    src={tab.video}
                                    autoPlay
                                    loop
                                    muted
                                    playsInline
                                    controls
                                    className="w-full object-cover"
                                />
                            </div>
                        ))}
                    </div>
                </div>


                {/* Vision Section */}
                <div>
                    <div className="mb-16 text-center">
                        <h2 className="text-5xl font-semibold text-[#bb13d1]">
                            {visionTitle}
                        </h2>

                        <h3 className="mt-6 text-3xl font-semibold text-[#eca6f5]">
                            {visionSubtitle}
                        </h3>
                    </div>


                    {features.map((item, index) => (
                        <div
                            key={index}
                            className={`mb-20 grid items-center gap-12 lg:grid-cols-2 ${item.reverse ? "lg:flex-row-reverse" : ""
                                }`}
                        >

                            <div
                                className={
                                    item.reverse
                                        ? "lg:order-2"
                                        : "lg:order-1"
                                }
                            >
                                <video
                                    src={item.video}
                                    controls
                                    preload="metadata"
                                    className="h-full w-full object-cover"
                                />
                            </div>


                            <div
                                className={
                                    item.reverse
                                        ? "lg:order-1"
                                        : "lg:order-2"
                                }
                            >
                                <h3 className="mb-6 text-3xl font-semibold text-[#eca6f5]">
                                    {item.title}
                                </h3>

                                <p className="text-lg font-semibold leading-8">
                                    {item.description}
                                </p>
                            </div>

                        </div>
                    ))}
                </div>

            </div>
        </section>
    );
}