import React, { useEffect, useState } from "react";
import Link from 'next/link'
import himg from '/public/images/slider/1.png'
import Image from "next/image";
import { useRouter } from "next/router";
import { useTranslations } from "next-intl";


const Hero = () => {
    const { locale } = useRouter();
    const t = useTranslations("Hero");
    const [isSmallScreen, setIsSmallScreen] = useState(false);

    useEffect(() => {
        const checkScreenSize = () => {
            setIsSmallScreen(window.innerWidth < 768); // Adjust the width as needed
        };

        checkScreenSize();
        window.addEventListener('resize', checkScreenSize);

        return () => {
            window.removeEventListener('resize', checkScreenSize);
        };
    }, []);
    const rtlStyle = {
        lineHeight: 1,
        direction: "rtl",
        textAlign: "center",
        display: "block",
        fontSize: "2.3rem",
        marginBottom: "1rem",
        ...(locale === "ar" && !isSmallScreen && { marginRight: "45rem" })
    };
    return (
        <section className="static-hero">
            <div style={locale === "en" ? { marginTop: "3.5rem", } : { marginTop: "5rem" }} className="hero-container">
                <div className="hero-inner">
                    <div className="container">
                        <div style={{ direction: `${locale === "ar" ? 'ltr' : 'ltr'}`, marginTop: `${isSmallScreen ? "0rem" : "3rem"}` }} className="hero-text-wrap">
                            <div className="sub-title">
                                <span style={locale === "ar" ? rtlStyle : { fontSize: isSmallScreen ? "1.5rem" : "2.1rem", lineHeight: 1 }}>{t("hero_sub_title")}</span>
                            </div>
                            <div style={{ lineHeight: 1 }} className="slide-title">
                                <h3 style={locale === "ar" ? { textAlign: "center", marginTop: "1rem", color: "#fff", fontSize: isSmallScreen ? "30px" : "50px" } : { marginTop: "1rem", color: "#fff", fontSize: isSmallScreen ? "30px" : "50px" }}>{t("hero_title")}</h3>
                            </div>
                            <div style={{ lineHeight: 1 }} className="slide-text">
                                <p style={locale === "ar" ? { textAlign: "center", marginTop: "1rem", fontSize: "1.5rem" } : { marginTop: "1rem", fontSize: "1.3rem" }}>{t("hero_text")}</p>
                            </div>
                            <div className="clearfix"></div>
                            <div data-swiper-parallax="500" className="slide-btns">
                                <Link href="/about" className="theme-btn-s2">{t("hero_more")}</Link>
                            </div>
                        </div>
                        <div className="lawyer-pic">
                            <Image src={himg} alt="" />
                            <div className="lawyer-shape"></div>
                            <div className="exprience">
                                <div className="exprience-left">
                                    <h4>{t("hero_year_num")}</h4>
                                </div>
                                <div className="exprience-right">
                                    <h4>{t("hero_year_desc")}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}



export default Hero;