const {Badge,Tag,Card,PriceSticker,SectionHeading,ProductCard}=window.PanMillNDesignSystem_020473;
function ProductScreen({id,go,open}){
  const P=window.PM_PRODUCTS;
  const p=P.find(x=>x.id===id)||P[0];
  const [shot,setShot]=React.useState(0);
  React.useEffect(()=>{setShot(0)},[id]);
  const shots=[p.img].concat(p.detail?[p.detail]:[]);
  const otros=P.filter(x=>x.sec===p.sec&&x.id!==p.id).slice(0,4);
  const esPan=p.sec==="pan";
  return <main className="pm-sec" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--sp-9) var(--sp-8) 0"}}>
    <div style={{display:"flex",gap:"var(--sp-4)",alignItems:"center",font:"var(--type-small)",color:"var(--text-muted)",marginBottom:"var(--sp-8)"}}>
      <a href="#" onClick={e=>{e.preventDefault();go(p.sec)}} style={{color:"var(--text-link)"}}>{esPan?t("nav_pan"):t("nav_nat")}</a>
      <i data-lucide="chevron-right" style={{width:14,height:14}}></i><span>{catName(p.cat)}</span>
      <i data-lucide="chevron-right" style={{width:14,height:14}}></i><span style={{color:"var(--text-body)"}}>{L(p.name)}</span>
    </div>
    <div className="pm-split" style={{display:"grid",gridTemplateColumns:"1.15fr 1fr",gap:"var(--sp-11)",alignItems:"start"}}>
      <div style={{display:"flex",flexDirection:"column",gap:"var(--sp-6)"}}>
        <div style={{position:"relative"}}>
          <img src={shots[shot]} alt={L(p.name)} style={{width:"100%",aspectRatio:"1/1",objectFit:"cover",
            borderRadius:"var(--r-m)",boxShadow:"var(--sh-2)"}}/>
          <PriceSticker price={p.price} unit={L(p.unit)} color={p.sticker} rotate={-8} size={108}
            style={{position:"absolute",left:-18,bottom:-18}}/>
        </div>
        {shots.length>1&&<div style={{display:"flex",gap:"var(--sp-4)",alignItems:"center"}}>
          {shots.map((s,i)=><button key={s} type="button" onClick={()=>setShot(i)} aria-label={t("detail_more")}
            style={{padding:0,width:84,height:84,borderRadius:"var(--r-s)",overflow:"hidden",cursor:"pointer",
              border:i===shot?"var(--bw-2) solid var(--rojo-600)":"var(--bw-hair) solid var(--border-hairline)",background:"none"}}>
            <img src={s} alt="" style={{width:"100%",height:"100%",objectFit:"cover"}}/></button>)}
          <span style={{font:"var(--type-small)",color:"var(--text-muted)"}}>{t("detail_more")}</span>
        </div>}
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:"var(--sp-7)",alignItems:"flex-start"}}>
        <div style={{display:"flex",gap:"var(--sp-4)"}}>
          {p.badge&&<Badge tone="verde">{L(p.badge)}</Badge>}<Badge tone="corteza">{catName(p.cat)}</Badge>
        </div>
        <h1 className="pm-h1" style={{font:"var(--type-display)",fontSize:"var(--fs-display-m)",textTransform:"uppercase",
          color:"var(--rojo-600)",margin:0,lineHeight:1.05}}>{L(p.name)}</h1>
        <p style={{font:"var(--type-body)",fontSize:"var(--fs-l)",color:"var(--text-body)",margin:0,maxWidth:"46ch"}}>
          {L(p.note)}. {esPan?t("pan_desc"):t("nat_desc")}</p>
        <div style={{display:"flex",gap:"var(--sp-4)",flexWrap:"wrap"}}>
          <Tag>{t("tag_nocons")}</Tag>{esPan?<Tag>{t("tag_today")}</Tag>:<Tag>{t("tag_bulk")}</Tag>}<Tag>{t("tag_bag")}</Tag>
        </div>
        <Card style={{width:"100%",display:"flex",flexDirection:"column",gap:"var(--sp-7)"}}>
          <div style={{display:"flex",alignItems:"baseline",gap:"var(--sp-5)"}}>
            <span style={{font:"var(--type-price)",fontSize:"var(--fs-2xl)",color:"var(--text-price)"}}>${p.price}</span>
            <span style={{font:"var(--type-small)",color:"var(--text-muted)"}}>{L(p.unit)}</span>
            <span style={{marginLeft:"auto",font:"var(--type-small)",fontSize:"var(--fs-2xs)",color:"var(--state-warn)"}}>{t("prices_pending")}</span>
          </div>
          <p style={{font:"var(--type-small)",fontSize:"var(--fs-xs)",color:"var(--text-muted)",margin:0}}>{t("no_online")}</p>
        </Card>
      </div>
    </div>
    <section style={{padding:"var(--pad-section) 0 0"}}>
      <SectionHeading eyebrow={esPan?t("also_pan"):t("also_nat")} title={t("take_this")}/>
      <div className="pm-grid4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:"var(--gutter)",marginTop:"var(--sp-8)"}}>
        {otros.map(o=><ProductCard key={o.id} name={L(o.name)} note={L(o.note)} image={o.img} price={o.price}
          unit={L(o.unit)} stickerColor={o.sticker} onClick={()=>open(o.id)}/>)}
      </div>
    </section>
  </main>;
}
window.ProductScreen=ProductScreen;