@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-2xl">
    <div class="bg-white rounded-lg shadow-lg p-8 text-center">
        <!-- Ícone de bloqueio -->
        <div class="mb-6">
            <div class="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
            </div>
        </div>

        <h1 class="text-2xl font-bold text-gray-800 mb-4">Analytics Indisponível</h1>
        
        @if(!$parentHasSubscription)
            <p class="text-gray-600 mb-6">
                Para acessar as funcionalidades de Analytics, o escritório principal precisa ter um plano ativo.
            </p>
            
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <p class="text-blue-800 text-sm">
                    <strong>Colaborador:</strong> Entre em contato com o administrador do escritório para ativar um plano que inclua Analytics.
                </p>
            </div>
        @elseif(isset($parentNeedsUpgrade) && $parentNeedsUpgrade)
            <p class="text-gray-600 mb-6">
                O plano atual do escritório não inclui funcionalidades de Analytics.
            </p>
            
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                <p class="text-yellow-800 text-sm">
                    <strong>Colaborador:</strong> Entre em contato com o administrador do escritório para fazer upgrade para um plano que inclua Analytics.
                </p>
            </div>
        @endif

        <!-- Benefícios do Analytics -->
        <div class="bg-gray-50 rounded-lg p-6 mb-8">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">O que você terá com Analytics:</h3>
            <ul class="text-left text-gray-600 space-y-2">
                <li class="flex items-center">
                    <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Estatísticas detalhadas de visualizações
                </li>
                <li class="flex items-center">
                    <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Cliques em links e contatos
                </li>
                <li class="flex items-center">
                    <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Downloads de vCard
                </li>
                <li class="flex items-center">
                    <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Relatórios de engajamento
                </li>
            </ul>
        </div>

        <!-- Botões de ação -->
        <div class="space-y-3">
            <a href="{{ route('dashboard') }}" class="inline-block bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium transition-colors">
                Voltar ao Dashboard
            </a>
        </div>
    </div>
</div>
@endsection