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

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

  const whatsappUrl = '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 instagram = 'https://www.instagram.com/vidadelmarcostarica_flyfishing';
  const facebook = 'https://www.facebook.com/share/1BGbBk9fqH/';

  const navLinks = [
    { href: '#about', label: 'About' },
    { href: '#trips', label: 'Trips' },
    { href: '#gallery', label: 'Gallery' },
    { href: '#contact', label: 'Contact' }
  ];

  const trips = [
    {
      icon: '🌅',
      title: 'Half Day',
      schedule: '7:00 AM — 12:00 PM',
      price: 550,
      description: 'Five hours on the water — perfect for targeting roosterfish, jacks, and snapper along the Guanacaste coastline. Ideal if you want a morning of tight lines before exploring the area.',
      species: ['Roosterfish', 'Jack Crevalle', 'Snapper', 'Permit']
    },
    {
      icon: '☀️',
      title: 'Full Day',
      schedule: '7:00 AM — 3:00 PM',
      price: 1100,
      description: '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.',
      species: ['Roosterfish', 'Mahi-Mahi', 'Yellowfin Tuna', 'Sailfish', 'Jack Crevalle']
    }
  ];

  const species = [
    { name: 'Roosterfish', emoji: '🐟' },
    { name: 'Mahi-Mahi', emoji: '🐠' },
    { name: 'Yellowfin Tuna', emoji: '🐟' },
    { name: 'Sailfish', emoji: '⛵' },
    { name: 'Jack Crevalle', emoji: '💪' },
    { name: 'Snapper', emoji: '🎣' },
    { name: 'Permit', emoji: '🏆' },
    { name: 'Bonito', emoji: '🐟' }
  ];

  const included = [
    { icon: '🍺', label: 'Beer & Drinks', desc: 'Cold beers, water, and sodas' },
    { icon: '🍽️', label: 'Food', desc: 'Fresh lunch on the water' },
    { icon: '🎣', label: 'Fly Gear', desc: 'Rods, reels, and flies provided' },
    { icon: '📋', label: 'Fishing License', desc: 'All permits included' },
    { icon: '🧊', label: 'Cooler & Ice', desc: 'Everything stays cold' },
    { icon: '🛡️', label: 'Safety Gear', desc: 'Life vests and first aid' }
  ];

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

  const galleryImages = gallery.filter(g => !g.type);

  function openLightbox(idx) {
    const imgIdx = galleryImages.findIndex(g => g.src === gallery[idx].src);
    if (imgIdx >= 0) {
      lightboxIndex = imgIdx;
      lightboxOpen = true;
    }
  }

  function closeLightbox() { lightboxOpen = false; }
  function prevImage() { lightboxIndex = (lightboxIndex - 1 + galleryImages.length) % galleryImages.length; }
  function nextImage() { lightboxIndex = (lightboxIndex + 1) % galleryImages.length; }

  function handleKeydown(e) {
    if (!lightboxOpen) return;
    if (e.key === 'Escape') closeLightbox();
    if (e.key === 'ArrowLeft') prevImage();
    if (e.key === 'ArrowRight') nextImage();
  }

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

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

