/* Hero — editorial, warm premium */

const STAT_SLIDES = [
  {
    key: 'breast',
    label: 'Израиль · 5-летняя выживаемость',
    big: ['95', ',6%'],
    sub: <>рак молочной железы — <em>выше, чем в Европе</em></>,
    diffs: [
      { pp: '+24,6', vs: <>выше, чем в <b>России</b> (71,0%)</> },
      { pp: '+5',    vs: <>выше, чем в <b>Европе</b> (90,6%)</> },
    ],
    src: ['CONCORD-3 · диагнозы 2010–2014', 'LANCET · 2018'],
  },
  {
    key: 'prostate',
    label: 'Израиль · 5-летняя выживаемость',
    big: ['96', '%'],
    sub: <>рак <em>предстательной железы</em> — один из лучших показателей в мире</>,
    diffs: [
      { pp: '+26,4', vs: <>выше, чем в <b>России</b> (69,6%)</> },
      { pp: '+15,4', vs: <>выше, чем в <b>Турции</b> (80,6%)</> },
    ],
    src: ['CONCORD-3 · диагнозы 2010–2014', 'LANCET · 2018'],
  },
  {
    key: 'colon',
    label: 'Израиль · 5-летняя выживаемость',
    big: ['71', ',7%'],
    sub: <>рак <em>толстой кишки</em> — лидерство в скрининге и хирургии</>,
    diffs: [
      { pp: '+26,7', vs: <>выше, чем в <b>России</b> (45,0%)</> },
      { pp: '+16,7', vs: <>выше, чем в <b>Турции</b> (55,0%)</> },
    ],
    src: ['CONCORD-3 · диагнозы 2010–2014', 'LANCET · 2018'],
  },
  {
    key: 'start',
    label: 'Сроки · от запроса до терапии',
    big: ['2–7', ' дн.'],
    sub: <>до начала лечения — против <em>2–6 недель</em> в РФ и СНГ</>,
    diffs: [
      { pp: '−83', vs: <>быстрее старт, чем <b>средний срок в РФ</b> (30 дн.)</> },
      { pp: '24ч', vs: <>второе мнение от <b>профильного врача</b></>, isDuration: true },
    ],
    src: ['Ассоциация онкологов РФ', 'Данные координаторов 2023–24'],
  },
];

