function Season() {
  const isTR = window.__locale === 'tr';
  const tiers = Array.from({ length: 15 }).map((_, i) => ({
    n: i + 1, done: i < 2, current: i === 2
  }));
  const stats = isTR ? [
    { k: 'Otuz gün', v: 'Sezon süresi' },
    { k: 'On beş',   v: 'Tematik durak' },
    { k: 'Yedi',     v: 'Hâtıra çeşidi' },
  ] : [
    { k: 'Thirty days', v: 'Season length' },
    { k: 'Fifteen',     v: 'Themed stops' },
    { k: 'Seven',       v: 'Memento types' },
  ];
  const cadence = isTR ? [
    { k: 'Aylık sezon',  v: 'Her 30 günde bir yeni tema' },
    { k: 'Etkinlik',     v: 'Özel günlere bağlı kısa sezonlar' },
    { k: 'Hâtıra',       v: 'Her sezon sonunda atlasa mühür' },
  ] : [
    { k: 'Monthly',  v: 'A new theme every 30 days' },
    { k: 'Event',    v: 'Short seasons tied to special dates' },
    { k: 'Memento',  v: 'A stamp in your atlas at season end' },
  ];
  return (
    <section id="sezon" className="season">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t('05 / SEZON', '05 / SEASON')}</span>
            <h2 className="h-1">
              {t('Her ay yeni bir tema.', 'A new theme each month.')}
              <br/>
              <span className="serif">{t('Özel günlerde etkinlik sezonları.', 'Event seasons on special dates.')}</span>
            </h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              'Her ay yeni tema. 15 durak, 30 gün. Sezon biter, atlasına o sezona özel bir hatıra mührü düşer. Bayram ve özel günlerde kısa etkinlik sezonları.',
              'New theme every month. 15 stops, 30 days. When a season ends, a memento stamp lands in your atlas. Short event seasons tied to special dates.'
            )}
          </p>
        </div>

        <div className="season-card">
          <div className="season-grid">
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--gold)', letterSpacing: '0.18em' }}>{t('III. DURAK · ON BEŞTEN', 'STOP III · OF FIFTEEN')}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)', letterSpacing: '0.14em' }}>{t('30 GÜN', '30 DAYS')}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 46, color: 'var(--text)', letterSpacing: '-0.015em', marginBottom: 14, lineHeight: 1 }}>
                {isTR ? (
                  <>İkinci durağı <span style={{ color: 'var(--gold)' }}>geçtiniz</span>.</>
                ) : (
                  <>You've <span style={{ color: 'var(--gold)' }}>passed</span> the second stop.</>
                )}
              </div>
              <div style={{ height: 3, background: 'rgba(10,22,40,0.08)', borderRadius: 2, overflow: 'hidden', marginBottom: 14 }}>
                <div style={{ width: '13%', height: '100%', background: 'var(--gold)' }}/>
              </div>

              <div className="tier-track">
                <div className="tier-row">
                  {tiers.map((tr, i) => (
                    <div key={i} className={`tier-node ${tr.done ? 'done' : ''} ${tr.current ? 'current' : ''}`}>
                      {tr.n}
                    </div>
                  ))}
                </div>
                <div className="tier-labels">
                  {Array.from({length:15}).map((_,i) => (
                    <span key={i}>{i === 0 ? 'I' : i === 14 ? 'XV' : ''}</span>
                  ))}
                </div>
              </div>

              <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
                {stats.map((s, i) => (
                  <div key={i} className="card flat" style={{ padding: 18 }}>
                    <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 24, color: 'var(--text)', letterSpacing: '-0.01em' }}>{s.k}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 6 }}>{s.v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--gold)' }}>{t('✦ SEZON RİTMİ', '✦ SEASON CADENCE')}</div>
              <div className="spotlight-list">
                {cadence.map((s, i) => (
                  <div key={i} className="spotlight-item">
                    <div className="glyph" style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22 }}>{String.fromCharCode(8544 + i)}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="n" style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17 }}>{s.k}</div>
                      <div className="s">{s.v}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 28, padding: 20, border: '1px solid var(--stroke)', borderRadius: 4, background: 'var(--bg-card)' }}>
                <div className="eyebrow muted" style={{ marginBottom: 10 }}>{t('SEZON HÂTIRASI', 'SEASON MEMENTO')}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--text)', lineHeight: 1.45 }}>
                  {t(
                    'Her sezonun kendine özel bir hatıra mührü. Bitince atlasına düşer.',
                    "Every season has its own memento stamp. It lands in your atlas when the season's done."
                  )}
                </div>
                <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.14em' }}>
                  {t('15 / 15 DURAK TAMAMLANDIĞINDA AÇILIR', 'UNLOCKS WHEN 15 / 15 STOPS COMPLETE')}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Season });