@extends('layouts.app')

@section('title', __('messages.home'))
@section('meta_description', 'Find your perfect life partner on Sayashee.lk, Sri Lanka\'s leading matrimony site. Browse thousands of verified profiles of brides and grooms.')
@section('meta_keywords', 'sri lankan matrimony, marriage proposals sri lanka, find life partner, wedding proposal, tamil matrimony, sinhala matrimony')
@section('container_class', 'container-fluid p-0')

@push('head')
    <link rel="preload" as="image" href="{{ asset('assets/images/buddhist_marriage.png') }}" fetchpriority="high">
@endpush

@section('content')
    <!-- Hero Section -->
    <div class="hero-fullscreen position-relative d-flex align-items-center">
        <div class="hero-overlay"></div>
        <div class="container position-relative z-index-10">
            <div class="row justify-content-center text-center">
                <div class="col-lg-10 col-xl-9">
                    <h1 class="display-3 fw-bold text-white mb-4 premium-font hero-title drop-shadow">
                        {!! __('messages.find_perfect_match') !!}
                    </h1>
                    <p class="lead text-white-50 mb-5 fs-4 hero-subtitle drop-shadow">
                        {{ __('messages.hero_subtitle') }}
                    </p>
                    
                    <!-- Glassmorphism Search Bar -->
                    <div class="glass-search-bar p-3 p-md-4 rounded-5 shadow-lg mx-auto hero-search-anim" style="max-width: 900px;">
                        <form action="{{ route('search') }}" method="GET" class="row g-3 align-items-end text-start">
                            <div class="col-md-3">
                                <label class="form-label text-white-50 small fw-bold text-uppercase mb-1 px-2">{{ __('messages.i_am_looking_for') }}</label>
                                <select name="gender" class="form-select glass-input border-0 text-white fw-bold shadow-none rounded-pill py-3 px-4">
                                    <option value="Bride" class="text-dark">{{ __('messages.bride') }}</option>
                                    <option value="Groom" class="text-dark">{{ __('messages.groom') }}</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label text-white-50 small fw-bold text-uppercase mb-1 px-2">{{ __('messages.age_range') }}</label>
                                <div class="d-flex align-items-center bg-glass-input rounded-pill px-2">
                                    <input type="number" name="age_from" class="form-control bg-transparent border-0 text-white fw-bold shadow-none text-center py-3" placeholder="20" value="20">
                                    <span class="text-white-50 fw-bold">{{ __('messages.to') }}</span>
                                    <input type="number" name="age_to" class="form-control bg-transparent border-0 text-white fw-bold shadow-none text-center py-3" placeholder="35" value="35">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label text-white-50 small fw-bold text-uppercase mb-1 px-2">{{ __('messages.religion') }}</label>
                                <select name="religion" class="form-select glass-input border-0 text-white fw-bold shadow-none rounded-pill py-3 px-4">
                                    <option class="text-dark">{{ __('messages.any') }}</option>
                                    <option value="Buddhist" class="text-dark" selected>{{ __('messages.buddhist') }}</option>
                                    <option value="Christian" class="text-dark">{{ __('messages.christian') }}</option>
                                    <option value="Hindu" class="text-dark">{{ __('messages.hindu') }}</option>
                                    <option value="Muslim" class="text-dark">{{ __('messages.muslim') }}</option>
                                </select>
                            </div>
                            <div class="col-md-2 mt-4 mt-md-0">
                                <button type="submit" class="btn btn-gold w-100 py-3 rounded-pill fw-bold shadow-sm glow-on-hover d-flex justify-content-center align-items-center gap-2">
                                    <i class="bi bi-search"></i> <span class="d-md-none">{{ __('messages.search') }}</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Scroll indicator -->
        <div class="scroll-indicator position-absolute bottom-0 start-50 translate-middle-x mb-4 text-center">
            <span class="text-white-50 small text-uppercase fw-bold letter-spacing-2">Scroll Down</span>
            <div class="mt-2">
                <i class="bi bi-chevron-down text-white fs-4 bounce-anim"></i>
            </div>
        </div>
    </div>

    <!-- Featured Profiles Section -->
    <section id="featured-profiles" class="py-5 bg-light-gradient position-relative overflow-hidden">
        <!-- Decorative bg blob -->
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: radial-gradient(circle at top right, rgba(15, 76, 92, 0.05), transparent 50%); pointer-events: none;"></div>
        
        <div class="container py-5 position-relative z-index-1">
            <div class="text-center mb-5 reveal-up">
                <span class="badge bg-teal-soft text-teal px-3 py-2 rounded-pill fw-bold mb-3 text-uppercase letter-spacing-1">{{ __('messages.featured_profiles') }}</span>
                <h2 class="display-4 premium-font fw-bold mb-3 text-dark">Discover Perfect Matches</h2>
                <p class="text-muted fs-5 max-w-700 mx-auto">{{ __('messages.discover_members') }}</p>
            </div>

            <div class="row g-4 justify-content-center">
                @if($profiles->count() > 0)
                    @foreach ($profiles->take(4) as $profile)
                    <div class="col-sm-6 col-lg-3 reveal-up" style="transition-delay: {{ $loop->index * 100 }}ms;">
                        <div class="card profile-card-vertical h-100 border-0 bg-white rounded-4 overflow-hidden">
                            <!-- Image Header -->
                            <div class="position-relative">
                                @php
                                    $isOwner = auth()->check() && auth()->id() === $profile->user_id;
                                    $isAdmin = auth()->check() && auth()->user()->isAdmin();
                                    $isPaidMember = auth()->check() && auth()->user()->profile && auth()->user()->profile->canUseRequests();
                                    $isApproved = $profile->photoRequests->where('status', 'approved')->isNotEmpty() ||
                                                  $profile->receivedInterests->where('status', 'accepted')->isNotEmpty() ||
                                                  $profile->sentInterests->where('status', 'accepted')->isNotEmpty();
                                    $shouldBlur = !$isOwner && !$isAdmin && !$isApproved && !$isPaidMember;
                                    $viewerId = auth()->check() ? 'N' . (auth()->id() + 1000) : 'Guest';
                                @endphp
                                <div class="secure-photo-wrap profile-img-container" data-viewer="Sayashee.lk &bull; {{ $viewerId }}">
                                    <img src="{{ $profile->primary_image_path }}" class="w-100 {{ $shouldBlur ? 'blurred-photo' : '' }}" alt="Profile Image" draggable="false" oncontextmenu="return false;" ondragstart="return false;">
                                    @if(!$shouldBlur && !$isPaidMember)
                                        <div class="wm-overlay" aria-hidden="true"></div>
                                    @endif
                                </div>
                                
                                @if($shouldBlur)
                                    <div class="position-absolute top-50 start-50 translate-middle text-center w-100 z-index-10">
                                        <div class="bg-dark bg-opacity-50 rounded-circle d-inline-flex p-3 backdrop-blur">
                                            <i class="bi bi-eye-slash-fill text-white fs-4"></i>
                                        </div>
                                    </div>
                                @endif
                                
                                <div class="position-absolute bottom-0 start-0 w-100 p-3 pt-5 bg-gradient-dark-bottom">
                                    <div class="d-flex justify-content-between align-items-end">
                                        <div>
                                            <h5 class="fw-bold mb-0 text-white text-shadow-sm">{{ $profile->user->name }}</h5>
                                            <p class="text-white-50 mb-0 small fw-bold">ID: N{{ $profile->id + 1000 }}</p>
                                        </div>
                                        @if($profile->is_verified)
                                            <i class="bi bi-patch-check-fill text-info fs-5 bg-white rounded-circle shadow-sm" style="line-height:1;"></i>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Details Body -->
                            <div class="card-body p-4 d-flex flex-column">
                                <div class="d-flex flex-wrap gap-2 mb-4">
                                    <span class="badge bg-light text-dark border"><i class="bi bi-calendar3 text-teal me-1"></i>{{ $profile->age }} yrs</span>
                                    <span class="badge bg-light text-dark border"><i class="bi bi-arrows-vertical text-teal me-1"></i>{{ $profile->height_formatted }}</span>
                                    <span class="badge bg-light text-dark border text-truncate" style="max-width: 100%;"><i class="bi bi-briefcase text-teal me-1"></i>{{ $profile->occupation }}</span>
                                    <span class="badge bg-light text-dark border"><i class="bi bi-geo-alt text-teal me-1"></i>{{ $profile->district }}</span>
                                    <span class="badge bg-light text-dark border"><i class="bi bi-heart text-teal me-1"></i>{{ $profile->religion }}</span>
                                </div>
                                
                                <a href="{{ route('profile.show', $profile->id) }}" class="btn btn-outline-teal w-100 mt-auto rounded-pill py-2 fw-bold stretched-link">
                                    {{ __('messages.view_profile') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                    <div class="col-12 text-center py-5">
                        <div class="bg-white p-5 rounded-4 shadow-sm mx-auto" style="max-width:500px;">
                            <i class="bi bi-people text-muted display-1 mb-3"></i>
                            <p class="text-muted fs-5">{{ __('messages.no_profiles_found') }}</p>
                        </div>
                    </div>
                @endif
            </div>
            
            <div class="text-center mt-5 pt-3 reveal-up">
                 <a href="{{ route('search') }}" class="btn btn-teal btn-lg px-5 rounded-pill fw-bold shadow-lg hover-scale">
                     {{ __('messages.view_all_profiles') }} <i class="bi bi-arrow-right ms-2"></i>
                 </a>
            </div>
        </div>
    </section>
    
    <!-- Bridging Connections Section -->
    <section class="py-6 position-relative overflow-hidden" style="background: linear-gradient(135deg, #0c3243 0%, #1c5f78 100%);">
        <!-- Decorative Elements -->
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); pointer-events: none;"></div>
        <div class="position-absolute" style="top: -50%; left: -10%; width: 50%; height: 200%; background: radial-gradient(circle, rgba(197, 160, 89, 0.15) 0%, transparent 70%); transform: rotate(30deg); pointer-events: none;"></div>
        
        <div class="container py-5 position-relative z-index-1">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-10 text-center reveal-up">
                    <div class="d-inline-flex align-items-center gap-3 mb-4 p-2 pe-4 rounded-pill glass-search-bar mx-auto border-0 bg-white bg-opacity-10">
                        <div class="bg-gold text-dark rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="bi bi-globe-americas fs-5"></i>
                        </div>
                        <span class="text-white fw-bold tracking-wider text-uppercase small">Global Connections</span>
                    </div>
                    
                    <h2 class="display-4 premium-font fw-bold mb-4 text-white drop-shadow" style="line-height: 1.2;">
                        Sayashee is building a <span class="text-gradient-gold">new bridge</span> with your loved ones in <span class="text-gold">Sri Lanka</span>
                    </h2>
                    
                    <p class="lead text-white-50 mx-auto mb-5 max-w-700 fs-4 lh-lg">
                        Whether you are in Australia or anywhere around the world, distance is no longer a barrier to finding your perfect soulmate. We connect hearts across borders.
                    </p>
                    
                    <div class="d-flex flex-wrap justify-content-center gap-4">
                        <div class="bg-white bg-opacity-10 backdrop-blur rounded-4 p-4 text-center border border-light border-opacity-10 shadow-lg hover-scale transition-all" style="width: 200px;">
                            <i class="bi bi-geo-alt-fill text-gold fs-1 mb-3 drop-shadow"></i>
                            <h4 class="text-white fw-bold mb-0">Sri Lanka</h4>
                        </div>
                        <div class="d-flex align-items-center text-white-50">
                            <i class="bi bi-arrow-left-right fs-2 bounce-anim" style="animation-direction: alternate; animation-duration: 1.5s;"></i>
                        </div>
                        <div class="bg-white bg-opacity-10 backdrop-blur rounded-4 p-4 text-center border border-light border-opacity-10 shadow-lg hover-scale transition-all" style="width: 200px;">
                            <i class="bi bi-airplane-engines-fill text-gold fs-1 mb-3 drop-shadow"></i>
                            <h4 class="text-white fw-bold mb-0">Australia</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- How it Works Section -->
    <section class="py-6 bg-white position-relative">
        <div class="container py-5">
            <div class="text-center mb-5 reveal-up">
                <span class="badge bg-teal-soft text-teal px-3 py-2 rounded-pill fw-bold mb-3 text-uppercase letter-spacing-1">Process</span>
                <h2 class="display-4 premium-font mb-4 fw-bold text-dark">{{ __('messages.how_it_works') }}</h2>
                <p class="text-muted fs-5 max-w-700 mx-auto">Finding your perfect match is simple and secure. Follow these three steps to begin your journey.</p>
            </div>
            
            <div class="row g-4 position-relative">
                <!-- Connecting Line (Desktop) -->
                <div class="d-none d-lg-block position-absolute top-50 start-50 translate-middle w-75" style="height: 2px; background: linear-gradient(90deg, transparent, #0c3243, transparent); z-index: 0; opacity: 0.2; transform: translateY(-30px) !important;"></div>
                
                <div class="col-lg-4 text-center z-index-1 reveal-up" style="transition-delay: 100ms;">
                    <div class="step-card bg-white p-5 rounded-4 h-100 shadow-sm border border-light transition-all hover-scale-sm">
                        <div class="step-icon-modern mx-auto bg-gradient-teal text-white shadow-lg mb-4">
                            <i class="bi bi-person-plus-fill fs-2"></i>
                        </div>
                        <h4 class="fw-bold h3 mb-3 text-dark">{{ __('messages.register') }}</h4>
                        <p class="text-muted mb-0 lh-lg">{{ __('messages.register_desc') }}</p>
                    </div>
                </div>
                <div class="col-lg-4 text-center z-index-1 reveal-up" style="transition-delay: 200ms;">
                    <div class="step-card bg-white p-5 rounded-4 h-100 shadow-sm border border-light transition-all hover-scale-sm position-relative">
                        <div class="step-icon-modern mx-auto bg-gradient-gold text-white shadow-lg mb-4" style="transform: scale(1.1);">
                            <i class="bi bi-search-heart-fill fs-2"></i>
                        </div>
                        <h4 class="fw-bold h3 mb-3 text-dark">{{ __('messages.connect') }}</h4>
                        <p class="text-muted mb-0 lh-lg">{{ __('messages.connect_desc') }}</p>
                    </div>
                </div>
                <div class="col-lg-4 text-center z-index-1 reveal-up" style="transition-delay: 300ms;">
                    <div class="step-card bg-white p-5 rounded-4 h-100 shadow-sm border border-light transition-all hover-scale-sm">
                        <div class="step-icon-modern mx-auto bg-gradient-pink text-white shadow-lg mb-4">
                            <i class="bi bi-chat-heart-fill fs-2"></i>
                        </div>
                        <h4 class="fw-bold h3 mb-3 text-dark">{{ __('messages.interact') }}</h4>
                        <p class="text-muted mb-0 lh-lg">{{ __('messages.interact_desc') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Success Stories (Masonry/Grid) -->
    <section class="py-6 bg-light-gradient border-top">
        <div class="container py-5">
            <div class="text-center mb-5 reveal-up">
                <span class="badge bg-gold-light text-gold px-3 py-2 rounded-pill fw-bold mb-3 text-uppercase letter-spacing-1">Testimonials</span>
                <h2 class="display-4 premium-font mb-4 fw-bold text-dark">{{ __('messages.success_stories') }}</h2>
                <p class="text-muted fs-5 max-w-700 mx-auto">Real couples who found their soulmates through our premium matchmaking service.</p>
            </div>
            
            <div class="row g-4 align-items-center">
                <div class="col-md-4 reveal-up" style="transition-delay: 100ms;">
                    <div class="testimonial-card bg-white p-4 p-lg-5 rounded-4 shadow-sm border-0 position-relative h-100 mt-md-4">
                        <i class="bi bi-quote position-absolute top-0 end-0 m-4 fs-1 text-teal opacity-25"></i>
                        <img src="{{ asset('assets/images/success-1.png') }}" alt="Success Story" class="rounded-circle mb-4 shadow border border-3 border-white" style="width: 90px; height: 90px; object-fit: cover;">
                        <div class="text-gold mb-3 d-flex gap-1">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                        </div>
                        <p class="text-muted fst-italic mb-4 lh-lg">"{{ __('messages.success_story_1_text') }}"</p>
                        <h5 class="fw-bold mb-0 text-dark">{{ __('messages.success_story_1_name') }}</h5>
                    </div>
                </div>
                <div class="col-md-4 reveal-up" style="transition-delay: 200ms;">
                    <div class="testimonial-card bg-teal text-white p-4 p-lg-5 rounded-4 shadow-lg border-0 position-relative h-100 transform-y-negative">
                        <i class="bi bi-quote position-absolute top-0 end-0 m-4 fs-1 text-white opacity-25"></i>
                        <img src="{{ asset('assets/images/success-2.png') }}" alt="Success Story" class="rounded-circle mb-4 shadow border border-3 border-teal" style="width: 100px; height: 100px; object-fit: cover;">
                        <div class="text-gold mb-3 d-flex gap-1">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                        </div>
                        <p class="text-white-50 fst-italic mb-4 lh-lg fs-5">"{{ __('messages.success_story_2_text') }}"</p>
                        <h5 class="fw-bold mb-0 text-white">{{ __('messages.success_story_2_name') }}</h5>
                    </div>
                </div>
                <div class="col-md-4 reveal-up" style="transition-delay: 300ms;">
                    <div class="testimonial-card bg-white p-4 p-lg-5 rounded-4 shadow-sm border-0 position-relative h-100 mt-md-4">
                        <i class="bi bi-quote position-absolute top-0 end-0 m-4 fs-1 text-teal opacity-25"></i>
                        <img src="{{ asset('assets/images/success-3.png') }}" alt="Success Story" class="rounded-circle mb-4 shadow border border-3 border-white" style="width: 90px; height: 90px; object-fit: cover;">
                        <div class="text-gold mb-3 d-flex gap-1">
                            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                        </div>
                        <p class="text-muted fst-italic mb-4 lh-lg">"{{ __('messages.success_story_3_text') }}"</p>
                        <h5 class="fw-bold mb-0 text-dark">{{ __('messages.success_story_3_name') }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="py-6 bg-white">
        <div class="container py-5">
             <div class="text-center mb-5 reveal-up">
                <h2 class="fw-bold display-4 premium-font text-dark mb-3">{{ __('messages.why_choose_us') }}</h2>
                <p class="text-muted fs-5">{{ __('messages.why_choose_subtitle') }}</p>
            </div>
            
            <div class="row g-4 g-lg-5 mt-4">
                <div class="col-md-4 reveal-up" style="transition-delay: 100ms;">
                    <div class="d-flex flex-column align-items-center text-center p-4 rounded-4 hover-shadow transition-all bg-light h-100 border-0">
                        <div class="mb-4 d-inline-flex align-items-center justify-content-center rounded-circle bg-white shadow-sm" style="width: 80px; height: 80px; color: #0c3243;">
                           <i class="bi bi-shield-check fs-2"></i>
                        </div>
                        <h4 class="fw-bold text-dark mb-3">{{ __('messages.verified_profiles') }}</h4>
                        <p class="text-muted small px-lg-3 lh-lg">{{ __('messages.verified_profiles_desc') }}</p>
                    </div>
                </div>
                 <div class="col-md-4 reveal-up" style="transition-delay: 200ms;">
                    <div class="d-flex flex-column align-items-center text-center p-4 rounded-4 hover-shadow transition-all bg-light h-100 border-0">
                        <div class="mb-4 d-inline-flex align-items-center justify-content-center rounded-circle bg-white shadow-sm" style="width: 80px; height: 80px; color: #0c3243;">
                           <i class="bi bi-lock-fill fs-2"></i>
                        </div>
                        <h4 class="fw-bold text-dark mb-3">{{ __('messages.privacy_title') }}</h4>
                        <p class="text-muted small px-lg-3 lh-lg">{{ __('messages.privacy_desc') }}</p>
                    </div>
                </div>
                 <div class="col-md-4 reveal-up" style="transition-delay: 300ms;">
                    <div class="d-flex flex-column align-items-center text-center p-4 rounded-4 hover-shadow transition-all bg-light h-100 border-0">
                        <div class="mb-4 d-inline-flex align-items-center justify-content-center rounded-circle bg-white shadow-sm" style="width: 80px; height: 80px; color: #0c3243;">
                           <i class="bi bi-heart-fill fs-2"></i>
                        </div>
                        <h4 class="fw-bold text-dark mb-3">{{ __('messages.perfect_matches') }}</h4>
                        <p class="text-muted small px-lg-3 lh-lg">{{ __('messages.perfect_matches_desc') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- App Footer is in layout -->
@endsection

@push('styles')
<style>
    /* Global Helpers */
    .py-6 { padding-top: 5rem; padding-bottom: 5rem; }
    .letter-spacing-1 { letter-spacing: 0.1em; }
    .letter-spacing-2 { letter-spacing: 0.2em; }
    .max-w-700 { max-width: 700px; }
    .bg-light-gradient { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); }
    .transition-all { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
    .hover-scale:hover { transform: scale(1.05); }
    .hover-scale-sm:hover { transform: scale(1.02); }
    
    /* Typography */
    .text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
    .drop-shadow { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); }
    .text-gradient-gold {
        background: linear-gradient(90deg, #C5A059 0%, #E8D399 50%, #C5A059 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Hero Section Immersive */
    .hero-fullscreen {
        min-height: 90vh;
        background-image: url('{{ asset('assets/images/buddhist_marriage.png') }}');
        background-size: cover;
        background-position: center 20%;
        background-attachment: fixed; /* Parallax effect */
        margin-top: -80px; /* Overlap navbar if it's transparent, else just adjust */
        padding-top: 100px;
    }
    
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.7) 100%);
        z-index: 1;
    }
    
    .z-index-10 { z-index: 10; }
    
    /* Glassmorphism */
    .glass-search-bar {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    .bg-glass-input {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .glass-input {
        background: rgba(0, 0, 0, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
    .glass-input:focus {
        background: rgba(0, 0, 0, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Buttons */
    .btn-gold {
        background: linear-gradient(135deg, #C5A059 0%, #a6854a 100%);
        border: none;
        color: white;
    }
    .glow-on-hover {
        position: relative;
        overflow: hidden;
    }
    .glow-on-hover::after {
        content: '';
        position: absolute;
        top: -50%; left: -50%;
        width: 200%; height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    .glow-on-hover:hover::after { opacity: 1; }
    
    .btn-teal {
        background-color: #0c3243;
        color: white;
        border: none;
    }
    .btn-teal:hover {
        background-color: #08222e;
        color: white;
    }
    .btn-outline-teal {
        border: 2px solid #0c3243;
        color: #0c3243;
        background: transparent;
    }
    .btn-outline-teal:hover {
        background: #0c3243;
        color: white;
    }

    /* Colors & Backgrounds */
    .bg-teal-soft { background-color: rgba(12, 50, 67, 0.1) !important; }
    .bg-gold-light { background-color: rgba(197, 160, 89, 0.1) !important; }
    .bg-dark-premium { background-color: #111111; }
    .text-teal { color: #0c3243 !important; }
    .text-gold { color: #C5A059 !important; }
    
    /* Gradient Backgrounds for Icons */
    .bg-gradient-teal { background: linear-gradient(135deg, #0c3243 0%, #1c5f78 100%); }
    .bg-gradient-gold { background: linear-gradient(135deg, #C5A059 0%, #E8D399 100%); }
    .bg-gradient-pink { background: linear-gradient(135deg, #9D2D44 0%, #c43956 100%); }
    .bg-gradient-dark-bottom { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); }

    /* Vertical Profile Cards */
    .profile-card-vertical {
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .profile-card-vertical:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    .profile-img-container {
        height: 280px;
        overflow: hidden;
    }
    .profile-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    .profile-card-vertical:hover .profile-img-container img {
        transform: scale(1.08);
    }
    .backdrop-blur { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

    /* VIP Section */
    .glass-feature-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        transition: all 0.3s;
    }
    .glass-feature-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(197, 160, 89, 0.3);
        transform: translateX(10px);
    }
    .icon-box-gold {
        width: 60px; height: 60px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: rgba(197, 160, 89, 0.1);
        color: #C5A059;
        border: 1px solid rgba(197, 160, 89, 0.2);
    }
    
    /* Process Steps */
    .step-icon-modern {
        width: 90px; height: 90px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    
    /* Testimonials */
    .transform-y-negative {
        transform: translateY(-20px);
    }
    @media (max-width: 768px) {
        .transform-y-negative { transform: translateY(0); }
    }

    /* Animations */
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(10px); }
    }
    .bounce-anim { animation: bounce 2s infinite ease-in-out; }
    
    @keyframes float {
        0%, 100% { transform: translateY(0) translateX(-50%); }
        50% { transform: translateY(-15px) translateX(-50%); }
    }
    .float-anim { animation: float 4s infinite ease-in-out; }
    
    /* Reveal Animations (Can be hooked with JS intersection observer) */
    .reveal-up {
        opacity: 0;
        transform: translateY(40px);
        animation: revealUp 0.8s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .reveal-left {
        opacity: 0;
        transform: translateX(-40px);
        animation: revealUp 0.8s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .reveal-right {
        opacity: 0;
        transform: translateX(40px);
        animation: revealUp 0.8s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    .hero-title { opacity: 0; animation: fadeUp 1s 0.2s forwards; transform: translateY(20px); }
    .hero-subtitle { opacity: 0; animation: fadeUp 1s 0.4s forwards; transform: translateY(20px); }
    .hero-search-anim { opacity: 0; animation: fadeUp 1s 0.6s forwards; transform: translateY(30px); }

    @keyframes fadeUp {
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes revealUp {
        to { opacity: 1; transform: translateY(0) translateX(0); }
    }

    /* Secure photo wrap */
    .secure-photo-wrap {
        position: relative;
        overflow: hidden;
        display: block;
        user-select: none;
        -webkit-user-select: none;
    }
    .secure-photo-wrap .wm-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 10;
        overflow: hidden;
    }
    .secure-photo-wrap .wm-overlay::before {
        content: attr(data-viewer);
        position: absolute;
        top: -100%; left: -100%;
        width: 300%; height: 300%;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255,255,255,0.20);
        white-space: nowrap;
        letter-spacing: 0.04em;
        transform: rotate(-35deg);
        text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        font-family: 'Inter', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blurred-photo {
        filter: blur(15px);
        -webkit-filter: blur(15px);
        transition: filter 0.3s ease;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Watermarks
    document.querySelectorAll('.secure-photo-wrap').forEach(function (wrap) {
        const viewer = wrap.getAttribute('data-viewer') || 'Sayashee.lk';
        const overlay = wrap.querySelector('.wm-overlay');
        if (overlay) {
            overlay.setAttribute('data-wm', Array(30).fill(viewer).join('       '));
        }
        wrap.addEventListener('contextmenu', function (e) { e.preventDefault(); });
        wrap.addEventListener('dragstart',   function (e) { e.preventDefault(); });
    });

    // Simple Reveal Animation using Intersection Observer
    const observerOptions = {
        threshold: 0.1,
        rootMargin: "0px 0px -50px 0px"
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // The CSS animation will handle the actual reveal when class is present
                // We just make sure it stays visible
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translate(0, 0)';
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    document.querySelectorAll('.reveal-up, .reveal-left, .reveal-right').forEach(el => {
        // Reset styles for observer
        el.style.animationPlayState = 'paused';
        
        // When in view, play it
        const playObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.animationPlayState = 'running';
                    playObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });
        
        playObserver.observe(el);
    });
});
</script>
@endpush

@guest
    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                var helpModalEl = document.getElementById('helpModal');
                if (helpModalEl) {
                    if (window.bootstrap) {
                        var helpModal = bootstrap.Modal.getInstance(helpModalEl) || new bootstrap.Modal(helpModalEl);
                        helpModal.show();
                    } else if (typeof jQuery !== 'undefined') {
                        jQuery('#helpModal').modal('show');
                    }
                }
            }, 30000); // 30 second delay
        });
    </script>
    @endpush
@endguest