/* global React */
const { useState, useEffect, useRef } = React;
const { SYMPTOMS, SERVICES, PROGRAMS } = window;

function Symptoms() {
  return (
    <section id="symptoms" className="about">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Мы лечим</span>
            <h2 className="h-1">
              С чем мы можем
              <br />
              вам <em>помочь</em>
            </h2>
          </div>
          <p className="lead">
            Если вы узнали хотя бы один из этих симптомов — запишитесь на
            консультацию. Часто облегчение приходит уже после первого сеанса.
          </p>
        </div>
        <div className="symptoms-grid reveal-stagger">
          {SYMPTOMS.map((s, i) => (
            <div key={i} className="symptom">
              <div className="dot"></div>
              <span>{s}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  const trackRef = useRef(null);
  const [canPrev, setCanPrev] = useState(false);
  const [canNext, setCanNext] = useState(true);

  const updateButtons = () => {
    const el = trackRef.current;
    if (!el) return;
    setCanPrev(el.scrollLeft > 4);
    setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
  };

  useEffect(() => {
    updateButtons();
    const el = trackRef.current;
    if (!el) return;
    el.addEventListener("scroll", updateButtons, { passive: true });
    window.addEventListener("resize", updateButtons);
    return () => {
      el.removeEventListener("scroll", updateButtons);
      window.removeEventListener("resize", updateButtons);
    };
  }, []);

  const scrollBy = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector(".svc-card");
    const step = card ? card.offsetWidth + 16 : el.clientWidth * 0.8;
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <section id="services">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Услуги</span>
            <h2 className="h-1">
              Полный перечень
              <br />
              <em>направлений</em>
            </h2>
          </div>
          <div className="section-head-right">
            <p className="lead">
              Сертифицированные специалисты, современные методики,
              индивидуальный подход. Безоперационное лечение и видимые
              результаты.
            </p>
            <div className="slider-controls">
              <button
                onClick={() => scrollBy(-1)}
                disabled={!canPrev}
                aria-label="Предыдущие"
              >
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path
                    d="M10 13L5 8L10 3"
                    stroke="currentColor"
                    strokeWidth="1.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
              <button
                onClick={() => scrollBy(1)}
                disabled={!canNext}
                aria-label="Следующие"
              >
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path
                    d="M6 3L11 8L6 13"
                    stroke="currentColor"
                    strokeWidth="1.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div className="services-track" ref={trackRef}>
          {SERVICES.map((s, i) => (
            <div
              key={i}
              className={"svc-card " + (s.featured ? "featured" : "")}
            >
              <div
                className="svc-img"
                style={{ backgroundImage: `url(${s.img})` }}
              ></div>
              <div className="svc-body">
                <div className="num">{s.n}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                {s.points && (
                  <ul className="svc-points">
                    {s.points.slice(0, 3).map((pt, k) => (
                      <li key={k}>{pt}</li>
                    ))}
                    {s.points.length > 3 && (
                      <li className="more">и ещё {s.points.length - 3}…</li>
                    )}
                  </ul>
                )}
                <div className="foot">
                  <div>
                    <div className="price-from">Стоимость</div>
                    <div className="price">{s.price}</div>
                  </div>
                  <div className="arrow-circle">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path
                        d="M3 11L11 3M11 3H5M11 3V9"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Programs() {
  return (
    <section id="programs" className="about">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Программы</span>
            <h2 className="h-1">
              Авторские протоколы
              <br />
              главного <em>врача</em>
            </h2>
          </div>
          <p className="lead">
            Уникальные методики Лабазанова Анзора Тайсумовича. Комплексные
            курсы, в которых процедуры взаимно усиливают друг друга.
            Консультация и диагностика бесплатно.
          </p>
        </div>
        <div className="programs-grid reveal-stagger">
          {PROGRAMS.map((p, i) => (
            <div key={i} className="program">
              <div className="program-num">0{i + 1}</div>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
              <div className="program-list">
                <div className="program-list-title">В программу входит:</div>
                <ul>
                  {p.procedures.map((pr, k) => (
                    <li key={k}>{pr}</li>
                  ))}
                </ul>
              </div>
              <div className="program-note">{p.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Symptoms, Services, Programs });