import { PresentationChartBarSVG } from "@/assets/svg"
import { CustomCard } from "@/components/ui/cards"
import { H2, H5, P } from "@/components/ui/typography"
import { useTranslations } from "next-intl"
const WhyValues = () => {
    const t = useTranslations()
    const content = {
        values: [
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "Real-time tracking",
                description: "Track your vehicles, optimize routes and improve performance",
            },
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "Cost reduction",
                description: "Optimize consumption and maintenance to reduce operational costs",
            },
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "Ecological solutions",
                description: "Integrate electric vehicles and manage them sustainably",
            },
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "Custom alerts",
                description: "Receive notifications on maintenance and vehicle status in real time",
            },
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "Performance tracking",
                description: "Analyze the performance of your fleet with clear and detailed reports",
            },
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "Legislative compliance",
                description: "Make sure you comply with local regulations with compliance tools",
            },
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "Predictive analytics",
                description: "Anticipate maintenance needs and breakdowns with advanced analysis tools",
            },
            {
                icon: <PresentationChartBarSVG className={"text-primary w-12 h-12"} />,
                title: "User-friendly interface",
                description: "Benefit from a simple and intuitive user interface, allowing easy and quick management",
            }
        ]
    }
    return (
        <section>
            <div className=" flex flex-col gap-16 justify-center items-center">
                <div className="flex flex-col gap-2 text-center">
                    <H2>{t("Discover our essential added values")}</H2>
                    <P>{t("Integrations that simplify your fleet management and optimize your operations")}</P>
                </div>
                <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-4 gap-4 justify-center items-center text-center">
                    {
                        content.values.map((feature, i) => (
                            <CustomCard
                              key={i}   className={`flex flex-col justify-center items-center gap-1 p-6 border-none shadow-sm`}
                            >
                                <div className="w-24 h-16 flex justify-center items-center rounded-3xl bg-primary/10 m-10">
                                    {feature.icon}
                                </div>
                                <H5 className="pt-1 text-left">{t(feature.title)}</H5>
                                {feature?.description && <P className=" text-left">{t(feature?.description)}</P>}
                            </CustomCard>))
                    }
                </ul>
            </div>
        </section>
    )
}

export default WhyValues