/* eslint-disable */
// HAIQ — Nav with bilingual switcher + section dot rail

function Nav({lang, setLang, t, sections, activeIdx, scrollTo}) {
  return (
    <nav style={{
      position:'fixed', top:0, left:0, right:0, zIndex:100,
      padding:'18px 32px',
      display:'flex', alignItems:'center', justifyContent:'space-between',
      background:'rgba(0,0,0,0.55)',
      backdropFilter:'blur(20px)', WebkitBackdropFilter:'blur(20px)',
      borderBottom:'1px solid rgba(255,255,255,0.04)',
    }}>
      <a href="#top" onClick={(e)=>{e.preventDefault(); scrollTo(0);}} style={{
        display:'flex', alignItems:'center', gap:10, textDecoration:'none', color:'#fff',
      }}>
        <span style={{
          width:18, height:18, borderRadius:'50%',
          background:'radial-gradient(circle at 30% 30%, #fff 0%, rgba(255,255,255,0.4) 40%, transparent 70%)',
          opacity:0.7, position:'relative',
        }}>
          <span style={{
            position:'absolute', inset:-3, borderRadius:'50%',
            border:'1px solid rgba(255,255,255,0.25)',
          }}/>
        </span>
        <span style={{
          fontFamily:'var(--font-sans)', fontWeight:700, fontSize:22, letterSpacing:'-0.03em',
        }}>HAIQ.</span>
      </a>

      <div style={{display:'flex', alignItems:'center', gap:32}}>
        {[
          {k:'services', label: t.nav.services, idx: 2, external: false},
          {k:'how', label: t.nav.how, idx: 3, external: false},
          {k:'pricing', label: t.nav.pricing, idx: 6, external: false},
          {k:'blog', label: t.nav.blog, idx: -1, external: true, href: `/${lang}/blog`},
          {k:'about', label: t.nav.about, idx: 7, external: false},
        ].map(item => (
          <a key={item.k} href={item.external ? item.href : `#${item.k}`}
            onClick={item.external ? undefined : (e)=>{e.preventDefault(); scrollTo(item.idx);}}
            style={{
              fontFamily:'var(--font-sans)', fontSize:13, fontWeight:500,
              color:'#D4D4D8', textDecoration:'none',
              letterSpacing:'0.02em',
              transition:'color 0.3s ease',
            }}
            onMouseEnter={e=>e.currentTarget.style.color='#FAFAFA'}
            onMouseLeave={e=>e.currentTarget.style.color='#D4D4D8'}
          >{item.label}</a>
        ))}
      </div>

      <div style={{display:'flex', alignItems:'center', gap:18}}>
        <div style={{
          display:'flex', alignItems:'center', gap:8,
          fontFamily:'var(--font-sans)', fontSize:12, fontWeight:500,
        }}>
          <button onClick={()=>setLang('ua')} style={{
            background:'none', border:'none', cursor:'pointer', padding:'4px 2px',
            color: lang==='ua' ? '#fff' : 'rgba(255,255,255,0.35)',
            borderBottom: lang==='ua' ? '1px solid #fff' : '1px solid transparent',
            letterSpacing:'0.1em', transition:'all 0.3s ease',
          }}>UA</button>
          <span style={{color:'rgba(255,255,255,0.2)'}}>·</span>
          <button onClick={()=>setLang('en')} style={{
            background:'none', border:'none', cursor:'pointer', padding:'4px 2px',
            color: lang==='en' ? '#fff' : 'rgba(255,255,255,0.35)',
            borderBottom: lang==='en' ? '1px solid #fff' : '1px solid transparent',
            letterSpacing:'0.1em', transition:'all 0.3s ease',
          }}>EN</button>
        </div>

        <button onClick={() => window.openContactModal('nav-cta')} className="btn-pill" style={{
          background:'#FAFAFA', color:'#09090B', borderColor:'#FAFAFA',
          padding:'10px 22px', fontSize:13,
        }}>{t.nav.cta} <span>›</span></button>
      </div>
    </nav>
  );
}

// Right-side dot rail tracking active section
function SectionRail({sections, activeIdx, scrollTo}) {
  return (
    <div style={{
      position:'fixed', right:24, top:'50%', transform:'translateY(-50%)',
      zIndex:90,
      display:'flex', flexDirection:'column', alignItems:'center', gap:12,
    }}>
      {sections.map((s, i) => (
        <button key={i} onClick={()=>scrollTo(i)} aria-label={s}
          style={{
            width:8, height:8, padding:0,
            borderRadius:'50%', cursor:'pointer',
            border:'1px solid rgba(255,255,255,0.3)',
            background: activeIdx===i ? '#fff' : 'transparent',
            transform: activeIdx===i ? 'scale(1.4)' : 'scale(1)',
            boxShadow: activeIdx===i ? '0 0 12px rgba(255,255,255,0.6)' : 'none',
            transition:'all 0.3s cubic-bezier(0.16,1,0.3,1)',
          }}/>
      ))}
      <div style={{
        marginTop:14, writingMode:'vertical-rl', transform:'rotate(180deg)',
        fontFamily:'var(--font-sans)', fontSize:10, letterSpacing:'0.4em',
        textTransform:'uppercase', color:'rgba(255,255,255,0.35)',
      }}>
        {String(activeIdx+1).padStart(3,'0')} — {String(sections.length).padStart(3,'0')}
      </div>
    </div>
  );
}

Object.assign(window, {Nav, SectionRail});