// About — modern storytelling
function About(){
  const { Eye, Compass, Lock, Sparkles } = window.LucideReact || {};

  const pillars = [
    {I:Lock, t:'Şeffaflık', d:'Her işlem belgelenir, her kur açıkça görülür. Saklı maliyet yoktur.'},
    {I:Compass, t:'Yönlendirme', d:'Uzman danışmanlarımız stratejinizi piyasa koşullarına göre kurgular.'},
    {I:Eye, t:'Görünürlük', d:'Hesabınız, hareketleriniz ve işlem geçmişiniz her zaman elinizin altında.'},
    {I:Sparkles, t:'Kurumsal Güç', d:'BPN\'in 2012\'den bu yana inşa ettiği finansal disiplinin döviz koludur.'},
  ];

  return (
    <section id="hakkimizda" data-screen-label="Hakkımızda" className="section-pad" style={{position:'relative',padding:'140px 0 120px'}}>
      <div className="container-x">
        <div className="reveal" style={{display:'grid',gridTemplateColumns:'1fr',gap:40,marginBottom:80}}>
          <div className="eyebrow"><span className="dot"></span>01 — Hakkımızda</div>
          <h2 className="font-serif" style={{fontSize:'clamp(40px, 5.6vw, 78px)',lineHeight:1.04,letterSpacing:'-0.02em',margin:0,maxWidth:1100}}>
            BPN'in<br/>
            <span style={{fontStyle:'italic',color:'var(--gold-2)',fontWeight:400}}>döviz koludur</span> Bpnfx.
          </h2>
        </div>

        {/* big paragraph + side meta */}
        <div className="reveal reveal-d2 about-meta-grid" style={{display:'grid',gridTemplateColumns:'1fr 1.6fr',gap:80,alignItems:'start',marginBottom:100}}>
          <div>
            <div style={{fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color:'var(--text-mute)',marginBottom:14}}>Kurumsal Yapı</div>
            <div className="hairline" style={{marginBottom:24}}></div>
            <div style={{fontSize:13,color:'var(--text-mute)',lineHeight:1.7}}>
              BPN · Kuruluş 2012<br/>
              Bpnfx · Kuruluş 2025<br/>
              İstanbul — Türkiye<br/>
              Hazine ve Maliye Bakanlığı Yetkili
            </div>
          </div>
          <p style={{fontSize:'clamp(20px, 2.2vw, 30px)',lineHeight:1.45,color:'#dde3f0',margin:0,fontWeight:300,letterSpacing:'-0.005em'}}>
            Bpnfx; <span style={{color:'#fff'}}>BPN</span>'in 2012'den bu yana finans alanında biriktirdiği kurumsal birikimi
            döviz hizmetlerine taşımak için <span className="gold-text" style={{fontWeight:500}}>2025'te kurulan</span> yetkili müessesedir.
            Genç bir marka, köklü bir disiplin.
          </p>
        </div>

        {/* pillars */}
        <div className="reveal reveal-d3" style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:20,overflow:'hidden'}}>
          {pillars.map(({I,t,d},i)=>(
            <div key={i} style={{
              padding:'36px 32px 38px',background:'rgba(11,17,34,0.6)',
              backdropFilter:'blur(10px)',position:'relative',transition:'background .4s',
            }}
              onMouseEnter={e=>e.currentTarget.style.background='rgba(20,28,52,0.8)'}
              onMouseLeave={e=>e.currentTarget.style.background='rgba(11,17,34,0.6)'}>
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:42}}>
                {I && <I size={26} style={{color:'var(--gold)'}} strokeWidth={1.4}/>}
                <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:'var(--text-mute)'}}>0{i+1}</span>
              </div>
              <div className="font-serif" style={{fontSize:28,letterSpacing:'-0.01em',color:'#fff',marginBottom:10}}>{t}</div>
              <p style={{fontSize:14,lineHeight:1.55,color:'var(--text-dim)',margin:0}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.About = About;