gunslinger/website/src/routes/+page.svelte

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

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

	const WHATSAPP = 'https://wa.me/50689630901?text=Hi!%20I%27d%20like%20to%20book%20a%20fishing%20trip';
	const PHONE = 'tel:+50689630901';

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

	const fleet = [
		{
			name: 'Gunslinger',
			brand: "Clear Water 25'",
			year: '2007 (Restored 2025)',
			engine: 'Suzuki 200 HP',
			capacity: '4–5 passengers',
			features: ['Outriggers', 'Rod holders', 'Toilet', 'Live well'],
			image: '/boats/gunslinger-marina-side.jpg',
			desc: 'Fully restored in 2025 with all new equipment. Agile and versatile — perfect for chasing roosterfish and snook inshore, and just as ready to run offshore for sailfish, mahi-mahi and more.'
		},
		{
			name: 'Gunslinger II',
			brand: "Grady-White 25.3'",
			year: '2022',
			engine: '2× Suzuki 200 HP (44 kts)',
			capacity: 'Up to 8 passengers',
			features: ['Radar', '3 Navigators', '2 Fishfinders', 'VHF Radio', 'Toilet', 'Fresh water', 'Live well'],
			image: '/boats/gradywhite-gunslinger2-sunset.jpg',
			desc: 'Our premium offshore machine. Twin engines, full electronics suite, and room for the whole crew. Built for comfort on long offshore runs.'
		}
	];

	const species = [
		{ name: 'Roosterfish', tag: 'Signature Catch' },
		{ name: 'Sailfish', tag: 'Catch & Release' },
		{ name: 'Snook', tag: 'Inshore Trophy' },
		{ name: 'Red Snapper', tag: 'Year-Round' },
		{ name: 'Mahi-Mahi', tag: 'Offshore Classic' },
		{ name: 'Tripletail', tag: 'Unique Catch' },
		{ name: 'Spanish Mackerel', tag: 'Fast & Fun' },
		{ name: 'Jack Crevalle', tag: 'Hard Fighter' },
		{ name: 'Grouper', tag: 'Deep Reef' },
		{ name: 'Corvina', tag: 'Inshore Staple' },
		{ name: 'Hammerhead Shark', tag: 'Rare Encounter' },
		{ name: 'Tuna', tag: 'Offshore Power' },
		{ name: 'Marlin', tag: 'Ultimate Trophy' }
	];

	const techniques = ['Inshore', 'Offshore', 'Light Tackle', 'Casting', 'Trolling', 'Fly Fishing', 'Deep Fishing', 'Bottom Fishing'];

	let selectedBoat = $state(0);

	const boats = [
		{
			name: 'Gunslinger',
			inshore: [
				{ name: 'Snorkeling & Dolphins', price: 350, desc: 'Dolphin encounters and snorkeling in crystal-clear waters' },
				{ name: '4 Hours Fishing', price: 500, desc: 'Extended inshore session with more action' },
				{ name: 'Half Day', price: 650, desc: 'Our most popular — plenty of time for variety' },
				{ name: '¾ Day', price: 750, desc: 'Explore multiple spots for the best bites' },
				{ name: 'Full Day', price: 850, desc: 'The ultimate inshore experience, dawn to dusk' }
			],
			offshore: [
				{ name: '¾ Day', price: 850, desc: 'Extended time on the open Pacific' },
				{ name: 'Full Day', price: 1050, desc: 'All day offshore — maximize your chances' }
			]
		},
		{
			name: 'Gunslinger II',
			inshore: [
				{ name: 'Recreational', price: 350, desc: 'Quick taste of Costa Rica fishing — perfect for beginners' },
				{ name: '4 Hours Tour', price: 500, desc: 'Extended inshore session with more action' },
				{ name: 'Half Day', price: 750, desc: 'Our most popular — plenty of time for variety' },
				{ name: '¾ Day', price: 850, desc: 'Explore multiple spots for the best bites' },
				{ name: 'Full Day', price: 950, desc: 'The ultimate inshore experience, dawn to dusk' }
			],
			offshore: [
				{ name: 'Half Day', price: 800, desc: 'Chase sailfish, mahi-mahi and more offshore' },
				{ name: '¾ Day', price: 950, desc: 'Extended time on the open Pacific' },
				{ name: 'Full Day', price: 1150, desc: 'All day offshore — maximize your chances' }
			]
		}
	];

	const gallery = [
		{ src: '/fishing/roosterfish-group-4men.jpg', type: 'image', caption: 'Group Roosterfish Catch' },
		{ src: '/fishing/redsnapper-couple-boat.jpg', type: 'image', caption: 'Red Snapper Doubles' },
		{ src: '/fishing/mahimahi-solo-bite.jpg', type: 'image', caption: 'Offshore Mahi-Mahi' },
		{ src: '/fishing/sailfish-release-closeup-42s.mp4', type: 'video', caption: 'Sailfish Release' },
		{ src: '/fishing/roosterfish-trio-huge.jpg', type: 'image', caption: 'Monster Roosterfish' },
		{ src: '/fishing/redsnapper-solo-huk-cap.jpg', type: 'image', caption: 'Red Snapper' },
		{ src: '/fishing/roosterfish-solo-huk-cap.jpg', type: 'image', caption: 'Trophy Roosterfish' },
		{ src: '/fishing/mahimahi-kid-guide.jpg', type: 'image', caption: 'Family Mahi-Mahi' },
		{ src: '/fishing/snook-solo-hoodie-mountains.jpg', type: 'image', caption: 'Snook — Mountain Backdrop' },
		{ src: '/fishing/sailfish-release-boatside.jpg', type: 'image', caption: 'Sailfish Release' },
		{ src: '/fishing/roosterfish-couple.jpg', type: 'image', caption: 'Couples Fishing' },
		{ src: '/fishing/roosterfish-couple-1.jpg', type: 'image', caption: 'Roosterfish Catch' },
		{ src: '/fishing/roosterfish-couple-2.jpg', type: 'image', caption: 'Roosterfish Couple' },
		{ src: '/fishing/hammerhead-shark-solo.jpg', type: 'image', caption: 'Hammerhead Shark' },
		{ src: '/fishing/tripletail-solo-blue-clouds.jpg', type: 'image', caption: 'Tripletail' },
		{ src: '/fishing/roosterfish-duo-huge-pair.jpg', type: 'image', caption: 'Double Roosterfish' },
		{ src: '/fishing/snook-woman-flyrod.jpg', type: 'image', caption: 'Snook Catch' },
		{ src: '/fishing/corvina-trio-islands.jpg', type: 'image', caption: 'Triple Corvina' },
		{ src: '/fishing/sailfish-release-dark.jpg', type: 'image', caption: 'Sailfish Action' },
		{ src: '/fishing/redsnapper-woman-blue-shades.jpg', type: 'image', caption: 'Red Snapper' },
		{ src: '/fishing/roosterfish-solo-hoodie-beach.jpg', type: 'image', caption: 'Beach Roosterfish' },
		{ src: '/fishing/spanish-mackerel-solo.jpg', type: 'image', caption: 'Spanish Mackerel' },
		{ src: '/fishing/group-4-marina-catch.jpg', type: 'image', caption: 'Marina Catch Day' },
		{ src: '/fishing/roosterfish-solo-green-shirt.jpg', type: 'image', caption: 'Roosterfish' },
		{ src: '/fishing/redsnapper-duo-boat.jpg', type: 'image', caption: 'Red Snapper Catch' }
	];

	const imageGallery = $derived(gallery.filter((g) => g.type === 'image'));

	function openLightbox(src) {
		const idx = imageGallery.findIndex((g) => g.src === src);
		if (idx >= 0) {
			lightboxIndex = idx;
			lightboxOpen = true;
		}
	}

	function closeLightbox() {
		lightboxOpen = false;
	}

	function prevImage() {
		lightboxIndex = (lightboxIndex - 1 + imageGallery.length) % imageGallery.length;
	}

	function nextImage() {
		lightboxIndex = (lightboxIndex + 1) % imageGallery.length;
	}

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

	$effect(() => {
		if (lightboxOpen) {
			document.body.style.overflow = 'hidden';
		} else {
			document.body.style.overflow = '';
		}
	});

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

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

