// Services — grouped into visual categories, shown as a carousel (3 cards visible,
// the 4th peeking in at ~1/3 width to invite visitors to click through for more).
const Services = () => {
  const groups = t("services.groups");
  const { trackRef, setCardRef, atStart, atEnd, edge, updateEdges, scrollByCard, scrollable } =
    window.useCardCarousel(groups.length);

  return (
    <section id="servicos" className="scl-section scl-section--white">
      <div className="scl-container">
        <div className="scl-section__head">
          <div>
            <div className="scl-eyebrow"><span className="scl-rule" /> {t("services.eyebrow")}</div>
            <h2 className="scl-h2">{t("services.title")}</h2>
          </div>
          <p className="scl-lead scl-section__head-sub">
            {t("services.sub")}
          </p>
        </div>

        <div className={"scl-carousel-fade" + (atEnd ? " is-end" : "")}>
          <div className="scl-services" ref={trackRef} onScroll={updateEdges}>
            {groups.map((g, i) => {
              const isPrevEdge = i === edge.first && !atStart;
              const isNextEdge = i === edge.last && !atEnd;
              const goEdge = (e) => {
                if (e.target.closest("a")) return;
                if (isPrevEdge) scrollByCard(-1);
                else if (isNextEdge) scrollByCard(1);
              };
              return (
              <article
                key={i}
                ref={setCardRef(i)}
                className={"scl-service-card" + (isPrevEdge || isNextEdge ? " scl-carousel-card--edge" : "")}
                onClick={(isPrevEdge || isNextEdge) ? goEdge : undefined}
              >
                <div className="scl-service-card__head">
                  <div className="scl-service-card__icon"><Icon name={g.icon} size={22} /></div>
                  <div className="scl-service-card__num">{String(i + 1).padStart(2, "0")}</div>
                </div>
                <h3 className="scl-service-card__title">{g.title}</h3>
                <p className="scl-service-card__desc">{g.description}</p>
                <ul className="scl-service-card__list">
                  {g.items.map((it, j) => (
                    <li key={j}>
                      <Icon name="check" size={14} />
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
                <a href="#agendar" className="scl-service-card__link">
                  {t("services.cardLink")} <Icon name="arrow-up-right" size={14} />
                </a>
              </article>
              );
            })}
          </div>
        </div>

        {scrollable && (
          <div className="scl-carousel-nav scl-carousel-nav--below">
            <button
              type="button"
              className="scl-carousel-nav-btn"
              onClick={() => scrollByCard(-1)}
              disabled={atStart}
              aria-label={t("services.prevAria")}
            >
              <Icon name="chevron-left" size={18} />
            </button>
            <button
              type="button"
              className="scl-carousel-nav-btn scl-carousel-nav-btn--next"
              onClick={() => scrollByCard(1)}
              disabled={atEnd}
              aria-label={t("services.nextAria")}
            >
              <Icon name="chevron-right" size={20} />
            </button>
          </div>
        )}

        <div className="scl-services__cta-strip">
          <div>
            <div className="scl-h5">{t("services.ctaStripTitle")}</div>
            <div className="scl-small" style={{ marginTop: 4, color: "var(--fg-muted)" }}>
              {t("services.ctaStripSub")}
            </div>
          </div>
          <a href={scWhatsAppHref()} target="_blank" rel="noopener noreferrer" className="scl-btn scl-btn--primary">
            {t("common.ctaPrimary")} <Icon name="arrow-right" size={16} />
          </a>
        </div>
      </div>
    </section>
  );
};

window.Services = Services;