/* Doctors — grid with filter tabs */

const Doctors = ({onOpenQuiz}) => {
  const ref = React.useRef(null);
  useReveal(ref);

  /* Список 32 врачей по порядку, согласованному с клиентом (2026-04-19).
     cons/years — плановые ориентиры, требуют подтверждения у клиента/Ассуты.
     img — путь к фото в assets/doctors/. Когда файл появится — JSX подтянет автоматически. */
  const allDocs = [
    { name: 'Проф. Офер Меримский',   spec: 'Онколог',             cat: 'Онкология',         rating: 5.0, cons: 500, years: 30, hue: 25,  img: '', desc: 'Зав. отделением саркомы и опухолей мягких тканей в МЦ Ихилов. Forbes-список лучших врачей Израиля. Частный приём в Ассута.' },
    { name: 'Др. Юлия Гринберг',      spec: 'Онколог',             cat: 'Онкология',         rating: 4.9, cons: 350, years: 18, hue: 340, img: '', desc: 'Зав. онкологическим отделением Ассуты. Член ASCO и ESMO. Химио- и радиотерапия.' },
    { name: 'Проф. Яков Шехтер',      spec: 'Онколог',             cat: 'Онкология',         rating: 5.0, cons: 600, years: 32, hue: 295, img: '', desc: 'Зам. зав. онкослужбой больницы Шиба. Глава института ЭЛЛА — крупнейший в мире центр по меланоме.' },
    { name: 'Проф. Джек Баниэль',     spec: 'Уролог',              cat: 'Урология',          rating: 5.0, cons: 550, years: 28, hue: 210, img: '', desc: 'Зав. отделением урологии в МЦ им. Ицхака Рабина. Частная практика в Ассута.' },
    { name: 'Проф. Моше Паппа',       spec: 'Маммолог',            cat: 'Хирургия',          rating: 5.0, cons: 480, years: 28, hue: 180, img: '', desc: 'Зав. отделением онкохирургии маммологии в МЦ Ассута. Частная практика в Ассута.' },
    { name: 'Проф. Дан Адерка',       spec: 'Онколог',             cat: 'Онкология',         rating: 5.0, cons: 600, years: 35, hue: 50,  img: '', desc: 'Старший врач онкологии Шиба. Основатель Еврейского общества онкологов ЖКТ. Частная практика в Ассута.' },
    { name: 'Проф. Хаим Гутман',      spec: 'Онкохирург',          cat: 'Хирургия',          rating: 5.0, cons: 520, years: 30, hue: 75,  img: '', desc: 'Зав. отделением хирургической онкологии МЦ им. Ицхака Рабина (Бейлинсон). Ведущий онкохирург Ассуты.' },
    { name: 'Проф. Моти Гольденберг', spec: 'Гинеколог',           cat: 'Гинекология',       rating: 5.0, cons: 540, years: 28, hue: 320, img: '', desc: 'Зав. гинекологическим отделением Шиба. Глава нац. института эндоскопической хирургии. Приём в Ассута.' },
    { name: 'Др. Юрий Гольдес',       spec: 'Гастроэнтеролог',     cat: 'Гастроэнтерология', rating: 4.9, cons: 380, years: 20, hue: 100, img: '', desc: 'Зав. отделением заболеваний ЖКТ в МЦ им. Хаима Шибы. Приём в Ассута.' },
    { name: 'Др. Яков Шехтер',        spec: 'Нейрорадиолог',       cat: 'Нейрохирургия',     rating: 4.9, cons: 320, years: 22, hue: 250, img: '', desc: 'Руководитель отделения инвазивной нейрорадиологии в МЦ им. Сураски. Преподаватель медшколы Саклера TAU.' },
    { name: 'Др. Алла Теппер',        spec: 'Онколог',             cat: 'Онкология',         rating: 4.9, cons: 400, years: 22, hue: 5,   img: '', desc: 'Зав. онкологическим отделением Ассуты. 20+ лет стажа. Специалист по раку молочной железы.' },
    { name: 'Проф. Яков Рамон',       spec: 'Онкохирург',          cat: 'Хирургия',          rating: 5.0, cons: 500, years: 28, hue: 150, img: '', desc: 'Глава отделения хирургической онкологии Шиба. Член кафедры хирургии медфакультета TAU.' },
    { name: 'Проф. Дан Флис',         spec: 'Хирург',              cat: 'Хирургия',          rating: 5.0, cons: 470, years: 26, hue: 120, img: '', desc: 'Зав. отделением хирургии головы и шеи в МЦ им. Сураски. Частный приём в Ассута.' },
    { name: 'Др. Моше Кармон',        spec: 'Маммолог',            cat: 'Хирургия',          rating: 5.0, cons: 600, years: 30, hue: 195, img: '', desc: 'Ведущий маммолог Израиля. 15 000+ операций. Руководит Центром здоровья молочной железы Шаарей-Цедек.' },
    { name: 'Др. Маор Лахав',         spec: 'Гастроэнтеролог',     cat: 'Гастроэнтерология', rating: 4.9, cons: 360, years: 18, hue: 90,  img: '', desc: 'Возглавляет центр инвазивной эндоскопии Шиба. Приём в гастроотделении Ассута.' },
    { name: 'Проф. Тамир Габриэль',   spec: 'Онкохирург',          cat: 'Хирургия',          rating: 5.0, cons: 550, years: 25, hue: 165, img: '', desc: 'Эксперт по онкохирургии и HIPEC с 2007. 150+ научных публикаций. Доцент TAU.' },
    { name: 'Проф. Джерри Вайс',      spec: 'Пластический хирург', cat: 'Хирургия',          rating: 5.0, cons: 450, years: 26, hue: 35,  img: '', desc: 'Глава центра пластической хирургии МЦ им. Сураски. Преподаватель TAU. Глава Wisebands Ltd.' },
    { name: 'Др. Альмог Бен Яаков',   spec: 'Онкохирург',          cat: 'Хирургия',          rating: 4.9, cons: 380, years: 18, hue: 240, img: '', desc: '200+ процедур CRS+HIPEC под рук. проф. Ниссана. Стажировка в Sloan Kettering. Перитонеальная онкология.' },
    { name: 'Др. Борис Гендель',      spec: 'Торакальный хирург',  cat: 'Хирургия',          rating: 4.9, cons: 500, years: 35, hue: 270, img: '', desc: 'Зав. отделением торакальной хирургии МЦ Меир. Главный торакальный консультант МЦ Герцлия. Стаж 35+ лет.' },
    { name: 'Др. Дрор Левин',         spec: 'Детский онколог',     cat: 'Онкология',         rating: 4.9, cons: 320, years: 22, hue: 60,  img: '', desc: 'Глава детского гемато-онкологического отделения МЦ им. Сураски. Координатор лечения сарком у детей.' },
    { name: 'Др. Сигаль Тавор',       spec: 'Гематолог',           cat: 'Онкология',         rating: 4.9, cons: 400, years: 25, hue: 305, img: '', desc: 'Глава департамента гематологии МЦ им. Сураски. Зам. главы пересадки костного мозга. Эксперт-консультант Маккаби.' },
    { name: 'Проф. Цви Рам',          spec: 'Нейрохирург',         cat: 'Нейрохирургия',     rating: 5.0, cons: 580, years: 30, hue: 220, img: '', desc: 'Один из ведущих нейрохирургов мира. Малоинвазивные операции на мозге, генная терапия. Член AANS, EANO.' },
    { name: 'Проф. Евгений Мошкович', spec: 'Эндокринолог',        cat: 'Эндокринология',    rating: 5.0, cons: 520, years: 25, hue: 15,  img: '', desc: 'Глава Института эндокринологии Клалит (Рамат-Ган). Ведущий консультант МЦ Ассута. 25+ лет деятельности.' },
    { name: 'Др. Лев Менделевич',     spec: 'Кардиолог',           cat: 'Кардиология',       rating: 4.9, cons: 600, years: 35, hue: 10,  img: '', desc: 'Один из ведущих кардиологов Израиля. ИБС, аритмии, инфаркт. 35+ лет стажа. Современная эхокардиография.' },
    { name: 'Др. Илья Пекарский',     spec: 'Ортопед',             cat: 'Ортопедия',         rating: 5.0, cons: 720, years: 25, hue: 140, img: '', desc: 'Мировой эксперт по хирургии позвоночника. 60+ операций в месяц. Spine Assist робот, PASHA-электроды.' },
    { name: 'Др. Уди Арад',           spec: 'Пластический хирург', cat: 'Хирургия',          rating: 4.9, cons: 380, years: 22, hue: 285, img: '', desc: 'Зав. отделением хирургии груди МЦ Ихилов. 20+ лет опыта. Реконструкция после мастэктомии, микрохирургия.' },
    { name: 'Проф. Ави Хефец',        spec: 'ЛОР-онкохирург',      cat: 'Хирургия',          rating: 5.0, cons: 540, years: 28, hue: 105, img: '', desc: 'Зав. отделением хирургии головы и шеи. Председатель Израильского общества онкологии. Стажировки Sloan Kettering.' },
    { name: 'Др. Светлана Залманов',  spec: 'Радиолог-онколог',    cat: 'Онкология',         rating: 4.9, cons: 480, years: 35, hue: 355, img: '', desc: 'Руководит отделением онкологии и радиотерапии Ассута. Брахитерапия, SBRT. Стаж 35+ лет.' },
    { name: 'Др. Беньямин Бендер',    spec: 'Ортопед',             cat: 'Ортопедия',         rating: 4.9, cons: 480, years: 22, hue: 115, img: '', desc: 'Эксперт-эндопротезист с международной репутацией. Пионер замены тазобедренного сустава лёжа на спине.' },
    { name: 'Проф. Милтон Сауте',     spec: 'Торакальный хирург',  cat: 'Хирургия',          rating: 5.0, cons: 500, years: 30, hue: 200, img: '', desc: 'Руководит программой трансплантации лёгких в МЦ Шиба. Лектор TAU. Малоинвазивная торакальная хирургия.' },
    { name: 'Проф. Зив Бен Ари',      spec: 'Гепатолог',           cat: 'Гастроэнтерология', rating: 5.0, cons: 600, years: 30, hue: 45,  img: '', desc: 'Глава нац. программы по гепатиту C. Профессор Школы медицины TAU. 170+ научных публикаций.' },
    { name: 'Др. Галина Шенкерман',   spec: 'Эндокринолог',        cat: 'Эндокринология',    rating: 4.9, cons: 380, years: 20, hue: 30,  img: '', desc: 'Ст. врач эндокринологии МЦ Ихилов–Сураски. Руководит направлением лечения ожирения. Приём в Ассута.' },
  ];

  const cats = ['Все направления', 'Онкология', 'Хирургия', 'Урология', 'Гинекология', 'Гастроэнтерология', 'Эндокринология', 'Кардиология', 'Ортопедия', 'Нейрохирургия'];
  const [active, setActive] = React.useState('Все направления');
  const [showAll, setShowAll] = React.useState(false);
  const DEFAULT_VISIBLE = 6;

  const isAllCat = active === 'Все направления';
  const filtered = isAllCat ? allDocs : allDocs.filter(d => d.cat === active);
  const visible = isAllCat && !showAll ? filtered.slice(0, DEFAULT_VISIBLE) : filtered;
  const hiddenCount = isAllCat ? Math.max(0, allDocs.length - DEFAULT_VISIBLE) : 0;

  return (
    <section id="doctors" className="doctors section" ref={ref}>
      <style>{`
        .doctors { background: var(--paper-2); }
        .docs-head {
          display: flex; justify-content: space-between; align-items: end; gap: 32px;
          flex-wrap: wrap; margin-bottom: 48px;
        }
        .docs-tabs {
          display: flex; gap: 6px; flex-wrap: wrap;
          padding: 6px; background: var(--paper); border: 1px solid var(--ink-10);
          border-radius: var(--r-pill);
        }
        @media (max-width: 640px) {
          .docs-tabs { display: none; }
          .docs-select-wrap { display: block; }
        }
        .docs-select-wrap { display: none; position: relative; width: 100%; }
        .docs-select-wrap::after {
          content: '▾';
          position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
          color: var(--ink-60); font-size: 12px; pointer-events: none;
        }
        .docs-select {
          appearance: none; -webkit-appearance: none;
          width: 100%;
          padding: 14px 40px 14px 18px;
          background: var(--paper); color: var(--ink);
          border: 1px solid var(--ink-20);
          border-radius: var(--r-pill);
          font-size: 14px; font-family: inherit; font-weight: 500;
          cursor: pointer;
        }
        .docs-select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-10); }
        .docs-tab {
          padding: 9px 16px; border-radius: var(--r-pill);
          font-size: 13px; color: var(--ink-60); font-weight: 500;
          transition: background 0.2s, color 0.2s, border-color 0.2s;
        }
        .docs-tab:hover { color: var(--ink); }
        .docs-tab.active { background: var(--ink); color: var(--paper); }

        .docs-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
        }
        @media (max-width: 960px) { .docs-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .docs-grid { grid-template-columns: 1fr; } }

        .doc-card {
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-lg);
          padding: 28px;
          display: flex; flex-direction: column; gap: 18px;
          transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        }
        .doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink-20); }

        .doc-top { display: flex; align-items: center; justify-content: space-between; }
        .doc-spec {
          font-family: var(--font-body);
          font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
          color: var(--clay-dark);
        }
        .doc-rating {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--ink-80);
        }
        .doc-portrait {
          display: flex; align-items: center; gap: 18px;
        }
        .doc-photo {
          width: 72px; height: 72px;
          border-radius: 50%;
          object-fit: cover;
          box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink-10);
          flex-shrink: 0;
        }
        .doc-name { font-family: var(--font-body); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
        .doc-desc { font-size: 14px; line-height: 1.55; color: var(--ink-60); flex: 1; }
        @media (max-width: 640px) { .doc-desc { font-size: 15px; line-height: 1.6; } }
        .doc-stats {
          display: flex; gap: 18px;
          padding-top: 16px; border-top: 1px dashed var(--ink-20);
          font-size: 11px; color: var(--ink-60); letter-spacing: 0.03em;
        }
        .doc-stats .ds { display: flex; flex-direction: column; gap: 2px; }
        .doc-stats .v { color: var(--ink); font-family: var(--font-mono); font-size: 13px; }

        .doc-foot { padding-top: 18px; border-top: 1px solid var(--ink-10); }
        .doc-book {
          width: 100%; justify-content: center;
        }

        .docs-empty {
          padding: 48px 28px;
          text-align: center; color: var(--ink-60);
          background: var(--snow); border: 1px dashed var(--ink-20); border-radius: var(--r-lg);
          grid-column: 1 / -1;
        }
        .docs-more { margin-top: 24px; display: flex; justify-content: center; }
        .docs-more-btn { min-width: 280px; padding: 14px 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; justify-content: center; }
        @media (max-width: 480px) { .docs-more-btn { width: 100%; min-width: 0; } }

        .docs-help {
          margin-top: 32px;
          padding: 28px 36px;
          border-radius: var(--r-lg);
          background: var(--ink); color: var(--paper);
          display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
        }
        .docs-help h3 { font-family: var(--font-display); font-size: 26px; font-weight: 380; margin: 0; }
        .docs-help p { color: rgba(245,239,230,0.7); font-size: 14px; margin: 4px 0 0; }
      `}</style>

      <div className="container">
        <div className="docs-head reveal">
          <div style={{maxWidth: 560}}>
            <SectionHeader
              eyebrow="Наши врачи"
              title={<>Команда ведущих <em className="italic-accent">специалистов</em></>}
              lead="Многолетний опыт в ведущих медицинских центрах Израиля. Приём на русском языке без переводчиков."
            />
          </div>
          <div className="docs-tabs">
            {cats.map(c => (
              <button key={c} className={`docs-tab ${active === c ? 'active' : ''}`} onClick={() => setActive(c)}>
                {c}
              </button>
            ))}
          </div>
          <div className="docs-select-wrap">
            <select className="docs-select" value={active} onChange={(e) => setActive(e.target.value)} aria-label="Фильтр по направлению">
              {cats.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
        </div>

        <div className="docs-grid">
          {visible.map((d, i) => (
            <div key={d.name} className="doc-card">
              <div className="doc-top">
                <span className="doc-spec">{d.spec}</span>
                <span className="doc-rating"><I.Star size={12}/> {d.rating.toFixed(1)}</span>
              </div>
              <div className="doc-portrait">
                {d.img ? (
                  <img src={d.img} alt={d.name} className="doc-photo" loading="lazy"/>
                ) : (
                  <Avatar name={d.name} hue={d.hue} size={72} ring/>
                )}
                <div>
                  <div className="doc-name">{d.name}</div>
                  <div style={{fontSize: 12, color:'var(--ink-60)', marginTop: 4}}>{d.cat}</div>
                </div>
              </div>
              <p className="doc-desc">{d.desc}</p>
              <div className="doc-stats">
                <div className="ds"><span className="v">{d.cons}+</span> <span>консультаций</span></div>
                <div className="ds"><span className="v">{d.years} лет</span> <span>опыта</span></div>
              </div>
              <div className="doc-foot">
                <a href="#contact" className="btn btn-ghost btn-sm doc-book">
                  Записаться <I.Arrow size={14}/>
                </a>
              </div>
            </div>
          ))}
          {visible.length === 0 && (
            <div className="docs-empty">Нет врачей в этой категории. Попробуйте другую.</div>
          )}
        </div>

        {isAllCat && hiddenCount > 0 && (
          <div className="docs-more reveal">
            <button type="button" className="btn btn-ghost docs-more-btn" onClick={() => setShowAll(s => !s)}>
              {showAll ? 'Свернуть ↑' : `Показать ещё ${hiddenCount} ${hiddenCount % 10 === 1 && hiddenCount % 100 !== 11 ? 'врача' : 'врачей'} ↓`}
            </button>
          </div>
        )}

        <div className="docs-help reveal">
          <div>
            <h3>Не нашли нужного специалиста?</h3>
            <p>У нас работают врачи более чем 20 специальностей — координатор поможет найти эксперта для вашего случая.</p>
          </div>
          <button type="button" className="btn btn-clay" onClick={onOpenQuiz}>Помочь с выбором <I.ArrowUpRight size={14}/></button>
        </div>
      </div>
    </section>
  );
};

window.Doctors = Doctors;
