/* Data section — CONCORD-3 5yr survival comparison */

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

  const rows = [
    { cancer: 'Молочная железа',     israel: 95.6, eu: 85,   russia: 70.6, turkey: 82, label: 'Breast' },
    { cancer: 'Предстательная железа', israel: 96, eu: 88,   russia: 69.6, turkey: 80.6, label: 'Prostate' },
    { cancer: 'Толстая кишка',       israel: 71.7, eu: 66,   russia: 45,   turkey: 55, label: 'Colon' },
    { cancer: 'Лёгкое',              israel: 27,   eu: 20,   russia: 15,   turkey: 15, label: 'Lung' },
  ];

  const [active, setActive] = React.useState(0);
  const row = rows[active];
  const maxVal = 100;

  return (
    <section className="data" ref={ref}>
      <style>{`
        .data {
          background: var(--ink);
          color: var(--paper);
          padding: calc(var(--s-9) * var(--density)) 0;
          position: relative;
          overflow: hidden;
        }
        .data::before {
          content: '';
          position: absolute; inset: 0;
          background:
            radial-gradient(circle at 15% 20%, rgba(179, 83, 43, 0.16) 0%, transparent 45%),
            radial-gradient(circle at 90% 85%, rgba(107, 142, 127, 0.14) 0%, transparent 50%);
          pointer-events: none;
        }
        .data .container { position: relative; z-index: 1; }
        .data-header {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 64px;
          align-items: end;
          margin-bottom: 72px;
        }
        @media (max-width: 880px) { .data-header { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

        .data h2 { color: var(--paper); }
        .data .eyebrow-line { display:flex; align-items:center; gap:12px; color: var(--clay-soft); }
        .data .eyebrow-line::before {
          content:''; width: 28px; height: 1px; background: var(--clay-soft);
        }
        .data .eyebrow-line .eyebrow { color: var(--clay-soft); }
        .data-lede { color: rgba(245, 239, 230, 0.7); font-size: 18px; line-height: 1.55; max-width: 440px; }
        .data-lede strong { color: var(--paper); }

        .data-body {
          display: grid;
          grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
          gap: 60px;
          align-items: start;
        }
        @media (max-width: 880px) { .data-body { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

        .cancer-list {
          display: flex; flex-direction: column; gap: 2px;
          border-top: 1px solid rgba(245, 239, 230, 0.12);
        }
        .cancer-row {
          display: grid; grid-template-columns: 24px 1fr auto;
          gap: 14px; align-items: center;
          padding: 18px 0;
          border-bottom: 1px solid rgba(245, 239, 230, 0.12);
          text-align: left; width: 100%;
          color: rgba(245, 239, 230, 0.6);
          transition: color 0.2s, padding 0.3s;
          font-family: var(--font-display);
          font-size: 24px;
          font-weight: 350;
          letter-spacing: -0.01em;
        }
        .cancer-row:hover { color: var(--paper); padding-left: 6px; }
        .cancer-row.active { color: var(--paper); }
        .cancer-row.active .idx { background: var(--clay); color: var(--paper); }
        .cancer-row .idx {
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.05em;
          width: 22px; height: 22px; border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(245, 239, 230, 0.08);
          color: rgba(245, 239, 230, 0.6);
          transition: all 0.2s;
        }
        .cancer-row .val {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--clay);
        }

        .chart {
          background: rgba(245, 239, 230, 0.04);
          border: 1px solid rgba(245, 239, 230, 0.12);
          border-radius: var(--r-xl);
          padding: 40px;
          position: relative;
        }
        .chart-hero {
          display: flex; align-items: baseline; justify-content: space-between;
          flex-wrap: wrap; gap: 20px;
          padding-bottom: 32px;
          border-bottom: 1px solid rgba(245, 239, 230, 0.12);
          margin-bottom: 32px;
        }
        .chart-hero .ck {
          font-family: var(--font-display);
          font-size: 22px;
          font-style: italic;
          color: var(--clay-soft);
          font-weight: 300;
        }
        .chart-hero .cv {
          font-family: var(--font-display);
          font-weight: 300;
          font-size: clamp(64px, 9vw, 112px);
          font-variation-settings: "SOFT" 30, "opsz" 144;
          line-height: 0.9;
          letter-spacing: -0.03em;
          color: var(--paper);
        }
        .chart-hero .cv .stat-tail {
          color: var(--clay);
          font-size: 0.5em;
          vertical-align: baseline;
          font-weight: 500;
          letter-spacing: -0.01em;
          margin-left: 0.03em;
        }
        .chart-hero .caption-cell {
          text-align: right;
          display: flex; flex-direction: column; gap: 6px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: rgba(245, 239, 230, 0.55);
        }

        .bars { display: flex; flex-direction: column; gap: 22px; }
        .bar-row {
          display: grid;
          grid-template-columns: 140px 1fr 64px;
          align-items: center;
          gap: 18px;
        }
        .bar-row .bn {
          font-size: 13px; color: rgba(245,239,230,0.7);
          letter-spacing: 0.02em;
        }
        .bar-row.hero-row .bn { color: var(--paper); font-weight: 500; }
        .bar-track {
          height: 10px;
          background: rgba(245, 239, 230, 0.08);
          border-radius: 999px;
          overflow: hidden;
          position: relative;
        }
        .bar-fill {
          height: 100%;
          border-radius: 999px;
          background: rgba(245, 239, 230, 0.4);
          transition: width 0.7s cubic-bezier(.2,.7,.2,1);
        }
        .bar-fill { background: rgba(116, 192, 67, 0.55); }
        .bar-row.hero-row .bar-fill { background: linear-gradient(90deg, var(--clay) 0%, var(--clay-soft) 100%); }
        @media (max-width: 640px) {
          .bar-row { grid-template-columns: 1fr; gap: 6px; }
          .bar-row .bn { font-size: 14px; }
          .bar-row .bv { text-align: left; font-size: 14px; }
          .bar-track { height: 8px; }
        }
        .bar-row .bv {
          font-family: var(--font-mono);
          font-size: 13px;
          text-align: right;
          color: rgba(245,239,230,0.7);
        }
        .bar-row.hero-row .bv { color: var(--paper); font-weight: 600; }

        .chart-footnote {
          margin-top: 32px;
          padding-top: 24px;
          border-top: 1px dashed rgba(245, 239, 230, 0.15);
          display: flex; justify-content: space-between; align-items: center;
          flex-wrap: wrap; gap: 16px;
        }
        .chart-footnote .src {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.05em;
          color: rgba(245, 239, 230, 0.5);
        }
      `}</style>

      <div className="container">
        <div className="data-header">
          <div>
            <div className="eyebrow-line reveal" style={{marginBottom:18}}>
              <span className="eyebrow">Доказанные результаты</span>
            </div>
            <h2 className="display-lg reveal d1">
              Лечение онкологии в Израиле — <em className="italic-accent" style={{color:'var(--clay-soft)'}}>больше шансов,</em><br/>
              меньше времени.
            </h2>
          </div>
          <p className="data-lede reveal d2">
            Израиль <strong>стабильно в топе</strong> по 5-летней выживаемости. Международная база CONCORD-3 фиксирует лидерство по всем основным онкологическим диагнозам — превосходя Европу, Турцию и Россию.
          </p>
        </div>

        <div className="data-body">
          <div className="cancer-list reveal">
            {rows.map((r, i) => (
              <button key={i} className={`cancer-row ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
                <span className="idx">0{i+1}</span>
                <span>{r.cancer}</span>
                <span className="val">{r.israel}%</span>
              </button>
            ))}
          </div>

          <div className="chart reveal d1">
            <div className="chart-hero">
              <div>
                <div className="ck">Израиль · {row.cancer.toLowerCase()}</div>
                {(() => {
                  const intPart = Math.floor(row.israel);
                  const decPart = Math.round((row.israel - intPart) * 10);
                  return (
                    <div className="cv">{intPart}<span className="stat-tail">{decPart > 0 ? `,${decPart}%` : '%'}</span></div>
                  );
                })()}
              </div>
              <div className="caption-cell">
                <span>5-летняя выживаемость</span>
                <span>CONCORD-3 · 2010–2014</span>
              </div>
            </div>

            <div className="bars">
              <div className="bar-row hero-row">
                <div className="bn">Израиль</div>
                <div className="bar-track"><div className="bar-fill" style={{width: `${(row.israel/maxVal)*100}%`}}/></div>
                <div className="bv">{row.israel}%</div>
              </div>
              <div className="bar-row">
                <div className="bn">Европа</div>
                <div className="bar-track"><div className="bar-fill" style={{width: `${(row.eu/maxVal)*100}%`}}/></div>
                <div className="bv">{row.eu}%</div>
              </div>
              <div className="bar-row">
                <div className="bn">Турция</div>
                <div className="bar-track"><div className="bar-fill" style={{width: `${(row.turkey/maxVal)*100}%`}}/></div>
                <div className="bv">{row.turkey}%</div>
              </div>
              <div className="bar-row">
                <div className="bn">Россия</div>
                <div className="bar-track"><div className="bar-fill" style={{width: `${(row.russia/maxVal)*100}%`}}/></div>
                <div className="bv">{row.russia}%</div>
              </div>
            </div>

            <div className="chart-footnote">
              <span className="src">Источник · CONCORD-3, The Lancet (2018)</span>
              <button type="button" onClick={onOpenQuiz} className="btn btn-outline-paper btn-sm">
                Получить такие же результаты <I.ArrowUpRight size={14}/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.DataSection = DataSection;