@extends('layouts.public', ['title' => config('app.name').' — Marketplace'])

@section('content')
    @php $disableRemote = config('ui.disable_remote_media'); @endphp
    <!-- Hero (Blue, animated WordPress-related icons) -->
    <section class="relative overflow-hidden bg-gradient-to-b from-blue-700 to-blue-500 text-white">
        <style>
            @keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
            @keyframes driftX { 0% { transform: translateX(0) } 50% { transform: translateX(12px) } 100% { transform: translateX(0) } }
            @keyframes driftY { 0% { transform: translateY(0) } 50% { transform: translateY(12px) } 100% { transform: translateY(0) } }
            @keyframes spinSlow { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }
            .bubble { box-shadow: 0 10px 24px rgba(8,47,73,.25); border: 1px solid rgba(255,255,255,.15); }
            .anim-a { animation: float 5s ease-in-out infinite; }
            .anim-b { animation: driftX 6s ease-in-out infinite; }
            .anim-c { animation: driftY 7s ease-in-out infinite; }
            .anim-d { animation: spinSlow 18s linear infinite; }
        </style>
        <!-- Floating tech icons (Devicon) -->
        <div class="absolute inset-0 pointer-events-none z-0" aria-hidden="true">
            <!-- WordPress -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-a" style="left:8%; top:12%; animation-delay:.1s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/wordpress/wordpress-plain.svg' }}" class="w-8 h-8" title="WordPress" alt="WordPress" loading="lazy" />
            </div>
            <!-- WooCommerce -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-b" style="left:20%; top:38%; animation-delay:.2s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/woocommerce/woocommerce-original.svg' }}" class="w-8 h-8" title="WooCommerce" alt="WooCommerce" loading="lazy" />
            </div>
            <!-- Laravel -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-c" style="left:72%; top:22%; animation-delay:.3s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/laravel/laravel-original.svg' }}" class="w-8 h-8" title="Laravel" alt="Laravel" loading="lazy" />
            </div>
            <!-- HTML5 -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-a" style="left:34%; top:18%; animation-delay:.4s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg' }}" class="w-8 h-8" title="HTML5" alt="HTML5" loading="lazy" />
            </div>
            <!-- CSS3 -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-b" style="left:68%; top:56%; animation-delay:.5s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg' }}" class="w-8 h-8" title="CSS3" alt="CSS3" loading="lazy" />
            </div>
            <!-- JavaScript -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-d" style="left:14%; top:52%; animation-delay:.6s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg' }}" class="w-8 h-8" title="JavaScript" alt="JavaScript" loading="lazy" />
            </div>
            <!-- PHP -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-b" style="left:52%; top:72%; animation-delay:.7s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg' }}" class="w-8 h-8" title="PHP" alt="PHP" loading="lazy" />
            </div>
            <!-- GitHub -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-a" style="left:80%; top:36%; animation-delay:.8s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg' }}" class="w-8 h-8" title="GitHub" alt="GitHub" loading="lazy" />
            </div>
            <!-- MySQL -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-c" style="left:40%; top:64%; animation-delay:.9s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg' }}" class="w-8 h-8" title="MySQL" alt="MySQL" loading="lazy" />
            </div>
            <!-- React -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-b" style="left:62%; top:10%; animation-delay:1s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg' }}" class="w-8 h-8" title="React" alt="React" loading="lazy" />
            </div>
            <!-- Vue.js -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-a" style="left:26%; top:60%; animation-delay:1.1s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg' }}" class="w-8 h-8" title="Vue.js" alt="Vue.js" loading="lazy" />
            </div>
            <!-- Bootstrap -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-c" style="left:48%; top:18%; animation-delay:1.2s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg' }}" class="w-8 h-8" title="Bootstrap" alt="Bootstrap" loading="lazy" />
            </div>
            <!-- Linux -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-b" style="left:12%; top:34%; animation-delay:1.3s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg' }}" class="w-8 h-8" title="Linux" alt="Linux" loading="lazy" />
            </div>
            <!-- Firebase -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-a" style="left:86%; top:20%; animation-delay:1.4s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg' }}" class="w-8 h-8" title="Firebase" alt="Firebase" loading="lazy" />
            </div>
            <!-- jQuery -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-c" style="left:28%; top:28%; animation-delay:1.5s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jquery/jquery-original.svg' }}" class="w-8 h-8" title="jQuery" alt="jQuery" loading="lazy" />
            </div>
            <!-- Python -->
            <div class="absolute bubble bg-white/10 rounded-xl p-3 anim-d" style="left:70%; top:12%; animation-delay:1.6s">
                <img src="{{ $disableRemote ? asset('assets/fallback-tech.svg') : 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg' }}" class="w-8 h-8" title="Python" alt="Python" loading="lazy" />
            </div>
        </div>
        <div class="max-w-7xl mx-auto px-4 py-24 text-center relative z-10">
            <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-4">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-cyan-200">{{ $heroTitle }}</span>
            </h1>
            <p class="text-lg md:text-xl text-cyan-100 mb-8">{{ $heroSubtitle }}</p>
            <div class="flex justify-center gap-3">
                <a href="{{ $heroCtaUrl }}" class="px-6 py-3 rounded bg-white text-blue-700 shadow hover:bg-cyan-50 transition">{{ $heroCtaText }}</a>
                <a href="{{ route('products.index') }}" class="px-6 py-3 rounded bg-cyan-600 text-white hover:bg-cyan-500 transition">Explore Market</a>
            </div>
        </div>
    </section>
    <!-- Hero -->
   <!-- 🌟 HERO SECTION -->


    <!-- Collections (Screenshot-matched) -->
    @include('partials.category-grid')
