const {IconButton,InfoStrip}=window.PanMillNDesignSystem_020473;
/* The supplied plaque artwork, referenced directly so the real mark can never be
   masked by a stale compiled bundle. */
function LogoMark({size=52,style}){
  return <img src="/assets/logo-millan.png" alt="Pan Millán — pan artesanal desde 1890"
    style={{width:size,height:size,objectFit:"contain",display:"block",...style}}/>;
}
function LogoLockup({size=52}){
  return <span style={{display:"inline-flex",alignItems:"center",gap:size*0.2}}>
    <LogoMark size={size}/>
    <span style={{display:"flex",flexDirection:"column",gap:1}}>
      <span style={{font:"var(--type-script)",fontStyle:"italic",fontSize:size*0.42,color:"var(--rojo-600)",lineHeight:1}}>Pan Millán</span>
      <span style={{font:"var(--type-eyebrow)",fontSize:Math.max(9,size*0.125),letterSpacing:"var(--ls-caps)",
        textTransform:"uppercase",color:"var(--masa-600)",whiteSpace:"nowrap"}}>Productos Orgánicos</span>
    </span>
  </span>;
}
function LangSwitch({lang,setLang}){
  const btn=on=>({padding:"3px 9px",border:"none",background:on?"var(--rojo-600)":"transparent",
    color:on?"var(--masa-50)":"var(--masa-600)",font:"var(--type-eyebrow)",letterSpacing:"var(--ls-caps)",
    textTransform:"uppercase",cursor:"pointer",transition:"var(--t-color)"});
  return <span style={{display:"inline-flex",alignItems:"center",border:"var(--bw-1) solid var(--masa-400)",
    borderRadius:"var(--r-pill)",overflow:"hidden"}}>
    <button type="button" aria-pressed={lang==="es"} onClick={()=>setLang("es")} style={btn(lang==="es")}>Es</button>
    <button type="button" aria-pressed={lang==="en"} onClick={()=>setLang("en")} style={btn(lang==="en")}>En</button>
  </span>;
}
function Header({route,go,lang,setLang}){
  const nav=[["home","nav_home"],["pan","nav_pan"],["naturista","nav_nat"],["tienda","nav_tienda"],["visit","nav_visit"]];
  return <header style={{position:"sticky",top:0,zIndex:20,background:"var(--masa-50)",borderBottom:"var(--bw-2) solid var(--rojo-600)"}}>
    <div className="pm-infostrip"><InfoStrip tone="brand" items={[{icon:"clock",text:t("hours_strip")},{icon:"phone",text:t("phone")},{icon:"map-pin",text:t("place_strip")}]}/></div>
    <div className="pm-headbar" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--sp-5) var(--sp-8)",display:"flex",alignItems:"center",gap:"var(--sp-7)"}}>
      <a href="#" onClick={e=>{e.preventDefault();go("home")}} style={{textDecoration:"none"}}><LogoLockup size={52}/></a>
      <nav className="pm-nav" style={{display:"flex",gap:"var(--sp-5)",marginLeft:"auto",flexWrap:"nowrap"}}>
        {nav.map(([r,k])=><a key={r} href="#" onClick={e=>{e.preventDefault();go(r)}}
          style={{font:"var(--type-eyebrow)",fontSize:"var(--fs-2xs)",letterSpacing:"0.1em",textTransform:"uppercase",
            textDecoration:"none",color:route===r?"var(--rojo-600)":"var(--masa-700)",
            borderBottom:route===r?"var(--bw-3) solid var(--oro-500)":"var(--bw-3) solid transparent",
            paddingBottom:4,whiteSpace:"nowrap"}}>{t(k)}</a>)}
      </nav>
      <div className="pm-actions" style={{display:"flex",gap:"var(--sp-4)",alignItems:"center"}}>
        <LangSwitch lang={lang} setLang={setLang}/>
        <span className="pm-searchbtn"><IconButton icon="search" label={t("search")} variant="ghost"/></span>
      </div>
    </div>
  </header>;
}
function Footer({go}){
  return <footer style={{background:"var(--rojo-700)",color:"var(--masa-200)",marginTop:"var(--sp-13)"}}>
    <div className="pm-footgrid" style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"var(--sp-12) var(--sp-8)",
      display:"grid",gridTemplateColumns:"1.4fr 1fr 1fr 1fr",gap:"var(--sp-10)"}}>
      <div style={{display:"flex",flexDirection:"column",gap:"var(--sp-6)",alignItems:"flex-start"}}>
        <LogoMark size={110}/>
        <p style={{font:"var(--type-small)",color:"var(--oro-100)",margin:0,maxWidth:"32ch"}}>{t("footer_about")}</p>
      </div>
      {[["nav_pan",[["hojaldre","pan"],["azucarado","pan"],["galletas","pan"]]],
        ["nav_nat",[["tes","naturista"],["granel","naturista"],["suplementos","naturista"]]],
        ["nav_tienda",[["shop_title","tienda"],["cta_visit","visit"],["order_cta","visit"]]]].map(([tk,ls])=>
        <div key={tk} style={{display:"flex",flexDirection:"column",gap:"var(--sp-4)"}}>
          <span style={{font:"var(--type-eyebrow)",letterSpacing:"var(--ls-caps)",textTransform:"uppercase",color:"var(--oro-300)"}}>{t(tk)}</span>
          {ls.map(([k,r])=><a key={k} href="#" onClick={e=>{e.preventDefault();go(r)}}
            style={{font:"var(--type-small)",color:"var(--masa-200)",textDecoration:"none"}}>{window.CAT[k]?catName(k):t(k)}</a>)}
        </div>)}
    </div>
    <div style={{borderTop:"1px solid color-mix(in oklab,var(--oro-500) 45%,transparent)",padding:"var(--sp-6) var(--sp-8)",
      textAlign:"center",font:"var(--type-small)",fontSize:"var(--fs-2xs)",color:"var(--oro-200)"}}>
      Pan Millán · Desde 1890 · {t("address")} · {t("phone")} · panaderiamillan.com</div>
  </footer>;
}
Object.assign(window,{Header,Footer,LogoMark,LogoLockup,LangSwitch});