// Menu section (tabbed + category banner photo) + takeout cart drawer
const { useState: useStateM } = React;
const yen = (n) => "¥" + n.toLocaleString();
const CATIMG = [window.STORE.img.takoyaki, window.STORE.img.oden, window.STORE.img.g[3], window.STORE.img.g[1], window.STORE.img.highball];

function MenuSection({ t, lang, onAdd }) {
  const cats = window.STORE.menu;
  const [active, setActive] = useStateM(0);
  const c = cats[active];
  return (
    <section id="menu" style={{ background:"var(--white-plate)", padding:"96px 26px" }}>
      <div style={{ maxWidth:1080, margin:"0 auto" }}>
        <Reveal><Kicker en={t.menuKicker} jp={t.menuTitle} center /></Reveal>
        <Reveal>
          <div style={{ display:"flex", gap:8, flexWrap:"wrap", justifyContent:"center", margin:"32px 0 30px" }}>
            {cats.map((cat,i)=>(
              <button key={i} onClick={()=>setActive(i)} style={{ cursor:"pointer", fontFamily:"var(--font-body)", fontWeight:700, fontSize:14,
                padding:"10px 22px", borderRadius:999, border:"1.5px solid", transition:"all .15s ease",
                borderColor: i===active?"var(--primary)":"var(--line-300)",
                background: i===active?"var(--primary)":"#fff", color: i===active?"#fff":"var(--ink-700)" }}>
                {cat.cat[lang]}
              </button>
            ))}
          </div>
        </Reveal>
        {/* category banner */}
        <Reveal>
          <div style={{ position:"relative", borderRadius:18, overflow:"hidden", height:200, marginBottom:30, boxShadow:"var(--shadow-card)" }}>
            <img src={CATIMG[active]} alt={c.cat[lang]} referrerPolicy="no-referrer" loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
            <div style={{ position:"absolute", inset:0, background:"linear-gradient(90deg,rgba(21,21,21,.7) 0%,transparent 70%)" }} />
            <div style={{ position:"absolute", left:26, top:0, bottom:0, display:"flex", flexDirection:"column", justifyContent:"center" }}>
              <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:30, color:"#FFF8EC", letterSpacing:".04em" }}>{c.cat[lang]}</div>
              <div style={{ fontFamily:"var(--font-body)", fontSize:14, color:"rgba(255,255,255,.85)", marginTop:4 }}>{c.sub[lang]}</div>
            </div>
          </div>
        </Reveal>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(330px,1fr))", gap:"4px 28px" }}>
          {c.items.map((it,i)=>(
            <div key={i} style={{ display:"flex", alignItems:"center", gap:12, padding:"15px 6px", borderBottom:"1px solid var(--line-200)" }}>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                  <span style={{ fontFamily:"var(--font-body)", fontWeight:700, fontSize:16, color:"var(--ink-900)" }}>{it[lang]}</span>
                  {it.pop && <span style={{ fontFamily:"var(--font-accent)", fontWeight:700, fontSize:10.5, background:"var(--red-100)", color:"var(--primary)", padding:"2px 8px", borderRadius:999 }}>{t.popular}</span>}
                </div>
                {it.sub && <div style={{ fontSize:11.5, color:"var(--ink-400)", marginTop:2 }}>{it.sub}</div>}
              </div>
              <div style={{ fontFamily:"var(--font-latin)", fontWeight:800, fontSize:16, color:"var(--sauce-brown)" }}>{yen(it.price)}</div>
              <button onClick={()=>onAdd(it)} title={t.add} style={{ flexShrink:0, width:34, height:34, borderRadius:"50%", border:"1.5px solid var(--primary)", cursor:"pointer",
                background:"#fff", color:"var(--primary)", display:"flex", alignItems:"center", justifyContent:"center", transition:"all .15s ease" }}
                onMouseEnter={e=>{e.currentTarget.style.background="var(--primary)";e.currentTarget.style.color="#fff";}}
                onMouseLeave={e=>{e.currentTarget.style.background="#fff";e.currentTarget.style.color="var(--primary)";}}>
                <Icon name="plus" size={18} />
              </button>
            </div>
          ))}
        </div>
        <div style={{ textAlign:"center", marginTop:28, fontSize:12.5, color:"var(--ink-400)" }}>{t.menuNote}</div>
      </div>
    </section>
  );
}

