<script>
  import { onMount } from 'svelte';

  let scrollY = $state(0);
  let menuOpen = $state(false);
  let lightboxOpen = $state(false);
  let lightboxIndex = $state(0);
  let galleryEl;

  const wa = 'https://wa.me/50689721609?text=Hi!%20I%27d%20like%20to%20book%20a%20fly%20fishing%20trip';
  const phone = '+506 8972-1609';
  const email = 'Vidadelmarcr@gmail.com';
  const ig = 'https://www.instagram.com/vidadelmarcostarica_flyfishing';
  const fb = 'https://www.facebook.com/share/1BGbBk9fqH/';

  const nav = [
    { href: '#story', label: 'Story' },
    { href: '#trips', label: 'Trips' },
    { href: '#gallery', label: 'Gallery' },
    { href: '#reviews', label: 'Reviews' },
    { href: '#book', label: 'Book' }
  ];

  const reviews = [
    {
      name: 'Aaron Meredith',
      rating: 5,
      text: 'The reviews told me Junior was that guy and it definitely held up. We caught plenty of fish including a double with a few big jacks. We also had a huge blue marlin follow a lure up within 5\' of the boat, saw dolphins, and sea turtles. My kids (13 & 9) couldn\'t stop talking about it. Junior\'s English is great — he also checked out the fly gear I brought and gave me tips for fishing the beach. I caught 30+ jacks, ladyfish, and more wading over the course of the week.',
      date: 'May 2025'
    },
    {
      name: 'James Di Adamo',
      rating: 5,
      text: 'Junior is the one to talk to about anything you need! We\'ve done 5 fishing trips, horseback riding, ATV tours, and more. He goes above and beyond to make our stay extra special. Two years ago he gave me a fishing rod and lures to use off the shore between boat trips. He has so much experience and knowledge of the area. Prices are by far the best for any excursions.',
      date: '2025'
    },
    {
      name: 'Maximiliam Adagio',
      rating: 5,
      text: 'Junior took me out on a half day trip to target roosterfish in December. Not only did we find me a roosterfish, but a few other species were boated on conventional and fly tackle. Junior was experienced, patient, and an excellent guide.',
      date: '2025'
    },
    {
      name: 'Cameron Michels',
      rating: 5,
      text: 'Junior is a great honest fishing guide. Recommended we wait until calmer weather to do a trip in the boat. In the mean time we did some fishing from shore — jack crevalle, needle fish, mackerel, corvina, and lost a big stingray. He truly just loves to fish! Not only about the money for him.',
      date: '2025'
    },
    {
      name: 'Adam Kravat',
      rating: 5,
      text: 'I recently went on a sunset cruise and fishing trip with Jr. Him and his crew were super friendly. We had the opportunity to see dolphins and whales up close, which was a breathtaking experience. The snorkeling was fantastic. The crew served snacks and drinks throughout the trip. I highly recommend Jr for any of your tours!',
      date: '2025'
    },
    {
      name: 'Jack Green',
      rating: 5,
      text: 'Best tour guide for any excursion you\'ll find! Been booking excursions with him for 2 years and have never been disappointed. Everyone knows him and there\'s a reason for that... He is the best.',
      date: '2025'
    }
  ];

  const species = [
    { name: 'Roosterfish', latin: 'Nematistius pectoralis', img: '/gallery/catch-roosterfish-01.jpg' },
    { name: 'Mahi-Mahi', latin: 'Coryphaena hippurus', img: '/gallery/catch-mahi-01.jpg' },
    { name: 'Sailfish', latin: 'Istiophorus platypterus', img: '/gallery/catch-sailfish-01.jpg' },
    { name: 'Yellowfin Tuna', latin: 'Thunnus albacares', img: '/gallery/catch-tuna-02.jpg' },
    { name: 'Jack Crevalle', latin: 'Caranx hippos', img: '/gallery/catch-jack-02.jpg' },
    { name: 'Permit', latin: 'Trachinotus falcatus', img: '/gallery/catch-permit-01.jpg' }
  ];

  const gallery = [
    { src: '/gallery/catch-roosterfish-01.jpg', alt: 'Roosterfish — Guanacaste fly fishing' },
    { src: '/gallery/scenery-sunset.jpg', alt: 'Sunset over Guanacaste' },
    { src: '/gallery/catch-mahi-01.jpg', alt: 'Mahi-mahi on fly rod' },
    { src: '/gallery/boat-01.jpg', alt: 'Pacifico Azul' },
    { src: '/gallery/catch-sailfish-01.jpg', alt: 'Sailfish trophy catch' },
    { src: '/gallery/gear-flyrods.jpg', alt: 'Fly rods and a cold Modelo' },
    { src: '/gallery/catch-tuna-01.jpg', alt: 'Yellowfin tuna' },
    { src: '/gallery/catch-jack-01.jpg', alt: 'Happy couple with jack crevalle' },
    { src: '/gallery/scenery-cove.jpg', alt: 'Hidden cove — El Jobo' },
    { src: '/gallery/catch-roosterfish-02.jpg', alt: 'Two anglers with roosterfish' },
    { src: '/gallery/action-casting.jpg', alt: 'Fly casting from the bow' },
    { src: '/gallery/catch-permit-01.jpg', alt: 'Permit at sunset' },
    { src: '/gallery/catch-bonito-01.jpg', alt: 'Bonito on fly' },
    { src: '/gallery/scenery-rainbow.jpg', alt: 'Rainbow over the Pacific' },
    { src: '/gallery/catch-tuna-02.jpg', alt: 'Yellowfin close-up' },
    { src: '/gallery/boat-02.jpg', alt: 'Pacifico Azul at anchor' },
    { src: '/gallery/catch-jack-02.jpg', alt: 'Big jack crevalle' },
    { src: '/gallery/catch-roosterfish-03.jpg', alt: 'Roosterfish signature catch' },
    { src: '/gallery/catch-snapper-01.jpg', alt: 'Snapper with fly reel' },
    { src: '/gallery/catch-mahi-02.jpg', alt: 'Dorado on fly' },
    { src: '/gallery/catch-jack-03.jpg', alt: 'Jack crevalle with happy angler' },
    { src: '/gallery/catch-permit-02.jpg', alt: 'Beach permit on fly' },
    { src: '/gallery/catch-yellowtail-01.jpg', alt: 'Yellowtail caught offshore' }
  ];

  function openLightbox(i) { lightboxIndex = i; lightboxOpen = true; }
  function closeLightbox() { lightboxOpen = false; }
  function prev() { lightboxIndex = (lightboxIndex - 1 + gallery.length) % gallery.length; }
  function next() { lightboxIndex = (lightboxIndex + 1) % gallery.length; }

  function handleKey(e) {
    if (!lightboxOpen) return;
    if (e.key === 'Escape') closeLightbox();
    if (e.key === 'ArrowLeft') prev();
    if (e.key === 'ArrowRight') next();
  }

  onMount(() => {
    const obs = new IntersectionObserver(
      entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }),
      { threshold: 0.08 }
    );
    document.querySelectorAll('.reveal, .reveal-stagger').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });
