// CartConfirm.jsx — with lang support + onRemove + responsive
const CartConfirm = ({ item, onContinue, onHome, onRemove, t }) => {
  const _t = t || ((k)=>k);
  const { useState, useEffect } = React;
  const [w, setW] = useState(window.innerWidth);

  useEffect(() => {
    const handler = () => setW(window.innerWidth);
    window.addEventListener("resize", handler, { passive: true });
    return () => window.removeEventListener("resize", handler);
  }, []);

  const isMobile = w < 768;
  const isSmall  = w < 480;

  const variant = item?.variant || "90";
  const img = variant==="90"
    ? "assets/images/001 BEAM 90 PERSPECTIVE VIEW.png"
    : "assets/images/001 BEAM 180 PERSPECTIVE VIEW.png";

  return (
    <section style={{ background:"#FFFFFF", minHeight:"70vh", padding: isMobile ? "80px 20px 60px" : "80px 40px", paddingTop:120 }}>
      <div style={{ maxWidth:960, margin:"0 auto" }}>
        <div style={{ fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", fontWeight:500, color:"#737373", marginBottom:16 }}>
          {_t("cartLabel")}
        </div>
        <h1 style={{ fontSize: isMobile ? 28 : 40, fontWeight:300, letterSpacing:"-0.02em", margin:0, color:"#1A1A1A", lineHeight:1.05 }}>
          {_t("cartAdded")}
        </h1>

        {/* Cart item row */}
        <div style={{
          marginTop:48, border:"1px solid #E0E0E0",
          display:"grid",
          gridTemplateColumns: isSmall ? "1fr" : isMobile ? "120px 1fr" : "240px 1fr auto",
          gap:0,
        }}>
          <div style={{
            background:"radial-gradient(ellipse at center,#3A3A3A 0%,#1A1A1A 70%,#0A0A0A 100%)",
            aspectRatio: isSmall ? "16/9" : "1/1",
            position:"relative", overflow:"hidden",
          }}>
            <img src={img} alt="" style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }}/>
          </div>
          <div style={{ padding: isMobile ? "20px 16px" : "28px 32px" }}>
            <div style={{ fontSize:10, letterSpacing:"0.15em", textTransform:"uppercase", fontWeight:500, color:"#737373" }}>{_t("cartProduct")}</div>
            <div style={{ fontSize: isMobile ? 18 : 24, fontWeight:400, letterSpacing:"-0.01em", color:"#1A1A1A", marginTop:6 }}>
              {variant==="90" ? _t("vertical") : _t("horizontal")}
            </div>
            <div style={{ fontFamily:"Georgia,serif", fontSize:14, color:"#737373", marginTop:12 }}>
              SUS304 Hairline · CR Steel Powder Coat Silver · M5 bolts.
            </div>
            <div style={{ marginTop:16, display:"flex", gap:16, fontSize:10, letterSpacing:"0.15em", textTransform:"uppercase", fontWeight:500, color:"#1A1A1A", flexWrap:"wrap" }}>
              <span>{_t("cartQty")}</span><span>·</span><span>{_t("cartShips")}</span>
            </div>
          </div>
          {/* Price + remove — on mobile: 하단 별도 행, 데스크탑: 우측 열 */}
          <div style={{
            padding: isMobile ? "16px" : "28px 32px",
            display:"flex",
            flexDirection: isSmall ? "row" : "column",
            justifyContent: isSmall ? "space-between" : "space-between",
            alignItems: isSmall ? "center" : "flex-end",
            borderTop: isSmall ? "1px solid #E0E0E0" : "none",
          }}>
            <span style={{ fontSize:20, fontWeight:400, letterSpacing:"-0.01em", color:"#1A1A1A" }}>₩990,000</span>
            <a href="#"
              onClick={(e) => { e.preventDefault(); onRemove?.(); }}
              style={{ fontSize:10, letterSpacing:"0.15em", textTransform:"uppercase", fontWeight:500, color:"#737373", border:0, cursor:"pointer" }}>
              {_t("removeItem")}
            </a>
          </div>
        </div>

        {/* Summary + note */}
        <div style={{
          display:"grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 320px",
          gap: isMobile ? 24 : 32,
          alignItems:"end",
          marginTop:32,
        }}>
          <p style={{ fontFamily:"Georgia,serif", fontSize:15, lineHeight:1.7, color:"#737373", margin:0 }}>
            {_t("cartNote")}
          </p>
          <div>
            {[
              [_t("cartSubtotal"), "₩990,000"],
              [_t("cartShipping"), _t("cartShippingNote")],
            ].map(([k,v])=>(
              <div key={k} style={{ display:"flex", justifyContent:"space-between", padding:"10px 0",
                borderTop:"1px solid #E0E0E0", fontSize:11, letterSpacing:"0.15em",
                textTransform:"uppercase", fontWeight:500 }}>
                <span style={{ color:"#737373" }}>{k}</span>
                <span style={{ color:"#1A1A1A" }}>{v}</span>
              </div>
            ))}
            <div style={{ display:"flex", justifyContent:"space-between", padding:"14px 0",
              borderTop:"1px solid #000", borderBottom:"1px solid #000", marginTop:8,
              fontSize:13, letterSpacing:"0.1em", textTransform:"uppercase", fontWeight:500 }}>
              <span>{_t("cartTotal")}</span><span>₩990,000</span>
            </div>
          </div>
        </div>

        <div style={{ display:"flex", gap:12, marginTop:32, flexWrap:"wrap" }}>
          <button onClick={onContinue} style={{ background:"#000", color:"#FFF", border:"1px solid #000",
            padding:"16px 28px", fontSize:12, letterSpacing:"0.12em",
            textTransform:"uppercase", fontWeight:500, cursor:"pointer", borderRadius:0,
            flex: isMobile ? "1 1 100%" : "0 0 auto" }}>
            {_t("checkout")}
          </button>
          <button onClick={onHome} style={{ background:"#FFF", color:"#000", border:"1px solid #000",
            padding:"16px 28px", fontSize:12, letterSpacing:"0.12em",
            textTransform:"uppercase", fontWeight:500, cursor:"pointer", borderRadius:0,
            flex: isMobile ? "1 1 100%" : "0 0 auto" }}>
            {_t("continueBrowsing")}
          </button>
        </div>
      </div>
    </section>
  );
};

window.CartConfirm = CartConfirm;