// Hero — animated network-globe + gold particles
const { useEffect, useRef } = React;

function HeroCanvas(){
  const ref = useRef(null);
  useEffect(()=>{
    const canvas = ref.current;
    const ctx = canvas.getContext('2d');
    let w=0,h=0,raf;
    const dpr = Math.min(window.devicePixelRatio||1, 2);

    // network nodes positioned roughly along a globe projection
    const N = 70;
    const nodes = Array.from({length:N},(_,i)=>{
      // distribute on sphere then project
      const phi = Math.acos(1 - 2*(i+0.5)/N);
      const theta = Math.PI*(1+Math.sqrt(5))*i;
      const x = Math.sin(phi)*Math.cos(theta);
      const y = Math.sin(phi)*Math.sin(theta);
      const z = Math.cos(phi);
      return {x,y,z, baseX:x, baseY:y, baseZ:z, pulse:Math.random()*Math.PI*2};
    });

    // floating particles
    const P = 60;
    const parts = Array.from({length:P},()=>({
      x:Math.random(), y:Math.random(),
      vx:(Math.random()-0.5)*0.0006, vy:(Math.random()-0.5)*0.0004,
      r:Math.random()*1.6+0.4, a:Math.random()*0.5+0.2,
    }));

    let t=0;
    let mouseX=0,mouseY=0;
    const onMouse = (e)=>{
      const rect = canvas.getBoundingClientRect();
      mouseX = ((e.clientX-rect.left)/rect.width-0.5)*2;
      mouseY = ((e.clientY-rect.top)/rect.height-0.5)*2;
    };
    window.addEventListener('mousemove',onMouse);

    const resize = ()=>{
      const rect = canvas.getBoundingClientRect();
      w = rect.width; h = rect.height;
      canvas.width = w*dpr; canvas.height = h*dpr;
      ctx.setTransform(dpr,0,0,dpr,0,0);
    };
    resize();
    window.addEventListener('resize',resize);

    const draw = ()=>{
      t+=0.004;
      ctx.clearRect(0,0,w,h);

      const cx = w*0.62, cy = h*0.52;
      const R = Math.min(w,h)*0.42;

      // rotate
      const ry = t*0.6 + mouseX*0.4;
      const rx = -0.25 + mouseY*0.2;
      const cosY=Math.cos(ry), sinY=Math.sin(ry);
      const cosX=Math.cos(rx), sinX=Math.sin(rx);

      // soft globe halo
      const grad = ctx.createRadialGradient(cx,cy,R*0.2,cx,cy,R*1.4);
      grad.addColorStop(0,'rgba(212,177,106,0.10)');
      grad.addColorStop(0.5,'rgba(60,90,180,0.06)');
      grad.addColorStop(1,'rgba(0,0,0,0)');
      ctx.fillStyle = grad;
      ctx.beginPath();ctx.arc(cx,cy,R*1.4,0,Math.PI*2);ctx.fill();

      // outer ring
      ctx.strokeStyle='rgba(212,177,106,0.18)';
      ctx.lineWidth=1;
      ctx.beginPath();ctx.arc(cx,cy,R,0,Math.PI*2);ctx.stroke();
      ctx.strokeStyle='rgba(212,177,106,0.08)';
      ctx.beginPath();ctx.arc(cx,cy,R*1.06,0,Math.PI*2);ctx.stroke();

      // project nodes
      const proj = nodes.map(n=>{
        // rotate Y
        let x = n.baseX*cosY + n.baseZ*sinY;
        let z = -n.baseX*sinY + n.baseZ*cosY;
        let y = n.baseY;
        // rotate X
        const y2 = y*cosX - z*sinX;
        const z2 = y*sinX + z*cosX;
        return {x:cx + x*R, y:cy + y2*R, z:z2, depth:(z2+1)/2};
      });

      // connection lines
      for(let i=0;i<proj.length;i++){
        for(let j=i+1;j<proj.length;j++){
          const a=proj[i], b=proj[j];
          if(a.z<-0.1 || b.z<-0.1) continue;
          const dx=a.x-b.x, dy=a.y-b.y;
          const d = Math.sqrt(dx*dx+dy*dy);
          if(d<R*0.36){
            const alpha = (1 - d/(R*0.36)) * 0.35 * Math.min(a.depth,b.depth);
            ctx.strokeStyle = `rgba(212,177,106,${alpha*0.7})`;
            ctx.lineWidth = 0.6;
            ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();
          }
        }
      }

      // moving signal arcs (data flow)
      for(let i=0;i<6;i++){
        const idxA = (Math.floor(t*8 + i*11)) % proj.length;
        const idxB = (idxA + 7 + i*3) % proj.length;
        const a=proj[idxA], b=proj[idxB];
        if(!a||!b||a.z<0||b.z<0) continue;
        const phase = (t*1.5 + i*0.3) % 1;
        const px = a.x + (b.x-a.x)*phase;
        const py = a.y + (b.y-a.y)*phase - Math.sin(phase*Math.PI)*30;
        const g = ctx.createRadialGradient(px,py,0,px,py,8);
        g.addColorStop(0,'rgba(248,220,150,0.95)');
        g.addColorStop(1,'rgba(248,220,150,0)');
        ctx.fillStyle=g;
        ctx.beginPath();ctx.arc(px,py,8,0,Math.PI*2);ctx.fill();
      }

      // nodes
      proj.forEach((p,i)=>{
        const pulse = 0.5 + Math.sin(t*2 + nodes[i].pulse)*0.5;
        const size = 1.2 + p.depth*1.6 + pulse*0.4;
        ctx.fillStyle = `rgba(232,207,148,${0.35 + p.depth*0.55})`;
        ctx.beginPath();ctx.arc(p.x,p.y,size,0,Math.PI*2);ctx.fill();
        if(p.depth>0.7){
          ctx.fillStyle = `rgba(255,235,180,${0.15*pulse})`;
          ctx.beginPath();ctx.arc(p.x,p.y,size*4,0,Math.PI*2);ctx.fill();
        }
      });

      // ambient particles
      parts.forEach(pt=>{
        pt.x += pt.vx; pt.y += pt.vy;
        if(pt.x<0)pt.x=1;if(pt.x>1)pt.x=0;
        if(pt.y<0)pt.y=1;if(pt.y>1)pt.y=0;
        const px = pt.x*w, py = pt.y*h;
        ctx.fillStyle = `rgba(212,177,106,${pt.a*0.5})`;
        ctx.beginPath();ctx.arc(px,py,pt.r,0,Math.PI*2);ctx.fill();
      });

      raf = requestAnimationFrame(draw);
    };
    draw();

    return ()=>{
      cancelAnimationFrame(raf);
      window.removeEventListener('resize',resize);
      window.removeEventListener('mousemove',onMouse);
    };
  },[]);

  return <canvas ref={ref} className="hero-canvas" />;
}

