@extends('layouts.public') {{-- Usa o layout público --}}

{{-- Define o título da página (opcional) --}}
@section('title', 'Temas Premium para Mu Online - ' . config('app.name'))

@section('content')
{{-- Seção Hero (Exemplo Simples) --}}
<div
    class="bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-800 dark:to-indigo-900 text-white py-20 px-4 text-center">
    <h1 class="text-4xl md:text-5xl font-bold mb-4">Temas Incríveis para seu Servidor de Mu Online</h1>
    <p class="text-lg md:text-xl mb-8 text-indigo-100">Dê uma cara profissional ao seu site com nossos templates
        exclusivos.</p>
    <a href="#temas" {{-- Link interno para a seção de temas --}}
        class="bg-white text-indigo-600 font-semibold py-3 px-6 rounded-lg shadow hover:bg-gray-100 transition duration-300">
        Ver Temas
    </a>
</div>

{{-- Seção de Temas (Cards) --}}
<section id="temas" class="py-16 bg-gray-50 dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Nossos Temas</h2>

        @if($themes->isNotEmpty())
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {{-- Loop através dos temas passados pelo controller --}}
            @foreach ($themes as $theme)
            <div
                class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transition duration-300 hover:shadow-xl">
                {{-- Imagem do Tema --}}
                <a href="{{ route('public.themes.show', $theme->slug) }}" {{-- Rota de detalhe (a ser criada) --}}>
                    @if($theme->preview_image_path && Storage::disk('public')->exists($theme->preview_image_path))
                    <img src="{{ Storage::disk('public')->url($theme->preview_image_path) }}"
                        alt="Preview {{ $theme->name }}" class="w-full h-48 object-cover">
                    @else
                    <div
                        class="w-full h-48 bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-gray-500">
                        Sem Preview
                    </div>
                    @endif
                </a>
                {{-- Informações do Tema --}}
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">{{ $theme->name }}</h3>
                    {{-- Descrição Curta (Opcional) - Limita o tamanho --}}
                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
                        {{ Str::limit($theme->description, 100) }} {{-- Helper Str para limitar texto --}}
                    </p>
                    {{-- Botão/Link --}}
                    <a href="{{ route('public.themes.show', $theme->slug) }}" {{-- Rota de detalhe (a ser criada) --}}
                        class="inline-block bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium py-2 px-4 rounded-md transition duration-300">
                        Ver Detalhes
                    </a>
                    {{-- Adicionar preço se aplicável --}}
                    {{-- <span class="text-lg font-bold text-gray-800 dark:text-gray-200 ml-4">R$ XX,XX</span> --}}
                </div>
            </div>
            @endforeach
        </div>
        @else
        <p class="text-center text-gray-500 dark:text-gray-400">Nenhum tema disponível no momento.</p>
        @endif

        {{-- Link para ver todos os temas (se houver mais) --}}
        <div class="text-center mt-12">
            <a href="{{ route('public.themes.index') }}" {{-- Rota do catálogo (a ser criada) --}}
                class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                Ver todos os temas &rarr;
            </a>
        </div>

    </div>
</section>

{{-- Outras Seções da Homepage (Ex: Features, CTA) podem vir aqui --}}

@endsection