import { AvatarImage, ConvoyageImage, Map4Image, SeatImage, } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import { CustomCard } from "@/components/ui/cards";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { H3, H5, P, S } from "@/components/ui/typography";
import { useTranslations } from "next-intl";

import React from "react";

const PartnersFeatures2 = () => {
    const t = useTranslations()
    return (
        <section className="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-20  rounded-md w-ful">
            <div className="flex flex-col gap-6 xl:max-w-[500px]">
                <div className="flex flex-col gap-4">
                    <H3>{t("Your garage at your fingertips")}</H3>
                </div>
                <P>{t("Choose the garage that meets your needs and follow each stage of the service in real time, from the arrival of the vehicle to its delivery Our platform guarantees you complete transparency by providing you with instant updates, allowing you to follow the progress of repairs and manage your professional vehicle efficiently")}</P>
                <P>{t("Thanks to these alerts, you always have an overview, allowing you to make informed decisions and ensure optimal management of your vehicle fleet every step of the way")}</P>
                <Button className="w-fit">{t("Start now")}</Button>
            </div>
            <div className="flex-1 flex flex-col gap-2 max-sm:gap-y-4 bg-white py-4 rounded-md shadow-lg">
                <div className="flex items-center justify-between flex-wrap gap-x-8 gap-y-4 px-4">
                    <div className="flex gap-2">
                        <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={SeatImage} className="w-[48px] h-[48px] object-cover" alt="partners vehicle" />
                        <div className="flex flex-col">
                            <S>SEAT MARBELLA</S>
                            <S className="text-[#71717A] font-[400]">VG987KL</S>
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={AvatarImage} className="w-14 h-14 rounded-[8px] object-cover " alt="partners vehicle driver" />
                        <div className="flex flex-col gap-1">
                            <S>Jhon Martin</S>
                            <div className="w-24 h-2 bg-gray-200 rounded-full"></div>
                            <div className="w-16 h-2 bg-gray-200 rounded-full"></div>
                        </div>
                    </div>
                    <div className="flex flex-col">
                        <S className="text-muted-foreground font-semibold">{t("Duration")}:</S>
                        <S>12 Min</S>
                    </div>
                </div>
                <div className="mb-2 px-4">
                    <P className="font-[600] text-gray-700">Prestations</P>
                    <CustomCard className="flex flex-col items-start sm:items-center justify-between sm:flex-row gap-4 mt-2">
                        <div>
                            <H5>Tire Rotation</H5>
                            <P className="text-primary">Garage Drancy Auto</P>
                        </div>
                        <div className="flex flex-col items-start sm:items-end">
                            <H5 className="text-muted-foreground">08/07/2024</H5>
                            <S className='bg-green-600 py-2 px-4 text-white rounded-full'>{t("Open")}</S>
                        </div>
                    </CustomCard>
                </div>
                <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={Map4Image} className="max-sm:min-w-full max-sm:max-w-full min-w-[528px] h-[300px] max-w-full object-cover" alt="garages map" />
                <div className="flex gap-4 sm:gap-8 mt-4 px-4">
                    <div>
                        <CustomImage pageTitle={metaTitles?.integrationsPartnersMeta_Title} src={ConvoyageImage} className="w-[20px]  h-full" alt="convoyage" />
                    </div>
                    <div className="flex flex-col justify-between gap-2">
                        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
                            <P>La Lande 3, 1248 Nanterre, France</P>
                            <S className="text-gray-500"><S className="text-gray-400">Start: </S> Jul 11 2024 10:30am</S>
                        </div>
                        <P className="text-primary">{t("Active now")}</P>
                        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
                            <P>La Lande 3, 1248 Nanterre, France</P>
                            <S className="text-gray-500"><S className="text-gray-400">Start: </S> Jul 11 2024 10:30am</S>
                        </div>
                    </div>
                </div>

            </div>

        </section>
    );
};

export default PartnersFeatures2;