@model OnlyOneAccessTemplate.Models.PageContent
@{
    ViewData["Title"] = Model?.MetaTitle ?? Model?.Title ?? ViewBag.Title;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Head {
    <!-- Page specific meta tags -->
    <meta name="description" content="@(Model?.Description ?? ViewBag.Description)">
    <meta name="keywords" content="@(Model?.Keywords ?? ViewBag.Keywords)">

    <!-- Custom CSS for animations -->
    <style>
        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

            .hover-lift:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
            }

        .animate-bounce {
            animation: bounce 2s infinite;
        }

        .scroll-smooth {
            scroll-behavior: smooth;
        }

        .bg-gradient-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .countdown-number {
            min-width: 60px;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
}

<!-- Hero Section -->
@{
    var heroBlock = Model?.Blocks?.FirstOrDefault(b => b.Type == "hero");
}
@await Html.PartialAsync("Components/_Hero", heroBlock)

<!-- Features Section -->
@{
    var featuresBlock = Model?.Blocks?.FirstOrDefault(b => b.Type == "features");
}
@await Html.PartialAsync("Components/_Features", featuresBlock)

<!-- Benefits/How it Works Section -->
@if (Model?.Blocks?.Any(b => b.Type == "benefits") == true)
{
    var benefitsBlock = Model.Blocks.First(b => b.Type == "benefits");
    <section class="benefits-section py-5">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-lg-8 text-center">
                    <h2 class="display-5 fw-bold mb-3" data-aos="fade-up">
                        @benefitsBlock.Title
                    </h2>
                    <p class="lead text-muted" data-aos="fade-up" data-aos-delay="100">
                        @benefitsBlock.Content
                    </p>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-md-6" data-aos="fade-right">
                    <div class="benefit-item d-flex mb-4">
                        <div class="benefit-icon me-4">
                            <i class="fas fa-check-circle fa-2x text-success"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-2">Resultado Garantido</h5>
                            <p class="text-muted mb-0">Metodologia comprovada com mais de 1000 casos de sucesso documentados.</p>
                        </div>
                    </div>

                    <div class="benefit-item d-flex mb-4">
                        <div class="benefit-icon me-4">
                            <i class="fas fa-clock fa-2x text-primary"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-2">Implementação Rápida</h5>
                            <p class="text-muted mb-0">Veja os primeiros resultados em até 30 dias após a implementação.</p>
                        </div>
                    </div>

                    <div class="benefit-item d-flex">
                        <div class="benefit-icon me-4">
                            <i class="fas fa-users fa-2x text-warning"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-2">Suporte Especializado</h5>
                            <p class="text-muted mb-0">Equipe dedicada para garantir o seu sucesso em cada etapa.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6" data-aos="fade-left">
                    @if (!string.IsNullOrEmpty(benefitsBlock.ImageUrl))
                    {
                        <img src="@benefitsBlock.ImageUrl" alt="@benefitsBlock.Title" class="img-fluid rounded-3 shadow">
                    }
                    else
                    {
                        <div class="stats-container bg-light p-4 rounded-3">
                            <div class="row text-center">
                                <div class="col-4">
                                    <div class="stat-item">
                                        <h3 class="fw-bold text-primary mb-1">1000+</h3>
                                        <small class="text-muted">Clientes Atendidos</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="stat-item">
                                        <h3 class="fw-bold text-success mb-1">95%</h3>
                                        <small class="text-muted">Taxa de Sucesso</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="stat-item">
                                        <h3 class="fw-bold text-warning mb-1">24h</h3>
                                        <small class="text-muted">Suporte</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </section>
}

<!-- Testimonials Section -->
@{
    var testimonialsBlock = Model?.Blocks?.FirstOrDefault(b => b.Type == "testimonials");
}
@await Html.PartialAsync("Components/_Testimonials", testimonialsBlock)

<!-- Conversion Form Section -->
@{
    var conversionConfig = ViewBag.ConversionConfig as OnlyOneAccessTemplate.Models.ConversionConfig;
}
@await Html.PartialAsync("Components/_ConversionForm", conversionConfig)

<!-- CTA Section -->
@{
    var ctaBlock = Model?.Blocks?.FirstOrDefault(b => b.Type == "cta");
}
@await Html.PartialAsync("Components/_CTA", ctaBlock)

@section Scripts {
    <!-- AOS Animation JS -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });

        // Smooth scroll 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'
                    });
                }
            });
        });

        // Countdown timer
        const countdown = document.querySelector('[data-countdown]');
        if (countdown) {
            const targetDate = new Date(countdown.dataset.countdown).getTime();

            setInterval(() => {
                const now = new Date().getTime();
                const distance = targetDate - now;

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                countdown.querySelector('[data-days]').textContent = days.toString().padStart(2, '0');
                countdown.querySelector('[data-hours]').textContent = hours.toString().padStart(2, '0');
                countdown.querySelector('[data-minutes]').textContent = minutes.toString().padStart(2, '0');
                countdown.querySelector('[data-seconds]').textContent = seconds.toString().padStart(2, '0');

                if (distance < 0) {
                    countdown.style.display = 'none';
                }
            }, 1000);
        }
    </script>
}