"use client"

import { useRef, useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { useAuth } from "@/lib/auth-context"
import {
  MapPin,
  LogOut,
  User,
  ChevronRight,
  Umbrella,
  Utensils,
  Waves,
  Compass,
  GraduationCap,
  ShoppingBag,
  Tag,
} from "lucide-react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import {
  beaches,
  states,
  categories,
  vendors,
  rackListings,
} from "@/lib/mock-data"
import { ScrollReveal } from "@/components/animations/scroll-reveal"

gsap.registerPlugin(ScrollTrigger)

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="w-5 h-5" />,
  food: <Utensils className="w-5 h-5" />,
  "water-sports": <Waves className="w-5 h-5" />,
  tours: <Compass className="w-5 h-5" />,
  lessons: <GraduationCap className="w-5 h-5" />,
  equipment: <ShoppingBag className="w-5 h-5" />,
}

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

const HERO_STATS = [
  { label: "Beaches", value: 500, suffix: "+", start: 1, delay: 0.1 },
] as const

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

function CountUp({
  value,
  start = 0,
  suffix = "",
  duration = 1.8,
  delay = 0.2,
  className,
}: {
  value: number
  /** Animate from this number (e.g. 1 for “1 → 500+”) */
  start?: number
  suffix?: string
  duration?: number
  delay?: number
  className?: string
}) {
  const [display, setDisplay] = useState(start)
  const obj = useRef({ val: start })

  useEffect(() => {
    obj.current.val = start
    setDisplay(start)
    const tween = gsap.to(obj.current, {
      val: value,
      duration,
      delay,
      ease: "power2.out",
      onUpdate: () => setDisplay(Math.round(obj.current.val)),
    })
    return () => {
      tween.kill()
    }
  }, [value, start, duration, delay])

  return (
    <span className={className}>
      {display}
      {suffix}
    </span>
  )
}

