@extends('layouts.public')

@section('title', config('app.name') . ' | ' . $siteName)

@section('content')

<style>
    .home-hero-blob { border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%; }
    .home-hero-blob-2 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
</style>

<div class="bg-[#3d2f75] text-white text-center text-sm py-2.5 px-4">
    <span class="opacity-95">Join our live learning sessions and competitive exam batches.</span>
    <a href="{{ route('courses.index') }}" class="ml-2 font-semibold text-amber-300 hover:text-amber-200 underline-offset-2 hover:underline">Explore courses</a>
</div>

<section class="relative overflow-hidden bg-gradient-to-br from-orange-50 via-white to-indigo-50/60">
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-24 right-[12%] w-32 h-32 rounded-full border-4 border-amber-400/30"></div>
        <div class="absolute bottom-32 left-8 w-3 h-3 rounded-full bg-amber-400/80"></div>
        <div class="absolute top-40 left-[20%] w-2 h-2 rounded-full bg-[#4c3d8f]/40"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-14 pb-24 lg:pt-16 lg:pb-28 relative z-10">
        <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
            <div class="lg:w-1/2 text-center lg:text-left">
                <p class="text-xs font-bold tracking-[0.2em] text-[#4c3d8f] uppercase mb-4">Competitive exam excellence</p>
                <h1 class="text-4xl sm:text-5xl lg:text-[3.25rem] font-extrabold text-gray-900 leading-tight mb-6">
                    Prepare for <span class="text-amber-500">CSS, PMS</span> and one-paper exams with confidence.
                </h1>
                <p class="text-lg text-gray-600 max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                    Study with {{ $siteName }} through structured programs, guided mentoring, and exam-focused teaching built for serious aspirants.
                </p>
                <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 mb-10">
                    <a href="{{ route('courses.index') }}" class="inline-flex items-center justify-center bg-amber-500 hover:bg-amber-400 text-gray-900 font-bold px-8 py-3.5 rounded-xl shadow-lg shadow-amber-500/25 transition w-full sm:w-auto">
                        Explore All Courses
                    </a>
                    <a href="#featured-courses" class="inline-flex items-center justify-center gap-2 font-semibold text-[#4c3d8f] hover:text-[#3d2f75] w-full sm:w-auto">
                        <span class="inline-flex w-10 h-10 rounded-full border-2 border-[#4c3d8f]/30 items-center justify-center">
                            <svg class="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        View featured courses
                    </a>
                </div>
                <div class="flex items-center justify-center lg:justify-start gap-3">
                    <div class="flex -space-x-3">
                        @foreach (['https://i.pravatar.cc/100?img=12','https://i.pravatar.cc/100?img=45','https://i.pravatar.cc/100?img=32','https://i.pravatar.cc/100?img=68'] as $av)
                            <img src="{{ $av }}" alt="" class="w-10 h-10 rounded-full ring-2 ring-white object-cover">
                        @endforeach
                    </div>
                    <p class="text-sm font-medium text-gray-700">Trusted by <span class="text-[#4c3d8f] font-bold">ambitious learners</span> across Pakistan</p>
                </div>
            </div>
            <div class="lg:w-1/2 relative w-full max-w-lg lg:max-w-none">
                <div class="relative mx-auto w-[min(100%,420px)] lg:w-full">
                    <div class="absolute -inset-6 bg-gradient-to-tr from-amber-200/40 to-[#4c3d8f]/15 rounded-[3rem] blur-2xl"></div>
                    <div class="relative grid grid-cols-2 gap-4 items-center">
                        <div class="home-hero-blob overflow-hidden shadow-2xl shadow-[#4c3d8f]/20 ring-1 ring-black/5 mt-8">
                            <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=600&q=80" alt="Students learning online" class="w-full h-64 object-cover">
                        </div>
                        <div class="home-hero-blob-2 overflow-hidden shadow-2xl shadow-amber-500/10 ring-1 ring-black/5 -mt-4">
                            <img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=600&q=80" alt="Focused study" class="w-full h-64 object-cover">
                        </div>
                    </div>
                    <div class="absolute -right-2 top-6 bg-white rounded-2xl shadow-xl px-4 py-3 flex items-center gap-3 max-w-[220px] border border-gray-100">
                        <span class="flex w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 items-center justify-center">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        </span>
                        <div class="text-left">
                            <p class="text-xs font-bold text-gray-900">Exam-ready guidance</p>
                            <p class="text-[11px] text-gray-500">Stay focused with structured prep</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-20 -mt-8 lg:-mt-14 mb-20">
        <form action="{{ route('courses.index') }}" method="GET" class="bg-[#4c3d8f] rounded-2xl shadow-2xl shadow-[#4c3d8f]/35 p-6 md:p-8 flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
            <div class="flex-1 w-full">
                <label class="block text-xs font-semibold text-white/80 uppercase tracking-wider mb-2">Find your courses</label>
                <input type="search" name="search" value="{{ request('search') }}" placeholder="Keywords" class="w-full rounded-xl border-0 bg-white/95 text-gray-900 placeholder-gray-400 px-4 py-3.5 shadow-inner focus:ring-2 focus:ring-amber-400">
            </div>
            <div class="flex-1 w-full">
                <label class="block text-xs font-semibold text-white/80 uppercase tracking-wider mb-2">Category</label>
                <select name="category" class="w-full rounded-xl border-0 bg-white/95 text-gray-900 px-4 py-3.5 shadow-inner focus:ring-2 focus:ring-amber-400">
                    <option value="">All categories</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->slug }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="w-full md:w-auto md:shrink-0">
                <button type="submit" class="w-full md:w-auto bg-[#2d215c] hover:bg-[#231a4a] text-white font-bold px-8 py-3.5 rounded-xl transition shadow-lg">
                    Search Now
                </button>
            </div>
        </form>
    </div>
