import React from 'react';

export default function TestimonialsSection() {
  return (
    <section className="testimonials-section">
      <div className="flagship-container">
        <div className="testimonials-header text-center max-w-2xl mx-auto mb-12">
          <div className="font-label-caps text-blue-accent pill-label bg-surface-high mb-10px">
            RACED ON TRACK &amp; CANYONS
          </div>
          <h2 className="font-headline-xl text-ink m-0">
            Validated by racers, coaches &amp; road captains.
          </h2>
        </div>

        <div className="testimonial-grid">
          {/* Testimonial 1 */}
          <div className="testimonial-card">
            <div className="testimonial-content">
              <div className="testimonial-stars text-green-accent">
                {[...Array(5)].map((_, i) => (
                  <span key={i} className="material-symbols-outlined icon-md">
                    star
                  </span>
                ))}
              </div>
              <p className="font-body-md testimonial-quote m-0 italic">
                "The instant lean angle telemetry transformed my coaching. Being able to demonstrate the difference
                between 44° and 52° roll stability visually after every session cut seconds off our students' pace."
              </p>
            </div>
            <div className="testimonial-author-row">
              <div className="testimonial-avatar bg-cyan-accent text-on-primary-container">
                DR
              </div>
              <div className="testimonial-author-info">
                <span className="font-headline-sm text-ink">
                  Dave Rossi
                </span>
                <span className="font-body-sm text-muted">Lead Coach, Apex Pro Track School</span>
              </div>
            </div>
          </div>

          {/* Testimonial 2 */}
          <div className="testimonial-card">
            <div className="testimonial-content">
              <div className="testimonial-stars text-green-accent">
                {[...Array(5)].map((_, i) => (
                  <span key={i} className="material-symbols-outlined icon-md">
                    star
                  </span>
                ))}
              </div>
              <p className="font-body-md testimonial-quote m-0 italic">
                "In group canyon rides, the Fleet Beacon brings absolute peace of mind. We had a rider go down in a
                blind downhill hairpin—MotorSignal flagged the G-impact instantly and notified the sweep rider."
              </p>
            </div>
            <div className="testimonial-author-row">
              <div className="testimonial-avatar bg-green-accent text-surface-lowest">
                MK
              </div>
              <div className="testimonial-author-info">
                <span className="font-headline-sm text-ink">
                  Maya Kovacs
                </span>
                <span className="font-body-sm text-muted">Founder, Bay Area Moto Collective</span>
              </div>
            </div>
          </div>

          {/* Testimonial 3 */}
          <div className="testimonial-card">
            <div className="testimonial-content">
              <div className="testimonial-stars text-green-accent">
                {[...Array(5)].map((_, i) => (
                  <span key={i} className="material-symbols-outlined icon-md">
                    star
                  </span>
                ))}
              </div>
              <p className="font-body-md testimonial-quote m-0 italic">
                "The 10Hz GPS accuracy matches dedicated telemetry loggers costing ten times as much. Plugged straight
                into my Panigale OBD CAN-link and synced in under two minutes."
              </p>
            </div>
            <div className="testimonial-author-row">
              <div className="testimonial-avatar bg-blue-accent text-surface-lowest">
                TJ
              </div>
              <div className="testimonial-author-info">
                <span className="font-headline-sm text-ink">
                  Tyler Jenkins
                </span>
                <span className="font-body-sm text-muted">MotoAmerica Supersport Competitor</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}