export default function HomePage() {
  const { user, isLoading, logout } = useAuth()
  const { setTheme, resolvedTheme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const [isRecommendOpen, setIsRecommendOpen] = useState(false)
  const [recommendSuccess, setRecommendSuccess] = useState(false)
  const [recommendForm, setRecommendForm] = useState({
    businessName: "",
    businessType: "",
    location: "",
    contactEmail: "",
    websiteOrSocial: "",
    notes: "",
  })
  const heroRef = useRef<HTMLElement>(null)
  const heroVideoRef = useRef<HTMLVideoElement>(null)
  const sectionsRef = useRef<(HTMLElement | null)[]>([])
  const [expandedCaseStudy, setExpandedCaseStudy] = useState<string | null>(null)

  useEffect(() => {
    setMounted(true)
  }, [])
  const [expandedBeachId, setExpandedBeachId] = useState<string | null>(null)
  const [expandedStateId, setExpandedStateId] = useState<string | null>(null)
  const [expandedVendorId, setExpandedVendorId] = useState<string | null>(null)
  const [expandedDealId, setExpandedDealId] = useState<string | null>(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      const hero = heroRef.current
      if (!hero) return
      const tagline = hero.querySelector(".hero-tagline")
      const headline = hero.querySelector(".hero-headline")
      const description = hero.querySelector(".hero-description")
      const cta = hero.querySelector(".hero-cta")
      const stats = hero.querySelector(".hero-stats")
      const els = [tagline, headline, description, cta, stats].filter(Boolean)
      gsap.fromTo(
        els,
        { opacity: 0, y: 24 },
        {
          opacity: 1,
          y: 0,
          duration: 0.6,
          stagger: 0.12,
          ease: "power2.out",
          delay: 0.15,
        }
      )
      sectionsRef.current.forEach((section, i) => {
        if (!section) return
        const content = section.querySelector(".section-content")
        if (content) {
          gsap.fromTo(
            content,
            { opacity: 0, y: 20 },
            {
              opacity: 1,
              y: 0,
              duration: 0.5,
              ease: "power2.out",
              scrollTrigger: {
                trigger: section,
                start: "top 88%",
                toggleActions: "play none none none",
              },
            }
          )
        }
      })
    })
    return () => ctx.revert()
  }, [])

  // Start hero video as soon as page shows (no delay)
  useEffect(() => {
    const video = heroVideoRef.current
    if (!video) return
    const play = () => {
      video.play().catch(() => {})
    }
    play()
    video.addEventListener("loadeddata", play)
    return () => video.removeEventListener("loadeddata", play)
  }, [])

  const submitRecommendation = (e: React.FormEvent) => {
    e.preventDefault()
    const payload = {
      ...recommendForm,
      submittedAt: new Date().toISOString(),
    }
    try {
      const key = "beachlyfe_recommended_businesses"
      const raw = localStorage.getItem(key)
      const entries = raw ? (JSON.parse(raw) as typeof payload[]) : []
      entries.push(payload)
      localStorage.setItem(key, JSON.stringify(entries))
    } catch {
      // Ignore localStorage failures in private mode.
    }
    setRecommendSuccess(true)
    setRecommendForm({
      businessName: "",
      businessType: "",
      location: "",
      contactEmail: "",
      websiteOrSocial: "",
      notes: "",
    })
    setTimeout(() => {
      setRecommendSuccess(false)
      setIsRecommendOpen(false)
    }, 1200)
  }

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <img
          src="/beachlyfe-logo.png"
          alt="BeachLyfe"
          className="h-11 w-auto object-contain animate-pulse opacity-80"
          width={180}
          height={44}
        />
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Header — on-brand, glassy */}
      <header className="sticky top-0 z-50 border-b border-border/80 bg-background/90 backdrop-blur-xl shadow-sm">
        <div className="w-full px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16 lg:h-20">
            <Link href="/" className="flex items-center gap-2" aria-label="BeachLyfe home">
              <img
                src="/beachlyfe-logo.png"
                alt="BeachLyfe"
                className="h-12 sm:h-14 w-auto object-contain"
                width={180}
                height={56}
              />
              <span className="logo-wordmark text-xl sm:text-2xl hidden sm:inline">
                BeachLyfe
              </span>
            </Link>
            <nav className="flex items-center gap-3 dark:text-white">
              <Dialog open={isRecommendOpen} onOpenChange={setIsRecommendOpen}>
                <DialogTrigger asChild>
                  <Button variant="ghost" size="sm" className="dark:text-white dark:hover:bg-white/10 dark:hover:text-white">
                    Recommend a Business
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-xl">
                  <DialogHeader>
                    <DialogTitle>Recommend a Business</DialogTitle>
                    <DialogDescription>
                      Share a local vendor you want to see on BeachLyfe.
                    </DialogDescription>
                  </DialogHeader>
                  <form className="space-y-4" onSubmit={submitRecommendation}>
                    <div className="space-y-2">
                      <Label htmlFor="rec-business-name">Business Name</Label>
                      <Input
                        id="rec-business-name"
                        value={recommendForm.businessName}
                        onChange={(e) => setRecommendForm((f) => ({ ...f, businessName: e.target.value }))}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="rec-business-type">Business Type</Label>
                      <Input
                        id="rec-business-type"
                        value={recommendForm.businessType}
                        onChange={(e) => setRecommendForm((f) => ({ ...f, businessType: e.target.value }))}
                        placeholder="e.g. Rentals, Food & Drinks, Lessons"
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="rec-location">Location</Label>
                      <Input
                        id="rec-location"
                        value={recommendForm.location}
                        onChange={(e) => setRecommendForm((f) => ({ ...f, location: e.target.value }))}
                        placeholder="City, State or Beach Name"
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="rec-email">Contact Email</Label>
                      <Input
                        id="rec-email"
                        type="email"
                        value={recommendForm.contactEmail}
                        onChange={(e) => setRecommendForm((f) => ({ ...f, contactEmail: e.target.value }))}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="rec-website">Website or Social Media (optional)</Label>
                      <Input
                        id="rec-website"
                        value={recommendForm.websiteOrSocial}
                        onChange={(e) => setRecommendForm((f) => ({ ...f, websiteOrSocial: e.target.value }))}
                        placeholder="https://..."
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="rec-notes">Notes / Description</Label>
                      <Textarea
                        id="rec-notes"
                        rows={3}
                        value={recommendForm.notes}
                        onChange={(e) => setRecommendForm((f) => ({ ...f, notes: e.target.value }))}
                        placeholder="Tell us why this business should be added."
                        required
                      />
                    </div>
                    <DialogFooter>
                      <Button type="submit">{recommendSuccess ? "Submitted" : "Submit Recommendation"}</Button>
                    </DialogFooter>
                  </form>
                </DialogContent>
              </Dialog>
             
              {user ? (
                <>
                  <div className="flex items-center gap-2 text-foreground dark:text-white">
                    {user.avatarUrl ? (
                      <img
                        src={user.avatarUrl}
                        alt=""
                        className="w-8 h-8 rounded-full object-cover"
                      />
                    ) : (
                      <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center">
                        <User className="w-4 h-4 text-muted-foreground" />
                      </div>
                    )}
                    <span className="text-sm text-muted-foreground dark:text-white/80 hidden sm:inline max-w-[120px] truncate">
                      {user.email}
                    </span>
                  </div>
                  <Button variant="ghost" size="sm" className="dark:text-white dark:hover:bg-white/10 dark:hover:text-white" onClick={logout}>
                    <LogOut className="w-4 h-4 sm:mr-2" />
                    <span className="hidden sm:inline">Log out</span>
                  </Button>
                </>
              ) : (
                <>
                  <Button variant="ghost" size="sm" className="dark:text-white dark:hover:bg-white/10 dark:hover:text-white" asChild>
                    <Link href="/choose-account">Sign In</Link>
                  </Button>
                  <Button size="sm" asChild>
                    <Link href="/signup">Get Started</Link>
                  </Button>
                </>
              )}
            </nav>
          </div>
        </div>
      </header>

      {/* Hero — full-bleed, centered content */}
      <section ref={heroRef} className="relative min-h-[85vh] flex flex-col justify-center overflow-hidden grain-overlay">
        {/* Background video — preload + ref so it starts as soon as page shows */}
        <div className="absolute inset-0">
          <video
            ref={heroVideoRef}
            autoPlay
            muted
            loop
            playsInline
            preload="auto"
            className="absolute inset-0 h-full w-full object-cover"
            aria-hidden
          >
            <source src="/beach1.mp4" type="video/mp4" />
          </video>
          <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/50 to-black/25" />
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_50%,var(--beach-cyan)_0%,transparent_50%)] opacity-30" />
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_50%_40%_at_80%_20%,var(--beach-gold)_0%,transparent_40%)] opacity-20" />
        </div>

        <div className="hero-content relative z-10 w-full px-4 sm:px-6 lg:px-8 py-20 sm:py-24 flex flex-col items-center text-center">
          <span className="hero-tagline inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/10 backdrop-blur-sm px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white/95 mb-6">
            <Waves className="w-3.5 h-3.5" />
            BeachLyfe — Beach rentals & experiences
          </span>
          <h1 className="hero-headline text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-white tracking-tight leading-[1.05] max-w-4xl">
            Your next{" "}
            <span className="hero-gradient-text">beach day</span>
            <br />
            starts here
          </h1>
          <p className="hero-description mt-6 text-lg sm:text-xl text-white/90 max-w-lg mx-auto leading-relaxed">
            One platform for beaches, vendors & deals. Book chairs, umbrellas, lessons, and more.
          </p>
          <div className="hero-cta mt-10 flex flex-wrap gap-4 justify-center">
            <Button
              size="lg"
              className="hero-cta-primary cursor-pointer bg-white text-foreground hover:bg-white/95 shadow-xl ring-2 ring-white/40 hover:ring-white/60 hover:scale-[1.03] transition-all duration-300 text-base font-semibold px-8"
              asChild
            >
              <Link href="/explore">
                <MapPin className="w-4 h-4 mr-2" />
                Explore Beaches
              </Link>
            </Button>
            {!user && (
              <Button
                size="lg"
                variant="outline"
                className="cursor-pointer border-2 border-white/70  hover:bg-white/20 hover:border-white hover:text-white backdrop-blur-sm transition-all duration-300 font-semibold px-6"
                asChild
              >
                <Link href="/signup">Create Account</Link>
              </Button>
            )}
          </div>

          {/* Stats — beaches (count-up) */}
          <div className="hero-stats mt-14 sm:mt-20 flex flex-wrap items-stretch justify-center gap-4 sm:gap-6 mx-auto">
            {HERO_STATS.map((stat) => (
              <div
                key={stat.label}
                className="flex flex-none flex-col items-center justify-center w-full max-w-[220px] rounded-2xl border border-white/20 bg-black/35 px-5 py-4 sm:px-6 sm:py-4 backdrop-blur-md animate-float-soft"
              >
                <CountUp
                  start={stat.start}
                  value={stat.value}
                  suffix={stat.suffix}
                  delay={stat.delay}
                  className="block text-3xl sm:text-4xl font-bold text-white tabular-nums drop-shadow-sm"
                />
                <span className="text-sm font-semibold text-white/95 mt-1">{stat.label}</span>
              </div>
            ))}
          </div>
          <p className="mt-8 text-sm font-medium text-white/80 tracking-wide">
            Trusted by beachgoers across the US · Powered by <span className="font-semibold text-white/95">BeachLyfe</span>
          </p>
        </div>

        {/* Wave divider — layered for depth */}
        <div className="absolute bottom-0 left-0 right-0 z-10 w-full overflow-hidden leading-[0]">
          <svg className="relative w-full h-14 sm:h-20" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path fill="var(--background)" opacity="0.4" d="M0,90 C250,40 450,100 600,70 C800,30 1000,80 1200,60 L1200,120 L0,120 Z" />
            <path fill="var(--background)" opacity="0.7" d="M0,75 C300,120 600,20 900,70 C1050,95 1125,95 1200,70 L1200,120 L0,120 Z" />
            <path fill="var(--background)" d="M0,64 C300,120 600,0 900,64 C1050,96 1125,96 1200,64 L1200,120 L0,120 Z" />
          </svg>
        </div>
      </section>

      {/* Quick nav — professional bar with shadow, bg & hover */}
      <nav className="sticky top-16 lg:top-20 z-40 border-b border-border bg-card/95 backdrop-blur-xl py-5 sm:py-6 shadow-[0_4px_24px_-4px_rgba(0,0,0,0.08),0_2px_12px_-2px_rgba(0,0,0,0.04)]">
        <div className="content-80 px-4 sm:px-6">
          <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4">
            <a href="#results" className="quick-nav-pill px-5 py-3 rounded-full text-sm sm:text-base font-medium text-muted-foreground">Results</a>
            <a href="#what-to-do" className="quick-nav-pill px-5 py-3 rounded-full text-sm sm:text-base font-medium text-muted-foreground">What To Do</a>
            <a href="#deals" className="quick-nav-pill px-5 py-3 rounded-full text-sm sm:text-base font-medium text-muted-foreground">Deals</a>
          </div>
        </div>
      </nav>

      {/* Results / Case study cards — professional cards, hover reveals details */}
      <section
        id="results"
        ref={(el) => { sectionsRef.current[0] = el }}
        className="relative py-20 sm:py-24 border-b border-border bg-gradient-to-b from-muted/40 to-muted/20 scroll-mt-24 overflow-hidden"
      >
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_70%_60%_at_50%_0%,var(--primary)_0%,transparent_50%)] opacity-[0.1] pointer-events-none" />
        <div className="relative content-80 px-4 sm:px-6 lg:px-8">
          <div className="section-content">
            <div className="mb-12 text-center max-w-2xl mx-auto">
              {/* <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background/80 px-3 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4">
                Case studies
              </span> */}
              {/* <span className="inline-block w-14 h-0.5 rounded-full bg-gradient-to-r from-[var(--beach-cyan)] via-[var(--beach-gold)] to-[var(--beach-cyan)] mb-5" /> */}
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground tracking-tight leading-tight">
                From beach rentals to local experiences, our results speak for themselves.
              </h2>
              <p className="mt-3 text-muted-foreground text-sm sm:text-base max-w-lg mx-auto">
                Hover any card to see key metrics and actions.
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
              {CASE_STUDY_ITEMS.map((item) => {
                const isExpanded = expandedCaseStudy === item.tag
                const showDetails = isExpanded
                return (
                  <div
                    key={item.tag}
                    role="button"
                    tabIndex={0}
                    aria-expanded={isExpanded}
                    aria-label={`${item.title}, tap to ${isExpanded ? "collapse" : "view"} details`}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault()
                        setExpandedCaseStudy((prev) => (prev === item.tag ? null : item.tag))
                      }
                    }}
                    onClick={(e) => {
                      if ((e.target as HTMLElement).closest("a")) return
                      setExpandedCaseStudy((prev) => (prev === item.tag ? null : item.tag))
                    }}
                    data-expanded={isExpanded ? "true" : undefined}
                    className="group/results results-card block relative rounded-2xl overflow-hidden border border-border bg-card min-h-[240px] sm:min-h-[280px] transition-all duration-300 ease-out hover:-translate-y-2 hover:scale-[1.02] cursor-pointer"
                  >
                    {/* Shared background — full opacity by default, lower on hover/tap so text reads clearly */}
                    <div className="absolute inset-0">
                      <Image
                        src={item.image}
                        alt=""
                        fill
                        className={`object-cover animate-card-bg-zoom transition-opacity duration-300 ${showDetails ? "opacity-50" : "opacity-100 group-hover/results:opacity-50"}`}
                        sizes="(max-width: 768px) 100vw, 33vw"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/55 to-black/35" />
                    </div>
                    {/* Default content — above inactive hover layer; hide on hover or when expanded (tap) */}
                    <div
                      className={`absolute inset-0 p-6 sm:p-7 flex flex-col justify-between transition-opacity duration-300 z-20 group-hover/results:opacity-0 pointer-events-none group-hover/results:pointer-events-none ${showDetails ? "opacity-0" : "opacity-100"}`}
                    >
                      <div>
                        <span className="inline-block rounded-full bg-white/95 backdrop-blur-sm px-3.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20">
                          {item.tag}
                        </span>
                        <h3 className="mt-5 text-xl font-bold text-white drop-shadow-md tracking-tight">{item.title}</h3>
                      </div>
                      <p className="text-sm text-white/90 flex items-center gap-2 font-medium">
                        <span className="inline-block w-2 h-2 rounded-full bg-white/70 animate-pulse" />
                        Hover or tap for details
                      </p>
                    </div>
                    {/* Hover/tap content — below default when idle; tap-expanded needs CSS :hover + [data-expanded] for inner text */}
                    <div
                      className={`absolute inset-0 p-6 sm:p-7 flex flex-col transition-opacity duration-300 z-10 ${showDetails ? "opacity-100 z-20" : "opacity-0 pointer-events-none group-hover/results:pointer-events-auto group-hover/results:opacity-100"}`}
                    >
                      <div className="results-hover-content h-full flex flex-col justify-center items-center text-center">
                        <span className="inline-block rounded-full bg-white/95 backdrop-blur-sm px-3.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20">
                          {item.tag}
                        </span>
                        <p className="mt-4 text-base sm:text-lg font-bold text-white leading-snug drop-shadow-md tracking-tight max-w-[30ch]">
                          {item.description}
                        </p>
                        <div className="h-px w-12 bg-gradient-to-r from-[var(--beach-cyan)] to-[var(--beach-gold)] my-4 opacity-90" />
                        <div className="flex items-center justify-center gap-3 flex-wrap">
                          <div className="flex items-center gap-2.5">
                            <div className="w-9 h-9 rounded-xl bg-white/15 backdrop-blur-sm flex items-center justify-center border border-white/20">
                              <Waves className="w-4 h-4 text-white" />
                            </div>
                            <span className="text-sm font-semibold text-white drop-shadow-sm tracking-tight">BeachLyfe</span>
                          </div>
                          <div className="flex items-baseline gap-2 border-l border-white/40 pl-4">
                            <span className="text-2xl sm:text-3xl font-bold text-white tabular-nums drop-shadow-sm tracking-tight">{item.stat}</span>
                            <span className="text-sm text-white/90 drop-shadow-sm">{item.statLabel}</span>
                          </div>
                        </div>
                        <Button
                          size="sm"
                          className="mt-4 w-full sm:w-auto rounded-xl bg-white text-foreground hover:bg-white/95 font-semibold shadow-lg shadow-black/20 hover:shadow-xl hover:shadow-black/25 transition-all duration-200 group/btn"
                          asChild
                        >
                          <Link href={item.href} className="inline-flex items-center" onClick={(e) => e.stopPropagation()}>
                            {item.cta}
                            <ChevronRight className="w-4 h-4 ml-1 transition-transform duration-200 group-hover/btn:translate-x-0.5" />
                          </Link>
                        </Button>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Popular beaches — professional hover/tap cards */}
      <section
        id="beaches"
        ref={(el) => { sectionsRef.current[1] = el }}
        className="relative py-18 sm:py-22 border-b border-border bg-gradient-to-b from-background via-primary/[0.02] to-muted/20 scroll-mt-24 overflow-hidden"
      >
        <div className="relative content-80 px-4 sm:px-6 lg:px-8">
          <div className="section-content">
            <div className="mb-10">
              <span className="inline-block w-14 h-0.5 rounded-full bg-gradient-to-r from-[var(--beach-cyan)] via-[var(--beach-gold)] to-[var(--beach-cyan)] mb-4" />
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground tracking-tight">Popular Beaches</h2>
              <p className="mt-2 text-muted-foreground">Discover top spots across the coast. Hover or tap a card for details.</p>
            </div>
            <ScrollReveal staggerChildren y={24} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {POPULAR_BEACHES.map((beach) => {
                const isExpanded = expandedBeachId === beach.id
                const showDetails = isExpanded
                const description = beach.description ?? `Chairs, umbrellas & gear at ${beach.name}. Book in minutes.`
                return (
                  <div
                    key={beach.id}
                    role="button"
                    tabIndex={0}
                    aria-expanded={isExpanded}
                    aria-label={`${beach.name}, ${beach.city}. Tap to ${isExpanded ? "collapse" : "view"} details`}
                    data-expanded={showDetails ? "true" : undefined}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault()
                        setExpandedBeachId((prev) => (prev === beach.id ? null : beach.id))
                      }
                    }}
                    onClick={(e) => {
                      if ((e.target as HTMLElement).closest("a")) return
                      setExpandedBeachId((prev) => (prev === beach.id ? null : beach.id))
                    }}
                    className="group/beach beach-card relative rounded-2xl overflow-hidden border border-border bg-card aspect-[16/10] min-h-[200px] transition-all duration-300 ease-out hover:-translate-y-2 hover:scale-[1.02] cursor-pointer"
                  >
                    {/* Shared background — full opacity by default, lower on hover/tap */}
                    <div className="absolute inset-0">
                      <Image
                        src={beach.image}
                        alt=""
                        fill
                        className={`object-cover transition-transform duration-500 ease-out transition-opacity duration-300 group-hover/beach:scale-105 ${showDetails ? "opacity-50" : "opacity-100 group-hover/beach:opacity-50"}`}
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/30" />
                    </div>
                    {/* Default content — hide on hover or when expanded */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/beach:opacity-0 pointer-events-none group-hover/beach:pointer-events-none z-10 ${showDetails ? "opacity-0" : ""}`}
                    >
                      <span className="inline-block w-fit rounded-full bg-white/95 backdrop-blur-sm px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20">
                        {beach.state}
                      </span>
                      <div>
                        <h3 className="font-bold text-white text-xl drop-shadow-md tracking-tight">{beach.name}</h3>
                        <p className="text-white/90 text-sm mt-0.5">{beach.city}, {beach.state}</p>
                      </div>
                    </div>
                    {/* Hover/tap content — details + CTA */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/beach:opacity-100 z-10 ${showDetails ? "opacity-100" : "opacity-0"}`}
                    >
                      <div className="beach-hover-content flex flex-col flex-1">
                        <span className="inline-block w-fit rounded-full bg-white/95 backdrop-blur-sm px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20">
                          {beach.state}
                        </span>
                        <p className="mt-3 text-sm sm:text-base font-bold text-white leading-snug drop-shadow-md">
                          {description}
                        </p>
                        <div className="h-px w-12 bg-gradient-to-r from-[var(--beach-cyan)] to-[var(--beach-gold)] my-3 opacity-90" />
                        <div className="flex items-center justify-between gap-3 mt-auto">
                          <span className="text-white/90 text-sm font-medium drop-shadow-sm">
                            {beach.vendorCount}+ vendors
                          </span>
                          <Button
                            size="sm"
                            className="rounded-xl bg-white text-foreground hover:bg-white/95 font-semibold shadow-lg shadow-black/20 shrink-0"
                            asChild
                          >
                            <Link href={`/beach/${beach.id}`} onClick={(e) => e.stopPropagation()}>
                              View beach
                              <ChevronRight className="w-4 h-4 ml-1" />
                            </Link>
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Explore by state — professional hover/tap cards */}
      <section
        id="states"
        ref={(el) => { sectionsRef.current[2] = el }}
        className="relative py-18 sm:py-22 border-b border-border bg-muted/30 scroll-mt-24 overflow-hidden"
      >
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_0%,var(--beach-cyan)_0%,transparent_70%)] opacity-[0.06] pointer-events-none" />
        <div className="relative content-80 px-4 sm:px-6 lg:px-8">
          <div className="section-content">
            <div className="mb-10">
              <span className="inline-block w-14 h-0.5 rounded-full bg-gradient-to-r from-[var(--beach-cyan)] via-[var(--beach-gold)] to-[var(--beach-cyan)] mb-4" />
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground tracking-tight">Explore by State</h2>
              <p className="mt-2 text-muted-foreground">Browse beaches by region. Hover or tap a card for details.</p>
            </div>
            <ScrollReveal staggerChildren y={24} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {POPULAR_STATES.map((state) => {
                const isExpanded = expandedStateId === state.id
                const showDetails = isExpanded
                const description = `Discover beaches across ${state.name}. Rentals, vendors & more.`
                return (
                  <div
                    key={state.id}
                    role="button"
                    tabIndex={0}
                    aria-expanded={isExpanded}
                    aria-label={`${state.name}, ${state.beachCount} beaches. Tap to ${isExpanded ? "collapse" : "view"} details`}
                    data-expanded={showDetails ? "true" : undefined}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault()
                        setExpandedStateId((prev) => (prev === state.id ? null : state.id))
                      }
                    }}
                    onClick={(e) => {
                      if ((e.target as HTMLElement).closest("a")) return
                      setExpandedStateId((prev) => (prev === state.id ? null : state.id))
                    }}
                    className="group/state beach-card relative rounded-2xl overflow-hidden border border-border bg-card aspect-[2/1] min-h-[180px] transition-all duration-300 ease-out hover:-translate-y-2 hover:scale-[1.02] cursor-pointer"
                  >
                    {/* Shared background — full opacity by default, lower on hover/tap */}
                    <div className="absolute inset-0">
                      <Image
                        src={STATE_IMAGES[state.id] ?? STATE_IMAGES.fl}
                        alt=""
                        fill
                        className={`object-cover transition-transform duration-500 ease-out transition-opacity duration-300 group-hover/state:scale-105 ${showDetails ? "opacity-50" : "opacity-100 group-hover/state:opacity-50"}`}
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/30" />
                    </div>
                    {/* Default content — hide on hover or when expanded */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/state:opacity-0 pointer-events-none group-hover/state:pointer-events-none z-10 ${showDetails ? "opacity-0" : ""}`}
                    >
                      <span className="inline-block w-fit rounded-full bg-white/95 backdrop-blur-sm px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20">
                        Region
                      </span>
                      <div>
                        <h3 className="font-bold text-white text-xl drop-shadow-md tracking-tight">{state.name}</h3>
                        <p className="text-white/90 text-sm mt-0.5">{state.beachCount} beaches</p>
                      </div>
                    </div>
                    {/* Hover/tap content — details + CTA */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/state:opacity-100 z-10 ${showDetails ? "opacity-100" : "opacity-0"}`}
                    >
                      <div className="beach-hover-content flex flex-col flex-1">
                        <span className="inline-block w-fit rounded-full bg-white/95 backdrop-blur-sm px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20">
                          Region
                        </span>
                        <p className="mt-3 text-sm sm:text-base font-bold text-white leading-snug drop-shadow-md">
                          {description}
                        </p>
                        <div className="h-px w-12 bg-gradient-to-r from-[var(--beach-cyan)] to-[var(--beach-gold)] my-3 opacity-90" />
                        <div className="flex items-center justify-between gap-3 mt-auto">
                          <span className="text-white/90 text-sm font-medium drop-shadow-sm">
                            {state.beachCount} beaches
                          </span>
                          <Button
                            size="sm"
                            className="rounded-xl bg-white text-foreground hover:bg-white/95 font-semibold shadow-lg shadow-black/20 shrink-0"
                            asChild
                          >
                            <Link href={`/browse/${state.id}`} onClick={(e) => e.stopPropagation()}>
                              View beaches
                              <ChevronRight className="w-4 h-4 ml-1" />
                            </Link>
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* What to do — categories */}
      <section
        id="what-to-do"
        ref={(el) => { sectionsRef.current[3] = el }}
        className="relative py-18 sm:py-22 border-b border-border bg-gradient-to-b from-background via-accent/[0.03] to-muted/20 scroll-mt-24 overflow-hidden"
      >
        <div className="relative content-80 px-4 sm:px-6 lg:px-8">
          <div className="section-content">
            <div className="mb-10">
              <span className="inline-block w-14 h-0.5 rounded-full bg-gradient-to-r from-[var(--beach-cyan)] via-[var(--beach-gold)] to-[var(--beach-cyan)] mb-4" />
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground tracking-tight">What To Do</h2>
              <p className="mt-2 text-muted-foreground">Rentals, food, lessons & more</p>
            </div>
            <ScrollReveal staggerChildren y={20} className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
              {FEATURED_CATEGORIES.map((cat) => (
                <Link
                  key={cat.id}
                  href="/explore"
                  className="home-category-card flex flex-col items-center gap-4 rounded-2xl border border-border bg-card p-6 sm:p-7"
                >
                  <div className="home-category-icon w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary transition-all duration-300">
                    {CATEGORY_ICONS[cat.id] ?? <Umbrella className="w-6 h-6" />}
                  </div>
                  <span className="text-sm font-semibold text-foreground text-center">{cat.name}</span>
                </Link>
              ))}
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Featured vendors — professional hover/tap cards */}
      <section
        id="vendors"
        ref={(el) => { sectionsRef.current[4] = el }}
        className="relative py-18 sm:py-22 border-b border-border bg-muted/30 scroll-mt-24 overflow-hidden"
      >
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_100%,var(--beach-gold)_0%,transparent_70%)] opacity-[0.08] pointer-events-none" />
        <div className="relative content-80 px-4 sm:px-6 lg:px-8">
          <div className="section-content">
            <div className="mb-10">
              <span className="inline-block w-14 h-0.5 rounded-full bg-gradient-to-r from-[var(--beach-cyan)] via-[var(--beach-gold)] to-[var(--beach-cyan)] mb-4" />
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground tracking-tight">Featured Vendors</h2>
              <p className="mt-2 text-muted-foreground">Trusted local businesses at the beach. Hover or tap a card for details.</p>
            </div>
            <ScrollReveal staggerChildren y={24} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {FEATURED_VENDORS.map((vendor) => {
                const isExpanded = expandedVendorId === vendor.id
                const showDetails = isExpanded
                const categoryLabel = vendor.category.replace("-", " ")
                return (
                  <div
                    key={vendor.id}
                    role="button"
                    tabIndex={0}
                    aria-expanded={isExpanded}
                    aria-label={`${vendor.name}, ${categoryLabel}. Tap to ${isExpanded ? "collapse" : "view"} details`}
                    data-expanded={showDetails ? "true" : undefined}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault()
                        setExpandedVendorId((prev) => (prev === vendor.id ? null : vendor.id))
                      }
                    }}
                    onClick={(e) => {
                      if ((e.target as HTMLElement).closest("a")) return
                      setExpandedVendorId((prev) => (prev === vendor.id ? null : vendor.id))
                    }}
                    className="group/vendor beach-card relative rounded-2xl overflow-hidden border border-border bg-card aspect-[4/3] min-h-[220px] transition-all duration-300 ease-out hover:-translate-y-2 hover:scale-[1.02] cursor-pointer"
                  >
                    {/* Shared background — full opacity by default, lower on hover/tap */}
                    <div className="absolute inset-0">
                      <Image
                        src={vendor.image}
                        alt=""
                        fill
                        className={`object-cover transition-transform duration-500 ease-out transition-opacity duration-300 group-hover/vendor:scale-105 ${showDetails ? "opacity-50" : "opacity-100 group-hover/vendor:opacity-50"}`}
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/30" />
                    </div>
                    {/* Price badge — always visible */}
                    <div className="absolute top-3 right-3 z-20 rounded-md bg-white/95 backdrop-blur-sm px-2.5 py-1 text-xs font-semibold text-foreground border border-white/20">
                      {vendor.priceRange}
                    </div>
                    {/* Default content — hide on hover or when expanded */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/vendor:opacity-0 pointer-events-none group-hover/vendor:pointer-events-none z-10 ${showDetails ? "opacity-0" : ""}`}
                    >
                      <span className="inline-block w-fit rounded-full bg-white/95 backdrop-blur-sm px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20 capitalize">
                        {categoryLabel}
                      </span>
                      <div>
                        <h3 className="font-bold text-white text-xl drop-shadow-md tracking-tight">{vendor.name}</h3>
                        <p className="text-white/90 text-sm mt-0.5">{vendor.rating} · {vendor.reviewCount} reviews</p>
                      </div>
                    </div>
                    {/* Hover/tap content — details + CTA */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/vendor:opacity-100 z-10 ${showDetails ? "opacity-100" : "opacity-0"}`}
                    >
                      <div className="beach-hover-content flex flex-col flex-1">
                        <span className="inline-block w-fit rounded-full bg-white/95 backdrop-blur-sm px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20 capitalize">
                          {categoryLabel}
                        </span>
                        <p className="mt-3 text-sm sm:text-base font-bold text-white leading-snug drop-shadow-md line-clamp-2">
                          {vendor.description}
                        </p>
                        <div className="h-px w-12 bg-gradient-to-r from-[var(--beach-cyan)] to-[var(--beach-gold)] my-3 opacity-90" />
                        <div className="flex items-center justify-between gap-3 mt-auto">
                          <span className="text-white/90 text-sm font-medium drop-shadow-sm">
                            {vendor.rating} ★ · {vendor.reviewCount} reviews
                          </span>
                          <Button
                            size="sm"
                            className="rounded-xl bg-white text-foreground hover:bg-white/95 font-semibold shadow-lg shadow-black/20 shrink-0"
                            asChild
                          >
                            <Link href={`/vendor/${vendor.id}`} onClick={(e) => e.stopPropagation()}>
                              View vendor
                              <ChevronRight className="w-4 h-4 ml-1" />
                            </Link>
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Today's deals — professional hover/tap cards */}
      <section
        id="deals"
        ref={(el) => { sectionsRef.current[5] = el }}
        className="relative py-18 sm:py-22 border-b border-border bg-gradient-to-b from-muted/20 via-background to-muted/10 scroll-mt-24 overflow-hidden"
      >
        <div className="relative content-80 px-4 sm:px-6 lg:px-8">
          <div className="section-content">
            <div className="flex flex-wrap items-end justify-between gap-4 mb-10">
              <div>
                <span className="inline-block w-14 h-0.5 rounded-full bg-gradient-to-r from-[var(--beach-cyan)] via-[var(--beach-gold)] to-[var(--beach-cyan)] mb-4" />
                <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground tracking-tight">Today&apos;s Deals</h2>
                <p className="mt-2 text-muted-foreground">Save on rentals & experiences. Hover or tap a card for details.</p>
              </div>
              <Link
                href="/explore"
                className="text-sm font-medium text-primary hover:underline inline-flex items-center"
              >
                See all
                <ChevronRight className="w-4 h-4 ml-0.5" />
              </Link>
            </div>
            <ScrollReveal staggerChildren y={24} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {TODAY_DEALS.map((deal) => {
                const isExpanded = expandedDealId === deal.id
                const showDetails = isExpanded
                const categoryLabel = deal.category.replace("-", " ")
                const savePercent = Math.round((1 - deal.rackPrice / deal.originalPrice) * 100)
                return (
                  <div
                    key={deal.id}
                    role="button"
                    tabIndex={0}
                    aria-expanded={isExpanded}
                    aria-label={`${deal.title}, $${deal.rackPrice}. Tap to ${isExpanded ? "collapse" : "view"} details`}
                    data-expanded={showDetails ? "true" : undefined}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault()
                        setExpandedDealId((prev) => (prev === deal.id ? null : deal.id))
                      }
                    }}
                    onClick={(e) => {
                      if ((e.target as HTMLElement).closest("a")) return
                      setExpandedDealId((prev) => (prev === deal.id ? null : deal.id))
                    }}
                    className="group/deal beach-card relative rounded-2xl overflow-hidden border border-border bg-card aspect-[4/3] min-h-[220px] transition-all duration-300 ease-out hover:-translate-y-2 hover:scale-[1.02] cursor-pointer"
                  >
                    {/* Shared background — full opacity by default, lower on hover/tap */}
                    <div className="absolute inset-0">
                      <Image
                        src={deal.image}
                        alt=""
                        fill
                        className={`object-cover transition-transform duration-500 ease-out transition-opacity duration-300 group-hover/deal:scale-105 ${showDetails ? "opacity-50" : "opacity-100 group-hover/deal:opacity-50"}`}
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/30" />
                    </div>
                    {/* Deal badge — slides down + fades on hover / when expanded */}
                    <div
                      className={`absolute top-3 left-3 z-20 rounded-md bg-primary px-2.5 py-1 text-xs font-semibold text-white flex items-center gap-1 shadow-lg transition-all duration-300 ease-out group-hover/deal:translate-y-10 group-hover/deal:opacity-0 group-hover/deal:pointer-events-none ${showDetails ? "translate-y-10 opacity-0 pointer-events-none" : ""}`}
                    >
                      <Tag className="w-3 h-3" />
                      Deal
                    </div>
                    {/* Default content — hide on hover or when expanded */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/deal:opacity-0 pointer-events-none group-hover/deal:pointer-events-none z-10 ${showDetails ? "opacity-0" : ""}`}
                    >
                      <div />
                      <div>
                        <h3 className="font-bold text-white text-lg drop-shadow-md tracking-tight line-clamp-2">{deal.title}</h3>
                        <div className="mt-2 flex items-baseline gap-2">
                          <span className="text-xl font-bold text-white drop-shadow-sm">${deal.rackPrice}</span>
                          <span className="text-sm text-white/80 line-through">${deal.originalPrice}</span>
                        </div>
                      </div>
                    </div>
                    {/* Hover/tap content — details + CTA */}
                    <div
                      className={`absolute inset-0 p-5 flex flex-col justify-between transition-opacity duration-300 group-hover/deal:opacity-100 z-10 ${showDetails ? "opacity-100" : "opacity-0"}`}
                    >
                      <div className="beach-hover-content flex flex-col flex-1">
                        <span className="inline-block w-fit rounded-full bg-white/95 backdrop-blur-sm px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-foreground border border-white/20 capitalize">
                          {categoryLabel}
                        </span>
                        <p className="mt-3 text-sm sm:text-base font-bold text-white leading-snug drop-shadow-md line-clamp-2">
                          {deal.description}
                        </p>
                        <div className="h-px w-12 bg-gradient-to-r from-[var(--beach-cyan)] to-[var(--beach-gold)] my-3 opacity-90" />
                        <div className="flex flex-col gap-2 mt-auto">
                          <div className="flex items-baseline gap-2">
                            <span className="text-xl font-bold text-white drop-shadow-sm">${deal.rackPrice}</span>
                            <span className="text-sm text-white/80 line-through">${deal.originalPrice}</span>
                            <span className="text-xs font-semibold text-white/90 bg-white/20 px-1.5 py-0.5 rounded">
                              Save {savePercent}%
                            </span>
                          </div>
                          <Button
                            size="sm"
                            className="w-full rounded-xl bg-white text-foreground hover:bg-white/95 font-semibold shadow-lg shadow-black/20"
                            asChild
                          >
                            <Link href={`/vendor/${deal.vendorId}`} onClick={(e) => e.stopPropagation()}>
                              View deal
                              <ChevronRight className="w-4 h-4 ml-1" />
                            </Link>
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* CTA — on-brand closing */}
      {!user && (
        <section className="relative py-20 sm:py-28 overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-[var(--beach-blue)]/15 via-[var(--beach-cyan)]/8 to-[var(--beach-gold)]/15" />
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_100%,var(--beach-cyan)_0%,transparent_45%)] opacity-25" />
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_0%,var(--beach-gold)_0%,transparent_50%)] opacity-15" />
          <div className="relative content-80 px-4 sm:px-6 lg:px-8 text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary/90 mb-3">Join BeachLyfe</p>
            <h3 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground tracking-tight">
              Ready for the <span className="cta-gradient-word">Beach</span>?
            </h3>
            <p className="mt-4 text-lg text-muted-foreground max-w-lg mx-auto">
              Create an account to save favorites, manage bookings, and get the best deals.
            </p>
            <Button size="lg" className="hero-cta-primary mt-8 cursor-pointer text-base font-semibold px-8 py-6 rounded-xl" asChild>
              <Link href="/signup">Create Account — it&apos;s free</Link>
            </Button>
            <p className="mt-6 text-sm text-muted-foreground">
              BeachLyfe — One platform for beaches, vendors & deals.
            </p>
          </div>
        </section>
      )}

    </div>
  )
}