@extends('public-booking.layouts.shell')

@section('title', $hotel->name . ' — ' . ($hotel->public_site_tagline ?: 'Resort'))

@push('head')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    @include('public-booking.partials.theme-variables', ['hotel' => $hotel])
    <style>
        :root {
            --r-teal: var(--site-primary, #1a3d38);
            --r-teal-mid: #234f48;
            --r-gold: var(--site-accent, #b8956c);
            --r-gold-deep: #9a7b52;
        }
        * { box-sizing: border-box; }
        body { margin: 0; font-family: 'Source Sans 3', sans-serif; color: #1e293b; background: #fff; }
        /* Teal top bar: logo in oval, nav */
        .r-top {
            position: fixed; z-index: 50; top: 0; left: 0; right: 0;
            display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem 1rem;
            padding: 0.7rem 1.75rem; min-height: 3.5rem;
            background: var(--r-teal);
        }
        .r-top__logo { justify-self: start; }
        .r-top a { color: #fff; text-decoration: none; font-size: 0.88rem; font-weight: 500; }
        .r-top a:hover { color: rgba(255, 255, 255, 0.85); }
        .r-top__nav {
            grid-column: 2;
            justify-self: center;
            display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.75rem;
        }
        .r-top__logo .pb-site-logo__ring {
            width: 3.5rem !important; height: 2.4rem !important; min-height: 2.4rem; border-radius: 999px;
            background: transparent !important;
            border: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: none;
        }
        .r-top__logo .pb-site-logo--on-dark .pb-site-logo__initials { color: #fff; }
        .r-top__logo .pb-site-logo--on-dark .pb-site-logo__name { color: #fff; text-shadow: none; font-size: 0.72rem; }
        .r-top__logo .pb-site-logo__img { padding: 4px; }
        @media (max-width: 700px) {
            .r-top { padding: 0.6rem 1rem; grid-template-columns: 1fr; }
            .r-top__logo { justify-self: start; }
            .r-top__nav { grid-column: 1; width: 100%; justify-content: center; font-size: 0.8rem; gap: 0.5rem 1rem; }
        }
        /* White hero: copy left | oval image + line pattern right */
        .r-hero-editorial {
            margin-top: 3.5rem;
            background: #fff;
            min-height: min(75vh, 720px);
        }
        .r-hero-grid {
            max-width: 1200px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(2rem, 5vw, 4rem);
            display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem, 4vw, 3rem);
            align-items: center;
        }
        @media (max-width: 900px) { .r-hero-grid { grid-template-columns: 1fr; } }
        .r-hero-text h1 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(1.9rem, 3.2vw, 2.75rem);
            font-weight: 600; line-height: 1.2; margin: 0 0 1rem;
            color: var(--r-gold);
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        }
        .r-hero-text .r-sub {
            font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 500; line-height: 1.6; margin: 0 0 1.5rem; max-width: 30rem;
            color: var(--r-teal);
        }
        .r-cta {
            display: inline-block; padding: 0.7rem 1.85rem;
            background: linear-gradient(180deg, #c9a86c 0%, var(--r-gold-deep) 100%);
            color: #fff !important; text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
            border-radius: 2px; box-shadow: 0 2px 8px rgba(26, 61, 56, 0.12);
            transition: filter 0.2s, transform 0.15s;
        }
        .r-cta:hover { filter: brightness(1.08); }
        .r-hero-visual {
            position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center;
        }
        .r-hero-pattern {
            position: absolute; left: 10%; right: 10%; top: 5%; bottom: 5%;
            background: repeating-linear-gradient(
                90deg,
                transparent 0,
                transparent 11px,
                rgba(184, 149, 108, 0.22) 11px,
                rgba(184, 149, 108, 0.22) 12px
            );
            pointer-events: none; z-index: 0;
        }
        .r-hero-oval {
            position: relative; z-index: 1;
            width: 100%; max-width: 520px; aspect-ratio: 4.2 / 3;
            margin: 0 auto;
            clip-path: ellipse(48% 46% at 50% 50%);
        }
        .r-hero-oval .ph-hero--v3 { position: absolute; inset: 0; width: 100%; height: 100% !important; }
        .r-hero-oval .ph-hero--v3 .ph-dim { background: linear-gradient(145deg, rgba(26, 61, 56, 0.15), rgba(0,0,0,0.1)) !important; }
        @media (max-width: 900px) {
            .r-hero-editorial { min-height: auto; }
            .r-hero-visual { order: -1; }
        }
        .r-float-wrap { position: relative; z-index: 20; margin-top: -1.5rem; padding: 0 1rem; }
        .r-float {
            max-width: 920px; margin: 0 auto; background: #fff;
            border-radius: 0.5rem; padding: 0.9rem 1.1rem 1rem;
            box-shadow: 0 12px 40px rgba(26, 61, 56, 0.1);
            border: 1px solid rgba(184, 149, 108, 0.2);
        }
        .pb-bookform--res { background: #faf9f7 !important; border: none !important; margin: 0; padding: 0 !important; }
        .pb-bookform--res .pb-bf-grid {
            display: grid; grid-template-columns: 1.1fr 1.1fr 0.5fr 1fr; gap: 0.5rem; align-items: end;
        }
        @media (max-width: 800px) { .pb-bookform--res .pb-bf-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 500px) { .pb-bookform--res .pb-bf-grid { grid-template-columns: 1fr; } }
        .pb-bookform--res .pb-bf-lbl { color: #64748b; font-size: 0.58rem; font-weight: 600; }
        .pb-bookform--res .pb-bf-item input { color: #0f172a; font-weight: 600; font-size: 0.9rem; border: none; border-bottom: 1px solid #e2e8f0; background: transparent; }
        .pb-bookform--res .pb-bf-btn {
            min-height: 2.6rem; border-radius: 0.25rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
            background: linear-gradient(180deg, #c9a86c, var(--r-gold-deep)) !important; color: #fff !important; width: 100%;
        }
        .r-sec { background: #fafafa; padding: 3.25rem 1rem 3.5rem; border-top: 1px solid rgba(184, 149, 108, 0.15); }
        .r-sec__kicker { text-align: center; font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--r-teal); margin: 0; font-weight: 600; opacity: 0.85; }
        .r-sec h2 {
            text-align: center; font-family: 'Playfair Display', Georgia, serif;
            color: var(--r-gold); font-size: 1.9rem; margin: 0.4rem 0 0.2rem; font-weight: 600;
        }
        .r-sec__line { display: block; width: 40px; height: 1px; margin: 0.75rem auto 1.5rem; background: var(--r-gold); opacity: 0.6; }
        .r-rooms-wrap { max-width: 1100px; margin: 0 auto; padding: 0 0.75rem; width: 100%; }
        .pb-rm-card { background: #fff; border: 1px solid rgba(26, 61, 56, 0.1); border-radius: 8px; padding: 1.1rem; }
        .pb-rm-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; color: var(--r-teal); margin: 0; }
        .pb-rm-meta, .pb-rm-desc { color: #64748b; font-size: 0.85rem; margin: 0.35rem 0; line-height: 1.45; }
        .r-site-footer {
            background: var(--r-teal);
            padding: 1.25rem 1.75rem 1.5rem;
            font-size: 0.88rem;
        }
    </style>
@endpush

@section('content')
    <header class="r-top">
        <div class="r-top__logo">@include('public-booking.partials.site-logo', ['logoVariant' => 'on-dark', 'logoSize' => 'md'])</div>
        <nav class="r-top__nav" aria-label="Main">
            <a href="#res">{{ $hotel->getPublicSiteSetting('nav_label_1', 'Home') }}</a>
            <a href="mailto:{{ $hotel->email }}">{{ $hotel->getPublicSiteSetting('nav_label_4', 'Contact') }}</a>
        </nav>
    </header>

    <section class="r-hero-editorial" aria-label="Welcome">
        <div class="r-hero-grid">
            <div class="r-hero-text">
                <h1>{{ $hotel->public_site_tagline ?: 'Elegant houses just for you' }}</h1>
                <p class="r-sub">@if(filled($hotel->public_site_intro))
                    {!! nl2br(e($hotel->public_site_intro)) !!}
                @else
                    {{ $hotel->public_site_hero_kicker ?? 'Enjoy your holidays in our new luxury homes.' }}
                @endif</p>
            </div>
            <div class="r-hero-visual">
                <div class="r-hero-pattern" aria-hidden="true"></div>
                <div class="r-hero-oval">
                    @include('public-booking.partials.hero-backdrop', ['variant' => '3'])
                </div>
            </div>
        </div>
    </section>

    <div class="r-float-wrap">
        <div class="r-float">
            @include('public-booking.partials.booking-form', [
                'bfFormClass' => 'pb-bookform--res',
                'bfLabels' => [
                    'in' => 'Check in',
                    'out' => 'Check out',
                    'guests' => 'Guests',
                    'button' => 'Book room',
                ],
            ])
        </div>
    </div>

    <section class="r-sec" id="res">
        <p class="r-sec__kicker">{{ $hotel->guestPageText($hotel->getPublicSiteSetting('rooms_section_kicker', 'Residences')) }}</p>
        <h2>{{ $hotel->guestPageText($hotel->getPublicSiteSetting('rooms_section_title', 'Choose your room')) }}</h2>
        <span class="r-sec__line" aria-hidden="true"></span>
        <div class="r-rooms-wrap">
            @if(($bookableRooms ?? collect())->count() > 0 || $roomTypes->count()) @include('public-booking.partials.room-list') @else
                <p style="text-align:center; color:#64748b; grid-column:1/-1;">List coming soon. Call <a href="tel:{{ preg_replace('/\s+/', '', $hotel->phone) }}">{{ $hotel->phone }}</a></p>
            @endif
        </div>
    </section>

    <footer class="r-site-footer">
        @include('public-booking.partials.guest-site-footer-block', ['tone' => 'dark', 'showCopyright' => true])
    </footer>
@endsection

