/* Process — How it works */

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

  const steps = [
    { num: '01', time: '2 мин', title: 'Оставьте заявку', desc: 'Заполните короткую форму или напишите в WhatsApp. Координатор Анна ответит в течение 7 минут.' },
    { num: '02', time: '1 день', title: 'Сбор документов', desc: 'Поможем собрать медицинскую карту, снимки и переводы. Принимаем выписки на русском — перевод не требуется.' },
    { num: '03', time: '24 часа', title: 'Мнение специалиста', desc: 'Ведущий израильский врач изучает ваш случай и готовит подробное заключение.' },
    { num: '04', time: '3–5 дней', title: 'План лечения', desc: 'Получаете прозрачный план, сроки и смету. Дальше — по вашему решению.' },
    { num: '05', time: '2–7 дней', title: 'Приезд в клинику', desc: 'Организуем визу, трансфер и размещение. Сопровождение на протяжении всего лечения.' },
  ];

  return (
    <section id="process" className="process section" ref={ref}>
      <style>{`
        .process { background: var(--paper-2); position: relative; }
        .process .steps {
          display: grid; grid-template-columns: repeat(5, 1fr);
          gap: 0;
          margin-top: 40px;
          border-top: 1px solid var(--ink-20);
          border-bottom: 1px solid var(--ink-20);
        }
        @media (max-width: 960px) { .process .steps { grid-template-columns: 1fr; } }
        .pstep {
          padding: 28px 24px 32px;
          border-right: 1px solid var(--ink-10);
          display: flex; flex-direction: column; gap: 10px;
          position: relative;
          transition: background 0.3s;
        }
        .pstep:last-child { border-right: 0; }
        .pstep:hover { background: color-mix(in oklab, var(--snow) 60%, transparent); }
        @media (max-width: 960px) {
          .pstep { border-right: 0; border-bottom: 1px solid var(--ink-10); }
        }
        .ps-num {
          font-family: var(--font-body);
          font-size: 40px;
          font-weight: 700;
          line-height: 1;
          color: var(--clay-dark);
          letter-spacing: -0.02em;
          font-variant-numeric: tabular-nums;
        }
        .ps-time {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-60);
          margin-top: 6px;
        }
        .ps-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin-top: 8px; letter-spacing: -0.01em; }
        .ps-desc { font-size: 13px; line-height: 1.5; color: var(--ink-60); }

        .process-cta {
          margin-top: 36px;
          display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
        }
      `}</style>
      <div className="container">
        <div className="reveal">
          <SectionHeader
            eyebrow="Как это работает"
            title={<>Профессиональный подход <em className="italic-accent">на каждом шаге.</em></>}
            lead="От первого звонка до возвращения домой — вас ведёт один координатор, который отвечает за сроки и качество."
          />
        </div>

        <div className="steps reveal">
          {steps.map((s, i) => (
            <div key={i} className="pstep">
              <div className="ps-num">{s.num}</div>
              <div className="ps-time">{s.time}</div>
              <div className="ps-title">{s.title}</div>
              <div className="ps-desc">{s.desc}</div>
            </div>
          ))}
        </div>

        <div className="process-cta reveal d1">
          <div>
            <div className="eyebrow" style={{color:'var(--clay)', marginBottom:6}}>Готовы начать?</div>
            <div className="display-sm">Координатор Анна свяжется в течение 7 минут.</div>
          </div>
          <button type="button" className="btn btn-clay btn-lg" onClick={onOpenQuiz}>Получить расчёт за 2 мин <I.ArrowUpRight size={14}/></button>
        </div>
      </div>
    </section>
  );
};

window.Process = Process;