# Amenities & Facilities Implementation Notes

This document describes the high-fidelity, database-driven, and highly interactive **Amenities & Facilities** system created for **Kevron Suites and Apartments** (Adeniyi Jones, Ikeja, Lagos).

## 1. Architecture Overview

The system transitions from a basic static page into a fully dynamic, admin-manageable ecosystem powered by:
- **Eloquent Models**: Categories, individual amenities, location mapping, FAQ references, comparison criteria, and custom service requests.
- **Filament Admin Dashboard Integration**: Enabling full CRUD operations over category tags, featured toggles, status selections, sort orderings, and tracking guest concierge forms.
- **Dynamic Controller Route Layer**: Serves optimized, cached queries, validating telemetry, and processing request submissions cleanly.
- **Interactive High-Fidelity Views**: Highly refined, responsive template utilizing vanilla custom CSS styling, Alpine.js, and modal request workflows.

---

## 2. Brand Compliance & Styling Constraints

Every element strictly conforms to the established Kevron luxury design guidelines:
- **Typography**: 
  - Heading fonts strictly use `Marcellus`.
  - Body, navigation, and button labels strictly use `Inter`.
  - H1 sizes are securely clamped at a maximum of `1.8rem` (using CSS `clamp()`).
  - H2 to H6 heading sizes are strictly lower than `1.625rem`.
  - Body and standard UI text size maxes at `0.875rem`.
- **Branding Palette**:
  - Royal Blue: `#2B3192`
  - Sky Cyan: `#1FADEA`
  - Champagne Gold: `#D6A84F`
  - Midnight Navy: `#080D2B`
  - Soft Ice Blue: `#F4F8FF`
  - Charcoal Navy: `#172033`
- **Buttons**: Every button features a standard `border-radius: 50px`, smooth transitions, accessible focus rings, and minimum `44px` touch targets.
- **Cards**: All cards and sections utilize a precise `border-radius: 0.1rem` accompanied by thin shadows: `box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;`.
- **Sections**: Background sections dynamically switch between Cloud White (`#FFFFFF`), Soft Ice Blue (`#F4F8FF`), and Midnight Navy (`#080D2B`) to separate content beautifully.

---

## 3. Core Page Components

### 3.1 Hero and Quick-Jump Nav
- Features Marcellus H1 headings, Inter summaries, trust chips, and direct actions (apartments, bookings, and WhatsApp).
- The sticky navigation bar dynamically updates active section states based on viewport scroll positions using Alpine.js and interlocks with reduced-motion supports.

### 3.2 Categorized Highlight Grids
- 9 fully seeded categories cover: Comfort, Power & Internet, Kitchen & Laundry, Entertainment, Security, Transport, Location, Sustainability, and Guest Support.
- Built-in contextual triggers allow immediate concierge requests for car rentals, airport pickups, and housekeeping cleaning.

### 3.3 Interactive Service Request Modal
- Built with a clean overlay, validating full guest contact, reference keys, dates, times, and requirements.
- Handles smooth AJAX POSTs to `/amenities/request` and prints elegant custom toast notifications.

### 3.4 Apartment Comparison Matrix
- Tabulates bedrooms, capacities, and amenities side-by-side.
- Mobile viewport states gracefully collapse comparison matrices into stacked, structured cards for superior readability.

### 3.5 Interactive FAQs and Crawlable Metadata
- Populates database-driven accordion drawer accordions matching standard Preline components.
- Injects fully canonical SEO meta headers and lodgement WebPage JSON-LD structures.

---

## 4. Database Schema and Seeders

The database layer maps data across:
- `amenity_categories`: Category tags, slugs, and Lucide icons.
- `amenities`: Names, icons, status codes (`active`/`inactive`), and availability tags (`included`, `on_request`, `price_on_request`, `not_available`).
- `location_amenity`: Pivot mapping distance values and landmarks to Adeniyi Jones.
- `service_requests`: Tracking guest pickups, rentals, and cleanings.
- `amenity_comparison_fields`: Storing the comparison table criteria.

The seeder `AmenitySeeder` safely populates categories, syncs relationships dynamically with all four apartment types, establishes location advantages, FAQs, and SEO elements.