function Levels() {
  const pts = [
    [1, 0], [5, 250], [10, 500], [15, 840], [20, 1140],
    [25, 1600], [30, 2100], [35, 2600], [40, 3100], [45, 3600], [50, 4100]
  ];
  const w = 500, h = 320;
  const maxXP = 4100;
  const path = pts.map(([l, xp], i) => {
    const x = ((l - 1) / 49) * w;
    const y = h - (xp / maxXP) * h;
    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(' ');

  const isTR = window.__locale === 'tr';
  const titles = [
    { lvl: 'I',    name: isTR ? 'Çaylak'      : 'Novice',       xp: '0 → 250',     accent: 'var(--text-mute)' },
    { lvl: 'II',   name: isTR ? 'Gezgin'      : 'Traveler',     xp: '300 → 500',   accent: 'var(--text-soft)' },
    { lvl: 'III',  name: isTR ? 'Kâşif'       : 'Explorer',     xp: '600 → 960',   accent: 'var(--teal-soft)' },
    { lvl: 'IV',   name: isTR ? 'Maceracı'    : 'Adventurer',   xp: '1020 → 1140', accent: 'var(--teal)' },
    { lvl: 'V',    name: isTR ? 'Rehber'      : 'Guide',        xp: '1200 → 1500', accent: 'var(--teal)' },
    { lvl: 'VI',   name: isTR ? 'Uzman'       : 'Expert',       xp: '1600 → 2000', accent: 'var(--r-epic)' },
    { lvl: 'VII',  name: isTR ? 'Usta'        : 'Master',       xp: '2200 → 2500', accent: 'var(--r-epic)' },
    { lvl: 'VIII', name: isTR ? 'Veteran'     : 'Veteran',      xp: '2600 → 3000', accent: 'var(--gold-soft)' },
    { lvl: 'IX',   name: isTR ? 'Şampiyon'    : 'Champion',     xp: '3200 → 3500', accent: 'var(--gold-soft)' },
    { lvl: 'X',    name: 'Grandmaster',                         xp: '3600 → 4000', accent: 'var(--gold)' },
    { lvl: 'XI',   name: isTR ? 'Efsane'      : 'Legend',       xp: '4100',        accent: 'var(--gold)', legend: true },
  ];

  return (
    <section id="seviye" className="tight">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t('04 / UNVAN', '04 / TITLES')}</span>
            <h2 className="h-1">{t('Çaylak\'tan', 'From Novice')} <span className="serif">{t('Efsane\'ye.', 'to Legend.')}</span></h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              '11 unvan, 50 seviye. Çaylak\'tan Efsane\'ye 4.100 XP. Acele yok — şehri tanımak ay alır, yıl alır.',
              '11 titles, 50 levels. From Novice to Legend in 4,100 XP. No rush — knowing a city takes months, years.'
            )}
          </p>
        </div>

        <div className="levels-wrap">
          <div className="xp-chart">
            <div className="chart-head">
              <span>XP · CUMULATIVE</span>
              <span style={{ color: 'var(--gold)' }}>Lv 50 · 4.100</span>
            </div>
            <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
              <defs>
                <linearGradient id="xpFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#8B6914" stopOpacity="0.25"/>
                  <stop offset="100%" stopColor="#8B6914" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {[0.25, 0.5, 0.75].map((tick, i) => (
                <line key={i} x1="0" y1={h*tick} x2={w} y2={h*tick} stroke="rgba(10,22,40,0.08)" strokeWidth="0.5" strokeDasharray="2 4"/>
              ))}
              <path d={`${path} L ${w} ${h} L 0 ${h} Z`} fill="url(#xpFill)"/>
              <path d={path} fill="none" stroke="#8B6914" strokeWidth="2" strokeLinejoin="round"/>
              {pts.map(([l, xp], i) => {
                const x = ((l - 1) / 49) * w;
                const y = h - (xp / maxXP) * h;
                const isKey = l === 1 || l === 25 || l === 50;
                return (
                  <g key={i}>
                    <circle cx={x} cy={y} r={isKey ? 5 : 3} fill="#FBF9F2" stroke={isKey ? '#8B6914' : '#5C4508'} strokeWidth="1.5"/>
                    {isKey && (
                      <text x={x} y={y - 12} fontFamily="JetBrains Mono" fontSize="10"
                            fill="#8B6914" textAnchor="middle" letterSpacing="1">
                        LV{l}
                      </text>
                    )}
                  </g>
                );
              })}
              <text x="0" y={h - 6} fontFamily="JetBrains Mono" fontSize="9" fill="#6B7A8C">LV 1</text>
              <text x={w} y={h - 6} fontFamily="JetBrains Mono" fontSize="9" fill="#6B7A8C" textAnchor="end">LV 50</text>
            </svg>
          </div>

          <div className="level-list" style={{ maxHeight: 520, overflowY: 'auto', paddingRight: 8 }}>
            {titles.map((ti, i) => (
              <div key={i} className={`level-row ${ti.legend ? 'legend' : ''}`}>
                <div className="num" style={{ color: ti.accent }}>{ti.lvl}</div>
                <div>
                  <div className="title">{ti.name}</div>
                  <div className="range">{ti.xp} XP</div>
                </div>
                <div className="xp">{ti.legend ? '◆' : '→'}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Levels });