// 35m rule — interactive distance visualizer
function ThirtyFive() {
  const [distance, setDistance] = React.useState(35);
  const unlocked = distance <= 35;
  const maxView = 200;
  const frac = Math.min(distance / maxView, 1);
  const placeX = 50 + frac * 40;

  return (
    <section id="kesif">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t('01 / YAKLAŞIM', '01 / PROXIMITY')}</span>
            <h2 className="h-1">{t('Otuz beş metre.', 'Thirty-five meters.')}<br/><span className="serif">{t('Ve bir eşik.', 'And a threshold.')}</span></h2>
          </div>
          <p className="lede" style={{ textAlign: 'right' }}>
            {t(
              "Check-in butonu yok. 35 metreye kadar yaklaş, 60 saniye bekle, sayfa açılır. Tek kural: orada olmak.",
              "No check-in button. Get within 35 meters, wait 60 seconds, the page opens. One rule: be there."
            )}
          </p>
        </div>

        <div className="proximity">
          <div className="distance-viz">
            <div className="dist-readout">
              <div>
                <div style={{ color: 'var(--text-mute)' }}>{t('Mesafe', 'Distance')}</div>
                <div className="big">{distance}m</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ color: 'var(--text-mute)' }}>{t('Durum', 'Status')}</div>
                <div className="big" style={{ color: unlocked ? 'var(--gold)' : 'var(--text-mute)', fontSize: 16, marginTop: 6, fontFamily: 'var(--font-mono)', fontStyle: 'normal', letterSpacing: '0.14em' }}>
                  {unlocked ? t('● AÇIK', '● OPEN') : t('○ YAKLAŞIN', '○ APPROACH')}
                </div>
              </div>
            </div>

            <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
              <defs>
                <radialGradient id="placeGrad">
                  <stop offset="0%" stopColor="#8B6914" stopOpacity="0.55"/>
                  <stop offset="100%" stopColor="#8B6914" stopOpacity="0"/>
                </radialGradient>
              </defs>

              {Array.from({ length: 6 }).map((_, i) => (
                <circle key={i} cx="32" cy="50" r={8 + i * 6}
                        fill="none" stroke="#8B6914" strokeWidth="0.2"
                        opacity={0.3 - i * 0.04} strokeDasharray="0.8 1.2"/>
              ))}

              <circle cx="32" cy="50" r="17.5"
                      fill="none" stroke="#8B6914" strokeWidth="0.5"
                      opacity="0.85" strokeDasharray="1 1"/>
              <circle cx="32" cy="50" r="17.5"
                      fill="rgba(139,105,20,0.06)"/>

              <circle cx="32" cy="50" r="42"
                      fill="none" stroke="#2C5F5C" strokeWidth="0.3"
                      opacity="0.45" strokeDasharray="0.5 1.5"/>

              <text x="32" y="35" fontFamily="JetBrains Mono" fontSize="2.2"
                    fill="#8B6914" opacity="0.9" textAnchor="middle" letterSpacing="0.3">{t('35m · YAKLAŞIM', '35m · PROXIMITY')}</text>
              <text x="32" y="10" fontFamily="JetBrains Mono" fontSize="2.2"
                    fill="#2C5F5C" opacity="0.7" textAnchor="middle" letterSpacing="0.3">{t('200m · UYARI', '200m · NOTICE')}</text>

              <circle cx="32" cy="50" r="1.4" fill="#0A1628"/>
              <circle cx="32" cy="50" r="2.8" fill="none" stroke="#0A1628" strokeWidth="0.3" opacity="0.5">
                <animate attributeName="r" values="1.6;4;1.6" dur="2.2s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.7;0;0.7" dur="2.2s" repeatCount="indefinite"/>
              </circle>

              <line x1="32" y1="50" x2={placeX} y2="50"
                    stroke={unlocked ? '#8B6914' : '#9AA5B4'}
                    strokeWidth="0.35"
                    strokeDasharray="1 1"
                    opacity="0.75"/>

              <g transform={`translate(${placeX} 50)`}>
                <circle r="5" fill="url(#placeGrad)"/>
                <circle r="1.6" fill="#8B6914"/>
                <rect x="-4" y="-4" width="8" height="8" fill="none" stroke="#8B6914" strokeWidth="0.3"
                      transform="rotate(45)" opacity={unlocked ? 0.95 : 0.4}>
                  {unlocked && (
                    <animateTransform attributeName="transform" type="rotate"
                                      from="0" to="360" dur="8s" repeatCount="indefinite"/>
                  )}
                </rect>
                <text y="-7" fontFamily="JetBrains Mono" fontSize="2.2"
                      fill="#8B6914" textAnchor="middle" letterSpacing="0.3">{t('AYASOFYA', 'HAGIA SOPHIA')}</text>
                <text y="10" fontFamily="JetBrains Mono" fontSize="1.8"
                      fill="#6B7A8C" opacity="0.85" textAnchor="middle" letterSpacing="0.2">{t('537 · VI. yy', '537 · 6th c.')}</text>
              </g>
            </svg>
          </div>

          <div>
            <div className="dist-slider-label" style={{ marginTop: 0 }}>
              <span className="eyebrow muted">{t('Mesafeyi sürükle ↔', 'Drag distance ↔')}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-mute)', letterSpacing: '0.14em' }}>
                {distance}m / 200m
              </span>
            </div>
            <input type="range" min="5" max="200" value={distance}
                   onChange={(e) => setDistance(parseInt(e.target.value))}
                   style={{
                     width: '100%',
                     accentColor: unlocked ? '#8B6914' : '#9AA5B4',
                     cursor: 'pointer'
                   }}/>

            <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div className="card flat" style={{ padding: 22 }}>
                <div className="eyebrow cyan">200m</div>
                <div style={{ fontSize: 18, fontWeight: 500, marginTop: 10, fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>{t('Yakınlık Hatırlatması', 'Proximity Reminder')}</div>
                <p style={{ fontSize: 13.5, marginTop: 8 }}>{t('Telefonu cebinden çıkarmadan, yanından geçen mekanı haber alırsın.', 'Without taking your phone out, you get notified about a place nearby.')}</p>
              </div>
              <div className="card flat" style={{ padding: 22, borderColor: 'rgba(139,105,20,0.45)' }}>
                <div className="eyebrow">35m</div>
                <div style={{ fontSize: 18, fontWeight: 500, marginTop: 10, color: 'var(--gold)', fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>{t('Eşik Geçildi', 'Threshold Crossed')}</div>
                <p style={{ fontSize: 13.5, marginTop: 8 }}>{t('60 saniye bekle. Sayfa açılır, damga düşer.', '60 seconds. The page opens, the stamp falls.')}</p>
              </div>
            </div>

            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--stroke)', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--text-soft)', lineHeight: 1.5, maxWidth: 520 }}>
              {t(
                'Bir yeri görmek değil — o yere kendi ayağınla varmak.',
                'Not seeing a place — arriving there on your own feet.'
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ThirtyFive });