</section>

<section class="bg-white border-y border-gray-100 py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-8 max-w-2xl mx-auto">Serious exam preparation starts with a disciplined system</p>
        <div class="flex flex-wrap justify-center items-center gap-x-12 gap-y-6 opacity-40 grayscale">
            @foreach (['CSS','PMS','PCS','FPSC','PPSC','One Paper'] as $brand)
                <span class="text-xl font-black text-gray-800 tracking-tight">{{ $brand }}</span>
            @endforeach
        </div>
    </div>
</section>

<section class="py-20 bg-gray-50/80">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-6 mb-12">
            <div class="text-center sm:text-left">
                <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900">Popular <span class="text-amber-500">Topics</span> To Learn</h2>
                <p class="text-gray-600 mt-3 max-w-xl">Browse categories aligned with competitive exams, mentoring, and targeted preparation.</p>
            </div>
            <a href="{{ route('courses.index') }}" class="inline-flex justify-center items-center bg-amber-500 hover:bg-amber-400 text-gray-900 font-bold px-6 py-3 rounded-xl transition self-center sm:self-auto">
                View All Topics
            </a>
        </div>
        @php
            $icons = ['palette','megaphone','code-bracket','heart','camera','chart-bar','cpu-chip','language'];
        @endphp
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            @foreach($categories->take(8) as $idx => $cat)
                <a href="{{ route('courses.index', ['category' => $cat->slug]) }}" class="group relative flex flex-col items-center text-center p-6 rounded-2xl border-2 transition bg-white {{ $idx === 1 ? 'border-amber-400 bg-amber-50/50 shadow-md' : 'border-gray-100 hover:border-[#4c3d8f]/30 hover:shadow-md' }}">
                    <span class="w-14 h-14 rounded-2xl bg-[#4c3d8f]/10 text-[#4c3d8f] flex items-center justify-center mb-4 group-hover:bg-[#4c3d8f] group-hover:text-white transition">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658.813A48.64 48.64 0 0 1 12 13.904c2.122 0 4.184.326 6.136.939a50.59 50.59 0 0 0 2.658-.813"/></svg>
                    </span>
                    <span class="font-bold text-gray-900">{{ $cat->name }}</span>
                    @if($cat->children_count ?? 0)
                        <span class="text-xs text-gray-500 mt-1">{{ $cat->children_count }}+ tracks</span>
                    @endif
                </a>
            @endforeach
        </div>
        @if($categories->isEmpty())
            <p class="text-center text-gray-500 py-8">Categories will appear here once added in admin.</p>
        @endif
    </div>
</section>

