"use client";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { SwiperSlide } from "swiper/react";

import AboutImgOne from "@/assets/used-icons/about1.png";
import AboutImgTwo from "@/assets/used-icons/about2.png";
import qualityIcon from "@/assets/used-icons/about4.png";
import developmentIcon from "@/assets/used-icons/about5.png"
import guaranteeIcon from "@/assets/used-icons/about6.png";
import partnershipsIcon from "@/assets/used-icons/about7.png";
import trainingEnvironmentIcon from "@/assets/used-icons/about8.png";
import expertLecturersIcon from "@/assets/used-icons/about9.png";
import ValueImg from "@/assets/used-images/value-img.png";

import IvoryNumbers from "@/views/home/components/ivory-numbers";

import useHomeSection from "@/hooks/use-home-section";
import Image from "@/ui/image";
import Swiper from "@/ui/swiper";
import { Skeleton } from "@/components/ui/skeleton";

import ValueCard from "@/views/about/ui/value-card";
import WhyIvoryCard from "@/views/about/ui/why-ivory-card";
import Achievements from "@/views/home/components/ivory-achievements";

export default function About() {
    const { t } = useTranslation();
    const { data: values, error, isLoading } = useHomeSection({ sectionName: 'value' });
    const { data: licenses, error: lErr, isLoading: lLoading } = useHomeSection({ sectionName: 'licenses' });
    const { data: certifications, error: cErr, isLoading: cLoading } = useHomeSection({ sectionName: 'quality_certifications' });

    const visions = [
        {
            icon: AboutImgOne,
            title: t('about.title-1'),
            desc: t('about.desc-1')
        },
        {
            icon: AboutImgTwo,
            title: t('about.title-2'),
            desc: t('about.desc-2')
        },
    ];

    const whyIvory = [
        {
            icon: guaranteeIcon,
            title: t('about.title-3'),
            description: t('about.desc-3'),
        },
        {
            icon: developmentIcon,
            title: t('about.title-4'),
            description: t('about.desc-4'),
        },
        {
            icon: qualityIcon,
            title: t('about.title-5'),
            description: t('about.desc-5'),
        },
        {
            icon: expertLecturersIcon,
            title: t('about.title-6'),
            description: t('about.desc-6'),
        },
        {
            icon: trainingEnvironmentIcon,
            title: t('about.title-7'),
            description: t('about.desc-7'),
        },
        {
            icon: partnershipsIcon,
            title: t('about.title-8'),
            description: t('about.desc-8'),
        },
    ];

    const swiperProps = {
        loop: true,
        autoplay: { delay: 3000, disableOnInteraction: false },
        spaceBetween: 30,
        breakpoints: {
            640: { slidesPerView: 1 },
            768: { slidesPerView: 2 },
        },
        className: "relative w-full gap-8",
    };

    return (
        <>
            {/* الصفحة بلا مسار تنقل أو عنوان ظاهر — عنوان رئيسي لمحركات البحث وقارئات الشاشة */}
            <h1 className="sr-only">{t("routes.about")}</h1>
            <div className="layout space-y-16">
                <section className="grid grid-cols-2 justify-center gap-20 max-lg:grid-cols-1 max-lg:gap-4">
                    {
                        visions.map((vision, i) => (
                            <div className="border h-full rounded-lg p-4 grid text-center justify-items-center gap-1.5" key={i}>
                                <div className="flex justify-center items-center p-3 rounded-full border-neutral-300 border">
                                    <img src={vision?.icon} alt={vision.title} className="w-9" />
                                </div>
                                <p className="text-secondary text-lg">
                                    {vision.title}
                                </p>
                                <p className="text-common-text px-8">
                                    {vision.desc}
                                </p>
                            </div>
                        ))
                    }
                </section>

                {/* values */}
                <section className="space-y-6">
                    <div className="flex justify-center">
                        <h2 className="services-header flex justify-center after:w-20">
                            {t('home.our-manners')}
                        </h2>
                    </div>
                    <div className="grid grid lg:grid-cols-[40%_59%]  max-lg:grid-cols-1  gap-6 max-lg:grid-cols-1">
                        <div className="relative  h-auto max-lg:w-full">
                            <Image
                                src={ValueImg}
                                alt={t("home.our-manners")}
                                className="w-full h-full object-cover rounded-md"
                            />
                        </div>
                        <div className="grid grid-cols-3 gap-4">
                            {(isLoading && !error) ?
                                <>
                                    {
                                        [...Array(6)].map((_, i) => (
                                            <div key={i} className="flex items-center gap-3">
                                                <div className="size-11 rounded-full l-load"></div>
                                                <div className="w-24 h-3 rounded-md l-load-dt"></div>
                                            </div>
                                        ))
                                    }
                                </>
                                :
                                <>
                                    {
                                        values?.map((value, i: number) => (
                                            <ValueCard key={i} value={value} />
                                        ))
                                    }
                                </>
                            }
                        </div>
                    </div>
                </section>

                {/* why ivory */}
                <section>
                    <div className="flex justify-center">
                        <h2 className="services-header flex justify-center after:w-20">
                            {t('about.why')}
                        </h2>
                    </div>
                    <div className="grid grid-cols-3 gap-4 max-xl:grid-cols-2 max-lg:grid-cols-1">
                        {
                            whyIvory?.map((item, i) => (
                                <WhyIvoryCard key={i} item={item} />
                            ))
                        }
                    </div>
                </section>
            </div>

            {/* stats numbers */}
            <IvoryNumbers />

            {/* Achievements */}
            <section>
                <Achievements />
            </section>

            {/* Licenses */}
            <section className="layout">
                {
                    lLoading ?
                        <div className="w-full grid lg:grid-cols-2 gap-14">
                            {
                                [...Array(2)].map((_, i) => (
                                    <Skeleton className="h-[30rem] w-full" key={i} />
                                ))
                            }
                        </div>
                        :
                        <Swiper id={'licenses'} props={swiperProps} showButtons>
                            {
                                licenses.map((license: any, i: number) => (
                                    <SwiperSlide key={i} className="h-full w-full">
                                        <Link target="_blank" to={license.image} className="w-full h-[30rem] relative">
                                            <Image
                                                src={license.image}
                                                alt={license.title}
                                                className="w-full h-96 lg:h-[30rem] object-fill rounded"
                                            />
                                        </Link>
                                    </SwiperSlide>
                                ))
                            }
                        </Swiper>
                }
            </section>

            {/* certifications */}
            <section className="layout">
                {
                    cLoading ?
                        <div className="w-full grid lg:grid-cols-2 gap-14">
                            {
                                [...Array(2)].map((_, i) => (
                                    <Skeleton className="h-[30rem] w-full" key={i} />
                                ))
                            }
                        </div>
                        :
                        <Swiper id={'certifications'} props={swiperProps} showButtons>
                            {
                                certifications.map((certificate: any, i: number) => (
                                    <SwiperSlide key={i} className="h-full w-full">
                                        <Link target="_blank" to={certificate.image} className="w-full h-[30rem] relative">
                                            <Image
                                                src={certificate.image}
                                                alt={certificate.title}
                                                className="w-full h-96 lg:h-[40rem] object-fill rounded"
                                            />
                                        </Link>
                                    </SwiperSlide>
                                ))
                            }
                        </Swiper>
                }
            </section>
        </>
    );
};