// Hero — with real Istanbul district boundaries + UV-on-hover reveal
const HERO_IN_SCOPE = new Set([
  'fatih', 'beyoglu', 'besiktas', 'sisli', 'sariyer', 'kadikoy',
  'uskudar', 'beykoz', 'eyupsultan', 'adalar', 'bakirkoy', 'zeytinburnu'
]);

function Hero() {
  const mapRef = React.useRef(null);
  const [hovered, setHovered] = React.useState(null);
  const [tooltip, setTooltip] = React.useState(null);
  const districts = (typeof window !== 'undefined' && window.ISTANBUL_DISTRICTS) || [];
  const vb = (typeof window !== 'undefined' && window.ISTANBUL_VIEWBOX) || { w: 1000, h: 700 };

  const pins = [
    { x: 550, y: 470, name: 'Ayasofya', big: true },
    { x: 520, y: 445, name: 'Süleymaniye' },
    { x: 580, y: 415, name: 'Galata' },
    { x: 625, y: 430, name: 'Kız Kulesi', big: true },
    { x: 700, y: 505, name: 'Kadıköy' },
    { x: 490, y: 375, name: 'Eyüp' },
    { x: 610, y: 300, name: 'Rumelihisarı' },
  ];

  const onLeaveMap = () => { setHovered(null); setTooltip(null); };
  const onMovePath = (e, d) => {
    const rect = mapRef.current.getBoundingClientRect();
    setTooltip({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
      name: d.name,
      count: d.count,
    });
  };

  const uvActive = hovered !== null;

  return (
    <header className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="meta-row">
              <span className="pill dot">{t('Aylık tematik sezonlar', 'Monthly themed seasons')}</span>
              <span className="pill">iOS 17+</span>
              <span className="pill">v1.0</span>
            </div>
            <h1 className="h-display">
              {t("Atlas'ını", 'Complete your')}<br/><span className="serif">{t('tamamla.', 'atlas.')}</span>
              <span className="thin" style={{ display: 'block', marginTop: 18 }}>{t('İstanbul. 9.700 mekan. Bir pasaport.', 'Istanbul. 9,700 places. One passport.')}</span>
            </h1>
            <p className="lede" style={{ marginTop: 32 }}>
              {t(
                "Yürü, yaklaş, keşfet. Her köşe başı bir damga, her damga bir hikaye. İstanbul'u yeniden gezmenin oyunu.",
                "Walk, get close, discover. Every corner is a stamp, every stamp a story. The game of seeing Istanbul again."
              )}
            </p>

            <div className="cta-row" id="indir">
              <a href="https://apps.apple.com/tr/app/atlas-şehirleri-keşfet/id6760196976?l=tr" className="appstore-btn" target="_blank" rel="noopener">
                <IconApple size={28} color="#fff"/>
                <div>
                  <div className="tiny">{t('İNDİR', 'DOWNLOAD')}</div>
                  <div className="big">App Store</div>
                </div>
              </a>
              <a href="#kesif" className="btn btn-ghost">
                <IconPlay size={10}/> {t('Kısa tur', 'Quick tour')}
              </a>
            </div>

            <div className="sub-row">
              <div>
                <div className="kpi green">9.700</div>
                <div className="label">{t('Mekân', 'Places')}</div>
              </div>
              <div>
                <div className="kpi cyan">12</div>
                <div className="label">{t('İlçe', 'Districts')}</div>
              </div>
              <div>
                <div className="kpi">14</div>
                <div className="label">{t('Kategori', 'Categories')}</div>
              </div>
              <div>
                <div className="kpi">III·XXVI</div>
                <div className="label">{t('MS / Kuruluş', 'AD / Founded')}</div>
              </div>
            </div>
          </div>

          <div
            className={`hero-map ${uvActive ? 'is-uv' : ''}`}
            ref={mapRef}
            onMouseLeave={onLeaveMap}
          >
            <CornerFrame />
            <div className="uv-chrome">
              <span>IST · 41.0082°N</span>
              <span>28.9784°E</span>
            </div>

            <svg
              viewBox={`0 0 ${vb.w} ${vb.h}`}
              preserveAspectRatio="xMidYMid meet"
              className="istanbul-map-svg"
            >
              <defs>
                <pattern id="grid-filigree" width="28" height="28" patternUnits="userSpaceOnUse">
                  <path d="M 28 0 L 0 0 0 28" fill="none"
                        stroke="#8B6914" strokeWidth="0.4" opacity="0.12"/>
                </pattern>
                <filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
                  <feGaussianBlur stdDeviation="2.5" result="blur"/>
                  <feMerge>
                    <feMergeNode in="blur"/>
                    <feMergeNode in="SourceGraphic"/>
                  </feMerge>
                </filter>
                <filter id="district-glow" x="-20%" y="-20%" width="140%" height="140%">
                  <feGaussianBlur stdDeviation="4" result="blur"/>
                  <feMerge>
                    <feMergeNode in="blur"/>
                    <feMergeNode in="SourceGraphic"/>
                  </feMerge>
                </filter>
              </defs>

              <rect x="0" y="0" width={vb.w} height={vb.h} fill="rgba(44,95,92,0.16)"/>
              <g opacity="0.35" stroke="#2C5F5C" strokeWidth="0.6" fill="none">
                {Array.from({ length: 14 }).map((_, i) => (
                  <path key={'w'+i}
                    d={`M 0 ${40 + i*50} Q ${vb.w*0.25} ${30 + i*50} ${vb.w*0.5} ${40 + i*50} T ${vb.w} ${40 + i*50}`}
                    strokeDasharray="2 6" opacity={0.35}/>
                ))}
              </g>

              {Array.from({ length: 7 }).map((_, i) => (
                <ellipse key={`c${i}`}
                  cx={vb.w*0.52} cy={vb.h*0.55}
                  rx={120 + i*60} ry={70 + i*40}
                  fill="none" stroke="#8B6914" strokeWidth="0.8"
                  opacity={0.14 - i*0.014}
                  strokeDasharray={i % 2 ? '4 8' : '0'}
                />
              ))}

              <rect x="0" y="0" width={vb.w} height={vb.h} fill="url(#grid-filigree)"/>

              <g className="districts-layer">
                {districts.filter(d => !HERO_IN_SCOPE.has(d.slug)).map(d => (
                  <path key={'oos-'+d.slug} d={d.path} className="district is-outside" />
                ))}
                {districts.filter(d => HERO_IN_SCOPE.has(d.slug)).map((d) => {
                  const isHov = hovered === d.slug;
                  const isDim = uvActive && !isHov;
                  return (
                    <path
                      key={d.slug}
                      d={d.path}
                      className={`district ${isHov ? 'is-hover' : ''} ${isDim ? 'is-dim' : ''}`}
                      onMouseEnter={() => setHovered(d.slug)}
                      onMouseMove={(e) => onMovePath(e, d)}
                      onMouseLeave={() => { setHovered(null); setTooltip(null); }}
                      filter={isHov ? 'url(#district-glow)' : ''}
                    />
                  );
                })}
              </g>

              <g className="district-labels" pointerEvents="none">
                {districts.map((d) => (
                  <text
                    key={'l'+d.slug}
                    x={d.cx} y={d.cy}
                    textAnchor="middle"
                    className={`district-label ${hovered === d.slug ? 'is-hover' : ''}`}
                  >{d.name.toUpperCase()}</text>
                ))}
              </g>

              <g pointerEvents="none">
                {pins.map((p, i) => (
                  <g key={i}>
                    <circle cx={p.x} cy={p.y} r={p.big ? 6 : 4}
                            fill={p.big ? '#8B6914' : '#2C5F5C'}
                            opacity={uvActive ? 0.35 : 0.9}
                            style={{ transition: 'opacity 260ms' }}/>
                    {p.big && (
                      <circle cx={p.x} cy={p.y} r="14" fill="none"
                              stroke="#8B6914" strokeWidth="0.8"
                              opacity={uvActive ? 0.15 : 0.45}
                              strokeDasharray="2 4"
                              style={{ transition: 'opacity 260ms' }}>
                        <animateTransform attributeName="transform" type="rotate"
                                          from={`0 ${p.x} ${p.y}`} to={`360 ${p.x} ${p.y}`}
                                          dur="22s" repeatCount="indefinite"/>
                      </circle>
                    )}
                  </g>
                ))}
              </g>

              <g pointerEvents="none">
                <circle cx={vb.w*0.56} cy={vb.h*0.62} r="5" fill="#8B6914"/>
                <circle cx={vb.w*0.56} cy={vb.h*0.62} r="14" fill="none"
                        stroke="#8B6914" strokeWidth="1.2" opacity="0.5">
                  <animate attributeName="r" values="8;28;8" dur="2.8s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.6;0;0.6" dur="2.8s" repeatCount="indefinite"/>
                </circle>
              </g>
            </svg>

            {tooltip && (
              <div
                className="district-tooltip"
                style={{ left: tooltip.x + 14, top: tooltip.y + 14 }}
              >
                <span className="t-name">{tooltip.name}</span>
                <span className="t-sep">·</span>
                <span className="t-count">{tooltip.count.toLocaleString(window.__locale === 'tr' ? 'tr-TR' : 'en-US')}</span>
                <span className="t-label">{t('mekân', 'places')}</span>
              </div>
            )}

            <div className="mrz-overlay">
              <span>IST&lt;&lt;GEZGIN&lt;&lt;ATLAS&lt;&lt;&lt;</span>
              <span>UV / RFID</span>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { Hero });