# Apartment Detail Pages - Technical Implementation Notes

This document details the architectural decisions, data models, template layout structure, and safety disclaimers implemented for the individual apartment pages at `/apartments/{slug}`.

---

## 1. Reusable Dynamic Architecture
Rather than maintaining four duplicate static Blade templates, we implemented a single dynamic route `/apartments/{slug}` mapped to the `show` method of `ApartmentController.php`. 
- Content is queried dynamically from the `apartment_types` database table.
- Relational joins retrieve primary and secondary photo media (`mediaAssets`), features (`amenities`), meta configurations (`seoMetadata`), and schema models (`schemaMetadata`).

---

## 2. Layout Structure & UI Style System
The layout strictly respects the Kevron branding guidelines:
- **Hero Header Section**: Centered layout using `Marcellus` for headings (capped at `1.8rem`) and `Inter` for body labels (capped at `0.875rem`). It incorporates:
  - Trust chips: 24h power supply, high-speed Wi-Fi, smart keyless locks, and airport pickups.
  - Action items: Dynamic "Book Stay" anchor link, "WhatsApp Inquiry" link, and a default price badge.
- **Availability / Booking Widget**: Placed as a sticky sidebar. It uses Alpine.js to enforce date validation (check-in must be today/future, check-out must be at least 1 day after check-in). Form submission redirects to `/booking` with query parameters.
- **Categorized Photo Gallery**: Leverages Alpine.js state to filter images dynamically (tabs: Bedrooms, Living Area, Kitchen, Amenities) and opens a full-size modal Lightbox with escape key listener and slide transitions.
- **Walkthrough Video**: Plays standard en-suite cinematic walk-around tours hosted on Vimeo.
- **Interactive 3D VR Simulator**: Simulates virtual walkthroughs with interactive tooltips detailing gourmet kitchen features and snooker decks.
- **Grouped Amenities**: Lists en-suite comfort, connection, culinary, and security details grouped under categorical headings.
- **Policy Accordion**: Pulls dynamic cancellation, check-in, check-out, and house rules from the database to present them in toggled cards (0.1rem border-radius).
- **FAQ Accordion**: Renders common property questions dynamically.
- **Similar Suites Slider**: Shows a summary card of the other three apartment offerings to increase click-through and cross-selling potential.
- **Final CTA**: High-contrast Midnight Navy section matching accessibility standards.

---

## 3. Disclaimers & Safety Wording
In accordance with local operations:
- **Security Wording**: States that keyless smart locks, CCTV, and video doorbells are active. Mentions a travel time of *approximately 3 minutes to Memabod Police Station, subject to traffic*, but includes a clear disclaimer that no absolute safety guarantees are promised.
- **Transit Wording**: Mentions travel times of *approximately 8 minutes to local airports (MM1/MM2) and 15 minutes to international terminal (MMIA), subject to traffic*.
- **Pricing & Fees**: Clarifies that nightly prices represent starting rates, and lists optional extra charges (laundry, car rental, airport transfer) alongside a refundable security deposit.

---

## 4. Search Engine Optimization & JSON-LD Schemas
- **SEO Metadata**: Unique canonical links, titles, meta descriptions, and Open Graph attributes are pulled from the `seo_metadata` table.
- **Structured Schema**: Serves valid JSON-LD `Accommodation` objects dynamically, injecting correct prices, addresses, amenities, and stock values. Compiles raw Blade tags correctly via escaping (`@@context` and `@@type`) to prevent Blade compile blocks.