"use client";

import { useEffect, useRef } from "react";
import { useRouter } from "next/navigation";

export default function HeroSection() {
  const ref = useRef(null);
  const router = useRouter();

  useEffect(() => {
    const items = ref.current.querySelectorAll(".reveal");

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          entry.target.classList.toggle("show", entry.isIntersecting);
        });
      },
      { threshold: 0.3 }
    );

    items.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={ref}
      className="relative min-h-screen flex items-center justify-center overflow-hidden"
    >
      <div className="absolute inset-0 bg-[url('/images/hero-bg.jpg')] bg-cover bg-center" />
      <div className="absolute inset-0 bg-gradient-to-b from-blue-950/70 via-blue-900/65 to-blue-800/75" />

      <div className="relative z-10 max-w-4xl mx-auto px-5 sm:px-6 text-center text-white">
        <h1 className="reveal text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
          Your Trusted Property Concierge in India
        </h1>

        <p className="reveal mt-5 sm:mt-6 text-slate-100 max-w-xl sm:max-w-2xl mx-auto leading-relaxed">
          For NRIs who expect absolute clarity, legal security, and complete peace of mind —
          handled professionally on the ground in India.
        </p>

        <div className="reveal mt-8 sm:mt-10 flex flex-col sm:flex-row justify-center gap-4">
          <button
            onClick={() => router.push("/confidential-review")}
            className="w-full sm:w-auto px-7 py-3 bg-blue-600 hover:bg-blue-500 rounded-full font-medium transition"
          >
            Request Confidential Property Review
          </button>

          <button
            onClick={() => router.push("/contact")}
            className="w-full sm:w-auto px-7 py-3 border border-white/60 rounded-full font-medium bg-black/20 hover:bg-black/30 transition"
          >
            Speak to an NRI Property Advisor
          </button>
        </div>
      </div>

      <style jsx>{`
        .reveal {
          opacity: 0;
          transform: scale(0.94) translateY(16px);
          transition:
            transform 0.45s cubic-bezier(0.25, 1, 0.4, 1),
            opacity 0.35s ease;
        }

        .reveal.show {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      `}</style>
    </section>
  );
}