const {Logo, Button, Icon, IconButton} = window.SuperiorNitrogenServiceDesignSystem_483eb9;

function scrollToId(id){
  const el=document.getElementById(id);
  if(el) window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-84,behavior:'smooth'});
}

function useViewport(){
  const [w,setW]=React.useState(typeof window!=='undefined'?window.innerWidth:1280);
  React.useEffect(()=>{
    const onResize=()=>setW(window.innerWidth);
    window.addEventListener('resize',onResize,{passive:true});
    return ()=>window.removeEventListener('resize',onResize);
  },[]);
  return w;
}

function LangToggle({lang,setLang,onDark=true}){
  return (
    <div style={{display:'inline-flex',border:`1px solid ${onDark?'rgba(255,255,255,.28)':'var(--border-default)'}`,borderRadius:'var(--radius-md)',overflow:'hidden'}}>
      {['en','fr'].map(l=>(
        <button key={l} onClick={()=>setLang(l)} style={{all:'unset',cursor:'pointer',padding:'5px 11px',fontFamily:'var(--font-display)',fontSize:11,fontWeight:700,letterSpacing:'.12em',textTransform:'uppercase',background:lang===l?(onDark?'var(--white)':'var(--navy-900)'):'transparent',color:lang===l?(onDark?'var(--navy-900)':'var(--white)'):(onDark?'rgba(255,255,255,.7)':'var(--text-muted)'),transition:'var(--transition-control)'}}>{l}</button>
      ))}
    </div>
  );
}

function SiteHeader({t,lang,setLang,active}) {
  const C=window.SNS_CONTACT;
  const w=useViewport();
  const isMobile=w<=980;
  const px=w<=480?20:w<=980?28:50;
  const [menuOpen,setMenuOpen]=React.useState(false);
  const [scrolled,setScrolled]=React.useState(false);
  React.useEffect(()=>{ if(!isMobile) setMenuOpen(false) },[isMobile]);
  React.useEffect(()=>{
    const onScroll=()=>setScrolled(window.scrollY>10);
    window.addEventListener('scroll',onScroll,{passive:true});
    onScroll();
    return ()=>window.removeEventListener('scroll',onScroll);
  },[]);
  return (
    <header style={{position:'sticky',top:0,zIndex:30,background:scrolled?'var(--navy-950)':'var(--navy-900)',borderBottom:scrolled?'1px solid rgba(255,255,255,.16)':'1px solid rgba(255,255,255,.10)',boxShadow:scrolled?'0 8px 20px rgba(3,0,43,.35)':'none',transition:'background-color .3s ease,box-shadow .3s ease,border-color .3s ease'}}>
      <div style={{background:'var(--navy-950)',color:'var(--text-inverse-muted)',fontSize:12}}>
        <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`8px ${px}px`,display:'grid',gridTemplateColumns:isMobile?'1fr':'1fr auto 1fr',alignItems:'center',gap:isMobile?10:24,justifyItems:isMobile?'center':'stretch'}}>
          {!isMobile && <span/>}
          <div style={{display:'flex',gap:24,alignItems:'center',justifyContent:'center',flexWrap:'wrap'}}>
            <a href={C.telHref} style={{border:'none',color:'inherit',display:'inline-flex',alignItems:'center',gap:8}}><Icon name="phone" size={13} color="var(--orange-500)"/><span style={{fontFamily:'var(--font-mono)'}}>{C.tel}</span></a>
            <a href={'mailto:'+C.mail} style={{border:'none',color:'inherit',display:'inline-flex',alignItems:'center',gap:8}}><Icon name="mail" size={13} color="var(--orange-500)"/>{C.mail}</a>
          </div>
          {!isMobile && <span style={{justifySelf:'end',fontFamily:'var(--font-display)',fontSize:11,fontWeight:700,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--orange-500)'}}>{t.utilTag}</span>}
        </div>
      </div>
      <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`0 ${px}px`,height:isMobile?68:84,display:'flex',alignItems:'center',gap:24}}>
        <a href="#top" onClick={e=>{e.preventDefault();window.scrollTo({top:0,behavior:'smooth'});setMenuOpen(false)}} style={{border:'none',display:'flex'}}><Logo color="white" height={isMobile?48:70}/></a>
        {!isMobile && (
          <>
            <nav style={{display:'flex',gap:30,marginLeft:'auto'}}>
              {t.nav.map(([id,label])=>(
                <a key={id} href={'#'+id} onClick={e=>{e.preventDefault();scrollToId(id)}} style={{border:'none',fontFamily:'var(--font-display)',fontSize:13,fontWeight:700,letterSpacing:'.06em',textTransform:'uppercase',color:active===id?'var(--white)':'rgba(255,255,255,.66)',borderBottom:`3px solid ${active===id?'var(--orange-600)':'transparent'}`,paddingBottom:4}}>{label}</a>
              ))}
            </nav>
            <LangToggle lang={lang} setLang={setLang}/>
            <Button size="md" onClick={()=>scrollToId('contact')} iconRight={<Icon name="arrow-right" size={16}/>}>{t.cta}</Button>
          </>
        )}
        {isMobile && (
          <div style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:12}}>
            <LangToggle lang={lang} setLang={setLang}/>
            <IconButton icon={menuOpen?'x':'menu'} label="Menu" variant="outline" size="md" onClick={()=>setMenuOpen(o=>!o)} style={{background:'transparent',borderColor:'rgba(255,255,255,.35)',color:'var(--white)'}}/>
          </div>
        )}
      </div>
      {isMobile && menuOpen && (
        <div style={{background:'var(--navy-950)',borderTop:'1px solid rgba(255,255,255,.10)',padding:`16px ${px}px 24px`,display:'flex',flexDirection:'column',gap:4}}>
          {t.nav.map(([id,label])=>(
            <a key={id} href={'#'+id} onClick={e=>{e.preventDefault();scrollToId(id);setMenuOpen(false)}} style={{border:'none',padding:'12px 0',fontFamily:'var(--font-display)',fontSize:14,fontWeight:700,letterSpacing:'.06em',textTransform:'uppercase',color:active===id?'var(--white)':'rgba(255,255,255,.66)',borderBottom:'1px solid rgba(255,255,255,.08)'}}>{label}</a>
          ))}
          <Button size="md" fullWidth onClick={()=>{scrollToId('contact');setMenuOpen(false)}} iconRight={<Icon name="arrow-right" size={16}/>} style={{marginTop:16}}>{t.cta}</Button>
        </div>
      )}
    </header>
  );
}

function SiteFooter({t}) {
  const C=window.SNS_CONTACT;
  const w=useViewport();
  const isMobile=w<=760;
  const isTablet=w<=1024;
  const px=w<=480?20:w<=980?28:50;
  return (
    <footer style={{background:'var(--navy-950)',padding:'56px 0 28px'}}>
      <div style={{maxWidth:'var(--max-width)',margin:'0 auto',padding:`0 ${px}px`,display:'grid',gridTemplateColumns:isMobile?'1fr':isTablet?'1fr 1fr':'2fr 1fr 1fr 1.4fr',gap:40}}>
        <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:16,gridColumn:isMobile?'auto':isTablet?'span 2':'auto'}}>
          <img src="./assets/logos/mark-white-sm.png" alt="Superior Nitrogen Service" style={{height:44,width:'auto',display:'block'}}/>
          <p style={{fontSize:14,lineHeight:1.7,color:'var(--text-inverse-muted)',maxWidth:330}}>{t.footerBlurb}</p>
        </div>
        {t.footerCols.map(([title,items])=>(
          <div key={title} style={{display:'flex',flexDirection:'column',gap:12}}>
            <span style={{fontFamily:'var(--font-display)',fontSize:12,letterSpacing:'.16em',textTransform:'uppercase',fontWeight:700,color:'var(--orange-500)'}}>{title}</span>
            {items.map(i=>(<a key={i} href="#" onClick={e=>e.preventDefault()} style={{border:'none',fontSize:14,color:'var(--text-inverse-muted)'}}>{i}</a>))}
          </div>
        ))}
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <span style={{fontFamily:'var(--font-display)',fontSize:12,letterSpacing:'.16em',textTransform:'uppercase',fontWeight:700,color:'var(--orange-500)'}}>{t.dispatch}</span>
          <a href={C.telHref} style={{border:'none',fontFamily:'var(--font-mono)',fontSize:18,color:'var(--white)'}}>{C.tel}</a>
          <a href={'mailto:'+C.mail} style={{border:'none',fontSize:14,color:'var(--text-inverse-muted)'}}>{C.mail}</a>
          <span style={{fontSize:14,color:'var(--text-inverse-muted)'}}>{t.region}</span>
          <div style={{display:'flex',gap:8,marginTop:6}}>
            <IconButton icon="phone" label={t.tel} variant="accent" size="sm"/>
            <IconButton icon="mail" label={t.mail} variant="solid" size="sm"/>
          </div>
        </div>
      </div>
      <div style={{maxWidth:'var(--max-width)',margin:'32px auto 0',padding:`20px ${px}px 0`,borderTop:'1px solid rgba(255,255,255,.12)',display:'flex',flexWrap:'wrap',gap:12,fontSize:12,color:'rgba(255,255,255,.5)'}}>
        <span>{t.rights}</span>
        <span style={{marginLeft:isMobile?0:'auto'}}>superiorn2.com</span>
      </div>
    </footer>
  );
}

Object.assign(window, {SiteHeader, SiteFooter, LangToggle, scrollToId, useViewport});
