const BB_CONTACT={
  email:'contact@boldbee.store',
  phone:'+919667056647',
  social:[
    ['instagram','Instagram','https://www.instagram.com/bold_bee_pvt_ltd/'],
    ['facebook','Facebook','https://www.facebook.com/BoldBeePvtLtd/'],
    ['pinterest','Pinterest','https://in.pinterest.com/BOLD_BEE_PVT_LTD/'],
    ['play','YouTube','https://www.youtube.com/@BoldBee.Store__India']
  ]
};
const CATEGORY_NAV=[
  {label:'Women',href:'Collections.html?gender=women',mega:[
    {title:'Sarees',items:[['Banarasi','Gold zari brocade'],['Kanjivaram','Temple-motif silk'],['Organza','Sheer, luminous drape'],['Tussar','Textured wild silk'],['Linen Silk','Light, everyday elegance'],['Handwoven Silk','One loom, one length']]},
    {title:'Ready-to-Wear',items:[['T-Shirts','Everyday cotton essentials']]}
  ]},
  {label:'Men',href:'Collections.html?gender=men',mega:[
    {title:'Ready-to-Wear',items:[['T-Shirts','Everyday cotton essentials'],['Trousers','Tailored cotton twill']]}
  ]},
  {label:'Jewellery',href:'Collections.html?weave=Jewellery',mega:[
    {title:'Jewellery',items:[['Jewellery','Gold vermeil, hand-finished']]}
  ]},
  {label:'Fragrances',href:'Collections.html?weave=Fragrances',mega:[
    {title:'Fragrances',items:[['Fragrances','Layered, long-lasting compositions']]}
  ]},
  {label:'Craftsmanship',href:'Craftsmanship.html'},
  {label:'Journal',href:'Journal.html'},
  {label:'Brand Story',href:'About.html'}
];
function AnnouncementBar(){
  return <div style={{background:'var(--charcoal)',color:'var(--ivory)',textAlign:'center',padding:'10px 16px',fontSize:12,letterSpacing:'var(--tracking-wide)',textTransform:'uppercase'}}>Complimentary shipping across India · Handwoven, made to order</div>;
}
function Header({home='index.html'}){
  const [openMegaKey,setOpenMegaKey]=React.useState(null);
  const [openAcct,setOpenAcct]=React.useState(false);
  const fg='var(--text-primary)';
  const cartCount=typeof useCartCount==='function'?useCartCount():0;
  const user=typeof useAuth==='function'?useAuth():null;
  const megaTimer=React.useRef(null);
  const acctTimer=React.useRef(null);
  const navRef=React.useRef(null);
  const acctRef=React.useRef(null);
  function openMegaNow(key){clearTimeout(megaTimer.current);setOpenMegaKey(key);}
  function closeMegaSoon(){clearTimeout(megaTimer.current);megaTimer.current=setTimeout(()=>setOpenMegaKey(null),200);}
  function openAcctNow(){clearTimeout(acctTimer.current);setOpenAcct(true);}
  function closeAcctSoon(){clearTimeout(acctTimer.current);acctTimer.current=setTimeout(()=>setOpenAcct(false),200);}
  React.useEffect(()=>{
    function onKey(e){if(e.key==='Escape'){setOpenMegaKey(null);setOpenAcct(false);}}
    function onClickOutside(e){
      if(navRef.current&&!navRef.current.contains(e.target))setOpenMegaKey(null);
      if(acctRef.current&&!acctRef.current.contains(e.target))setOpenAcct(false);
    }
    document.addEventListener('keydown',onKey);
    document.addEventListener('mousedown',onClickOutside);
    return ()=>{document.removeEventListener('keydown',onKey);document.removeEventListener('mousedown',onClickOutside);};
  },[]);
  return (
    <header style={{position:'sticky',top:0,zIndex:30,background:'rgba(248,245,240,0.96)',borderBottom:'1px solid var(--border-soft)',backdropFilter:'blur(4px)'}}>
      <div style={{position:'relative',maxWidth:'var(--container-max)',margin:'0 auto',padding:'22px var(--container-pad)',display:'flex',alignItems:'center',justifyContent:'space-between',gap:24}}>
        <a href={home} style={{fontFamily:'var(--font-serif)',fontSize:29,fontWeight:600,letterSpacing:'0.22em',textTransform:'uppercase',cursor:'pointer',color:fg,textDecoration:'none'}}>Bold Bee</a>
        <div ref={navRef} style={{position:'relative',display:'flex',alignItems:'center'}}>
        <nav style={{display:'flex',gap:20,whiteSpace:'nowrap'}}>
          {CATEGORY_NAV.map(item=>{
            const base=item.href.split('?')[0];
            const isActive=typeof location!=='undefined'&&location.pathname.split('/').pop()===base&&!item.href.includes('?');
            const hasMega=item.mega&&item.mega.length;
            return hasMega?(
            <div key={item.label} onMouseEnter={()=>openMegaNow(item.label)} onMouseLeave={closeMegaSoon} style={{position:'relative',display:'flex',alignItems:'center'}}>
              <a href={item.href} aria-haspopup="true" aria-expanded={openMegaKey===item.label} onFocus={()=>openMegaNow(item.label)} onClick={e=>{if(openMegaKey===item.label){e.preventDefault();setOpenMegaKey(null);}else{e.preventDefault();setOpenMegaKey(item.label);}}} style={{position:'relative',fontSize:14,letterSpacing:'0.02em',fontWeight:500,color:fg,cursor:'pointer',fontFamily:'var(--font-sans)',textDecoration:'none',paddingBottom:4,borderBottom:isActive?'1px solid var(--gold-deep)':'1px solid transparent',transition:'opacity 200ms var(--ease-out),border-color 200ms var(--ease-out)'}} onMouseOver={e=>e.currentTarget.style.opacity=0.65} onMouseOut={e=>e.currentTarget.style.opacity=1}>{item.label}</a>
            </div>
          ):(
            <a key={item.label} href={item.href} style={{position:'relative',fontSize:14,letterSpacing:'0.02em',fontWeight:500,color:fg,cursor:'pointer',fontFamily:'var(--font-sans)',textDecoration:'none',paddingBottom:4,borderBottom:isActive?'1px solid var(--gold-deep)':'1px solid transparent',transition:'opacity 200ms var(--ease-out),border-color 200ms var(--ease-out)'}} onMouseOver={e=>e.currentTarget.style.opacity=0.65} onMouseOut={e=>e.currentTarget.style.opacity=1} aria-current={isActive?'page':undefined}>{item.label}</a>
          );})}
        </nav>
        {(()=>{const openItem=CATEGORY_NAV.find(i=>i.mega&&openMegaKey===i.label);return openItem&&(
          <div role="menu" onMouseEnter={()=>openMegaNow(openItem.label)} onMouseLeave={closeMegaSoon} style={{position:'absolute',left:'50%',transform:'translateX(-50%)',top:'100%',background:'var(--white)',border:'1px solid var(--border-soft)',boxShadow:'var(--shadow-card)',padding:'40px',width:'max(560px, 30vw)',maxWidth:'calc(100vw - 48px)',zIndex:40}}>
            <div style={{display:'grid',gridTemplateColumns:`repeat(${openItem.mega.length},1fr)`,gap:36}}>
              {openItem.mega.map(col=>(
                <div key={col.title}>
                  <div style={{fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--text-muted)',marginBottom:16}}>{col.title}</div>
                  {col.items.map(([n,d])=>(
                    <a key={n} role="menuitem" href={`Collections.html?weave=${encodeURIComponent(n)}`} style={{cursor:'pointer',display:'block',textDecoration:'none',marginBottom:16}}>
                      <div style={{fontFamily:'var(--font-serif)',fontSize:17,color:'var(--text-primary)',marginBottom:4}}>{n}</div>
                      <div style={{fontSize:12,color:'var(--text-muted)'}}>{d}</div>
                    </a>
                  ))}
                </div>
              ))}
            </div>
          </div>
        );})()}
        </div>
        <div style={{display:'flex',gap:22,alignItems:'center'}}>
          <a href="Search.html" aria-label="Search"><i data-lucide="search" style={{width:18,height:18,color:fg,cursor:'pointer'}}></i></a>
          <a href="Wishlist.html" aria-label="My Collection"><i data-lucide="heart" style={{width:18,height:18,color:fg,cursor:'pointer'}}></i></a>
          <div ref={acctRef} style={{position:'relative'}} onMouseEnter={openAcctNow} onMouseLeave={closeAcctSoon}>
            <a href={user?'Account.html':'Login.html'} aria-label={user?'My Account':'Login'} aria-haspopup="true" aria-expanded={openAcct} onClick={e=>{e.preventDefault();openAcctNow();}}><i data-lucide="user" style={{width:18,height:18,color:fg,cursor:'pointer'}}></i></a>
            {openAcct&&(
              <div role="menu" style={{position:'absolute',right:0,top:'calc(100% + 14px)',background:'var(--white)',border:'1px solid var(--border-soft)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-card)',minWidth:180,padding:8,zIndex:40}}>
                <div style={{position:'absolute',right:0,left:0,bottom:'100%',height:14}}></div>
                {user?(<>
                  <div style={{padding:'8px 12px',fontSize:12,color:'var(--text-muted)'}}>Signed in as<br/><strong style={{color:'var(--text-primary)'}}>{user.name}</strong></div>
                  <a role="menuitem" href="Account.html" style={{display:'block',padding:'8px 12px',fontSize:13,color:'var(--text-primary)',textDecoration:'none'}}>My Account</a>
                  <button role="menuitem" onClick={()=>{BB_AUTH.logout();location.href='index.html';}} style={{display:'block',width:'100%',textAlign:'left',padding:'8px 12px',fontSize:13,color:'var(--text-primary)',background:'none',border:'none',cursor:'pointer'}}>Logout</button>
                </>):(<>
                  <a role="menuitem" href="Login.html" style={{display:'block',padding:'8px 12px',fontSize:13,color:'var(--text-primary)',textDecoration:'none'}}>Login</a>
                  <a role="menuitem" href="Register.html" style={{display:'block',padding:'8px 12px',fontSize:13,color:'var(--text-primary)',textDecoration:'none'}}>Register</a>
                </>)}
              </div>
            )}
          </div>
          <a href="Cart.html" aria-label="Cart" style={{position:'relative',cursor:'pointer'}}>
            <i data-lucide="shopping-bag" style={{width:18,height:18,color:fg}}></i>
            {cartCount>0&&<span style={{position:'absolute',top:-8,right:-10,background:'var(--gold-deep)',color:'var(--ivory)',fontSize:10,width:16,height:16,borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center'}}>{cartCount}</span>}
          </a>
        </div>
      </div>
      {typeof CollectionToast!=='undefined'&&<CollectionToast/>}
    </header>
  );
}
function Newsletter(){
  const [email,setEmail]=React.useState('');
  const [state,setState]=React.useState('idle');
  function submit(e){
    e.preventDefault();
    const valid=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if(!valid){setState('error');return;}
    setState('success');
    if(typeof NotificationStore!=='undefined')NotificationStore.publish('newsletter.subscribed',{email:email.trim()});
  }
  return (
    <div style={{background:'var(--beige)',padding:'var(--space-section) var(--container-pad)',textAlign:'center'}}>
      <div style={{fontSize:12,letterSpacing:'var(--tracking-widest)',textTransform:'uppercase',color:'var(--text-muted)',marginBottom:16}}>Stay Close to the Loom</div>
      <h2 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(24px,3vw,36px)',color:'var(--text-primary)',margin:'0 0 28px'}}>Notes on new weaves, quietly, once a month.</h2>
      {state==='success'?(
        <p style={{fontSize:14,color:'var(--text-primary)',maxWidth:440,margin:'0 auto'}}>Thank you — you are on the list.</p>
      ):(
        <form onSubmit={submit} noValidate style={{maxWidth:440,margin:'0 auto'}}>
          <div style={{display:'flex',gap:12,justifyContent:'center'}}>
            <label htmlFor="newsletter-email" style={{position:'absolute',width:1,height:1,overflow:'hidden',clip:'rect(0 0 0 0)'}}>Email address</label>
            <input id="newsletter-email" type="email" value={email} onChange={e=>{setEmail(e.target.value);if(state==='error')setState('idle');}} aria-invalid={state==='error'} placeholder="Email address" style={{flex:1,border:'1px solid '+(state==='error'?'#B3261E':'var(--border-default)'),borderRadius:'var(--radius-md)',padding:'14px 18px',fontSize:14,fontFamily:'var(--font-sans)',background:'var(--white)',color:'var(--text-primary)'}}/>
            <button type="submit" style={{background:'var(--charcoal)',color:'var(--ivory)',border:'none',borderRadius:'var(--radius-md)',padding:'14px 28px',fontSize:13,letterSpacing:'var(--tracking-wide)',cursor:'pointer'}}>Subscribe</button>
          </div>
          {state==='error'&&<p role="alert" style={{color:'#B3261E',fontSize:12,marginTop:10}}>Please enter a valid email address.</p>}
        </form>
      )}
    </div>
  );
}
function Footer(){
  return (
    <footer style={{background:'var(--charcoal)',color:'var(--ivory)'}}>
      <style>{`@media(max-width:768px){.bb-footer-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:480px){.bb-footer-grid{grid-template-columns:1fr!important}}`}</style>
      <div className="bb-footer-grid" style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-8) var(--container-pad)',display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr 1fr',gap:40}}>
        <div>
          <div style={{fontFamily:'var(--font-serif)',fontSize:26,letterSpacing:'var(--tracking-widest)',textTransform:'uppercase',marginBottom:14}}>Bold Bee</div>
          <p style={{fontSize:13,color:'#B8B4AC',maxWidth:280,lineHeight:1.7}}>Handcrafted silk sarees, woven by artisan families across India.</p>
          <div style={{display:'flex',gap:16,marginTop:20}}>
            {BB_CONTACT.social.map(([icon,label,url])=>(<a key={icon} href={url} target="_blank" rel="noopener noreferrer" aria-label={label} style={{color:'#D8D3C8',display:'inline-flex'}}>{icon==='instagram'?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{cursor:'pointer'}}><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>:icon==='facebook'?<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{cursor:'pointer'}}><path d="M22 12.06C22 6.51 17.52 2 12 2S2 6.51 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.51 1.49-3.9 3.77-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.89h2.78l-.44 2.91h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94z"></path></svg>:icon==='pinterest'?<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{cursor:'pointer'}}><path d="M12 2C6.48 2 2 6.48 2 12c0 4.24 2.64 7.86 6.36 9.31-.09-.79-.17-2.01.04-2.87.19-.79 1.22-5.02 1.22-5.02s-.31-.63-.31-1.55c0-1.46.85-2.55 1.9-2.55.9 0 1.33.67 1.33 1.48 0 .9-.57 2.25-.87 3.5-.25 1.05.52 1.9 1.55 1.9 1.86 0 3.29-1.96 3.29-4.79 0-2.5-1.8-4.25-4.37-4.25-2.98 0-4.73 2.23-4.73 4.54 0 .9.35 1.86.78 2.39a.31.31 0 0 1 .07.3c-.08.32-.25 1.02-.29 1.16-.04.19-.15.23-.35.14-1.3-.6-2.11-2.5-2.11-4.02 0-3.27 2.38-6.28 6.86-6.28 3.6 0 6.4 2.57 6.4 6 0 3.58-2.26 6.46-5.39 6.46-1.05 0-2.04-.55-2.38-1.19l-.65 2.46c-.23.9-.87 2.02-1.3 2.71.98.3 2.02.47 3.1.47 5.52 0 10-4.48 10-10S17.52 2 12 2z"></path></svg>:<i data-lucide={icon} style={{width:16,height:16,cursor:'pointer'}}></i>}</a>))}
            <a href={`mailto:${BB_CONTACT.email}`} aria-label="Email Bold Bee" style={{color:'#D8D3C8',display:'inline-flex'}}><i data-lucide="mail" style={{width:16,height:16,cursor:'pointer'}}></i></a>
            <a href={`tel:${BB_CONTACT.phone}`} aria-label="Call Bold Bee" style={{color:'#D8D3C8',display:'inline-flex'}}><i data-lucide="phone" style={{width:16,height:16,cursor:'pointer'}}></i></a>
          </div>
        </div>
        {[['Shop',[['Women','Collections.html?gender=women'],['Men','Collections.html?gender=men'],['Sarees','Collections.html'],['T-Shirts','Collections.html?weave=T-Shirts'],['Jewellery','Collections.html?weave=Jewellery'],['Fragrances','Collections.html?weave=Fragrances']]],['About',[['Craftsmanship','Craftsmanship.html'],['Artisan Story','About.html'],['Journal','Journal.html'],['Brand Story','About.html']]],['Care',[['Shipping','Shipping.html'],['Returns','Returns.html'],['FAQ','FAQ.html'],['Contact','Contact.html']]]].map(([h,items])=>(
          <div key={h}>
            <div style={{fontSize:12,letterSpacing:'var(--tracking-widest)',textTransform:'uppercase',color:'#8A8377',marginBottom:16}}>{h}</div>
            {items.map(([label,href])=>(<a key={label} href={href} style={{display:'block',fontSize:14,color:'#D8D3C8',marginBottom:10,textDecoration:'none'}}>{label}</a>))}
          </div>
        ))}
      </div>
      <div style={{borderTop:'1px solid #3A3A38',padding:'20px var(--container-pad)',display:'flex',gap:24,justifyContent:'center',flexWrap:'wrap',fontSize:12,color:'#8A8377',textAlign:'center'}}>
        <span>© 2026 Bold Bee (OPC) Private Limited. All rights reserved.</span>
        <a href="Privacy.html" style={{color:'#8A8377'}}>Privacy Policy</a>
        <a href="Terms.html" style={{color:'#8A8377'}}>Terms &amp; Conditions</a>
        <a href={`mailto:${BB_CONTACT.email}`} style={{color:'#8A8377'}}>{BB_CONTACT.email}</a>
      </div>
    </footer>
  );
}
Object.assign(window,{AnnouncementBar,Header,Footer,Newsletter});
