"use client";

import { EnergetiqueImage, MapSVG } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { H3, H6, P, S } from "@/components/ui/typography";
import { BatteryMedium, Scale } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import React from "react";

const WhyPresentation = () => {
    const t = useTranslations()
    return (
        <section className="flex flex-col xl:flex-row justify-between items-center gap-20  bg-white p-4 rounded-md w-full">
            <CustomImage pageTitle={metaTitles?.whyDadyCarMeta_Title} priority={true} src={EnergetiqueImage} className="w-[513px] h-fit rounded-md" alt="energitic" />
            <div className="flex flex-col gap-10 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    <S className="text-primary">{t("1st Fleet Management Software")}</S>
                    <H3>{t("DadyCar: Actor in the Ecological Transition in Fleet Management")}</H3>
                </div>
                <P>DadyCar s’engage pleinement dans la <Link href={"/solutions/transition-energetique"} className="text-primary underline">transition énergétique</Link> en offrant des solutions innovantes et respectueuses de l&apos;environnement pour la gestion de flotte.</P>
                <div className="flex flex-col gap-4">
                    <div className="flex items-center gap-6   border rounded-sm px-6 p-2">
                        <div className="flex items-center justify-center p-2 rounded-sm bg-primary/10">
                            <BatteryMedium className="w-7 h-7 text-primary " />
                        </div>
                        <div className="flex flex-col gap-1">
                            <H6 link="/solutions/transition-energetique" className="hover:text-primary duration-300">{t("Score SOH")}</H6>
                            <H6 className="text-muted-foreground !font-normal max-sm:text-sm">{t("Extend the life of your batteries with our advice and personalized alerts for optimized management")}</H6>
                        </div>
                    </div>
                    <div className="flex items-center gap-6   border rounded-sm px-6 p-2">
                        <div className="flex items-center justify-center p-2 rounded-sm bg-primary/10">
                            <MapSVG className="w-7 h-7 text-primary " />
                        </div>
                        <div className="flex flex-col gap-1">
                            <H6 link="/solutions/transition-energetique" className="hover:text-primary duration-300">{t("Mapping")}</H6>
                            <H6 className="text-muted-foreground !font-normal max-sm:text-sm">{t("Optimize your journeys and reduce costs with our intelligent mapping of key points")}</H6>
                        </div>
                    </div>
                    <div className="flex items-center gap-6   border rounded-sm px-6 p-2">
                        <div className="flex items-center justify-center p-2 rounded-sm bg-primary/10">
                            <Scale className="w-7 h-7 text-primary " />
                        </div>
                        <div className="flex flex-col gap-1">
                            <H6 >{t("The mobility orientation law")}</H6>
                            <H6 className="text-muted-foreground !font-normal max-sm:text-sm">{t("Stay compliant with new regulations while integrating eco-friendly vehicles into your fleet")}</H6>
                        </div>
                    </div>
                </div>
                <Button className="w-fit">{t("Request a demo")}</Button>
            </div>
        </section>
    );
};

export default WhyPresentation;