<!-- NAV -->
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 {scrollY > 50 ? 'glass py-3' : 'py-5'}">
  <div class="mx-auto flex max-w-7xl items-center justify-between px-5">
    <a href="/" class="flex items-center gap-3">
      <img src="/logo/vidadelmar-logo.jpg" alt="Vida del Mar" class="h-10 w-10 rounded-full object-cover" />
      <span class="font-display text-xl font-semibold tracking-wide text-gradient-teal">Vida del Mar</span>
    </a>

    <div class="hidden items-center gap-8 md:flex">
      {#each navLinks as link}
        <a href={link.href} class="text-sm font-medium text-white/70 transition-colors hover:text-teal-300">{link.label}</a>
      {/each}
      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-primary !py-2.5 !px-5 text-sm">
        Book Now
      </a>
    </div>

    <button class="flex flex-col gap-1.5 md:hidden" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="Toggle menu">
      <span class="block h-0.5 w-6 bg-white transition-all duration-300 {mobileMenuOpen ? 'translate-y-2 rotate-45' : ''}"></span>
      <span class="block h-0.5 w-6 bg-white transition-all duration-300 {mobileMenuOpen ? 'opacity-0' : ''}"></span>
      <span class="block h-0.5 w-6 bg-white transition-all duration-300 {mobileMenuOpen ? '-translate-y-2 -rotate-45' : ''}"></span>
    </button>
  </div>

  {#if mobileMenuOpen}
    <div class="glass mt-3 border-t border-white/10 px-5 py-6 md:hidden">
      <div class="flex flex-col gap-4">
        {#each navLinks as link}
          <a href={link.href} class="text-lg font-medium text-white/80 hover:text-teal-300" onclick={() => mobileMenuOpen = false}>{link.label}</a>
        {/each}
        <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-primary mt-2 justify-center text-center">
          Book Now
        </a>
      </div>
    </div>
  {/if}
</nav>

<!-- HERO -->
<section class="relative min-h-screen-ios flex items-center justify-center 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-b from-[var(--deep)]/80 via-[var(--deep)]/50 to-[var(--deep)]"></div>

  <div class="relative z-10 mx-auto max-w-4xl px-5 text-center">
    <img src="/logo/vidadelmar-logo.jpg" alt="Vida del Mar logo" class="mx-auto mb-6 hidden h-28 w-28 rounded-full object-cover shadow-2xl ring-2 ring-teal-400/30 sm:block sm:h-36 sm:w-36" />

    <h1 class="font-display text-5xl font-bold leading-tight tracking-tight sm:text-7xl">
      <span class="text-gradient-teal">Vida del Mar</span>
    </h1>
    <p class="mt-2 font-display text-xl text-teal-200/80 sm:text-2xl">Costa Rica Fly Fishing</p>

    <p class="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-white/70 sm:text-lg">
      Saltwater fly fishing adventures off the coast of Guanacaste.
      Chase roosterfish, mahi-mahi, tuna, and sailfish with 30 years of local expertise.
    </p>

    <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-primary text-lg">
        <svg class="h-5 w-5" 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-outline">View Trips & Pricing</a>
    </div>

    <div class="mt-16 animate-[pulse-slow_2s_ease-in-out_infinite]">
      <svg class="mx-auto h-6 w-6 text-teal-400/60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
    </div>
  </div>
</section>

<!-- ABOUT -->
<section id="about" class="relative py-14 sm:py-24">
  <div class="mx-auto max-w-7xl px-5">
    <div class="reveal grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
      <div>
        <p class="text-sm font-semibold uppercase tracking-widest text-teal-400">Your Captain</p>
        <h2 class="section-title mt-3 text-white">Junior Fernandez<br /><span class="text-gradient-teal">30 Years on the Water</span></h2>
        <p class="mt-6 leading-relaxed text-white/70">
          Born and raised on the Guanacaste coast, Captain Junior has spent three decades mastering the
          waters around El Jobo and La Cruz. He knows every reef, current, and feeding pattern — where
          roosterfish patrol the rocky points, where mahi-mahi chase bait balls offshore, and where
          the big sailfish run.
        </p>
        <p class="mt-4 leading-relaxed text-white/70">
          As a dedicated fly fishing guide, Junior provides all the gear you need — premium fly rods,
          reels, and a curated selection of flies proven on these waters. Whether you're a seasoned
          saltwater fly angler or picking up a fly rod for the first time, he'll put you on fish.
        </p>

        <div class="mt-8 grid grid-cols-3 gap-4">
          <div class="glass-card rounded-xl p-4 text-center">
            <p class="font-display text-3xl font-bold text-teal-300">30+</p>
            <p class="mt-1 text-xs text-white/50">Years Experience</p>
          </div>
          <div class="glass-card rounded-xl p-4 text-center">
            <p class="font-display text-3xl font-bold text-teal-300">8</p>
            <p class="mt-1 text-xs text-white/50">Target Species</p>
          </div>
          <div class="glass-card rounded-xl p-4 text-center">
            <p class="font-display text-3xl font-bold text-teal-300">100%</p>
            <p class="mt-1 text-xs text-white/50">Fly Fishing</p>
          </div>
        </div>
      </div>

      <div class="relative">
        <img
          src="/gallery/catch-sailfish-01.jpg"
          alt="Captain Junior with a sailfish"
          class="w-full rounded-2xl object-cover shadow-2xl"
          loading="lazy"
        />
        <div class="absolute bottom-4 left-4 rounded-xl glass-card px-4 py-2.5">
          <p class="text-xs font-semibold text-teal-300">El Jobo, Guanacaste</p>
          <p class="text-xs text-white/50">La Cruz, Costa Rica</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SPECIES BAND -->
<div class="overflow-x-auto border-y border-white/5 bg-[var(--deep-mid)] py-5">
  <div class="flex min-w-max items-center justify-center gap-6 px-5 sm:gap-10">
    {#each species as s}
      <div class="flex items-center gap-2 text-sm text-white/50">
        <span class="text-lg">{s.emoji}</span>
        <span class="font-medium">{s.name}</span>
      </div>
    {/each}
  </div>
</div>

<!-- TRIPS -->
<section id="trips" class="py-14 sm:py-24">
  <div class="mx-auto max-w-7xl px-5">
    <div class="reveal text-center">
      <p class="text-sm font-semibold uppercase tracking-widest text-teal-400">Trips & Pricing</p>
      <h2 class="section-title mt-3 text-white">Choose Your <span class="text-gradient-teal">Adventure</span></h2>
      <p class="mx-auto mt-4 max-w-2xl text-white/60">All trips depart from El Jobo, La Cruz. Prices are per boat — bring up to 3 anglers.</p>
    </div>

    <div class="reveal mt-10 grid gap-6 sm:mt-14 md:grid-cols-2 md:gap-8">
      {#each trips as trip}
        <div class="service-card p-6 sm:p-8">
          <div class="flex items-start justify-between">
            <span class="text-4xl">{trip.icon}</span>
            <div class="text-right">
              <p class="font-display text-4xl font-bold text-teal-300">${trip.price}</p>
              <p class="text-xs text-white/40">per boat</p>
            </div>
          </div>
          <h3 class="mt-4 font-display text-2xl font-semibold text-white">{trip.title}</h3>
          <p class="mt-1 text-sm font-medium text-teal-400/80">{trip.schedule}</p>
          <p class="mt-4 text-sm leading-relaxed text-white/60">{trip.description}</p>
          <div class="mt-5 flex flex-wrap gap-2">
            {#each trip.species as sp}
              <span class="species-pill">{sp}</span>
            {/each}
          </div>
          <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-primary mt-6 w-full justify-center text-sm">
            Book {trip.title}
          </a>
        </div>
      {/each}
    </div>

    <!-- INCLUDED -->
    <div class="reveal mt-14 sm:mt-20">
      <h3 class="text-center font-display text-2xl font-semibold text-white">Everything Included</h3>
      <p class="mt-2 text-center text-sm text-white/50">No hidden costs — just show up ready to fish</p>
      <div class="mt-8 grid grid-cols-3 gap-6 sm:grid-cols-6 sm:gap-8">
        {#each included as item}
          <div class="included-item">
            <div class="included-icon">{item.icon}</div>
            <div>
              <p class="text-sm font-medium text-white/80">{item.label}</p>
              <p class="mt-0.5 hidden text-xs text-white/40 sm:block">{item.desc}</p>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </div>
</section>

<!-- GALLERY -->
<section id="gallery" class="py-14 sm:py-24 bg-[var(--deep-mid)]">
  <div class="mx-auto max-w-7xl px-5">
    <div class="reveal text-center">
      <p class="text-sm font-semibold uppercase tracking-widest text-teal-400">Gallery</p>
      <h2 class="section-title mt-3 text-white">On the <span class="text-gradient-teal">Water</span></h2>
    </div>

    <!-- Mobile: horizontal scroll -->
    <div class="reveal mt-8 flex snap-x snap-mandatory gap-4 overflow-x-auto pb-4 sm:mt-12 md:hidden">
      {#each gallery as item, i}
        {#if item.type === 'video'}
          <div class="gallery-item w-72 flex-shrink-0 snap-center">
            <video
              src={item.src}
              class="h-52 w-full rounded-xl object-cover"
              muted
              loop
              playsinline
              preload="metadata"
              onmouseenter={(e) => e.currentTarget.play()}
              onmouseleave={(e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; }}
            ></video>
          </div>
        {:else}
          <button class="gallery-item w-72 flex-shrink-0 snap-center cursor-pointer" onclick={() => openLightbox(i)}>
            <img src={item.src} alt={item.alt} class="h-52 w-full rounded-xl object-cover" loading="lazy" />
          </button>
        {/if}
      {/each}
    </div>

    <!-- Desktop: masonry grid -->
    <div class="reveal mt-12 hidden columns-2 gap-4 md:block lg:columns-3 xl:columns-4">
      {#each gallery as item, i}
        {#if item.type === 'video'}
          <div class="gallery-item mb-4 break-inside-avoid">
            <video
              src={item.src}
              class="w-full rounded-xl object-cover"
              muted
              loop
              playsinline
              preload="metadata"
              controls
            ></video>
          </div>
        {:else}
          <button class="gallery-item mb-4 block w-full break-inside-avoid cursor-pointer" onclick={() => openLightbox(i)}>
            <img
              src={item.src}
              alt={item.alt}
              class="w-full rounded-xl object-cover {item.span === 'tall' ? 'aspect-[3/4]' : item.span === 'wide' ? 'aspect-[16/9]' : 'aspect-[4/3]'}"
              loading="lazy"
            />
          </button>
        {/if}
      {/each}
    </div>
  </div>
</section>

<!-- LIGHTBOX -->
{#if lightboxOpen}
  <div class="fixed inset-0 z-[60] flex items-center justify-center bg-black/95 p-4" role="dialog" aria-modal="true">
    <button class="absolute top-4 right-4 text-3xl text-white/60 hover:text-white" onclick={closeLightbox} aria-label="Close">&times;</button>
    <button class="absolute left-4 top-1/2 -translate-y-1/2 text-4xl text-white/40 hover:text-white" onclick={prevImage} aria-label="Previous">&lsaquo;</button>
    <button class="absolute right-4 top-1/2 -translate-y-1/2 text-4xl text-white/40 hover:text-white" onclick={nextImage} aria-label="Next">&rsaquo;</button>

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

    <p class="absolute bottom-4 left-1/2 -translate-x-1/2 text-sm text-white/40">
      {lightboxIndex + 1} / {galleryImages.length}
    </p>
  </div>
{/if}

<!-- CONTACT / CTA -->
<section id="contact" class="py-14 sm:py-24">
  <div class="mx-auto max-w-7xl px-5">
    <div class="reveal text-center">
      <p class="text-sm font-semibold uppercase tracking-widest text-teal-400">Contact</p>
      <h2 class="section-title mt-3 text-white">Ready to <span class="text-gradient-teal">Fish?</span></h2>
      <p class="mx-auto mt-4 max-w-xl text-white/60">
        Send a message on WhatsApp or give us a call. We'll get you on the water.
      </p>
    </div>

    <div class="reveal mt-10 grid gap-6 sm:mt-14 sm:grid-cols-3">
      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="glass-card flex flex-col items-center gap-3 rounded-2xl p-6 text-center transition-colors hover:border-teal-400/30">
        <div class="flex h-14 w-14 items-center justify-center rounded-full bg-[#25d366]/15 text-2xl">
          <svg class="h-7 w-7 text-[#25d366]" 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>
        </div>
        <p class="font-semibold text-white">WhatsApp</p>
        <p class="text-sm text-white/50">Message us anytime</p>
      </a>

      <a href="tel:+50689721609" class="glass-card flex flex-col items-center gap-3 rounded-2xl p-6 text-center transition-colors hover:border-teal-400/30">
        <div class="flex h-14 w-14 items-center justify-center rounded-full bg-teal-400/15 text-2xl">
          <svg class="h-7 w-7 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
        </div>
        <p class="font-semibold text-white">Call Us</p>
        <p class="text-sm text-white/50">{phone}</p>
      </a>

      <a href="mailto:{email}" class="glass-card flex flex-col items-center gap-3 rounded-2xl p-6 text-center transition-colors hover:border-teal-400/30">
        <div class="flex h-14 w-14 items-center justify-center rounded-full bg-teal-400/15 text-2xl">
          <svg class="h-7 w-7 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
        </div>
        <p class="font-semibold text-white">Email</p>
        <p class="text-sm text-white/50">{email}</p>
      </a>
    </div>

    <!-- Map -->
    <div class="reveal mt-10 overflow-hidden rounded-2xl border border-white/5 sm:mt-14">
      <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="350"
        style="border:0; filter: invert(0.9) hue-rotate(180deg) saturate(0.3) brightness(0.8);"
        allowfullscreen
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
        title="Vida del Mar location — El Jobo, La Cruz"
      ></iframe>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="border-t border-white/5 bg-[var(--deep)] py-10 sm:py-14">
  <div class="mx-auto max-w-7xl px-5">
    <div class="flex flex-col items-center gap-6 sm:flex-row sm:justify-between">
      <div class="text-center sm:text-left">
        <p class="font-display text-xl font-semibold text-gradient-teal">Vida del Mar</p>
        <p class="mt-1 text-sm text-white/40">Costa Rica Fly Fishing Adventures</p>
        <p class="mt-1 text-sm text-white/40">El Jobo, La Cruz, Guanacaste</p>
      </div>

      <div class="flex items-center gap-4">
        <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/50 transition-colors hover:bg-[#25d366]/20 hover:text-[#25d366]" aria-label="WhatsApp">
          <svg class="h-5 w-5" 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={instagram} target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/50 transition-colors hover:bg-pink-500/20 hover:text-pink-400" aria-label="Instagram">
          <svg class="h-5 w-5" 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={facebook} target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/50 transition-colors hover:bg-blue-500/20 hover:text-blue-400" aria-label="Facebook">
          <svg class="h-5 w-5" 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>

    <div class="mt-8 border-t border-white/5 pt-6 text-center">
      <p class="text-xs text-white/30">&copy; {new Date().getFullYear()} Vidadelmarcr Spot Fishing. All rights reserved.</p>
      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="mt-2 inline-block text-xs text-white/20 transition-colors hover:text-white/40">
        Made by digitalmar.dev
      </a>
    </div>
  </div>
</footer>

<!-- FLOATING WHATSAPP -->
<a
  href={whatsappUrl}
  target="_blank"
  rel="noopener noreferrer"
  class="fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-[#25d366] text-white shadow-lg transition-transform hover:scale-110"
  aria-label="Chat on 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>
