// Contact + Footer — info-focused (no form)
function Contact(){
  const { Phone, Mail, MapPin, ArrowUpRight, Clock, MessageCircle, Calendar, Navigation } = window.LucideReact || {};

  const channels = [
    {
      I:Phone, label:'Telefon', primary:'+90 212 830 76 39',
      sub:'Pazartesi — Cumartesi · 09:00 — 20:00',
      action:'Hemen Ara', href:'tel:+902128307639', tag:'01'
    },
    {
      I:Mail, label:'Kurumsal E-posta', primary:'info@bpnfx.com.tr',
      sub:'Tekliflere en geç 4 saat içinde dönüş',
      action:'E-posta Yaz', href:'mailto:info@bpnfx.com.tr', tag:'02'
    },
    {
      I:Calendar, label:'Randevu', primary:'Yüz yüze görüşme',
      sub:'Merkez · VIP Salon',
      action:'Randevu Talep Et', href:'https://wa.me/905386462599?text=Merhaba%2C%20y%C3%BCz%20y%C3%BCze%20g%C3%B6r%C3%BC%C5%9Fme%20talep%20etmek%20istiyorum.', tag:'03'
    },
    {
      I:MessageCircle, label:'WhatsApp İş Hattı', primary:'+90 538 646 25 99',
      sub:'Hızlı bilgi ve teklif takibi',
      action:'Sohbeti Aç', href:'https://wa.me/905386462599', tag:'04'
    },
  ];

  return (
    <section id="iletisim" data-screen-label="İletişim" className="section-pad" style={{padding:'120px 0 80px',position:'relative'}}>
      <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:760}}>
            <div className="eyebrow mb-4"><span className="dot"></span>04 — İletişim</div>
            <h2 className="font-serif" style={{fontSize:'clamp(40px, 5.4vw, 72px)',lineHeight:1.04,letterSpacing:'-0.02em',margin:'18px 0 18px'}}>
              Doğrudan <span style={{fontStyle:'italic',color:'var(--gold-2)',fontWeight:400}}>iletişim</span>.
            </h2>
            <p style={{color:'var(--text-dim)',fontSize:17,lineHeight:1.55,margin:0,maxWidth:560}}>
              Form değil, gerçek hatlar. Bpnfx ekibi her kanaldan kişisel olarak ulaşılabilir.
            </p>
          </div>
          {(()=>{
            const h = new Date().getHours();
            const open = h >= 9 && h < 20;
            return (
              <div className="glass" style={{padding:'14px 20px',borderRadius:99,display:'flex',alignItems:'center',gap:10}}>
                <span style={{width:8,height:8,borderRadius:99,
                  background: open ? 'var(--success)' : 'var(--gold)',
                  boxShadow: open ? '0 0 12px var(--success)' : '0 0 12px var(--gold)'
                }}></span>
                <span style={{fontSize:12.5,color:'var(--text-dim)',letterSpacing:'0.04em'}}>
                  {open ? 'Şu an aktif · Tüm kanallar açık' : 'Mesai dışı · En kısa sürede dönüyoruz'}
                </span>
              </div>
            );
          })()}
        </div>

        {/* Primary channels grid */}
        <div className="reveal reveal-d2" style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))',gap:18,marginBottom:30}}>
          {channels.map(c=>(
            <a key={c.tag} href={c.href} target={c.href.startsWith('http')?'_blank':undefined} rel={c.href.startsWith('http')?'noopener noreferrer':undefined} className="glass-strong" style={{
              padding:'30px 28px 26px',borderRadius:20,textDecoration:'none',position:'relative',overflow:'hidden',
              display:'flex',flexDirection:'column',gap:18,minHeight:230,transition:'all .4s'
            }}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(212,177,106,0.45)';e.currentTarget.style.transform='translateY(-4px)'}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--line-strong)';e.currentTarget.style.transform='none'}}
            >
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
                <div style={{width:46,height:46,borderRadius:12,background:'rgba(212,177,106,0.1)',border:'1px solid rgba(212,177,106,0.28)',display:'flex',alignItems:'center',justifyContent:'center'}}>
                  {c.I && <c.I size={20} strokeWidth={1.5} style={{color:'var(--gold-2)'}}/>}
                </div>
                <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:'var(--text-mute)',letterSpacing:'0.1em'}}>{c.tag}</span>
              </div>

              <div style={{flex:1}}>
                <div style={{fontSize:11,letterSpacing:'0.2em',textTransform:'uppercase',color:'var(--text-mute)',marginBottom:8}}>{c.label}</div>
                <div className="font-serif" style={{fontSize:24,color:'#fff',letterSpacing:'-0.01em',lineHeight:1.15,marginBottom:8,wordBreak:'break-word'}}>{c.primary}</div>
                <div style={{fontSize:13,color:'var(--text-dim)',lineHeight:1.5}}>{c.sub}</div>
              </div>

              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',paddingTop:14,borderTop:'1px solid var(--line)'}}>
                <span style={{fontSize:13,color:'var(--gold-2)',letterSpacing:'0.02em'}}>{c.action}</span>
                {ArrowUpRight && <ArrowUpRight size={16} style={{color:'var(--gold-2)'}}/>}
              </div>

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

        {/* Address strip */}
        <div className="reveal reveal-d3 glass address-strip" style={{
          borderRadius:22,padding:'30px 32px',
          display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr auto',gap:30,alignItems:'center'
        }}>
          <div style={{display:'flex',alignItems:'flex-start',gap:16}}>
            {MapPin && <MapPin size={22} strokeWidth={1.4} style={{color:'var(--gold-2)',flexShrink:0,marginTop:2}}/>}
            <div>
              <div style={{fontSize:11,letterSpacing:'0.2em',textTransform:'uppercase',color:'var(--text-mute)',marginBottom:6}}>Genel Merkez</div>
              <div style={{color:'#fff',fontSize:15,lineHeight:1.5}}>Merkez Mah. Halaskargazi Cad. Ak Apt. No: 149 A<br/>Şişli / İstanbul</div>
            </div>
          </div>
          <div className="address-strip-divider" style={{display:'flex',alignItems:'flex-start',gap:14,borderLeft:'1px solid var(--line)',paddingLeft:24}}>
            {Clock && <Clock size={20} strokeWidth={1.4} style={{color:'var(--gold-2)',flexShrink:0,marginTop:2}}/>}
            <div>
              <div style={{fontSize:11,letterSpacing:'0.2em',textTransform:'uppercase',color:'var(--text-mute)',marginBottom:6}}>Çalışma Saatleri</div>
              <div style={{color:'#fff',fontSize:14}}>Pzt — Cmt</div>
              <div style={{color:'var(--text-dim)',fontSize:13,marginTop:2,fontFamily:"'JetBrains Mono',monospace"}}>09:00 — 20:00</div>
            </div>
          </div>
          <div className="address-strip-divider" style={{display:'flex',alignItems:'flex-start',gap:14,borderLeft:'1px solid var(--line)',paddingLeft:24}}>
            {Phone && <Phone size={20} strokeWidth={1.4} style={{color:'var(--gold-2)',flexShrink:0,marginTop:2}}/>}
            <div>
              <div style={{fontSize:11,letterSpacing:'0.2em',textTransform:'uppercase',color:'var(--text-mute)',marginBottom:6}}>Direkt Hat</div>
              <div style={{color:'#fff',fontSize:14,fontFamily:"'JetBrains Mono',monospace"}}>+90 212 830 76 39</div>
              <div style={{color:'var(--text-dim)',fontSize:12,marginTop:2}}>Kurumsal Müşteri Temsilcisi</div>
            </div>
          </div>
          <a href="https://www.google.com/maps/dir/?api=1&destination=BPNFX+D%C3%B6viz+%C5%9Ei%C5%9Fli&destination_place_id=0x14cab740a34fa033:0x47f00242b43e116b" target="_blank" rel="noopener noreferrer" className="btn btn-gold" style={{whiteSpace:'nowrap'}}>
            {Navigation && <Navigation size={14}/>} Yol Tarifi
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  const cols = [
    {h:'Şirket',l:[['Hakkımızda','#hakkimizda'],['BPN','https://www.bpn.com.tr/']]},
    {h:'Hizmetler',l:[['Bireysel','#hizmetler'],['Kurumsal','#hizmetler'],['Danışmanlık','#hizmetler'],['Online Görüşme','#hizmetler']]},
  ];

  return (
    <footer style={{position:'relative',marginTop:60,padding:'80px 0 30px',borderTop:'1px solid var(--line)',background:'linear-gradient(180deg, transparent, rgba(0,0,0,0.4))'}}>
      <div className="shimmer-line" style={{position:'absolute',top:-1,left:0,right:0}}></div>
      <div className="container-x">
        <div className="footer-grid" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr',gap:50,marginBottom:60}}>
          <div>
            <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:22}}>
              <div style={{
                width:38,height:38,borderRadius:9,
                background:'linear-gradient(135deg,#f3e0ad,#a8843c)',
                display:'flex',alignItems:'center',justifyContent:'center',
                color:'#1a1304',fontFamily:"'Cormorant Garamond',serif",fontWeight:600,fontSize:22,
              }}>B</div>
              <div className="font-serif" style={{fontSize:26,color:'#fff'}}>Bpnfx</div>
            </div>
            <p style={{fontSize:14,color:'var(--text-dim)',lineHeight:1.6,maxWidth:340,margin:'0 0 18px'}}>
              BPN'in döviz koludur. Hazine ve Maliye Bakanlığı nezdinde yetkili müessese olarak 2025 yılında kurulmuştur.
            </p>
            <div style={{fontSize:11,fontFamily:"'JetBrains Mono',monospace",color:'var(--text-mute)',letterSpacing:'0.05em'}}>
              BPN · 2012 — BPNFX · 2025
            </div>
          </div>

          {cols.map((c,i)=>(
            <div key={i}>
              <div style={{fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color:'var(--gold-2)',marginBottom:18}}>{c.h}</div>
              <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:11}}>
                {c.l.map(([t,h])=>(
                  <li key={t}>
                    <a href={h} target={h.startsWith('http')?'_blank':undefined} rel={h.startsWith('http')?'noopener noreferrer':undefined} style={{color:'var(--text-dim)',fontSize:14,textDecoration:'none',transition:'color .3s'}}
                       onMouseEnter={e=>e.target.style.color='#fff'}
                       onMouseLeave={e=>e.target.style.color='var(--text-dim)'}>{t}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="hairline" style={{marginBottom:24}}></div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:20,flexWrap:'wrap',fontSize:12.5,color:'var(--text-mute)'}}>
          <div>© 2026 Bpnfx · BPN. Tüm hakları saklıdır.</div>
          <a href="https://masterdoviz.com/" target="_blank" rel="noopener noreferrer" style={{color:'var(--text-mute)',textDecoration:'none',transition:'color .3s'}} onMouseEnter={e=>e.target.style.color='var(--gold-2)'} onMouseLeave={e=>e.target.style.color='var(--text-mute)'}>Master Bilgisayar tarafından tasarlanmıştır</a>
        </div>
      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;