{% extends "base.html" %}
{% block title %}Testimonials{% endblock %}
{% block content %}
<div class="container">
    <h1>Testimonials</h1>

    <div id="testimonial-container">
        <div class="testimonial show">
            <p>"This is the best SEO tool I've ever used! It's helped me rank my videos higher and get more views."</p>
            <p class="author">- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"I was struggling to grow my YouTube channel, but this tag generator has been a game-changer. I'm finally getting the traffic I deserve."</p>
            <p class="author">- Jane Smith</p>
        </div>
        <div class="testimonial">
            <p>"I love how easy it is to use this tool. It's saved me so much time and effort."</p>
            <p class="author">- David Johnson</p>
        </div>
        <div class="testimonial">
            <p>"I was skeptical at first, but this tool really works. I've seen a significant increase in my video's performance since I started using it."</p>
            <p class="author">- Sarah Williams</p>
        </div>
    </div>
</div>

<style>
    .testimonial {
        display: none;
    }
    .testimonial.show {
        display: block;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const testimonials = document.querySelectorAll('.testimonial');
        let currentTestimonial = 0;

        function showNextTestimonial() {
            testimonials[currentTestimonial].classList.remove('show');
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            testimonials[currentTestimonial].classList.add('show');
        }

        setInterval(showNextTestimonial, 10000);
    });
</script>
{% endblock %}