@extends('layouts.public')
@section('custom-css')
    <style>
        /* ═══════════════════════════════════════════════════ BASE */
        *, *::before, *::after { box-sizing: border-box; }

        :root {
            --primary:      #1a56db;
            --primary-dark: #1342b0;
            --primary-light:#e8f0fe;
            --navy:         #0d1b3e;
            --navy-mid:     #162042;
            --accent:       #f59e0b;
            --gray-50:      #f8fafc;
            --gray-100:     #f1f5f9;
            --gray-200:     #e2e8f0;
            --gray-300:     #cbd5e1;
            --gray-400:     #94a3b8;
            --gray-500:     #64748b;
            --gray-600:     #475569;
            --gray-700:     #334155;
            --gray-800:     #1e293b;
            --radius-sm:    10px;
            --radius-md:    16px;
            --radius-lg:    24px;
            --radius-xl:    28px;
            --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
            --shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
            --shadow-lg:    0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
            --shadow-xl:    0 20px 60px rgba(0,0,0,.15);
            --shadow-glow:  0 0 40px rgba(26,86,219,.12);
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--gray-800);
            background: #fff;
            overflow-x: hidden;
        }

        a { text-decoration: none; }

        .section-label {
            display: inline-block;
            background: var(--primary-light);
            color: var(--primary);
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .35rem .9rem;
            border-radius: 50px;
            margin-bottom: 1rem;
        }

        .section-title {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            font-weight: 800;
            line-height: 1.2;
            color: var(--navy);
        }

        .section-subtitle {
            font-size: 1.05rem;
            color: var(--gray-600);
            line-height: 1.7;
            max-width: 540px;
            margin: 0 auto;
        }

        /* ═══════════════════════════════════════════════════ NAVBAR */
        .site-nav {
            background: rgba(255,255,255,.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 1px 0 rgba(0,0,0,.06);
            padding: .9rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            transition: box-shadow .3s;
        }

        .site-nav.scrolled { box-shadow: var(--shadow-md); }

        .nav-logo {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--navy);
            display: flex;
            align-items: center;
            gap: .45rem;
        }

        .nav-logo .logo-icon {
            width: 36px;
            height: 36px;
            background: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1rem;
        }

        .nav-logo span { color: var(--primary); }

        .navbar-nav .nav-link {
            font-size: .92rem;
            font-weight: 500;
            color: var(--gray-600);
            padding: .45rem .8rem !important;
            border-radius: var(--radius-sm);
            transition: color .2s, background .2s;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: var(--primary);
            background: var(--primary-light);
        }

        .btn-nav-login {
            font-size: .88rem;
            font-weight: 600;
            color: var(--primary);
            border: 1.5px solid var(--primary);
            border-radius: var(--radius-sm);
            padding: .42rem 1.1rem;
            transition: background .2s, color .2s;
        }

        .btn-nav-login:hover { background: var(--primary-light); color: var(--primary); }

        .btn-nav-book {
            font-size: .88rem;
            font-weight: 600;
            background: var(--primary);
            color: #fff;
            border-radius: var(--radius-sm);
            padding: .45rem 1.25rem;
            transition: background .2s, transform .15s, box-shadow .2s;
            border: none;
        }

        .btn-nav-book:hover {
            background: var(--primary-dark);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(26,86,219,.3);
        }

        /* ═══════════════════════════════════════════════════ PAGE HERO */
        .page-hero {
            background: linear-gradient(135deg, var(--navy) 0%, #1a3272 50%, #1a56db 100%);
            padding: 5rem 0 7rem;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 50% at 75% 60%, rgba(26,86,219,.25) 0%, transparent 70%),
                radial-gradient(ellipse 40% 40% at 20% 30%, rgba(255,255,255,.04) 0%, transparent 60%);
        }

        .page-hero-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 48px 48px;
        }

        .page-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15);
            color: #93c5fd;
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .06em;
            padding: .38rem 1rem;
            border-radius: 50px;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .page-hero-badge i { color: var(--accent); }

        .page-hero-title {
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 900;
            color: #fff;
            line-height: 1.12;
            margin-bottom: 1rem;
            position: relative;
        }

        .page-hero-sub {
            font-size: 1.1rem;
            color: #bfdbfe;
            line-height: 1.7;
            max-width: 520px;
            margin: 0 auto;
            position: relative;
        }

        /* Wave divider */
        .hero-wave {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            line-height: 0;
            z-index: 2;
        }

        .hero-wave svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 80px;
        }

        @media (max-width: 767px) {
            .hero-wave svg { height: 50px; }
        }

        /* ═══════════════════════════════════════════════════ CONTACT CARDS */
        .contact-cards {
            padding: 0 0 4rem;
            margin-top: -4rem;
            position: relative;
            z-index: 10;
        }

        .contact-card {
            background: #fff;
            border-radius: var(--radius-xl);
            padding: 2.25rem 1.75rem;
            border: 1px solid rgba(148,163,184,.14);
            box-shadow: 0 4px 6px rgba(15,23,42,.03), 0 24px 56px rgba(15,23,42,.1), 0 0 0 1px rgba(255,255,255,.7) inset;
            transition: transform .32s cubic-bezier(.22,.68,0,1.2), box-shadow .32s ease, border-color .32s ease;
            height: 100%;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .contact-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), #60a5fa);
            opacity: 0;
            transition: opacity .3s;
        }

        .contact-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 16px rgba(15,23,42,.04), 0 32px 64px rgba(15,23,42,.16), 0 0 0 1px rgba(37,99,235,.1) inset;
            border-color: rgba(37,99,235,.15);
        }

        .contact-card:hover::before { opacity: 1; }

        .contact-card-icon {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--primary-light), #dbeafe);
            color: var(--primary);
            font-size: 1.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.25rem;
            transition: transform .3s, background .3s;
        }

        .contact-card:hover .contact-card-icon {
            transform: scale(1.08);
            background: linear-gradient(135deg, var(--primary), #3b82f6);
            color: #fff;
        }

        .contact-card-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: .5rem;
        }

        .contact-card-text {
            font-size: .88rem;
            color: var(--gray-500);
            line-height: 1.65;
            margin: 0 0 .75rem;
        }

        .contact-card-link {
            font-size: .88rem;
            font-weight: 700;
            color: var(--primary);
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            transition: gap .2s;
        }

        .contact-card-link:hover { gap: .6rem; color: var(--primary-dark); }

        /* ═══════════════════════════════════════════════════ FORM SECTION */
        .contact-form-section {
            padding: 4rem 0 6rem;
            background: var(--gray-50);
            position: relative;
        }

        .contact-form-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle at 10% 20%, rgba(26,86,219,.04) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(26,86,219,.03) 0%, transparent 40%);
        }

        .contact-form-wrap {
            background: #fff;
            border-radius: var(--radius-xl);
            border: 1px solid rgba(148,163,184,.14);
            box-shadow: 0 4px 6px rgba(15,23,42,.03), 0 24px 56px rgba(15,23,42,.08), 0 0 0 1px rgba(255,255,255,.7) inset;
            overflow: hidden;
        }

        .contact-form-header {
            background: linear-gradient(135deg, var(--navy) 0%, #1a3272 100%);
            padding: 2.5rem 2.5rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .contact-form-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 48px 48px;
        }

        .contact-form-header h3 {
            color: #fff;
            font-size: 1.4rem;
            font-weight: 800;
            margin-bottom: .5rem;
            position: relative;
        }

        .contact-form-header p {
            color: #93c5fd;
            font-size: .92rem;
            margin: 0;
            position: relative;
        }

        .contact-form-body {
            padding: 2.5rem;
            position: relative;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            font-size: .82rem;
            font-weight: 700;
            color: var(--gray-700);
            margin-bottom: .5rem;
            display: block;
            letter-spacing: .01em;
        }

        .form-label .required {
            color: #ef4444;
            margin-left: .15rem;
        }

        .form-control, .form-select {
            border: 1.5px solid var(--gray-200);
            border-radius: var(--radius-sm);
            height: 52px;
            font-size: .95rem;
            color: var(--gray-800);
            padding: .75rem 1rem;
            transition: border-color .2s, box-shadow .2s, background .2s;
            background: #fff;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(26,86,219,.08);
            outline: none;
            background: #fff;
        }

        .form-control::placeholder { color: var(--gray-400); }

        textarea.form-control {
            height: auto;
            min-height: 140px;
            resize: vertical;
        }

        .form-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 14px;
            padding-right: 2.5rem;
            appearance: none;
            -webkit-appearance: none;
        }

        .btn-submit {
            width: 100%;
            height: 54px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
            color: #fff;
            font-size: .95rem;
            font-weight: 800;
            letter-spacing: .02em;
            border: 0;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
            box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.12) inset, 0 8px 20px rgba(29,78,216,.35);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
        }

        .btn-submit::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 60%);
            pointer-events: none;
        }

        .btn-submit:hover {
            transform: translateY(-1px);
            filter: brightness(1.08);
            box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.12) inset, 0 14px 28px rgba(29,78,216,.45);
        }

        .btn-submit:active { transform: translateY(0); }

        .btn-submit:disabled {
            opacity: .7;
            cursor: not-allowed;
            transform: none;
            filter: none;
        }

        /* Success message */
        .form-success {
            background: linear-gradient(135deg, #ecfdf5, #d1fae5);
            border: 1px solid #86efac;
            border-radius: var(--radius-md);
            padding: 1.5rem;
            text-align: center;
            display: none;
        }

        .form-success i {
            font-size: 2.5rem;
            color: #10b981;
            margin-bottom: .75rem;
        }

        .form-success h4 {
            color: #065f46;
            font-weight: 800;
            font-size: 1.1rem;
            margin-bottom: .25rem;
        }

        .form-success p {
            color: #047857;
            font-size: .9rem;
            margin: 0;
        }

        /* ═══════════════════════════════════════════════════ INFO SIDEBAR */
        .info-sidebar {
            height: 100%;
        }

        .info-card {
            background: #fff;
            border-radius: var(--radius-xl);
            border: 1px solid rgba(148,163,184,.14);
            box-shadow: 0 4px 6px rgba(15,23,42,.03), 0 24px 56px rgba(15,23,42,.08), 0 0 0 1px rgba(255,255,255,.7) inset;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .info-card-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            padding: 2rem 2rem 1.5rem;
            position: relative;
            overflow: hidden;
        }

        .info-card-header::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -20%;
            width: 200px;
            height: 200px;
            background: rgba(255,255,255,.06);
            border-radius: 50%;
        }

        .info-card-header h4 {
            color: #fff;
            font-size: 1.15rem;
            font-weight: 800;
            margin-bottom: .25rem;
            position: relative;
        }

        .info-card-header p {
            color: #bfdbfe;
            font-size: .85rem;
            margin: 0;
            position: relative;
        }

        .info-card-body {
            padding: 1.75rem 2rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .info-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.25rem 0;
            border-bottom: 1px solid var(--gray-100);
        }

        .info-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .info-item:first-child { padding-top: 0; }

        .info-item-icon {
            width: 44px;
            height: 44px;
            min-width: 44px;
            border-radius: 12px;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .info-item-content h5 {
            font-size: .9rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: .2rem;
        }

        .info-item-content p {
            font-size: .85rem;
            color: var(--gray-500);
            line-height: 1.6;
            margin: 0;
        }

        .info-item-content a {
            color: var(--primary);
            font-weight: 600;
            font-size: .85rem;
            transition: color .2s;
        }

        .info-item-content a:hover { color: var(--primary-dark); }

        /* Social in sidebar */
        .sidebar-social {
            margin-top: auto;
            padding-top: 1.5rem;
            border-top: 1px solid var(--gray-100);
        }

        .sidebar-social-label {
            font-size: .75rem;
            font-weight: 700;
            color: var(--gray-400);
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: .75rem;
        }

        .sidebar-social-links {
            display: flex;
            gap: .6rem;
        }

        .sidebar-social-link {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-500);
            font-size: 1rem;
            transition: all .2s;
        }

        .sidebar-social-link:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(26,86,219,.25);
        }

        /* ═══════════════════════════════════════════════════ MAP SECTION */
        .map-section {
            padding: 0 0 6rem;
            background: var(--gray-50);
        }

        .map-wrap {
            border-radius: var(--radius-xl);
            overflow: hidden;
            border: 1px solid rgba(148,163,184,.14);
            box-shadow: 0 4px 6px rgba(15,23,42,.03), 0 24px 56px rgba(15,23,42,.08);
            position: relative;
        }

        .map-wrap iframe {
            width: 100%;
            height: 420px;
            border: 0;
            display: block;
            filter: grayscale(20%) contrast(1.05);
        }

        .map-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(13,27,62,.85), transparent);
            padding: 3rem 2rem 1.5rem;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .map-overlay-text {
            color: #fff;
        }

        .map-overlay-text h4 {
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: .25rem;
        }

        .map-overlay-text p {
            font-size: .85rem;
            color: #bfdbfe;
            margin: 0;
        }

        .map-overlay-btn {
            background: #fff;
            color: var(--primary);
            font-weight: 700;
            font-size: .88rem;
            padding: .6rem 1.4rem;
            border-radius: var(--radius-sm);
            border: none;
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            transition: transform .2s, box-shadow .2s;
            white-space: nowrap;
        }

        .map-overlay-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,.2);
            color: var(--primary);
        }

        /* ═══════════════════════════════════════════════════ FAQ */
        .faq-section {
            padding: 5rem 0 6rem;
            background: #fff;
        }

        .faq-item {
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            overflow: hidden;
            margin-bottom: 1rem;
            transition: box-shadow .2s, border-color .2s;
        }

        .faq-item:hover {
            box-shadow: var(--shadow-sm);
            border-color: var(--gray-300);
        }

        .faq-question {
            background: #fff;
            padding: 1.25rem 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            transition: background .2s;
            border: none;
            width: 100%;
            text-align: left;
        }

        .faq-question:hover { background: var(--gray-50); }

        .faq-question h5 {
            font-size: .95rem;
            font-weight: 700;
            color: var(--navy);
            margin: 0;
            flex: 1;
        }

        .faq-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            flex-shrink: 0;
            transition: transform .3s, background .3s, color .3s;
        }

        .faq-item.active .faq-icon {
            transform: rotate(180deg);
            background: var(--primary);
            color: #fff;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease, padding .35s ease;
            background: var(--gray-50);
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
            padding: 0 1.5rem 1.25rem;
        }

        .faq-answer p {
            font-size: .9rem;
            color: var(--gray-600);
            line-height: 1.7;
            margin: 0;
        }

        /* ═══════════════════════════════════════════════════ CTA */
        .cta-section {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            padding: 5rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -10%;
            width: 60%;
            height: 200%;
            background: rgba(255,255,255,.05);
            border-radius: 50%;
        }

        .cta-section::after {
            content: '';
            position: absolute;
            bottom: -50%;
            right: -10%;
            width: 50%;
            height: 200%;
            background: rgba(255,255,255,.05);
            border-radius: 50%;
        }

        .cta-title {
            font-size: clamp(1.6rem, 4vw, 2.4rem);
            font-weight: 900;
            color: #fff;
            margin-bottom: .75rem;
            position: relative;
        }

        .cta-sub {
            font-size: 1.05rem;
            color: #bfdbfe;
            margin-bottom: 2rem;
            position: relative;
        }

        .btn-cta {
            background: #fff;
            color: var(--primary);
            font-weight: 700;
            font-size: 1rem;
            padding: .85rem 2.5rem;
            border-radius: var(--radius-sm);
            border: none;
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            transition: transform .2s, box-shadow .2s;
            position: relative;
            z-index: 1;
        }

        .btn-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0,0,0,.2);
            color: var(--primary);
        }

        /* ═══════════════════════════════════════════════════ FOOTER */
        .site-footer {
            background: var(--navy);
            color: #94a3b8;
            padding: 4.5rem 0 2rem;
        }

        .footer-logo {
            font-size: 1.25rem;
            font-weight: 800;
            color: #fff;
            display: flex;
            align-items: center;
            gap: .45rem;
            margin-bottom: 1rem;
        }

        .footer-logo .logo-icon {
            width: 32px;
            height: 32px;
            background: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: .9rem;
        }

        .footer-logo span { color: #60a5fa; }

        .footer-desc {
            font-size: .87rem;
            line-height: 1.7;
            color: #c8cfd8;
            margin-bottom: 1.5rem;
        }

        .footer-social {
            display: flex;
            gap: .65rem;
        }

        .social-btn {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: .95rem;
            transition: background .2s, color .2s;
        }

        .social-btn:hover { background: var(--primary); color: #fff; }

        .footer-heading {
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #e2e8f0;
            margin-bottom: 1.25rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li { margin-bottom: .6rem; }

        .footer-links a {
            font-size: .87rem;
            color: #64748b;
            transition: color .2s;
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        .footer-links a:hover { color: #93c5fd; }

        .footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: .75rem;
            font-size: .87rem;
            color: #64748b;
            margin-bottom: .85rem;
        }

        .footer-contact-item i {
            color: var(--primary);
            font-size: 1rem;
            margin-top: .1rem;
            flex-shrink: 0;
        }

        .footer-divider {
            border-color: rgba(255,255,255,.06);
            margin: 2.5rem 0 1.5rem;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: .8rem;
            color: #475569;
            flex-wrap: wrap;
            gap: .5rem;
        }

        /* ═══════════════════════════════════════════════════ RESPONSIVE */
        @media (max-width: 991px) {
            .page-hero { padding: 4rem 0 6rem; }
            .contact-cards { margin-top: -3rem; }
        }

        @media (max-width: 767px) {
            .page-hero-title { font-size: 2rem; }
            .contact-form-body { padding: 1.75rem; }
            .contact-form-header { padding: 2rem 1.75rem 1.5rem; }
            .map-wrap iframe { height: 300px; }
            .map-overlay { padding: 2rem 1.5rem 1rem; }
        }

        /* ═══════════════════════════════════════════════════ ANIMATIONS */
        .fade-up {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .55s ease, transform .55s ease;
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
@endsection

@section('content')
<!-- ═══════════════════════════════════════════════════════ PAGE HERO -->
<section class="page-hero">
    <div class="page-hero-grid"></div>
    <div class="container position-relative">
        <div class="page-hero-badge fade-up">
            <i class="bi bi-telephone-fill"></i> We're Here to Help
        </div>
        <h1 class="page-hero-title fade-up" style="transition-delay:.08s">
            Get in Touch With Us
        </h1>
        <p class="page-hero-sub fade-up" style="transition-delay:.15s">
            Have a question about our fleet, need help with a booking, or want a custom quote? Our friendly team is ready to assist you.
        </p>
    </div>

    <!-- Wave divider -->
    <div class="hero-wave">
        <svg viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path fill="#ffffff" d="M0,64 C480,150 960,0 1440,64 L1440,120 L0,120 Z"></path>
        </svg>
    </div>
</section>


<!-- ═══════════════════════════════════════════════════════ CONTACT CARDS -->
<section class="contact-cards">
    <div class="container">
        <div class="row g-4">

            <div class="col-md-4 fade-up" style="transition-delay:.05s">
                <div class="contact-card">
                    <div class="contact-card-icon">
                        <i class="bi bi-telephone-fill"></i>
                    </div>
                    <h3 class="contact-card-title">Call Us</h3>
                    <p class="contact-card-text">
                        Speak directly with our reservations team. We're available Mon–Sun, 8am–10pm.
                    </p>
                    <a href="tel:{{$businessSetup->phone ?? ''}}" class="contact-card-link">
                        {{$businessSetup->phone ?? ''}} <i class="bi bi-arrow-right-short"></i>
                    </a>
                </div>
            </div>

            <div class="col-md-4 fade-up" style="transition-delay:.12s">
                <div class="contact-card">
                    <div class="contact-card-icon">
                        <i class="bi bi-envelope-fill"></i>
                    </div>
                    <h3 class="contact-card-title">Email Us</h3>
                    <p class="contact-card-text">
                        Send us an email anytime. We typically respond within 2 hours during business hours.
                    </p>
                    <a href="mailto:{{$businessSetup->email ?? ''}}" class="contact-card-link">
                        {{$businessSetup->email ?? ''}} <i class="bi bi-arrow-right-short"></i>
                    </a>
                </div>
            </div>

            <div class="col-md-4 fade-up" style="transition-delay:.19s">
                <div class="contact-card">
                    <div class="contact-card-icon">
                        <i class="bi bi-geo-alt-fill"></i>
                    </div>
                    <h3 class="contact-card-title">Visit Us</h3>
                    <p class="contact-card-text">
                        Drop by our main office. We'd love to show you our fleet in person.
                    </p>
                    <a href="#map" class="contact-card-link">
                        Get Directions <i class="bi bi-arrow-right-short"></i>
                    </a>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- ═══════════════════════════════════════════════════════ FORM + INFO -->
<section class="contact-form-section">
    <div class="container position-relative">
        <div class="row g-4 align-items-stretch">

            <!-- Form -->
            <div class="col-lg-7 fade-up" style="transition-delay:.05s">
                <div class="contact-form-wrap">
                    <div class="contact-form-header">
                        <h3><i class="bi bi-send-fill me-2"></i>Send Us a Message</h3>
                        <p>Fill out the form below and we'll get back to you as soon as possible.</p>
                    </div>
                    <div class="contact-form-body">

                        <form id="contactForm" action="#" method="POST">
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="form-label">First Name <span class="required">*</span></label>
                                        <input type="text" name="first_name" class="form-control" placeholder="John" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="form-label">Last Name <span class="required">*</span></label>
                                        <input type="text" name="last_name" class="form-control" placeholder="Doe" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="form-label">Email Address <span class="required">*</span></label>
                                        <input type="email" name="email" class="form-control" placeholder="john@example.com" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <label class="form-label">Phone Number</label>
                                        <input type="tel" name="phone" class="form-control" placeholder="+1 (555) 000-0000">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Subject <span class="required">*</span></label>
                                <select name="subject" class="form-select" required>
                                    <option value="" disabled selected>Select a topic</option>
                                    <option value="general">General Inquiry</option>
                                    <option value="booking">Booking Question</option>
                                    <option value="fleet">Fleet Information</option>
                                    <option value="wedding">Wedding & Event Hire</option>
                                    <option value="corporate">Corporate Rentals</option>
                                    <option value="support">Customer Support</option>
                                    <option value="feedback">Feedback</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Your Message <span class="required">*</span></label>
                                <textarea name="message" class="form-control" placeholder="Tell us how we can help you..." required></textarea>
                            </div>

                            <button type="submit" class="btn-submit" id="submitBtn">
                                <i class="bi bi-send-fill"></i> Send Message
                            </button>
                        </form>

                        <!-- Success message -->
                        <div class="form-success mt-4" id="formSuccess">
                            <i class="bi bi-check-circle-fill"></i>
                            <h4>Message Sent Successfully!</h4>
                            <p>Thank you for reaching out. We'll get back to you within 24 hours.</p>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Info Sidebar -->
            <div class="col-lg-5 fade-up" style="transition-delay:.12s">
                <div class="info-sidebar">
                    <div class="info-card">
                        <div class="info-card-header">
                            <h4><i class="bi bi-info-circle-fill me-2"></i>Contact Information</h4>
                            <p>Multiple ways to reach our team</p>
                        </div>
                        <div class="info-card-body">

                            <div class="info-item">
                                <div class="info-item-icon">
                                    <i class="bi bi-geo-alt-fill"></i>
                                </div>
                                <div class="info-item-content">
                                    <h5>Head Office</h5>
                                    <p>123 Rental Drive, Suite 100<br>Los Angeles, CA 90001, USA</p>
                                </div>
                            </div>

                            <div class="info-item">
                                <div class="info-item-icon">
                                    <i class="bi bi-telephone-fill"></i>
                                </div>
                                <div class="info-item-content">
                                    <h5>Phone</h5>
                                    <p>
                                        <a href="tel:{{$businessSetup->phone ?? ''}}">{{$businessSetup->phone ?? ''}}</a><br>
                                        <span style="color:var(--gray-400);font-size:.8rem;">Mon – Sun: 8am – 10pm</span>
                                    </p>
                                </div>
                            </div>

                            <div class="info-item">
                                <div class="info-item-icon">
                                    <i class="bi bi-envelope-fill"></i>
                                </div>
                                <div class="info-item-content">
                                    <h5>Email</h5>
                                    <p>
                                        <a href="mailto:{{$businessSetup->email  ?? ''}}">{{$businessSetup->email ?? ''}}</a><br>
                                        <span style="color:var(--gray-400);font-size:.8rem;">Response within 2 hours</span>
                                    </p>
                                </div>
                            </div>

                            <div class="info-item">
                                <div class="info-item-icon">
                                    <i class="bi bi-clock-fill"></i>
                                </div>
                                <div class="info-item-content">
                                    <h5>Business Hours</h5>
                                    <p>
                                        Mon – Fri: 8:00 AM – 8:00 PM<br>
                                        Sat – Sun: 9:00 AM – 6:00 PM<br>
                                        <span style="color:var(--primary);font-size:.8rem;font-weight:600;">24/7 Emergency Support Available</span>
                                    </p>
                                </div>
                            </div>

                            <div class="sidebar-social">
                                <div class="sidebar-social-label">Follow Us</div>
                                <div class="sidebar-social-links">
                                    <a href="#" class="sidebar-social-link" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
                                    <a href="#" class="sidebar-social-link" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
                                    <a href="#" class="sidebar-social-link" aria-label="Twitter / X"><i class="bi bi-twitter-x"></i></a>
                                    <a href="#" class="sidebar-social-link" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
                                    <a href="#" class="sidebar-social-link" aria-label="YouTube"><i class="bi bi-youtube"></i></a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- ═══════════════════════════════════════════════════════ MAP -->
<section class="map-section" id="map">
    <div class="container">
        <div class="text-center mb-4 fade-up">
            <span class="section-label">Find Us</span>
            <h2 class="section-title">Our Location</h2>
        </div>
        <div class="map-wrap fade-up" style="transition-delay:.08s">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3305.715220363292!2d-118.243685!3d34.052234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c648fa1d4803%3A0xdec27bf11f9fd336!2sLos%20Angeles%2C%20CA!5e0!3m2!1sen!2sus!4v1600000000000!5m2!1sen!2sus"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
            <div class="map-overlay">
                <div class="map-overlay-text">
                    <h4><i class="bi bi-geo-alt-fill me-2"></i>Car Rent Us Headquarters</h4>
                    <p>123 Rental Drive, Suite 100 — Los Angeles, CA 90001</p>
                </div>
                <a href="https://maps.google.com/?q=123+Rental+Drive+Los+Angeles+CA+90001" target="_blank" class="map-overlay-btn">
                    <i class="bi bi-box-arrow-up-right"></i> Open in Maps
                </a>
            </div>
        </div>
    </div>
</section>


<!-- ═══════════════════════════════════════════════════════ FAQ -->
<section class="faq-section">
    <div class="container">
        <div class="text-center mb-5 fade-up">
            <span class="section-label">FAQ</span>
            <h2 class="section-title">Frequently Asked Questions</h2>
            <p class="section-subtitle mt-3">Quick answers to common questions. Can't find what you're looking for? Reach out to us directly.</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8">

                <div class="faq-item fade-up" style="transition-delay:.05s">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        <h5>How do I make a booking?</h5>
                        <span class="faq-icon"><i class="bi bi-chevron-down"></i></span>
                    </button>
                    <div class="faq-answer">
                        <p>You can book directly through our website by browsing our fleet, selecting your dates, and completing the checkout process. Alternatively, you can call us at {{$businessSetup->phone ?? ''}} and our team will assist you with the reservation.</p>
                    </div>
                </div>

                <div class="faq-item fade-up" style="transition-delay:.1s">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        <h5>What documents do I need to rent a car?</h5>
                        <span class="faq-icon"><i class="bi bi-chevron-down"></i></span>
                    </button>
                    <div class="faq-answer">
                        <p>You'll need a valid driver's license, a credit or debit card for the security deposit, and proof of insurance. International renters should also present a passport and an International Driving Permit if required.</p>
                    </div>
                </div>

                <div class="faq-item fade-up" style="transition-delay:.15s">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        <h5>Can I cancel or modify my booking?</h5>
                        <span class="faq-icon"><i class="bi bi-chevron-down"></i></span>
                    </button>
                    <div class="faq-answer">
                        <p>Yes! You can cancel or modify your booking up to 24 hours before your pickup time for a full refund. Cancellations within 24 hours may be subject to a fee. Log into your account or contact us to make changes.</p>
                    </div>
                </div>

                <div class="faq-item fade-up" style="transition-delay:.2s">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        <h5>Do you offer wedding and event car hire?</h5>
                        <span class="faq-icon"><i class="bi bi-chevron-down"></i></span>
                    </button>
                    <div class="faq-answer">
                        <p>Absolutely! We specialize in wedding and occasion car hire with a stunning fleet of vintage classics, luxury sedans, and limousines. All wedding packages include decoration, a professional chauffeur, and red-carpet service.</p>
                    </div>
                </div>

                <div class="faq-item fade-up" style="transition-delay:.25s">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        <h5>Is there a mileage limit on rentals?</h5>
                        <span class="faq-icon"><i class="bi bi-chevron-down"></i></span>
                    </button>
                    <div class="faq-answer">
                        <p>Most of our rentals include unlimited mileage within the state. For out-of-state travel or long-distance trips, please contact us in advance so we can arrange the appropriate coverage and pricing.</p>
                    </div>
                </div>

                <div class="faq-item fade-up" style="transition-delay:.3s">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        <h5>What happens if I have an emergency on the road?</h5>
                        <span class="faq-icon"><i class="bi bi-chevron-down"></i></span>
                    </button>
                    <div class="faq-answer">
                        <p>We provide 24/7 roadside assistance for all rentals. Simply call our emergency hotline at +1 (800) 555-RENT and press 2 for roadside support. We cover towing, flat tires, battery jumps, and lockout services.</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>


<!-- ═══════════════════════════════════════════════════════ CTA -->
<section class="cta-section">
    <div class="container position-relative" style="z-index:1">
        <div class="fade-up">
            <h2 class="cta-title">Still Have Questions?</h2>
            <p class="cta-sub">Our team is standing by to help you with anything you need. Don't hesitate to reach out.</p>
            <a href="tel:{{$businessSetup->phone ?? ''}}" class="btn-cta">
                <i class="bi bi-telephone-fill"></i> Call Us Now
            </a>
        </div>
    </div>
</section>
@endsection

@section('page-script')
<script>


    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', e => {
            const target = document.querySelector(anchor.getAttribute('href'));
            if (target) {
                e.preventDefault();
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });

    // ═══════════════════════════════════════════════════════ SCROLL ANIMATIONS
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.12 });

    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));

    // ═══════════════════════════════════════════════════════ FAQ ACCORDION
    function toggleFaq(btn) {
        const item = btn.closest('.faq-item');
        const isActive = item.classList.contains('active');

        // Close all
        document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));

        // Open clicked if it wasn't active
        if (!isActive) {
            item.classList.add('active');
        }
    }

    // ═══════════════════════════════════════════════════════ FORM HANDLING
    const contactForm = document.getElementById('contactForm');
    const submitBtn = document.getElementById('submitBtn');
    const formSuccess = document.getElementById('formSuccess');

    contactForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        // Show loading state
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span> Sending...';

        // Simulate form submission (replace with actual fetch)
        // In production, use:
        // const formData = new FormData(contactForm);
        // const response = await fetch(contactForm.action, { method: 'POST', body: formData });

        setTimeout(() => {
            contactForm.style.display = 'none';
            formSuccess.style.display = 'block';
            formSuccess.classList.add('fade-up', 'visible');
        }, 1500);
    });
</script>
@endsection