</script>

<svelte:window bind:scrollY onkeydown={handleKey} />

<!-- ──────────────────────────── NAV ──────────────────────────── -->
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500
  {scrollY > 100 ? 'bg-[var(--ink)]/90 backdrop-blur-md border-b border-white/5 py-3' : 'py-6'}">
  <div class="mx-auto flex max-w-[1400px] items-center justify-between px-6 lg:px-10">
    <a href="/" class="font-display text-lg tracking-widest text-[var(--salt)] uppercase" style="letter-spacing:0.25em">
      Vida del Mar CR
    </a>

    <div class="hidden items-center gap-10 md:flex">
      {#each nav as link}
        <a href={link.href} class="text-xs font-medium uppercase tracking-[0.2em] text-white/40 transition-colors hover:text-white">{link.label}</a>
      {/each}
      <a href={wa} target="_blank" rel="noopener noreferrer" class="btn-book !py-2.5 !px-5 text-xs">
        Book Now
      </a>
    </div>

    <button class="md:hidden" onclick={() => menuOpen = !menuOpen} aria-label="Menu">
      <div class="flex flex-col gap-1.5">
        <span class="block h-px w-7 bg-white transition-all duration-300 {menuOpen ? 'translate-y-[5px] rotate-45' : ''}"></span>
        <span class="block h-px w-7 bg-white transition-all duration-300 {menuOpen ? 'opacity-0' : ''}"></span>
        <span class="block h-px w-7 bg-white transition-all duration-300 {menuOpen ? '-translate-y-[5px] -rotate-45' : ''}"></span>
      </div>
    </button>
  </div>

  {#if menuOpen}
    <div class="bg-[var(--ink)] border-t border-white/5 px-6 py-8 md:hidden">
      {#each nav as link}
        <a href={link.href} class="block py-3 text-lg font-display tracking-wider text-white/70 hover:text-white" onclick={() => menuOpen = false}>{link.label}</a>
      {/each}
      <a href={wa} target="_blank" rel="noopener noreferrer" class="btn-book mt-6 w-full justify-center text-center">Book Now</a>
    </div>
  {/if}
</nav>

<!-- ──────────────────────────── HERO ──────────────────────────── -->
<section class="relative min-h-screen-ios flex flex-col justify-end overflow-hidden">
  <video autoplay loop muted playsinline class="absolute inset-0 h-full w-full object-cover" poster="/gallery/catch-roosterfish-01.jpg">
    <source src="/hero-bg.mp4" type="video/mp4" />
  </video>
  <div class="absolute inset-0 bg-gradient-to-t from-[var(--ink)] via-[var(--ink)]/40 to-transparent"></div>

  <div class="relative z-10 px-6 pb-12 sm:pb-20 lg:px-10">
    <div class="mx-auto max-w-[1400px]">
      <p class="section-label mb-6">Guanacaste, Costa Rica</p>
      <h1 class="hero-title text-[var(--salt)]">
        Vida del Mar<br/><span class="text-[var(--current)]">CR Fly Fishing</span>
      </h1>
      <p class="mt-6 max-w-md text-base leading-relaxed text-white/50 sm:text-lg">
        Saltwater fly fishing with 30 years of local knowledge.
        Roosterfish. Mahi-mahi. Tuna. Sailfish.
      </p>
      <div class="mt-8 flex flex-wrap gap-4">
        <a href={wa} target="_blank" rel="noopener noreferrer" class="btn-book">
          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
          Book Your Trip
        </a>
        <a href="#trips" class="btn-ghost">View Trips</a>
      </div>
    </div>
  </div>
</section>

<!-- ──────────────────────────── STORY ──────────────────────────── -->
<section id="story" class="py-16 sm:py-28">
  <div class="mx-auto max-w-[1400px] px-6 lg:px-10">

    <!-- Captain intro — asymmetric layout -->
    <div class="reveal grid gap-8 lg:grid-cols-12 lg:gap-4">
      <div class="lg:col-span-5 lg:pr-8">
        <p class="section-label">The Captain</p>
        <h2 class="font-display text-4xl font-light leading-tight sm:text-5xl lg:text-6xl mt-4">
          Three decades<br/>reading the<br/><em class="text-[var(--current)]">Pacific</em>
        </h2>
      </div>
      <div class="lg:col-span-7 flex flex-col justify-center">
        <p class="text-base leading-[1.85] text-white/55 sm:text-lg max-w-xl">
          Captain Junior Fernandez grew up on the Guanacaste coast, learning the reefs, currents,
          and feeding patterns long before he took his first client on the water. Today, with
          30 years behind the helm, he runs fly-only charters out of El Jobo — a quiet fishing
          village tucked between volcanic hills and the open Pacific.
        </p>
        <p class="mt-5 text-base leading-[1.85] text-white/55 sm:text-lg max-w-xl">
          He provides all the gear — premium fly rods, reels, and a curated fly selection proven
          on these waters. Whether it's your first saltwater cast or your hundredth, he'll
          put you on fish.
        </p>
      </div>
    </div>

    <!-- Stats bar -->
    <div class="reveal-stagger mt-16 grid grid-cols-2 gap-px bg-white/5 sm:mt-24 sm:grid-cols-4">
      <div class="bg-[var(--ink)] p-6 sm:p-8">
        <p class="font-display text-4xl font-light text-[var(--current)] sm:text-5xl">30<span class="text-2xl">+</span></p>
        <p class="mt-2 text-xs uppercase tracking-[0.15em] text-white/30">Years on the water</p>
      </div>
      <div class="bg-[var(--ink)] p-6 sm:p-8">
        <p class="font-display text-4xl font-light text-[var(--current)] sm:text-5xl">8</p>
        <p class="mt-2 text-xs uppercase tracking-[0.15em] text-white/30">Target species</p>
      </div>
      <div class="bg-[var(--ink)] p-6 sm:p-8">
        <p class="font-display text-4xl font-light text-[var(--current)] sm:text-5xl">100<span class="text-lg">%</span></p>
        <p class="mt-2 text-xs uppercase tracking-[0.15em] text-white/30">Fly fishing</p>
      </div>
      <div class="bg-[var(--ink)] p-6 sm:p-8">
        <p class="font-display text-4xl font-light text-[var(--current)] sm:text-5xl">5h—8h</p>
        <p class="mt-2 text-xs uppercase tracking-[0.15em] text-white/30">Trip duration</p>
      </div>
    </div>

    <!-- Bento grid — images + boat + text -->
    <div class="reveal mt-16 bento sm:mt-24 grid-cols-2 sm:grid-cols-4 grid-rows-[200px_200px_200px] sm:grid-rows-[240px_240px_240px]">
      <div class="col-span-2 row-span-2 overflow-hidden">
        <img src="/gallery/action-casting.jpg" alt="Fly casting from the bow" class="h-full w-full object-cover" loading="lazy" />
      </div>
      <div class="overflow-hidden">
        <img src="/gallery/catch-roosterfish-03.jpg" alt="Roosterfish catch" class="h-full w-full object-cover" loading="lazy" />
      </div>
      <div class="overflow-hidden">
        <img src="/gallery/scenery-sunset.jpg" alt="Guanacaste sunset" class="h-full w-full object-cover" loading="lazy" />
      </div>
      <div class="overflow-hidden">
        <img src="/gallery/gear-flyrods.jpg" alt="Fly rods and Modelo" class="h-full w-full object-cover" loading="lazy" />
      </div>
      <div class="flex items-center justify-center bg-[var(--steel)] p-6">
        <p class="font-display text-xl italic text-white/40 text-center leading-relaxed sm:text-2xl">"The best days<br/>start before dawn."</p>
      </div>
      <div class="col-span-2 overflow-hidden sm:col-span-4">
        <img src="/gallery/boat-01.jpg" alt="Pacifico Azul" class="h-full w-full object-cover" loading="lazy" />
      </div>
    </div>
  </div>
</section>

<!-- ──────────────────── WAVE DIVIDER ──────────────────── -->
<div class="wave-divider">
  <svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" style="height:60px">
    <path d="M0 40C240 80 480 0 720 40C960 80 1200 0 1440 40V80H0V40Z" fill="var(--steel)"/>
  </svg>
</div>

<!-- ──────────────────────────── SPECIES ──────────────────────────── -->
<section class="bg-[var(--steel)] py-16 sm:py-24">
  <div class="mx-auto max-w-[1400px] px-6 lg:px-10">
    <div class="reveal flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <p class="section-label">Target Species</p>
        <h2 class="font-display text-3xl font-light mt-4 sm:text-5xl">What you'll <em class="text-[var(--current)]">chase</em></h2>
      </div>
      <p class="max-w-sm text-sm leading-relaxed text-white/40">
        The waters off Guanacaste hold some of the most prized saltwater fly fishing species on the planet.
      </p>
    </div>
  </div>

  <!-- horizontal species cards -->
  <div class="reveal mt-10 gallery-strip pl-6 sm:mt-14 lg:pl-10">
    {#each species as s, i}
      <div class="gallery-strip-item relative h-72 w-56 sm:h-96 sm:w-72 {i === species.length - 1 ? 'mr-6 lg:mr-10' : ''}">
        <img src={s.img} alt={s.name} class="absolute inset-0 h-full w-full object-cover" loading="lazy" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-5">
          <p class="font-display text-2xl font-light text-white sm:text-3xl">{s.name}</p>
          <p class="mt-0.5 text-xs italic text-white/40">{s.latin}</p>
        </div>
      </div>
    {/each}
  </div>
</section>

<div class="wave-divider rotate-180">
  <svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" style="height:60px">
    <path d="M0 40C240 80 480 0 720 40C960 80 1200 0 1440 40V80H0V40Z" fill="var(--steel)"/>
  </svg>
</div>

<!-- ──────────────────────────── TRIPS ──────────────────────────── -->
<section id="trips" class="py-16 sm:py-28">
  <div class="mx-auto max-w-[1400px] px-6 lg:px-10">
    <div class="reveal text-center">
      <p class="section-label">Trips & Pricing</p>
      <h2 class="font-display text-4xl font-light mt-4 sm:text-6xl">Choose your <em class="text-[var(--current)]">water</em></h2>
      <p class="mx-auto mt-4 max-w-lg text-sm text-white/40">Prices are per boat — bring up to 3 anglers. All gear, food, drinks, and fishing license included.</p>
    </div>

    <!-- Two trip panels -->
    <div class="reveal mt-12 grid gap-px bg-white/5 sm:mt-16 md:grid-cols-2">

      <!-- Half Day -->
      <div class="bg-[var(--ink)] p-8 sm:p-12 flex flex-col">
        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-white/30">Half Day</p>
        <p class="mt-4 font-display text-6xl font-light text-[var(--salt)] sm:text-7xl lg:text-8xl">$550</p>
        <p class="mt-2 text-sm text-white/30">7:00 AM — 12:00 PM</p>

        <div class="mt-8 border-t border-white/5 pt-8">
          <p class="text-sm leading-[1.85] text-white/50">
            Five hours targeting roosterfish, jacks, and snapper along the Guanacaste coastline.
            Perfect for a morning of tight lines before exploring the area.
          </p>
        </div>

        <div class="mt-6 flex flex-wrap gap-2">
          {#each ['Roosterfish', 'Jack Crevalle', 'Snapper', 'Permit'] as sp}
            <span class="text-xs uppercase tracking-wider text-[var(--current)]/70 border border-[var(--current)]/15 px-3 py-1.5">{sp}</span>
          {/each}
        </div>

        <a href={wa} target="_blank" rel="noopener noreferrer" class="btn-book mt-auto pt-8 w-fit">Book Half Day</a>
      </div>

      <!-- Full Day -->
      <div class="bg-[var(--ink)] p-8 sm:p-12 flex flex-col">
        <div class="flex items-start justify-between">
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-white/30">Full Day</p>
          <span class="text-[0.625rem] font-bold uppercase tracking-widest bg-[var(--current)] text-[var(--ink)] px-3 py-1">Popular</span>
        </div>
        <p class="mt-4 font-display text-6xl font-light text-[var(--salt)] sm:text-7xl lg:text-8xl">$1,100</p>
        <p class="mt-2 text-sm text-white/30">7:00 AM — 3:00 PM</p>

        <div class="mt-8 border-t border-white/5 pt-8">
          <p class="text-sm leading-[1.85] text-white/50">
            Eight full hours to chase everything from inshore roosterfish to offshore mahi-mahi,
            yellowfin tuna, and sailfish. The full day lets us follow the bite wherever it leads.
          </p>
        </div>

        <div class="mt-6 flex flex-wrap gap-2">
          {#each ['Roosterfish', 'Mahi-Mahi', 'Yellowfin Tuna', 'Sailfish', 'Jack Crevalle'] as sp}
            <span class="text-xs uppercase tracking-wider text-[var(--current)]/70 border border-[var(--current)]/15 px-3 py-1.5">{sp}</span>
          {/each}
        </div>

        <a href={wa} target="_blank" rel="noopener noreferrer" class="btn-book mt-auto pt-8 w-fit">Book Full Day</a>
      </div>
    </div>

    <!-- What's included -->
    <div class="reveal-stagger mt-12 grid grid-cols-3 gap-8 sm:mt-16 sm:grid-cols-6">
      {#each [
        { icon: '🍺', label: 'Drinks' },
        { icon: '🍽️', label: 'Food' },
        { icon: '🎣', label: 'Fly Gear' },
        { icon: '📋', label: 'License' },
        { icon: '🧊', label: 'Cooler' },
        { icon: '🛡️', label: 'Safety' }
      ] as item}
        <div class="flex flex-col items-center gap-2 text-center">
          <span class="text-2xl">{item.icon}</span>
          <span class="text-[0.6875rem] uppercase tracking-[0.15em] text-white/30">{item.label}</span>
        </div>
      {/each}
    </div>
  </div>
</section>

<!-- ──────────────────────────── GALLERY ──────────────────────────── -->
<section id="gallery" class="py-16 sm:py-28 overflow-hidden">
  <div class="mx-auto max-w-[1400px] px-6 lg:px-10">
    <div class="reveal flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between mb-10 sm:mb-14">
      <div>
        <p class="section-label">Gallery</p>
        <h2 class="font-display text-3xl font-light mt-4 sm:text-5xl">Scenes from the <em class="text-[var(--current)]">water</em></h2>
      </div>
      <p class="text-xs uppercase tracking-[0.15em] text-white/25">{gallery.length} photos</p>
    </div>
  </div>

  <!-- Film strip — full-bleed horizontal scroll -->
  <div class="reveal gallery-strip pl-6 lg:pl-10" bind:this={galleryEl}>
    {#each gallery as item, i}
      <button
        class="gallery-strip-item h-64 w-48 sm:h-80 sm:w-60 lg:h-[420px] lg:w-80 {i === gallery.length - 1 ? 'mr-6 lg:mr-10' : ''}"
        onclick={() => openLightbox(i)}
      >
        <img src={item.src} alt={item.alt} class="h-full w-full object-cover" loading="lazy" />
      </button>
    {/each}
  </div>

  <!-- Second row — reversed for visual interest -->
  <div class="reveal gallery-strip mt-1 pl-6 lg:pl-10" style="direction:rtl">
    {#each [...gallery].reverse().slice(0, 12) as item, i}
      <button
        class="gallery-strip-item h-48 w-36 sm:h-60 sm:w-44 lg:h-72 lg:w-56"
        style="direction:ltr"
        onclick={() => openLightbox(gallery.length - 1 - i)}
      >
        <img src={item.src} alt={item.alt} class="h-full w-full object-cover" loading="lazy" />
      </button>
    {/each}
  </div>
</section>

<!-- LIGHTBOX -->
{#if lightboxOpen}
  <div class="fixed inset-0 z-[60] flex items-center justify-center bg-black/95" role="dialog" aria-modal="true">
    <button class="absolute top-5 right-5 text-2xl text-white/40 hover:text-white transition-colors" onclick={closeLightbox} aria-label="Close">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" /></svg>
    </button>
    <button class="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white transition-colors" onclick={prev} aria-label="Previous">
      <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19l-7-7 7-7" /></svg>
    </button>
    <button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white transition-colors" onclick={next} aria-label="Next">
      <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7" /></svg>
    </button>

    <img src={gallery[lightboxIndex].src} alt={gallery[lightboxIndex].alt} class="max-h-[85vh] max-w-[92vw] object-contain" />

    <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex items-center gap-3">
      <span class="text-xs tracking-wider text-white/25">{lightboxIndex + 1} / {gallery.length}</span>
    </div>
  </div>
{/if}

<!-- ──────────────────────────── REVIEWS ──────────────────────────── -->
<section id="reviews" class="py-16 sm:py-28 bg-[var(--steel)]">
  <div class="mx-auto max-w-[1400px] px-6 lg:px-10">
    <div class="reveal flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <p class="section-label">Reviews</p>
        <h2 class="font-display text-3xl font-light mt-4 sm:text-5xl">What guests <em class="text-[var(--current)]">say</em></h2>
      </div>
      <div class="flex items-center gap-3">
        <div class="flex gap-0.5 text-amber-400">
          {#each Array(5) as _}<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>{/each}
        </div>
        <span class="text-sm text-white/40">5.0 on Google</span>
      </div>
    </div>

    <!-- Mobile: horizontal scroll -->
    <div class="reveal mt-10 -mx-6 flex snap-x snap-mandatory gap-4 overflow-x-auto pb-4 sm:mt-14 lg:-mx-10 lg:hidden" style="scroll-padding-inline: calc((100vw - 280px) / 2)">
      <div class="flex-shrink-0" style="width: calc((100vw - 280px) / 2 - 1rem)"></div>
      {#each reviews as r, i}
        <div class="min-w-[280px] max-w-[310px] flex-shrink-0 snap-center border border-white/5 bg-[var(--ink)] p-6">
          <div class="flex gap-0.5 text-amber-400 mb-4">
            {#each Array(r.rating) as _}<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>{/each}
          </div>
          <p class="text-sm leading-[1.8] text-white/55">"{r.text}"</p>
          <div class="mt-5 flex items-center gap-3 border-t border-white/5 pt-4">
            <div class="flex h-9 w-9 items-center justify-center bg-[var(--current)]/10 text-[var(--current)] text-sm font-bold">
              {r.name.split(' ').map(n => n[0]).join('')}
            </div>
            <div>
              <p class="text-sm font-medium text-white/80">{r.name}</p>
              <p class="text-xs text-white/30">{r.date}</p>
            </div>
          </div>
        </div>
      {/each}
      <div class="flex-shrink-0" style="width: calc((100vw - 280px) / 2 - 1rem)"></div>
    </div>

    <!-- Desktop: 3-column grid -->
    <div class="reveal-stagger mt-14 hidden gap-px bg-white/5 lg:grid lg:grid-cols-3">
      {#each reviews as r}
        <div class="bg-[var(--ink)] p-8 flex flex-col">
          <div class="flex gap-0.5 text-amber-400 mb-5">
            {#each Array(r.rating) as _}<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>{/each}
          </div>
          <p class="text-sm leading-[1.85] text-white/55 flex-1">"{r.text}"</p>
          <div class="mt-6 flex items-center gap-3 border-t border-white/5 pt-5">
            <div class="flex h-9 w-9 items-center justify-center bg-[var(--current)]/10 text-[var(--current)] text-sm font-bold">
              {r.name.split(' ').map(n => n[0]).join('')}
            </div>
            <div>
              <p class="text-sm font-medium text-white/80">{r.name}</p>
              <p class="text-xs text-white/30">{r.date}</p>
            </div>
          </div>
        </div>
      {/each}
    </div>

    <div class="reveal mt-8 text-center sm:mt-10">
      <a href="https://www.google.com/maps/place/VIDADELMARCR+FLY+FISHING+ADVENTURE/data=!4m2!3m1!1s0x0:0x35ffc2481594f9f2" target="_blank" rel="noopener noreferrer"
        class="inline-flex items-center gap-2 text-sm text-white/40 transition-colors hover:text-white/70">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
        See all reviews on Google
      </a>
    </div>
  </div>
</section>

<!-- ──────────────────────────── CTA ──────────────────────────── -->
<section class="relative h-[60vh] sm:h-[70vh] flex items-center justify-center overflow-hidden">
  <img src="/gallery/scenery-rainbow.jpg" alt="Rainbow over Pacific" class="absolute inset-0 h-full w-full object-cover" loading="lazy" />
  <div class="absolute inset-0 bg-[var(--ink)]/70"></div>
  <div class="relative z-10 text-center px-6">
    <h2 class="font-display text-4xl font-light text-[var(--salt)] sm:text-6xl lg:text-7xl">
      Your line.<br/>Their water.
    </h2>
    <a href={wa} target="_blank" rel="noopener noreferrer" class="btn-book mt-8 inline-flex">
      <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
      Book on WhatsApp
    </a>
  </div>
</section>

<!-- ──────────────────────────── CONTACT / FOOTER ──────────────────────────── -->
<footer id="book" class="border-t border-white/5 bg-[var(--ink)]">
  <div class="mx-auto max-w-[1400px] px-6 py-16 sm:py-24 lg:px-10">
    <div class="grid gap-12 md:grid-cols-12">

      <!-- Left — brand -->
      <div class="md:col-span-5">
        <p class="font-display text-3xl tracking-wider text-[var(--salt)] sm:text-4xl" style="letter-spacing:0.15em">VIDA DEL MAR CR FLY FISHING</p>
        <p class="mt-2 text-sm text-white/30">Fly Fishing Adventures</p>
        <p class="mt-1 text-sm text-white/30">El Jobo, La Cruz, Guanacaste</p>

        <div class="mt-8 flex gap-3">
          <a href={wa} target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center border border-white/10 text-white/40 transition-colors hover:border-[#25d366] hover:text-[#25d366]" aria-label="WhatsApp">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
          </a>
          <a href={ig} target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center border border-white/10 text-white/40 transition-colors hover:border-pink-400 hover:text-pink-400" aria-label="Instagram">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
          </a>
          <a href={fb} target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center border border-white/10 text-white/40 transition-colors hover:border-blue-400 hover:text-blue-400" aria-label="Facebook">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          </a>
        </div>
      </div>

      <!-- Right — contact details -->
      <div class="md:col-span-7 grid gap-8 sm:grid-cols-3">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-white/25 mb-3">WhatsApp</p>
          <a href={wa} target="_blank" rel="noopener noreferrer" class="text-sm text-[var(--current)] hover:underline">Message us</a>
        </div>
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-white/25 mb-3">Phone</p>
          <a href="tel:+50689721609" class="text-sm text-white/60 hover:text-white">{phone}</a>
        </div>
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-white/25 mb-3">Email</p>
          <a href="mailto:{email}" class="text-sm text-white/60 hover:text-white">{email}</a>
        </div>
      </div>
    </div>

    <!-- Map -->
    <div class="mt-12 overflow-hidden border border-white/5 sm:mt-16">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3000!2d-85.77!3d10.85!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x35ffc2481594f9f2!2sVIDADELMARCR%20FLY%20FISHING%20ADVENTURE!5e0!3m2!1sen!2sus!4v1"
        width="100%"
        height="300"
        style="border:0; filter: invert(0.9) hue-rotate(180deg) saturate(0.2) brightness(0.7);"
        allowfullscreen
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
        title="VIDADELMARCR FLY FISHING ADVENTURE"
      ></iframe>
    </div>

    <!-- Bottom bar -->
    <div class="mt-12 flex flex-col items-center gap-3 border-t border-white/5 pt-8 sm:flex-row sm:justify-between">
      <p class="text-xs text-white/15">&copy; {new Date().getFullYear()} Vidadelmarcr Spot Fishing</p>
      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs text-white/15 hover:text-white/30">
        Made by digitalmar.dev
      </a>
    </div>
  </div>
</footer>

<!-- FLOATING WHATSAPP -->
<a href={wa} target="_blank" rel="noopener noreferrer"
  class="fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center bg-[#25d366] text-white shadow-lg transition-transform hover:scale-110"
  aria-label="WhatsApp"
>
  <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</a>
