/* A&M World — Shared Header + Footer (unified theme) */
const { useState, useEffect, useRef, useMemo } = React;

window.AM_NAV = [
  { id:'home',   label:'Home',         href:'index.html' },
  { id:'kits',   label:'Kits',         href:'index.html#kits' },
  { id:'skills', label:'Skills Guide', href:'skills-guide.html' },
  { id:'about',  label:'About',        href:'about.html' },
];

window.AM_WA = 'https://wa.me/919456815951?text=Hi%20I%20want%20to%20explore%20A%26M%20skill%20kits';

function AMLogo({ light }) {
  const fg = light ? '#FDFCF8' : '#1A1A1A';
  const bg = light ? '#FDFCF8' : '#1A1A1A';
  const ic = light ? '#1A1A1A' : '#FDFCF8';
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
      <span style={{ width:30, height:30, borderRadius:'50%', background:bg, color:ic, display:'grid', placeItems:'center', fontFamily:'Instrument Serif', fontSize:18, lineHeight:1, paddingBottom:2 }}>A</span>
      <span style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:15, letterSpacing:'-0.02em', color:fg }}>
        A&amp;M <span style={{ fontWeight:400, fontStyle:'italic', fontFamily:'Instrument Serif', fontSize:18 }}>world</span>
      </span>
    </div>
  );
}

