{{--
Reward Loyalty - Proprietary Software
Copyright (c) 2026 NowSquare. All rights reserved.
See LICENSE file for terms.

Homepage - Portal Layout

Design Philosophy:
Centered, focused, with the same visual language as Smart Wallet.
Card visual centered with CTA below.
--}}

@extends('member.layouts.default')

@section('page_title', config('default.app_name'))

@section('content')
<div class="relative flex items-center justify-center bg-white dark:bg-secondary-950" style="min-height: calc(100vh - 177px);">
    
    {{-- Ambient Background --}}
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
        <div class="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-[500px] h-[500px] md:w-[700px] md:h-[700px] bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-blue-900/10 dark:to-purple-900/10 rounded-full blur-3xl opacity-60"></div>
        <div class="absolute bottom-0 left-0 translate-y-1/4 -translate-x-1/4 w-[400px] h-[400px] md:w-[500px] md:h-[500px] bg-gradient-to-tr from-amber-50/50 to-orange-50/50 dark:from-amber-900/10 dark:to-orange-900/10 rounded-full blur-3xl opacity-60"></div>
    </div>
<style>
    @media (max-width: 640px) {
        .absolute {
            max-width: 80vw; 
        }
        [style*="translateX"] {
            transform: translateX(var(--mobile-x, 0)) rotate(var(--mobile-rotate, 0)) !important;
        }
		#main-card img{
			max-width:100vh !important;
		}
		#main-card{
			height: 62%;
			width: 95%;
		}
    }
</style>
    {{-- Main Content - Centered --}}
    <div class="relative w-full  mx-auto px-6 py-12 text-center"
         x-data="{ mounted: false }"
         x-init="setTimeout(() => mounted = true, 50)">
        
        <div x-show="mounted"
             x-transition:enter="transition ease-out duration-600"
             x-transition:enter-start="opacity-0 translate-y-4"
             x-transition:enter-end="opacity-100 translate-y-0">
            
            {{-- Card Visual --}}
            <div class="relative h-[320px] md:h-[380px] flex items-center justify-center mb-8">
                
                {{-- Central Card --}}
               
				<div class="hidden sm:block absolute  h-[160px] md:w-[320px] md:h-[200px] rounded-2xl shadow-xl z-0 transition-transform duration-1000 overflow-hidden border border-white/50"
                     style="background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%); transform: rotate(-15deg) translateX(-100px) translateY(10px);">
                    <img src="{{ asset('card.png') }}" class="absolute inset-0 w-full h-full object-cover opacity-50">
                    <div class="p-6 text-slate-700 font-black opacity-20 text-xl uppercase tracking-tighter text-left">Silver</div>
                </div>

                {{-- Gold Card (Back Right) --}}
                <div class="hidden sm:block absolute  h-[200px] md:w-[320px] md:h-[200px] rounded-2xl shadow-xl z-10 transition-transform duration-1000 overflow-hidden border border-white/50"
                     style="background: linear-gradient(135deg, #fef3c7 0%, #d97706 100%); transform: rotate(12deg) translateX(140px) translateY(25px);">
                   <img src="{{ asset('card.png') }}" class="absolute inset-0 w-full h-full object-cover opacity-50">
                    <div class="p-6 text-amber-900 font-black opacity-20 text-xl uppercase tracking-tighter text-left">Gold</div>
                </div>

                {{-- VIP Card (Center Front) --}}
                <div id="main-card"class="relative w-[400px] h-[250px] md:w-[350px] md:h-[220px] rounded-2xl shadow-[0_40px_80px_-15px_rgba(0,0,0,0.5)] z-20 overflow-hidden border border-white/20"
                     style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
                    
                    <img src="{{ asset('card.png') }}" class="absolute inset-0 w-full h-full object-cover opacity-50">
                    {{-- Gloss Effect --}}
                    <div class="absolute inset-0 bg-gradient-to-tr from-white/10 via-transparent to-transparent pointer-events-none"></div>
                </div>

                {{-- Floating Icons --}}
                <div class="absolute top-4 right-2 md:right-6 w-11 h-11 md:w-14 md:h-14 bg-white dark:bg-secondary-800 rounded-2xl shadow-lg flex items-center justify-center portal-float">
                    <x-ui.icon icon="coins" class="w-5 h-5 md:w-7 md:h-7 text-amber-500" />
                </div>

                <div class="absolute bottom-10 left-2 md:left-6 w-14 h-14 md:w-16 md:h-16 bg-white dark:bg-secondary-800 rounded-full shadow-xl flex items-center justify-center portal-float portal-delay-2">
                    <x-ui.icon icon="gift" class="w-6 h-6 md:w-7 md:h-7 text-pink-500" />
                </div>

                <div class="absolute top-1/4 left-4 md:left-10 w-10 h-10 md:w-12 md:h-12 bg-white dark:bg-secondary-800 rounded-xl shadow-md flex items-center justify-center portal-float portal-delay-4">
                    <x-ui.icon icon="credit-card" class="w-4 h-4 md:w-5 md:h-5 text-blue-500" />
                </div>

                <div class="absolute bottom-6 right-6 md:right-14 w-11 h-11 md:w-14 md:h-14 bg-white dark:bg-secondary-800 rounded-2xl shadow-lg flex items-center justify-center portal-float portal-delay-1">
                    <x-ui.icon icon="award" class="w-5 h-5 md:w-7 md:h-7 text-emerald-500" />
                </div>

                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-9 h-9 md:w-10 md:h-10 bg-white dark:bg-secondary-800 rounded-full shadow-md flex items-center justify-center portal-float portal-delay-3">
                    <x-ui.icon icon="star" class="w-4 h-4 md:w-5 md:h-5 text-purple-500" />
                </div>
            </div>

            {{-- Text --}}
            <h1 class="text-2xl sm:text-3xl font-semibold text-secondary-900 dark:text-white tracking-tight mb-2">
                {{ trans('common.portal_welcome') }}
            </h1>
            
            <p class="text-secondary-500 dark:text-secondary-400 text-base mb-8 max-w-sm mx-auto">
                {{ trans('common.portal_tagline') }}
            </p>

