import { BannerSlider } from "./slider";

export function Banner() {
  return (
    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden min-[450px]:pt-10 pt-20">
      {/* Background Image */}
      <div
        className="absolute inset-0 z-0"
        style={{
          backgroundImage: "url(/images/home/banner.jpg)",
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      />

      {/* Gradient Overlay - Bottom-left to top-right */}
      <div
        className="absolute inset-0 z-10"
        style={{
          background: `linear-gradient(to top right, #c75c08 0%, #1e1d1ce3 28%, #1e1d1ce3 100%)`,
        }}
      />

      {/* Content Container */}
      <BannerSlider />
    </section>
  );
}