/* Social proof — three testimonial cards.
 * Placeholder client names / countries / quotes; swap for real ones.
 */

const TESTIMONIALS = [
  {
    quote: "Chef Martin restructured our entire bakery menu from scratch. Within three months of launch we were selling out of croissants by 10am every day. The ROI on this consultancy paid for itself in the first season.",
    name: "Nour Al Rashidi",
    flag: "🇦🇪",
    country: "Dubai, UAE",
  },
  {
    quote: "We were struggling with consistency across our production kitchen. The Baker Atelier came in, redesigned the workflow, trained our team, and set up SOPs we still use today. Professional, practical, and deeply knowledgeable about the GCC market.",
    name: "Khalid Al Otaibi",
    flag: "🇸🇦",
    country: "Riyadh, KSA",
  },
  {
    quote: "From day one the team understood our vision — a premium afternoon tea concept for a local audience. The Baker Atelier delivered a full menu, supplier list, and staff training programme. We opened on time and above expectations.",
    name: "Fatima Al Balushi",
    flag: "🇴🇲",
    country: "Muscat, Oman",
  },
];

function Testimonials(){
  return (
    <section className="ml-testi" id="testimonials" aria-label="Client testimonials">
      <div className="ml-testi-inner">
        <div className="ml-testi-head">
          <p className="ml-next-eyebrow" style={{color:"var(--steel)"}}>Client Words</p>
          <h2 className="ml-testi-h">Trusted by operators across the <em>GCC</em>.</h2>
        </div>
        <ul className="ml-testi-grid">
          {TESTIMONIALS.map((t,i)=>(
            <li key={i} className="ml-testi-card" style={{"--i": i}}>
              <span className="ml-testi-quote-mark" aria-hidden="true">&ldquo;</span>
              <p className="ml-testi-quote">{t.quote}</p>
              <footer className="ml-testi-attr">
                <span className="ml-testi-name">{t.name}</span>
                <span className="ml-testi-country"><span className="ml-testi-flag" aria-hidden="true">{t.flag}</span> {t.country}</span>
              </footer>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;