"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";

export function StickyBookingBar() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setVisible(window.scrollY > 600);
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          className="fixed bottom-0 left-0 right-0 z-40 md:hidden bg-white/95 backdrop-blur-md border-t border-deep-nazar/10 px-5 py-3"
        >
          <div className="flex items-center justify-between gap-4">
            <div>
              <p className="text-xs text-deep-nazar/60">From</p>
              <p className="text-lg font-bold text-deep-nazar">
                &euro;89<span className="text-sm font-normal text-deep-nazar/60">/person</span>
              </p>
            </div>
            <Link
              href="/experiences/the-other-side"
              className="px-6 py-3 bg-coral-spritz text-white font-semibold rounded-full shadow-lg shadow-coral-spritz/25 text-sm"
            >
              Book Now
            </Link>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}