const Services = () => {
  const services = [
    {
      id: 'cuts',
      title: 'Cuts',
      desc: 'Precision cuts, fades, trims, and rituals.',
      img: 'assets/real/service-cuts.webp',
      mobileImg: 'assets/real/service-cuts-mobile.webp',
      alt: 'HAYRE stylist cutting and shaping a client’s hair',
      href: 'services.html#cuts',
    },
    {
      id: 'beard',
      title: 'Beard & Shave',
      desc: 'Line-ups, shaping, colour, and royal shaves.',
      img: 'assets/real/service-beard.webp',
      mobileImg: 'assets/real/service-beard-mobile.webp',
      alt: 'HAYRE stylist providing a precise facial grooming treatment',
      href: 'services.html#beard',
    },
    {
      id: 'scalp',
      title: 'Hair & Scalp Treatments',
      desc: 'Volume, hydration, detox, and scalp rituals.',
      img: 'assets/real/service-scalp.webp',
      mobileImg: 'assets/real/service-scalp-mobile.webp',
      alt: 'HAYRE stylist massaging treatment through a client’s hair and scalp',
      href: 'services.html#scalp',
    },
    {
      id: 'skin',
      title: 'Skin Treatments',
      desc: 'Cleansing, extraction, and focused skin renewal.',
      img: 'assets/real/service-skin.webp',
      mobileImg: 'assets/real/service-skin-mobile.webp',
      alt: 'HAYRE specialist applying a facial treatment mask to a client',
      href: 'services.html#skin',
    },
  ];

  return (
    <section className="services" id="services" data-screen-label="03 Services">
      <div className="services-row">
        <div className="services-intro">
          <div>
            <div className="eyebrow">Services</div>
            <h2 className="services-title">Tailored<br/>to you.</h2>
            <p className="services-guide">Choose a category to view treatments and prices.</p>
          </div>
          <a href="services.html" className="services-link">
            View all services
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>

        {services.map((s) => (
          <a
            className="service-card"
            key={s.id}
            href={s.href}
            aria-label={`View ${s.title} services and prices`}
          >
            <div className="service-img">
              <picture>
                <source media="(max-width: 600px)" srcSet={s.mobileImg} />
                <img src={s.img} alt={s.alt} width="800" height="1000" loading="lazy" decoding="async" />
              </picture>
              <div className="service-img-grad" aria-hidden="true"></div>
              <h3 className="service-title">{s.title}</h3>
            </div>
            <div className="service-body">
              <p className="service-desc">{s.desc}</p>
              <span className="service-cta" aria-hidden="true">
                <span className="service-cta-label">View services &amp; prices</span>
                <span className="service-cta-icon">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </span>
              </span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
};

window.Services = Services;