const {SectionHeading,Button}=window.PanMillNDesignSystem_020473;
function GalleryScreen({go}){
  return <main className="pm-sec" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--sp-11) var(--sp-8) 0"}}>
    <SectionHeading eyebrow={t("visit_eyebrow")} title={t("shop_title")}/>
    <p style={{font:"var(--type-body)",fontSize:"var(--fs-l)",color:"var(--text-body)",maxWidth:"62ch",
      margin:"var(--sp-7) 0 var(--sp-10)"}}>{t("gallery_lead")}</p>
    <div className="pm-gallery" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:"var(--gutter)"}}>
      {window.PM_GALLERY.map((g,i)=><figure key={g.img} style={{margin:0,gridColumn:i===0?"span 2":undefined}}>
        <img src={g.img} alt={L(g.t)} style={{width:"100%",height:i===0?420:260,objectFit:"cover",
          borderRadius:"var(--r-m)",boxShadow:"var(--sh-1)"}}/>
        <figcaption style={{display:"flex",flexDirection:"column",gap:2,padding:"var(--sp-5) 0 0"}}>
          <span style={{font:"var(--type-h3)",color:"var(--text-heading)"}}>{L(g.t)}</span>
          <span style={{font:"var(--type-small)",color:"var(--text-muted)"}}>{L(g.d)}</span>
        </figcaption>
      </figure>)}
    </div>
    <div style={{padding:"var(--pad-section) 0 0",display:"flex",justifyContent:"center"}}>
      <Button variant="primary" size="l" onClick={()=>go("visit")}>{t("gallery_cta")}</Button>
    </div>
  </main>;
}
window.GalleryScreen=GalleryScreen;