const {Button,SectionHeading,ProductCard,Card,PriceSticker}=window.PanMillNDesignSystem_020473;
function HomeScreen({go,open}){
  const P=window.PM_PRODUCTS;
  const pick=ids=>ids.map(id=>P.find(p=>p.id===id));
  const hoy=pick(["cuernos","panazucarado","canutillos","bizcochos"]);
  const nat=pick(["tes","miel","oliva","colageno"]);
  const card=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)}/>;
  return <main>
    <section className="pm-hero" style={{display:"grid",gridTemplateColumns:"1fr 1.05fr",background:"var(--rojo-700)",minHeight:560}}>
      <div className="pm-hero-copy" style={{display:"flex",flexDirection:"column",gap:"var(--sp-7)",alignItems:"flex-start",justifyContent:"center",
        padding:"var(--sp-12) var(--sp-10) var(--sp-12) max(var(--sp-10),calc((100vw - var(--container-max))/2 + var(--sp-8)))"}}>
        <LogoMark size={112}/>
        <h1 className="pm-h1" style={{font:"var(--type-display)",fontSize:"var(--fs-display-l)",textTransform:"uppercase",
          color:"var(--masa-50)",margin:0,letterSpacing:"var(--ls-display)",lineHeight:1.06}}>{t("hero_title")}</h1>
        <span style={{font:"var(--type-script)",fontStyle:"italic",fontSize:"var(--fs-2xl)",color:"var(--oro-300)"}}>{t("hero_sub")}</span>
        <p style={{font:"var(--type-body)",fontSize:"var(--fs-l)",color:"var(--oro-100)",margin:0,maxWidth:"38ch"}}>{t("hero_body")}</p>
        <div style={{display:"flex",gap:"var(--sp-5)",flexWrap:"wrap"}}>
          <Button variant="secondary" size="l" onClick={()=>go("pan")}>{t("cta_pan")}</Button>
          <Button variant="ghost" size="l" onClick={()=>go("visit")} style={{color:"var(--oro-200)"}}>{t("cta_visit")}</Button>
        </div>
      </div>
      <div style={{position:"relative",minHeight:560}}>
        <img className="pm-hero-img" src={window.IMG+"tienda-fachada-hero.jpg"} alt="Fachada de Productos Orgánicos Millán"
          style={{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover"}}/>
      </div>
    </section>

    <div className="pm-band" style={{background:"var(--oro-500)",color:"var(--rojo-800)",padding:"var(--sp-5) var(--sp-8)",
      display:"flex",justifyContent:"center",gap:"var(--sp-11)",flexWrap:"wrap",font:"var(--type-eyebrow)",
      letterSpacing:"var(--ls-caps)",textTransform:"uppercase"}}>
      <span>{t("band_1")}</span><span>·</span><span>{t("band_2")}</span><span>·</span><span>{t("band_3")}</span>
    </div>

    <section className="pm-sec" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--pad-section) var(--sp-8) 0"}}>
      <div className="pm-secheadrow" style={{display:"flex",alignItems:"flex-end",justifyContent:"space-between",gap:"var(--sp-8)",marginBottom:"var(--sp-9)"}}>
        <SectionHeading eyebrow={t("fresh_eyebrow")} title={t("fresh_title")}/>
        <Button variant="ghost" onClick={()=>go("pan")}>{t("all_pan")}</Button>
      </div>
      <div className="pm-grid4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:"var(--gutter)"}}>{hoy.map(card)}</div>
    </section>

    <section className="pm-sec" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--pad-section) var(--sp-8) 0"}}>
      <SectionHeading align="center" eyebrow={t("split_eyebrow")} title={t("split_title")}/>
      <div className="pm-split" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"var(--gutter)",marginTop:"var(--sp-9)"}}>
        {[[t("split_pan_t"),window.IMG+"tienda-vitrina.jpg",t("split_pan_d"),"pan",t("split_pan_c")],
          [t("split_nat_t"),window.IMG+"tienda-repisa-tes.jpg",t("split_nat_d"),"naturista",t("split_nat_c")]].map(([ti,img,d,r,cta])=>
          <Card key={ti} pad="0" style={{overflow:"hidden",display:"flex",flexDirection:"column"}}>
            <img src={img} alt={ti} style={{width:"100%",height:280,objectFit:"cover"}}/>
            <div style={{padding:"var(--pad-card)",display:"flex",flexDirection:"column",gap:"var(--sp-5)",alignItems:"flex-start"}}>
              <h3 style={{font:"var(--type-script)",fontStyle:"italic",fontSize:"var(--fs-2xl)",color:"var(--rojo-600)",margin:0}}>{ti}</h3>
              <p style={{font:"var(--type-body)",color:"var(--text-body)",margin:0}}>{d}</p>
              <Button variant="secondary" onClick={()=>go(r)}>{cta}</Button>
            </div>
          </Card>)}
      </div>
    </section>

    <section style={{marginTop:"var(--pad-section)",background:"var(--rojo-700)",padding:"var(--pad-section) 0"}}>
      <div className="pm-split" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"0 var(--sp-8)",
        display:"grid",gridTemplateColumns:"1fr 1fr",gap:"var(--sp-11)",alignItems:"center"}}>
        <div style={{position:"relative"}}>
          <img src={window.IMG+"miel-panal.jpg"} alt={t("miel_title")} style={{width:"100%",height:420,objectFit:"cover",
            borderRadius:"var(--r-m)",border:"3px solid var(--oro-500)"}}/>
          <PriceSticker price={180} unit={L({es:"el frasco",en:"per jar"})} color="crema" rotate={-9} size={104}
            style={{position:"absolute",right:-16,top:-16}}/>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:"var(--sp-7)",alignItems:"flex-start"}}>
          <SectionHeading tone="invert" eyebrow={t("miel_eyebrow")} title={t("miel_title")}/>
          <p style={{font:"var(--type-body)",fontSize:"var(--fs-l)",color:"var(--oro-100)",margin:0,maxWidth:"42ch"}}>{t("miel_body")}</p>
          <Button variant="secondary" size="l" onClick={()=>open("miel")}>{t("miel_cta")}</Button>
        </div>
      </div>
    </section>

    <section className="pm-sec" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--pad-section) var(--sp-8) 0"}}>
      <div className="pm-secheadrow" style={{display:"flex",alignItems:"flex-end",justifyContent:"space-between",gap:"var(--sp-8)",marginBottom:"var(--sp-9)"}}>
        <SectionHeading eyebrow={t("granel_eyebrow")} title={t("granel_title")}/>
        <Button variant="ghost" onClick={()=>go("naturista")}>{t("all_nat")}</Button>
      </div>
      <div className="pm-grid4" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:"var(--gutter)"}}>{nat.map(card)}</div>
    </section>

    <section className="pm-sec" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--pad-section) var(--sp-8) 0"}}>
      <SectionHeading eyebrow={t("shop_eyebrow")} title={t("shop_title")}/>
      <div className="pm-mosaic" style={{display:"grid",gridTemplateColumns:"2fr 1fr 1fr",gridTemplateRows:"180px 180px",
        gap:"var(--sp-4)",marginTop:"var(--sp-8)"}}>
        {window.PM_GALLERY.slice(0,5).map((g,i)=>
          <img key={g.img} src={g.img} alt={L(g.t)} onClick={()=>go("tienda")}
            style={{width:"100%",height:"100%",objectFit:"cover",cursor:"pointer",borderRadius:"var(--r-s)",
              gridRow:i===0?"span 2":undefined}}/>)}
      </div>
    </section>

    <section className="pm-sec" style={{maxWidth:"var(--container-narrow)",margin:"0 auto",padding:"var(--pad-section) var(--sp-8) 0",textAlign:"center"}}>
      <Card style={{display:"flex",flexDirection:"column",gap:"var(--sp-6)",alignItems:"center",border:"var(--bw-2) solid var(--oro-500)"}}>
        <span style={{font:"var(--type-script)",fontStyle:"italic",fontSize:"var(--fs-2xl)",color:"var(--rojo-600)"}}>{t("order_q")}</span>
        <p style={{font:"var(--type-body)",color:"var(--text-body)",margin:0,maxWidth:"48ch"}}>{t("order_d")}</p>
        <Button variant="primary" size="l" onClick={()=>go("visit")}>{t("order_cta")}</Button>
      </Card>
    </section>
  </main>;
}
window.HomeScreen=HomeScreen;