const testimonials = [
  {
    quote: "We doubled our organic traffic in 90 days. The keyword tracker spotted opportunities our old tool completely missed.",
    name: "Amelia Carter",
    role: "Head of Growth, Northwind",
    initials: "AC",
  },
  {
    quote: "Setup took ten minutes. By the end of the first month our top three landing pages had moved up four spots on average.",
    name: "Marcus Lee",
    role: "Founder, Helio Studio",
    initials: "ML",
  },
  {
    quote: "The reports are clean enough that we send them to clients without editing. That alone saves our team a full day a week.",
    name: "Priya Shah",
    role: "SEO Lead, Quanta Agency",
    initials: "PS",
  },
];

const Testimonials = () => (
  <section className="section" data-screen-label="Testimonials">
    <div className="shell">
      <span className="kicker"><span className="pip" /> Testimonials</span>
      <h2 className="title metal">
        What People Say<br/>
        About Us
      </h2>
      <p className="section-sub">
        Hundreds of businesses that have transformed their SEO with us, ranking higher and growing faster.
      </p>
      <div className="testi-grid">
        {testimonials.map(t => (
          <div className="testi-card" key={t.name}>
            <div className="testi-stars">★★★★★</div>
            <p className="testi-quote">"{t.quote}"</p>
            <div className="testi-author">
              <div className="avatar">{t.initials}</div>
              <div>
                <div className="name">{t.name}</div>
                <div className="role">{t.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Testimonials = Testimonials;