"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import Image from "next/image";
import { Button } from "@/components/shared/Button";

export function Hero() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const scale = useTransform(scrollYProgress, [0, 1], [1.1, 1]);
  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
  const y = useTransform(scrollYProgress, [0, 1], [0, 100]);

  return (
    <section ref={ref} className="relative h-screen min-h-[700px] overflow-hidden">
      <motion.div className="absolute inset-0" style={{ scale }}>
        <Image
          src="/images/hero_main.jpg"
          alt="Friends walking along a sun-drenched tree-lined boulevard on Istanbul's Asian side"
          fill
          className="object-cover"
          priority
          sizes="100vw"
        />
        {/* Gradient scrim: 30% at top → 60% at bottom for text readability */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-black/25 to-black/60" />
        {/* Extra top band so nav is always legible */}
        <div className="absolute inset-x-0 top-0 h-28 bg-gradient-to-b from-black/40 to-transparent" />
      </motion.div>

      <motion.div
        className="relative z-10 h-full flex flex-col justify-center items-center text-center px-5 sm:px-8"
        style={{ opacity, y }}
      >
        {/* Glassmorphism container */}
        <div className="bg-black/[0.45] backdrop-blur-2xl border border-white/[0.05] rounded-3xl px-5 py-8 sm:px-12 sm:py-14 max-w-[92%] sm:max-w-3xl shadow-2xl">
          <motion.p
            className="text-bosphorus font-semibold text-xs sm:text-sm tracking-[0.2em] uppercase mb-4 sm:mb-6"
            style={{ textShadow: "0 1px 8px rgba(0,0,0,0.4)" }}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
          >
            Istanbul&apos;s Asian Side &middot; Curated Experiences
          </motion.p>

          <motion.h1
            className="font-display text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white max-w-4xl leading-[1.1] mb-4 sm:mb-6"
            style={{ textShadow: "0 2px 10px rgba(0,0,0,0.7)" }}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
          >
            The Side They Never{" "}
            <span className="text-sun-yolk italic">Show You</span>
          </motion.h1>

          <motion.p
            className="text-white font-medium text-sm sm:text-lg md:text-xl max-w-2xl mx-auto mb-6 sm:mb-10 leading-relaxed"
            style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6 }}
          >
            While 17 million tourists crowd the same five monuments, an entire
            coastline of world-class dining, sun-drenched boulevards, and the
            city&apos;s best-kept secrets waits across the water. We take you there.
          </motion.p>

          <motion.div
            className="flex flex-col sm:flex-row gap-4 justify-center"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.8 }}
          >
            <Button href="#experiences" variant="coral" size="lg">
              Explore Our Experiences
            </Button>
            <Button href="#the-route" variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-deep-nazar">
              Watch the Crossing
            </Button>
          </motion.div>
        </div>
      </motion.div>

      <motion.div
        className="absolute bottom-0 left-0 right-0 z-10"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 1.2 }}
      >
        <div className="bg-white/90 backdrop-blur-sm py-4 px-5 sm:px-8">
          <div className="max-w-5xl mx-auto flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-deep-nazar/70">
            <span className="flex items-center gap-1.5">
              <span className="text-sun-yolk">&#9733;</span> 4.9/5 from 200+ guests
            </span>
            <span className="hidden sm:inline text-deep-nazar/30">|</span>
            <span>Featured in TimeOut Istanbul</span>
            <span className="hidden sm:inline text-deep-nazar/30">|</span>
            <span>Small groups, max 8 people</span>
          </div>
        </div>
      </motion.div>
    </section>
  );
}