<template>
    <section class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden py-20 sm:py-24" id="testimonials">
        <h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
            Testimonials from Our Initiates
        </h2>

        <div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
            <!-- Testimonial 1 -->
            <div
                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
            >
                <div
                    class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                ></div>
                <div class="relative z-10">
                    <div class="mb-4 flex items-center gap-4">
                        <div
                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
                            style="
                                background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
                            "
                        ></div>
                        <div>
                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Sophia Williams</p>
                            <div class="flex text-[#f59e0b]">
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-quote relative text-white/80 italic">
                        "Kris Saint Ange's Oracle was a revelation. Her guidance helped me make important decisions with confidence."
                    </p>
                </div>
            </div>

            <!-- Testimonial 2 -->
            <div
                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
            >
                <div
                    class="absolute inset-0 bg-gradient-to-br from-transparent via-[#f59e0b]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                ></div>
                <div class="relative z-10">
                    <div class="mb-4 flex items-center gap-4">
                        <div
                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
                            style="
                                background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
                            "
                        ></div>
                        <div>
                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">John Martin</p>
                            <div class="flex text-[#f59e0b]">
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg
                                    class="h-5 w-5 transform text-[#4c1d95]/30 transition-all duration-300"
                                    fill="currentColor"
                                    viewBox="0 0 256 256"
                                >
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-quote relative text-white/80 italic">
                        "An enriching experience. The readings are accurate and offer a unique perspective on challenges."
                    </p>
                </div>
            </div>

            <!-- Testimonial 3 -->
            <div
                class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
            >
                <div
                    class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                ></div>
                <div class="relative z-10">
                    <div class="mb-4 flex items-center gap-4">
                        <div
                            class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
                            style="
                                background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
                            "
                        ></div>
                        <div>
                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Isabella Smith</p>
                            <div class="flex text-[#f59e0b]">
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                                <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                    <path
                                        d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
                                    ></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-quote relative text-white/80 italic">
                        "I'm impressed by the depth of the interpretations. The Oracle is a valuable tool for personal growth."
                    </p>
                </div>
            </div>
        </div>
    </section>
</template>

<script lang="ts">
export default {
    name: 'TestimonialsSection',
    mounted() {
        // Add intersection observer for scroll animations
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.2,
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in-up');
                }
            });
        }, observerOptions);

        // Observe each testimonial
        document.querySelectorAll('.group').forEach((testimonial) => {
            observer.observe(testimonial);
        });
    },
};
</script>

<style scoped>
.testimonial-quote::before {
    content: '"';
    font-size: 2rem;
    color: #f59e0b;
    position: absolute;
    left: -0.5rem;
    top: -1rem;
    opacity: 0.5;
}

/* Custom animations */
.group {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.group:nth-child(1) {
    transition-delay: 0.1s;
}

.group:nth-child(2) {
    transition-delay: 0.3s;
}

.group:nth-child(3) {
    transition-delay: 0.5s;
}

.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth transitions for all elements */
* {
    transition-property: color, background-color, transform, opacity, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
