/* global React, REVIEWS, REVIEWS_CAROUSEL, IconStar, IconHalfStar, IconArrowLeft, IconArrow, IconDoctify */

function Reviews() {
  const [i, setI] = React.useState(0);
  const cur = REVIEWS_CAROUSEL[i];
  const next = () => setI((i + 1) % REVIEWS_CAROUSEL.length);
  const prev = () => setI((i - 1 + REVIEWS_CAROUSEL.length) % REVIEWS_CAROUSEL.length);

  // auto-advance gently
  React.useEffect(() => {
    const t = setTimeout(next, 9000);
    return () => clearTimeout(t);
  }, [i]);

  const stars = (r) => {
    const out = [];
    const full = Math.floor(r);
    const half = r % 1 >= 0.4;
    for (let k = 0; k < full; k++) out.push(<IconStar key={"f" + k} size={16} />);
    if (half) out.push(<IconHalfStar key="h" size={16} />);
    while (out.length < 5) out.push(<IconStar key={"e" + out.length} size={16} filled={false} />);
    return out;
  };

  return (
    <section id="reviews" className="reviews">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 32 }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--champagne)' }}>04 · Verified reviews</div>
            <h2 className="h2" style={{ marginTop: 14 }}>
              <em style={{ fontStyle: 'italic', color: 'var(--champagne)' }}>4.98 / 5</em>,<br/>
              from twenty patients<br/>who said it themselves.
            </h2>
          </div>
          <p className="lead" style={{ color: 'rgba(255,255,255,.7)' }}>
            Every quote below is a verified Doctify review — anonymous, dated, and traceable to the source. We don’t invent reviewer names; we let the patients speak.
          </p>
        </div>

        <div className="rev-meta">
          <div>
            <div className="rev-meta__lbl">Doctify practice rating</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 6 }}>
              <div className="rev-meta__big">4.98</div>
              <div>
                <div style={{ display: 'flex', gap: 2, color: 'var(--champagne)' }}>
                  <IconStar /><IconStar /><IconStar /><IconStar /><IconHalfStar />
                </div>
                <div className="rev-meta__sub">20 verified reviews — last re-confirmed live 21 May 2026.</div>
              </div>
            </div>
          </div>
          <span className="rev-meta__verified">
            <IconDoctify size={14} /> Verified on Doctify
          </span>
        </div>

        <div className="rev-quote">
          <span className="rev-quote__mark">"</span>
          <p className="rev-quote__txt">{cur.quote}</p>
          <div className="rev-quote__by">
            <span style={{ display: 'inline-flex', gap: 2, verticalAlign: 'middle', color: 'var(--champagne)' }}>{stars(cur.rating)}</span>
            <span className="dot">·</span>
            {cur.by}
          </div>
        </div>

        <div className="rev-nav">
          <button onClick={prev} aria-label="Previous"><IconArrowLeft size={16} /></button>
          <button onClick={next} aria-label="Next"><IconArrow size={16} /></button>
          <div className="progress"><span style={{ width: `${((i + 1) / REVIEWS_CAROUSEL.length) * 100}%` }} /></div>
          <div className="pages">{String(i + 1).padStart(2, "0")} / {String(REVIEWS_CAROUSEL.length).padStart(2, "0")}</div>
        </div>

        <div className="rev-grid">
          {REVIEWS.slice(0, 4).map((r, k) => (
            <div key={k} className="rev-card">
              <div className="stars">{stars(r.r)}</div>
              <p className="q">“{r.q}”</p>
              <div className="by">{r.by} · {r.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Reviews = Reviews;