function Services() {
  const bridalImages = [
    assetBase + "assets/images/bride1.jpg",
    assetBase + "assets/images/bride2.jpg",
    assetBase + "assets/images/bride3.jpg",
    assetBase + "assets/images/bride4.jpg",
    assetBase + "assets/images/bride5.jpg",
    assetBase + "assets/images/bride6.jpg",
  ];

  const [bridalSlide, setBridalSlide] = React.useState(0);

  React.useEffect(() => {
    const mq = window.matchMedia("(max-width: 768px)");
    const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
    let intervalId;

    const arm = () => {
      if (intervalId) {
        window.clearInterval(intervalId);
        intervalId = undefined;
      }
      if (mq.matches && !motion.matches) {
        intervalId = window.setInterval(() => {
          setBridalSlide((s) => (s + 1) % bridalImages.length);
        }, 5000);
      }
    };

    arm();
    mq.addEventListener("change", arm);
    motion.addEventListener("change", arm);
    return () => {
      mq.removeEventListener("change", arm);
      motion.removeEventListener("change", arm);
      if (intervalId) window.clearInterval(intervalId);
    };
  }, [bridalImages.length]);

  return (
    <section id="bridal-makeup" style={{ padding: "140px 0", background: "var(--ivory)", position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "end", marginBottom: 54, gap: 40 }}>
          <div>
            <div className="eyebrow">Bridal Makeup</div>
            <h2 className="display" style={{ fontSize: "clamp(48px, 5.5vw, 84px)", margin: "20px 0 0", color: "var(--coffee)", textWrap: "balance" }}>
              Bridal Makeup
              <span className="italic" style={{ color: "var(--rose)" }}> available worldwide.</span>
            </h2>
          </div>
          <p className="body-lg" style={{ maxWidth: 520, justifySelf: "end" }}>
            {t('servicesIntro')}
          </p>
        </div>

        <div className="bridal-makeup__split">
          <div className="bridal-makeup__panel" style={{ position: "sticky", top: 100 }}>
            <div style={{
              padding: "34px 36px",
              background: "var(--paper)",
              border: "1px solid var(--marfil)",
              borderRadius: 0,
            }}>
              <div className="eyebrow" style={{ color: "var(--rose)" }}>Bridal Makeup</div>
              <h3 className="display" style={{ fontSize: 36, margin: "14px 0 20px", color: "var(--coffee)" }}>
                {t('servicesBooking')}
              </h3>
              <p style={{ margin: 0, color: "var(--coffee-soft)", fontSize: 15, lineHeight: 1.7 }}>
                {t('servicesDesc')}
              </p>
              <hr className="hairline" style={{ margin: "28px 0" }} />
              <div className="eyebrow" style={{ color: "var(--rose)" }}>Book via WhatsApp</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "grid", gap: 14 }}>
                {[t('servicesFeature1'), t('servicesFeature2'), t('servicesFeature3')].map((it, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--rose)", flex: "0 0 auto", transform: "translateY(2px)" }}></span>
                    <span style={{ color: "var(--coffee)", fontSize: 15 }}>{it}</span>
                  </li>
                ))}
              </ul>
              <a href="https://wa.me/523320126620" target="_blank" rel="noreferrer" className="btn btn-rose" style={{ marginTop: 28 }}>
                +52 33 2012 6620
              </a>
            </div>
          </div>

          <div className="bridal-makeup__visuals">
            <div className="bridal-gallery--grid">
              {bridalImages.map((src, idx) => (
                <img
                  key={src}
                  src={src}
                  alt={`Bridal makeup look ${idx + 1}`}
                  loading="lazy"
                  decoding="async"
                />
              ))}
            </div>

            <div className="bridal-gallery--carousel-wrap">
              <div
                className="bridal-gallery--carousel"
                role="region"
                aria-roledescription="carousel"
                aria-label="Bridal makeup gallery"
              >
                <div
                  className="bridal-gallery--carousel-track"
                  style={{ transform: `translateX(-${bridalSlide * 100}%)` }}
                >
                  {bridalImages.map((src, idx) => (
                    <img
                      key={src}
                      src={src}
                      alt={`Bridal makeup look ${idx + 1}`}
                      loading={idx === 0 ? "eager" : "lazy"}
                      decoding="async"
                    />
                  ))}
                </div>
              </div>
              <div className="bridal-gallery--dots" role="tablist" aria-label="Slide navigation">
                {bridalImages.map((_, idx) => (
                  <button
                    key={idx}
                    type="button"
                    role="tab"
                    aria-selected={idx === bridalSlide}
                    aria-label={`Show image ${idx + 1}`}
                    className={"bridal-gallery--dot" + (idx === bridalSlide ? " is-active" : "")}
                    onClick={() => setBridalSlide(idx)}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;