@include('partials.why-choose-us')

    

    <!-- Testimonials -->
    <section class="max-w-7xl mx-auto px-4 py-16">
        <div class="text-center mb-8">
            <h2 class="text-3xl md:text-4xl font-bold">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-blue-600">What do our users say?</span>
            </h2>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach([
                ['name' => 'Ayesha', 'role' => 'Designer', 'quote' => 'Beautiful templates and super easy to use.'],
                ['name' => 'Rafi', 'role' => 'Frontend Dev', 'quote' => 'Plugins saved me days of work. Highly recommended!'],
                ['name' => 'Nadia', 'role' => 'Founder', 'quote' => 'Great value, fast support and clean UI.'],
            ] as $t)
                <div class="bg-white rounded-xl shadow p-6 border border-blue-50">
                    <div class="flex items-center gap-1 text-emerald-600 mb-2">
                        @for($i=0;$i<5;$i++)
                            <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.802 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.802-2.034a1 1 0 00-1.176 0l-2.802 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.88 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                        @endfor
                    </div>
                    <p class="text-slate-700">“{{ $t['quote'] }}”</p>
                    <div class="mt-3 text-sm text-slate-500">— {{ $t['name'] }}, {{ $t['role'] }}</div>
                </div>
            @endforeach
        </div>
    </section>

    <!-- Recently added products -->
    <section class="max-w-7xl mx-auto px-4 py-16">
        <div class="text-center mb-8">
            <h2 class="text-3xl md:text-4xl font-bold">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-500">Recently added products</span>
            </h2>
        </div>
        @if(($featuredProducts ?? collect())->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5 md:gap-6">
                @foreach($featuredProducts as $product)
                    <div class="group rounded-2xl bg-white shadow-sm hover:shadow-lg transition-transform hover:-translate-y-0.5 border border-sky-100 overflow-hidden">
                        <a href="{{ route('products.show', $product->slug) }}" class="block overflow-hidden">
                            @if(!empty($product->image_url))
                                @php $src = $disableRemote ? asset('assets/fallback-tech.svg') : $product->image_url; @endphp
                                <img class="h-40 md:h-48 w-full object-cover group-hover:scale-[1.02] transition-transform duration-300" src="{{ $src }}" alt="{{ $product->name }}" />
                            @elseif(!empty($product->image_path))
                                @php $src = $disableRemote ? asset('assets/fallback-tech.svg') : Storage::disk($product->image_disk ?? 'public')->url($product->image_path); @endphp
                                <img class="h-40 md:h-48 w-full object-cover group-hover:scale-[1.02] transition-transform duration-300" src="{{ $src }}" alt="{{ $product->name }}" />
                            @else
                                <div class="h-40 md:h-48 w-full bg-gradient-to-r from-blue-600 to-cyan-500"></div>
                            @endif
                        </a>
                        <div class="p-4">
                            <div class="text-xs text-slate-500 uppercase">{{ ucfirst($product->type) }}</div>
                            <div class="font-semibold mt-1 group-hover:text-blue-700 text-base md:text-lg">{{ $product->name }}</div>
                            <div class="text-sm text-slate-600 mt-1 line-clamp-2">{{ \Illuminate\Support\Str::limit($product->description, 90) }}</div>
                            <div class="mt-2 flex items-center justify-between">
                                <div class="text-sm font-semibold">{{ number_format(($product->price_cents ?? 0) / 100, 2) }} {{ $product->currency }}</div>
                                <div class="flex items-center gap-2">
                                    <form method="POST" action="{{ route('checkout.buy_now') }}">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $product->id }}" />
                                        <button type="submit" class="px-2.5 py-1.5 rounded-full bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white text-sm shadow hover:from-violet-700 hover:to-fuchsia-700">Buy Now</button>
                                    </form>
                                    <a href="{{ route('products.show', $product->slug) }}" class="px-2.5 py-1.5 rounded-full text-white bg-gradient-to-r from-sky-600 to-blue-600 shadow hover:from-sky-700 hover:to-blue-700 transition text-sm">View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="rounded-xl bg-gradient-to-r from-blue-50 to-cyan-50 p-6 text-center text-slate-600">
                No products yet. Add some from the admin dashboard.
            </div>
        @endif
    </section>

    <!-- Pricing -->
    <section id="membership" class="relative">
        <div class="absolute inset-x-0 h-28 -mt-16 bg-gradient-to-b from-blue-700/30 to-transparent -z-10"></div>
        <div class="max-w-7xl mx-auto px-4 py-16 text-center">
            <h2 class="text-3xl md:text-4xl font-bold">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-500">Membership Plans</span>
            </h2>
            <p class="text-slate-600 mt-2">Simple, clear pricing. Upgrade anytime.</p>
            <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                @if(($membershipPlans ?? collect())->count() > 0)
                    @foreach($membershipPlans as $plan)
                        @php($discount = (int)($plan->discount_percent ?? 0))
                        @php($price = (int)($plan->price_cents ?? 0))
                        @php($final = $discount>0 ? (int) round($price*(100-$discount)/100) : $price)
                        @php($accentFrom = $plan->card_accent_from_hex ?? null)
                        @php($accentTo = $plan->card_accent_to_hex ?? null)
                        @php($ctaFrom = $plan->cta_from_hex ?? '#2563EB')
                        @php($ctaTo = $plan->cta_to_hex ?? '#4F46E5')
                        @php($slug = strtolower($plan->slug ?? ''))
                        <div class="relative bg-white rounded-2xl shadow-xl p-6 border border-blue-100 flex flex-col overflow-hidden">
                            <div class="absolute inset-x-0 -top-10 h-24 blur-xl opacity-60" data-accent-from="{{ $accentFrom }}" data-accent-to="{{ $accentTo }}"></div>
                            <div class="flex items-start justify-between relative">
                                <div>
                                    <div class="inline-flex items-center gap-2">
                                        <span class="text-xs text-slate-500">Membership Plan</span>
                                        @if(!empty($plan->badge_label))
                                            <span class="px-2 py-0.5 text-xs rounded-full" data-badge-bg="{{ $plan->badge_bg_hex ?? '#EDE9FE' }}" data-badge-text="{{ $plan->badge_text_hex ?? '#6D28D9' }}">{{ $plan->badge_label }}</span>
                                        @elseif($slug==='pro')
                                            <span class="px-2 py-0.5 text-xs rounded-full bg-violet-100 text-violet-700">Popular</span>
                                        @elseif($slug==='ultimate')
                                            <span class="px-2 py-0.5 text-xs rounded-full bg-emerald-100 text-emerald-700">Best Value</span>
                                        @endif
                                    </div>
                                    <div class="mt-1 text-2xl font-bold">{{ $plan->name }}</div>
                                    <div class="text-xs text-slate-500 mt-1">Billing: {{ ucfirst($plan->billing_period) }}</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-3xl font-extrabold">{{ number_format($final/100, 2) }} {{ $plan->currency }}</div>
                                    @if($discount>0)
                                        <div class="text-xs text-slate-500">Regular: <span class="line-through">{{ number_format($price/100, 2) }} {{ $plan->currency }}</span> • Save {{ $discount }}%</div>
                                    @endif
                                </div>
                            </div>

                            <div class="mt-4 text-slate-700">
                                <p>Unlock premium resources, faster support, and continuous updates tailored for professionals.</p>
                            </div>

                            @php($details = $plan->details ?? [])
                            @php($total = count($details))
                            @php($previewCount = 8)
                            <div class="mt-6">
                                <div class="text-sm font-semibold mb-2">What’s included</div>
                                <ul class="space-y-2" id="features-{{ $slug }}">
                                    @foreach($details as $idx => $d)
                                        @php($hidden = $idx >= $previewCount)
                                        <li class="flex items-center gap-2 {{ $hidden ? 'hidden' : '' }}" data-extra="{{ $hidden ? '1' : '0' }}">
                                            @if($d['included'] ?? false)
                                                <span class="inline-block w-5 h-5 rounded-full bg-emerald-500/20 text-emerald-700 grid place-items-center">✓</span>
                                            @else
                                                <span class="inline-block w-5 h-5 rounded-full bg-rose-500/20 text-rose-700 grid place-items-center">✕</span>
                                            @endif
                                            <span class="text-slate-700 text-sm">{{ $d['label'] ?? '' }}</span>
                                        </li>
                                    @endforeach
                                    @if($total === 0)
                                        <li class="text-slate-500 text-sm">Plan details not available yet.</li>
                                    @endif
                                </ul>
                                @if($total > $previewCount)
                                    <button
                                        class="mt-3 inline-flex items-center gap-2 text-sm px-3 py-1.5 rounded-full bg-slate-100 hover:bg-slate-200"
                                        data-expanded="0"
                                        onclick="(function(){var list=document.getElementById('features-{{ $slug }}'); if(!list)return; var btn=event.currentTarget; var expanded=btn.getAttribute('data-expanded')==='1'; var extras=list.querySelectorAll('li[data-extra=\'1\']'); if(!expanded){ extras.forEach(function(el){el.classList.remove('hidden')}); btn.textContent='Hide extra features'; btn.setAttribute('data-expanded','1'); } else { extras.forEach(function(el){el.classList.add('hidden')}); btn.textContent='Show all features ({{ $total }})'; btn.setAttribute('data-expanded','0'); } })()"
                                    >Show all features ({{ $total }})</button>
                                @endif
                            </div>

                            <div class="mt-6 flex items-center gap-3">
                                <form method="POST" action="{{ route('checkout.buy_now') }}">
                                    @csrf
                                    <input type="hidden" name="membership_plan_id" value="{{ $plan->id }}" />
                                    <button class="px-4 py-2 rounded-full text-white text-sm shadow" data-cta-from="{{ $ctaFrom }}" data-cta-to="{{ $ctaTo }}">Buy Now</button>
                                </form>
                                <a href="{{ route('membership.plan', $plan->slug) }}" class="px-4 py-2 rounded-full bg-slate-100 hover:bg-slate-200 text-sm">Details</a>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="md:col-span-3">
                        <div class="bg-white rounded-2xl shadow p-6 border border-blue-50 text-center text-slate-600">No active membership plans found.</div>
                    </div>
                @endif
            </div>

            <div class="mt-8 text-sm text-slate-500">7 Day Risk-Free Refund</div>
        </div>
        <script>
            (function(){
                function applyGradient(el, from, to) {
                    if (!from || !to) return;
                    el.style.backgroundImage = `linear-gradient(to right, ${from}, ${to})`;
                }
                function init() {
                    document.querySelectorAll('[data-accent-from][data-accent-to]').forEach(function(el){
                        applyGradient(el, el.getAttribute('data-accent-from'), el.getAttribute('data-accent-to'));
                    });
                    document.querySelectorAll('[data-cta-from][data-cta-to]').forEach(function(el){
                        applyGradient(el, el.getAttribute('data-cta-from'), el.getAttribute('data-cta-to'));
                    });
                    document.querySelectorAll('[data-badge-bg], [data-badge-text]').forEach(function(el){
                        var bg = el.getAttribute('data-badge-bg');
                        var fg = el.getAttribute('data-badge-text');
                        if (bg) el.style.backgroundColor = bg;
                        if (fg) el.style.color = fg;
                    });
                }
                if (document.readyState === 'complete' || document.readyState === 'interactive') { init(); }
                else { document.addEventListener('DOMContentLoaded', init); }
            })();
        </script>
    </section>

    <!-- Trust / rating -->
    <section class="max-w-7xl mx-auto px-4 pb-20 text-center">
        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white shadow">
            <span class="text-slate-700">We’re rated Excellent</span>
            <div class="flex items-center text-emerald-600">
                @for($i=0;$i<5;$i++)
                    <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.802 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.802-2.034a1 1 0 00-1.176 0l-2.802 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.88 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                @endfor
            </div>
        </div>
    </section>
@endsection