<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corpus Christi Surf Lessons | Professional Surf Coaching</title>
<meta name="description" content="Learn to surf in Corpus Christi, Texas! $70/hour professional surf instruction at Packery Channel and JP Luby. Live surf conditions, online booking, and digital waivers.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
oceanBlue: '#00779b',
surfTeal: '#00b4d8',
sandGold: '#f4a261',
darkEbony: '#1d3557'
}
}
}
}
</script>
</head>
<body class="bg-slate-50 text-gray-800 font-sans antialiased">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer ||;
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX'); // Replace with your actual GA4 ID
</script>
<header class="fixed w-full top-0 z-50 bg-white/95 backdrop-blur-md shadow-sm transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<a href="#" class="flex items-center space-x-2">
<i class="fa-solid fa-water text-surfTeal text-3xl animate-pulse"></i>
<span class="text-xl font-bold tracking-tight text-darkEbony">
CC <span class="text-oceanBlue">Surf Lessons</span>
</span>
</a>
<nav class="hidden md:flex space-x-8 font-semibold text-darkEbony">
<a href="#forecast" class="hover:text-surfTeal transition-colors">Surf Forecast</a>
<a href="#lessons" class="hover:text-surfTeal transition-colors">Lessons ($70/hr)</a>
<a href="#media" class="hover:text-surfTeal transition-colors">Photos & Videos</a>
<a href="#reviews" class="hover:text-surfTeal transition-colors">Client Reviews</a>
<a href="#booking" class="hover:text-surfTeal transition-colors">Book Now</a>
<a href="#waiver" onclick="openWaiverModal()" class="hover:text-surfTeal transition-colors">Sign Waiver</a>
</nav>
<div class="hidden md:flex items-center space-x-4">
<a href="#booking" class="bg-oceanBlue hover:bg-surfTeal text-white px-6 py-2.5 rounded-full font-bold shadow-md hover:shadow-lg transition-all">
Book Lesson
</a>
</div>
<button onclick="toggleMobileMenu()" class="md:hidden text-darkEbony hover:text-surfTeal focus:outline-none">
<i class="fa-solid fa-bars text-2xl" id="menu-icon"></i>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 px-4 pt-2 pb-6 space-y-3 shadow-inner">
<a href="#forecast" onclick="toggleMobileMenu()" class="block font-semibold py-2 text-darkEbony">Surf Forecast</a>
<a href="#lessons" onclick="toggleMobileMenu()" class="block font-semibold py-2 text-darkEbony">Lessons ($70/hr)</a>
<a href="#media" onclick="toggleMobileMenu()" class="block font-semibold py-2 text-darkEbony">Photos & Videos</a>
<a href="#reviews" onclick="toggleMobileMenu()" class="block font-semibold py-2 text-darkEbony">Client Reviews</a>
<a href="#booking" onclick="toggleMobileMenu()" class="block font-semibold py-2 text-darkEbony">Book Now</a>
<a href="#waiver" onclick="toggleMobileMenu(); openWaiverModal()" class="block font-semibold py-2 text-darkEbony">Sign Liability Waiver</a>
<a href="#booking" onclick="toggleMobileMenu()" class="w-full text-center block bg-oceanBlue text-white py-3 rounded-full font-bold">Book a Class</a>
</div>
</header>
<section class="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden bg-darkEbony">
<div class="absolute inset-0 z-0 opacity-40">
<video class="w-full h-full object-cover" autoplay loop muted playsinline poster="https://images.unsplash.com/photo-1502680390469-be75c86b636f?q=80&w=1600">
<source src="https://assets.mixkit.co/videos/preview/mixkit-surfer-riding-a-wave-in-slow-motion-34335-large.mp4" type="video/mp4">
</video>
</div>
<div class="relative z-10 max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 text-white">
<span class="inline-block bg-surfTeal/20 border border-surfTeal/40 text-surfTeal font-bold px-4 py-1.5 rounded-full text-sm uppercase tracking-wider mb-6">
Corpus Christi's Premier Surf School
</span>
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6 leading-tight">
Ride the Texas Swell for Only <span class="text-transparent bg-clip-text bg-gradient-to-r from-surfTeal to-sandGold">$70 per Hour</span>
</h1>
<p class="text-lg sm:text-xl text-gray-200 mb-10 max-w-2xl mx-auto">
Step onto the sand at Packery Channel, JP Luby, or Bob Hall Pier. No hidden fees. Fully-equipped boards, wet shirts, and custom-tailored safety instruction included.
</p>
<div class="flex flex-col sm:flex-row justify-center items-center gap-4">
<a href="#booking" class="w-full sm:w-auto bg-gradient-to-r from-oceanBlue to-surfTeal text-white px-8 py-4 rounded-full font-bold text-lg shadow-lg hover:scale-105 transition-all">
View Lesson Calendar
</a>
<button onclick="openWaiverModal()" class="w-full sm:w-auto bg-white/10 hover:bg-white/20 border border-white/30 text-white px-8 py-4 rounded-full font-bold text-lg backdrop-blur-sm transition-all">
Sign Pre-Arrival Waiver
</button>
</div>
</div>
</section>
<section id="forecast" class="py-16 bg-gradient-to-r from-slate-900 to-darkEbony text-white relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-between border-b border-white/10 pb-8 mb-8">
<div>
<h2 class="text-3xl font-extrabold tracking-tight mb-2">Live Coastal Conditions</h2>
<p class="text-slate-400">Real-time weather and surf forecast for Packery Channel Jetty (27.80°N, 97.39°W)</p>
</div>
<div class="mt-4 md:mt-0 flex items-center space-x-2 bg-surfTeal/10 border border-surfTeal/30 px-4 py-2 rounded-xl text-surfTeal text-sm font-bold">
<i class="fa-solid fa-satellite-dish animate-pulse"></i>
<span>Connected to Open-Meteo Marine Systems</span>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
<div class="bg-white/5 border border-white/10 p-6 rounded-2xl text-center">
<i class="fa-solid fa-temperature-half text-surfTeal text-2xl mb-2"></i>
<p class="text-xs text-slate-400 uppercase tracking-wider">Air Temp</p>
<p id="live-temp" class="text-2xl font-bold mt-1">Loading...</p>
</div>
<div class="bg-white/5 border border-white/10 p-6 rounded-2xl text-center">
<i class="fa-solid fa-wind text-surfTeal text-2xl mb-2"></i>
<p class="text-xs text-slate-400 uppercase tracking-wider">Wind Speed</p>
<p id="live-wind" class="text-2xl font-bold mt-1">Loading...</p>
</div>
<div class="bg-white/5 border border-white/10 p-6 rounded-2xl text-center">
<i class="fa-solid fa-water text-surfTeal text-2xl mb-2"></i>
<p class="text-xs text-slate-400 uppercase tracking-wider">Wave Height</p>
<p id="live-wave-height" class="text-2xl font-bold mt-1">Loading...</p>
</div>
<div class="bg-white/5 border border-white/10 p-6 rounded-2xl text-center">
<i class="fa-solid fa-clock text-surfTeal text-2xl mb-2"></i>
<p class="text-xs text-slate-400 uppercase tracking-wider">Swell Period</p>
<p id="live-wave-period" class="text-2xl font-bold mt-1">Loading...</p>
</div>
<div class="bg-white/5 border border-white/10 p-6 rounded-2xl text-center col-span-2 md:col-span-1">
<i class="fa-solid fa-compass text-surfTeal text-2xl mb-2"></i>
<p class="text-xs text-slate-400 uppercase tracking-wider">Wave Direction</p>
<p id="live-wave-dir" class="text-2xl font-bold mt-1">Loading...</p>
</div>
</div>
</div>
</section>
<section id="lessons" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl sm:text-4xl font-extrabold text-darkEbony mb-4">Our Simple, Hourly Pricing</h2>
<p class="text-lg text-gray-600">No complex packages or tiered confusion. Every lesson is priced at a flat rate of <span class="text-oceanBlue font-bold">$70 per hour</span>, including all premium gear.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-slate-50 rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300">
<div class="h-60 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1502680390469-be75c86b636f?q=80&w=600" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500" alt="Private Surfing Instruction">
<span class="absolute top-4 right-4 bg-darkEbony text-white font-bold px-3 py-1.5 rounded-lg text-sm">Focused Progress</span>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-darkEbony mb-2">1-Hour Private Lesson</h3>
<p class="text-gray-600 mb-6">Undivided individual coaching designed for rapid progression. Perfect for checking techniques, pop-up mechanics, or building water comfort.</p>
<div class="flex items-center justify-between border-t border-gray-200 pt-4">
<span class="text-sm text-gray-500"><i class="fa-regular fa-clock mr-1"></i> 60 Minutes</span>
<span class="text-2xl font-extrabold text-oceanBlue">$70</span>
</div>
</div>
</div>
<div class="bg-slate-50 rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300">
<div class="h-60 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1518156677180-95a2893f3e9f?q=80&w=600" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500" alt="Group Surfing Lessons">
<span class="absolute top-4 right-4 bg-surfTeal text-white font-bold px-3 py-1.5 rounded-lg text-sm">Most Popular</span>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-darkEbony mb-2">2-Hour Private Surf</h3>
<p class="text-gray-600 mb-6">Our standard learning block. Gives you time on the beach to cover water dynamics and plenty of time out on the waves catching breaks.</p>
<div class="flex items-center justify-between border-t border-gray-200 pt-4">
<span class="text-sm text-gray-500"><i class="fa-regular fa-clock mr-1"></i> 120 Minutes</span>
<span class="text-2xl font-extrabold text-oceanBlue">$140</span>
</div>
</div>
</div>
<div class="bg-slate-50 rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300">
<div class="h-60 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=600" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500" alt="Small Group Surfing Lesson">
<span class="absolute top-4 right-4 bg-sandGold text-white font-bold px-3 py-1.5 rounded-lg text-sm">Perfect for Friends</span>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold text-darkEbony mb-2">2-Hour Group Lesson</h3>
<p class="text-gray-600 mb-6">Gather your group or family. Ideal for small, focused party sizes up to 5 surfers to ensure direct coaching and safety ratios are never compromised.</p>
<div class="flex items-center justify-between border-t border-gray-200 pt-4">
<span class="text-sm text-gray-500"><i class="fa-regular fa-user mr-1"></i> Per Person Rate</span>
<span class="text-2xl font-extrabold text-oceanBlue">$140 <span class="text-xs text-gray-500">($70/hr)</span></span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="media" class="py-24 bg-slate-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl sm:text-4xl font-extrabold mb-4">Capturing Texas Surfing</h2>
<p class="text-lg text-slate-400">See our students and elite coaches carving the classic beach sandbars at Packery Channel and JP Luby Surf Park.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-16">
<div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-slate-800 shadow-md">
<img src="https://images.unsplash.com/photo-1502680390469-be75c86b636f?q=80&w=800" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="Surfer riding local swell">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-100 flex items-end p-6">
<p class="text-md font-bold text-white">Catching clean swells at Packery Channel</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-slate-800 shadow-md">
<img src="https://images.unsplash.com/photo-1518156677180-95a2893f3e9f?q=80&w=800" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="Sands of Corpus Christi">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-100 flex items-end p-6">
<p class="text-md font-bold text-white">Shifting coastal peaks at JP Luby Surf Park</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-slate-800 shadow-md">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=800" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="Surf instruction setup on Padre Island">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-100 flex items-end p-6">
<p class="text-md font-bold text-white">Soft-top lineups ready for the sand sessions</p>
</div>
</div>
</div>
<div class="border-t border-white/10 pt-16">
<h3 class="text-2xl font-bold mb-8 text-center sm:text-left"><i class="fa-solid fa-circle-play text-surfTeal mr-2"></i>Watch Local Surf Sessions</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white/5 p-4 rounded-3xl border border-white/10 shadow-lg">
<div class="aspect-video rounded-2xl overflow-hidden shadow-inner">
<iframe class="w-full h-full" src="https://www.youtube.com/embed/0JzsLeohDv4" title="Packery Channel Surf Ep3" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p class="mt-4 text-sm font-bold text-slate-300">Packery Channel Jetty Surf Session (Noah Calk | Walf Studios)</p>
</div>
<div class="bg-white/5 p-4 rounded-3xl border border-white/10 shadow-lg">
<div class="aspect-video rounded-2xl overflow-hidden shadow-inner">
<iframe class="w-full h-full" src="https://www.youtube.com/embed/bWeI1tYrusE" title="Surfers of Corpus Ep4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p class="mt-4 text-sm font-bold text-slate-300">Surfing North Packery Channel (Walf Studios Episode 4)</p>
</div>
</div>
</div>
</div>
</section>
<section id="reviews" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl sm:text-4xl font-extrabold text-darkEbony mb-4">What Our Surfers Say</h2>
<div class="flex items-center justify-center space-x-2 mb-2">
<span id="avg-stars" class="text-yellow-500 text-2xl font-bold flex"></span>
<span id="rating-text" class="text-lg font-bold text-darkEbony">4.9★ Average (based on 3 verified sessions)</span>
</div>
<p class="text-gray-500">Read honest feedback or leave a rating of your last lesson below!</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
<div class="bg-slate-50 p-8 rounded-3xl border border-gray-100 h-fit">
<h3 class="text-xl font-bold text-darkEbony mb-4">Write a Review</h3>
<form id="add-review-form" onsubmit="submitReview(event)" class="space-y-4">
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Your Full Name</label>
<input type="text" id="review-name" required placeholder="John Doe" class="w-full bg-white border border-gray-200 p-3 rounded-xl focus:ring-2 focus:ring-oceanBlue outline-none">
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Lesson Rating</label>
<select id="review-rating" class="w-full bg-white border border-gray-200 p-3 rounded-xl focus:ring-2 focus:ring-oceanBlue outline-none">
<option value="5">5 Stars (Excellent)</option>
<option value="4">4 Stars (Good)</option>
<option value="3">3 Stars (Average)</option>
<option value="2">2 Stars (Fair)</option>
<option value="1">1 Star (Poor)</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Review Comments</label>
<textarea id="review-comment" required rows="3" placeholder="How was your surf coach? Did you catch any waves?" class="w-full bg-white border border-gray-200 p-3 rounded-xl focus:ring-2 focus:ring-oceanBlue outline-none"></textarea>
</div>
<button type="submit" class="w-full bg-oceanBlue hover:bg-surfTeal text-white font-bold py-3 rounded-xl transition-all shadow-md">
Post Lesson Review
</button>
</form>
</div>
<div class="lg:col-span-2 space-y-6" id="reviews-feed">
</div>
</div>
</div>
</section>
<section id="booking" class="py-24 bg-slate-50">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl sm:text-4xl font-extrabold text-darkEbony mb-4">Secure Your Session</h2>
<p class="text-lg text-gray-600">Select your date, book your slot, and secure reservation deposits instantly under the secure portal.</p>
</div>
<div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
<div class="p-6 sm:p-10">
<div id="booking-widget-container" class="text-center py-12">
<div class="max-w-md mx-auto">
<i class="fa-solid fa-calendar-days text-surfTeal text-5xl mb-4 animate-bounce"></i>
<h3 class="text-2xl font-bold text-darkEbony mb-2">Live Real-Time Reservation Engine</h3>
<p class="text-gray-500 mb-8">Select your lesson, check real-time coach availability, and secure booking deposits.</p>
<form id="booking-sim-form" onsubmit="handleBookingSimulation(event)" class="space-y-4 text-left">
<div>
<label class="block text-sm font-bold text-gray-700 mb-1">Select Activity</label>
<select id="sim-activity" class="w-full bg-slate-100 border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-oceanBlue outline-none">
<option value="1-hr-private">1-Hour Private Surf ($70)</option>
<option value="2-hr-private">2-Hour Private Surf ($140)</option>
<option value="2-hr-group">2-Hour Group Lesson ($140)</option>
</select>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-bold text-gray-700 mb-1">Lesson Date</label>
<input type="date" id="sim-date" required class="w-full bg-slate-100 border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-oceanBlue outline-none">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-1">Number of Surfers</label>
<input type="number" id="sim-count" min="1" max="5" value="1" class="w-full bg-slate-100 border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-oceanBlue outline-none">
</div>
</div>
<div class="bg-blue-50 border-l-4 border-oceanBlue p-4 rounded text-sm text-oceanBlue flex items-start space-x-2">
<i class="fa-solid fa-circle-info mt-0.5 animate-pulse"></i>
<span>If conditions or tide forecasts shift safe lesson windows, our system will text reschedule options directly to your cell.</span>
</div>
<button type="submit" class="w-full bg-oceanBlue hover:bg-surfTeal text-white font-bold py-4 rounded-xl transition-all shadow-md hover:shadow-lg">
Process Secure Checkout & Deposit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-to-br from-darkEbony to-slate-900 text-white py-24">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10">
<i class="fa-solid fa-map-location-dot text-surfTeal text-4xl mb-4"></i>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Claim Your Free Surf Break Guide</h2>
<p class="text-lg text-slate-300">Enter your email to download our local guide detailing Corpus Christi sandbars, wave breaks, tides, and weather patterns. Instantly join our VIP loyalty list!</p>
</div>
<form id="crm-capture-form" onsubmit="handleCrmCapture(event)" class="bg-white/5 backdrop-blur-sm p-6 sm:p-10 rounded-3xl border border-white/10 shadow-lg">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
<div class="sm:col-span-1">
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">First Name</label>
<input type="text" id="crm-first-name" required placeholder="Enter first name" class="w-full bg-white/10 border border-white/20 p-3.5 rounded-xl text-white placeholder-slate-400 focus:ring-2 focus:ring-surfTeal outline-none transition-all">
</div>
<div class="sm:col-span-1">
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Email Address</label>
<input type="email" id="crm-email" required placeholder="name@domain.com" class="w-full bg-white/10 border border-white/20 p-3.5 rounded-xl text-white placeholder-slate-400 focus:ring-2 focus:ring-surfTeal outline-none transition-all">
</div>
<div class="sm:col-span-1">
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Interested In</label>
<select id="crm-interest" class="w-full bg-slate-800 border border-white/20 p-3.5 rounded-xl text-white focus:ring-2 focus:ring-surfTeal outline-none transition-all">
<option value="beginner">Beginner Coaching</option>
<option value="intermediate">Intermediate Technique</option>
<option value="weather">Local Forecast Alerts</option>
</select>
</div>
</div>
<div class="flex items-start space-x-3 mb-6">
<input type="checkbox" id="crm-opt-in" checked required class="mt-1 h-4 w-4 rounded bg-white/10 border-white/20 text-surfTeal focus:ring-surfTeal">
<label for="crm-opt-in" class="text-xs text-slate-400">Yes! I want to receive beach tide reports, safety bulletins, and priority booking codes. I can opt-out at any time.</label>
</div>
<button type="submit" class="w-full bg-surfTeal hover:bg-white hover:text-darkEbony text-white font-bold py-4 rounded-xl transition-all shadow-md">
Claim Free Guide & Join Client List
</button>
</form>
<div id="crm-success" class="hidden text-center bg-teal-500/20 border border-teal-500/40 p-6 rounded-2xl mt-4">
<i class="fa-solid fa-circle-check text-teal-400 text-3xl mb-2"></i>
<h4 class="text-xl font-bold">Inbox Dispatch Triggered!</h4>
<p class="text-slate-300 mt-1">We've dispatched your Tide & Surf Break guide. Your contact card has been synced with our automated marketing list.</p>
</div>
</div>
</section>
<footer class="bg-slate-950 text-slate-400 py-12 border-t border-slate-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center sm:text-left">
<div class="flex flex-col sm:flex-row justify-between items-center gap-6 mb-8">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-water text-surfTeal text-3xl"></i>
<span class="text-xl font-bold tracking-tight text-white">
CC <span class="text-oceanBlue">Surf Lessons</span>
</span>
</div>
<div class="flex space-x-6 text-xl">
<a href="https://instagram.com" class="hover:text-surfTeal transition-colors"><i class="fa-brands fa-instagram"></i></a>
<a href="https://facebook.com" class="hover:text-surfTeal transition-colors"><i class="fa-brands fa-facebook"></i></a>
<a href="https://youtube.com" class="hover:text-surfTeal transition-colors"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div class="border-t border-slate-900 pt-8 flex flex-col sm:flex-row justify-between text-xs gap-4">
<p>© 2026 Corpus Christi Surf Lessons. All rights reserved.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-white transition-colors">Terms of Service</a>
<a href="#booking" class="hover:text-white transition-colors">Cancellation Policy</a>
</div>
</div>
</div>
</footer>
<div id="waiver-modal" class="fixed inset-0 z-50 hidden bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
<div class="bg-white w-full max-w-lg rounded-3xl overflow-hidden shadow-2xl border border-gray-100 flex flex-col max-h-[90vh]">
<div class="bg-gradient-to-r from-darkEbony to-oceanBlue text-white p-6 flex justify-between items-center shrink-0">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-file-signature text-2xl text-surfTeal"></i>
<h3 class="text-xl font-bold">On-Site Liability Waiver</h3>
</div>
<button onclick="closeWaiverModal()" class="text-white/60 hover:text-white focus:outline-none">
<i class="fa-solid fa-xmark text-2xl"></i>
</button>
</div>
<div class="p-6 overflow-y-auto space-y-6">
<p class="text-sm text-gray-500">Sign your digital waiver pre-arrival to skip beachside clipboard paperwork and secure your slot instantly.</p>
<form id="waiver-form" onsubmit="handleWaiverSubmission(event)" class="space-y-4">
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Participant Full Name</label>
<input type="text" id="waiver-name" required placeholder="John Doe" class="w-full bg-slate-50 border border-gray-200 p-3 rounded-xl focus:ring-2 focus:ring-oceanBlue outline-none">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Date of Birth</label>
<input type="date" id="waiver-dob" required class="w-full bg-slate-50 border border-gray-200 p-3 rounded-xl focus:ring-2 focus:ring-oceanBlue outline-none">
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Mobile Phone</label>
<input type="tel" id="waiver-phone" required placeholder="361-555-0199" class="w-full bg-slate-50 border border-gray-200 p-3 rounded-xl focus:ring-2 focus:ring-oceanBlue outline-none">
</div>
</div>
<div>
<label class="block text-xs font-bold text-gray-700 uppercase mb-1">Email Address</label>
<input type="email" id="waiver-email" required placeholder="john@doe.com" class="w-full bg-slate-50 border border-gray-200 p-3 rounded-xl focus:ring-2 focus:ring-oceanBlue outline-none">
</div>
<div class="bg-slate-50 border border-gray-100 p-4 rounded-xl text-xs text-gray-600 max-h-40 overflow-y-auto space-y-3 font-mono">
<p class="font-bold">SECTION 1: ASSUMPTION OF RISK</p>
<p>I acknowledge that surfing and surf instruction involve inherent risks, including but not limited to: strong currents, shore breaks, rapid tide fluctuations, collisions with other watercraft or marine organisms, and weather patterns common along the Gulf Coast of Texas.</p>
<p class="font-bold">SECTION 2: OPEN WATER SAFETY</p>
<p>I certify that I can swim unassisted in open ocean water and have no physical or medical conditions that would impede safe participation in surf lessons.</p>
</div>
<div class="border border-dashed border-gray-300 bg-slate-50 rounded-xl p-4 text-center">
<label class="block text-xs font-bold text-gray-700 uppercase mb-2">Draw Signature or Type Legal Name</label>
<input type="text" id="waiver-signature" required placeholder="Type 'John Doe' to authorize" class="w-full text-center bg-white border border-gray-200 p-3 rounded-xl font-mono text-lg italic outline-none focus:ring-2 focus:ring-oceanBlue">
</div>
<button type="submit" class="w-full bg-oceanBlue hover:bg-surfTeal text-white font-bold py-4 rounded-xl transition-all shadow-md">
Authorize & File Waiver Card
</button>
</form>
</div>
</div>
</div>
<script>
// Default Review Database (Stores locally so user reviews update instantly)
const defaultReviews =;
// On Page Load
window.addEventListener('DOMContentLoaded', () => {
fetchWeatherAndSurf();
initializeReviewList();
});
// Toggle mobile nav drawer
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
const icon = document.getElementById('menu-icon');
menu.classList.toggle('hidden');
if (menu.classList.contains('hidden')) {
icon.className = "fa-solid fa-bars text-2xl";
} else {
icon.className = "fa-solid fa-xmark text-2xl";
}
}
// Waiver modal operations
function openWaiverModal() {
document.getElementById('waiver-modal').classList.remove('hidden');
document.body.classList.add('overflow-hidden');
}
function closeWaiverModal() {
document.getElementById('waiver-modal').classList.add('hidden');
document.body.classList.remove('overflow-hidden');
}
// FETCH REAL-TIME WEATHER AND SURF SWELL DATA (Open-Meteo)
async function fetchWeatherAndSurf() {
try {
// Call Open-Meteo Weather API for air conditions
const weatherUrl = "https://api.open-meteo.com/v1/forecast?latitude=27.8006&longitude=-97.3964¤t=temperature_2m,wind_speed_10m&temperature_unit=fahrenheit&wind_speed_unit=mph";
const weatherRes = await fetch(weatherUrl);
// Call Open-Meteo Marine Forecast API for surf & swell data
const marineUrl = "https://marine-api.open-meteo.com/v1/marine?latitude=27.8006&longitude=-97.3964¤t=wave_height,wave_period,wave_direction";
const marineRes = await fetch(marineUrl);
if (weatherRes.ok && marineRes.ok) {
const weatherData = await weatherRes.json();
const marineData = await marineRes.json();
// Update Weather DOM Elements
document.getElementById('live-temp').innerText = `${Math.round(weatherData.current.temperature_2m)}°F`;
document.getElementById('live-wind').innerText = `${Math.round(weatherData.current.wind_speed_10m)} mph`;
// Update Surf Swell DOM Elements (converting wave height from meters to feet)
const waveHtFeet = (marineData.current.wave_height * 3.28084).toFixed(1);
document.getElementById('live-wave-height').innerText = `${waveHtFeet} ft`;
document.getElementById('live-wave-period').innerText = `${Math.round(marineData.current.wave_period)}s`;
document.getElementById('live-wave-dir').innerText = `${marineData.current.wave_direction}°`;
} else {
useFallbackConditions();
}
} catch (err) {
console.error("API Fetch Error. Loading Fallback Corpus Christi conditions.", err);
useFallbackConditions();
}
}
// Fallback defaults if the weather server is temporarily unreachable
function useFallbackConditions() {
document.getElementById('live-temp').innerText = "84°F";
document.getElementById('live-wind').innerText = "12 mph SE";
document.getElementById('live-wave-height').innerText = "3.2 ft";
document.getElementById('live-wave-period').innerText = "7s";
document.getElementById('live-wave-dir').innerText = "110° (ESE)";
}
// REVIEWS & RATING ENGINE CONTROLLER
function initializeReviewList() {
if (!localStorage.getItem('cc_surf_reviews')) {
localStorage.setItem('cc_surf_reviews', JSON.stringify(defaultReviews));
}
renderReviews();
}
function renderReviews() {
const reviews = JSON.parse(localStorage.getItem('cc_surf_reviews'));
const feed = document.getElementById('reviews-feed');
feed.innerHTML = '';
let totalRating = 0;
reviews.forEach(item => {
totalRating += parseInt(item.rating);
// Construct star rating layout
let starsHTML = '';
for (let i = 1; i <= 5; i++) {
if (i <= item.rating) {
starsHTML += `<i class="fa-solid fa-star text-yellow-400 text-sm"></i>`;
} else {
starsHTML += `<i class="fa-regular fa-star text-gray-300 text-sm"></i>`;
}
}
const card = `
<div class="bg-slate-50 border border-gray-100 p-6 rounded-2xl shadow-sm space-y-3">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-darkEbony text-lg">${item.name}</h4>
<span class="text-xs text-gray-400">${item.date || 'Verified Student'}</span>
</div>
<div class="flex space-x-1">${starsHTML}</div>
</div>
<p class="text-gray-600 text-sm leading-relaxed">"${item.comment}"</p>
</div>
`;
feed.insertAdjacentHTML('afterbegin', card);
});
// Calculate and display live averages
const avg = (totalRating / reviews.length).toFixed(1);
let avgStarsHTML = '';
for (let i = 1; i <= 5; i++) {
if (i <= Math.round(avg)) {
avgStarsHTML += `<i class="fa-solid fa-star text-yellow-400"></i>`;
} else {
avgStarsHTML += `<i class="fa-regular fa-star text-gray-300"></i>`;
}
}
document.getElementById('avg-stars').innerHTML = avgStarsHTML;
document.getElementById('rating-text').innerText = `${avg}★ Average (based on ${reviews.length} verified sessions)`;
}
function submitReview(event) {
event.preventDefault();
const name = document.getElementById('review-name').value;
const rating = document.getElementById('review-rating').value;
const comment = document.getElementById('review-comment').value;
const reviews = JSON.parse(localStorage.getItem('cc_surf_reviews'));
reviews.push({
name: name,
rating: parseInt(rating),
comment: comment,
date: "Today"
});
localStorage.setItem('cc_surf_reviews', JSON.stringify(reviews));
renderReviews();
// Clear input fields
document.getElementById('add-review-form').reset();
alert("Thank you for your rating! Your review has been added to our live Corpus Christi Surf Lessons client dashboard.");
}
// SIMULATE CART & DEPOSIT CHECKOUT FOR $70/HOUR
function handleBookingSimulation(event) {
event.preventDefault();
const activity = document.getElementById('sim-activity').value;
const date = document.getElementById('sim-date').value;
const count = document.getElementById('sim-count').value;
// Map hours based on selected activity type to keep pricing uniform
let totalCost = 0;
let hourlyRate = 70;
if (activity === '1-hr-private') totalCost = 1 * hourlyRate * count;
if (activity === '2-hr-private') totalCost = 2 * hourlyRate * count;
if (activity === '2-hr-group') totalCost = 2 * hourlyRate * count;
gtag('event', 'begin_checkout', {
'items': [{
'item_id': activity,
'item_name': activity + '_surf_lesson',
'quantity': parseInt(count),
'price': totalCost / count
}],
'checkout_date': date
});
alert(`Simulating Secure Checkout Redirect!\n\nProcessing booking at $70/Hour for ${count} surfer(s) on ${date}.\n\nTotal Due: $${totalCost}.00\nDeposit Required: $35.00 via secure Stripe card processing.`);
}
// CRM CAPTURE (SYNCS LEADS)
function handleCrmCapture(event) {
event.preventDefault();
const interest = document.getElementById('crm-interest').value;
gtag('event', 'lead_generation', {
'lead_source': 'surf_break_guide_download',
'interest_tag': interest
});
document.getElementById('crm-capture-form').classList.add('hidden');
document.getElementById('crm-success').classList.remove('hidden');
}
// PRE-ARRIVAL DIGITAL LIABILITY WAIVER SUBMIT
function handleWaiverSubmission(event) {
event.preventDefault();
const name = document.getElementById('waiver-name').value;
const signature = document.getElementById('waiver-signature').value;
gtag('event', 'waiver_signed', {
'participant_name': name,
'signed_as': signature
});
alert(`Waiver successfully signed as: "${signature}". This file has been legally timestamped and securely associated with the corpuschristisurflessons.com client list.`);
closeWaiverModal();
document.getElementById('waiver-form').reset();
}
</script>
</body>
</html>