// Branches — interactive 3D tilt cards + stylized İstanbul map
const { useState: useStateBr, useRef: useRefBr } = React;

const BRANCHES = [
  {
    id:'merkez',
    type:'Genel Merkez',
    name:'Merkez',
    address:'Merkez Mah. Halaskargazi Cad. Ak Apt. No: 149 A, Şişli / İstanbul',
    phone:'+90 212 830 76 39',
    phone2:'+90 538 646 25 99',
    mapUrl:'https://www.google.com/maps/place/BPNFX+D%C3%B6viz+%C5%9Ei%C5%9Fli/@41.0566084,28.9841323,17z/data=!3m1!4b1!4m6!3m5!1s0x14cab740a34fa033:0x47f00242b43e116b!8m2!3d41.0566044!4d28.9867072!16s%2Fg%2F11yr0lwf3x?entry=ttu&g_ep=EgoyMDI2MDQyMi4wIKXMDSoASAFQAw%3D%3D',
    dirUrl:'https://www.google.com/maps/dir/?api=1&destination=BPNFX+D%C3%B6viz+%C5%9Ei%C5%9Fli&destination_place_id=0x14cab740a34fa033:0x47f00242b43e116b',
    hours:'Pazartesi — Cumartesi · 09:00 – 20:00',
    coords:{x:40, y:48},
    services:['VIP Salon','Kasalı İşlem','Kurumsal Danışmanlık','Online Görüşme'],
    estd:'2025',
    tag:'HQ',
    district:'ŞİŞLİ · HALASKARGAZİ',
  },
  {
    id:'astoria',
    type:'Şube',
    name:'Astoria Şube',
    address:'Esentepe Mah. Büyükdere Cad. Astoria No:127 İç Kapı No:31, Şişli / İstanbul',
    phone:'+90 533 946 03 90',
    mapUrl:'https://www.google.com/maps/place/Astoria+%C4%B0%C5%9F+Merkezi/@41.068193,29.003346,17z/data=!3m1!5s0x14caa50c09361f15:0xeb3242279d81ca30!4m6!3m5!1s0x14cab5d70267668b:0x1f2b6eee7b6b7f4a!8m2!3d41.0684604!4d29.0058297!16s%2Fg%2F122h728v?hl=tr-TR&entry=ttu&g_ep=EgoyMDI2MDQyMi4wIKXMDSoASAFQAw%3D%3D',
    dirUrl:'https://www.google.com/maps/dir/?api=1&destination=Astoria+%C4%B0%C5%9F+Merkezi&destination_place_id=0x14cab5d70267668b:0x1f2b6eee7b6b7f4a',
    hours:'Pazartesi — Cumartesi · 09:00 – 20:00',
    coords:{x:46, y:36},
    services:['Bireysel İşlem','Hızlı Çekim','Randevulu Hizmet'],
    estd:'2026',
    tag:'BR',
    district:'ŞİŞLİ · ESENTEPE',
  },
];

