@php
    $serviceCards = [
        ['key' => 'in-store-grooming', 'name' => 'Grooming', 'copy' => 'Bath, trim & style for a happy pet', 'icon' => 'fa-solid fa-brush', 'tone' => 'lavender'],
        ['key' => 'veterinary', 'name' => 'Vet Care', 'copy' => 'Expert vet care for better health', 'icon' => 'fa-solid fa-stethoscope', 'tone' => 'peach'],
        ['key' => 'boarding', 'name' => 'Boarding', 'copy' => 'Safe & cozy stays while you’re away', 'icon' => 'fa-solid fa-house-chimney', 'tone' => 'mint'],
        ['key' => 'pet-taxi', 'name' => 'Pet Taxi', 'copy' => 'Comfortable rides for your pet', 'icon' => 'fa-solid fa-car-side', 'tone' => 'blue'],
        ['key' => 'daycare', 'name' => 'Day Care', 'copy' => 'Play, care & love while you’re busy', 'icon' => 'fa-solid fa-baseball', 'tone' => 'rose'],
        ['key' => null, 'name' => 'Shop', 'copy' => 'Premium products for happy pets', 'icon' => 'fa-solid fa-bag-shopping', 'tone' => 'violet'],
    ];
    $primaryBookingUrl = route('portal.booking.show', [$tenant, 'in-store-grooming']);
@endphp

