import Newsletter from "@/blocks/newsletter";
import Image from "next/image";
import heroBanner from "@/assets/images/hero.png";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Link from "next/link";
import dynamic from "next/dynamic";

const ProductsList = dynamic(() => import("@/blocks/products-list"), { ssr: false });

export default function Page() {
  return (
    <main className="flex flex-col items-center justify-between">
      <div className="relative -mt-20 w-screen p-0 m-0">
        {/* Update the carousel here and use the same classes as this image */}
        <Image src={heroBanner} alt="" width={1000} height={1000} className="w-screen relative md:min-h-60 min-h-[70vh] object-cover" />
        {/* Update the carousel here and use the same classes as this image */}
        <div className="bg-black absolute w-full h-full top-0 left-0 opacity-50"></div>
        <div className="lg:w-screen w-10/12 mx-auto left-0 right-0 h-full justify-center flex flex-col absolute top-0">
          <div className="mx-auto w-full lg:mt-0 mt-10 lg:px-10 md:space-y-5 lg:space-y-10 space-y-10">
            <div className="min-w-screen">
              <div className='flex overflow-hidden items-center mx-auto border-2 rounded border-white lg:w-1/2 md:w-2/3 w-11/12'>
                <Input className='lg:px-5 lg:py-7 lg:text-lg bg-transparent outline-none !ring-0 border-0 !ring-offset-0 focus-visible:bg-white focus-visible:text-black rounded-none text-white' placeholder='Search Favourite Car' />
                <Link href='/search'>
                  <Button className='rounded-none lg:text-lg lg:px-8 lg:py-7'>Search</Button>
                </Link>
              </div>
            </div>
            <div className="lg:w-2/3 md:space-y-4 space-y-4">
              <h3 className="capitalize md:text-2xl flex items-center gap-2"><div className="primary w-8 h-1"></div> hello, new friends!</h3>
              <h1 className="lg:text-6xl md:text-3xl text-xl text-white z-10 font-extrabold">Captivating Car Visuals, Royalty-Free</h1>
              <p className="md:text-xl">Explore Our Collection of Striking Stock Images for Your Automotive Journey.</p>
              <div>
                <Button className="rounded-none md:text-lg">Explore Now</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="w-10/12 mx-auto">
        <ProductsList />
      </div>
      <Newsletter />
    </main>
  );
}