'use client';
import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import Button from '../ui/Button';
export default function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
return (
{/* Desktop Navigation */}
{/* Mobile Menu Button */}
{/* Mobile Navigation */}
);
}
'use client';
import React, { useState } from 'react';
import Button from '../ui/Button';
interface BookingFormProps {
className?: string;
}
export default function BookingForm({ className = '' }: BookingFormProps) {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
date: '',
time: '',
duration: '1',
jetSkiCount: '1',
message: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const [error, setError] = useState('');
const handleChange = (e: React.ChangeEvent) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
setError('');
try {
// In a real application, this would be an API call
// For demo purposes, we'll simulate a successful submission
await new Promise(resolve => setTimeout(resolve, 1000));
setIsSuccess(true);
setFormData({
name: '',
email: '',
phone: '',
date: '',
time: '',
duration: '1',
jetSkiCount: '1',
message: ''
});
} catch (err) {
setError('There was an error submitting your booking. Please try again.');
} finally {
setIsSubmitting(false);
}
};
// Get tomorrow's date in YYYY-MM-DD format for min date attribute
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
const minDate = tomorrow.toISOString().split('T')[0];
// Get date 3 months from now for max date attribute
const maxDate = new Date();
maxDate.setMonth(maxDate.getMonth() + 3);
const maxDateStr = maxDate.toISOString().split('T')[0];
return (
) : (
)}
);
}
{/* Desktop Navigation */}
{/* Mobile Menu Button */}
setIsMenuOpen(false)}
>
Home
setIsMenuOpen(false)}
>
Rentals
setIsMenuOpen(false)}
>
Gallery
setIsMenuOpen(false)}
>
About Us
setIsMenuOpen(false)}
>
Contact
Book Your Jet Ski Adventure
{isSuccess ? (Your booking request has been submitted successfully! We'll contact you shortly to confirm your reservation.