{% extends 'layout.html' %}

{% block content %}
<div class="wrapper">
    <!-- HERO -->
    <section id="inicio" class="hero">
        <div class="hero-bg"></div>
        <div class="hero-overlay"></div>
        
        <!-- BUBBLES CONTAINER -->
        <div class="bubbles" id="bubblesContainer"></div>
        
        <div class="hero-content">
            <div class="hero-badge">
                🌊 Reserve pelo WhatsApp
            </div>
            <h1 class="hero-title">
                Aluguel de<br>
                <span class="hero-title-line2">Lanchas</span>
            </h1>
            <p class="hero-subtitle">
                Passeios exclusivos, conforto, segurança e momentos incríveis no mar.<br>
                Lanchas para até <strong>8 e 10 pessoas</strong>.
            </p>
            <div class="hero-cta">
                <a href="{{ wppLink }}" target="_blank" rel="noopener noreferrer" class="btn-primary">
                    🟢 Reservar pelo WhatsApp
                </a>
                <a href="#lanchas" class="btn-outline">
                    Ver Lanchas ↓
                </a>
            </div>
            <div class="hero-stats">
                <div class="hero-stat">
                    <div class="hero-stat-num">{{ boats|length if boats else '2+' }}</div>
                    <div class="hero-stat-label">Lanchas</div>
                </div>
                <div class="hero-stat">
                    <div class="hero-stat-num">10</div>
                    <div class="hero-stat-label">Pessoas</div>
                </div>
                <div class="hero-stat">
                    <div class="hero-stat-num">{{ packages|length if packages else '3+' }}</div>
                    <div class="hero-stat-label">Pacotes</div>
                </div>
            </div>
        </div>
    </section>

    <!-- WAVE SEPARATOR -->
    <div class="wave-sep">
        <svg viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z" fill="#061a2e"></path>
        </svg>
    </div>

    <!-- SELOS -->
    <div class="bg-ocean" style="padding-top: 10px; padding-bottom: 30px;">
        <div class="container">
            <div class="seals">
                <span class="seal">⭐ Reserve pelo WhatsApp</span>
                <span class="seal">🌍 Ideal para turistas</span>
                <span class="seal">🗺️ Passeios personalizados</span>
            </div>
        </div>
    </div>

    <!-- COMO FUNCIONA -->
    <section class="section bg-ocean">
        <div class="container">
            <div class="section-header">
                <span class="section-badge">É fácil assim</span>
                <h2 class="section-title">Como <span class="text-gold">Funciona</span></h2>
            </div>
            <div class="steps-grid">
                <div class="step-card">
                    <div class="step-icon">
                        <span>🔍</span>
                        <span class="step-num">1</span>
                    </div>
                    <h3>Escolha o Pacote</h3>
                    <p>Veja nossas opções de lanchas e roteiros disponíveis.</p>
                </div>
                <div class="step-card">
                    <div class="step-icon">
                        <span>📲</span>
                        <span class="step-num">2</span>
                    </div>
                    <h3>Chame no WhatsApp</h3>
                    <p>Fale diretamente com nossa equipe para tirar dúvidas e reservar.</p>
                </div>
                <div class="step-card">
                    <div class="step-icon">
                        <span>⚓</span>
                        <span class="step-num">3</span>
                    </div>
                    <h3>Curta o Passeio</h3>
                    <p>Tudo confirmado! É só aparecer e curtir um dia inesquecível no mar.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- LANCHAS -->
    <section id="lanchas" class="section">
        <div class="container">
            <div class="section-header">
                <span class="section-badge">Nossa Frota</span>
                <h2 class="section-title">Nossas <span class="text-cyan">Lanchas</span></h2>
            </div>
            <div class="boats-grid">
                {% if boats %}
                    {% for boat in boats %}
                    <div class="boat-card">
                        <div class="boat-image">
                            {% if boat.imageUrl %}
                                <img src="{{ boat.imageUrl }}" alt="{{ boat.name }}" loading="lazy">
                            {% else %}
                                <div class="boat-image-placeholder">
                                    <span>⛵</span>
                                    <span style="font-size: 1rem; color: var(--text-muted);">Foto em breve</span>
                                </div>
                            {% endif %}
                            <span class="boat-capacity-badge">👥 Até {{ boat.capacity }} pessoas</span>
                        </div>
                        <div class="boat-body">
                            <h3>{{ boat.name }}</h3>
                            <p class="boat-desc">{{ boat.description }}</p>
                            <div class="boat-includes">
                                <strong>Incluso:</strong> {{ boat.includes }}
                            </div>
                            <a href="{{ wppLink }}" target="_blank" rel="noopener noreferrer" class="btn-primary" style="width: 100%; justify-content: center;">
                                🟢 Alugar Agora
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p style="text-align: center; grid-column: 1/-1; color: var(--text-muted);">Nenhuma lancha cadastrada.</p>
                {% endif %}
            </div>
        </div>
    </section>

    <!-- WAVE SEPARATOR -->
    <div class="wave-sep">
        <svg viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0,40 C360,0 720,80 1080,40 C1260,20 1380,60 1440,40 L1440,80 L0,80 Z" fill="#0a2d4a"></path>
        </svg>
    </div>

    <!-- PACOTES -->
    <section id="pacotes" class="section bg-ocean">
        <div class="container">
            <div class="section-header">
                <span class="section-badge">Escolha o seu</span>
                <h2 class="section-title">Nossos <span class="text-gold">Pacotes</span></h2>
            </div>
            <div class="packages-grid">
                {% if packages %}
                    {% for pkg in packages %}
                    <div class="package-card {% if loop.index == 2 %}featured{% endif %}">
                        {% if loop.index == 2 %}<span class="featured-badge">POPULAR</span>{% endif %}
                        <div class="pkg-icon">
                            {% if loop.index == 1 %}🌊{% elif loop.index == 2 %}🏆{% elif loop.index == 3 %}🌅{% else %}🚤{% endif %}
                        </div>
                        <h3 class="pkg-name">{{ pkg.name }}</h3>
                        <div class="pkg-price">{{ pkg.price }}</div>
                        <div class="pkg-meta">
                            <span class="pkg-meta-item">⏱️ {{ pkg.duration }}</span>
                            {% if pkg.capacity %}<span class="pkg-meta-item">👥 {{ pkg.capacity }}</span>{% endif %}
                        </div>
                        <p class="pkg-desc">{{ pkg.description }}</p>
                        <div class="pkg-benefits">
                            {% for benefit in pkg.benefits.split(',') %}
                                <div class="pkg-benefit">{{ benefit.strip() }}</div>
                            {% endfor %}
                        </div>
                        <a href="{{ wppLink }}" target="_blank" rel="noopener noreferrer" class="{% if loop.index == 2 %}btn-primary{% else %}btn-outline{% endif %}" style="width: 100%; justify-content: center; display: flex;">
                            Reservar Passeio
                        </a>
                    </div>
                    {% endfor %}
                {% else %}
                    <p style="text-align: center; grid-column: 1/-1; color: var(--text-muted);">Nenhum pacote cadastrado.</p>
                {% endif %}
            </div>
        </div>
    </section>

    <!-- PROMOÇÕES -->
    {% if promotions %}
    <section id="promocoes" class="promo-section">
        <div class="container">
            <div class="section-header">
                <span class="section-badge">🔥 Oferta Especial</span>
                <h2 class="section-title">Promoções <span class="text-gold">Imperdíveis</span></h2>
            </div>
            <div class="promotions-grid">
                {% for promo in promotions %}
                <div class="promo-card">
                    <span class="promo-badge">🔥 Promoção</span>
                    {% if promo.imageUrl %}
                        <div class="promo-image">
                            <img src="{{ promo.imageUrl }}" alt="{{ promo.name }}" loading="lazy">
                        </div>
                    {% endif %}
                    <h3 class="promo-name">{{ promo.name }}</h3>
                    <p class="promo-desc">{{ promo.description }}</p>
                    <div class="promo-prices">
                        <span class="old-price">{{ promo.oldPrice }}</span>
                        <span class="new-price">{{ promo.newPrice }}</span>
                    </div>
                    <p class="promo-validade">⏰ Válido até: {{ promo.validUntil }}</p>
                    <a href="{{ wppLink }}" target="_blank" rel="noopener noreferrer" class="btn-primary" style="margin-top: 15px;">
                        🟢 Aproveitar Promoção
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    <!-- BENEFÍCIOS -->
    <section class="benefits-section">
        <div class="container">
            <div class="section-header">
                <span class="section-badge">Diferenciais</span>
                <h2 class="section-title">Por que nos <span class="text-cyan">escolher?</span></h2>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card">
                    <span class="benefit-icon">⚓</span>
                    <h4>Passeio Seguro</h4>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">📱</span>
                    <h4>Atendimento WhatsApp</h4>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">👨‍👩‍👧‍👦</span>
                    <h4>Ideal para Família</h4>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">🗺️</span>
                    <h4>Roteiros Personalizados</h4>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">🚤</span>
                    <h4>Lanchas Confortáveis</h4>
                </div>
                <div class="benefit-card">
                    <span class="benefit-icon">⭐</span>
                    <h4>Experiência Premium</h4>
                </div>
            </div>
        </div>
    </section>

    <!-- GALERIA -->
    {% if gallery %}
    <section id="galeria" class="gallery-section">
        <div class="container">
            <div class="section-header">
                <span class="section-badge">Momentos Reais</span>
                <h2 class="section-title">Nossa <span class="text-gold">Galeria</span></h2>
            </div>
            <div class="gallery-grid">
                {% for img in gallery %}
                <div class="gallery-item">
                    <img src="{{ img.imageUrl }}" alt="{{ img.altText or 'Foto do passeio' }}" loading="lazy">
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    <!-- FAQ -->
    <section id="duvidas" class="faq-section">
        <div class="container">
            <div class="section-header">
                <span class="section-badge">Tire suas dúvidas</span>
                <h2 class="section-title">Perguntas <span class="text-cyan">Frequentes</span></h2>
            </div>
            <div class="faq-list">
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>Quantas pessoas cabem nas lanchas?</h4>
                        <span class="faq-arrow">▼</span>
                    </div>
                    <div class="faq-answer">Temos lanchas para até 8 e 10 pessoas, garantindo conforto e segurança para toda a turma.</div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>Como faço a reserva?</h4>
                        <span class="faq-arrow">▼</span>
                    </div>
                    <div class="faq-answer">Simples! Clique em qualquer botão do WhatsApp, envie a mensagem automática e nossa equipe cuida de tudo rapidamente.</div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>Posso escolher o roteiro?</h4>
                        <span class="faq-arrow">▼</span>
                    </div>
                    <div class="faq-answer">Sim! Nos pacotes Premium e Sunset, o roteiro pode ser totalmente personalizado de acordo com seus interesses.</div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>O passeio depende do clima?</h4>
                        <span class="faq-arrow">▼</span>
                    </div>
                    <div class="faq-answer">Sim, prezamos pela segurança acima de tudo. Em caso de mau tempo, reagendamos sem nenhum custo para você.</div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>Tem horário especial para o pôr do sol?</h4>
                        <span class="faq-arrow">▼</span>
                    </div>
                    <div class="faq-answer">Sim! Temos o Passeio Sunset, especialmente criado para você curtir os melhores ângulos do pôr do sol no mar.</div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>O pagamento é combinado pelo WhatsApp?</h4>
                        <span class="faq-arrow">▼</span>
                    </div>
                    <div class="faq-answer">Sim! Todas as condições de pagamento e confirmação de reserva são tratadas diretamente com o nosso administrador pelo WhatsApp.</div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- FAQ Accordion JS -->
<script>
    document.querySelectorAll('.faq-question').forEach(item => {
        item.addEventListener('click', () => {
            const faqItem = item.parentElement;
            faqItem.classList.toggle('active');
        });
    });

    // Bubbles generator
    const bubblesContainer = document.getElementById('bubblesContainer');
    if (bubblesContainer) {
        for (let i = 0; i < 12; i++) {
            const bubble = document.createElement('div');
            bubble.classList.add('bubble');
            const size = Math.random() * 60 + 10;
            bubble.style.width = `${size}px`;
            bubble.style.height = `${size}px`;
            bubble.style.left = `${Math.random() * 100}%`;
            bubble.style.animationDuration = `${Math.random() * 15 + 8}s`;
            bubble.style.animationDelay = `${Math.random() * 10}s`;
            bubblesContainer.appendChild(bubble);
        }
    }
</script>
{% endblock %}