/* ============================================================
   CHROME — announcement, header, footer, cart drawer, sticky CTA
   ============================================================ */
const NAV = [
  { label:"Shop", to:"/" },
  { label:"Story", to:"/story" },
  { label:"Recipes", to:"/recipes" },
  { label:"Reviews", to:"/reviews" },
  { label:"Wholesale", to:"/wholesale" },
];

const ANNOUNCE = [
  "Free UK delivery on selected orders",
  "Order by 2pm for same-day dispatch",
  "Plant-based caviar for canapés, sushi & champagne nights",
];

function Announce(){
  const [i,setI] = useState(0);
  useEffect(()=>{ const t=setInterval(()=>setI(x=>(x+1)%ANNOUNCE.length),4200); return ()=>clearInterval(t); },[]);
  return (
    <div className="announce">
      <span className="announce-dot">✦</span>
      <div className="announce-roll">
        {ANNOUNCE.map((m,idx)=>(
          <span key={idx} className={"announce-item"+(idx===i?" on":"")}>{m}</span>
        ))}
      </div>
      <span className="announce-dot">✦</span>
    </div>
  );
}

function Wordmark({ light=false }){
  return (
    <Link to="/" className={"wordmark"+(light?" light":"")}>
      <span className="wm-fish"><FishMark size={30}/></span>
      <span className="wm-text">
        <span className="wm-main">MYE</span>
        <span className="wm-sub">VEGAN&nbsp;CAVIAR</span>
      </span>
    </Link>
  );
}

function Header(){
  const cart = useCart();
  const { path } = useRoute();
  const [scrolled,setScrolled] = useState(false);
  const [menu,setMenu] = useState(false);
  const [search,setSearch] = useState(false);
  const [account,setAccount] = useState(false);
  useEffect(()=>{ const on=()=>setScrolled(window.scrollY>20); on(); window.addEventListener("scroll",on,{passive:true}); return ()=>window.removeEventListener("scroll",on); },[]);
  useEffect(()=>{ setMenu(false); },[path]);

  return (
    <header className={"hdr"+(scrolled?" scrolled":"")}>
      <Announce/>
      <div className="hdr-bar">
        <div className="hdr-inner wrap-wide">
          <button className="hdr-burger" aria-label="Open menu" onClick={()=>setMenu(true)}><Icon name="menu"/></button>
          <Wordmark/>
          <nav className="hdr-nav" aria-label="Primary">
            {NAV.map(n=>(
              <Link key={n.to} to={n.to} className={"hdr-link"+(path===n.to?" active":"")}>{n.label}</Link>
            ))}
          </nav>
          <div className="hdr-actions">
            <button className="hdr-ic" aria-label="Search" onClick={()=>setSearch(true)}><Icon name="search" size={19}/></button>
            <button className="hdr-ic hide-mob" aria-label="Account" onClick={()=>setAccount(true)}><Icon name="user" size={19}/></button>
            <button className="hdr-ic cart-ic" aria-label={"Cart, "+cart.count+" items"} onClick={()=>cart.setOpen(true)}>
              <Icon name="cart" size={19}/>
              {cart.count>0 && <span className="cart-count">{cart.count}</span>}
            </button>
          </div>
        </div>
      </div>

      {/* mobile menu */}
      <div className={"mobile-menu"+(menu?" open":"")}>
        <div className="mm-scrim" onClick={()=>setMenu(false)}></div>
        <div className="mm-panel">
          <div className="between" style={{marginBottom:30}}>
            <Wordmark/>
            <button className="hdr-ic" aria-label="Close menu" onClick={()=>setMenu(false)}><Icon name="close"/></button>
          </div>
          <button className="mm-search" onClick={()=>{setMenu(false);setSearch(true);}}><Icon name="search" size={18}/> Search Mye…</button>
          <nav className="mm-nav">
            {NAV.map(n=>(<Link key={n.to} to={n.to} className="mm-link" onClick={()=>setMenu(false)}>{n.label}</Link>))}
            <Link to="/faq" className="mm-link" onClick={()=>setMenu(false)}>FAQs</Link>
          </nav>
          <div className="mm-foot">
            <button className="chip" style={{width:"100%",justifyContent:"center"}} onClick={()=>{setMenu(false);setAccount(true);}}><Icon name="user" size={16}/> Sign in / Account</button>
            <div className="flourish" style={{margin:"18px 0"}}><span className="dot"></span></div>
            <div className="chip"><Icon name="truck" size={16}/> Free UK delivery on selected orders</div>
            <div className="chip" style={{marginTop:10}}><Icon name="leaf" size={16}/> 100% plant-based</div>
          </div>
        </div>
      </div>

      <SearchOverlay open={search} onClose={()=>setSearch(false)}/>
      <AccountPanel open={account} onClose={()=>setAccount(false)}/>
    </header>
  );
}