// Stylized İstanbul map: European + Anatolian sides separated by Bosphorus, with Marmara south & Black Sea north
function IstanbulMap({active, onPick}){
  return (
    <svg viewBox="0 0 600 420" style={{width:'100%',height:'100%',display:'block'}}>
      <defs>
        <linearGradient id="seaGradIst" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="rgba(14,22,46,0.95)"/>
          <stop offset="100%" stopColor="rgba(8,14,30,0.95)"/>
        </linearGradient>
        <linearGradient id="landGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="rgba(34,46,78,0.92)"/>
          <stop offset="100%" stopColor="rgba(22,32,58,0.95)"/>
        </linearGradient>
        <radialGradient id="pinGlowIst">
          <stop offset="0%" stopColor="rgba(248,220,150,0.85)"/>
          <stop offset="60%" stopColor="rgba(248,220,150,0.18)"/>
          <stop offset="100%" stopColor="rgba(248,220,150,0)"/>
        </radialGradient>
        <pattern id="dotsIst" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.5" fill="rgba(212,177,106,0.16)"/>
        </pattern>
        <pattern id="waterLines" width="22" height="22" patternUnits="userSpaceOnUse">
          <path d="M0 11 Q5.5 7 11 11 T22 11" stroke="rgba(120,170,255,0.08)" strokeWidth="0.6" fill="none"/>
        </pattern>
      </defs>

      {/* sea base */}
      <rect width="600" height="420" fill="url(#seaGradIst)"/>
      <rect width="600" height="420" fill="url(#waterLines)"/>

      {/* European side (left/north-west) — Beyoğlu, Şişli, Beşiktaş, Sarıyer */}
      <path d="
        M 0 0
        L 600 0
        L 600 70
        Q 540 80 480 90
        Q 420 100 380 130
        Q 350 155 330 185
        Q 315 215 308 250
        Q 305 280 295 305
        Q 285 330 270 350
        Q 250 375 220 390
        Q 180 405 130 410
        Q 70 412 0 410
        Z
      " fill="url(#landGrad)" stroke="rgba(212,177,106,0.28)" strokeWidth="0.8"/>

      {/* Anatolian side (right) — Üsküdar, Kadıköy */}
      <path d="
        M 600 90
        Q 560 105 510 130
        Q 460 155 420 195
        Q 390 230 380 270
        Q 375 305 380 340
        Q 388 380 410 410
        Q 470 415 540 415
        L 600 415
        Z
      " fill="url(#landGrad)" stroke="rgba(212,177,106,0.28)" strokeWidth="0.8"/>

      {/* dot overlays on land */}
      <path d="
        M 0 0
        L 600 0
        L 600 70
        Q 540 80 480 90
        Q 420 100 380 130
        Q 350 155 330 185
        Q 315 215 308 250
        Q 305 280 295 305
        Q 285 330 270 350
        Q 250 375 220 390
        Q 180 405 130 410
        Q 70 412 0 410
        Z
      " fill="url(#dotsIst)"/>
      <path d="
        M 600 90
        Q 560 105 510 130
        Q 460 155 420 195
        Q 390 230 380 270
        Q 375 305 380 340
        Q 388 380 410 410
        Q 470 415 540 415
        L 600 415
        Z
      " fill="url(#dotsIst)"/>

      {/* Bosphorus channel highlight */}
      <path d="M 360 90 Q 350 130 348 170 Q 350 210 360 250 Q 372 290 388 330 Q 400 370 410 410"
            stroke="rgba(120,170,255,0.35)" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M 360 90 Q 350 130 348 170 Q 350 210 360 250 Q 372 290 388 330 Q 400 370 410 410"
            stroke="rgba(120,170,255,0.12)" strokeWidth="6" fill="none" strokeLinecap="round"/>

      {/* Golden Horn (Haliç) */}
      <path d="M 0 230 Q 80 235 160 240 Q 230 245 280 260" stroke="rgba(120,170,255,0.28)" strokeWidth="2" fill="none" strokeLinecap="round"/>

      {/* Bridge indicators */}
      <line x1="332" y1="200" x2="368" y2="200" stroke="rgba(212,177,106,0.4)" strokeWidth="1" strokeDasharray="2 3"/>
      <line x1="345" y1="290" x2="385" y2="290" stroke="rgba(212,177,106,0.4)" strokeWidth="1" strokeDasharray="2 3"/>

      {/* district labels */}
      <text x="170" y="160" fill="rgba(154,166,189,0.55)" fontFamily="'JetBrains Mono',monospace" fontSize="9" letterSpacing="3">ŞİŞLİ</text>
      <text x="80" y="280" fill="rgba(154,166,189,0.45)" fontFamily="'JetBrains Mono',monospace" fontSize="9" letterSpacing="3">FATİH</text>
      <text x="200" y="340" fill="rgba(154,166,189,0.4)" fontFamily="'JetBrains Mono',monospace" fontSize="8" letterSpacing="3">BAKIRKÖY</text>
      <text x="450" y="170" fill="rgba(154,166,189,0.45)" fontFamily="'JetBrains Mono',monospace" fontSize="9" letterSpacing="3">ÜSKÜDAR</text>
      <text x="490" y="380" fill="rgba(154,166,189,0.45)" fontFamily="'JetBrains Mono',monospace" fontSize="9" letterSpacing="3">MALTEPE</text>

      {/* Sea labels */}
      <text x="20" y="40" fill="rgba(120,170,255,0.4)" fontFamily="'JetBrains Mono',monospace" fontSize="9" letterSpacing="3">KARADENİZ</text>
      <text x="240" y="405" fill="rgba(120,170,255,0.4)" fontFamily="'JetBrains Mono',monospace" fontSize="9" letterSpacing="3">MARMARA</text>
      <text x="358" y="80" fill="rgba(120,170,255,0.55)" fontFamily="'JetBrains Mono',monospace" fontSize="8" letterSpacing="2" transform="rotate(82 358 80)">BOĞAZİÇİ</text>

      {/* Pins */}
      {BRANCHES.map(b=>{
        const cx = b.coords.x*6, cy=b.coords.y*4.2;
        const isActive = active===b.id;
        return (
          <g key={b.id} style={{cursor:'pointer'}} onClick={()=>onPick && onPick(b.id)} onMouseEnter={()=>onPick && onPick(b.id)}>
            {/* glow */}
            <circle cx={cx} cy={cy} r={isActive?52:24} fill="url(#pinGlowIst)" style={{transition:'r .55s'}}/>
            {/* outer ripple */}
            <circle cx={cx} cy={cy} r="9" fill="none" stroke="rgba(212,177,106,0.7)" strokeWidth="1">
              {isActive && <animate attributeName="r" from="9" to="32" dur="1.8s" repeatCount="indefinite"/>}
              {isActive && <animate attributeName="opacity" from="0.85" to="0" dur="1.8s" repeatCount="indefinite"/>}
            </circle>
            {/* core */}
            <circle cx={cx} cy={cy} r="6" fill="#1a1304" stroke="#f4e2b3" strokeWidth="1.5"/>
            <circle cx={cx} cy={cy} r="2.5" fill="#f4e2b3"/>

            {/* label */}
            <g style={{opacity: isActive ? 1 : 0.55, transition:'opacity .3s'}}>
              <line x1={cx} y1={cy} x2={cx + (b.coords.x>50? 50 : -50)} y2={cy - 38}
                    stroke="rgba(212,177,106,0.55)" strokeWidth="0.8"/>
              <text x={cx + (b.coords.x>50 ? 56 : -56)} y={cy - 34}
                    fill={isActive?'#f4e2b3':'rgba(212,177,106,0.7)'}
                    fontFamily="'JetBrains Mono',monospace" fontSize="10" letterSpacing="2"
                    textAnchor={b.coords.x>50 ? 'start' : 'end'}>
                {b.tag} · {b.name.toUpperCase()}
              </text>
              <text x={cx + (b.coords.x>50 ? 56 : -56)} y={cy - 20}
                    fill="rgba(154,166,189,0.7)"
                    fontFamily="'JetBrains Mono',monospace" fontSize="8" letterSpacing="2"
                    textAnchor={b.coords.x>50 ? 'start' : 'end'}>
                {b.district}
              </text>
            </g>
          </g>
        );
      })}
    </svg>
  );
}

function BranchCard({branch}){
  const ref = useRefBr(null);
  const { Phone, MapPin, Navigation, ArrowUpRight, Clock } = window.LucideReact || {};

  const onMove = (e)=>{
    const el = ref.current; if(!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left)/r.width - 0.5;
    const y = (e.clientY - r.top)/r.height - 0.5;
    el.style.transform = `perspective(1100px) rotateX(${ -y*5 }deg) rotateY(${ x*7 }deg) translateZ(0)`;
    const sheen = el.querySelector('.sheen');
    if(sheen) sheen.style.background = `radial-gradient(380px 240px at ${(x+0.5)*100}% ${(y+0.5)*100}%, rgba(212,177,106,0.18), transparent 60%)`;
  };
  const onOut = ()=>{
    const el = ref.current; if(!el) return;
    el.style.transform = 'perspective(1100px) rotateX(0) rotateY(0)';
    const sheen = el.querySelector('.sheen');
    if(sheen) sheen.style.background='transparent';
  };

  return (
    <div
      ref={ref}
      className="tilt glass-strong"
      onMouseMove={onMove}
      onMouseLeave={onOut}
      style={{
        position:'relative',borderRadius:24,padding:'34px 34px 30px',
        overflow:'hidden',
        transformStyle:'preserve-3d',transition:'transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s',
        cursor:'default',
      }}
    >
      <div className="sheen" style={{position:'absolute',inset:0,pointerEvents:'none',transition:'background .25s'}}></div>

      <div style={{position:'absolute',top:18,right:18,fontFamily:"'JetBrains Mono', monospace",fontSize:10,letterSpacing:'0.2em',color:'var(--gold-2)'}}>
        {branch.tag} · EST {branch.estd}
      </div>

      <div style={{display:'flex',alignItems:'baseline',gap:12,marginBottom:6}}>
        <div style={{fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color:'var(--text-mute)'}}>
          {branch.type}
        </div>
        <div style={{flex:1,height:1,background:'var(--line-strong)'}}></div>
      </div>

      <h3 className="font-serif" style={{fontSize:42,lineHeight:1.05,letterSpacing:'-0.02em',color:'#fff',margin:'4px 0 22px'}}>
        {branch.name}
      </h3>

      <div style={{display:'flex',alignItems:'flex-start',gap:12,marginBottom:14,color:'var(--text-dim)'}}>
        {MapPin && <MapPin size={16} strokeWidth={1.5} style={{marginTop:2,color:'var(--gold-2)',flexShrink:0}}/>}
        <span style={{fontSize:14,lineHeight:1.55}}>{branch.address}</span>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:14,color:'var(--text-dim)'}}>
        {Clock && <Clock size={16} strokeWidth={1.5} style={{color:'var(--gold-2)',flexShrink:0}}/>}
        <span style={{fontSize:14}}>{branch.hours}</span>
      </div>
      <div style={{marginBottom:24}}>
        <div style={{display:'flex',alignItems:'center',gap:12,color:'var(--text-dim)'}}>
          {Phone && <Phone size={16} strokeWidth={1.5} style={{color:'var(--gold-2)',flexShrink:0}}/>}
          <a href={`tel:${branch.phone.replace(/\s/g,'')}`} style={{fontSize:14,color:'#fff',textDecoration:'none',fontFamily:"'JetBrains Mono',monospace"}}>{branch.phone}</a>
        </div>
        {branch.phone2 && (
          <div style={{display:'flex',alignItems:'center',gap:12,marginTop:8,color:'var(--text-dim)'}}>
            <div style={{width:16,flexShrink:0}}/>
            <a href={`tel:${branch.phone2.replace(/\s/g,'')}`} style={{fontSize:14,color:'var(--text-dim)',textDecoration:'none',fontFamily:"'JetBrains Mono',monospace"}}>{branch.phone2}</a>
          </div>
        )}
      </div>

      <div style={{display:'flex',flexWrap:'wrap',gap:8,marginBottom:28}}>
        {branch.services.map(s=>(
          <span key={s} style={{
            fontSize:11.5,padding:'6px 11px',borderRadius:99,
            background:'rgba(255,255,255,0.04)',border:'1px solid var(--line)',
            color:'var(--text-dim)',letterSpacing:'0.02em'
          }}>{s}</span>
        ))}
      </div>

      <div className="hairline" style={{marginBottom:20}}></div>

      <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
        <a href={branch.dirUrl} target="_blank" rel="noopener noreferrer" className="btn btn-gold btn-sm">
          {Navigation && <Navigation size={13}/>} Yol Tarifi Al
        </a>
        <a href={`tel:${branch.phone.replace(/\s/g,'')}`} className="btn btn-ghost btn-sm">
          {Phone && <Phone size={13}/>} Ara
        </a>
        <a href={branch.mapUrl} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
          {MapPin && <MapPin size={13}/>} Haritada Gör {ArrowUpRight && <ArrowUpRight size={12}/>}
        </a>
      </div>

      <div style={{position:'absolute',bottom:-40,right:-40,width:140,height:140,borderRadius:'50%',background:'radial-gradient(circle, rgba(212,177,106,0.18), transparent 70%)',pointerEvents:'none'}}></div>
    </div>
  );
}

function Branches(){
  const [active,setActive] = useStateBr(BRANCHES[0].id);

  return (
    <section id="subeler" data-screen-label="Şubeler" className="section-pad" style={{position:'relative',padding:'120px 0 140px'}}>
      <div className="container-x">
        <div className="reveal" style={{marginBottom:60,display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:30,flexWrap:'wrap'}}>
          <div style={{maxWidth:680}}>
            <div className="eyebrow mb-4"><span className="dot"></span>02 — Şubelerimiz</div>
            <h2 className="font-serif" style={{fontSize:'clamp(40px, 5.4vw, 72px)',lineHeight:1.04,letterSpacing:'-0.02em',margin:'18px 0 0'}}>
              İki nokta. <span style={{fontStyle:'italic',color:'var(--gold-2)',fontWeight:400}}>Aynı disiplin.</span>
            </h2>
          </div>
          <p style={{maxWidth:380,color:'var(--text-dim)',fontSize:15,lineHeight:1.6,margin:0}}>
            Yetkili müessese olarak İstanbul'un iki yakasında hizmet veriyoruz. Tüm işlemler aynı standartlarla, aynı kasalarla, aynı kadroyla yürütülür.
          </p>
        </div>

        <div className="reveal reveal-d2 branches-grid" style={{
          display:'grid',
          gridTemplateColumns:'1.1fr 1fr 1fr',
          gap:24,alignItems:'stretch'
        }}>
          {/* Map panel */}
          <div className="glass" style={{
            borderRadius:24,padding:24,position:'relative',overflow:'hidden',
            display:'flex',flexDirection:'column',gap:18,minHeight:520
          }}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div className="eyebrow" style={{color:'var(--text-dim)'}}><span className="dot"></span>İstanbul</div>
              <span style={{fontSize:11,fontFamily:"'JetBrains Mono',monospace",color:'var(--text-mute)'}}>41.0°N · 28.9°E</span>
            </div>
            <div style={{flex:1,position:'relative',borderRadius:14,overflow:'hidden',border:'1px solid var(--line)',minHeight:340}}>
              <IstanbulMap active={active} onPick={setActive}/>
            </div>
            <div style={{display:'flex',gap:10}}>
              {BRANCHES.map(b=>(
                <button key={b.id} onClick={()=>setActive(b.id)}
                  onMouseEnter={()=>setActive(b.id)}
                  style={{
                    flex:1,padding:'12px 14px',borderRadius:12,cursor:'pointer',
                    background: active===b.id?'rgba(212,177,106,0.14)':'rgba(255,255,255,0.025)',
                    border:'1px solid '+(active===b.id?'rgba(212,177,106,0.5)':'var(--line)'),
                    color: active===b.id?'#fff':'var(--text-dim)',
                    fontFamily:'inherit',fontSize:13,textAlign:'left',
                    transition:'all .35s'
                  }}>
                  <div style={{fontSize:10,letterSpacing:'0.2em',textTransform:'uppercase',color:active===b.id?'var(--gold-2)':'var(--text-mute)',marginBottom:4}}>{b.tag}</div>
                  {b.name}
                </button>
              ))}
            </div>
          </div>

          {BRANCHES.map(b=>(
            <BranchCard key={b.id} branch={b}/>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Branches = Branches;