"use client";

import { Button } from "@/components/ui/buttons/Button";
import { H1, P, } from "@/components/ui/typography";
import { useTranslations } from "next-intl";
import React from "react";
import LandingPresentationGraphics from "./LandingPresentationGraphics";

const LandingPresentation = () => {
    const t = useTranslations();

    return (
        <section className="flex flex-col lg:flex-row justify-between items-center  gap-20 2xl:gap-x-60 ">
            <div className="flex flex-col  gap-4  xl:py-32  ">
                <P className="text-sm font-semibold text-primary">{t("#1 SOLUTION IN EUROPE")}</P>
                <H1 as="h2"  className="text-foreground !font-semibold ">
                    {t("Discover the essential features for effective fleet management")}
                </H1>
                <P>
                    {t("Real-time monitoring, cost optimization, automated mission management and data analysis Simplify your operations and improve the performance of your fleet with comprehensive and intuitive tools")}
                </P>
                <Button link="/features" className="w-fit px-6 py-3">
                    {t("Discover all features")}
                </Button>
            </div>
           <LandingPresentationGraphics/>
        </section>
    );
};

export default LandingPresentation;