function Hero(){
  const { ChevronRight, ShieldCheck, Award, Building2 } = window.LucideReact || {};

  return (
    <section className="relative overflow-hidden grain" style={{minHeight:'100vh'}} data-screen-label="Hero">
      <div className="absolute inset-0 bg-grain"></div>
      <HeroCanvas/>

      {/* meridian decorative lines */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{opacity:0.18}}>
        <defs>
          <linearGradient id="merid" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="rgba(212,177,106,0)"/>
            <stop offset="50%" stopColor="rgba(212,177,106,0.5)"/>
            <stop offset="100%" stopColor="rgba(212,177,106,0)"/>
          </linearGradient>
        </defs>
        <line x1="14%" y1="0" x2="14%" y2="100%" stroke="url(#merid)" strokeWidth="1"/>
        <line x1="86%" y1="0" x2="86%" y2="100%" stroke="url(#merid)" strokeWidth="1"/>
      </svg>

      <div className="container-x relative hero-content-pad" style={{paddingTop:140, paddingBottom:120}}>
        <div className="reveal in" style={{maxWidth:760}}>
          <div className="eyebrow mb-6"><span className="dot"></span>Yetkili Müessese · BPN · 2012'den beri</div>
        </div>

        <h1 className="font-serif serif-display reveal in reveal-d2"
            style={{fontSize:'clamp(56px, 8.6vw, 124px)',lineHeight:0.98,letterSpacing:'-0.025em',margin:'18px 0 0', maxWidth:1100}}>
          <span style={{color:'#eef2fb'}}>Finansta</span><br/>
          <span className="gold-text">Güvenin</span> <span style={{color:'#eef2fb',fontStyle:'italic',fontWeight:400}}>Adresi.</span>
        </h1>

        <p className="reveal in reveal-d3" style={{maxWidth:580,marginTop:32,fontSize:18,lineHeight:1.55,color:'var(--text-dim)'}}>
          Bpnfx, BPN'in 2012'den bu yana inşa ettiği kurumsal birikimi döviz hizmetlerine taşıyan yetkili müessesedir. Genç bir marka, köklü bir disiplin.
        </p>

        <div className="reveal in reveal-d4 flex flex-wrap" style={{gap:14,marginTop:42}}>
          <a href="#subeler" className="btn btn-gold">
            Şubelerimizi Keşfedin
            {ChevronRight && <ChevronRight size={16}/>}
          </a>
          <a href="#iletisim" className="btn btn-ghost">
            Kurumsal Çözümler
          </a>
        </div>

        {/* trust strip */}
        <div className="reveal in reveal-d5 glass hero-trust" style={{
          marginTop:80,padding:'22px 28px',borderRadius:18,maxWidth:780,
          display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24
        }}>
          {[
            {n:'2012',l:'BPN Kuruluş',I:Award},
            {n:'2025',l:'Bpnfx Kuruluş',I:ShieldCheck},
            {n:'2',l:'İstanbul Lokasyon',I:Building2},
          ].map(({n,l,I},i)=>(
            <div key={i} style={{display:'flex',alignItems:'center',gap:14}}>
              {I && <I size={22} style={{color:'var(--gold)'}} strokeWidth={1.5}/>}
              <div>
                <div className="font-serif" style={{fontSize:28,lineHeight:1,color:'#fff'}}>{n}</div>
                <div style={{fontSize:11.5,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--text-mute)',marginTop:6}}>{l}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* scroll cue */}
      <div className="absolute" style={{left:'50%',bottom:34,transform:'translateX(-50%)',opacity:0.55,fontSize:10,letterSpacing:'0.3em',textTransform:'uppercase',color:'var(--text-dim)'}}>
        <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:10}}>
          <span>Keşfet</span>
          <div style={{width:1,height:34,background:'linear-gradient(180deg, var(--gold), transparent)'}}></div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;