@model OnlyOneAccessTemplate.Models.ContentBlock

<section class="testimonials-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.DefaultTestimonialsTitle)
                </h2>
                <p class="lead text-muted" data-aos="fade-up" data-aos-delay="100">
                    @(Model?.Content ?? ViewBag.DefaultTestimonialsSubtitle)
                </p>
            </div>
        </div>
        
        <div class="row g-4">
            @if (Model?.Properties.ContainsKey("testimonials") == true && Model.Properties["testimonials"] is IEnumerable<object> testimonials)
            {
                int index = 0;
                @foreach (var testimonial in testimonials.Take(3))
                {
                    
                        var testimonialDict = testimonial 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="testimonial-card h-100 bg-white p-4 rounded-3 shadow-sm border-0">
                            <div class="stars text-warning mb-3">
                                @for (int i = 0; i < 5; i++)
                                {
                                    <i class="fas fa-star"></i>
                                }
                            </div>
                            
                            <blockquote class="mb-4">
                                <p class="mb-0 fst-italic">
                                    "@testimonialDict?.GetValueOrDefault("quote")"
                                </p>
                            </blockquote>
                            
                            <div class="d-flex align-items-center">
                                @if (!string.IsNullOrEmpty(testimonialDict?.GetValueOrDefault("avatar")?.ToString()))
                                {
                                    <img src="@testimonialDict["avatar"]" 
                                         alt="@testimonialDict?.GetValueOrDefault("name")" 
                                         class="rounded-circle me-3" 
                                         width="50" height="50">
                                }
                                else
                                {
                                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" 
                                         style="width: 50px; height: 50px;">
                                        <i class="fas fa-user text-white"></i>
                                    </div>
                                }
                                
                                <div>
                                    <h6 class="mb-0 fw-bold">@testimonialDict?.GetValueOrDefault("name")</h6>
                                    <small class="text-muted">@testimonialDict?.GetValueOrDefault("position")</small>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }
            else
            {
                <!-- Testimonials padrão -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up">
                    <div class="testimonial-card h-100 bg-white p-4 rounded-3 shadow-sm border-0">
                        <div class="stars text-warning mb-3">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <blockquote class="mb-4">
                            <p class="mb-0 fst-italic">"@ViewBag.Testimonial1Quote"</p>
                        </blockquote>
                        <div class="d-flex align-items-center">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" 
                                 style="width: 50px; height: 50px;">
                                <i class="fas fa-user text-white"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">@ViewBag.Testimonial1Name</h6>
                                <small class="text-muted">@ViewBag.Testimonial1Position</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="testimonial-card h-100 bg-white p-4 rounded-3 shadow-sm border-0">
                        <div class="stars text-warning mb-3">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <blockquote class="mb-4">
                            <p class="mb-0 fst-italic">"@ViewBag.Testimonial2Quote"</p>
                        </blockquote>
                        <div class="d-flex align-items-center">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" 
                                 style="width: 50px; height: 50px;">
                                <i class="fas fa-user text-white"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">@ViewBag.Testimonial2Name</h6>
                                <small class="text-muted">@ViewBag.Testimonial2Position</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="testimonial-card h-100 bg-white p-4 rounded-3 shadow-sm border-0">
                        <div class="stars text-warning mb-3">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <blockquote class="mb-4">
                            <p class="mb-0 fst-italic">"@ViewBag.Testimonial3Quote"</p>
                        </blockquote>
                        <div class="d-flex align-items-center">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" 
                                 style="width: 50px; height: 50px;">
                                <i class="fas fa-user text-white"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">@ViewBag.Testimonial3Name</h6>
                                <small class="text-muted">@ViewBag.Testimonial3Position</small>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</section>