<section id="featured-courses" class="py-20 bg-white" x-data="{ tab: 'all' }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10">
            <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900">Featured <span class="text-amber-500">Courses</span></h2>
            <p class="text-gray-600 mt-3 max-w-2xl mx-auto">Programs built for competitive exam preparation and academic growth.</p>
        </div>
        <div class="flex flex-wrap justify-center gap-2 mb-12">
            <button type="button" @click="tab = 'all'" :class="tab === 'all' ? 'bg-[#4c3d8f] text-white shadow-lg' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'" class="px-5 py-2.5 rounded-full text-sm font-semibold transition">All Courses</button>
            @foreach($categories->take(4) as $cat)
                <button type="button" @click="tab = '{{ $cat->slug }}'" :class="tab === '{{ $cat->slug }}' ? 'bg-[#4c3d8f] text-white shadow-lg' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'" class="px-5 py-2.5 rounded-full text-sm font-semibold transition">{{ $cat->name }}</button>
            @endforeach
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($featuredCourses as $course)
                @php
                    $catSlug = $course->category->slug ?? '';
                    $catName = $course->category->name ?? 'General';
                @endphp
                <div
                    x-show="tab === 'all' || tab === '{{ $catSlug }}'"
                    x-transition.opacity.duration.200ms
                    class="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden flex flex-col group"
                >
                    <a href="{{ route('courses.show', $course->slug) }}" class="block relative aspect-[16/10] overflow-hidden">
                        @if($course->thumbnail)
                            <img src="{{ Storage::url($course->thumbnail) }}" alt="{{ $course->title }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-[#4c3d8f]/20 to-amber-100 flex items-center justify-center text-[#4c3d8f]/40">
                                <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/></svg>
                            </div>
                        @endif
                        <div class="absolute top-3 left-3 flex flex-wrap gap-2">
                            <span class="bg-white/95 text-xs font-bold px-3 py-1 rounded-full text-[#4c3d8f] shadow">{{ $catName }}</span>
                            @if($loop->first)
                                <span class="bg-amber-500 text-xs font-bold px-3 py-1 rounded-full text-gray-900 shadow">Featured</span>
                            @endif
                        </div>
                    </a>
                    <div class="p-6 flex-1 flex flex-col">
                        <a href="{{ route('courses.show', $course->slug) }}" class="font-bold text-lg text-gray-900 group-hover:text-[#4c3d8f] transition mb-3 line-clamp-2">{{ $course->title }}</a>
                        <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-500 mb-6">
                            <span>{{ $course->duration_weeks ? $course->duration_weeks . ' week program' : 'Self-paced' }}</span>
                            <span>{{ $course->enrollments_count }}+ enrolled</span>
                        </div>
                        <div class="mt-auto flex items-center justify-between pt-4 border-t border-gray-100">
                            <div>
                                @if($course->is_free)
                                    <span class="text-xl font-extrabold text-emerald-600">Free</span>
                                @elseif($course->discount_price)
                                    <div>
                                        <span class="text-xl font-extrabold text-gray-900">PKR {{ number_format((float) $course->discount_price) }}</span>
                                        <span class="ml-2 text-sm text-gray-400 line-through">PKR {{ number_format((float) $course->price) }}</span>
                                    </div>
                                @else
                                    <span class="text-xl font-extrabold text-gray-900">PKR {{ number_format((float) $course->price) }}</span>
                                @endif
                            </div>
                            <a href="{{ route('courses.show', $course->slug) }}" class="inline-flex bg-amber-500 hover:bg-amber-400 text-gray-900 font-bold px-5 py-2.5 rounded-xl transition text-sm">
                                Enroll Now
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        @if($featuredCourses->isEmpty())
            <p class="text-center text-gray-500 py-12">Published courses will show here soon.</p>
        @endif

        <div class="text-center mt-14">
            <a href="{{ route('courses.index') }}" class="inline-flex items-center font-bold text-[#4c3d8f] hover:text-[#3d2f75] text-lg gap-2">
                Browse full catalog
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</section>

<section class="py-24 relative overflow-hidden bg-gradient-to-b from-indigo-50/90 to-white">
    <div class="absolute inset-0 opacity-30 pointer-events-none" style="background-image: radial-gradient(circle at 20% 30%, #c4b5fd 0, transparent 45%), radial-gradient(circle at 80% 60%, #fcd34d 0, transparent 40%);"></div>
    <div class="max-w-4xl mx-auto px-4 text-center relative z-10">
        <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 leading-tight mb-6">
            Get Started On <span class="text-amber-500">Focused Preparation</span> With Our Online Courses
        </h2>
        <p class="text-gray-600 text-lg mb-10">Structured paths, answer-writing practice, and mentorship designed to improve outcomes.</p>
        <div class="flex flex-wrap justify-center gap-3">
            @foreach (['CSS','PMS','Essay','Precis','Current Affairs','One Paper'] as $role)
                <span class="px-4 py-2 rounded-full bg-white border border-gray-200 text-sm font-semibold text-gray-700 shadow-sm">{{ $role }}</span>
            @endforeach
        </div>
    </div>
</section>

<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-14 items-center">
            <div class="relative">
                <div class="grid grid-cols-2 gap-4">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500&q=80" alt="" class="rounded-2xl shadow-lg w-full h-56 object-cover col-span-2">
                    <img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=400&q=80" alt="" class="rounded-2xl shadow-lg w-full h-40 object-cover">
                    <div class="rounded-2xl bg-amber-500 text-gray-900 p-6 flex flex-col justify-center shadow-lg">
                        <p class="text-3xl font-black leading-none">11k+</p>
                        <p class="text-sm font-bold mt-2 opacity-90">Recorded sessions delivered</p>
                    </div>
                </div>
            </div>
            <div>
                <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6 leading-tight">
                    Build Consistency, <span class="text-amber-500">Confidence</span>, and Exam Strategy
                </h2>
                <ul class="space-y-4 mb-8">
                    @foreach ([
                        'Start with guided batches and structured lecture flow',
                        'Practice with notes, mock questions, and review sessions',
                        'Get mentor-backed support for high-stakes exam preparation',
                    ] as $item)
                        <li class="flex gap-3 items-start">
                            <span class="flex w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 items-center justify-center shrink-0 mt-0.5">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <span class="text-gray-700 font-medium">{{ $item }}</span>
                        </li>
                    @endforeach
                </ul>
                <a href="{{ route('courses.index') }}" class="inline-flex bg-[#4c3d8f] hover:bg-[#3d2f75] text-white font-bold px-8 py-3.5 rounded-xl transition shadow-lg shadow-[#4c3d8f]/25">
                    Find the Course You Like
                </a>
            </div>
        </div>
    </div>
</section>

@endsection