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

{{-- Define o título da página --}}
@section('title', $title ?? 'Planos de Assinatura')

@section('content')
{{-- Seção Cabeçalho da Página --}}
<div
    class="bg-gradient-to-r from-indigo-500 to-purple-600 dark:from-indigo-800 dark:to-purple-900 text-white py-12 px-4 text-center">
    <h1 class="text-4xl font-bold mb-2">Nossos Planos</h1>
    <p class="text-lg text-indigo-100">Escolha o plano ideal para o seu servidor.</p>
</div>

{{-- Seção de Cards de Planos --}}
<section class="py-16 bg-gray-100 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        @if($plans->isNotEmpty())
        {{-- Grid responsivo para os cards --}}
        {{-- Ajuste o número de colunas (md:grid-cols-2 lg:grid-cols-3) conforme a quantidade de planos --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            @foreach ($plans as $plan)
            {{-- Card do Plano --}}
            {{-- Adiciona uma borda diferente se for um plano específico, ex: 'lifetime-vip' --}}
            <div
                class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col
                                    {{ $plan->slug === 'lifetime-vip' ? 'border-2 border-yellow-500 dark:border-yellow-400' : 'border border-gray-200 dark:border-gray-700' }}">

                {{-- Nome do Plano --}}
                <h3 class="text-xl font-semibold text-center text-gray-900 dark:text-white mb-4">
                    {{ $plan->name }}
                </h3>

                {{-- Preço e Intervalo --}}
                <div class="text-center mb-6">
                    <span class="text-4xl font-bold text-gray-900 dark:text-white">
                        R$ {{ number_format($plan->price, 2, ',', '.') }}
                    </span>
                    <span class="text-sm text-gray-500 dark:text-gray-400">
                        {{-- Mapeia o intervalo --}}
                        / @switch($plan->interval)
                        @case('month') Mês @break
                        @case('year') Ano @break
                        @case('lifetime') Pagamento Único @break
                        @default {{ $plan->interval }}
                        @endswitch
                    </span>
                </div>

                {{-- Descrição / Lista de Recursos --}}
                <div class="text-sm text-gray-600 dark:text-gray-300 mb-6 flex-grow">
                    {{-- Se a descrição for curta, pode exibir direto --}}
                    {{-- Se for longa ou tiver itens, use prose ou uma lista ul --}}
                    <p class="prose prose-sm dark:prose-invert max-w-none">
                        {!! nl2br(e($plan->description)) !!} {{-- Converte quebras de linha e escapa HTML --}}
                        {{-- Se a descrição puder conter HTML seguro do admin: {!! $plan->description !!} --}}
                    </p>
                    {{-- Exemplo de lista de features (placeholders) --}}
                    {{-- <ul class="mt-4 space-y-2 list-disc list-inside">
                                    <li>Acesso a X temas</li>
                                    <li>Suporte Prioritário</li>
                                    <li>Atualizações</li>
                                </ul> --}}
                </div>

                {{-- Botão de Ação --}}
                <div class="mt-auto"> {{-- Empurra o botão para baixo --}}
                    <a href="https://wa.me/55XXXXXXXXXX?text=Olá! Tenho interesse no plano '{{ urlencode($plan->name) }}'."
                        {{-- SUBSTITUA XXXXXXXXXX --}} target="_blank" rel="noopener noreferrer" class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300
                                         {{ $plan->slug === 'lifetime-vip'
                                            ? 'bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500'
                                            : 'bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path
                                d="M18.16,3.71a11.5,11.5,0,0,0-15.43,1.1L1.93,5.62a1,1,0,0,0-.1,1.4l1.5,1.8a1,1,0,0,0,1.4.1l.1-.1a8.53,8.53,0,0,1,11.29.4L17,10.11a1,1,0,0,0,1.4-.1l1.5-1.8a1,1,0,0,0-.1-1.41l-.81-.81A11.47,11.47,0,0,0,18.16,3.71ZM14.16,8.1a3.88,3.88,0,0,0-4.32-.78,1,1,0,0,0-.65.93v.2a1,1,0,0,0,.44.86,4.46,4.46,0,0,0,5.31.41l.11-.07a1,1,0,0,0,.44-.86V8.66A1,1,0,0,0,14.16,8.1Z" />
                            <path
                                d="M10,18.9A8.87,8.87,0,0,1,1.13,10,8.88,8.88,0,0,1,10,1.13,8.88,8.88,0,0,1,18.87,10,8.88,8.88,0,0,1,10,18.9ZM10,2.87A7.13,7.13,0,0,0,2.87,10,7.13,7.13,0,0,0,10,17.13,7.13,7.13,0,0,0,17.13,10,7.13,7.13,0,0,0,10,2.87Z" />
                        </svg>
                        Contratar via WhatsApp
                    </a>
                </div>
            </div>
            @endforeach

        </div>
        @else
        <p class="text-center text-gray-500 dark:text-gray-400">Nenhum plano disponível no momento.</p>
        @endif

    </div>
</section>
@endsection