/* ============================================================
   BUY BOX — bundle selector + behavioural-economics offers
   ============================================================ */
function deliveryRange(){
  const fmt = (d)=> d.toLocaleDateString("en-GB",{ weekday:"short", day:"numeric", month:"short" });
  const add = (n)=>{ const d=new Date(); let c=0; while(c<n){ d.setDate(d.getDate()+1); const wd=d.getDay(); if(wd!==0&&wd!==6) c++; } return d; };
  return fmt(add(2))+" – "+fmt(add(4));
}

/* Honest dispatch countdown — counts down to the next 2pm weekday cutoff */
function DispatchCountdown(){
  const [now,setNow] = useState(Date.now());
  useEffect(()=>{ const t=setInterval(()=>setNow(Date.now()),1000); return ()=>clearInterval(t); },[]);
  const d = new Date(now);
  const cutoff = new Date(now); cutoff.setHours(14,0,0,0);
  const wd = d.getDay();
  const beforeCutoff = d < cutoff && wd>=1 && wd<=5;
  if(beforeCutoff){
    const ms = cutoff - d;
    const h = Math.floor(ms/3.6e6), m = Math.floor((ms%3.6e6)/6e4), s = Math.floor((ms%6e4)/1000);
    const pad = (x)=>String(x).padStart(2,"0");
    return (
      <div className="dispatch">
        <span className="dispatch-dot"></span>
        <span>Order in <b className="tnum">{pad(h)}:{pad(m)}:{pad(s)}</b> for <b>same-day dispatch</b></span>
      </div>
    );
  }
  return (
    <div className="dispatch">
      <span className="dispatch-dot calm"></span>
      <span>Order now — dispatches next business day</span>
    </div>
  );
}

function BundleSelector(){
  const cart = useCart();
  return (
    <div className="bundles-pick" role="radiogroup" aria-label="Choose your pack">
      {BUNDLES.map(b=>{
        const on = cart.selected===b.id;
        const save = b.compare ? b.compare-b.price : 0;
        return (
          <button key={b.id} role="radio" aria-checked={on}
            className={"bsel"+(on?" on":"")+(b.decoy?" decoy":"")} onClick={()=>cart.setSelected(b.id)}>
            {b.badge && <span className={"bsel-badge"+(b.id==="host"?" gold":"")}>{b.badge}</span>}
            <span className="bsel-radio" aria-hidden="true"></span>
            <span className="bsel-main">
              <span className="bsel-name">{b.name}</span>
              <span className="bsel-meta">{b.tins} × 50g tin{b.tins>1?"s":""} · {money(perTin(b))}/tin{save>0 && <span className="bsel-save"> · save {money(save)}</span>}</span>
            </span>
            <span className="bsel-price">
              <span className="tnum" style={{fontFamily:"var(--serif)",fontSize:21,fontWeight:600}}>{money(b.price)}</span>
              {b.compare && b.compare>b.price && <span className="bsel-was tnum">{money(b.compare)}</span>}
            </span>
          </button>
        );
      })}
    </div>
  );
}

/* Contextual "no-brainer" upsell — uses the decoy/target framing & gift threshold */
function SmartUpsell(){
  const cart = useCart();
  const b = bundleById(cart.selected);
  const host = bundleById("host");
  if(cart.selected==="host"){
    return (
      <div className="upsell win">
        <Icon name="check" size={16}/>
        <span>Best value unlocked — lowest price per tin <b>and</b> a free mother-of-pearl spoon.</span>
      </div>
    );
  }
  if(cart.selected==="trio"){
    return (
      <button className="upsell act" onClick={()=>cart.setSelected("host")}>
        <Icon name="gift" size={16}/>
        <span>Add a <b>4th tin for just {money(host.price-b.price)}</b> → The Maison. Lower per-tin price + free spoon.</span>
        <span className="upsell-go">Upgrade <Icon name="arrow" size={14}/></span>
      </button>
    );
  }
  // single / duo → nudge toward the spoon gift
  const toSpoon = SPOON_GIFT_THRESHOLD - b.price;
  return (
    <button className="upsell act" onClick={()=>cart.setSelected("host")}>
      <Icon name="gift" size={16}/>
      <span>Spend <b>{money(toSpoon)}</b> more to unlock a <b>free mother-of-pearl spoon</b> (worth £15).</span>
      <span className="upsell-go">View <Icon name="arrow" size={14}/></span>
    </button>
  );
}

function BuyBox({ onIngredients }){
  const cart = useCart();
  const b = bundleById(cart.selected);
  const goCheckout = ()=>cart.buyNow(b.id,1);

  return (
    <div className="buybox">
      {/* anchor vs traditional caviar */}
      <div className="anchor-line">
        <span className="anchor-trad">Traditional caviar <s>£{TRAD_CAVIAR_LOW}+</s>/50g</span>
        <span className="anchor-arrow"><Icon name="arrow" size={14}/></span>
        <span className="anchor-mye">Mye Noir from <b>{money(TIN_PRICE)}</b>/50g</span>
      </div>

      <BundleSelector/>
      <SmartUpsell/>

      <div className="buy-perserve">
        <span>That's <b>{money(perServing(b))}</b> a canapé</span>
        <span className="buy-perserve-dot">·</span>
        <span>~{b.tins*SERVINGS_PER_TIN} servings</span>
      </div>

      <button className="btn btn-gold btn-block btn-lg buy-main" onClick={()=>cart.add(b.id,1)} disabled={cart.busy}>
        <Icon name="cart" size={18}/> Add to Cart · {money(b.price)}
      </button>

      <button className="btn btn-ghost btn-block btn-lg" style={{marginTop:12}} onClick={()=>cart.buyNow(b.id,1)} disabled={cart.busy}>
        <Icon name="lock" size={17}/> Buy Now · {money(b.price)}
      </button>

      <div className="or-line" style={{margin:"15px 0 13px"}}>or check out with</div>
      <div className="xgrid">
        <ShopPayBtn onClick={goCheckout}/>
        <PayPalBtn onClick={goCheckout}/>
        <ApplePayBtn onClick={goCheckout}/>
        <GooglePayBtn onClick={goCheckout}/>
      </div>

      <DispatchCountdown/>

      <div className="buy-micro">
        <span><Icon name="leaf" size={14}/> 100% plant-based</span>
        <span><Icon name="spoon" size={14}/> Ready to serve</span>
        <span><Icon name="truck" size={14}/> Free UK delivery on selected orders</span>
        <span><Icon name="lock" size={14}/> Secure checkout</span>
      </div>

      <div className="buy-foot">
        <button className="btn-link" onClick={onIngredients}>Ingredients, allergens &amp; storage <Icon name="arrow" size={15} className="arr"/></button>
        <PaymentRow marks={["visa","mc","amex","maestro"]}/>
      </div>
    </div>
  );
}

Object.assign(window, { BuyBox, BundleSelector, SmartUpsell, DispatchCountdown, deliveryRange });