"use client";

import Image from "next/image";
import Link from "next/link";
import {
  ChevronDown,
  ChevronRight,
  Compass,
  GraduationCap,
  MapPin,
  ShoppingBag,
  Sparkles,
  Tag,
  Umbrella,
  Utensils,
  Waves,
} from "lucide-react";
import { useEffect, useRef, useState, useCallback } from "react";
import { Navbar } from "@/components/layout/navbar";
import { cn } from "@/lib/utils";
import { ScrollReveal } from "@/components/animations/scroll-reveal";
import {
  beaches,
  states,
  categories,
  vendors,
  rackListings,
} from "@/lib/mock-data";
import LandingHeroDualAudiencePreviewPage from "@/components/hero";

const STATE_IMAGES: Record<string, string> = {
  fl: "https://images.unsplash.com/photo-1519046904884-53103b34b206?w=600",
  ca: "https://images.unsplash.com/photo-1534190760961-74e8c1c5c3da?w=600",
  hi: "https://images.unsplash.com/photo-1507876466758-bc54f384809c?w=600",
  va: "https://images.unsplash.com/photo-1471922694854-ff1b63b20054?w=600",
  sc: "https://images.unsplash.com/photo-1495954484750-af469f2f9be5?w=600",
};

const CATEGORY_ICONS: Record<string, React.ReactNode> = {
  rentals: <Umbrella className="h-6 w-6" aria-hidden />,
  food: <Utensils className="h-6 w-6" aria-hidden />,
  "water-sports": <Waves className="h-6 w-6" aria-hidden />,
  tours: <Compass className="h-6 w-6" aria-hidden />,
  lessons: <GraduationCap className="h-6 w-6" aria-hidden />,
  equipment: <ShoppingBag className="h-6 w-6" aria-hidden />,
};

const CASE_STUDY_ITEMS = [
  {
    tag: "Beach Rentals",
    title: "Beach Rentals",
    description:
      "BeachLyfe powers chair, umbrella, and gear rentals at 500+ beaches. Book in minutes.",
    stat: "95%",
    statLabel: "Happy renters",
    href: "/explore",
    cta: "Explore rentals",
    image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80",
  },
  {
    tag: "Vendor marketplace",
    title: "Vendor marketplace",
    description:
      "Local vendors list gear and experiences; you book in one place. Secure and simple.",
    stat: "2k+",
    statLabel: "Vendors",
    href: "/vendors",
    cta: "View vendors",
    image: "https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=800&q=80",
  },
  {
    tag: "Local experiences",
    title: "Local experiences",
    description:
      "From surf lessons to food tours, discover what's at the beach. One platform, endless fun.",
    stat: "50k+",
    statLabel: "Bookings",
    href: "/explore",
    cta: "Discover more",
    image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=800&q=80",
  },
] as const;

const POPULAR_BEACHES = beaches.slice(0, 6);
const FEATURED_CATEGORIES = categories.slice(0, 6);
const FEATURED_VENDORS = vendors.slice(0, 6);
const TODAY_DEALS = rackListings.slice(0, 4);

const ctaPrimary =
  "inline-flex w-full items-center justify-center rounded-full bg-[#F4C430] px-8 py-3 text-base font-bold text-[#001B44] shadow-sm transition hover:bg-[#e6b82a] sm:w-auto md:px-10 md:py-3.5 md:text-lg";

const sectionTitle = "text-3xl font-bold tracking-tight clr-b md:text-4xl lg:text-5xl";
const sectionSub =
  "mt-3 max-w-2xl text-base font-normal font-outfit leading-relaxed text-[#111246]/80 mx-auto md:text-lg";
const accentRule = "mb-4 inline-block h-0.5 w-14 rounded-full bg-[#2A7EE0]/50";

/** Header jump links only — beaches / states / vendors sections stay on page, hidden from nav until platform scales */
const JUMP_SECTIONS = [
  { id: "results", label: "Results", href: "#results" },
  { id: "what-to-do", label: "What to do", href: "#what-to-do" },
  { id: "deals", label: "Deals", href: "#deals" },
] as const;

