import { BadgeDollarSign } from 'lucide-react';
import { useEffect, useRef, useState } from "react";

export default function OfferBanner() {
    const sectionRef = useRef<HTMLDivElement | null>(null);
    const [offset, setOffset] = useState(0);

    useEffect(() => {
        const handleScroll = () => {
            if (!sectionRef.current) return;

            const rect = sectionRef.current.getBoundingClientRect();
            const scrollPosition = rect.top * -0.1;

            // small offset for subtle parallax
            setOffset(scrollPosition);
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    return (
        <section ref={sectionRef}>
            <div className="h-125 relative overflow-hidden w-full">

                {/* BACKGROUND IMAGE */}
                <img src="/images/rooms/room2.webp"
                    style={{ transform: `translateY(${offset - 150}px) scale(1.1)` }}
                    className="absolute w-full h-200 object-cover"
                />

                {/* OPTIONAL OVERLAY */}
                <div className='absolute bg-[url(/images/hotel/left-shape.png)] bg-cover bg-no-repeat bg-left   w-3/5 top-0 bottom-0 left-0 right-0 ' />

                {/* CONTENT */}
                <div className="relative z-10 max-w-300 mx-auto h-full flex flex-col justify-center text-white ">
                    <div className="flex gap-4 mb-8 items-center">
                        <BadgeDollarSign className="w-12 h-12 text-main" />
                        <p className="text-5xl font-gilda">Haven</p>
                    </div>

                    <div className="border-l-4 border-main/40 pl-8 flex flex-col gap-4">
                        <h1 className="text-5xl">Summer Big <br />Offer</h1>
                        <p className="text-xl text-main font-bold">STARTS FROM</p>
                        <span className="text-5xl">$599.00</span>
                        <p className="text-base max-w-xl font-p">
                            Purus Rinean sedm. Ongue tellus, nunc nec magna laoreet. Et erosum viverra et vivamus. Mcipit felis nullaiaculis.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    );
}
