SocialBuddyMarketingWebsite/components/Testimonials.tsx

'use client';

import { useState, useEffect } from 'react';
import styles from './Testimonials.module.css';

export default function Testimonials() {
    const [activeIndex, setActiveIndex] = useState(0);

    const testimonials = [
        {
            name: 'Sarah Johnson',
            role: 'Marketing Director',
            company: 'TechFlow Inc.',
            image: '👩‍💼',
            rating: 5,
            text: 'SocialBuddy has completely transformed how we manage our social media. The scheduling features and analytics are game-changers. We\'ve seen a 300% increase in engagement!',
        },
        {
            name: 'Michael Chen',
            role: 'Content Creator',
            company: 'Digital Nomad',
            image: '👨‍💻',
            rating: 5,
            text: 'As a solo creator managing multiple platforms, SocialBuddy saves me hours every week. The AI content suggestions are incredibly helpful, and the unified inbox is a lifesaver.',
        },
        {
            name: 'Emily Rodriguez',
            role: 'Social Media Manager',
            company: 'BrandBoost Agency',
            image: '👩‍🎨',
            rating: 5,
            text: 'Managing 20+ client accounts used to be overwhelming. SocialBuddy\'s team collaboration features and approval workflows have streamlined our entire process. Highly recommended!',
        },
        {
            name: 'David Park',
            role: 'CEO',
            company: 'StartupHub',
            image: '👨‍💼',
            rating: 5,
            text: 'The analytics and reporting features are outstanding. We can now make data-driven decisions about our social media strategy. ROI has improved significantly since switching to SocialBuddy.',
        },
        {
            name: 'Lisa Thompson',
            role: 'Influencer',
            company: 'Lifestyle & Travel',
            image: '👩‍🦰',
            rating: 5,
            text: 'I love how intuitive SocialBuddy is! The content calendar helps me plan my posts weeks in advance, and the best time to post feature ensures maximum reach. It\'s perfect for influencers!',
        },
        {
            name: 'James Wilson',
            role: 'E-commerce Manager',
            company: 'ShopSmart',
            image: '👨‍🏫',
            rating: 5,
            text: 'SocialBuddy has helped us maintain a consistent brand presence across all platforms. The bulk scheduling feature is amazing for our product launches. Customer engagement has never been better!',
        },
    ];

    useEffect(() => {
        const interval = setInterval(() => {
            setActiveIndex((current) => (current + 1) % testimonials.length);
        }, 5000);

        return () => clearInterval(interval);
    }, [testimonials.length]);

    const handleDotClick = (index: number) => {
        setActiveIndex(index);
    };

    return (
        <section className="section" id="testimonials">
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.badge}>
                        <span>⭐</span>
                        <span>Testimonials</span>
                    </div>
                    <h2 className={styles.title}>
                        Loved by <span className="gradient-text">Thousands</span> of Users
                    </h2>
                    <p className={styles.subtitle}>
                        Don't just take our word for it. See what our customers have to say about SocialBuddy.
                    </p>
                </div>

                <div className={styles.testimonialSlider}>
                    <div className={styles.testimonialTrack} style={{ transform: `translateX(-${activeIndex * 100}%)` }}>
                        {testimonials.map((testimonial, index) => (
                            <div key={index} className={styles.testimonialCard}>
                                <div className={styles.stars}>
                                    {[...Array(testimonial.rating)].map((_, i) => (
                                        <span key={i} className={styles.star}>⭐</span>
                                    ))}
                                </div>
                                <p className={styles.testimonialText}>"{testimonial.text}"</p>
                                <div className={styles.author}>
                                    <div className={styles.authorImage}>{testimonial.image}</div>
                                    <div className={styles.authorInfo}>
                                        <div className={styles.authorName}>{testimonial.name}</div>
                                        <div className={styles.authorRole}>
                                            {testimonial.role} at {testimonial.company}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div className={styles.dots}>
                    {testimonials.map((_, index) => (
                        <button
                            key={index}
                            className={`${styles.dot} ${index === activeIndex ? styles.activeDot : ''}`}
                            onClick={() => handleDotClick(index)}
                            aria-label={`Go to testimonial ${index + 1}`}
                        />
                    ))}
                </div>

                <div className={styles.stats}>
                    <div className={styles.statItem}>
                        <div className={styles.statNumber}>4.9/5</div>
                        <div className={styles.statLabel}>Average Rating</div>
                    </div>
                    <div className={styles.statItem}>
                        <div className={styles.statNumber}>10,000+</div>
                        <div className={styles.statLabel}>Happy Customers</div>
                    </div>
                    <div className={styles.statItem}>
                        <div className={styles.statNumber}>98%</div>
                        <div className={styles.statLabel}>Satisfaction Rate</div>
                    </div>
                </div>
            </div>
        </section>
    );
}