/* ============================================================ CART DRAWER */
const FREE_SHIP_AT = 40;
function CartDrawer(){
  const cart = useCart();
  const { navigate } = useRoute();
  useEffect(()=>{ document.body.style.overflow = cart.open ? "hidden" : ""; },[cart.open]);
  const sub = cart.subtotal;
  const goCheckout = ()=>{ cart.setOpen(false); cart.checkout(); };

  // dual-threshold reward meter: free delivery (£25) then free spoon (£55)
  const hasSpoon = sub >= SPOON_GIFT_THRESHOLD;
  const hasShip = sub >= FREE_SHIP_AT;
  const pct = Math.min(100, (sub/SPOON_GIFT_THRESHOLD)*100);
  let rewardMsg;
  if(sub===0) rewardMsg = <span>Free UK delivery over {money(FREE_SHIP_AT)} · free spoon over {money(SPOON_GIFT_THRESHOLD)}</span>;
  else if(!hasShip) rewardMsg = <span>Add <b>{money(FREE_SHIP_AT-sub)}</b> for <b>free UK delivery</b></span>;
  else if(!hasSpoon) rewardMsg = <span><Icon name="check" size={13}/> Free delivery unlocked — add <b>{money(SPOON_GIFT_THRESHOLD-sub)}</b> for a <b>free spoon</b></span>;
  else rewardMsg = <span className="ship-win"><Icon name="check" size={14}/> Free delivery <b>+ a free mother-of-pearl spoon</b> unlocked</span>;

  return (
    <div className={"drawer-root"+(cart.open?" open":"")} aria-hidden={!cart.open}>
      <div className="drawer-scrim" onClick={()=>cart.setOpen(false)}></div>
      <aside className="drawer" role="dialog" aria-label="Shopping cart">
        <div className="drawer-head">
          <div className="row" style={{gap:10}}><Icon name="cart" size={18}/><span style={{fontWeight:500,letterSpacing:".02em"}}>Your tin{cart.count!==1?"s":""}</span><span className="pill" style={{padding:"3px 9px"}}>{cart.count}</span></div>
          <button className="hdr-ic" aria-label="Close cart" onClick={()=>cart.setOpen(false)}><Icon name="close"/></button>
        </div>

        {/* dual-reward meter */}
        <div className="ship-meter">
          <p className="small reward-msg">{rewardMsg}</p>
          <div className="meter meter-dual">
            <span style={{width:pct+"%"}}></span>
            <i className="meter-mark" style={{left:(FREE_SHIP_AT/SPOON_GIFT_THRESHOLD*100)+"%"}} data-on={hasShip}><Icon name="truck" size={11}/></i>
            <i className="meter-mark" style={{left:"100%"}} data-on={hasSpoon}><Icon name="gift" size={11}/></i>
          </div>
        </div>

        <div className="drawer-body">
          {cart.lines.length===0 ? (
            <div className="cart-empty">
              <div className="tin" style={{width:96,height:96,margin:"0 auto 18px"}}><div className="gleam"></div><div className="lip"><div className="caviar pearls" style={{borderRadius:"50%"}}></div></div></div>
              <p className="h-sm" style={{marginBottom:6}}>Your cart is empty</p>
              <p className="small" style={{marginBottom:20}}>The dinner party hasn't started yet.</p>
              <button className="btn btn-gold" onClick={()=>{cart.setOpen(false);navigate("/");}}>Shop Mye</button>
            </div>
          ) : cart.lines.map(l=>(
            <div className="cart-line" key={l.bundleId}>
              <div className="cart-thumb tin"><div className="gleam"></div><div className="lip"><div className="caviar pearls" style={{borderRadius:"50%"}}></div></div>
                {l.bundle.tins>1 && <span className="cart-thumb-x">×{l.bundle.tins}</span>}</div>
              <div style={{flex:1,minWidth:0}}>
                <div className="between" style={{alignItems:"flex-start"}}>
                  <div>
                    <p style={{fontWeight:500}}>{l.bundle.name}</p>
                    <p className="small">{l.bundle.tins} × 50g tin</p>
                  </div>
                  <button className="cart-x" aria-label="Remove" onClick={()=>cart.remove(l.bundleId)}><Icon name="close" size={15}/></button>
                </div>
                <div className="between" style={{marginTop:10}}>
                  <div className="stepper">
                    <button aria-label="Decrease" onClick={()=>cart.setQty(l.bundleId,l.qty-1)}><Icon name="minus" size={14}/></button>
                    <span className="tnum">{l.qty}</span>
                    <button aria-label="Increase" onClick={()=>cart.setQty(l.bundleId,l.qty+1)}><Icon name="plus" size={14}/></button>
                  </div>
                  <span className="tnum" style={{fontWeight:500}}>{money(l.line)}</span>
                </div>
              </div>
            </div>
          ))}

          {/* free spoon gift line */}
          {hasSpoon && (
            <div className="cart-gift">
              <div className="cart-thumb cart-gift-thumb"><Icon name="spoon" size={20}/></div>
              <div style={{flex:1}}>
                <p style={{fontWeight:500,fontSize:14}}>Mother-of-pearl spoon</p>
                <p className="small">Gift with your order</p>
              </div>
              <span className="cart-gift-tag"><s className="tnum">£15</s> FREE</span>
            </div>
          )}

          {cart.lines.length>0 && !cart.items.find(x=>x.bundleId==="host") && (
            <button className="cart-upsell" onClick={()=>cart.add("host",1)}>
              <div className="cart-thumb tin" style={{width:46,height:46}}><div className="gleam"></div><div className="lip"><div className="caviar pearls" style={{borderRadius:"50%"}}></div></div></div>
              <div style={{flex:1}}>
                <p style={{fontWeight:500,fontSize:14}}>Make it The Maison</p>
                <p className="small">4 tins · {money(bundleById("host").price)} · save {money(bundleById("host").compare-bundleById("host").price)} + free spoon</p>
              </div>
              <span className="cart-add-mini"><Icon name="plus" size={16}/></span>
            </button>
          )}
        </div>

        {cart.lines.length>0 && (
          <div className="drawer-foot">
            <div className="between" style={{marginBottom:14}}>
              <span className="small">Subtotal</span>
              <span className="h-sm tnum" style={{fontFamily:"var(--serif)"}}>{money(cart.subtotal)}</span>
            </div>
            <button className="btn btn-gold btn-block btn-lg" onClick={goCheckout}>Checkout with Shopify · {money(cart.subtotal)}</button>
            <div className="or-line" style={{margin:"14px 0"}}>or express</div>
            <div className="xgrid">
              <ShopPayBtn onClick={goCheckout}/>
              <PayPalBtn onClick={goCheckout}/>
              <ApplePayBtn onClick={goCheckout}/>
              <GooglePayBtn onClick={goCheckout}/>
            </div>
            <div className="drawer-trust">
              <span><Icon name="lock" size={13}/> Secure checkout</span>
              <span><Icon name="truck" size={13}/> Free UK delivery on selected orders</span>
              <span><Icon name="leaf" size={13}/> Plant-based</span>
            </div>
          </div>
        )}
      </aside>
    </div>
  );
}

/* ============================================================ STICKY MOBILE CTA */
function StickyCTA(){
  const cart = useCart();
  const { path } = useRoute();
  const [show,setShow] = useState(false);
  useEffect(()=>{
    const on=()=>setShow(window.scrollY>620);
    on(); window.addEventListener("scroll",on,{passive:true}); return ()=>window.removeEventListener("scroll",on);
  },[]);
  if(path!=="/") return null;
  const b = bundleById(cart.selected);
  return (
    <div className={"sticky-cta"+(show&&!cart.open?" show":"")}>
      <div className="sticky-info">
        <p style={{fontWeight:500,fontSize:14,lineHeight:1.2}}>{b.name}</p>
        <p className="small tnum">{b.tins} × 50g · {money(b.price)}</p>
      </div>
      <button className="btn btn-gold" onClick={()=>cart.add(b.id,1)}>Add to Cart</button>
    </div>
  );
}

Object.assign(window, { Header, CartDrawer, StickyCTA, Wordmark, NAV });