<!-- NAV -->
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 {scrollY > 50 ? 'bg-deep/95 backdrop-blur-md shadow-lg shadow-black/20' : ''}">
	<div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:h-20 sm:px-6">
		<a href="#" class="flex items-center gap-2">
			<img src="/logos/logo-black-sailfish.png" alt="Gunslinger" class="h-14 sm:h-16" style="filter: {scrollY > 50 ? 'invert(73%) sepia(40%) saturate(700%) hue-rotate(157deg) brightness(102%)' : 'invert(1)'}; transition: filter 0.3s;" />
		</a>

		<div class="hidden items-center gap-6 md:flex">
			{#each navLinks as link}
				<a href={link.href} class="text-sm font-medium uppercase tracking-wider text-slate-300 transition-colors hover:text-cyan-400">{link.label}</a>
			{/each}
			<a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/25">
				Book Now
			</a>
		</div>

		<button class="p-2 text-white md:hidden" onclick={() => (mobileMenuOpen = !mobileMenuOpen)} aria-label="Menu">
			<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				{#if mobileMenuOpen}
					<path d="M6 18L18 6M6 6l12 12" />
				{:else}
					<path d="M4 6h16M4 12h16M4 18h16" />
				{/if}
			</svg>
		</button>
	</div>

	{#if mobileMenuOpen}
		<div class="border-t border-white/10 bg-deep/98 px-4 pb-4 backdrop-blur-md md:hidden">
			{#each navLinks as link}
				<a href={link.href} class="block py-3 text-sm font-medium uppercase tracking-wider text-slate-300 hover:text-cyan-400" onclick={() => (mobileMenuOpen = false)}>{link.label}</a>
			{/each}
			<a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="mt-3 flex w-full items-center justify-center gap-2 rounded-lg bg-cyan-600 px-5 py-2.5 text-sm font-semibold text-white">Book Now</a>
		</div>
	{/if}
</nav>

<!-- HERO -->
<section class="relative min-h-screen-ios overflow-hidden">
	<!-- Mobile: video background -->
	<video class="absolute inset-0 h-full w-full object-cover md:hidden" autoplay muted loop playsinline poster="/fishing/sailfish-release-blue-dorsal.jpg">
		<source src="/hero-mobile.mp4" type="video/mp4" />
	</video>

	<!-- Desktop: image background -->
	<img src="/fishing/roosterfish-trio-huge.jpg" alt="" class="absolute inset-0 hidden h-full w-full object-cover md:block" style="object-position: center 35%" />

	<!-- Overlay -->
	<div class="absolute inset-0 bg-gradient-to-b from-deep/70 via-deep/30 to-deep"></div>

	<!-- Content -->
	<div class="relative z-10 flex min-h-screen-ios flex-col items-center justify-center px-4 text-center">
		<h1 class="hero-fade hero-fade-1 font-heading mb-2 text-[2.75rem] font-bold tracking-wider text-white sm:text-7xl lg:text-8xl">GUNSLINGER</h1>
		<p class="hero-fade hero-fade-2 font-heading mb-6 text-lg uppercase tracking-widest text-cyan-400 sm:text-2xl lg:text-3xl">Sportfishing CR</p>
		<p class="hero-fade hero-fade-3 mb-10 max-w-xl text-base text-slate-300 sm:text-lg">Premier fishing charters from Quepos, Costa Rica. Sailfish, roosterfish, snook — your next trophy awaits.</p>
		<div class="hero-fade hero-fade-4 flex flex-col gap-3 sm:flex-row">
			<a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg bg-cyan-600 px-8 py-3.5 font-semibold text-white transition-all hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/25">
				<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-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
				Book on WhatsApp
			</a>
			<a href="#trips" class="inline-flex items-center justify-center gap-2 rounded-lg border-2 border-cyan-500/50 px-8 py-3.5 font-semibold text-cyan-300 transition-all hover:border-cyan-400 hover:bg-cyan-500/10">
				View Trips
				<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7" /></svg>
			</a>
		</div>
	</div>

	<div class="absolute bottom-6 left-1/2 -translate-x-1/2 animate-bounce">
		<svg class="h-6 w-6 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
	</div>
</section>

<!-- TECHNIQUES MARQUEE -->
<div class="relative overflow-hidden border-y border-white/5 bg-navy/80 py-3 sm:py-4">
	<div class="marquee-track flex w-max items-center gap-6 sm:gap-10">
		{#each [0, 1] as _set}
			{#each techniques as tech}
				<span class="flex items-center gap-2 whitespace-nowrap sm:gap-3">
					<span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span>
					<span class="font-heading text-xs font-semibold uppercase tracking-[0.2em] text-slate-300 sm:text-sm">{tech}</span>
				</span>
			{/each}
		{/each}
	</div>
</div>

<!-- ABOUT -->
<section id="about" class="py-14 sm:py-24">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="reveal grid items-center gap-8 md:grid-cols-2 lg:gap-16">
			<div>
				<p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Quepos, Costa Rica</p>
				<h2 class="font-heading mb-6 text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">Where the Big Ones Bite</h2>
				<p class="mb-4 leading-relaxed text-slate-300">
					Based at Marina Pez Vela in Quepos — the sportfishing capital of Costa Rica's Central Pacific — Gunslinger Sportfishing offers world-class charters for anglers of all levels.
				</p>
				<p class="mb-4 leading-relaxed text-slate-300">
					Whether you're chasing trophy roosterfish along the inshore reefs, releasing sailfish offshore, or hunting snook in the open sea, our experienced crew and top-tier equipment make every trip one to remember.
				</p>
				<p class="text-sm leading-relaxed text-slate-400">
					Live bait, light tackle, casting, trolling, deep fishing, and bottom fishing — we match the technique to your target species.
				</p>
			</div>
			<div class="overflow-hidden rounded-xl">
				<img src="/boats/about-section.jpg" alt="Gunslinger Sportfishing in Quepos" class="w-full rounded-xl" loading="lazy" />
			</div>
		</div>

		<div class="reveal mt-12 grid grid-cols-3 gap-4 sm:mt-16">
			<div class="rounded-xl border border-white/5 bg-navy/50 p-4 text-center sm:p-6">
				<p class="font-heading text-3xl font-bold text-cyan-400 sm:text-4xl">2</p>
				<p class="mt-1 text-sm text-slate-400">Boats</p>
			</div>
			<div class="rounded-xl border border-white/5 bg-navy/50 p-4 text-center sm:p-6">
				<p class="font-heading text-3xl font-bold text-cyan-400 sm:text-4xl">15+</p>
				<p class="mt-1 text-sm text-slate-400">Species</p>
			</div>
			<div class="rounded-xl border border-white/5 bg-navy/50 p-4 text-center sm:p-6">
				<p class="font-heading text-3xl font-bold text-cyan-400 sm:text-4xl">365</p>
				<p class="mt-1 text-sm text-slate-400">Days / Year</p>
			</div>
		</div>
	</div>
</section>

<!-- FLEET -->
<section id="fleet" class="bg-navy py-14 sm:py-24">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="reveal mb-10 text-center sm:mb-16">
			<p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Our Boats</p>
			<h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">The Fleet</h2>
		</div>

		<div class="space-y-8 lg:space-y-12">
			{#each fleet as boat, i}
				<div class="reveal group grid overflow-hidden rounded-xl border border-white/5 bg-deep/80 transition-all hover:border-cyan-500/30 md:grid-cols-2">
					<div class="overflow-hidden {i % 2 === 1 ? 'md:order-2' : ''}">
						<img src={boat.image} alt={boat.name} class="aspect-[4/3] h-full w-full object-cover transition-transform duration-700 group-hover:scale-105 sm:aspect-[3/2] md:aspect-auto" loading="lazy" />
					</div>
					<div class="flex flex-col justify-center p-6 sm:p-8 lg:p-10 {i % 2 === 1 ? 'md:order-1' : ''}">
						<h3 class="font-heading text-3xl font-bold uppercase text-white sm:text-4xl">{boat.name}</h3>
						<p class="mt-1 text-sm font-medium text-cyan-400">{boat.brand} · {boat.year}</p>
						<p class="mt-4 text-base leading-relaxed text-slate-300">{boat.desc}</p>
						<div class="mt-5 flex flex-wrap gap-2 text-xs">
							<span class="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-3 py-1 text-cyan-300">{boat.engine}</span>
							<span class="rounded-full border border-cyan-500/20 bg-cyan-500/10 px-3 py-1 text-cyan-300">{boat.capacity}</span>
						</div>
						<div class="mt-3 flex flex-wrap gap-1.5 text-xs text-slate-400">
							{#each boat.features as feature}
								<span class="rounded bg-white/5 px-2 py-0.5">{feature}</span>
							{/each}
						</div>
					</div>
				</div>
			{/each}
		</div>
	</div>
</section>

<!-- SPECIES -->
<section class="py-14 sm:py-24">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="reveal mb-10 text-center sm:mb-16">
			<p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Target Species</p>
			<h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">What You'll Catch</h2>
		</div>

		<div class="reveal flex flex-wrap justify-center gap-3 sm:gap-4">
			{#each species as s}
				<div class="rounded-full border border-white/5 bg-navy/60 px-4 py-2 transition-all hover:border-cyan-500/30 sm:px-5 sm:py-3">
					<span class="text-sm font-medium text-white">{s.name}</span>
					<span class="ml-1.5 hidden text-xs text-cyan-400/70 sm:inline">· {s.tag}</span>
				</div>
			{/each}
		</div>
	</div>
</section>

<!-- TRIPS & RATES -->
<section id="trips" class="bg-navy py-14 sm:py-24">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="reveal mb-10 text-center sm:mb-16">
			<p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Trips & Rates</p>
			<h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">Choose Your Adventure</h2>
		</div>

		<!-- Boat tabs -->
		<div class="reveal mb-8 flex justify-center">
			<div class="inline-flex rounded-lg border border-white/10 bg-deep/60 p-1">
				{#each boats as boat, i}
					<button
						onclick={() => (selectedBoat = i)}
						class="font-heading rounded-md px-6 py-2.5 text-sm uppercase tracking-wider transition-all {selectedBoat === i ? 'bg-cyan-600 text-white shadow-lg shadow-cyan-500/20' : 'text-slate-400 hover:text-white'}"
					>
						{boat.name}
					</button>
				{/each}
			</div>
		</div>

		<div class="grid gap-8 lg:grid-cols-2 lg:gap-12">
			<!-- Inshore -->
			<div class="reveal">
				<h3 class="font-heading mb-4 flex items-center gap-2 text-xl uppercase tracking-wider text-cyan-400">
					<span class="h-px w-8 bg-cyan-400/50"></span> Inshore
				</h3>
				<div class="space-y-3">
					{#each boats[selectedBoat].inshore as trip}
						<div class="rounded-lg border border-white/5 bg-deep/60 p-4 transition-all hover:border-cyan-500/30">
							<div class="mb-1 flex items-center justify-between">
								<h4 class="font-heading text-lg text-white">{trip.name}</h4>
								<span class="font-heading text-xl text-cyan-400">${trip.price.toLocaleString()}</span>
							</div>
							<p class="text-sm text-slate-400">{trip.desc}</p>
						</div>
					{/each}
				</div>
			</div>

			<!-- Offshore -->
			<div class="reveal">
				<h3 class="font-heading mb-4 flex items-center gap-2 text-xl uppercase tracking-wider text-cyan-400">
					<span class="h-px w-8 bg-cyan-400/50"></span> Offshore
				</h3>
				<div class="space-y-3">
					{#each boats[selectedBoat].offshore as trip}
						<div class="rounded-lg border border-white/5 bg-deep/60 p-4 transition-all hover:border-cyan-500/30">
							<div class="mb-1 flex items-center justify-between">
								<h4 class="font-heading text-lg text-white">{trip.name}</h4>
								<span class="font-heading text-xl text-cyan-400">${trip.price.toLocaleString()}</span>
							</div>
							<p class="text-sm text-slate-400">{trip.desc}</p>
						</div>
					{/each}
				</div>
			</div>
		</div>

		<div class="reveal mt-10 text-center">
			<p class="text-sm text-slate-400">All trips include captain, crew, fishing tackle, bait, ice, drinks & fruit. Catch & release for all billfish. Custom trips available on request.</p>
			<a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-8 py-3.5 font-semibold text-white transition-all hover:bg-cyan-500 hover:shadow-lg hover:shadow-cyan-500/25">
				<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-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
				Book Your Trip
			</a>
		</div>
	</div>
</section>

<!-- GALLERY -->
<section id="gallery" class="py-14 sm:py-24">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="reveal mb-10 text-center sm:mb-16">
			<p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Photo Gallery</p>
			<h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">The Catches</h2>
		</div>

		<!-- Mobile: 2-col grid with show more -->
		<div class="md:hidden">
			<div class="grid grid-cols-2 gap-2">
				{#each galleryExpanded ? gallery : gallery.slice(0, 8) as item}
					<div class="overflow-hidden rounded-lg">
						{#if item.type === 'video'}
							<video src={item.src} class="h-full w-full rounded-lg object-cover" preload="metadata" controls playsinline></video>
						{:else}
							<button class="w-full" onclick={() => openLightbox(item.src)}>
								<img src={item.src} alt={item.caption} class="w-full rounded-lg" loading="lazy" />
							</button>
						{/if}
					</div>
				{/each}
			</div>
			{#if !galleryExpanded}
				<div class="mt-4 text-center">
					<button onclick={() => (galleryExpanded = true)} class="inline-flex items-center gap-2 rounded-lg border border-cyan-500/40 px-6 py-2.5 text-sm font-medium text-cyan-300 transition-all hover:border-cyan-400 hover:bg-cyan-500/10">
						Show More
						<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7" /></svg>
					</button>
				</div>
			{/if}
		</div>

		<!-- Desktop: masonry grid -->
		<div class="hidden gap-3 md:block md:columns-3 lg:columns-4">
			{#each gallery as item}
				<div class="gallery-item mb-3">
					{#if item.type === 'video'}
						<video
							src={item.src}
							class="w-full rounded-lg"
							preload="metadata"
							muted
							loop
							playsinline
							onmouseenter={(e) => e.currentTarget.play()}
							onmouseleave={(e) => {
								e.currentTarget.pause();
								e.currentTarget.currentTime = 0;
							}}
						></video>
					{:else}
						<button class="w-full" onclick={() => openLightbox(item.src)}>
							<img src={item.src} alt={item.caption} class="w-full" loading="lazy" />
						</button>
					{/if}
				</div>
			{/each}
		</div>
	</div>
</section>

<!-- CONTACT -->
<section id="contact" class="bg-navy py-14 sm:py-24">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="reveal mb-10 text-center sm:mb-16">
			<p class="font-heading mb-3 text-sm uppercase tracking-widest text-cyan-400">Get in Touch</p>
			<h2 class="font-heading text-3xl font-bold uppercase tracking-wide text-white sm:text-4xl lg:text-5xl">Book Your Trip</h2>
			<p class="mx-auto mt-4 max-w-lg text-slate-400">Ready for the fishing trip of a lifetime? Reach out on WhatsApp for the fastest response — we'll get you on the water.</p>
		</div>

		<div class="reveal mb-10 grid gap-4 sm:grid-cols-3">
			<!-- WhatsApp -->
			<a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="group flex flex-col items-center gap-3 rounded-xl border border-white/5 bg-deep/60 p-6 transition-all hover:border-green-500/30">
				<div class="flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 transition-colors group-hover:bg-green-500/20">
					<svg class="h-7 w-7 text-green-400" 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-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
				</div>
				<span class="font-medium text-white">WhatsApp</span>
				<span class="text-sm text-slate-400">+506 8963-0901</span>
			</a>

			<!-- Phone -->
			<a href={PHONE} class="group flex flex-col items-center gap-3 rounded-xl border border-white/5 bg-deep/60 p-6 transition-all hover:border-cyan-500/30">
				<div class="flex h-14 w-14 items-center justify-center rounded-full bg-cyan-500/10 transition-colors group-hover:bg-cyan-500/20">
					<svg class="h-7 w-7 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path 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>
				<span class="font-medium text-white">Call Us</span>
				<span class="text-sm text-slate-400">+506 8963-0901</span>
			</a>

			<!-- Location -->
			<a href="https://maps.google.com/?q=Marina+Pez+Vela+Quepos+Costa+Rica" target="_blank" rel="noopener noreferrer" class="group flex flex-col items-center gap-3 rounded-xl border border-white/5 bg-deep/60 p-6 transition-all hover:border-cyan-500/30">
				<div class="flex h-14 w-14 items-center justify-center rounded-full bg-cyan-500/10 transition-colors group-hover:bg-cyan-500/20">
					<svg class="h-7 w-7 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
				</div>
				<span class="font-medium text-white">Location</span>
				<span class="text-center text-sm text-slate-400">Marina Pez Vela, Quepos</span>
			</a>
		</div>

		<!-- Map -->
		<div class="reveal overflow-hidden rounded-xl border border-white/5">
			<iframe
				src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3932.8!2d-84.16579!3d9.40833!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa17c8e66e5e3e7%3A0x4077b0e5e9d55b15!2sMarina%20Pez%20Vela!5e0!3m2!1sen!2scr!4v1711584000000"
				width="100%"
				height="350"
				style="border:0"
				allowfullscreen=""
				loading="lazy"
				referrerpolicy="no-referrer-when-downgrade"
				title="Marina Pez Vela, Quepos"
			></iframe>
		</div>
	</div>
</section>

<!-- FOOTER -->
<footer class="border-t border-white/5 bg-[#050d1a] py-10">
	<div class="mx-auto max-w-7xl px-4 sm:px-6">
		<div class="flex flex-col items-center justify-between gap-6 text-center sm:flex-row sm:text-left">
			<div>
				<p class="font-heading text-2xl font-bold tracking-wider text-white">GUNSLINGER</p>
				<p class="mt-1 text-sm text-slate-500">Sportfishing CR · Quepos, Costa Rica</p>
			</div>
			<div class="flex items-center gap-4">
				<a href={WHATSAPP} target="_blank" rel="noopener noreferrer" class="text-slate-400 transition-colors hover:text-green-400" 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-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
				</a>
				<a href={PHONE} class="text-slate-400 transition-colors hover:text-cyan-400" aria-label="Phone">
					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path 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>
				</a>
			</div>
		</div>
		<div class="mt-8 flex flex-col items-center justify-between gap-2 border-t border-white/5 pt-6 text-xs text-slate-600 sm:flex-row">
			<p>&copy; {new Date().getFullYear()} Gunslinger Sportfishing CR. All rights reserved.</p>
			<a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-slate-600 transition-colors hover:text-slate-400">Made by digitalmar.dev</a>
		</div>
	</div>
</footer>

<!-- WhatsApp FAB -->
<a
	href={WHATSAPP}
	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-green-500 shadow-lg shadow-green-500/30 transition-all hover:scale-110 hover:bg-green-400"
	aria-label="WhatsApp"
>
	<svg class="h-7 w-7 text-white" 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-.347z" /><path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.67-1.388A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.31-.726-5.993-1.957l-.418-.31-2.79.83.746-2.723-.34-.54A9.96 9.96 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" /></svg>
</a>

<!-- LIGHTBOX -->
{#if lightboxOpen}
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/95" onclick={closeLightbox} onkeydown={() => {}}>
		<button class="absolute right-4 top-4 p-2 text-white/70 hover:text-white" onclick={closeLightbox}>
			<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12" /></svg>
		</button>

		<button
			class="absolute left-2 top-1/2 -translate-y-1/2 p-2 text-white/70 hover:text-white sm:left-4"
			onclick={(e) => {
				e.stopPropagation();
				prevImage();
			}}
		>
			<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7" /></svg>
		</button>

		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
		<img
			src={imageGallery[lightboxIndex].src}
			alt={imageGallery[lightboxIndex].caption}
			class="max-h-[85vh] max-w-[90vw] rounded-lg object-contain"
			onclick={(e) => e.stopPropagation()}
			onkeydown={() => {}}
		/>

		<button
			class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-white/70 hover:text-white sm:right-4"
			onclick={(e) => {
				e.stopPropagation();
				nextImage();
			}}
		>
			<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7" /></svg>
		</button>

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