// Services — horizontal scroll
const { useRef: useRefSv, useState: useStateSv, useEffect: useEffectSv } = React;

const SERVICES = [
  {n:'01',t:'Bireysel Döviz İşlemleri',d:'Şubelerimizde nakit ve havale ile döviz alış-satış. Kasada saklı maliyet yok, müşteri özelinde kur teklifi alma imkânı.',tags:['Nakit','Havale','VIP Salon']},
  {n:'02',t:'Kurumsal Çözümler',d:'İhracatçı ve ithalatçı firmalar için çoklu para birimi yönetimi, hedge stratejileri ve günlük operasyon desteği.',tags:['Çoklu Para','Hedge','API Bağlantı']},
  {n:'03',t:'Özel Danışmanlık',d:'Yüksek hacimli işlemler için özel müşteri temsilcisi, piyasa raporları ve makro analiz brifingleri.',tags:['Özel Temsilci','Rapor','Brifing']},
  {n:'04',t:'Yatırım Aracılığı',d:'Anlaşmalı kurumlar üzerinden uluslararası transfer ve değerli maden alım-satımına aracılık.',tags:['Transfer','Kıymetli Maden']},
  {n:'05',t:'Online Görüşme',d:'Şubeye gelmeden, dijital kimlik doğrulama ile kurulan video bağlantı üzerinden işlem ön onay süreci.',tags:['Video','Onay','Randevu']},
];

function Services(){
  const trackRef = useRefSv(null);
  const [progress,setProgress] = useStateSv(0);
  const [canL,setCanL]=useStateSv(false);
  const [canR,setCanR]=useStateSv(true);
  const { ArrowLeft, ArrowRight, ArrowUpRight } = window.LucideReact || {};

  useEffectSv(()=>{
    const el = trackRef.current; if(!el) return;
    const onScroll = ()=>{
      const max = el.scrollWidth - el.clientWidth;
      setProgress(max>0 ? el.scrollLeft/max : 0);
      setCanL(el.scrollLeft>4);
      setCanR(el.scrollLeft < max-4);
    };
    onScroll();
    el.addEventListener('scroll',onScroll,{passive:true});
    return ()=>el.removeEventListener('scroll',onScroll);
  },[]);

  const scrollBy = (dir)=>{
    const el = trackRef.current; if(!el) return;
    el.scrollBy({left: dir*el.clientWidth*0.7, behavior:'smooth'});
  };

  return (
    <section id="hizmetler" data-screen-label="Hizmetler" className="section-pad" style={{padding:'120px 0 130px',position:'relative',background:'linear-gradient(180deg,transparent, rgba(0,0,0,0.25), transparent)'}}>
      <div className="container-x">
        <div className="reveal" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:30,flexWrap:'wrap',marginBottom:50}}>
          <div style={{maxWidth:700}}>
            <div className="eyebrow mb-4"><span className="dot"></span>03 — Hizmetler</div>
            <h2 className="font-serif" style={{fontSize:'clamp(40px, 5.4vw, 72px)',lineHeight:1.04,letterSpacing:'-0.02em',margin:'18px 0 0'}}>
              <span style={{fontStyle:'italic',color:'var(--gold-2)',fontWeight:400}}>Beş hizmet,</span><br/>tek standart.
            </h2>
          </div>

          <div style={{display:'flex',gap:10,alignItems:'center'}}>
            <button onClick={()=>scrollBy(-1)} disabled={!canL} style={{
              width:48,height:48,borderRadius:99,border:'1px solid var(--line-strong)',
              background:canL?'rgba(255,255,255,0.04)':'transparent',color:canL?'#fff':'var(--text-mute)',
              cursor:canL?'pointer':'not-allowed',transition:'all .3s',display:'flex',alignItems:'center',justifyContent:'center'
            }}>
              {ArrowLeft && <ArrowLeft size={18}/>}
            </button>
            <button onClick={()=>scrollBy(1)} disabled={!canR} style={{
              width:48,height:48,borderRadius:99,border:'1px solid var(--line-strong)',
              background:canR?'rgba(255,255,255,0.04)':'transparent',color:canR?'#fff':'var(--text-mute)',
              cursor:canR?'pointer':'not-allowed',transition:'all .3s',display:'flex',alignItems:'center',justifyContent:'center'
            }}>
              {ArrowRight && <ArrowRight size={18}/>}
            </button>
          </div>
        </div>
      </div>

      <div ref={trackRef} className="h-scroll reveal reveal-d2 services-track" style={{
        display:'flex',gap:22,overflowX:'auto',scrollSnapType:'x mandatory',
        padding:'10px 32px 30px',
      }}>
        <div style={{minWidth:'max(0px, calc((100vw - 1320px) / 2))'}}></div>
        {SERVICES.map((s,i)=>(
          <article key={s.n} className="glass service-card" style={{
            scrollSnapAlign:'start',
            flex:'0 0 380px',minHeight:440,borderRadius:22,padding:'34px 32px',
            display:'flex',flexDirection:'column',justifyContent:'space-between',
            position:'relative',overflow:'hidden',transition:'transform .5s, border-color .5s'
          }}
          onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-6px)';e.currentTarget.style.borderColor='rgba(212,177,106,0.4)'}}
          onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.borderColor='var(--line)'}}
          >
            <div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:38}}>
                <div className="font-serif gold-text" style={{fontSize:42,lineHeight:1,letterSpacing:'-0.02em'}}>{s.n}</div>
                {ArrowUpRight && <ArrowUpRight size={18} style={{color:'var(--gold-2)',opacity:0.7}}/>}
              </div>
              <h3 className="font-serif" style={{fontSize:30,lineHeight:1.1,letterSpacing:'-0.015em',color:'#fff',margin:'0 0 14px'}}>{s.t}</h3>
              <p style={{fontSize:14.5,lineHeight:1.6,color:'var(--text-dim)',margin:0}}>{s.d}</p>
            </div>
            <div>
              <div className="hairline" style={{marginBottom:18}}></div>
              <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
                {s.tags.map(t=>(
                  <span key={t} style={{fontSize:11,padding:'5px 10px',borderRadius:99,background:'rgba(212,177,106,0.07)',border:'1px solid rgba(212,177,106,0.18)',color:'var(--gold-2)'}}>{t}</span>
                ))}
              </div>
            </div>
          </article>
        ))}
        <div style={{minWidth:60,flex:'0 0 60px'}}></div>
      </div>

      {/* progress rail */}
      <div className="container-x" style={{marginTop:14}}>
        <div style={{height:1,background:'var(--line)',position:'relative',overflow:'hidden'}}>
          <div style={{
            position:'absolute',left:0,top:0,height:'100%',
            width:`${20 + progress*80}%`,
            background:'linear-gradient(90deg, var(--gold-deep), var(--gold-2), var(--gold))',
            transition:'width .2s'
          }}></div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;