{{-- Partners Carousel Section --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<div class="py-5  overflow-hidden">
<div class="max-w-7xl mx-auto px-6">
    <h1 class="text-center text-xs font-black text-secondary-400 uppercase tracking-[0.6em] italic">
        Our Partners
    </h1>

    <div class="owl-carousel partners-carousel px-4">
        @foreach($partners as $partner)
            <div class="item">
                {{-- زودنا الـ h هنا لـ 48 والـ p لـ 6 --}}
                <a href="{{ route('member.show.partner', ['partner_id' => $partner->id]) }}" class="flex items-center justify-center grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all duration-500 h-48 p-6 bg-white dark:bg-transparent rounded-2xl">
                    @if($partner->getAvatarUrl())
                        {{-- الـ h-32 يعني الارتفاع بقى 128px وده رقم ضخم للوجوهات --}}
                        <img src="{{ $partner->getAvatarUrl() }}" 
                             alt="{{ $partner->name }}" 
                             class="max-h-32 w-auto object-contain transform hover:scale-110 transition-transform duration-300">
                    @else
                        <span class="text-xl font-black text-secondary-400 uppercase tracking-widest">{{ $partner->name }}</span>
                    @endif
                </a>
            </div>
        @endforeach
    </div>
	<a href="{{ route('member.all.partners')}}" class="inline-flex items-center gap-2 px-4 py-2.5 
                               text-sm font-medium text-white 
                               bg-primary-600 hover:bg-primary-500
                               rounded-xl shadow-sm hover:shadow-md
                               focus:outline-none focus:ring-2 focus:ring-primary-500/20
                               transition-all duration-200 active:scale-[0.98]">
    View All Partners
</a>
</div>
</div>
<style>
    @keyframes marquee {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }
    @keyframes marquee2 {
        0% { transform: translateX(100%); }
        100% { transform: translateX(0%); }
    }
    .animate-marquee {
        animation: marquee 25s linear infinite;
    }
    .animate-marquee2 {
        animation: marquee2 25s linear infinite;
    }
    /* توقف الحركة عند الوقوف بالماوس */
    .group:hover .animate-marquee,
    .group:hover .animate-marquee2 {
        animation-play-state: paused;
    }
</style>
            
			{{-- CTA --}}
                @guest('member')
				<div class="mt-16 px-6">
					<div class="max-w-5xl mx-auto rounded-2xl overflow-hidden
								bg-black dark:bg-white
								text-white dark:text-black
								border border-gray-800 dark:border-gray-300
								shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)]"
								style="background-image: url({{ asset('cta.png') }});
										background-size: cover;
									">

					<div class="p-10 md:p-14 text-center">
						{{-- Title --}}
						<h2 class="text-2xl md:text-3xl font-bold mb-3 dark:text-secondary-900"> {{ trans('common.cta_title') }}</h2>

            {{-- Subtitle --}}
            <p class="text-2xl text-black dark:text-white max-w-md mx-auto mb-4">
                {{ trans('common.cta_sub_title') }}
            </p>

            {{-- Buttons --}}
			<!--p class="text-sm text-black dark:text-white mb-4">
                        {{ trans('common.dont_have_account') }}
			</p-->
			<p class="text-sm text-black dark:text-white">
                        <a href="{{ route('member.register') }}" 
                           class="text-primary-600 dark:text-primary-400 font-medium hover:underline underline-offset-2">
                            
                        </a>
                    </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="{{ route('member.register') }}"
                   class="px-8 py-3.5 rounded-xl font-semibold
                          bg-white text-black
                          dark:bg-black dark:text-white
                          transition-all duration-300
                          hover:scale-105 active:scale-95">
                    {{ trans('common.sign_up_free') }}
                </a>
                <div class="text-white dark:text-black">
					<a href="{{ route('member.login') }}"
					   class="px-8 py-3.5 rounded-xl
							  border border-white/30 dark:border-black
							  bg-transparent dark:bg-white
							  text-inherit dark:bg-brown
							  hover:bg-white/10 dark:hover:bg-black/10
							  transition-all duration-300" style="background-color:#a1723f">
						
						{{ trans('common.sign_in') }}
					</a>
				</div>

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

                    
                @else
                    <a href="{{ route('member.cards') }}"
                       class="group relative flex items-center justify-center w-full px-6 py-3.5 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-primary-500/25 active:scale-[0.98]">
                        <x-ui.icon icon="wallet" class="w-4 h-4 mr-2.5 opacity-80 group-hover:opacity-100 transition-opacity" />
                        {{ trans('common.access_my_wallet') }}
                    </a>
                @endguest
            

            {{-- Trust indicators --}}
            <div class="mt-8 flex items-center justify-center gap-6 text-xs text-secondary-400 dark:text-secondary-500">
                <span class="flex items-center gap-1.5">
                    <x-ui.icon icon="shield-check" class="w-3.5 h-3.5" />
                    {{ trans('common.secure') }}
                </span>
                <span class="w-px h-3 bg-secondary-200 dark:bg-secondary-700"></span>
                <span class="flex items-center gap-1.5">
                    <x-ui.icon icon="zap" class="w-3.5 h-3.5" />
                    {{ trans('common.instant') }}
                </span>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes portalFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-12px); }
    }
    .portal-float { animation: portalFloat 5s ease-in-out infinite; }
    .portal-delay-1 { animation-delay: 1s; }
    .portal-delay-2 { animation-delay: 2s; }
    .portal-delay-3 { animation-delay: 3s; }
    .portal-delay-4 { animation-delay: 4s; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
$(document).ready(function(){
    $(".partners-carousel").owlCarousel({
        loop: true,           // لف للأبد
        margin: 40,           // المسافة بين اللوجوهات
        nav: false,           // شيل الأسهم
        dots: false,          // شيل النقط
        autoplay: true,       // تشغيل تلقائي
        autoplaySpeed: 4000,  // سرعة الحركة (كل ما زاد الرقم بقت أنعم)
        autoplayTimeout: 4000, // مفيش انتظار بين الصور
        slideTransition: 'linear', // أهم خاصية عشان الحركة تبقى مستمرة مفيش "تكات"
        responsive:{
            0:{ items: 2 },
            600:{ items: 4 },
            1000:{ items: 6 }
        }
    });
});
</script>
@endsection
