/* Pricing — 3 columns with multiple rows */

const Pricing = () => {
  const ref = React.useRef(null);
  useReveal(ref);
  const [showAll, setShowAll] = React.useState(false);

  /* Цены с официального прайс-листа Assuta (assuta-il.com/en/departments/oncology).
     Все цены — "от $X", стартовые. Окончательная стоимость определяется после
     анализа документов конкретного пациента. */
  const cols = [
    {
      key: 'Диагностика',
      sub: 'Онлайн-консультация бесплатно · пакеты от $2 500',
      rows: [
        { cat: 'Рак груди', price: 'от $3 384', note: 'Вкл. ПЭТ-КТ, онкомаркеры, анализы' },
        { cat: 'Рак лёгких', price: 'от $3 700', note: 'Вкл. ПЭТ-КТ, биопсия пересмотр' },
        { cat: 'Рак простаты', price: 'от $2 765', note: 'PSA, УЗИ, биопсия' },
        { cat: 'Опухоль мозга', price: 'от $2 510', note: 'Вкл. консультацию нейрохирурга' },
      ],
    },
    {
      key: 'Лечение',
      sub: 'Хирургия и терапия по мировым стандартам',
      rows: [
        { cat: 'Удаление опухоли груди', price: 'от $4 774', note: 'Органосохраняющая · 2 дня' },
        { cat: 'Простатэктомия', price: 'от $8 243', note: '4 дня в стационаре' },
        { cat: 'Брахитерапия', price: 'от $7 213', note: 'Стационар 1 день' },
        { cat: 'Гамма-нож (мозг)', price: 'от $13 984', note: '2 дня · радиохирургия' },
      ],
    },
    {
      key: 'Терапия',
      sub: 'Курсовое лечение и иммунотерапия',
      rows: [
        { cat: 'Химиотерапия (курс)', price: 'от $1 174', note: 'Цена за один курс' },
        { cat: 'Лучевая терапия (1 поле)', price: 'от $191', note: 'Курс обычно 5 недель' },
        { cat: 'RapidArc радиотерапия', price: 'от $9 987', note: 'Точечная доставка дозы' },
        { cat: 'Keytruda (иммунотерапия)', price: 'от $9 965', note: 'Одна инфузия' },
      ],
    },
  ];

  return (
    <section id="pricing" className="pricing section" ref={ref}>
      <style>{`
        .pricing { background: var(--paper-2); }
        .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        @media (max-width: 960px) { .price-grid { grid-template-columns: 1fr; } }

        .price-card {
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-lg);
          padding: 36px 32px;
          display: flex; flex-direction: column; gap: 24px;
        }

        .pc-head { display: flex; flex-direction: column; gap: 6px; }
        .pc-title { font-family: var(--font-body); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
        .pc-sub { font-size: 14px; line-height: 1.5; color: var(--ink-60); }
        @media (max-width: 640px) { .pc-sub { font-size: 15px; } }

        .pc-rows { display: flex; flex-direction: column; gap: 0; flex: 1; }
        .pc-row { padding: 18px 0; border-top: 1px dashed var(--ink-20); display: flex; flex-direction: column; gap: 4px; }
        .pc-row:first-child { border-top: 0; padding-top: 0; }
        .pc-row .cat { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); }
        .pc-price { font-family: var(--font-body); font-size: 28px; font-weight: 700; color: var(--clay-dark); letter-spacing: -0.01em; line-height: 1.05; font-variant-numeric: tabular-nums; }
        .pc-note { font-size: 13px; line-height: 1.5; color: var(--ink-60); }
        @media (max-width: 640px) { .pc-note { font-size: 14px; } }

        .pc-foot .btn { width: 100%; justify-content: center; }

        .pricing-note {
          margin-top: 36px;
          padding: 22px 28px;
          background: var(--clay-soft);
          border: 1px solid color-mix(in oklab, var(--clay) 18%, transparent);
          border-left: 3px solid var(--clay-dark);
          border-radius: var(--r-md);
          display: flex; gap: 14px; align-items: center;
          font-size: 14px; color: var(--ink-80);
          line-height: 1.5;
        }
        .pricing-note svg { flex-shrink: 0; color: var(--clay-dark); width: 22px; height: 22px; }
        .pricing-note strong { color: var(--ink); font-weight: 600; }

        /* Comparison table */
        .cmp-wrap { margin-top: 88px; }
        .cmp-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
        .cmp-head h3 {
          font-family: var(--font-display);
          font-size: clamp(26px, 3vw, 32px);
          font-weight: 400;
          letter-spacing: -0.02em;
          line-height: 1.15;
          max-width: 540px;
          text-wrap: balance;
        }
        .cmp-head p { color: var(--ink-60); font-size: 14px; max-width: 380px; }

        .cmp-table {
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-lg);
          overflow: hidden;
        }
        .cmp-row {
          display: grid;
          grid-template-columns: 1.6fr 1.2fr 1fr 1fr;
          align-items: stretch;
        }
        .cmp-row + .cmp-row { border-top: 1px solid var(--ink-10); }
        .cmp-cell {
          padding: 22px 24px;
          display: flex; flex-direction: column; gap: 4px;
          font-size: 15px;
          min-height: 84px;
          justify-content: center;
        }
        .cmp-cell + .cmp-cell { border-left: 1px solid var(--ink-10); }

        .cmp-row.head .cmp-cell {
          background: var(--paper-2);
          padding: 20px 24px;
          min-height: 0;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-60);
          font-weight: 500;
        }
        .cmp-row.head .cmp-cell.hl {
          background: var(--ink);
          color: var(--clay-soft);
          position: relative;
        }
        .cmp-row.head .cmp-cell.hl::after {
          content: 'Наш выбор';
          position: absolute; top: 6px; right: 10px;
          font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
          background: var(--clay); color: var(--paper);
          padding: 3px 7px; border-radius: 3px; text-transform: uppercase;
        }
        @media (max-width: 640px) {
          .cmp-row.head .cmp-cell.hl::after { display: none; }
        }

        .cmp-cell.hl { background: color-mix(in oklch, var(--clay) 6%, var(--snow)); position: relative; }
        .cmp-cell.hl::before {
          content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--clay);
        }

        .cmp-cat { font-weight: 500; color: var(--ink); font-size: 15px; }
        .cmp-cat .sub { font-size: 12px; color: var(--ink-60); font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: 2px; }
        .cmp-price { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
        .cmp-price.strike { color: var(--ink-60); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-40); text-decoration-skip-ink: auto; font-weight: 350; }
        @media (max-width: 640px) {
          .cmp-price { font-size: 17px; }
        }
        .cmp-price.win { color: var(--clay-dark); }
        .cmp-meta { font-size: 11px; font-family: var(--font-mono); color: var(--ink-60); letter-spacing: 0.06em; }

        .cmp-source {
          margin-top: 18px;
          font-size: 12px;
          color: var(--ink-60);
          line-height: 1.5;
          text-align: right;
        }
        .cmp-source a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
        .cmp-source a:hover { color: var(--ink); }
        @media (max-width: 640px) {
          .cmp-source { text-align: left; font-size: 11px; }
        }

        /* New stacked compare-cards (mobile-first) */
        .compare-list {
          display: grid; gap: 14px;
          grid-template-columns: 1fr 1fr;
        }
        @media (max-width: 760px) { .compare-list { grid-template-columns: 1fr; } }

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

        .cc-head .cc-cat { font-family: var(--font-display); font-size: 18px; font-weight: 460; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
        .cc-head .cc-sub { font-size: 12.5px; color: var(--ink-60); margin-top: 3px; }

        .cc-rows { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px dashed var(--ink-20); border-bottom: 1px dashed var(--ink-20); }
        .cc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; padding: 6px 0; }
        .cc-row .lbl { color: var(--ink-60); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
        .cc-row .val { font-family: var(--font-display); font-size: 18px; font-weight: 450; color: var(--ink); font-variant-numeric: tabular-nums; }
        .cc-row .val.muted { color: var(--ink-60); font-weight: 350; }
        .cc-row.cc-il { background: color-mix(in oklab, var(--clay) 8%, var(--snow)); border-radius: 8px; padding: 10px 12px; margin: 0 -8px; }
        .cc-row.cc-il .lbl { color: var(--clay-dark); }
        .cc-row.cc-il .val { color: var(--clay-dark); font-weight: 550; font-size: 20px; }

        .cc-save { font-size: 12px; color: var(--ink-60); text-align: right; }
        .cc-save strong { color: var(--clay-dark); font-size: 14px; font-weight: 600; }

        .compare-toggle {
          margin-top: 20px; display: none;
          width: 100%; padding: 14px; border-radius: var(--r-pill);
          background: var(--paper-2); color: var(--ink);
          font-weight: 500; font-size: 14px;
          border: 1px solid var(--ink-10);
          display: none;
          align-items: center; justify-content: center; gap: 8px;
        }
        .compare-toggle:hover { background: var(--ink); color: var(--paper); }
        @media (max-width: 760px) { .compare-toggle { display: inline-flex; } }
        @media (max-width: 760px) {
          .compare-list.is-collapsed .compare-card:nth-child(n+4) { display: none; }
        }

        .cmp-summary {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
          margin-top: 20px;
        }
        .cmp-sum-card {
          padding: 20px 22px;
          background: var(--paper);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-md);
          display: flex; gap: 14px; align-items: flex-start;
        }
        .cmp-sum-card .ic {
          width: 36px; height: 36px; border-radius: 10px;
          background: color-mix(in oklch, var(--clay) 10%, var(--snow));
          color: var(--clay);
          display: grid; place-items: center; flex-shrink: 0;
        }
        .cmp-sum-card .t { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
        .cmp-sum-card .d { font-size: 12px; color: var(--ink-60); line-height: 1.5; }

        @media (max-width: 860px) {
          .cmp-summary { grid-template-columns: 1fr; }
          /* На мобильных таблица становится горизонтально-скроллируемой —
             колонки США/Германия остаются видимыми по свайпу, а не скрываются */
          .cmp-table {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scroll-snap-type: x mandatory;
          }
          .cmp-row {
            grid-template-columns: 200px 140px 120px 120px;
            min-width: 580px;
          }
          .cmp-row.head { position: sticky; top: 0; z-index: 2; background: var(--paper-2); }
          .cmp-cell { scroll-snap-align: start; padding: 18px 16px; min-height: 72px; }
          .cmp-row.head .cmp-cell { padding: 14px 16px; font-size: 10px; }
          .cmp-price { font-size: 16px; }
          .cmp-cat { font-size: 13px; }
          .cmp-cat .sub { font-size: 11px; }
          .cmp-meta { font-size: 10px; }
        }
        @media (max-width: 640px) {
          .cmp-row { grid-template-columns: 170px 120px 100px 100px; min-width: 490px; }
        }
      `}</style>

      <div className="container">
        <div className="reveal">
          <SectionHeader
            eyebrow="Стоимость услуг"
            title={<>Прозрачные цены, <em className="italic-accent">без скрытых счетов</em>.</>}
            lead="Точная стоимость зависит от сложности случая. После изучения ваших документов мы предоставим детальный расчёт."
          />
        </div>

        <div className="price-grid">
          {cols.map((col, i) => (
            <div key={i} className={`price-card reveal d${i}`}>
              <div className="pc-head">
                <div className="pc-title">{col.key}</div>
                <div className="pc-sub">{col.sub}</div>
              </div>
              <div className="pc-rows">
                {col.rows.map((r, j) => (
                  <div key={j} className="pc-row">
                    <span className="cat">{r.cat}</span>
                    <span className="pc-price">{r.price}</span>
                    <span className="pc-note">{r.note}</span>
                  </div>
                ))}
              </div>
              <div className="pc-foot">
                <a href="#contact" className="btn btn-ghost">
                  Оставить заявку <I.ArrowUpRight size={14}/>
                </a>
              </div>
            </div>
          ))}
        </div>

        <div className="pricing-note">
          <I.Shield size={18}/>
          <span><strong>Оплата напрямую в кассу клиники Ассута</strong> — без посредников и наценок. Детальная смета до начала лечения — всегда бесплатно.</span>
        </div>

        {/* Comparison table: Assuta vs USA vs Germany */}
        <div className="cmp-wrap reveal d1">
          <div className="cmp-head">
            <h3>Израиль — это <em className="italic-accent">до 3× дешевле</em> при том же качестве.</h3>
            <p>Ориентировочные вилки цен на ключевые процедуры. Окончательная стоимость определяется после изучения документов и консультации с врачом.</p>
          </div>

          <div className={`compare-list ${showAll ? 'is-expanded' : 'is-collapsed'}`}>
            {[
              /* Цены Assuta — реальные с assuta-il.com. США/Германия — референс-оценки ассоциаций медтуризма 2024. */
              { cat: 'Диагностика рака груди', sub: 'ПЭТ-КТ, онкомаркеры, биопсия', il: 3384, us: 14500, de: 8200 },
              { cat: 'Простатэктомия',        sub: '4 дня в стационаре',            il: 8243, us: 45000, de: 22000 },
              { cat: 'Брахитерапия простаты', sub: 'Стационар 1 день',              il: 7213, us: 38000, de: 18000 },
              { cat: 'Гамма-нож (опухоль мозга)', sub: 'Радиохирургия, 2 дня',      il: 13984, us: 55000, de: 28000 },
              { cat: 'Keytruda (иммунотерапия)',  sub: 'Одна инфузия',              il: 9965, us: 22000, de: 15000 },
              { cat: 'Химиотерапия (курс)',       sub: 'Единичный курс',            il: 1174, us: 4500, de: 2800 },
            ].map((r, i) => {
              const fmt = (n) => '$' + n.toLocaleString('ru-RU').replace(/,/g, ' ');
              const saveVsDe = r.de - r.il;
              return (
                <div className="compare-card" key={i}>
                  <div className="cc-head">
                    <div className="cc-cat">{r.cat}</div>
                    <div className="cc-sub">{r.sub}</div>
                  </div>
                  <div className="cc-rows">
                    <div className="cc-row cc-il">
                      <span className="lbl">Ассута · Израиль</span>
                      <span className="val">от {fmt(r.il)}</span>
                    </div>
                    <div className="cc-row">
                      <span className="lbl">США</span>
                      <span className="val muted">≈ {fmt(r.us)}</span>
                    </div>
                    <div className="cc-row">
                      <span className="lbl">Германия</span>
                      <span className="val muted">≈ {fmt(r.de)}</span>
                    </div>
                  </div>
                  <div className="cc-save">≈ <strong>{fmt(saveVsDe)}</strong> дешевле Германии</div>
                </div>
              );
            })}
          </div>

          <button type="button" className="compare-toggle" onClick={() => setShowAll(s => !s)}>
            {showAll ? 'Свернуть ↑' : 'Показать ещё 3 процедуры ↓'}
          </button>

          <p className="cmp-source">
            Цены Ассуты — стартовые ориентиры. <a href="https://api.whatsapp.com/send?phone=972526512654&text=%D0%AF%20%D1%85%D0%BE%D1%87%D1%83%20%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B8%D1%82%D1%8C%20%D0%BE%D1%84%D0%B8%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%86%D0%B5%D0%BD%D1%8B" target="_blank" rel="noopener noreferrer">Запросить официальный прайс в WhatsApp</a>.
            Ориентиры по США и Германии — медианные оценки <a href="https://www.medicaltourismassociation.com" target="_blank" rel="noopener noreferrer">Medical Tourism Association, 2024</a>.
          </p>

          <div className="cmp-summary">
            <div className="cmp-sum-card">
              <div className="ic"><I.Shield size={18}/></div>
              <div>
                <div className="t">Цена фиксируется в договоре</div>
                <div className="d">Итоговая сумма известна до приезда — никаких доплат «по ходу лечения».</div>
              </div>
            </div>
            <div className="cmp-sum-card">
              <div className="ic"><I.Check size={18}/></div>
              <div>
                <div className="t">Включая трансфер и координатора</div>
                <div className="d">Встреча в аэропорту, перевод документов, сопровождение на русском — в стоимости.</div>
              </div>
            </div>
            <div className="cmp-sum-card">
              <div className="ic"><I.Clock size={18}/></div>
              <div>
                <div className="t">Начало лечения — 5–10 дней</div>
                <div className="d">В США и Европе — от 4 до 12 недель листа ожидания на тот же объём.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Pricing = Pricing;
