import Link from "next/link";
import Image from "next/image";

export default function Hero() {
  return (
    <section className="mb-20  w-full max-w-screen-2xl mx-auto overflow-x-hidden  pt-2 px-2 sm:px-3 sm:pt-3 lg:pt-5 lg:px-10">
      <div className="bg-white bg-main1 rounded-xl bg-cover  bg-no-repeat bg-center">
        <div className=" grid h-fit  grid-cols-1 gap-10 px-5 sm:px-8 md:h-[600px] md:grid-cols-2 lg:px-10">
          <div className="mx-auto flex max-w-[560px] flex-col justify-center gap-4 py-12">
            <div className="flex w-fit flex-row items-center rounded-lg bg-white text-sm shadow-sm">
              <span className="flex h-9 w-fit items-center rounded-lg bg-slate-800 px-4 text-xs text-white">New Product</span>
              <span className="flex h-9 w-fit items-center px-6 font-semibold">Verola S3</span>
            </div>
            <h1 className="text-4xl font-bold capitalize leading-tight text-slate-800 sm:text-5xl sm:leading-tight">Discover the Ultimate Seating Experience</h1>
            <p className="my-4">Verola® delivers ergonomic office chairs that blend comfort, style, and durability, enhancing your productivity and transforming your workspace into a hub of efficiency and excellence.</p>
            <Link href="products/verola-s3" className="group flex h-11 w-fit shrink-0 items-center gap-2 rounded-lg bg-green-500 px-5 text-base font-medium text-white transition duration-150 ease-in-out lg:h-12 lg:px-6 lg:text-lg">
              <span>Explore Verola® S3</span>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="size-6 transition duration-300 ease-in-out group-hover:translate-x-1">
                <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
              </svg>
            </Link>
          </div>
          <div className="flex h-full w-full items-end justify-center">
            <div className="relative mb-10 w-fit">
              <Image src="/assets/img/banner-prod-1.png" alt="Verola S3" width={0} height={0} sizes="100vw" style={{width: "auto", height: "420px"}} className=" object-cover" />
              <span className="absolute bottom-0 right-0 w-fit text-xs opacity-75">Verola® S3</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
