@extends(auth()->check() ? 'layouts.app' : 'layouts.guest')

@section('content')

@if(!auth()->check())
<!-- Hero Section -->
<div class="gradient-bg text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight">
                Anuncie na <span class="text-green-300">Rede Freefi</span>
            </h1>
            <p class="text-xl md:text-2xl mb-8 text-purple-100">
                Alcance milhares de usuários através da nossa rede de WiFi gratuito
            </p>
            <a href="{{ route('login') }}" class="inline-block bg-white text-purple-700 font-bold py-4 px-8 rounded-full hover:bg-green-100 transition duration-300 transform hover:scale-105 shadow-lg">
                Começar Agora
            </a>
        </div>
    </div>
</div>

<!-- Benefícios -->
<div class="py-16 bg-white">
    <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-900 mb-12">
            Por que anunciar conosco?
        </h2>
        <div class="grid md:grid-cols-3 gap-8">
            <!-- Benefício 1 -->
            <div class="text-center p-6 rounded-xl hover:shadow-xl transition duration-300">
                <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-2">Grande Alcance</h3>
                <p class="text-gray-600">Milhares de usuários conectados diariamente em nossa rede</p>
            </div>

            <!-- Benefício 2 -->
            <div class="text-center p-6 rounded-xl hover:shadow-xl transition duration-300">
                <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-2">Fácil e Rápido</h3>
                <p class="text-gray-600">Processo simplificado em apenas 4 passos</p>
            </div>

            <!-- Benefício 3 -->
            <div class="text-center p-6 rounded-xl hover:shadow-xl transition duration-300">
                <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-2">Preços Acessíveis</h3>
                <p class="text-gray-600">Planos a partir de R$ 150,00 por semana</p>
            </div>
        </div>
    </div>
</div>

<!-- Como Funciona -->
<div class="py-16 bg-gray-50">
    <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-900 mb-12">
            Como Funciona?
        </h2>
        <div class="grid md:grid-cols-4 gap-8">
            <!-- Passo 1 -->
            <div class="text-center">
                <div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
                    1
                </div>
                <h3 class="font-semibold mb-2">Confirme sua Empresa</h3>
                <p class="text-sm text-gray-600">Valide o código da sua empresa</p>
            </div>

            <!-- Passo 2 -->
            <div class="text-center">
                <div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
                    2
                </div>
                <h3 class="font-semibold mb-2">Envie seu Criativo</h3>
                <p class="text-sm text-gray-600">Faça upload da sua imagem</p>
            </div>

            <!-- Passo 3 -->
            <div class="text-center">
                <div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
                    3
                </div>
                <h3 class="font-semibold mb-2">Escolha o Período</h3>
                <p class="text-sm text-gray-600">Selecione datas e periodicidade</p>
            </div>

            <!-- Passo 4 -->
            <div class="text-center">
                <div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
                    4
                </div>
                <h3 class="font-semibold mb-2">Pague e Pronto!</h3>
                <p class="text-sm text-gray-600">Pagamento via Mercado Pago</p>
            </div>
        </div>
    </div>
</div>

<!-- Preços -->
<div class="py-16 bg-white">
    <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-900 mb-12">
            Planos e Preços
        </h2>
        <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <!-- Plano Semanal -->
            <div class="border-2 border-gray-200 rounded-xl p-8 hover:border-purple-500 hover:shadow-xl transition duration-300">
                <h3 class="text-2xl font-bold mb-4">Semanal</h3>
                <div class="text-4xl font-extrabold text-purple-600 mb-4">
                    R$ 150<span class="text-lg text-gray-600">/semana</span>
                </div>
                <ul class="space-y-3 mb-6">
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        7 dias de exibição
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        Alcance total da rede
                    </li>
                </ul>
            </div>

            <!-- Plano Mensal -->
            <div class="border-2 border-purple-500 rounded-xl p-8 relative hover:shadow-2xl transition duration-300">
                <div class="absolute top-0 right-0 bg-green-500 text-white px-3 py-1 rounded-bl-lg rounded-tr-lg text-sm font-semibold">
                    Mais Popular
                </div>
                <h3 class="text-2xl font-bold mb-4">Mensal</h3>
                <div class="text-4xl font-extrabold text-purple-600 mb-4">
                    R$ 600<span class="text-lg text-gray-600">/mês</span>
                </div>
                <ul class="space-y-3 mb-6">
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        30 dias de exibição
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        Alcance total da rede
                    </li>
                    <li class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        Economia de R$ 0,00
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- CTA Final -->
<div class="gradient-secondary text-white py-16">
    <div class="max-w-4xl mx-auto text-center px-4">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">
            Pronto para começar?
        </h2>
        <p class="text-xl mb-8">
            Faça login e crie sua primeira campanha em minutos!
        </p>
        <a href="{{ route('login') }}" class="inline-block bg-white text-green-700 font-bold py-4 px-8 rounded-full hover:bg-purple-100 transition duration-300 transform hover:scale-105 shadow-lg">
            Acessar Agora
        </a>
    </div>
</div>

@else
<!-- Dashboard para usuário autenticado -->
<div class="py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">
            Olá, {{ auth()->user()->name }}! 👋
        </h1>
        <p class="text-gray-600">
            Bem-vindo ao painel de publicidade da <strong>{{ auth()->user()->empresa->name }}</strong>
        </p>
    </div>

    <!-- Cards de Ação -->
    <div class="grid md:grid-cols-2 gap-6 mb-8">
        <!-- Nova Publicidade -->
        <a href="{{ route('pedido.empresa') }}" class="block">
            <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-2xl transition duration-300 border-2 border-transparent hover:border-purple-500">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-100 p-3 rounded-lg mr-4">
                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900">Nova Publicidade</h3>
                </div>
                <p class="text-gray-600">Crie uma nova campanha de publicidade em apenas 4 passos</p>
            </div>
        </a>

        <!-- Meus Pedidos -->
        <a href="{{ route('meus-pedidos') }}" class="block">
            <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-2xl transition duration-300 border-2 border-transparent hover:border-green-500">
                <div class="flex items-center mb-4">
                    <div class="bg-green-100 p-3 rounded-lg mr-4">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900">Meus Pedidos</h3>
                </div>
                <p class="text-gray-600">Acompanhe o status de todas as suas campanhas</p>
            </div>
        </a>
    </div>

    <!-- Informações Rápidas -->
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
        <h4 class="font-semibold text-blue-900 mb-2">💡 Dica</h4>
        <p class="text-blue-800">
            Seus criativos serão analisados pelo franqueado antes da publicação. O processo geralmente leva até 24 horas.
        </p>
    </div>
</div>
@endif

@endsection