{% extends "base.html" %}

{% block title %}Início - {{ professor.nome }}{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-gradient text-white py-20 md:py-32">
    <div class="container mx-auto px-4 text-center">
        <!-- Avatar -->
        <div class="mb-8 relative inline-block">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-xl opacity-50 pulse-animation"></div>
            <img src="{{ url_for('static', filename='images/avatar.jpg') }}" 
                 alt="{{ professor.nome }}"
                 class="relative w-40 h-40 rounded-full border-4 border-white/20 shadow-2xl mx-auto">
        </div>
        
        <h1 class="text-4xl md:text-6xl font-bold mb-6 font-poppins">
            {{ professor.nome }}
        </h1>
        
        <p class="text-xl md:text-2xl mb-8 text-white/90">
            {{ professor.titulo }}
        </p>
        
        <div class="flex flex-wrap justify-center gap-4 mb-12 text-white/80">
            {% for especialidade in professor.especialidades %}
            <span class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full">
                <i class="fas fa-check"></i> {{ especialidade }}
            </span>
            {% endfor %}
        </div>
        
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ url_for('contato') }}" 
               class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition text-lg">
                <i class="fas fa-comments mr-2"></i> Fale Comigo
            </a>
            <a href="{{ url_for('aulas') }}" 
               class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition text-lg">
                <i class="fas fa-book-open mr-2"></i> Ver Aulas
            </a>
        </div>
    </div>
</section>

<!-- Destaques -->
<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Por que escolher minhas aulas?</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                Metodologia personalizada, experiência de {{ professor.experiencia }} e abordagem inclusiva
            </p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-8 rounded-2xl shadow-lg card-hover text-center">
                <div class="text-5xl mb-6">🎯</div>
                <h3 class="text-xl font-bold mb-4">Metodologia Personalizada</h3>
                <p class="text-gray-600">
                    Cada aluno recebe um plano de estudos adaptado às suas necessidades, ritmo e objetivos específicos.
                </p>
            </div>
            
            <div class="bg-white p-8 rounded-2xl shadow-lg card-hover text-center">
                <div class="text-5xl mb-6">🤝</div>
                <h3 class="text-xl font-bold mb-4">Abordagem Inclusiva</h3>
                <p class="text-gray-600">
                    Especialista em educação inclusiva com metodologias adaptadas para TEA e neurodiversidade.
                </p>
            </div>
            
            <div class="bg-white p-8 rounded-2xl shadow-lg card-hover text-center">
                <div class="text-5xl mb-6">⚡</div>
                <h3 class="text-xl font-bold mb-4">Flexibilidade Total</h3>
                <p class="text-gray-600">
                    Aulas presenciais ou online, horários flexíveis e pacotes personalizados para todas as necessidades.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Áreas de Atuação (Preview) -->
<section class="py-20 bg-gray-100">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Áreas que Ministro Aulas</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                Especializado em diversas áreas da tecnologia e educação
            </p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-6">
            {% for area in areas[:3] %}
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="text-3xl mb-4">{{ area.icone }}</div>
                <h3 class="text-xl font-bold mb-3">{{ area.titulo }}</h3>
                <p class="text-gray-600 mb-4">{{ area.descricao[:100] }}...</p>
                <div class="flex flex-wrap gap-2">
                    {% for modalidade in area.modalidades %}
                    <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">
                        {{ modalidade }}
                    </span>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-12">
            <a href="{{ url_for('aulas') }}" 
               class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-800">
                Ver todas as áreas de atuação
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- Pacotes (Preview) -->
<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Pacotes de Aulas</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                Escolha o plano ideal para seus objetivos de aprendizado
            </p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
            {% for pacote in pacotes[:3] %}
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden card-hover">
                <div class="p-8">
                    <h3 class="text-2xl font-bold mb-4">{{ pacote.nome }}</h3>
                    <div class="text-3xl font-bold text-blue-600 mb-6">{{ pacote.preco }}</div>
                    <p class="text-gray-600 mb-6">{{ pacote.duracao }}</p>
                    
                    <ul class="space-y-3 mb-8">
                        {% for recurso in pacote.recursos[:3] %}
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                            <span>{{ recurso }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                    
                    <button onclick="solicitarContato('{{ pacote.nome }}')"
                            class="w-full bg-blue-500 text-white py-3 rounded-lg font-semibold hover:bg-blue-600 transition">
                        Quero este pacote
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-12">
            <a href="{{ url_for('pacotes_page') }}" 
               class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-800">
                Ver todos os pacotes e personalizações
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- CTA Final -->
<section class="py-20 bg-gradient-to-r from-blue-600 to-purple-700 text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para Transformar seu Conhecimento?</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto">
            Vamos conversar sobre suas necessidades e criar um plano de aprendizado perfeito para você!
        </p>
        
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ url_for('contato') }}" 
               class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition text-lg">
                <i class="fas fa-calendar-check mr-2"></i> Agendar Aula Experimental
            </a>
            <a href="https://wa.me/{{ professor.contato.whatsapp }}" 
               target="_blank"
               class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition text-lg">
                <i class="fab fa-whatsapp mr-2"></i> Falar no WhatsApp
            </a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
function solicitarContato(pacote) {
    window.location.href = `{{ url_for('contato') }}?pacote=${encodeURIComponent(pacote)}`;
}
</script>
{% endblock %}