"use client"

import React from "react";
import Image from "next/image";
import { Button } from "@/shared/ui/button";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";

const HeroSection = () => {
  const t = useTranslations("")
  const router = useRouter()
  return (
    <section className={"relative overflow-hidden"}>
      <div
        className={
          "bg-[url('/images/hero-bg.jpg')] flex justify-between items-center bg-cover bg-no-repeat bg-center h-[calc(100vh-4rem)]"
        }
      >
        <div
          className={"bg-slate-950/75 w-full h-screen absolute top-0 left-0"}
        />
        <div className="my-container relative z-20 flex justify-between items-center max-lg:flex-col pt-24 px-4">
          <div className={"w-1/2 max-lg:w-full"}>
            <h1 className="section-title text-white">
              {t("Quyosh uskunalarini ulgurji narxlarda sotib oling!")}
            </h1>
            <p className="section-subtitle text-white">
              {t("Quyosh elektr stansiyasi uchun hamma narsani bir joyda va eng yaxshi narxda sotib oling")}
            </p>
            <Button onClick={() => router.push("/category")} className={"px-10 mt-5 z-30"}>
              {t("Batafsil")}
            </Button>
          </div>
          <Image
            src={"/hero-solar-panel.png"}
            alt={""}
            width={900}
            height={900}
          />
        </div>
      </div>
    </section>
  );
};
export default HeroSection;
