function WhyMeIcon({ d, size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {d.split('M').filter(Boolean).map((seg, i) => <path key={i} d={'M' + seg}></path>)}
    </svg>
  );
}

function WhyChooseMe() {
  return (
    <section className="section dark" data-screen-label="Why Choose Me">
      <div className="container">
        <Reveal><div className="eyebrow on-dark"><b>/</b> WHY ME</div></Reveal>
        <Reveal><h2 className="h2"><window.AnimatedText parts={[{t:'Why Work With '},{t:'Me',accent:true},{t:'.'}]} repel /></h2></Reveal>
        <div className="whyme-cards">
          {window.SITE_DATA.whyMe.map((w, i) => (
            <Reveal key={w.title} delay={i * 45}>
              <div className="whyme-card">
                <div className="whyme-icon"><WhyMeIcon d={w.icon} /></div>
                <div className="whyme-title">{w.title}</div>
                <div className="whyme-desc">{w.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhyChooseMe = WhyChooseMe;