{% extends 'base.html' %}
{% load static %}

{% block title %}Seja um Modelo - Allure{% endblock %}

{% block content %}
<div class="become-model-container">
    <div class="container">
        <!-- Hero Section -->
        <div class="hero-section">
            <div class="hero-content">
                <h1 class="hero-title">
                    Seja um Modelo <span>Allure</span>
                </h1>
                <p class="hero-subtitle">
                    Junte-se à plataforma mais exclusiva do Brasil e conecte-se com as melhores oportunidades 
                    em moda, fotografia e eventos. Seja descoberto por profissionais do setor.
                </p>
                
                <div class="hero-stats">
                    <div class="hero-stat">
                        <div class="hero-stat-number">5,000+</div>
                        <div class="hero-stat-label">Modelos Ativos</div>
                    </div>
                    <div class="hero-stat">
                        <div class="hero-stat-number">15,000+</div>
                        <div class="hero-stat-label">Oportunidades</div>
                    </div>
                    <div class="hero-stat">
                        <div class="hero-stat-number">98%</div>
                        <div class="hero-stat-label">Satisfação</div>
                    </div>
                </div>
                
                <div class="hero-buttons">
                    <a href="{% url 'accounts:cadastro_modelo' %}" class="btn-hero">
                        <i class="fas fa-user-plus"></i>
                        Cadastrar Agora
                    </a>
                    <a href="#como-funciona" class="btn-hero btn-secondary">
                        <i class="fas fa-play"></i>
                        Como Funciona
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Benefits Section -->
        <div class="benefits-section">
            <h2 class="section-title">Por que escolher a Allure?</h2>
            
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3 class="benefit-title">Qualidade Premium</h3>
                    <p class="benefit-description">
                        Conectamos apenas com profissionais sérios e empresas de renome no mercado, 
                        garantindo oportunidades de qualidade e segurança.
                    </p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="benefit-title">Segurança Total</h3>
                    <p class="benefit-description">
                        Seus dados estão protegidos e você tem controle total sobre suas informações 
                        e com quem compartilha seus dados pessoais.
                    </p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="benefit-title">Crescimento Profissional</h3>
                    <p class="benefit-description">
                        Acesse oportunidades exclusivas que podem impulsionar sua carreira e 
                        expandir seu portfólio profissional de forma significativa.
                    </p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="benefit-title">Comunidade Exclusiva</h3>
                    <p class="benefit-description">
                        Faça parte de uma comunidade selecionada de modelos e profissionais 
                        do setor de moda e entretenimento de alto nível.
                    </p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="benefit-title">Plataforma Moderna</h3>
                    <p class="benefit-description">
                        Interface intuitiva e responsiva que funciona perfeitamente em qualquer 
                        dispositivo, facilitando sua experiência diária.
                    </p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3 class="benefit-title">Suporte Dedicado</h3>
                    <p class="benefit-description">
                        Nossa equipe está sempre disponível para ajudar você a aproveitar 
                        ao máximo as oportunidades da plataforma.
                    </p>
                </div>
            </div>
        </div>
        
        <!-- How It Works Section -->
        <div class="how-it-works" id="como-funciona">
            <h2 class="section-title">Como Funciona</h2>
            
            <div class="steps-grid">
                <div class="step-card">
                    <div class="step-number">1</div>
                    <h3 class="step-title">Cadastre-se</h3>
                    <p class="step-description">
                        Crie seu perfil profissional com fotos de qualidade e informações detalhadas 
                        sobre suas características e experiência no setor.
                    </p>
                </div>
                
                <div class="step-card">
                    <div class="step-number">2</div>
                    <h3 class="step-title">Seja Descoberto</h3>
                    <p class="step-description">
                        Seu perfil ficará visível para fotógrafos, agências e empresas que buscam 
                        modelos para seus projetos e campanhas.
                    </p>
                </div>
                
                <div class="step-card">
                    <div class="step-number">3</div>
                    <h3 class="step-title">Receba Propostas</h3>
                    <p class="step-description">
                        Profissionais interessados entrarão em contato através da plataforma 
                        com propostas de trabalho personalizadas.
                    </p>
                </div>
                
                <div class="step-card">
                    <div class="step-number">4</div>
                    <h3 class="step-title">Aceite Oportunidades</h3>
                    <p class="step-description">
                        Analise as propostas recebidas e aceite as que mais se adequam ao seu 
                        perfil e objetivos profissionais.
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Testimonials Section -->
        <div class="testimonials-section">
            <h2 class="section-title">O que nossos modelos dizem</h2>
            
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <p class="testimonial-text">
                        "A Allure mudou minha carreira! Em apenas 3 meses consegui mais oportunidades 
                        do que em 2 anos trabalhando por conta própria. A qualidade dos contatos é incrível."
                    </p>
                    <div class="testimonial-author">
                        <div class="author-avatar">M</div>
                        <div class="author-info">
                            <h4>Maria Silva</h4>
                            <p>Modelo Profissional - São Paulo</p>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card">
                    <p class="testimonial-text">
                        "A plataforma é muito profissional e segura. Consegui trabalhar com grandes 
                        marcas e fotógrafos renomados. Recomendo para todos os modelos."
                    </p>
                    <div class="testimonial-author">
                        <div class="author-avatar">C</div>
                        <div class="author-info">
                            <h4>Carlos Santos</h4>
                            <p>Modelo Masculino - Rio de Janeiro</p>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card">
                    <p class="testimonial-text">
                        "O suporte da equipe Allure é excepcional. Eles sempre estão disponíveis 
                        para ajudar e garantir que tudo funcione perfeitamente."
                    </p>
                    <div class="testimonial-author">
                        <div class="author-avatar">A</div>
                        <div class="author-info">
                            <h4>Ana Costa</h4>
                            <p>Modelo Plus Size - Belo Horizonte</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- CTA Section -->
        <div class="cta-section">
            <h2 class="cta-title">Pronto para começar?</h2>
            <p class="cta-subtitle">
                Junte-se a milhares de modelos que já descobriram oportunidades incríveis na Allure
            </p>
            <a href="{% url 'accounts:cadastro_modelo' %}" class="btn-cta">
                <i class="fas fa-rocket"></i>
                Começar Agora - É Grátis!
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Animate numbers on scroll with improved performance
    const observerOptions = {
        threshold: 0.5,
        rootMargin: '0px 0px -100px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const numbers = entry.target.querySelectorAll('.hero-stat-number');
                numbers.forEach((number, index) => {
                    const finalValue = number.textContent;
                    const isNumber = !isNaN(finalValue.replace(/,/g, ''));
                    
                    if (isNumber) {
                        const target = parseInt(finalValue.replace(/,/g, ''));
                        let current = 0;
                        const increment = target / 60;
                        
                        // Add delay for staggered animation
                        setTimeout(() => {
                            const timer = setInterval(() => {
                                current += increment;
                                if (current >= target) {
                                    current = target;
                                    clearInterval(timer);
                                }
                                number.textContent = Math.floor(current).toLocaleString();
                            }, 30);
                        }, index * 200);
                    }
                });
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    // Observe hero section
    const heroSection = document.querySelector('.hero-section');
    if (heroSection) {
        observer.observe(heroSection);
    }
    
    // Enhanced hover effects for benefit cards
    document.querySelectorAll('.benefit-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-15px) scale(1.02)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // Add scroll-triggered animations for sections
    const sectionObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, { threshold: 0.1 });
    
    // Observe sections for animation
    document.querySelectorAll('.benefits-section, .how-it-works, .testimonials-section, .cta-section').forEach(section => {
        section.style.opacity = '0';
        section.style.transform = 'translateY(30px)';
        section.style.transition = 'all 0.6s ease-out';
        sectionObserver.observe(section);
    });
    
    // Add parallax effect to hero section
    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        const heroSection = document.querySelector('.hero-section');
        if (heroSection) {
            const rate = scrolled * -0.5;
            heroSection.style.transform = `translateY(${rate}px)`;
        }
    });
</script>
{% endblock %}