const {SectionHeading,ProductCard,CategoryPill,Input,Select}=window.PanMillNDesignSystem_020473;
function CatalogScreen({sec,open}){
  const [cat,setCat]=React.useState("all");
  const [q,setQ]=React.useState("");
  React.useEffect(()=>{setCat("all");setQ("")},[sec]);
  const cats=sec==="pan"?window.PM_CATS_PAN:window.PM_CATS_NAT;
  const meta=sec==="pan"
    ?{eyebrow:t("pan_eyebrow"),title:t("nav_pan"),img:window.IMG+"tienda-vitrina.jpg",lead:t("pan_lead"),ph:L({es:"Cuernos, polvorones…",en:"Croissants, polvorones…"})}
    :{eyebrow:t("nat_eyebrow"),title:t("nav_nat"),img:window.IMG+"tienda-repisa-tes.jpg",lead:t("nat_lead"),ph:L({es:"Tila, colágeno, aceite…",en:"Linden, collagen, oil…"})};
  const list=window.PM_PRODUCTS.filter(p=>p.sec===sec&&(cat==="all"||p.cat===cat)&&L(p.name).toLowerCase().includes(q.toLowerCase()));
  return <main>
    <section className="pm-band-photo" style={{position:"relative",height:260,overflow:"hidden"}}>
      <img src={meta.img} alt="" style={{width:"100%",height:"100%",objectFit:"cover"}}/>
      <div style={{position:"absolute",inset:0,background:"color-mix(in oklab,var(--rojo-800) 62%,transparent)"}}></div>
      <div style={{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center"}}>
        <SectionHeading align="center" tone="invert" eyebrow={meta.eyebrow} title={meta.title}/>
      </div>
    </section>
    <div className="pm-sec" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--sp-10) var(--sp-8) 0"}}>
      <p style={{font:"var(--type-body)",fontSize:"var(--fs-l)",color:"var(--text-body)",maxWidth:"62ch",margin:0}}>{meta.lead}</p>
      <div className="pm-filters" style={{display:"flex",gap:"var(--sp-6)",alignItems:"flex-end",margin:"var(--sp-9) 0 var(--sp-7)"}}>
        <Input label={t("search")} prefixIcon="search" placeholder={meta.ph} value={q}
          onChange={e=>setQ(e.target.value)} style={{flex:1,maxWidth:360}}/>
        <Select label={t("sort")} options={[t("sort_1"),t("sort_2"),t("sort_3")]} style={{width:220}}/>
        <span style={{marginLeft:"auto",font:"var(--type-small)",color:"var(--text-muted)"}}>{list.length} {t("count")}</span>
      </div>
      <div style={{display:"flex",gap:"var(--sp-4)",flexWrap:"wrap",paddingBottom:"var(--sp-8)",
        borderBottom:"var(--bw-hair) solid var(--border-hairline)"}}>
        <CategoryPill active={cat==="all"} onClick={()=>setCat("all")}>{t("all")}</CategoryPill>
        {cats.map(([k,ic])=><CategoryPill key={k} icon={ic} active={cat===k} onClick={()=>setCat(k)}>{catName(k)}</CategoryPill>)}
      </div>
      <div className="pm-grid4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:"var(--gutter)",paddingTop:"var(--sp-9)"}}>
        {list.map(p=><ProductCard key={p.id} name={L(p.name)} note={L(p.note)} image={p.img} price={p.price}
          unit={L(p.unit)} stickerColor={p.sticker} badge={p.badge&&L(p.badge)} onClick={()=>open(p.id)}/>)}
      </div>
      {list.length===0&&<p style={{font:"var(--type-body)",color:"var(--text-muted)",padding:"var(--sp-10) 0"}}>{t("empty")}</p>}
    </div>
  </main>;
}
window.CatalogScreen=CatalogScreen;