import images from '@/assets/images/images';
import Navbar from '../navbar';
import Button from '@/components/uikit/button';
import { t } from '@/locales/translates';

export default function Header() {
  return (
    <header
      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right w-full"
      style={{ backgroundImage: `url(${images.homeBanner.src})` }}
    >
      <div className="absolute inset-0 bg-black opacity-50 z-0 blur-[100px]" />
      <Navbar />
      <div className="container mx-auto bg-cover bg-center text-white flex justify-between items-center flex-col relative z-10 h-[80%] py-20">
        <div className=" w-full flex flex-col justify-start ">
          <h1 className="text-7xl md:text-6xl font-light">
            {t('com_home_banner_title') as string}
          </h1>
          <h1 className="text-7xl md:text-6xl font-bold">
            {t('com_home_banner_title_bold') as string}
          </h1>
          <p
            className="mb-8 mt-5 text-base font-normal"
            dangerouslySetInnerHTML={{
              __html: t('com_home_banner_description') as string,
            }}
          />
          <div>
            <Button variant="solid" endIcon={'x'}>
              {t('com_home_banner_button') as string}
            </Button>
          </div>
        </div>

        <div className="w-full flex justify-center gap-8 text-sm border-t-[1px] border-white/10 pt-12 ">
          <a href="#" className="hover:underline">
            {t('com_home_Banner_link1') as string}
          </a>
          <a href="#" className="hover:underline">
            {t('com_home_Banner_link2') as string}
          </a>
          <a href="#" className="hover:underline">
            {t('com_home_Banner_link3') as string}
          </a>
        </div>
      </div>
    </header>
  );
}
