/* testimonials.jsx — placeholder quotes (client to supply real ones) */
const QUOTES = [
  {
    quote: 'They rebuilt our site and our rankings in the same quarter. Organic enquiries are up and we finally understand where every lead comes from.',
    name: 'John', role: 'Managing Director · E-commerce',
  },
  {
    quote: 'The automation work alone paid for the engagement. Leads are captured and nurtured before we even pick up the phone.',
    name: 'Eric', role: 'Head of Marketing · SaaS',
  },
  {
    quote: 'No waffle, no buzzwords. Every month we get numbers, context and a clear plan for what happens next.',
    name: 'Maria', role: 'Founder · Professional Services',
  },
];

function Testimonials() {
  const { Avatar } = window.MacnitechDesignSystem_13fddf;
  return (
    <section className="section" id="testimonials" data-screen-label="Testimonials">
      <div className="mt-container">
        <div className="section-head reveal">
          <span className="eyebrow eyebrow--tick">Results before rhetoric</span>
          <h2>What clients say.</h2>
          <p className="lead" style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>
            Placeholder quotes — share real client testimonials and we'll drop them in.
          </p>
        </div>

        <div className="tst-grid">
          {QUOTES.map((q, i) => (
            <figure className="card tst reveal" key={i} style={{ margin: 0 }}>
              <div className="tst__stars">
                {[0, 1, 2, 3, 4].map((s) => <Icon key={s} name="star" size={16} fill="currentColor" stroke={0} />)}
              </div>
              <blockquote className="tst__quote" style={{ margin: 0 }}>“{q.quote}”</blockquote>
              <figcaption className="tst__person">
                <Avatar name={q.name} size={44} />
                <div>
                  <div className="tst__name">{q.name}</div>
                  <div className="tst__role">{q.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });