// Shared: Nav + Footer used on every page

const { Container, Btn, Eyebrow } = window.Primitives;
const { SLogoImg, ArrowRight } = window.Icons;

const NAV_ITEMS = [
  { href: 'Socializare.html', label: 'Home', key: 'home' },
  { href: '/about', label: 'About', key: 'about' },
  { href: '/services', label: 'Services', key: 'services' },
  { href: '/experience', label: 'Work', key: 'experience' },
  { href: '/contact', label: 'Contact', key: 'contact' },
];

const Nav = ({active='home'}) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(()=>{
    const onScroll = ()=> setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return ()=> window.removeEventListener('scroll', onScroll);
  },[]);
  // Lock body scroll when fullscreen menu is open
  React.useEffect(()=>{
    if (menuOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return ()=> { document.body.style.overflow = prev; };
    }
  }, [menuOpen]);
  // Close menu on Escape
  React.useEffect(()=>{
    if (!menuOpen) return;
    const onKey = (e)=> { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return ()=> window.removeEventListener('keydown', onKey);
  }, [menuOpen]);
  return (
    <div style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'rgba(15,13,23,0.55)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition:'all .3s ease',
    }}>
      <Container style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding: scrolled ? '10px 40px' : '18px 40px', transition:'padding .3s ease'}}>
        <a href="Socializare.html" style={{display:'flex', alignItems:'center', gap:10, textDecoration:'none', color:'var(--fg)', transition:'transform .3s ease', position:'relative', zIndex: 101}}>
          <SLogoImg size={scrolled ? 44 : 57}/>
        </a>
        <nav className="nav-links" style={{display:'flex', gap:34, fontSize:13.5, color:'var(--fg-2)'}}>
          {NAV_ITEMS.filter(n=>n.key!=='home').map(n=>(
            <a key={n.key} className={`link-underline ${active===n.key?'active':''}`}
               href={n.href} style={{color: active===n.key ? 'var(--fg)' : 'var(--fg-2)'}}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="nav-cta" style={{display:'flex', gap:14, alignItems:'center'}}>
          <Btn variant="ghost" size="sm" href="/contact">Get in touch</Btn>
        </div>
        <button
          className="nav-burger"
          onClick={()=>setMenuOpen(o=>!o)}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          style={{
            display:'none', background:'transparent', border:'1px solid var(--line-strong)',
            color:'var(--fg)', width:44, height:44, borderRadius:99, padding:0,
            alignItems:'center', justifyContent:'center', cursor:'pointer',
            position:'relative', zIndex: 101,
          }}>
          <div style={{display:'flex', flexDirection:'column', gap:5, width:16}}>
            <span style={{height:1.5, background:'var(--fg)', transform: menuOpen?'translateY(3.5px) rotate(45deg)':'none', transition:'transform .25s'}}/>
            <span style={{height:1.5, background:'var(--fg)', opacity: menuOpen?0:1, transition:'opacity .2s'}}/>
            <span style={{height:1.5, background:'var(--fg)', transform: menuOpen?'translateY(-3.5px) rotate(-45deg)':'none', transition:'transform .25s'}}/>
          </div>
        </button>
      </Container>

      {/* Full-screen mobile menu */}
      <div
        className="nav-fullscreen"
        aria-hidden={!menuOpen}
        style={{
          position:'fixed', inset:0, zIndex:100,
          background:'rgba(15,13,23,0.97)',
          backdropFilter:'blur(28px) saturate(140%)',
          WebkitBackdropFilter:'blur(28px) saturate(140%)',
          opacity: menuOpen ? 1 : 0,
          visibility: menuOpen ? 'visible' : 'hidden',
          transition:'opacity .35s cubic-bezier(.2,.8,.2,1), visibility .35s',
          display:'none', // gets flipped to flex via CSS @media — mobile only
          flexDirection:'column',
        }}>
        {/* Subtle brand wash */}
        <div style={{position:'absolute', inset:0, pointerEvents:'none',
          background:'radial-gradient(ellipse at 10% 110%, rgba(255,127,181,0.18) 0%, transparent 55%), radial-gradient(ellipse at 90% -10%, rgba(138,107,255,0.18) 0%, transparent 55%)'}}/>
        {/* Centered nav stack — items only, fully centered */}
        <div style={{
          flex:1,
          display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center',
          padding:'80px 32px',
          gap:6, position:'relative',
        }}>
          {NAV_ITEMS.filter(n=>n.key!=='home').map((n, i)=>(
            <a key={n.key} href={n.href}
               onClick={()=>setMenuOpen(false)}
               style={{
                 color: active===n.key ? 'var(--fg)' : 'var(--fg-2)',
                 fontSize: 44, lineHeight: 1.25,
                 padding:'14px 0',
                 textDecoration:'none', letterSpacing:'-0.025em',
                 fontWeight: 500,
                 textAlign:'center',
                 opacity: menuOpen ? 1 : 0,
                 transform: menuOpen ? 'translateY(0)' : 'translateY(12px)',
                 transition: `opacity .45s cubic-bezier(.2,.8,.2,1) ${0.1 + i*0.06}s, transform .45s cubic-bezier(.2,.8,.2,1) ${0.1 + i*0.06}s`,
               }}>
              {n.label}
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};

const Footer = () => (
  <footer style={{padding:'72px 0 28px', background:'var(--bg)', borderTop:'1px solid var(--line)'}}>
    <Container>
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48, paddingBottom:48}}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:18}}>
            <SLogoImg size={32}/>
            <span style={{fontWeight:500, fontSize:18, letterSpacing:'-0.01em'}}>Socializare</span>
          </div>
          <p style={{fontSize:14, lineHeight:1.6, color:'var(--fg-2)', maxWidth:340, margin:0}}>
            Influencer marketing and strategic communication for brands building presence in India.
          </p>
          <div className="mono" style={{marginTop:22, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)'}}>
            Mumbai · India
          </div>
        </div>
        <FooterCol head="Pages" items={[
          ['About','/about'],['Services','/services'],
          ['Work','/experience'],['Contact','/contact']
        ]}/>
        <FooterCol head="Services" items={[
          ['Influencer Marketing','/services#influencer-marketing'],
          ['Strategic Communication','/services#strategic-communication']
        ]}/>
        <FooterCol head="Connect" items={[
          ['LinkedIn','https://www.linkedin.com/company/socializare/'],['Instagram','https://www.instagram.com/socializare_/'],
          ['business@socializare.in','mailto:business@socializare.in'],
          ['+91 8454060173','https://wa.me/918454060173']
        ]}/>
      </div>
      <div style={{
        borderTop:'1px solid var(--line)', paddingTop:24,
        display:'flex', justifyContent:'space-between', alignItems:'center',
        gap:18, flexWrap:'wrap',
        fontSize:13.5, color:'var(--fg-2)'
      }}>
        <span className="mono" style={{letterSpacing:'0.10em', fontSize:12.5, color:'var(--fg-2)'}}>© 2024 Socializare. All rights reserved.</span>
        <span className="editorial-italic" style={{fontSize:15, color:'var(--fg-2)', letterSpacing:'-0.005em', lineHeight:1.4}}>Brands, in conversation with India.</span>
      </div>
    </Container>
  </footer>
);

const FooterCol = ({head, items}) => (
  <div>
    <div className="mono" style={{fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:22, fontWeight:500}}>{head}</div>
    <div style={{display:'flex', flexDirection:'column', gap:13}}>
      {items.map(([label,href],i)=>{
        const external = /^https?:\/\//.test(href);
        return (
          <a key={i} href={href} className="link-underline"
             target={external ? '_blank' : undefined}
             rel={external ? 'noopener noreferrer' : undefined}
             style={{color:'var(--fg-2)', fontSize:13, fontWeight:400, letterSpacing:'-0.005em', lineHeight:1.4}}>{label}</a>
        );
      })}
    </div>
  </div>
);

window.Shared = { Nav, Footer };