import { Button } from "@/components/ui/button";
import Image from "next/image";

export default function HomeBanner() {
  return (
    <div className="w-full">
      <div className="container-main mt-10">
        <div className="relative h-[240px] md:h-[260px] bg-[rgba(255,248,238,0.9)] rounded-2xl overflow-hidden flex items-center justify-between">
          {/* Left: Text Content */}
          <div className="z-10 py-8 flex-1 flex flex-col justify-center pl-4 sm:pl-6 md:pl-8 lg:pl-16 pr-4 sm:pr-6 md:pr-8 lg:pr-20">
            <h1 className="text-[28px] sm:text-[32px] md:text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
              1000 BLACK UMBRELLAS
            </h1>
            <p className="text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] font-[400] mb-2 max-w-5xl">
              Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br className="hidden sm:block"/> one of the most admired poets in the underground American poetry scene.
            </p>
            <Button 
              className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] w-fit px-4 sm:px-5 md:px-6 py-2 sm:py-3 font-[400] rounded-md mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer"
              size="lg"
            >
              PURCHASE EBOOK
            </Button>
          </div>

          {/* Right: Book Cover */}
          <div className="hidden md:block absolute" style={{ top: '85.44px', right: '20px' }}>
            <Image
              src="/book.png"
              alt="1000 Black Umbrellas Book Cover"
              width={185}
              height={275}
              className="object-contain rounded-xl"
              priority
            />
          </div>
        </div>
      </div>
    </div>
  );
}