export default function HomePage() {
  const heroVideoRef = useRef<HTMLVideoElement>(null);
  const videoSectionRef = useRef<HTMLElement>(null);
  const [videoParallaxY, setVideoParallaxY] = useState(0);
  const [videoHeroReveal, setVideoHeroReveal] = useState(false);
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
  const [activeJumpId, setActiveJumpId] = useState<string>(JUMP_SECTIONS[0].id);

  /** Only nav-visible section ids — avoids hidden beaches/states/vendors breaking "What to do" / "Deals" highlight */
  const updateActiveSection = useCallback(() => {
    const vh = typeof window !== "undefined" ? window.innerHeight : 800;
    // ~upper third of viewport: strict 112px made pills lag until the section top passed the navbar line
    const activationY = Math.min(300, Math.max(120, Math.round(vh * 0.34)));
    let current: (typeof JUMP_SECTIONS)[number]["id"] = JUMP_SECTIONS[0].id;
    for (const { id } of JUMP_SECTIONS) {
      const el = document.getElementById(id);
      if (!el) continue;
      const top = el.getBoundingClientRect().top;
      if (top <= activationY) {
        current = id;
      }
    }
    setActiveJumpId(current);
  }, []);

  useEffect(() => {
    updateActiveSection();
    window.addEventListener("scroll", updateActiveSection, { passive: true });
    window.addEventListener("resize", updateActiveSection);
    return () => {
      window.removeEventListener("scroll", updateActiveSection);
      window.removeEventListener("resize", updateActiveSection);
    };
  }, [updateActiveSection]);

  useEffect(() => {
    const video = heroVideoRef.current;
    if (!video) return;
    const play = () => {
      video.play().catch(() => { });
    };
    play();
    video.addEventListener("loadeddata", play);
    return () => video.removeEventListener("loadeddata", play);
  }, []);

  useEffect(() => {
    setPrefersReducedMotion(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
  }, []);

  const videoParallaxRef = useRef<number>(0);
  useEffect(() => {
    const section = videoSectionRef.current;
    if (!section || prefersReducedMotion) return;

    const updateParallax = () => {
      const rect = section.getBoundingClientRect();
      const vh = window.innerHeight || 1;
      const t = rect.top / vh;
      const y = Math.max(-72, Math.min(72, (0.45 - t) * 90));
      if (Math.abs(y - videoParallaxRef.current) > 0.5) {
        videoParallaxRef.current = y;
        setVideoParallaxY(y);
      }
    };

    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(updateParallax);
    };

    updateParallax();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [prefersReducedMotion]);

  useEffect(() => {
    const el = videoSectionRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([entry]) => {
        setVideoHeroReveal(entry.isIntersecting && entry.intersectionRatio > 0.15);
      },
      { threshold: [0, 0.12, 0.25, 0.4] }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Navbar />
      <LandingHeroDualAudiencePreviewPage />
      {/* <section className="flex items-center justify-center bg-[url('/hero.png')] bg-cover bg-center bg-[#B2D3E8] py-10 sm:py-12">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="grid grid-cols-1 items-center gap-8 md:grid-cols-2 md:gap-10 lg:gap-12">
            <div className="space-y-6 sm:space-y-8">
              <h1 className="text-4xl font-bold leading-[1.05] tracking-tight clr-b sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl">
                earn with
                <br />
                your beach
                <br /> equipment!
              </h1>
              <p className="max-w-lg text-base leading-relaxed sm:text-lg">
                List your beach equipment with Beach Lyfe and offer renters the ultimate comfort and
                convenience, whether they&apos;re lounging in chairs or exploring the shoreline.
              </p>
              <div>
                <Link href="/signup" className={ctaPrimary}>
                  Get Started!
                </Link>
              </div>
            </div>
            <div className="flex justify-center md:justify-end">
              <img
                src="/hero-r.png"
                alt="Beach Lyfe — bookings and reviews"
                className="h-auto w-full max-w-md object-contain md:max-w-none"
              />
            </div>
          </div>
        </div>
      </section> */}

      <section className="bg-white py-14 md:py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-8">
            <div className="flex items-start gap-4 rounded-xl bg-sky-50 p-5 ring-1 ring-sky-100/80 md:p-6">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-white shadow-sm">
                <Waves className="h-6 w-6 text-violet-600" aria-hidden />
              </div>
              <div className="min-w-0">
                <h3 className="text-lg font-bold uppercase tracking-wide clr-b">Equipment Rental</h3>
                <p className="mt-1 text-sm font-normal font-outfit clr-b opacity-80">
                  Boards, chairs &amp; more
                </p>
              </div>
            </div>
            <div className="flex items-start gap-4 rounded-xl bg-sky-50 p-5 ring-1 ring-sky-100/80 md:p-6">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-white shadow-sm">
                <Sparkles className="h-6 w-6 text-violet-600" aria-hidden />
              </div>
              <div className="min-w-0">
                <h3 className="text-lg font-bold uppercase tracking-wide clr-b">Enjoy Your Day</h3>
                <p className="mt-1 text-sm font-normal font-outfit clr-b opacity-80">
                  Beachside bites &amp; bars
                </p>
              </div>
            </div>
            <div className="flex items-start gap-4 rounded-xl bg-sky-50 p-5 ring-1 ring-sky-100/80 md:p-6">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-white shadow-sm">
                <Compass className="h-6 w-6 text-violet-600" aria-hidden />
              </div>
              <div className="min-w-0">
                <h3 className="text-lg font-bold uppercase tracking-wide clr-b">Guided Tours</h3>
                <p className="mt-1 text-sm font-normal font-outfit clr-b opacity-80">
                  Caves, boats &amp; treks
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="flex items-center justify-center bg-white bg-cover bg-center pb-16 pt-8 md:pb-24">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="mb-10 grid grid-cols-1 items-center gap-8 lg:mb-12 lg:grid-cols-2 lg:gap-10">
            <div className="space-y-5 sm:space-y-8">
              <h2 className="text-3xl font-bold leading-tight tracking-tight clr-b sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
                how beachlyfe
                <br />
                eases your life?
              </h2>
              <p className="max-w-lg text-base leading-relaxed sm:text-lg">
                Beach Lyfe transforms the way beach rental businesses operate. Our platform is a
                one-stop shop for listing your beach equipment, making it a breeze for customers to
                find and book what they need.
              </p>
            </div>
            <div className="flex justify-center lg:justify-end">
              <img src="/chair.png" alt="" className="h-auto w-full max-w-md object-contain lg:max-w-full" />
            </div>
          </div>
          <div className="grid grid-cols-1 gap-8 sm:gap-10 md:grid-cols-2 md:gap-12">
            <div className="relative overflow-hidden rounded-2xl bg-[url('/bg-1.png')] bg-cover bg-no-repeat px-5 py-10 sm:px-8 sm:py-14 md:px-10 md:py-16 lg:px-12 lg:py-20">
              <div className="flex items-start justify-between gap-4">
                <img src="/i1.png" alt="" width={70} height={70} className="h-12 w-12 sm:h-14 sm:w-14 md:h-[70px] md:w-[70px]" />
                <span className="absolute right-3 top-2 text-4xl font-bold leading-none text-[#FFAE00] tabular-nums sm:right-6 sm:text-5xl md:text-6xl lg:text-7xl">
                  01
                </span>
              </div>
              <h3 className="mt-6 text-2xl font-bold uppercase tracking-wide text-white sm:mt-8 sm:text-3xl md:text-4xl lg:text-5xl">
                Premium beach
                <br />
                equipment listings
              </h3>
              <p className="mt-4 text-base font-normal font-outfit leading-relaxed text-white/95 sm:text-lg">
                Showcase your high-quality beach gear on Beach Lyfe and tap into a wider market. Our
                platform is designed to highlight the best of what you offer, from sturdy chairs to
                expansive umbrellas, ensuring that renters have access to top-notch equipment.
              </p>
            </div>
            <div className="relative overflow-hidden rounded-2xl bg-[url('/bg-2.png')] bg-cover bg-no-repeat px-5 py-10 sm:px-8 sm:py-14 md:px-10 md:py-16 lg:px-12 lg:py-20">
              <div className="flex items-start justify-between gap-4">
                <img src="/i2.png" alt="" width={70} height={70} className="h-12 w-12 sm:h-14 sm:w-14 md:h-[70px] md:w-[70px]" />
                <span className="absolute right-3 top-2 text-4xl font-bold leading-none text-[#FFAE00] tabular-nums sm:right-6 sm:text-5xl md:text-6xl lg:text-7xl">
                  02
                </span>
              </div>
              <h3 className="mt-6 text-2xl font-bold uppercase tracking-wide clr-b sm:mt-8 sm:text-3xl md:text-4xl lg:text-5xl">
                Convenient rental for increased earnings
              </h3>
              <p className="mt-4 text-base font-normal font-outfit leading-relaxed clr-b sm:text-lg">
                Create pre-packaged bundles of your beach equipment to offer more value and convenience.
                Beach Lyfe helps you curate combinations that meet the diverse needs of beachgoers,
                making it easier for them to choose your rentals over others.
              </p>
            </div>
            <div className="relative overflow-hidden rounded-2xl bg-[url('/bg-2.png')] bg-cover bg-no-repeat px-5 py-10 sm:px-8 sm:py-14 md:px-10 md:py-16 lg:px-12 lg:py-20">
              <div className="flex items-start justify-between gap-4">
                <img src="/i2.png" alt="" width={70} height={70} className="h-12 w-12 sm:h-14 sm:w-14 md:h-[70px] md:w-[70px]" />
                <span className="absolute right-3 top-2 text-4xl font-bold leading-none text-[#FFAE00] tabular-nums sm:right-6 sm:text-5xl md:text-6xl lg:text-7xl">
                  03
                </span>
              </div>
              <h3 className="mt-6 text-2xl font-bold uppercase tracking-wide clr-b sm:mt-8 sm:text-3xl md:text-4xl lg:text-5xl">
                Flexible rental options
              </h3>
              <p className="mt-4 text-base font-normal font-outfit leading-relaxed clr-b sm:text-lg">
                With Beach Lyfe, you&apos;re in control of your rental listings. Whether it&apos;s for a few
                hours or an entire season, our platform adapts to your business model, providing the
                flexibility you need to maximize your earnings.
              </p>
            </div>
            <div className="relative overflow-hidden rounded-2xl bg-[url('/bg-2.png')] bg-cover bg-no-repeat px-5 py-10 sm:px-8 sm:py-14 md:px-10 md:py-16 lg:px-12 lg:py-20">
              <div className="flex items-start justify-between gap-4">
                <img src="/i2.png" alt="" width={70} height={70} className="h-12 w-12 sm:h-14 sm:w-14 md:h-[70px] md:w-[70px]" />
                <span className="absolute right-3 top-2 text-4xl font-bold leading-none text-[#FFAE00] tabular-nums sm:right-6 sm:text-5xl md:text-6xl lg:text-7xl">
                  04
                </span>
              </div>
              <h3 className="mt-6 text-2xl font-bold uppercase tracking-wide clr-b sm:mt-8 sm:text-3xl md:text-4xl lg:text-5xl">
                Umbrella and shade listings
              </h3>
              <p className="mt-4 text-base font-normal font-outfit leading-relaxed clr-b sm:text-lg">
                List a variety of umbrella and shade options to cater to every preference. Beach
                Lyfe&apos;s platform allows you to showcase different sizes, colors, and features, making
                it simple for renters to find the perfect match for their beach setup.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Featured vendors */}
      <section id="vendors" className="scroll-mt-32 bg-white py-14 md:py-20">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="mb-10 md:mb-12 text-center">
            <span className={accentRule} />
            <h2 className={sectionTitle}>Featured vendors</h2>
            <p className={sectionSub}>Trusted local businesses at the beach.</p>
          </div>
          <ScrollReveal staggerChildren y={20} className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {FEATURED_VENDORS.map((vendor) => (
              <Link
                key={vendor.id}
                href={`/vendor/${vendor.id}`}
                className="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-sky-100/90 transition hover:-translate-y-1 hover:shadow-md"
              >
                <div className="relative aspect-[4/3] w-full overflow-hidden">
                  <Image
                    src={vendor.image}
                    alt=""
                    fill
                    className="object-cover transition duration-300 group-hover:scale-105"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                  />
                  <span className="absolute right-3 top-3 rounded-md bg-white/95 px-2.5 py-1 text-xs font-semibold text-[#001B44] shadow">
                    {vendor.priceRange}
                  </span>
                </div>
                <div className="p-5">
                  <span className="text-xs font-semibold uppercase tracking-wide text-[#2A7EE0]">
                    {vendor.category.replace("-", " ")}
                  </span>
                  <h3 className="mt-1 text-lg font-bold clr-b">{vendor.name}</h3>
                  <p className="mt-1 text-sm font-outfit text-[#111246]/75">
                    {vendor.rating} ★ · {vendor.reviewCount} reviews
                  </p>
                  <p className="mt-2 line-clamp-2 text-sm font-outfit text-[#111246]/80">{vendor.description}</p>
                  <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-[#2A7EE0]">
                    View vendor
                    <ChevronRight className="h-4 w-4" aria-hidden />
                  </span>
                </div>
              </Link>
            ))}
          </ScrollReveal>
        </div>
      </section>

      {/* Sticky jump nav — scroll spy + active state */}
      <nav
        className="sticky top-[4.25rem] z-40 border-b border-[#7EB5D6]/50 bg-gradient-to-b from-[#c5dff0] to-[#B2D3E8] py-3 shadow-[0_8px_24px_-12px_rgba(0,27,68,0.18)] sm:top-20" aria-label="Section shortcuts">
        <div className="container mx-auto max-w-7xl px-3 sm:px-4">
          <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
            {JUMP_SECTIONS.map(({ id, label, href }) => {
              const isActive = activeJumpId === id;
              return (
                <a
                  key={id}
                  href={href}
                  className={cn(
                    "rounded-full px-4 py-2 text-sm font-semibold tracking-tight transition-all duration-200 sm:px-5 sm:py-2.5",
                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#001B44]",
                    isActive
                      ? "bg-[#001B44] text-white shadow-md ring-2 ring-[#F4C430] ring-offset-0"
                      : "border border-white/70 bg-white/90 text-[#001B44]/90 shadow-sm hover:border-[#2A7EE0]/45 hover:bg-white hover:text-[#001B44] hover:shadow"
                  )}
                  aria-current={isActive ? "location" : undefined}
                >
                  {label}
                </a>
              );
            })}
          </div>
        </div>
      </nav>

      {/* Case studies / results */}
      <section id="results" className="scroll-mt-[calc(4.25rem+3.5rem)] bg-white py-14 md:py-20 sm:scroll-mt-32">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="mb-10 text-center md:mb-14">
            <span className={accentRule} />
            <h2 className={`${sectionTitle} text-balance`}>
              From beach rentals to local experiences — results that matter
            </h2>
            <p className={`${sectionSub} mx-auto`}>
              Explore what&apos;s possible on BeachLyfe: rentals, vendors, and experiences in one place.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-8">
            {CASE_STUDY_ITEMS.map((item) => (
              <article
                key={item.tag}
                className="flex flex-col overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-sky-100/90 transition hover:-translate-y-1 hover:shadow-md"
              >
                <div className="relative aspect-[4/3] w-full overflow-hidden">
                  <Image
                    src={item.image}
                    alt=""
                    fill
                    className="object-cover"
                    sizes="(max-width: 768px) 100vw, 33vw"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-[#001B44]/55 to-transparent" />
                  <span className="absolute left-4 top-4 rounded-full bg-white/95 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-[#001B44]">
                    {item.tag}
                  </span>
                </div>
                <div className="flex flex-1 flex-col p-6">
                  <h3 className="text-xl font-bold clr-b">{item.title}</h3>
                  <p className="mt-2 flex-1 text-sm font-outfit leading-relaxed text-[#111246]/85">
                    {item.description}
                  </p>
                  <div className="mt-4 flex flex-wrap items-baseline gap-2 border-t border-sky-100 pt-4">
                    <span className="text-2xl font-bold text-[#2A7EE0] tabular-nums">{item.stat}</span>
                    <span className="text-sm font-medium text-[#111246]/70">{item.statLabel}</span>
                  </div>
                  <Link
                    href={item.href}
                    className="mt-4 inline-flex items-center justify-center gap-1 rounded-full border-2 border-[#2A7EE0]/30 bg-sky-50 px-4 py-2.5 text-sm font-semibold text-[#001B44] transition hover:bg-[#2A7EE0] hover:text-white"
                  >
                    {item.cta}
                    <ChevronRight className="h-4 w-4" aria-hidden />
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>



      {/* Popular beaches */}
      <section id="beaches" className="scroll-mt-32 bg-[#f0f7fb] py-14 md:py-20">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="mb-10 md:mb-12 text-center">
            <span className={accentRule} />
            <h2 className={sectionTitle}>Popular beaches</h2>
            <p className={sectionSub}>Discover top spots — tap a card to open the beach page.</p>
          </div>
          <ScrollReveal staggerChildren y={20} className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {POPULAR_BEACHES.map((beach) => (
              <Link
                key={beach.id}
                href={`/beach/${beach.id}`}
                className="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-sky-100/90 transition hover:-translate-y-1 hover:shadow-md"
              >
                <div className="relative aspect-[16/10] w-full overflow-hidden">
                  <Image
                    src={beach.image}
                    alt=""
                    fill
                    className="object-cover transition duration-300 group-hover:scale-105"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                  />
                </div>
                <div className="p-5">
                  <span className="text-xs font-semibold uppercase tracking-wide text-[#2A7EE0]">
                    {beach.state}
                  </span>
                  <h3 className="mt-1 text-lg font-bold clr-b">{beach.name}</h3>
                  <p className="mt-0.5 text-sm font-outfit text-[#111246]/75">
                    {beach.city}, {beach.state}
                  </p>
                  <p className="mt-3 text-sm font-medium text-[#111246]/80">{beach.vendorCount}+ vendors</p>
                  <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-[#2A7EE0]">
                    View beach
                    <ChevronRight className="h-4 w-4 transition group-hover:translate-x-0.5" aria-hidden />
                  </span>
                </div>
              </Link>
            ))}
          </ScrollReveal>
        </div>
      </section>

      {/* By state */}
      <section id="states" className="scroll-mt-32 bg-white py-14 md:py-20">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="mb-10 md:mb-12 text-center">
            <span className={accentRule} />
            <h2 className={sectionTitle}>Explore by state</h2>
            <p className={sectionSub}>Browse beaches by region.</p>
          </div>
          <ScrollReveal staggerChildren y={20} className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {states.map((state) => (
              <Link
                key={state.id}
                href={`/browse/${state.id}`}
                className="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-sky-100/90 transition hover:-translate-y-1 hover:shadow-md"
              >
                <div className="relative aspect-[2/1] w-full overflow-hidden">
                  <Image
                    src={STATE_IMAGES[state.id] ?? STATE_IMAGES.fl}
                    alt=""
                    fill
                    className="object-cover transition duration-300 group-hover:scale-105"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-[#001B44]/75 via-[#001B44]/20 to-transparent" />
                  <div className="absolute bottom-4 left-4 right-4">
                    <h3 className="text-xl font-bold text-white drop-shadow">{state.name}</h3>
                    <p className="text-sm text-white/90">{state.beachCount} beaches</p>
                  </div>
                </div>
                <div className="flex items-center justify-between px-5 py-4">
                  <span className="text-sm font-outfit text-[#111246]/80">See listings in {state.name}</span>
                  <ChevronRight className="h-5 w-5 shrink-0 text-[#2A7EE0]" aria-hidden />
                </div>
              </Link>
            ))}
          </ScrollReveal>
        </div>
      </section>

      {/* What to do */}
      <section className="scroll-mt-32 bg-[#f0f7fb] py-14 md:py-20" id="what-to-do">
        <div className="container mx-auto max-w-7xl px-4 " >
          <div className="mb-10 md:mb-12 text-center " >
            <span className={accentRule} />
            <h2 className={sectionTitle}>What to do</h2>
            <p className={sectionSub}>Rentals, food, lessons &amp; more — start exploring.</p>
          </div>
          <ScrollReveal staggerChildren y={10} className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
            {FEATURED_CATEGORIES.map((cat) => (
              <Link
                key={cat.id}
                href="/explore"
                className="flex flex-col items-center gap-4 rounded-2xl border border-sky-100 bg-white p-6 text-center shadow-sm ring-1 ring-sky-100/80 transition hover:-translate-y-0.5 hover:shadow-md"
              >
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-sky-50 text-[#2A7EE0]">
                  {CATEGORY_ICONS[cat.id] ?? <Umbrella className="h-6 w-6" aria-hidden />}
                </div>
                <span className="text-sm font-semibold clr-b">{cat.name}</span>
              </Link>
            ))}
          </ScrollReveal>
        </div>
      </section>



      {/* Today's deals */}
      <section id="deals" className="scroll-mt-32 bg-[#f0f7fb] py-14 md:py-20">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="mb-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between md:mb-12">
            <div className="text-center w-full">
              <span className={accentRule} />
              <h2 className={sectionTitle}>Today&apos;s deals</h2>
              <p className={sectionSub}>Save on rentals &amp; experiences.</p>
            </div>

          </div>
          <ScrollReveal staggerChildren y={20} className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {TODAY_DEALS.map((deal) => {
              const savePercent = Math.round((1 - deal.rackPrice / deal.originalPrice) * 100);
              return (
                <Link
                  key={deal.id}
                  href={`/vendor/${deal.vendorId}`}
                  className="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-sky-100/90 transition hover:-translate-y-1 hover:shadow-md"
                >
                  <div className="relative aspect-[4/3] w-full overflow-hidden">
                    <Image
                      src={deal.image}
                      alt=""
                      fill
                      className="object-cover transition duration-300 group-hover:scale-105"
                      sizes="(max-width: 640px) 100vw, 25vw"
                    />
                    <span className="absolute left-3 top-3 inline-flex items-center gap-1 rounded-md bg-[#F4C430] px-2 py-1 text-xs font-bold text-[#001B44] shadow">
                      <Tag className="h-3 w-3" aria-hidden />
                      Deal
                    </span>
                  </div>
                  <div className="p-5">
                    <h3 className="line-clamp-2 text-base font-bold clr-b">{deal.title}</h3>
                    <div className="mt-2 flex flex-wrap items-baseline gap-2">
                      <span className="text-xl font-bold text-[#001B44]">${deal.rackPrice}</span>
                      <span className="text-sm text-[#111246]/50 line-through">${deal.originalPrice}</span>
                      <span className="rounded bg-sky-100 px-1.5 py-0.5 text-xs font-semibold text-[#001B44]">
                        Save {savePercent}%
                      </span>
                    </div>
                    <p className="mt-2 line-clamp-2 text-sm font-outfit text-[#111246]/80">{deal.description}</p>
                    <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-[#2A7EE0]">
                      View deal
                      <ChevronRight className="h-4 w-4" aria-hidden />
                    </span>
                  </div>
                </Link>
              );
            })}
          </ScrollReveal>
        </div>
      </section>

      <section className="flex items-center justify-center bg-white py-10 sm:py-12">
        <div className="container mx-auto max-w-7xl bg-[url('/bg-cta.png')] bg-contain bg-center bg-no-repeat px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 items-center gap-8 md:grid-cols-2 md:gap-10">
            <div className="space-y-6 pl-0 sm:space-y-8 md:pl-8 lg:pl-12">
              <h2 className="text-3xl font-bold leading-tight clr-b sm:text-4xl md:text-5xl lg:text-6xl">
                download the
                <br />
                app &amp; get started!
              </h2>
              <p className="max-w-xl text-base leading-relaxed sm:text-lg">
                The Beach Lyfe app is here to make renting out your beach equipment super easy. Just
                list your chairs, umbrellas, and coolers on our app, and watch as beachgoers book them
                in no time.
              </p>
              <div>
                <Link href="/signup" className={ctaPrimary}>
                  Get Started!
                </Link>
              </div>
            </div>
            <div className="relative flex justify-center md:justify-end">
              <img
                src="/mob.png"
                alt=""
                className="relative right-0 h-auto w-full max-w-xs object-contain sm:max-w-sm md:-top-12 md:max-w-none lg:-top-20"
              />
            </div>
          </div>
        </div>
      </section>

      <section
        ref={videoSectionRef}
        className="relative min-h-[78vh] overflow-hidden md:min-h-screen"
        aria-label="Coastal experience"
      >
        <div
          className={cn(
            "pointer-events-none absolute inset-0 will-change-transform",
            prefersReducedMotion && "scale-105"
          )}
          style={
            prefersReducedMotion
              ? undefined
              : {
                transform: `translate3d(0, ${videoParallaxY}px, 0) scale(1.09)`,
              }
          }
        >
          <video
            ref={heroVideoRef}
            autoPlay
            muted
            loop
            playsInline
            preload="auto"
            className={cn(
              "h-full w-full object-cover",
              !prefersReducedMotion && "min-h-[120%]"
            )}
            aria-hidden
          >
            <source src="/beach1.mp4" type="video/mp4" />
          </video>
        </div>

        <div
          className="pointer-events-none absolute inset-0 bg-gradient-to-b from-[#001B44]/55 via-[#001B44]/15 to-[#f8fafc] sm:from-[#001B44]/45"
          aria-hidden
        />
        <div
          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_90%_70%_at_50%_35%,transparent_0%,rgba(0,27,68,0.45)_100%)] opacity-90"
          aria-hidden
        />
        <div
          className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-[#f8fafc] via-[#f8fafc]/80 to-transparent md:h-48"
          aria-hidden
        />

        <div className="relative z-10 flex min-h-[78vh] flex-col items-center justify-center px-4 pb-24 pt-16 text-center md:min-h-screen md:pb-32 md:pt-20">
          <div
            className={cn(
              "max-w-3xl transition-all duration-700 ease-out",
              prefersReducedMotion
                ? "opacity-100"
                : videoHeroReveal
                  ? "translate-y-0 opacity-100"
                  : "translate-y-8 opacity-0"
            )}
          >
            <span className="mb-5 inline-flex items-center gap-2 rounded-full border-2 border-[#F4C430]/90 bg-[#001B44]/85 px-4 py-2 text-xs font-bold uppercase tracking-[0.2em] text-white shadow-[0_4px_20px_rgba(0,0,0,0.35)] backdrop-blur-sm">
              <Waves className="h-3.5 w-3.5 shrink-0 text-[#F4C430]" aria-hidden />
              Beach Lyfe
            </span>
            <h2 className="text-3xl font-bold leading-[1.1] tracking-tight text-white text-balance drop-shadow-[0_4px_24px_rgba(0,0,0,0.35)] sm:text-4xl md:text-5xl lg:text-6xl">
              Feel the coast.
              <br />
              <span className="text-white/95">Book everything in one place.</span>
            </h2>
            <p className="mx-auto mt-5 max-w-lg text-base font-outfit leading-relaxed text-white/90 sm:text-lg">
              Keep scrolling — vendors, beaches, and deals are right below.
            </p>
            <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4">
              <Link
                href="/explore"
                className="inline-flex items-center justify-center gap-2 rounded-full bg-[#F4C430] px-8 py-3 text-base font-bold text-[#001B44] shadow-lg shadow-black/20 transition hover:bg-[#e6b82a]"
              >
                Explore beaches
                <ChevronRight className="h-4 w-4" aria-hidden />
              </Link>
              <a
                href="#results"
                className="inline-flex items-center justify-center gap-2 rounded-full border-2 border-[#F4C430] bg-[#001B44]/92 px-7 py-3 text-sm font-bold text-white shadow-[0_6px_24px_rgba(0,27,68,0.55)] backdrop-blur-sm transition hover:bg-[#001B44] hover:shadow-[0_8px_28px_rgba(0,27,68,0.65)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
              >
                Jump to highlights
              </a>
            </div>
          </div>

          <div
            className={cn(
              "absolute bottom-8 left-1/2 flex -translate-x-1/2 flex-col items-center gap-2 transition-opacity duration-500 md:bottom-12",
              videoHeroReveal ? "opacity-90" : "opacity-0"
            )}
          >
            <span className="text-[10px] font-semibold uppercase tracking-widest text-white/80">Scroll</span>
            <ChevronDown
              className="h-6 w-6 animate-bounce text-white/90 motion-reduce:animate-none"
              aria-hidden
            />
          </div>
        </div>
      </section>

      <section className="bg-slate-50 py-16 md:py-24">
        <div className="container mx-auto max-w-7xl px-4">
          <h2 className="text-center text-3xl font-bold uppercase tracking-tight text-balance clr-b md:text-4xl lg:text-5xl">
            Start renting with Beach Lyfe now!
          </h2>
          <p className="mx-auto mt-5 max-w-2xl text-center text-base font-outfit leading-relaxed text-[#111246]/85 md:text-lg">
            Discover how simple it is to find and book beach gear—from browsing trusted providers to
            choosing durations and returning gear hassle-free—all in one place.
          </p>

          <div className="mt-12 grid grid-cols-1 items-center gap-10 lg:mt-16 lg:grid-cols-[1fr_auto_1fr] lg:gap-8 xl:gap-12">
            <div className="flex flex-col gap-6 lg:gap-8">
              <div className="rounded-2xl bg-sky-50 p-6 ring-1 ring-sky-100/80 md:p-8">
                <img src="/i2.png" alt="" width={70} height={70} />
                <h3 className="mt-6 text-lg font-bold uppercase tracking-wide md:text-xl">Browse &amp; book</h3>
                <p className="mt-3 text-sm font-normal font-outfit leading-relaxed clr-b opacity-90 md:text-base">
                  Simply hop onto our user-friendly app or website and browse through our wide range of
                  beach rentals. Once you find what you need, just hit that book button, and you&apos;re
                  all set!
                </p>
              </div>
              <div className="rounded-2xl bg-sky-50 p-6 ring-1 ring-sky-100/80 md:p-8">
                <img src="/i2.png" alt="" width={70} height={70} />
                <h3 className="mt-6 text-lg font-bold uppercase tracking-wide clr-b md:text-xl">Enjoy your day</h3>
                <p className="mt-3 text-sm font-normal font-outfit leading-relaxed clr-b opacity-90 md:text-base">
                  On the day of your beach adventure, head to your designated pickup spot and grab your
                  rentals. Then, all that&apos;s left to do is relax and soak up the sun – Beach Lyfe has
                  taken care of the rest!
                </p>
              </div>
            </div>

            <div className="mx-auto flex justify-center lg:mx-0 lg:px-2">
              <img
                src="/mbl.png"
                alt="Beach Lyfe app — Service Provider screen"
                className="h-auto w-full max-w-[280px] drop-shadow-2xl md:max-w-[320px]"
                width={320}
                height={640}
              />
            </div>

            <div className="flex flex-col gap-6 lg:gap-8">
              <div className="rounded-2xl bg-sky-50 p-6 ring-1 ring-sky-100/80 md:p-8">
                <img src="/i2.png" alt="" width={70} height={70} />
                <h3 className="mt-6 text-lg font-bold uppercase tracking-wide clr-b md:text-xl">
                  Choose your duration
                </h3>
                <p className="mt-3 text-sm font-normal font-outfit leading-relaxed clr-b opacity-90 md:text-base">
                  Whether you&apos;re planning a quick beach hangout or a full day of fun in the sun, Beach
                  Lyfe offers flexible rental options to suit your schedule.
                </p>
              </div>
              <div className="rounded-2xl bg-sky-50 p-6 ring-1 ring-sky-100/80 md:p-8">
                <img src="/i2.png" alt="" width={70} height={70} />
                <h3 className="mt-6 text-lg font-bold uppercase tracking-wide clr-b md:text-xl">
                  Return &amp; relax
                </h3>
                <p className="mt-3 text-sm font-normal font-outfit leading-relaxed clr-b opacity-90 md:text-base">
                  When your beach day comes to an end, simply return your rentals to the designated
                  drop-off point. No need to stress about cleaning or storage – just hand them back and
                  head home with a smile on your face.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-12 md:py-16 lg:py-20">
        <div className="container mx-auto max-w-7xl px-4">
          <div className="relative overflow-hidden rounded-2xl bg-linear-to-br from-[#E8F6FF] to-[#B8DFF8] p-6 shadow-sm ring-1 ring-sky-200/40 sm:rounded-3xl sm:p-8 md:p-12 lg:rounded-4xl lg:p-14">
            <div className="grid grid-cols-1 items-center gap-8 sm:gap-10 lg:grid-cols-2 lg:gap-12 xl:gap-16">
              <div className="space-y-5 sm:space-y-6 md:space-y-8">
                <h2 className="text-2xl font-bold uppercase leading-tight tracking-tight text-[#001B44] sm:text-3xl md:text-4xl lg:text-5xl">
                  One-stop shop for all beach rentals.
                </h2>
                <p className="text-base font-normal font-outfit leading-relaxed text-[#001B44]/90 md:text-lg">
                  Step into the world of Beach Lyfe, the ultimate hub for beach rental businesses to
                  showcase their equipment. We provide a seamless platform for listing your chairs,
                  umbrellas, coolers, and more, ensuring they&apos;re rented out to beachgoers looking for
                  comfort and convenience.
                </p>
                <p className="text-base font-normal font-outfit leading-relaxed text-[#001B44]/90 md:text-lg">
                  At Beach Lyfe, we understand the value of your investment. That&apos;s why we&apos;ve designed a
                  system that&apos;s as clear as the ocean waters. This means every piece of equipment you
                  list is an opportunity for profit with no hidden catches.
                </p>
                <div>
                  <Link href="/signup" className={ctaPrimary}>
                    Get Started!
                  </Link>
                </div>
              </div>
              <div className="flex justify-center lg:justify-end">
                <img
                  src="/mobile-one.png"
                  alt="Beach Lyfe app on a phone"
                  className="h-auto w-full max-w-[min(100%,320px)] object-contain object-bottom sm:max-w-sm md:max-w-md lg:max-w-full lg:translate-y-4"
                  width={700}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="border-t border-sky-100 bg-white py-10">
        <div className="container mx-auto flex max-w-7xl flex-col items-center justify-center gap-3 px-4 text-center sm:flex-row sm:gap-2">
          <MapPin className="h-5 w-5 shrink-0 text-[#2A7EE0]" aria-hidden />
          <p className="text-sm font-outfit text-[#111246]/85">
            Looking for more?{" "}
            <Link href="/explore" className="font-semibold text-[#2A7EE0] underline-offset-2 hover:underline">
              Explore the full directory
            </Link>
          </p>
        </div>
      </section>
    </>
  );
}