@extends('theme::layouts.app')

@section('content')
    <section class="relative bg-white dark:bg-surface-dark border-b border-gray-100 dark:border-gray-800">
        <div class="max-w-[1440px] mx-auto px-6 lg:px-10 py-20 lg:py-28 text-center relative z-10">
            <div
                class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-semibold uppercase tracking-wider mb-6 animate-in fade-in zoom-in duration-500">
                <span class="relative flex h-2 w-2">
                    <span
                        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
                </span>
                @lang('home.New Assets Added Weekly')
            </div>
            <h1
                class="text-4xl lg:text-6xl font-bold text-text-main dark:text-white tracking-tight mb-6 max-w-4xl mx-auto leading-tight">
                @lang('home.Premium digital resources for') <br class="hidden md:block" />
                <span class="text-primary relative inline-block">
                    @lang('home.modern creators')
                    <svg class="absolute w-full h-3 -bottom-1 left-0 text-accent/30" preserveAspectRatio="none"
                        viewBox="0 0 100 10">
                        <path d="M0 5 Q 50 10 100 5" fill="none" stroke="currentColor" stroke-width="8"></path>
                    </svg>
                </span>
            </h1>
            <p class="text-lg text-text-muted dark:text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
                @lang('home.Discover high-quality UI kits, templates, and icons designed to help you ship your next project faster. Trusted by over 10,000 developers.')
            </p>
            <div class="mt-12 max-w-lg mx-auto relative group">
                <form action="{{ route('frontend.products.all') }}" method="GET">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-text-muted group-focus-within:text-primary transition-colors">
                        <span class="material-symbols-outlined text-[22px]">search</span>
                    </div>
                    <input
                        name="q"
                        class="w-full pl-12 pr-4 py-3.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all shadow-sm"
                        placeholder="{{ __('home.Search products...') }}" type="text" />
                </form>
            </div>
        </div>
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
            <div class="absolute top-20 -left-20 w-72 h-72 bg-accent/10 rounded-full blur-3xl"></div>
        </div>
    </section>

    <section class="max-w-[1440px] mx-auto px-6 lg:px-10 py-16">
        <div class="flex items-end justify-between mb-10">
            <div>
                <h2 class="text-2xl font-bold text-text-main dark:text-white mb-2">@lang('home.heading|Latest Products')</h2>
                <p class="text-text-muted dark:text-gray-400">@lang('home.Fresh assets added to the marketplace this week.')</p>
            </div>
            <a class="hidden sm:flex items-center gap-1 text-primary font-medium hover:gap-2 transition-all"
                href="{{ route('frontend.products.all') }}">
                @lang('home.View all products')
                <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($products as $product)
                @include('theme::components.cards.product', ['product' => $product])
            @empty
                <!-- Fallback/Placeholder if no products exist (Optional, currently just showing empty message or could show static mockup items for dev) -->
                <div class="col-span-full text-center py-10 text-text-muted">
                    @lang('home.No products found.')
                </div>
            @endforelse
        </div>

        <div class="mt-12 text-center sm:hidden">
            <a class="inline-flex items-center justify-center w-full px-6 py-3 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-text-main dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                href="{{ route('frontend.products.all') }}">
                @lang('home.button|View All Products')
            </a>
        </div>
    </section>

    <section class="bg-background-light dark:bg-background-dark py-16 lg:py-24 border-t border-gray-100 dark:border-gray-800">
        <div class="max-w-[1440px] mx-auto px-6 lg:px-10">
            <div class="flex items-end justify-between mb-10">
                <div>
                    <h2 class="text-2xl font-bold text-text-main dark:text-white mb-2">@lang('home.heading|Latest from the Blog')</h2>
                    <p class="text-text-muted dark:text-gray-400">@lang('home.Insights into design, development, and digital business.')</p>
                </div>
                <a class="hidden sm:flex items-center gap-1 text-primary font-medium hover:gap-2 transition-all"
                    href="{{ route('blog.index') }}">
                    @lang('home.Read all articles')
                    <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @forelse($posts as $post)
                    @include('theme::components.cards.post', ['post' => $post])
                @empty
                    <div class="col-span-full text-center py-10 text-text-muted">
                        @lang('home.No blog posts found.')
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection