// Second Opinion Page (expanded)
const { useState: p5S } = React;

const SecondOpinionPage = ({ onSecondOpinion, onBook }) => {
  return (
    <>
      <PageHero
        eyebrow="Second opinion"
        title="Второе мнение экспертов"
        sub="Загрузите снимки, выписки или результаты анализов. Эксперты НАЦЗДРАВ изучат документы, соберут консилиум и подготовят независимое заключение."
        breadcrumbs={[
          { label: 'Главная', href: 'index.html' },
          { label: 'Второе мнение' },
        ]}
        action={
          <button className="btn btn-primary btn-lg" onClick={onSecondOpinion}>
            <Icon name="upload" size={18} />
            Загрузить документы
          </button>
        }
      />

      {/* WHEN TO USE */}
      <section className="sec sec-soft" style={{ paddingTop: 0 }}>
        <div className="container">
          <SectionHead
            eyebrow="Кому нужно"
            title="Когда стоит получить второе мнение"
            sub="Не каждая ситуация требует консилиума, но в некоторых случаях независимая оценка экспертов критически важна"
          />
          <div className="so-when">
            {[
              { title: 'Сложный или редкий диагноз', desc: 'Нужно убедиться в точности диагноза и подобрать оптимальную тактику лечения', icon: 'spark' },
              { title: 'Предложена операция', desc: 'Хотите узнать, нужна ли она на самом деле, и есть ли альтернативы', icon: 'scalpel' },
              { title: 'Онкологическое заболевание', desc: 'Уточнение стадии, подтверждение гистологии, выбор протокола терапии', icon: 'ribbon' },
              { title: 'Длительное безуспешное лечение', desc: 'Симптомы остаются, диагноз неясен — нужен взгляд со стороны', icon: 'paper' },
              { title: 'Расшифровка снимков из других клиник', desc: 'Повторное чтение МРТ, КТ, гистологии нашими специалистами', icon: 'scan' },
              { title: 'Перед поездкой в Москву', desc: 'Прежде чем ехать далеко — получите экспертное мнение в Дагестане', icon: 'globe' },
            ].map((c, i) => (
              <div key={i} className="so-when-card">
                <div className="so-when-card__icon"><Icon name={c.icon} size={22} /></div>
                <h3 className="so-when-card__title">{c.title}</h3>
                <p className="so-when-card__desc">{c.desc}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .so-when { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
          @media (max-width: 940px) { .so-when { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 540px) { .so-when { grid-template-columns: 1fr; } }
          .so-when-card {
            padding: 26px 24px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            transition: border-color .2s ease, box-shadow .2s ease;
          }
          .so-when-card:hover { border-color: var(--navy-300); box-shadow: var(--shadow-sm); }
          .so-when-card__icon {
            width: 44px; height: 44px;
            border-radius: var(--r-sm);
            background: var(--navy-100);
            color: var(--navy-700);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 14px;
          }
          .so-when-card__title { font-size: 16.5px; font-weight: 600; }
          .so-when-card__desc { font-size: 14px; color: var(--ink-500); line-height: 1.5; margin-top: 6px; }
        `}</style>
      </section>

      {/* HOW IT WORKS */}
      <section className="sec">
        <div className="container">
          <SectionHead
            eyebrow="Как это работает"
            title="От загрузки документов до заключения"
            sub="Прозрачный процесс с понятными сроками. Вы знаете, что происходит на каждом этапе."
          />
          <div className="so-flow">
            {[
              { n: '01', day: 'День 0', title: 'Заявка', desc: 'Вы заполняете форму и загружаете снимки, выписки, анализы. Поддерживаются PDF, JPG, PNG, DICOM.' },
              { n: '02', day: '1-2 день', title: 'Координатор', desc: 'Координатор проверяет полноту документов, при необходимости запрашивает дополнения. Подбирает состав консилиума.' },
              { n: '03', day: '2-5 день', title: 'Изучение', desc: 'Каждый специалист самостоятельно изучает материалы. Эксперты могут запросить дополнительные исследования.' },
              { n: '04', day: '5-7 день', title: 'Консилиум', desc: 'Совместное обсуждение случая. Команда формирует единое заключение и план дальнейших шагов.' },
              { n: '05', day: '7 день', title: 'Заключение', desc: 'Вы получаете письменное заключение, рекомендации по диагностике и лечению. При необходимости — приглашение на очный приём.' },
            ].map((s, i) => (
              <div key={s.n} className="so-flow-step">
                <div className="so-flow-step__head">
                  <span className="so-flow-step__num">{s.n}</span>
                  <span className="so-flow-step__day">{s.day}</span>
                </div>
                <h3 className="so-flow-step__title">{s.title}</h3>
                <p className="so-flow-step__desc">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .so-flow {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            position: relative;
          }
          @media (max-width: 1100px) { .so-flow { grid-template-columns: repeat(3, 1fr); } }
          @media (max-width: 740px)  { .so-flow { grid-template-columns: 1fr; } }
          .so-flow-step {
            padding: 22px 20px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--r-md);
          }
          .so-flow-step__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            gap: 8px;
          }
          .so-flow-step__num {
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 500;
            padding: 4px 8px;
            background: var(--navy-800);
            color: #fff;
            border-radius: var(--r-xs);
            letter-spacing: 0.04em;
          }
          .so-flow-step__day {
            font-size: 11px;
            color: var(--ink-500);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 500;
          }
          .so-flow-step__title { font-size: 16px; font-weight: 600; }
          .so-flow-step__desc { font-size: 13px; color: var(--ink-500); line-height: 1.5; margin-top: 6px; }
        `}</style>
      </section>

      {/* WHAT YOU GET */}
      <section className="sec sec-soft">
        <div className="container">
          <div className="so-get">
            <div className="so-get__copy">
              <span className="eyebrow">Результат</span>
              <h2 style={{ marginTop: 10 }}>Что вы получаете в заключении</h2>
              <ul className="so-get__list">
                {[
                  ['Точный диагноз', 'С обоснованием и ссылками на источники'],
                  ['Стадия / тяжесть', 'Уточнение состояния по международным классификациям'],
                  ['Тактика лечения', 'Рекомендованные варианты и приоритетный метод'],
                  ['Альтернативы', 'Какие есть варианты, если основной не подходит'],
                  ['Прогноз', 'Чего ожидать и какие сроки'],
                  ['Дальнейшие шаги', 'Что делать прямо сейчас и через неделю'],
                ].map(([t, d], i) => (
                  <li key={i}>
                    <Icon name="check" size={16} className="so-check" />
                    <div>
                      <div className="so-get__t">{t}</div>
                      <div className="so-get__d">{d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            <div className="so-get__visual">
              <div className="so-doc-mock">
                <div className="so-doc-mock__head">
                  <LogoMark size={22} color="var(--navy-800)" />
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>Заключение консилиума</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>№ 2026-05-23-А · 23.05.2026</div>
                  </div>
                </div>
                <div className="so-doc-mock__body">
                  <div className="so-doc-mock__section">
                    <div className="so-doc-mock__label">Состав консилиума</div>
                    <div className="so-doc-mock__chips">
                      <span>Кардиолог</span>
                      <span>Кардиохирург</span>
                      <span>Терапевт</span>
                      <span>Анестезиолог</span>
                      <span>+1</span>
                    </div>
                  </div>
                  <div className="so-doc-mock__section">
                    <div className="so-doc-mock__label">Диагноз</div>
                    <div className="so-doc-mock__row" style={{ width: '88%' }}></div>
                    <div className="so-doc-mock__row" style={{ width: '70%' }}></div>
                  </div>
                  <div className="so-doc-mock__section">
                    <div className="so-doc-mock__label">Рекомендации</div>
                    <div className="so-doc-mock__row" style={{ width: '92%' }}></div>
                    <div className="so-doc-mock__row" style={{ width: '64%' }}></div>
                    <div className="so-doc-mock__row" style={{ width: '78%' }}></div>
                  </div>
                </div>
                <div className="so-doc-mock__foot">
                  <div className="so-doc-mock__sig"></div>
                  <div className="so-doc-mock__sig"></div>
                  <div className="so-doc-mock__sig"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .so-get {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
          }
          @media (max-width: 960px) { .so-get { grid-template-columns: 1fr; gap: 32px; } }
          .so-get__list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
          .so-get__list li { display: flex; gap: 12px; align-items: flex-start; }
          .so-check {
            flex-shrink: 0;
            color: var(--success);
            background: oklch(0.62 0.13 160 / 0.14);
            padding: 3px;
            border-radius: 999px;
            width: 22px; height: 22px;
            margin-top: 1px;
          }
          .so-get__t { font-size: 15.5px; font-weight: 600; color: var(--ink-900); }
          .so-get__d { font-size: 13.5px; color: var(--ink-500); margin-top: 2px; line-height: 1.45; }

          .so-doc-mock {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: 24px;
            box-shadow: var(--shadow-md);
            max-width: 460px;
            margin: 0 auto;
            font-family: var(--font-sans);
          }
          .so-doc-mock__head {
            display: flex; align-items: center; gap: 10px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 16px;
          }
          .so-doc-mock__section { margin-bottom: 18px; }
          .so-doc-mock__label {
            font-size: 11px;
            color: var(--ink-500);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 6px;
            font-weight: 500;
          }
          .so-doc-mock__row {
            height: 8px;
            background: var(--ink-200);
            border-radius: 999px;
            margin-bottom: 5px;
          }
          .so-doc-mock__chips {
            display: flex; flex-wrap: wrap; gap: 4px;
          }
          .so-doc-mock__chips span {
            font-size: 11.5px;
            font-weight: 500;
            padding: 3px 8px;
            background: var(--navy-100);
            color: var(--navy-700);
            border-radius: var(--r-full);
          }
          .so-doc-mock__foot {
            display: flex;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
          }
          .so-doc-mock__sig {
            flex: 1;
            height: 36px;
            border-radius: var(--r-xs);
            background:
              linear-gradient(90deg, var(--ink-200) 0%, var(--ink-200) 70%, transparent 70%, transparent 100%);
            background-size: 14px 100%;
            background-repeat: repeat-x;
            opacity: 0.6;
          }
        `}</style>
      </section>

      {/* FAQ */}
      <section className="sec">
        <div className="container">
          <SectionHead eyebrow="Вопросы" title="Часто задаваемые вопросы" />
          <SoFaq />
        </div>
      </section>

      {/* CTA */}
      <section className="sec">
        <div className="container">
          <div className="dt-cta">
            <div>
              <h2>Готовы получить второе мнение?</h2>
              <p>Загрузите документы — координатор свяжется с вами в течение 24 часов.</p>
            </div>
            <div className="dt-cta__actions">
              <button className="btn btn-primary btn-lg" onClick={onSecondOpinion}>
                <Icon name="upload" size={18} />
                Загрузить документы
              </button>
              <button className="btn btn-secondary btn-lg" onClick={onBook}>Записаться на приём</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

// FAQ component (separate so we can use state)
const SoFaq = () => {
  const [open, setOpen] = p5S(0);
  const items = [
    { q: 'Сколько стоит второе мнение?', a: 'Стоимость зависит от сложности случая и количества специалистов в консилиуме. Обычно — от 5 000 до 25 000 ₽. Точную цену называет координатор после изучения вашего случая.' },
    { q: 'Какие документы нужны?', a: 'Все, что у вас есть: снимки (МРТ, КТ, рентген) в формате DICOM или PDF, выписки из других клиник, результаты анализов, протоколы операций. Чем полнее данные — тем точнее заключение.' },
    { q: 'Безопасно ли загружать документы?', a: 'Да. Все документы передаются по защищённому SSL-каналу. Доступ имеют только врачи консилиума и координатор. Документы хранятся на серверах в РФ согласно требованиям 152-ФЗ.' },
    { q: 'Сколько занимает подготовка заключения?', a: 'Обычно 3-7 рабочих дней. Срочные случаи (онкология, требующая немедленного решения) рассматриваются в течение 24-48 часов.' },
    { q: 'Можно ли получить второе мнение онлайн?', a: 'Да. После изучения документов мы можем провести видеоконсультацию с одним или несколькими экспертами консилиума.' },
    { q: 'Что если мне нужна операция или дальнейшее лечение?', a: 'Если рекомендованное лечение можем выполнить мы — приглашаем в стационар. Если случай требует другого центра — направим в подходящую федеральную клинику с сопроводительными документами.' },
  ];
  return (
    <div className="dt-faq">
      {items.map((item, i) => (
        <div key={i} className={`dt-faq-item ${open === i ? 'is-open' : ''}`}>
          <button className="dt-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{item.q}</span>
            <Icon name="chevD" size={20} className="dt-faq-icon" />
          </button>
          {open === i && <div className="dt-faq-a">{item.a}</div>}
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { SecondOpinionPage });