const Hero = ({variant = 'editorial', onOpenQuiz = () => {}}) => {
  const ref = React.useRef(null);
  useReveal(ref);

  const [slide, setSlide] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [dragDX, setDragDX] = React.useState(0);
  const dragStart = React.useRef(null);
  const total = STAT_SLIDES.length;

  const go = React.useCallback((n) => setSlide((s) => (s + n + total) % total), [total]);
  const goTo = React.useCallback((i) => setSlide(((i % total) + total) % total), [total]);

  // Autoplay removed per brief (rule: "Никакого автоплея нигде")

  // Pointer drag handlers
  const onPointerDown = (e) => {
    dragStart.current = { x: e.clientX, id: e.pointerId };
    e.currentTarget.setPointerCapture?.(e.pointerId);
    setPaused(true);
  };
  const onPointerMove = (e) => {
    if (!dragStart.current) return;
    setDragDX(e.clientX - dragStart.current.x);
  };
  const onPointerUp = (e) => {
    if (!dragStart.current) return;
    const dx = e.clientX - dragStart.current.x;
    dragStart.current = null;
    setDragDX(0);
    if (Math.abs(dx) > 60) go(dx < 0 ? 1 : -1);
  };

  return (
    <section id="top" ref={ref} className="hero grain">
      <style>{`
        .hero { position: relative; padding: 32px 0 80px; overflow: hidden; }
        .hero-grid {
          display: grid;
          grid-template-columns: 1.15fr 1fr;
          gap: 72px;
          align-items: start;
          position: relative;
          z-index: 1;
        }
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr; gap: 48px; }
        }

        /* Right aside — sits alongside headline, top-aligned */
        .hero-aside {
          display: flex; flex-direction: column; gap: 18px;
        }

        .hero-meta {
          display: flex; align-items: center; gap: 14px;
          margin-bottom: 40px;
          color: var(--ink-60);
          font-size: 12px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
        }
        .hero-meta .dot { width: 4px; height: 4px; background: var(--ink-40); border-radius: 50%; }

        .hero h1 .sig {
          color: var(--clay);
          font-style: italic;
          font-weight: 300;
        }
        .hero h1 .underline {
          text-decoration: underline;
          text-decoration-color: var(--clay);
          text-decoration-thickness: 0.035em;
          text-underline-offset: 0.14em;
          text-decoration-skip-ink: auto;
        }

        .hero-lede { margin-top: 28px; max-width: 520px; }

        .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
        .hero-live {
          display: flex; align-items: center; flex-wrap: wrap;
          gap: 4px 10px;
          margin-top: 16px;
          font-size: 13px;
          color: var(--ink-60);
        }
        .hero-live .pulse-dot {
          width: 8px; height: 8px;
          background: var(--sage);
          border-radius: 50%;
          flex-shrink: 0;
          box-shadow: 0 0 0 0 rgba(107,142,127,.6);
          animation: pulse 2s infinite;
        }
        .hero-live .live-main { white-space: nowrap; }
        .hero-live .live-sep { color: var(--ink-20); margin: 0 2px; }
        .hero-live .live-privacy { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
        .hero-live .live-privacy svg { color: var(--sage); }
        @media (max-width: 520px) {
          .hero-live { gap: 4px 8px; font-size: 12.5px; }
          .hero-live .live-sep { display: none; }
        }
        @media (max-width: 480px) {
          .hero-ctas { gap: 10px; }
          .hero-ctas .btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 15px; }
        }

        .hero-trust {
          margin-top: 56px;
          padding: 0;
          background: transparent;
          border: 0;
          border-radius: 0;
          display: block;
          gap: 0;
          width: 100%;
          position: relative;
          box-shadow: none;
        }
        /* Full-width trust strip below the hero grid */
        .hero-trust {
          margin-top: 64px;
          padding: 28px 32px;
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-xl);
          box-shadow: var(--shadow-sm);
          display: grid;
          grid-template-columns: minmax(180px, 0.8fr) 3fr;
          gap: 40px;
          align-items: center;
        }
        @media (max-width: 960px) {
          .hero-trust { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
        }
        @media (max-width: 768px) {
          .hero-trust { display: none; }
        }
        .hero-trust::before { display: none; }

        .ht-head {
          display: flex; flex-direction: column; gap: 8px;
          padding-right: 32px;
          border-right: 1px solid var(--ink-10);
        }
        @media (max-width: 960px) {
          .ht-head { padding-right: 0; padding-bottom: 20px; border-right: 0; border-bottom: 1px solid var(--ink-10); }
        }
        .ht-head .ht-title {
          font-family: var(--font-display);
          font-size: 26px;
          font-weight: 380;
          letter-spacing: -0.015em;
          color: var(--ink);
          margin: 0;
          line-height: 1.1;
        }
        .ht-head .ht-title em { color: var(--clay); font-style: italic; font-weight: 300; }
        .ht-head .ht-sub {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--ink-60);
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }
        .ht-head .ht-sub::before {
          content: '';
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--sage);
          box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage) 25%, transparent);
        }

        .ht-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
        }
        @media (max-width: 720px) {
          .ht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 8px; }
          .ht-cell { padding: 4px 8px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; min-width: 0; }
          .ht-cell .ht-ic { width: 36px; height: 36px; }
          .ht-cell .ht-v { font-size: 26px; letter-spacing: -0.025em; min-width: 0; }
          .ht-cell .ht-l { font-size: 11px; overflow-wrap: anywhere; }
        }

        .ht-cell {
          display: grid;
          grid-template-columns: 44px 1fr;
          grid-template-rows: auto auto;
          column-gap: 14px;
          row-gap: 4px;
          padding: 4px 20px;
          position: relative;
          align-items: center;
        }
        .ht-cell + .ht-cell { border-left: 1px solid var(--ink-10); }
        @media (max-width: 720px) {
          .ht-cell:nth-child(3) { border-left: 0; }
        }

        .ht-cell .ht-ic {
          width: 44px; height: 44px;
          border-radius: 10px;
          background: var(--clay-soft);
          color: var(--clay-dark);
          display: grid; place-items: center;
          grid-row: 1 / span 2;
          align-self: center;
        }
        .ht-cell .ht-v {
          font-family: var(--font-display);
          font-size: 32px;
          font-weight: 360;
          color: var(--ink);
          line-height: 1;
          letter-spacing: -0.02em;
          font-variation-settings: "SOFT" 20, "opsz" 100;
          grid-column: 2; grid-row: 1;
          align-self: end;
        }
        .ht-cell .ht-v sub {
          font-size: 0.38em;
          font-family: var(--font-body);
          font-weight: 500;
          color: var(--ink-60);
          letter-spacing: 0;
          vertical-align: baseline;
          margin-left: 3px;
        }
        .ht-cell .ht-l {
          font-size: 12px;
          color: var(--ink-60);
          letter-spacing: 0.02em;
          font-weight: 500;
          grid-column: 2; grid-row: 2;
          line-height: 1.35;
          align-self: start;
        }
        .ht-cell .ht-meta { display: none; }

        /* Right column: editorial stat card */
        .stat-frame {
          position: relative;
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-xl);
          padding: 36px 36px 30px;
          overflow: hidden;
        }
        .stat-frame::before {
          content: '';
          position: absolute; inset: 0;
          background:
            radial-gradient(circle at 100% 0%, var(--clay-soft) 0%, transparent 50%),
            radial-gradient(circle at 0% 100%, rgba(107, 142, 127, 0.2) 0%, transparent 55%);
          pointer-events: none; opacity: 0.7;
        }
        .stat-frame > * { position: relative; z-index: 1; }
        @media (max-width: 480px) {
          .stat-frame { padding: 24px 22px 22px; border-radius: 18px; }
          .stat-big { font-size: 72px !important; margin: 8px 0 2px; }
          .stat-diff { grid-template-columns: 1fr; gap: 10px; }
          .aside-row { grid-template-columns: 1fr; }
          .mini-card .mv { font-size: 32px; }
        }

        .stat-label {
          font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--ink-60);
          display: flex; align-items: center; gap: 8px;
        }
        .stat-big {
          font-family: var(--font-display);
          font-size: clamp(84px, 11vw, 148px);
          line-height: 0.9;
          font-weight: 300;
          font-variation-settings: "SOFT" 30, "opsz" 144;
          color: var(--ink);
          margin: 14px 0 4px;
          letter-spacing: -0.04em;
        }
        .stat-big .stat-tail { font-variation-settings: "SOFT" 30, "opsz" 144; }
        .stat-sub {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 300;
          font-size: 22px;
          color: var(--ink-80);
          margin-bottom: 18px;
        }
        .stat-diff-head {
          display: flex; align-items: center; justify-content: space-between;
          margin-top: 18px; margin-bottom: 8px;
          padding-top: 14px;
          border-top: 1px dashed var(--ink-20);
        }
        .stat-diff-head .sdh-l {
          font-family: var(--font-body);
          font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
          color: var(--clay-dark);
        }
        .stat-diff {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          margin-top: 0;
        }
        .stat-diff .diff-cell {
          display: grid;
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto;
          column-gap: 10px;
          row-gap: 2px;
          align-items: baseline;
          padding: 12px 14px;
          background: var(--ink);
          color: var(--paper);
          border-radius: var(--r-md);
          position: relative;
          overflow: hidden;
        }
        .stat-diff .diff-cell .arrow-up {
          width: 0; height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 7px solid var(--sage);
          flex-shrink: 0;
          grid-row: 1;
          align-self: center;
          transform: translateY(-2px);
        }
        .stat-diff .diff-cell .pp {
          font-family: var(--font-display);
          font-size: 28px;
          font-weight: 360;
          line-height: 1;
          color: var(--sage);
          letter-spacing: -0.01em;
          grid-row: 1; grid-column: 2;
        }
        .stat-diff .diff-cell .pp .unit {
          font-size: 0.42em;
          font-family: var(--font-body);
          font-weight: 500;
          margin-left: 3px;
          color: rgba(163, 213, 83, 0.7);
        }
        .stat-diff .diff-cell .vs {
          font-family: var(--font-body);
          font-size: 11px;
          letter-spacing: 0.02em;
          color: rgba(244,244,251,0.62);
          grid-row: 2; grid-column: 1 / -1;
          line-height: 1.3;
        }
        .stat-diff .diff-cell .vs b {
          color: var(--paper);
          font-weight: 500;
        }
        .stat-source {
          margin-top: 22px;
          padding-top: 18px;
          border-top: 1px dashed var(--ink-20);
          font-size: 11px;
          color: var(--ink-60);
          font-family: var(--font-mono);
          letter-spacing: 0.03em;
          display: flex; justify-content: space-between; align-items: center; gap: 12px;
        }

        /* ==== Stat deck (stack slider) ==== */
        .stat-deck {
          position: relative;
          /* reserve vertical space for the peeking stack + nav */
          padding-bottom: 48px;
        }
        .stat-deck .stat-card {
          position: absolute;
          inset: 0 0 48px 0; /* leave room at bottom for nav */
          transform-origin: 50% 100%;
          will-change: transform, opacity;
          transition: transform .55s cubic-bezier(.22,.8,.36,1), opacity .4s ease;
          touch-action: pan-y;
          user-select: none;
          box-shadow: 0 1px 0 rgba(0,0,0,0.02);
        }
        .stat-deck .stat-card.is-front {
          position: relative; /* front card defines height */
          inset: auto;
          cursor: grab;
          box-shadow: 0 24px 60px -28px rgba(17, 24, 39, 0.22), 0 2px 8px -2px rgba(17,24,39,0.06);
        }
        .stat-deck .stat-card.is-front:active { cursor: grabbing; }
        .stat-deck .stat-card:not(.is-front):hover {
          transform: translate3d(6px, 4px, 0) scale(0.985) !important;
          opacity: 0.9 !important;
          transition: transform .25s ease, opacity .25s ease;
        }

        .stat-deck-nav {
          position: absolute;
          left: 0; right: 0; bottom: 0;
          display: flex; align-items: center; gap: 14px;
          padding: 0 2px;
          z-index: 20;
        }
        .sdn-btn {
          width: 34px; height: 34px;
          display: inline-flex; align-items: center; justify-content: center;
          background: var(--snow);
          color: var(--ink);
          border: 1px solid var(--ink-10);
          border-radius: 50%;
          cursor: pointer;
          transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
        }
        .sdn-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); }
        .sdn-dots {
          display: flex; gap: 6px; flex: 1;
          align-items: center;
        }
        .sdn-dot {
          position: relative;
          flex: 1;
          height: 3px;
          background: var(--ink-10);
          border: none;
          padding: 0;
          border-radius: 2px;
          cursor: pointer;
          overflow: hidden;
        }
        .sdn-dot .sdn-dot-fill {
          position: absolute; left: 0; top: 0; bottom: 0;
          width: 100%;
          background: var(--clay);
          border-radius: 2px;
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.25s ease;
        }
        .sdn-dot.is-active .sdn-dot-fill {
          transform: scaleX(1);
        }
        .sdn-dot:hover .sdn-dot-fill {
          transform: scaleX(0.4);
          background: var(--ink-40);
        }
        .sdn-dot.is-active:hover .sdn-dot-fill {
          transform: scaleX(1);
          background: var(--clay);
        }
        .sdn-count {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.14em;
          color: var(--ink-60);
          text-transform: uppercase;
          white-space: nowrap;
        }
        .sdn-count b { color: var(--ink); font-weight: 600; }

        /* Supporting cards */
        .aside-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .mini-card {
          background: var(--paper-2);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-md);
          padding: 18px;
          display: flex; flex-direction: column; gap: 6px;
        }
        .mini-card .mv { font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1; color: var(--ink); }
        .mini-card .ml { font-size: 12px; color: var(--ink-60); letter-spacing: 0.04em; }
        .mini-card .mk { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--clay-dark); text-transform: uppercase; margin-bottom: 4px; }

        /* Service hub — hero right column */
        .service-hub { padding: 32px; }
        .svc-title {
          font-family: var(--font-display);
          font-size: clamp(26px, 2.6vw, 34px);
          font-weight: 380;
          letter-spacing: -0.015em;
          line-height: 1.15;
          margin: 14px 0 24px;
          text-wrap: balance;
          color: var(--ink);
        }
        .svc-title em { color: var(--clay); font-style: italic; font-weight: 300; }

        .svc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
        .svc-item {
          display: grid;
          grid-template-columns: 40px 1fr auto;
          gap: 14px;
          align-items: center;
          padding: 14px 16px;
          background: var(--paper-2);
          border: 1px solid transparent;
          border-radius: var(--r-md);
          cursor: pointer;
          transition: background 0.2s, border-color 0.2s, transform 0.2s;
        }
        .svc-item:hover { background: var(--paper-3); border-color: var(--ink-10); transform: translateX(-3px); }
        .svc-item.featured {
          background: var(--ink);
          color: var(--paper);
        }
        .svc-item.featured:hover { background: var(--ink-80); }
        .svc-item.featured .svc-meta { color: rgba(244,244,251,0.65); }
        .svc-item.featured .svc-ic { background: var(--sage); color: var(--ink); }

        .svc-ic {
          width: 40px; height: 40px;
          border-radius: 10px;
          background: var(--snow);
          color: var(--clay);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .svc-name { font-weight: 500; font-size: 15px; letter-spacing: -0.005em; margin-bottom: 3px; }
        .svc-meta { font-size: 12px; color: var(--ink-60); letter-spacing: 0.01em; }

        /* decorative mark */
        .hero-mark {
          position: absolute; right: -80px; top: -40px;
          font-family: var(--font-display);
          font-size: 420px;
          color: var(--ink-05);
          line-height: 1;
          font-weight: 300;
          font-style: italic;
          pointer-events: none;
          user-select: none;
        }

        .hero-dateline {
          display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
          font-family: var(--font-body);
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-60);
          padding: 14px 0;
          border-top: 1px solid var(--ink-20);
          border-bottom: 1px solid var(--ink-20);
          margin-bottom: 40px;
        }
        .hero-dateline .sep { width: 3px; height: 3px; background: var(--clay); border-radius: 50%; }
        @media (max-width: 720px) {
          .hero-dateline { gap: 10px 14px; font-size: 10px; padding: 12px 0; margin-bottom: 28px; }
          .hero-dateline .edition-no { margin-left: 0 !important; width: 100%; order: 99; color: var(--ink-80); }
        }
      `}</style>

      <div className="container">
        <div className="hero-dateline reveal">
          <span>Тель-Авив</span>
          <span className="sep"/>
          <span>JCI</span>
          <span className="sep"/>
          <span>Минздрав Израиля</span>
          <span className="sep"/>
          <span>Координатор на русском</span>
          <span className="edition-no" style={{marginLeft:'auto'}}>Онкология · Кардиология · Ортопедия</span>
        </div>

        <div className="hero-grid">
          <div>
            <h1 className="display-xl reveal">
              Ваш путь <br/>
              к здоровью — <br/>
              <span className="underline">ведущая</span>{' '}
              <span className="sig">медицинская</span><br/>
              экспертиза Израиля.
            </h1>

            <p className="body-lg hero-lede reveal d1">
              Второе мнение от ведущих израильских специалистов — <strong style={{color:'var(--ink)'}}>за 1 рабочий день.</strong>{' '}
              Координация, документы и общение на русском языке, без переводчиков.
            </p>

            <div className="hero-ctas reveal d2">
              <a href="#contact" className="btn btn-clay btn-lg">
                Получить консультацию <I.ArrowUpRight size={16}/>
              </a>
              <button onClick={onOpenQuiz} className="btn btn-ghost btn-lg">
                Узнайте стоимость за 2 мин
              </button>
            </div>
            <div className="hero-live reveal d3">
              <span className="pulse-dot"/>
              <span className="live-main">Координатор онлайн · ответим за 7 минут</span>
              <span className="live-sep">·</span>
              <span className="live-privacy"><I.Shield size={12}/> данные защищены</span>
            </div>
          </div>

          <aside className="hero-aside reveal d2">
            <div
              className="stat-deck"
              onMouseEnter={() => setPaused(true)}
              onMouseLeave={() => setPaused(false)}
            >
              {STAT_SLIDES.map((s, i) => {
                // offset: 0 = front, 1 = peek behind, 2 = peek deeper, negative = gone
                const rel = (i - slide + total) % total;
                const depth = rel > total / 2 ? rel - total : rel; // signed
                const isFront = rel === 0;
                const isBehind = rel === 1 || rel === 2;
                const isHidden = !isFront && !isBehind;
                const translateX = isFront ? dragDX : 0;
                const rotate = isFront ? dragDX * 0.02 : 0;
                const style = isFront
                  ? { transform: `translate3d(${translateX}px,0,0) rotate(${rotate}deg)`, opacity: 1, zIndex: 10, transition: dragStart.current ? 'none' : 'transform .5s cubic-bezier(.22,.8,.36,1)' }
                  : isBehind
                    ? { transform: `translate3d(${rel * 14}px, ${rel * 10}px, 0) scale(${1 - rel * 0.035})`, opacity: 1 - rel * 0.35, zIndex: 10 - rel, pointerEvents: 'auto', cursor: 'pointer' }
                    : { transform: `translate3d(${rel * 14}px, ${rel * 10}px, 0) scale(.88)`, opacity: 0, zIndex: 0, pointerEvents: 'none' };
                return (
                  <div
                    key={s.key}
                    className={`stat-frame stat-card ${isFront ? 'is-front' : ''}`}
                    style={style}
                    aria-hidden={!isFront}
                    onClick={isBehind ? () => goTo(i) : undefined}
                    onPointerDown={isFront ? onPointerDown : undefined}
                    onPointerMove={isFront ? onPointerMove : undefined}
                    onPointerUp={isFront ? onPointerUp : undefined}
                    onPointerCancel={isFront ? onPointerUp : undefined}
                  >
                    <div className="stat-label">
                      <span style={{width:6,height:6,background:'var(--sage)',borderRadius:'50%'}}/>
                      {s.label}
                    </div>
                    <div className="stat-big">
                      {s.big[0]}<span className="stat-tail">{s.big[1]}</span>
                    </div>
                    <div className="stat-sub">{s.sub}</div>
                    <div className="stat-diff-head">
                      <span className="sdh-l">Разрыв выживаемости</span>
                    </div>
                    <div className="stat-diff">
                      {s.diffs.map((d, j) => (
                        <div className="diff-cell" key={j}>
                          {!d.isDuration && <span className="arrow-up"/>}
                          <span className="pp">{d.pp}{!d.isDuration && <span className="unit">%</span>}</span>
                          <span className="vs">{d.vs}</span>
                        </div>
                      ))}
                    </div>
                    <div className="stat-source">
                      <span>{s.src[0]}</span>
                      <span>{s.src[1]}</span>
                    </div>
                  </div>
                );
              })}

              {/* Controls row */}
              <div className="stat-deck-nav" aria-label="Навигация по карточкам">
                <button className="sdn-btn" onClick={() => go(-1)} aria-label="Предыдущая">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
                </button>
                <div className="sdn-dots">
                  {STAT_SLIDES.map((_, i) => (
                    <button key={i} className={`sdn-dot ${i === slide ? 'is-active' : ''}`} onClick={() => goTo(i)} aria-label={`Карточка ${i+1}`}>
                      <span className="sdn-dot-fill" style={{animationPlayState: paused ? 'paused' : 'running'}}/>
                    </button>
                  ))}
                </div>
                <span className="sdn-count"><b>{String(slide + 1).padStart(2,'0')}</b> / {String(total).padStart(2,'0')}</span>
                <button className="sdn-btn" onClick={() => go(1)} aria-label="Следующая">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>
                </button>
              </div>
            </div>

            <div className="aside-row">
              <div className="mini-card">
                <div className="mk">Онкология</div>
                <div className="mv">2–7</div>
                <div className="ml">дней до начала лечения</div>
              </div>
              <div className="mini-card">
                <div className="mk">vs Турция</div>
                <div className="mv">+8<span className="stat-tail">%</span></div>
                <div className="ml">5-летняя выживаемость, рак молочной железы</div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;
