# Funseaker Yachting - LLM Documentation

## Project Overview
Funseaker Yachting is a luxury yacht charter company website built with Astro, featuring multilingual support (English/French), database-driven content, and dynamic booking functionality.

## Tech Stack
- **Framework**: Astro 5.14.1
- **Database**: Supabase (PostgreSQL)
- **Deployment**: Netlify
- **Styling**: Custom CSS
- **Languages**: TypeScript, SQL

## Project Structure

### Core Directories
- `/src/pages/` - Route pages (English at root, French in `/fr/` subdirectory)
- `/src/components/` - Reusable Astro components organized by feature
- `/src/services/` - Database service layers for data fetching
- `/src/i18n/` - Translation files and utilities
- `/src/lib/` - Supabase client configuration
- `/supabase/migrations/` - Database schema migrations
- `/public/` - Static assets (images, videos, icons)

### Key Files
- `astro.config.mjs` - Astro configuration with Netlify adapter
- `tsconfig.json` - TypeScript configuration
- `.env` - Supabase connection credentials
- `netlify.toml` - Netlify deployment configuration
- `copy-redirects.js` - Build script for URL redirections
- `update-admin-routes.js` - Admin page route updater

## Database Architecture

### Main Tables
- `boats` - Yacht fleet information
- `experience_packages` - Charter experiences and packages
- `locations` - Destinations (St. Martin, Anguilla, St. Barth)
- `water_toys` - Equipment and water sports gear
- `wildlife` - Marine life information by location
- `news` - Blog articles with multilingual support
- `employees` - Crew member profiles
- `reviews` - Customer testimonials
- `faq` - Frequently asked questions
- `food_menu_categories` & `food_menu_items` - Catering menus
- `beverage_menu_categories` & `beverage_menu_items` - Drink menus
- `redirections` - URL redirects management
- `app_settings` - Site-wide configuration

### Row Level Security (RLS)
All tables have RLS enabled with public read policies for authenticated content.

## Key Features

### 1. Multilingual Support
- English (default) and French versions
- Translation files in `/src/i18n/translations/`
- Dynamic route generation for both languages
- Language switcher in navigation

### 2. Dynamic Content Pages
- **Fleet**: `/fleet/[category]/[yacht].astro` - Individual yacht pages
- **Experiences**: `/private-charter/[experience].astro` - Charter packages
- **Destinations**: `/yacht-charter/[island]/[location].astro` - Location guides
- **Water Toys**: `/water-toys/[...path].astro` - Equipment rentals
- **News**: `/sea-news/[slug].astro` - Blog articles

### 3. Gallery System
- Album-based photo galleries stored in Supabase
- `AlbumCarousel.astro` component for display
- `AlbumSearch.astro` for admin album management
- Documented in `README_GALLERY_SYSTEM.md`

### 4. Booking System
- Multi-step booking flow with progress tracking
- `BookingPopup.astro` and `BookingProgressSteps.astro`
- Quotation system with email integration
- Documented in booking-related components

### 5. Admin Interface
- `/admin.astro` - Content management dashboard
- Auto-generated route list via build script
- Crew management documented in `CREW_MANAGEMENT.md`

## Services Layer

### Core Services
- `experiencePackageService.ts` - Fetch charter packages
- `locationService.ts` - Destination data
- `waterToysService.ts` - Equipment information
- `wildlifeService.ts` - Marine life by location
- `newsService.ts` - Blog articles
- `menuService.ts` & `foodMenuService.ts` - Catering menus
- `faqService.ts` - FAQ data
- `quotationService.ts` - Booking quotations
- `departurePointsService.ts` - Marina locations

## Component Organization

### By Feature Area
- `/components/homepage/` - Landing page sections
- `/components/fleet/` - Yacht display components
- `/components/experiences/` - Charter package components
- `/components/destinations/` - Location page components
- `/components/activities/` - Water sports components
- `/components/company/` - About us sections
- `/components/schema/` - SEO structured data

### Global Components
- `Header.astro` - Site header with navigation
- `Navigation.astro` - Main menu
- `Footer.astro` - Site footer
- `BookingPopup.astro` - Booking modal
- `ContactPopup.astro` - Contact form
- `AlbumCarousel.astro` - Photo galleries

## Build Process

1. `npm run build` - Runs three steps:
   - `astro build` - Compiles Astro site
   - `copy-redirects.js` - Copies redirect rules
   - `update-admin-routes.js` - Updates admin route list

2. Output to `/dist/` directory
3. Deployed to Netlify with SSR support

## Environment Variables
Located in `.env`:
- `VITE_SUPABASE_URL` - Supabase project URL
- `VITE_SUPABASE_ANON_KEY` - Public API key

## Documentation Files
- `README.md` - Main project documentation
- `GALLERY_SYSTEM.md` - Album carousel usage
- `CREW_MANAGEMENT.md` - Team member management
- `WILDLIFE_SYSTEM.md` - Marine life system
- `YACHT_ACTIVITIES_SYSTEM.md` - Activities integration
- `NEWS_LOGS_DOCUMENTATION.md` - Blog system
- `PACKAGES_DEBUG_GUIDE.md` - Troubleshooting
- `REDIRECTIONS_SYSTEM.md` - URL redirect management
- `TECHNICAL_SPECS_MANAGEMENT.md` - Yacht specs
- `EMAILJS_TEMPLATE_GUIDE.md` - Email integration

## Common Development Tasks

### Add a New Page
1. Create file in `/src/pages/` (and `/src/pages/fr/` for French)
2. Import components and services
3. Use `Layout.astro` wrapper
4. Add translations if needed

### Add Database Content
1. Write migration in `/supabase/migrations/`
2. Use `mcp__supabase__apply_migration` tool
3. Update service layer if needed
4. Ensure RLS policies allow public read

### Update Translations
1. Edit `/src/i18n/translations/en.ts` and `fr.ts`
2. Follow existing structure
3. Use `t()` function in components

### Add a New Component
1. Create in appropriate feature directory
2. Follow Astro component conventions
3. Import and use in pages
4. Add TypeScript types as needed

## SEO Implementation
- `astro-seo` package for meta tags
- Schema.org structured data via components
- Sitemap generation at `/sitemap.xml`
- Multilingual hreflang tags

## Mobile Optimization
- Responsive design with mobile-first approach
- Touch-friendly navigation
- Optimized images (WebP format)
- Performance-focused loading

## Contact & Social Media
Retrieved dynamically from `app_settings` table:
- YouTube, Instagram, Facebook links
- Contact form integration
- Email quotation system