const About = () => {
  const values = [
    {
      num: '01',
      title: 'Craft Over Speed',
      desc: 'Every service begins with a detailed consultation. We apply an understanding of hair behaviour, scalp condition, and face structure — not just a template cut.',
    },
    {
      num: '02',
      title: 'Continuity of Care',
      desc: 'Your stylist retains your history, preferences, and progress. No briefings. No starting over. Each visit builds on the last.',
    },
    {
      num: '03',
      title: 'Clinical Precision',
      desc: 'Sterilised instruments, professional-grade products, and transparent pricing. Premium outcomes delivered without unnecessary cost or pretension.',
    },
  ];

  return (
    <section className="about" id="about" data-screen-label="05 About">
      {/* ── Stats strip ─────────────────────────────────────────── */}
      <div className="about-stats">
        <div className="about-stat">
          <div className="about-stat-n">5.0<span>★</span></div>
          <div className="about-stat-l">Fresha · 51 reviews</div>
        </div>
        <div className="about-stat">
          <div className="about-stat-n">3</div>
          <div className="about-stat-l">Specialists</div>
        </div>
        <div className="about-stat">
          <div className="about-stat-n">28</div>
          <div className="about-stat-l">Services</div>
        </div>
        <div className="about-stat">
          <div className="about-stat-n">United Square Mall</div>
          <div className="about-stat-l">Al Danah · Abu Dhabi</div>
        </div>
      </div>

      {/* ── Values ──────────────────────────────────────────────── */}
      <div className="about-values">
        <div className="about-values-head">
          <div className="eyebrow">How we work</div>
        </div>
        <div className="about-values-grid">
          {values.map((v) => (
            <div className="about-value" key={v.num}>
              <div className="about-value-num">{v.num}</div>
              <h3 className="about-value-title">{v.title}</h3>
              <p className="about-value-desc">{v.desc}</p>
            </div>
          ))}
        </div>
      </div>

    </section>
  );
};

window.About = About;