/* Reviews — carousel with tabs */

const Reviews = () => {
  const ref = React.useRef(null);
  useReveal(ref);

  /* Demo-отзывы — требуют замены на реальные от клиента. Направления согласованы с Doctors/Pricing: Онкология, Кардиология, Ортопедия. */
  const reviews = [
    { body: 'Получила второе мнение по поводу рака молочной железы. Врачи очень внимательно изучили все документы и дали подробное заключение. Особенно понравилось, что всё общение было на русском языке без переводчиков.', name: 'Анна В.', age: 38, city: 'Минск', date: '15 августа 2024', topic: 'Онкология', rating: 4.9, hue: 20 },
    { body: 'Нужно было срочно подобрать кардиохирурга для мамы. Координатор Анна связалась через 5 минут, помогла с документами. План лечения получили через 4 дня, очень детальный. Операцию провели успешно.', name: 'Дмитрий Л.', age: 52, city: 'Алматы', date: '22 августа 2024', topic: 'Кардиология', rating: 5.0, hue: 220 },
    { body: 'Консультация по поводу грыжи позвоночника прошла отлично. Д-р Пекарский внимательно выслушал, показал снимки, объяснил все варианты. Дал рекомендации без спешки с операцией — уже делаю реабилитацию.', name: 'Светлана К.', age: 47, city: 'Ташкент', date: '3 сентября 2024', topic: 'Ортопедия', rating: 4.8, hue: 340 },
    { body: 'Результат онкологического обследования получили за 3 дня — это невероятно быстро. Координатор Анна держала в курсе каждого шага. Стоимость оказалась даже меньше первоначальной оценки.', name: 'Игорь М.', age: 56, city: 'Киев', date: '10 сентября 2024', topic: 'Онкология', rating: 5.0, hue: 140 },
  ];

  const cases = [
    {
      topic: 'Онкология',
      year: '2023',
      patient: 'Мужчина, 58 лет · Ташкент',
      hue: 140,
      diagnosis: 'Местный рак предстательной железы T2c, Глисон 7 (4+3). Направлен на радикальное удаление простаты в клинике по месту жительства — без обсуждения альтернатив.',
      treatment: 'Второе мнение в Ассуте: пересмотр МРТ подтвердил локализованную форму. Принято решение о стереотаксической радиохирургии (CyberKnife) 5 фракций вместо операции.',
      result: 'PSA через 18 месяцев — 0.4 нг/мл (целевой уровень). Сохранены эректильная функция и континенция. Пациент вернулся к работе через 4 дня после последней фракции.',
      metrics: [
        { v: '18 мес', l: 'без рецидива' },
        { v: '5', l: 'фракций CyberKnife' },
        { v: '$28 к', l: 'вместо $95 к (США)' },
      ],
    },
    {
      topic: 'Кардиология',
      year: '2024',
      patient: 'Женщина, 64 года · Минск',
      hue: 20,
      diagnosis: 'ИБС, трёхсосудистое поражение, стенокардия III ФК. В клинике в Беларуси предложено только медикаментозное лечение из-за возраста и сопутствующего диабета.',
      treatment: 'Шунтирование (CABG) на работающем сердце в Ассуте. Команда д-ра Кассифа — off-pump техника, минимизирующая риски для диабетиков. Реабилитация 10 дней в стационаре.',
      result: 'ФВ выросла с 42% до 55%. Приступы стенокардии прекратились. Вернулась к активной жизни, отменены 3 из 5 препаратов. Наблюдение телемедициной каждые 3 месяца.',
      metrics: [
        { v: '55%', l: 'фракция выброса' },
        { v: '0', l: 'приступов за год' },
        { v: '10 дн', l: 'в стационаре' },
      ],
    },
    {
      topic: 'Ортопедия',
      year: '2024',
      patient: 'Мужчина, 47 лет · Алматы',
      hue: 220,
      diagnosis: 'Коксартроз III степени обоих тазобедренных суставов. Сильные боли, хромота, невозможность работать. В частной клинике КЗ предложили поэтапные операции с перерывом 6 месяцев.',
      treatment: 'Одномоментное двустороннее эндопротезирование в Ассуте. Керамические протезы Zimmer Biomet. Хирург д-р Рат — одна из немногих команд в регионе с таким опытом.',
      result: 'Встал на ноги на 2 день, выписан на 6 день. Вернулся к работе через 6 недель. Индекс Харриса — 94/100 (отличный результат). Избежал второго прилёта и 6 месяцев ожидания.',
      metrics: [
        { v: '6 нед', l: 'до возвращения к работе' },
        { v: '94/100', l: 'индекс Харриса' },
        { v: '1', l: 'операция вместо 2' },
      ],
    },
  ];

  const [tab, setTab] = React.useState('Отзывы');
  const [idx, setIdx] = React.useState(0);
  const [caseIdx, setCaseIdx] = React.useState(0);
  const perView = 3;
  const total = reviews.length;
  const maxIdx = Math.max(0, total - perView);

  return (
    <section id="reviews" className="reviews section" ref={ref}>
      <style>{`
        .reviews { background: var(--paper); }
        .rev-head { display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap; margin-bottom: 48px; }
        .rev-tabs { display:flex; gap: 4px; padding: 4px; background: var(--ink-05); border-radius: var(--r-pill); }
        .rev-tab { padding: 9px 18px; border-radius: var(--r-pill); font-size: 13px; color: var(--ink-60); font-weight: 500; }
        .rev-tab.active { background: var(--ink); color: var(--paper); }

        .rev-viewport { overflow: hidden; position: relative; }
        .rev-track {
          display: grid;
          grid-template-columns: repeat(${total}, calc((100% - 32px) / ${perView}));
          gap: 16px;
          transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
        }
        @media (max-width: 880px) {
          .rev-track { grid-template-columns: repeat(${total}, 100%); gap: 16px; }
        }

        .rev-card {
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-lg);
          padding: 32px;
          display: flex; flex-direction: column; gap: 18px;
          position: relative;
          min-height: 340px;
        }
        .rev-card .quote-mark {
          color: var(--clay);
          opacity: 0.8;
        }
        .rev-badge {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-mono);
          font-size: 10.5px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--clay-dark);
          background: var(--clay-soft);
          border: 1px solid color-mix(in oklab, var(--clay) 25%, transparent);
          padding: 6px 12px;
          border-radius: var(--r-pill);
          width: fit-content;
          font-weight: 600;
        }
        .rev-badge::before { content:''; width: 6px; height: 6px; background: var(--clay-dark); border-radius: 50%; }
        .rev-body {
          font-family: var(--font-body);
          font-size: 19px;
          line-height: 1.6;
          font-weight: 400;
          color: var(--ink);
          letter-spacing: -0.005em;
          flex: 1;
          text-wrap: pretty;
        }
        .rev-foot {
          display: flex; align-items: center; gap: 14px;
          padding-top: 18px;
          border-top: 1px dashed var(--ink-20);
        }
        .rev-author-name { font-weight: 500; font-size: 14px; }
        .rev-author-meta { font-size: 12px; color: var(--ink-60); }

        .rev-controls {
          display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px;
        }
        .rev-count {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--ink-60);
          letter-spacing: 0.05em;
        }
        .rev-count strong { color: var(--ink); }
        .rev-nav { display: flex; gap: 8px; }
        .rev-btn {
          width: 44px; height: 44px; border-radius: 50%;
          border: 1px solid var(--ink-20);
          display: grid; place-items: center;
          transition: background 0.2s, color 0.2s;
        }
        .rev-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
        .rev-btn:disabled { opacity: 0.3; cursor: not-allowed; }

        .rev-stats {
          margin-top: 48px;
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        @media (max-width: 768px) { .rev-stats { grid-template-columns: repeat(2, 1fr); } }
        .rev-stat {
          padding: 24px;
          border-radius: var(--r-md);
          background: var(--paper-2);
          border: 1px solid var(--ink-10);
        }
        .rev-stat .v { font-family: var(--font-body); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
        .rev-stat .l { font-size: 12px; font-weight: 600; color: var(--ink-60); margin-top: 8px; letter-spacing: 0.12em; text-transform: uppercase; }

        /* Review cases */
        .case-wrap { position: relative; }
        .case-tabs {
          display: flex; gap: 8px; flex-wrap: wrap;
          margin-bottom: 28px;
        }
        .case-chip {
          padding: 10px 18px;
          border-radius: var(--r-pill);
          border: 1px solid var(--ink-20);
          font-size: 13px;
          color: var(--ink-60);
          display: inline-flex; gap: 10px; align-items: center;
          transition: all 0.2s;
        }
        .case-chip .yr { font-family: var(--font-mono); font-size: 11px; color: var(--ink-40); letter-spacing: 0.04em; }
        .case-chip.active {
          background: var(--ink);
          color: var(--paper);
          border-color: var(--ink);
        }
        .case-chip.active .yr { color: var(--clay-soft); }

        .case-card {
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-lg);
          overflow: hidden;
        }
        .case-hd {
          padding: 28px 36px;
          background: var(--ink);
          color: var(--paper);
          display: flex; align-items: center; justify-content: space-between; gap: 24px;
          flex-wrap: wrap;
        }
        .case-hd .patient { display: flex; align-items: center; gap: 14px; }
        .case-hd .pt-name { font-family: var(--font-display); font-size: 22px; font-weight: 380; letter-spacing: -0.01em; }
        .case-hd .pt-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-soft); margin-top: 3px; }
        .case-hd .case-tag {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
          padding: 6px 12px; border-radius: var(--r-pill);
          background: rgba(245,239,230,0.1); color: var(--paper);
        }

        .case-flow {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 0;
        }
        .case-step {
          padding: 32px 32px 36px;
          position: relative;
          display: flex; flex-direction: column; gap: 14px;
        }
        .case-step + .case-step { border-left: 1px solid var(--ink-10); }
        .case-step::before {
          content: '';
          position: absolute;
          top: 54px; right: -8px;
          width: 16px; height: 16px;
          background: var(--snow);
          border-right: 1px solid var(--ink-10);
          border-top: 1px solid var(--ink-10);
          transform: rotate(45deg);
          z-index: 2;
        }
        .case-step:last-child::before { display: none; }

        .case-step .step-num {
          display: flex; align-items: center; gap: 10px;
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--ink-60);
        }
        .case-step .step-num .n {
          width: 22px; height: 22px; border-radius: 50%;
          background: var(--ink-05); color: var(--ink);
          display: grid; place-items: center;
          font-size: 11px; font-weight: 600;
        }
        .case-step .step-title {
          font-family: var(--font-display);
          font-size: 20px;
          font-weight: 380;
          letter-spacing: -0.01em;
        }
        .case-step .step-title em { color: var(--clay-dark); font-style: normal; }
        .case-step .step-body {
          font-size: 14px;
          line-height: 1.6;
          color: var(--ink-80);
          text-wrap: pretty;
        }

        .case-step.diagnosis .step-title em { color: oklch(0.55 0.13 25); }
        .case-step.treatment .step-title em { color: var(--clay-dark); }
        .case-step.result { background: color-mix(in oklch, var(--clay) 4%, var(--snow)); }
        .case-step.result .step-title em { color: var(--success); }

        .case-metrics {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          border-top: 1px solid var(--ink-10);
        }
        .case-metric {
          padding: 24px 32px;
          display: flex; flex-direction: column; gap: 4px;
          background: var(--paper-2);
        }
        .case-metric + .case-metric { border-left: 1px solid var(--ink-10); }
        .case-metric .v { font-family: var(--font-display); font-size: 30px; font-weight: 380; letter-spacing: -0.02em; color: var(--clay-dark); font-variant-numeric: tabular-nums; }
        @media (max-width: 880px) { .case-metric .v { font-size: 22px; } }
        .rev-stat .v { font-variant-numeric: tabular-nums; }
        @media (max-width: 640px) { .rev-stat .v { font-size: 28px !important; } }
        .case-metric .l { font-size: 12px; color: var(--ink-60); letter-spacing: 0.02em; }

        @media (max-width: 880px) {
          .case-flow { grid-template-columns: 1fr; }
          .case-step + .case-step { border-left: 0; border-top: 1px solid var(--ink-10); }
          .case-step::before { display: none; }
          .case-metrics { grid-template-columns: 1fr; }
          .case-metric + .case-metric { border-left: 0; border-top: 1px solid var(--ink-10); }
        }
      `}</style>

      <div className="container">
        <div className="rev-head reveal">
          <div style={{maxWidth: 560}}>
            <SectionHeader
              eyebrow="Отзывы наших пациентов"
              title={<>Более <em className="italic-accent">1000 пациентов</em> уже доверили нам свою историю.</>}
            />
          </div>
          <div className="rev-tabs">
            <button className={`rev-tab ${tab==='Отзывы'?'active':''}`} onClick={()=>setTab('Отзывы')}>Отзывы</button>
            <button className={`rev-tab ${tab==='Случаи'?'active':''}`} onClick={()=>setTab('Случаи')}>Случаи</button>
            <button className={`rev-tab ${tab==='Видео'?'active':''}`} onClick={()=>setTab('Видео')}>Видеоотзывы</button>
          </div>
        </div>

        {tab === 'Случаи' ? (
          <div className="case-wrap">
            <div className="case-tabs">
              {cases.map((c, i) => (
                <button key={i} className={`case-chip ${caseIdx===i?'active':''}`} onClick={() => setCaseIdx(i)}>
                  <span>{c.topic} — {c.patient.split('·')[0].trim()}</span>
                  <span className="yr">{c.year}</span>
                </button>
              ))}
            </div>

            {(() => {
              const c = cases[caseIdx];
              return (
                <article className="case-card">
                  <div className="case-hd">
                    <div className="patient">
                      <Avatar name={c.patient.split('·')[0].split(',')[0].trim()} hue={c.hue} size={52} ring/>
                      <div>
                        <div className="pt-name">{c.patient.split('·')[0].trim()}</div>
                        <div className="pt-meta">{c.patient.split('·')[1]?.trim()} · {c.year}</div>
                      </div>
                    </div>
                    <span className="case-tag">{c.topic} · реальный случай</span>
                  </div>

                  <div className="case-flow">
                    <div className="case-step diagnosis">
                      <div className="step-num"><span className="n">1</span> Диагноз</div>
                      <div className="step-title"><em>Что</em> было?</div>
                      <p className="step-body">{c.diagnosis}</p>
                    </div>
                    <div className="case-step treatment">
                      <div className="step-num"><span className="n">2</span> Лечение</div>
                      <div className="step-title"><em>Как</em> лечили?</div>
                      <p className="step-body">{c.treatment}</p>
                    </div>
                    <div className="case-step result">
                      <div className="step-num"><span className="n">3</span> Результат</div>
                      <div className="step-title"><em>Что</em> получилось?</div>
                      <p className="step-body">{c.result}</p>
                    </div>
                  </div>

                  <div className="case-metrics">
                    {c.metrics.map((m, i) => (
                      <div key={i} className="case-metric">
                        <span className="v">{m.v}</span>
                        <span className="l">{m.l}</span>
                      </div>
                    ))}
                  </div>
                </article>
              );
            })()}
          </div>
        ) : tab === 'Видео' ? (
          <div style={{
            padding: '80px 32px',
            background: 'var(--snow)',
            border: '1px dashed var(--ink-20)',
            borderRadius: 'var(--r-lg)',
            textAlign: 'center',
            color: 'var(--ink-60)',
          }}>
            <I.Play size={32}/>
            <div style={{marginTop: 16, fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--ink)'}}>Видеоотзывы скоро появятся</div>
            <div style={{marginTop: 8, fontSize: 14}}>Сейчас мы снимаем серию интервью с пациентами 2024 года.</div>
          </div>
        ) : (
          <>
        <div className="rev-viewport">
          <div className="rev-track" style={{transform: `translateX(calc(-${idx} * (100% / ${perView} + 16px / ${perView})))`}}>
            {reviews.map((r, i) => (
              <article key={i} className="rev-card">
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                  <div className="rev-badge">Проверенный отзыв</div>
                  <div style={{display:'flex', alignItems:'center', gap:8}}>
                    <Stars value={r.rating}/>
                    <span style={{fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--ink-60)'}}>{r.rating.toFixed(1)}</span>
                  </div>
                </div>
                <I.Quote size={28}/>
                <p className="rev-body">{r.body}</p>
                <div className="rev-foot">
                  <Avatar name={r.name} hue={r.hue} size={44}/>
                  <div>
                    <div className="rev-author-name">— {r.name}</div>
                    <div className="rev-author-meta">{r.age} лет · {r.city} &nbsp;·&nbsp; {r.date}</div>
                  </div>
                  <Chip variant="" style={{marginLeft:'auto'}}>{r.topic}</Chip>
                </div>
              </article>
            ))}
          </div>
        </div>

        <div className="rev-controls">
          <div className="rev-count"><strong>{idx + 1}–{Math.min(idx + perView, total)}</strong> / {total}</div>
          <div className="rev-nav">
            <button className="rev-btn" onClick={() => setIdx(i => Math.max(0, i - 1))} disabled={idx === 0} aria-label="Предыдущие отзывы">
              <I.Chevron dir="left"/>
            </button>
            <button className="rev-btn" onClick={() => setIdx(i => Math.min(maxIdx, i + 1))} disabled={idx >= maxIdx} aria-label="Следующие отзывы">
              <I.Chevron dir="right"/>
            </button>
          </div>
        </div>
        </>
        )}

        <div className="rev-stats reveal d1">
          <div className="rev-stat"><div className="v">4.9</div><div className="l">Средний рейтинг</div></div>
          <div className="rev-stat"><div className="v">1000+</div><div className="l">Пациентов с 2015</div></div>
          <div className="rev-stat"><div className="v">97%</div><div className="l">Рекомендуют нас</div></div>
          <div className="rev-stat"><div className="v">24 ч</div><div className="l">Отклик координатора</div></div>
        </div>
      </div>
    </section>
  );
};

window.Reviews = Reviews;