<x-layouts.portal :tenant="$tenant" title="Paw Street · Complete Pet Care" :landing="true">
    <div class="ps-landing" x-data="{ mobileMenu: false, languageMenu: false }">
        <div class="ps-landing-shell">
            <header class="ps-site-header">
                <a href="{{ route('portal.landing', $tenant) }}" class="ps-wordmark" aria-label="Paw Street home">
                    <span class="ps-wordmark-paw"><i class="fa-solid fa-paw" aria-hidden="true"></i></span>
                    <strong><span>Paw</span><span>Street</span></strong>
                    <small>where care is pawfect</small>
                </a>

                <nav class="ps-main-nav" aria-label="Public navigation">
                    <a href="#home" class="active">Home</a>
                    <a href="#services">Services <i class="fa-solid fa-chevron-down" aria-hidden="true"></i></a>
                    <a href="#features">Features</a>
                    <a href="#about">About</a>
                    <a href="#services">Pricing</a>
                    <a href="#testimonials">Testimonials</a>
                </nav>

                <div class="ps-header-actions">
                    <div class="ps-language-wrap">
                        <button type="button" @click="languageMenu = !languageMenu" class="ps-language-button" :aria-expanded="languageMenu">
                            <i class="fa-solid fa-globe" aria-hidden="true"></i><span>English</span><i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
                        </button>
                        <div x-cloak x-show="languageMenu" @click.outside="languageMenu = false" class="ps-language-menu">
                            <button type="button">English</button><button type="button">العربية</button><button type="button">Français</button>
                        </div>
                    </div>
                    <a href="{{ $primaryBookingUrl }}" class="ps-purple-button ps-header-book">Book Now <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    <button type="button" class="ps-mobile-toggle" @click="mobileMenu = !mobileMenu" aria-label="Toggle navigation"><i class="fa-solid fa-bars" aria-hidden="true"></i></button>
                </div>

                <div x-cloak x-show="mobileMenu" x-transition class="ps-mobile-menu">
                    <a href="#home" @click="mobileMenu=false">Home</a><a href="#services" @click="mobileMenu=false">Services</a><a href="#features" @click="mobileMenu=false">Features</a><a href="#about" @click="mobileMenu=false">About</a><a href="#testimonials" @click="mobileMenu=false">Testimonials</a><a href="{{ $primaryBookingUrl }}">Book Now</a>
                </div>
            </header>

            <section id="home" class="ps-hero">
                <span class="ps-float-paw ps-float-paw-one"><i class="fa-solid fa-paw" aria-hidden="true"></i></span>
                <span class="ps-float-paw ps-float-paw-two"><i class="fa-solid fa-paw" aria-hidden="true"></i></span>
                <div class="ps-hero-copy">
                    <div class="ps-trusted-pill">
                        <span class="ps-shield"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i></span>
                        <strong>Trusted by 500+ Pet Families</strong>
                        <span class="ps-avatar-stack" aria-hidden="true"><i></i><i></i><i></i></span>
                        <span class="ps-plus">+</span>
                    </div>
                    <h1>Where care is<br><span>pawfect</span> <i class="fa-regular fa-heart" aria-hidden="true"></i></h1>
                    <p>All-in-one care and wellness services for pets.<br>Because they deserve the best, every single day.</p>
                    <div class="ps-hero-actions">
                        <a href="{{ $primaryBookingUrl }}" class="ps-purple-button">Book a Service <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                        <a href="#features" class="ps-outline-button"><span class="ps-play"><i class="fa-solid fa-play" aria-hidden="true"></i></span> Watch Video</a>
                    </div>
                    <div class="ps-trust-points">
                        <span><i class="fa-solid fa-paw" aria-hidden="true"></i><b>Safe & Trusted</b><small>Care at every step</small></span>
                        <span><i class="fa-solid fa-user-group" aria-hidden="true"></i><b>Experienced</b><small>Pet Care Experts</small></span>
                        <span><i class="fa-solid fa-hand-holding-heart" aria-hidden="true"></i><b>Loved by Pets</b><small>Approved by Parents</small></span>
                    </div>
                </div>

                <div class="ps-hero-visual" aria-label="Golden retriever and tabby cat">
                    <div class="ps-purple-blob">
                        <i class="fa-solid fa-house-chimney ps-blob-house" aria-hidden="true"></i>
                        <i class="fa-solid fa-paw ps-blob-paw" aria-hidden="true"></i>
                    </div>
                    <img src="{{ asset('images/login-pets-hero.png') }}" alt="Happy golden retriever and gray tabby cat">
                    <div class="ps-centres-card"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i><strong>500+</strong><span>Trusted<br>Pet Care Centers</span></div>
                </div>
            </section>

            <section id="services" class="ps-services-section">
                <div class="ps-section-intro">
                    <p class="ps-eyebrow"><i class="fa-solid fa-paw" aria-hidden="true"></i> Our Services</p>
                    <h2>Everything your pet<br>needs, in one place</h2>
                    <p>From grooming to vet care, we make pet parenting easier and worry-free.</p>
                    <a href="#service-grid">Explore All Services <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                </div>
                <div id="service-grid" class="ps-service-grid">
                    @foreach($serviceCards as $card)
                        <a href="{{ $card['key'] ? route('portal.booking.show', [$tenant, $card['key']]) : '#contact' }}" class="ps-service-card">
                            <span class="ps-service-icon {{ $card['tone'] }}"><i class="{{ $card['icon'] }}" aria-hidden="true"></i></span>
                            <h3>{{ $card['name'] }}</h3>
                            <p>{{ $card['copy'] }}</p>
                            <strong>Learn more <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></strong>
                        </a>
                    @endforeach
                </div>
            </section>

            <section id="features" class="ps-features-section">
                <div class="ps-feature-copy">
                    <p class="ps-eyebrow"><i class="fa-solid fa-paw" aria-hidden="true"></i> Why Paw Street?</p>
                    <h2>Smarter care for<br>happier pets</h2>
                    <p>Our features are designed to save you time and keep your pet’s wellbeing first.</p>
                    <div class="ps-feature-list">
                        <span><i class="fa-regular fa-calendar-check"></i><b>Online Booking</b><small>Book services anytime, anywhere in a few taps.</small></span>
                        <span><i class="fa-regular fa-user"></i><b>Appointments</b><small>Store important info for each furry friend.</small></span>
                        <span><i class="fa-regular fa-bell"></i><b>Reminders</b><small>Never miss vaccines, checkups or bookings.</small></span>
                        <span><i class="fa-regular fa-calendar"></i><b>Smart Records</b><small>Service history and care updates together.</small></span>
                        <span><i class="fa-regular fa-file-lines"></i><b>Health Records</b><small>Access health history and care notes.</small></span>
                        <span><i class="fa-solid fa-lock"></i><b>Secure Payments</b><small>Safe, fast & multiple payment options.</small></span>
                    </div>
                </div>

                <div class="ps-product-stage">
                    <div class="ps-dashboard-preview">
                        <aside>
                            <div class="ps-mini-logo"><i class="fa-solid fa-paw"></i><b>Paw<br>Street</b></div>
                            <span class="selected"><i class="fa-solid fa-gauge-high"></i> Dashboard</span>
                            <span><i class="fa-regular fa-user"></i> My Pets</span><span><i class="fa-regular fa-calendar"></i> Appointments</span><span><i class="fa-solid fa-scissors"></i> Services</span><span><i class="fa-regular fa-heart"></i> Health Records</span><span><i class="fa-regular fa-bell"></i> Reminders</span><span><i class="fa-regular fa-credit-card"></i> Payments</span><span><i class="fa-solid fa-gear"></i> Settings</span>
                        </aside>
                        <main>
                            <header><div><b>Welcome back, Sarah! <i class="fa-solid fa-paw"></i></b><small>Here’s what’s happening with your pets today.</small></div><span><i class="fa-regular fa-bell"></i> Sarah</span></header>
                            <div class="ps-preview-columns">
                                <section>
                                    <b>Upcoming Appointment</b>
                                    <div class="ps-upcoming-card"><img src="{{ asset('images/golden_retriever.png') }}" alt=""><span><strong>Charlie</strong><small>Vet Checkup<br>Mar 26, 2026 · 11:00 AM</small></span></div>
                                    <div class="ps-recent"><b>Recent Services</b><p><i class="fa-solid fa-brush"></i> Grooming · Charlie <em>Completed</em></p><p><i class="fa-solid fa-baseball"></i> Day Care · Luna <em>Completed</em></p><p><i class="fa-solid fa-stethoscope"></i> Vet Checkup · Charlie <em>Completed</em></p></div>
                                </section>
                                <section>
                                    <b>Pet Profiles</b>
                                    <div class="ps-pet-profiles"><span><img src="{{ asset('images/golden_retriever.png') }}" alt=""><b>Charlie</b><small>Golden Retriever</small></span><span><img src="{{ asset('images/tabby_cat.png') }}" alt=""><b>Luna</b><small>British Shorthair</small></span><i class="fa-solid fa-plus"></i></div>
                                    <div class="ps-reminders"><b>Reminders <a href="#">View All</a></b><p><i class="fa-solid fa-syringe"></i> Rabies Vaccination <small>Charlie · Due in 5 days</small></p><p><i class="fa-solid fa-scissors"></i> Grooming <small>Charlie · Due in 20 days</small></p></div>
                                </section>
                            </div>
                        </main>
                    </div>

                    <div class="ps-phone-preview">
                        <div class="ps-phone-notch"></div>
                        <div class="ps-phone-screen">
                            <small>9:41</small><h3>Hi, Sarah! <i class="fa-solid fa-paw"></i></h3><p>Make your day and your pet’s day!</p>
                            <div class="ps-phone-card"><b>Upcoming</b><span><img src="{{ asset('images/golden_retriever.png') }}" alt=""><strong>Charlie<small>Vet Checkup · 10:00 AM</small></strong></span></div>
                            <div class="ps-phone-icons"><span><i class="fa-regular fa-calendar"></i>Book</span><span><i class="fa-solid fa-paw"></i>Pets</span><span><i class="fa-regular fa-bell"></i>Reminders</span><span><i class="fa-solid fa-bag-shopping"></i>Shop</span></div>
                            <div class="ps-phone-banner">Care that feels like home <i class="fa-solid fa-paw"></i><img src="{{ asset('images/golden_retriever.png') }}" alt=""></div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="testimonials" class="ps-testimonials-section">
                <div class="ps-testimonial-intro">
                    <p class="ps-eyebrow"><i class="fa-solid fa-paw"></i> Happy Pet Parents</p>
                    <h2>Loved by pets.<br>Trusted by parents.</h2>
                    <a href="#testimonials">View all reviews <i class="fa-solid fa-arrow-right"></i></a>
                </div>
                <div class="ps-testimonial-grid">
                    @foreach([
                        ['Paw Street made pet care so easy! Booking is seamless and the staff are amazing with my Charlie.','Anjali Mehta','Charlie’s Mom','dog'],
                        ['The best grooming experience for Luna! She comes back happy and fluffy every time.','Rohan Sharma','Luna’s Dad','cat'],
                        ['Reliable, caring and professional. I trust Paw Street with all of my pet’s needs.','Neha Kapoor','Bella’s Mom','dog'],
                        ['Great service and super convenient! Pet taxi is highly recommended.','Arjun Verma','Rocky’s Dad','dog'],
                    ] as $index => $review)
                        <article class="ps-testimonial-card">
                            <div class="ps-quote">“ <span>★★★★★</span></div>
                            <p>{{ $review[0] }}</p>
                            <footer><span class="ps-review-avatar avatar-{{ $index + 1 }}"></span><b>{{ $review[1] }}<small>{{ $review[2] }}</small></b><img src="{{ asset($review[3] === 'cat' ? 'images/tabby_cat.png' : 'images/golden_retriever.png') }}" alt=""></footer>
                        </article>
                    @endforeach
                </div>
            </section>

            <section class="ps-stats-bar" aria-label="Paw Street achievements">
                <span><i class="fa-solid fa-paw"></i><b>500+<small>Trusted Centers</small></b></span>
                <span><i class="fa-regular fa-heart"></i><b>25,000+<small>Happy Pets</small></b></span>
                <span><i class="fa-regular fa-calendar-check"></i><b>75,000+<small>Appointments Completed</small></b></span>
                <span><i class="fa-solid fa-users"></i><b>30,000+<small>Happy Pet Parents</small></b></span>
            </section>

            <section id="about" class="ps-cta-section">
                <div class="ps-cta-pets"><img src="{{ asset('images/login-pets-hero.png') }}" alt="Golden retriever and tabby cat"></div>
                <div class="ps-cta-copy"><h2>Ready to give your pet<br>the best care?</h2><p>Book a service today and experience the Paw Street difference.</p><div><a href="{{ $primaryBookingUrl }}" class="ps-purple-button">Book a Service Now <i class="fa-solid fa-arrow-right"></i></a><a href="#services" class="ps-outline-button">Explore Services</a></div></div>
                <div class="ps-cta-points"><span><i class="fa-solid fa-paw"></i> Trusted & Verified Care</span><span><i class="fa-solid fa-ticket"></i> Convenient & Easy Booking</span><span><i class="fa-solid fa-paw"></i> Safe, Loving & Reliable</span></div>
            </section>

            <footer id="contact" class="ps-site-footer">
                <div class="ps-footer-brand">
                    <a href="#home" class="ps-wordmark"><span class="ps-wordmark-paw"><i class="fa-solid fa-paw"></i></span><strong><span>Paw</span><span>Street</span></strong><small>where care is pawfect</small></a>
                    <p>Your trusted partner in pet care and wellness, because they deserve the best.</p>
                    <div class="ps-socials"><a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a><a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a><a href="#" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a><a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a></div>
                    <small>© {{ date('Y') }} Paw Street. All rights reserved.</small>
                </div>
                <div class="ps-footer-links"><div><b>Services</b><a href="{{ route('portal.booking.show', [$tenant, 'in-store-grooming']) }}">Grooming</a><a href="{{ route('portal.booking.show', [$tenant, 'veterinary']) }}">Vet Care</a><a href="{{ route('portal.booking.show', [$tenant, 'boarding']) }}">Boarding</a><a href="{{ route('portal.booking.show', [$tenant, 'pet-taxi']) }}">Pet Taxi</a><a href="{{ route('portal.booking.show', [$tenant, 'daycare']) }}">Day Care</a></div><div><b>Company</b><a href="#about">About Us</a><a href="#services">Our Centers</a><a href="#testimonials">Careers</a><a href="#features">Blog</a><a href="#contact">Contact Us</a></div><div><b>Support</b><a href="#contact">Help Center</a><a href="#contact">FAQ</a><a href="#contact">Privacy Policy</a><a href="#contact">Terms & Conditions</a></div></div>
                <div class="ps-contact-list"><b>Contact</b><span><i class="fa-regular fa-envelope"></i> hello@pawstreet.com</span><span><i class="fa-solid fa-phone"></i> +971 98765 43210</span><span><i class="fa-regular fa-clock"></i> Mon - Sat: 8AM - 8PM</span><span><i class="fa-solid fa-location-dot"></i> Find a Center</span></div>
                <form class="ps-newsletter" @submit.prevent><p>Stay updated with Paw Street tips, offers & pet care updates.</p><label><input type="email" placeholder="Enter your email" aria-label="Email for updates"><button type="submit" aria-label="Subscribe"><i class="fa-solid fa-arrow-right"></i></button></label></form>
                <i class="fa-solid fa-paw ps-footer-paw" aria-hidden="true"></i>
            </footer>
        </div>
    </div>
</x-layouts.portal>