// ProductGrid.jsx — 001 / 002 / 003 collection row with lang support + responsive
const ProductGrid = ({ onSelect, t }) => {
  const _t = t || ((k)=>k);
  const items = [
    {
      id: "beam", code: "001", name: "BEAM",
      getStatus: ()=>_t("statusAvailable"),
      image: "assets/images/001 BEAM 90 PERSPECTIVE VIEW.png",
      getTagline: ()=>_t("beamTagline"),
      price: "₩990,000",
      muted: false,
    },
    {
      id: "zen", code: "002", name: "ZEN",
      getStatus: ()=>_t("statusDev"),
      image: "assets/images/001 BEAM 180 PERSPECTIVE VIEW.png",
      getTagline: ()=>_t("zenTagline"),
      price: "—",
      muted: true,
    },
    {
      id: "fold", code: "003", name: "FOLD",
      getStatus: ()=>_t("statusDev"),
      image: "assets/images/001 BEAM Module Stand Ver.png",
      getTagline: ()=>_t("foldTagline"),
      price: "—",
      muted: true,
    },
  ];

  return (
    <section style={{
      position: "relative",
      padding: "clamp(48px,8vw,96px) clamp(16px,5vw,40px)",
      overflow: "hidden",
      background: "#0A0A0A",
    }}>
      <style>{`
        @media (max-width: 640px) {
          .collection-header { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
          .product-card-grid { grid-template-columns: 1fr !important; }
          .product-card-grid > div { aspect-ratio: 3/2 !important; }
        }
        @media (max-width: 768px) {
          .collection-header { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
        }
      `}</style>
      {/* background video */}
      <video autoPlay loop muted playsInline
        style={{ position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",opacity:0.85,zIndex:0 }}
        src="assets/videos/collection-video.mp4"/>
      <div style={{ position:"absolute",inset:0,background:"linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.05) 50%,rgba(0,0,0,0.25) 100%)",zIndex:1 }}/>

      <div className="collection-header" style={{ position:"relative",zIndex:2,display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:48 }}>
        <div>
          <div style={{ fontSize:10,letterSpacing:"0.2em",textTransform:"uppercase",fontWeight:500,color:"rgba(255,255,255,0.45)",marginBottom:10 }}>{_t("collectionLabel")}</div>
          <h2 style={{ fontSize:"clamp(28px,5.5vw,48px)",fontWeight:400,letterSpacing:"-0.02em",margin:0,color:"#FFFFFF",lineHeight:1.05 }}>
            {_t("collectionHeading1")}<br/>{_t("collectionHeading2")}
          </h2>
        </div>
        <div style={{ fontFamily:"Georgia,serif",fontSize:15,color:"rgba(255,255,255,0.55)",maxWidth:340,lineHeight:1.6 }}>
          {_t("collectionDesc")}
        </div>
      </div>

      <div className="product-card-grid" style={{ position:"relative",zIndex:2,display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:0,borderTop:"1px solid rgba(255,255,255,0.15)",borderLeft:"1px solid rgba(255,255,255,0.15)" }}>
        {items.map((it)=>(
          <div key={it.id}
            onClick={()=>!it.muted&&onSelect?.(it.id)}
            style={{
              borderRight:"1px solid rgba(255,255,255,0.12)",
              borderBottom:"1px solid rgba(255,255,255,0.12)",
              background: it.muted?"rgba(10,10,10,0.92)":"radial-gradient(ellipse at center,#3A3A3A 0%,#1A1A1A 70%,#0A0A0A 100%)",
              aspectRatio:"3/4",position:"relative",
              cursor:it.muted?"default":"pointer",overflow:"hidden",
            }}>
            <img src={it.image} alt={it.name}
              style={{ position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",
                opacity:it.muted?0.18:0.95,filter:it.muted?"grayscale(1) contrast(0.9)":"none" }}/>
            <span style={{ position:"absolute",top:20,left:24,fontSize:10,letterSpacing:"0.2em",textTransform:"uppercase",
              fontWeight:500,color:it.muted?"rgba(255,255,255,0.5)":"rgba(255,255,255,0.9)" }}>
              {it.code} · {it.name}
            </span>
            <span style={{ position:"absolute",top:20,right:24,fontSize:10,letterSpacing:"0.2em",textTransform:"uppercase",
              fontWeight:500,color:it.muted?"rgba(255,255,255,0.35)":"rgba(255,255,255,0.55)" }}>
              {it.getStatus()}
            </span>
            <div style={{ position:"absolute",left:24,bottom:24,right:24 }}>
              <div style={{ fontSize:28,fontWeight:300,letterSpacing:"-0.02em",
                color:it.muted?"rgba(255,255,255,0.4)":"#FFFFFF",lineHeight:1.1 }}>
                {it.getTagline()}
              </div>
              <div style={{ marginTop:12,display:"flex",justifyContent:"space-between",
                fontSize:11,letterSpacing:"0.15em",textTransform:"uppercase",fontWeight:500,
                color:it.muted?"rgba(255,255,255,0.3)":"rgba(255,255,255,0.7)" }}>
                <span>{it.price}</span>
                {!it.muted&&<span>{_t("viewBtn")}</span>}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

window.ProductGrid = ProductGrid;