/* global React */
/* Pacjenci - swipeable Google reviews carousel */
const useReviewRef = React.useRef;
const useReviewState = React.useState;

const REVIEWS = [
  {
    name: "Agnieszka Rycerska",
    when: "3 miesiące temu",
    accent: true,
    headline: "„Jedna z moich najlepszych decyzji.”",
    body:
      "Jestem pod opieką Kliniki Holi od września i z pełnym przekonaniem mogę powiedzieć, że <strong>była to jedna z moich najlepszych decyzji</strong>. Już od pierwszego spotkania <strong>poczułam się zaopiekowana, zrozumiana i zmotywowana do działania</strong>. Efekty pojawiają się stopniowo, ale przede wszystkim zmieniło się moje podejście do zdrowia i codziennych wyborów.\n\nOgromne podziękowania kieruję do mojej dietetyk, Poli Gmitrzak, która z niesamowitą cierpliwością i empatią prowadzi mnie w tym procesie. Jej wskazówki są dopasowane do mojego stylu życia, dzięki czemu <strong>zdrowe odżywianie stało się naturalną częścią dnia</strong>."
  },
  {
    name: "Piotr Lipiński",
    when: "2 miesiące temu",
    headline: "„Poczucie bezpieczeństwa i kontroli nad całym procesem.”",
    body:
      "Pod opieką kliniki jestem już ponad 6 miesięcy i uważam, że <strong>dołączenie do programu było bardzo dobrą decyzją w moim życiu</strong>. To, że z każdą wątpliwością mogę zgłosić się do dietetyka lub lekarza, <strong>daje mega poczucie bezpieczeństwa i kontroli nad całym procesem</strong>. Super jest to, że co 3 miesiące jest kontrola zdrowia poprzez badania. Bardzo polecam też cykliczne webinary z psychologiem - <strong>naprawdę można zacząć kwestionować utarte schematy myślowe</strong>. Prowadzący leczenie są mega mili, otwarci i zdecydowanie wiedzą co robią."
  },
  {
    name: "Agata Kinga",
    when: "miesiąc temu",
    headline: "„Schudłam 10 kg i - co najważniejsze - utrzymałam ten efekt.”",
    body:
      "Moja współpraca z Holi była <strong>jedną z najlepszych decyzji zdrowotnych, jakie podjęłam</strong>. W trakcie ponad półrocznej opieki <strong>schudłam 10 kg i utrzymałam ten efekt, co wcześniej nigdy mi się nie udało</strong>.\n\nOgromne podziękowania dla mojej dietetyczki, Kasi Filipowicz-Mikołajewskiej. Nasza współpraca była bardzo praktyczna i „życiowa”. <strong>Nie dostałam diety z kosmosu - pracowałyśmy na tym, co naprawdę jem.</strong> Prowadziłam dzienniczek fotograficzny posiłków, a Kasia pomagała mi je modyfikować tak, żeby były odpowiednie na redukcji."
  }
];

const Stars = () => (
  <span className="rev-card__stars" aria-label="5 na 5 gwiazdek">
    {[0, 1, 2, 3, 4].map((i) => (
      <svg key={i} width="15" height="15" viewBox="0 0 24 24" fill="#F5A623" aria-hidden="true">
        <path d="M12 2.5l2.7 5.95 6.3.55-4.78 4.2 1.43 6.3L12 16.9l-5.65 3.6 1.43-6.3L3 9.9l6.3-.55z" />
      </svg>
    ))}
  </span>
);

const GoogleMark = () => (
  <svg width="19" height="19" viewBox="0 0 48 48" aria-hidden="true">
    <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z" />
    <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" />
    <path fill="#FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34A21.9 21.9 0 0 0 2 24c0 3.55.85 6.91 2.34 9.88z" />
    <path fill="#EA4335" d="M24 9.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 3.18 29.93 1 24 1 15.4 1 7.96 5.93 4.34 13.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z" />
  </svg>
);

window.ReviewsSection = function ReviewsSection() {
  const trackRef = useReviewRef(null);
  const [active, setActive] = useReviewState(0);

  const scrollToCard = (idx) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.children[idx];
    if (!card) return;
    track.scrollTo({ left: card.offsetLeft - track.offsetLeft, behavior: "smooth" });
  };

  const onScroll = () => {
    const track = trackRef.current;
    if (!track) return;
    const center = track.scrollLeft + track.clientWidth / 2;
    let best = 0;
    let bestDist = Infinity;
    for (let i = 0; i < track.children.length; i++) {
      const c = track.children[i];
      const cc = c.offsetLeft - track.offsetLeft + c.clientWidth / 2;
      const d = Math.abs(cc - center);
      if (d < bestDist) { bestDist = d; best = i; }
    }
    setActive(best);
  };

  const go = (dir) => {
    const next = Math.min(REVIEWS.length - 1, Math.max(0, active + dir));
    scrollToCard(next);
  };

  return (
    <section className="reviews" id="opinie">
      <div className="container reviews__inner">
        <div className="reviews__head">
          <div>
            <span className="reviews__eyebrow">Opinie pacjentów</span>
            <h2 className="reviews__title">Co mówią <em>nasi pacjenci.</em></h2>
          </div>
          <div className="reviews__nav">
            <button className="reviews__arrow" onClick={() => go(-1)} disabled={active === 0} aria-label="Poprzednia opinia">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
            </button>
            <button className="reviews__arrow" onClick={() => go(1)} disabled={active === REVIEWS.length - 1} aria-label="Następna opinia">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6" /></svg>
            </button>
          </div>
        </div>

        <div className="reviews__track" ref={trackRef} onScroll={onScroll}>
          {REVIEWS.map((r, i) => (
            <article key={i} className={`rev-card ${r.accent ? "rev-card--accent" : ""}`}>
              <div className="rev-card__top">
                <div className="rev-card__meta">
                  <div className="rev-card__name">{r.name}</div>
                  <div className="rev-card__when">{r.when}</div>
                </div>
                <div className="rev-card__badge">
                  <Stars />
                  <GoogleMark />
                </div>
              </div>
              <div className="rev-card__content">
                <p className="rev-card__headline">{r.headline}</p>
                <p className="rev-card__body" dangerouslySetInnerHTML={{ __html: r.body }}></p>
              </div>
            </article>
          ))}
        </div>

        <div className="reviews__dots">
          {REVIEWS.map((r, i) => (
            <button
              key={i}
              className={`reviews__dot ${active === i ? "reviews__dot--on" : ""}`}
              onClick={() => scrollToCard(i)}
              aria-label={`Opinia ${i + 1}`}></button>
          ))}
        </div>
      </div>
    </section>);

};