function CartDrawer({ open, onClose, cart, setCart, t, lang }) {
  const [pickup, setPickup] = useStateM("18:30");
  const [placed, setPlaced] = useStateM(false);
  const times = ["17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00"];
  const total = cart.reduce((s,l)=>s+l.price*l.qty,0);
  const setQty = (i,d) => setCart(cart.map((l,k)=> k===i ? {...l, qty: Math.max(0,l.qty+d)} : l).filter(l=>l.qty>0));
  return (
    <>
      <div onClick={onClose} style={{ position:"fixed", inset:0, background:"rgba(21,21,21,.5)", zIndex:100,
        opacity: open?1:0, pointerEvents: open?"auto":"none", transition:"opacity .2s ease" }} />
      <aside style={{ position:"fixed", top:0, right:0, bottom:0, width:"min(420px,92vw)", background:"var(--white-plate)", zIndex:101,
        boxShadow:"-12px 0 40px rgba(0,0,0,.22)", transform: open?"translateX(0)":"translateX(100%)", transition:"transform .26s cubic-bezier(.4,0,.2,1)",
        display:"flex", flexDirection:"column" }}>
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"18px 20px", borderBottom:"1px solid var(--line-200)" }}>
          <div style={{ display:"flex", alignItems:"center", gap:9, fontFamily:"var(--font-display)", fontWeight:700, fontSize:18, color:"var(--ink-900)", letterSpacing:".03em" }}>
            <Icon name="cart" size={20} style={{color:"var(--primary)"}} />{t.cartTitle}
          </div>
          <button onClick={onClose} style={{ background:"transparent", border:0, cursor:"pointer", color:"var(--ink-500)" }}><Icon name="x" size={22} /></button>
        </div>

        {placed ? (
          <div style={{ flex:1, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", textAlign:"center", padding:"30px 28px" }}>
            <div style={{ width:78, height:78, borderRadius:"50%", background:"var(--primary)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", marginBottom:20, boxShadow:"var(--shadow-pop)" }}><Icon name="check" size={40} /></div>
            <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:22, color:"var(--ink-900)", marginBottom:10, letterSpacing:".03em" }}>{t.orderDone}</div>
            <div style={{ fontSize:14, color:"var(--ink-700)", lineHeight:1.8, maxWidth:280 }}>{t.orderDoneSub}</div>
            <div style={{ marginTop:14, fontFamily:"var(--font-latin)", fontWeight:800, fontSize:15, color:"var(--sauce-brown)" }}>{t.pickup}: {pickup}</div>
            <div style={{ marginTop:24 }}><Btn variant="ghost" small onClick={()=>{ setCart([]); setPlaced(false); onClose(); }}>{t.close}</Btn></div>
          </div>
        ) : cart.length===0 ? (
          <div style={{ flex:1, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", textAlign:"center", padding:"30px 30px", color:"var(--ink-400)" }}>
            <Icon name="cart" size={48} style={{opacity:.3, marginBottom:16}} />
            <div style={{ fontSize:14, lineHeight:1.7 }}>{t.cartEmpty}</div>
          </div>
        ) : (
          <>
            <div style={{ flex:1, overflowY:"auto", padding:"6px 18px" }}>
              {cart.map((l,i)=>(
                <div key={i} style={{ display:"flex", alignItems:"center", gap:12, padding:"14px 0", borderBottom:"1px solid var(--line-200)" }}>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontWeight:700, fontSize:14.5, color:"var(--ink-900)" }}>{l[lang]}</div>
                    <div style={{ fontFamily:"var(--font-latin)", fontWeight:800, fontSize:13.5, color:"var(--sauce-brown)" }}>{yen(l.price)}</div>
                  </div>
                  <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                    <button onClick={()=>setQty(i,-1)} style={qtyBtnM}><Icon name="minus" size={15} /></button>
                    <span style={{ fontWeight:700, fontSize:14, minWidth:18, textAlign:"center" }}>{l.qty}</span>
                    <button onClick={()=>setQty(i,1)} style={qtyBtnM}><Icon name="plus" size={15} /></button>
                  </div>
                </div>
              ))}
              <div style={{ marginTop:20 }}>
                <div style={{ display:"flex", alignItems:"center", gap:7, fontSize:13, fontWeight:700, color:"var(--ink-900)", marginBottom:9 }}><Icon name="clock" size={16} style={{color:"var(--primary)"}} />{t.pickup}</div>
                <div style={{ display:"flex", gap:7, flexWrap:"wrap" }}>
                  {times.map(tm=>(
                    <button key={tm} onClick={()=>setPickup(tm)} style={{ cursor:"pointer", fontFamily:"var(--font-latin)", fontWeight:700, fontSize:13, padding:"7px 13px", borderRadius:999,
                      border:"1.5px solid", borderColor: pickup===tm?"var(--primary)":"var(--line-300)", background: pickup===tm?"var(--primary)":"#fff", color: pickup===tm?"#fff":"var(--ink-700)" }}>{tm}</button>
                  ))}
                </div>
              </div>
            </div>
            <div style={{ padding:"16px 20px 20px", borderTop:"1px solid var(--line-200)" }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:14 }}>
                <span style={{ fontWeight:700, fontSize:15, color:"var(--ink-900)" }}>{t.subtotal}</span>
                <span style={{ fontFamily:"var(--font-latin)", fontWeight:800, fontSize:24, color:"var(--primary)" }}>{yen(total)}</span>
              </div>
              <Btn variant="primary" full onClick={()=>setPlaced(true)}><Icon name="flame" size={18} fill="currentColor" stroke="0" />{t.checkout}</Btn>
            </div>
          </>
        )}
      </aside>
    </>
  );
}
const qtyBtnM = { width:28, height:28, borderRadius:"50%", border:"1.5px solid var(--line-300)", background:"#fff", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--ink-700)" };

Object.assign(window, { MenuSection, CartDrawer, yen });