function AMHeader({ active = 'home' }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);

  useEffect(() => {
    if (mobileOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [mobileOpen]);

  return (
    <>
      <header style={{
        position:'fixed', top:0, left:0, right:0, zIndex:100,
        padding:'0 clamp(20px,4vw,52px)', height:68,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        background: scrolled ? 'rgba(253,252,248,0.92)' : 'transparent',
        backdropFilter: scrolled ? 'blur(14px) saturate(1.3)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(1.3)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(26,26,26,0.06)' : '1px solid transparent',
        boxShadow: scrolled ? '0 1px 0 rgba(26,26,26,0.02)' : 'none',
        transition:'all 0.3s ease',
      }}>
        <a href="index.html" aria-label="A&M World home"><AMLogo /></a>

        <nav className="am-nav-desktop" style={{ display:'flex', alignItems:'center', gap:30 }}>
          {window.AM_NAV.map(l => {
            const on = l.id === active;
            return (
              <a key={l.id} href={l.href} style={{
                color: on ? '#1A1A1A' : '#6B6B6B',
                fontSize:14, fontWeight: on ? 700 : 500,
                fontFamily:'Plus Jakarta Sans',
                position:'relative', paddingBottom:2,
                borderBottom: on ? '1.5px solid #C45B3A' : '1.5px solid transparent',
              }}>{l.label}</a>
            );
          })}
          <a href={window.AM_WA} target="_blank" rel="noopener" style={{
            background:'#1A1A1A', color:'#FDFCF8',
            padding:'10px 18px', borderRadius:100,
            fontSize:13, fontWeight:600, fontFamily:'Plus Jakarta Sans',
            display:'inline-flex', alignItems:'center', gap:6, whiteSpace:'nowrap',
          }}>Order on WhatsApp <span aria-hidden>→</span></a>
        </nav>

        {/* Mobile hamburger */}
        <button className="am-nav-mobile-toggle" onClick={()=>setMobileOpen(o=>!o)} aria-label="Menu" style={{
          display:'none', background:'transparent', border:'none', cursor:'pointer',
          width:36, height:36, padding:0, position:'relative',
        }}>
          <span style={{ position:'absolute', left:8, right:8, height:1.5, background:'#1A1A1A', top: mobileOpen ? 17.25 : 12, transform: mobileOpen ? 'rotate(45deg)' : 'none', transition:'all 0.2s' }}/>
          <span style={{ position:'absolute', left:8, right:8, height:1.5, background:'#1A1A1A', top:17.25, opacity: mobileOpen ? 0 : 1, transition:'opacity 0.2s' }}/>
          <span style={{ position:'absolute', left:8, right:8, height:1.5, background:'#1A1A1A', top: mobileOpen ? 17.25 : 22.5, transform: mobileOpen ? 'rotate(-45deg)' : 'none', transition:'all 0.2s' }}/>
        </button>
      </header>

      {/* Mobile menu */}
      {mobileOpen && (
        <div onClick={()=>setMobileOpen(false)} style={{
          position:'fixed', inset:'68px 0 0 0', zIndex:99,
          background:'rgba(253,252,248,0.98)', backdropFilter:'blur(10px)',
          padding:'40px clamp(20px,4vw,52px)',
          animation:'fadeIn 0.2s ease',
        }}>
          <nav style={{ display:'flex', flexDirection:'column', gap:6 }} onClick={e=>e.stopPropagation()}>
            {window.AM_NAV.map(l => {
              const on = l.id === active;
              return (
                <a key={l.id} href={l.href} style={{
                  fontFamily:'Instrument Serif', fontSize:36, lineHeight:1.2,
                  color: on ? '#C45B3A' : '#1A1A1A',
                  fontStyle: on ? 'italic' : 'normal',
                  padding:'12px 0', borderBottom:'1px solid rgba(26,26,26,0.08)',
                }}>{l.label}</a>
              );
            })}
            <a href={window.AM_WA} target="_blank" rel="noopener" style={{
              marginTop:24, background:'#1A1A1A', color:'#FDFCF8',
              padding:'16px 24px', borderRadius:100, textAlign:'center',
              fontFamily:'Plus Jakarta Sans', fontWeight:600, fontSize:15,
            }}>Order on WhatsApp →</a>
          </nav>
        </div>
      )}
    </>
  );
}

function AMFooter({ page = 'home' }) {
  return (
    <footer style={{ background:'#1A1A1A', color:'#FDFCF8', padding:'80px clamp(20px,4vw,52px) 32px' }}>
      <div style={{ maxWidth:1200, margin:'0 auto' }}>
        <div className="am-footer-grid" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1.2fr', gap:60, marginBottom:60 }}>
          {/* Brand */}
          <div>
            <AMLogo light />
            <div style={{ fontFamily:'Instrument Serif', fontSize:32, fontStyle:'italic', lineHeight:1.1, color:'#FDFCF8', marginTop:24, marginBottom:18, letterSpacing:'-0.01em' }}>
              For better<br/>moments.
            </div>
            <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:14, color:'rgba(253,252,248,0.6)', lineHeight:1.6, maxWidth:300, marginBottom:18 }}>
              Building future-ready skills through play. Premium wooden toys, mapped to the skills your child actually needs.
            </p>
            <a href="https://www.amworld.in" style={{ fontFamily:'Plus Jakarta Sans', fontSize:14, color:'#FDFCF8', fontWeight:500, borderBottom:'1px solid rgba(253,252,248,0.3)', paddingBottom:2 }}>www.amworld.in</a>
          </div>

          {/* Nav */}
          <div>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:11, color:'rgba(253,252,248,0.5)', textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:600, marginBottom:22 }}>Explore</div>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {window.AM_NAV.map(l => (
                <a key={l.id} href={l.href} style={{ fontFamily:'Plus Jakarta Sans', fontSize:15, color:'#FDFCF8', fontWeight:500 }}>{l.label}</a>
              ))}
            </div>
          </div>

          {/* Contact */}
          <div>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:11, color:'rgba(253,252,248,0.5)', textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:600, marginBottom:22 }}>Get in touch</div>
            <a href={window.AM_WA} target="_blank" rel="noopener" style={{
              display:'inline-flex', alignItems:'center', gap:8,
              background:'#FDFCF8', color:'#1A1A1A',
              padding:'14px 22px', borderRadius:100,
              fontFamily:'Plus Jakarta Sans', fontWeight:600, fontSize:14,
              marginBottom:18,
            }}>Order on WhatsApp →</a>
            <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:14, color:'rgba(253,252,248,0.6)', lineHeight:1.6, marginBottom:14 }}>
              Have questions? We're here to help.
            </p>
            <a href="mailto:info@amworld.in" style={{ fontFamily:'Plus Jakarta Sans', fontSize:14, color:'#FDFCF8', fontWeight:500, borderBottom:'1px solid rgba(253,252,248,0.3)', paddingBottom:2 }}>info@amworld.in</a>
          </div>
        </div>

        <div style={{ borderTop:'1px solid rgba(253,252,248,0.12)', paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:14 }}>
          <span style={{ fontFamily:'Plus Jakarta Sans', fontSize:13, color:'rgba(253,252,248,0.5)' }}>© 2026 A&amp;M World · The Scholar Series · For Better Moments</span>
          <span style={{ fontFamily:'Plus Jakarta Sans', fontSize:13, color:'rgba(253,252,248,0.5)' }}>Made in India</span>
        </div>
      </div>
    </footer>
  );
}

window.AMShared = { AMHeader, AMFooter, AMLogo };