@model OnlyOneAccessTemplate.Models.ContentBlock

<section id="features" class="features-section py-5 bg-light">
    <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">
                    @(Model?.Title ?? ViewBag.DefaultFeaturesTitle)
                </h2>
                <p class="lead text-muted" data-aos="fade-up" data-aos-delay="100">
                    @(Model?.Content ?? ViewBag.DefaultFeaturesSubtitle)
                </p>
            </div>
        </div>
        
        <div class="row g-4">
            @if (Model?.Properties.ContainsKey("feature_list") == true && Model.Properties["feature_list"] is IEnumerable<object> featureList)
            {
                int index = 0;
                @foreach (var feature in featureList.Take(6))
                {
                    var featureDict = feature as Dictionary<string, object>;
                    var delay = (index * 100).ToString();
                    index++;
                    
                    
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="@delay">
                        <div class="feature-card h-100 text-center p-4 bg-white rounded-3 shadow-sm border-0 hover-lift">
                            <div class="feature-icon mb-3">
                                <i class="@(featureDict?.GetValueOrDefault("icon")?.ToString() ?? "fas fa-star") fa-3x text-primary"></i>
                            </div>
                            <h5 class="fw-bold mb-3">@featureDict?.GetValueOrDefault("title")</h5>
                            <p class="text-muted mb-0">@featureDict?.GetValueOrDefault("description")</p>
                        </div>
                    </div>
                }
            }
            else
            {
                <!-- Features padrão -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up">
                    <div class="feature-card h-100 text-center p-4 bg-white rounded-3 shadow-sm border-0 hover-lift">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-rocket fa-3x text-primary"></i>
                        </div>
                        <h5 class="fw-bold mb-3">@ViewBag.Feature1Title</h5>
                        <p class="text-muted mb-0">@ViewBag.Feature1Description</p>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="feature-card h-100 text-center p-4 bg-white rounded-3 shadow-sm border-0 hover-lift">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-shield-alt fa-3x text-primary"></i>
                        </div>
                        <h5 class="fw-bold mb-3">@ViewBag.Feature2Title</h5>
                        <p class="text-muted mb-0">@ViewBag.Feature2Description</p>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="feature-card h-100 text-center p-4 bg-white rounded-3 shadow-sm border-0 hover-lift">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-users fa-3x text-primary"></i>
                        </div>
                        <h5 class="fw-bold mb-3">@ViewBag.Feature3Title</h5>
                        <p class="text-muted mb-0">@ViewBag.Feature3Description</p>
                    </div>
                </div>
            }
        </div>
        
        @if (!string.IsNullOrEmpty(Model?.ButtonText))
        {
            <div class="text-center mt-5" data-aos="fade-up" data-aos-delay="300">
                <a href="#conversion-form" class="btn btn-primary btn-lg scroll-to-form">
                    @Model.ButtonText
                    <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        }
    </div>
</section>