const testimonials = [
    {
        stars: '★★★★★',
        text: '"Ich kann meine Monstera endlich richtig pflegen! Die App hat sofort erkannt was ihr gefehlt hat und mir einen tagesgenauen Gießplan erstellt."',
        name: 'Lena M.',
        role: 'Urban Jungle Enthusiastin',
        emoji: '🌿',
    },
    {
        stars: '★★★★★',
        text: '"Endlich eine App die wirklich funktioniert. In 2 Sekunden wusste ich wie meine unbekannte Pflanze heißt und was sie braucht."',
        name: 'Tobias K.',
        role: 'Balkonpflanzen-Fan',
        emoji: '🌱',
    },
    {
        stars: '★★★★★',
        text: '"Das Design ist wunderschön und die KI unglaublich präzise. Meine Pflanzensammlung wächst seitdem doppelt so schnell!"',
        name: 'Sarah R.',
        role: 'Pflanzen-Influencerin',
        emoji: '🪴',
    },
]

export default function Testimonials() {
    return (
        <section className="testimonials" id="testimonials" aria-labelledby="testi-heading">
            <div className="container">

                <header className="testimonials-header reveal">
                    <p className="tag">Bewertungen</p>
                    <h2 id="testi-heading">
                        Geliebt von<br />Pflanzenfreund:innen.
                    </h2>
                </header>

                <div className="testimonials-grid">
                    {testimonials.map((t, i) => (
                        <div className={`testi-card reveal delay-${i + 1}`} key={t.name}>
                            <div className="testi-stars">{t.stars}</div>
                            <p className="testi-text">{t.text}</p>
                            <div className="testi-author">
                                <div className="testi-avatar">{t.emoji}</div>
                                <div>
                                    <div className="testi-name">{t.name}</div>
                                    <div className="testi-role">{t.role}</div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

            </div>
        </section>
    )
}