const {NavBar,Button,Logo,HoursList,Divider}=window.KlayKeramikAmpCafDesignSystem_6e7cc9;

function Footer(){
  return (
    <footer style={{background:'var(--surface-inverse)',color:'var(--text-on-inverse)',padding:'64px var(--gutter-page-lg) 40px',marginTop:96}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr',gap:64,alignItems:'start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:20,alignItems:'flex-start'}}>
          <Logo variant="wordmark" size={64} color="var(--text-on-inverse)" />
          <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-sm)',lineHeight:'var(--leading-body)',color:'rgba(247,244,238,.68)',maxWidth:'34ch',margin:0}}>
            Werkstatt und Café unter einem Dach. Wir töpfern in kleinen Gruppen und rösten den Kaffee dazu.
          </p>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <span className="klay-label" style={{color:'rgba(247,244,238,.55)'}}>Öffnungszeiten</span>
          <div style={{'--line-hairline':'rgba(247,244,238,.18)','--text-body':'rgba(247,244,238,.8)','--text-muted':'rgba(247,244,238,.45)','--text-display':'var(--klay-paper)'}}>
            <HoursList todayIndex={2} hours={[{day:'Montag'},{day:'Dienstag'},{day:'Mittwoch',hours:'10:00 – 16:00'},{day:'Donnerstag',hours:'10:00 – 16:00'},{day:'Freitag',hours:'10:00 – 16:00'},{day:'Samstag',hours:'10:00 – 16:00'},{day:'Sonntag'}]} />
          </div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <span className="klay-label" style={{color:'rgba(247,244,238,.55)'}}>Besuch</span>
          <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-sm)',lineHeight:'var(--leading-body)',color:'rgba(247,244,238,.8)',margin:0}}>
            Hauptstraße 12<br />10827 Berlin<br />hallo@klay-keramik.de
          </p>
          <Button variant="outline" size="sm" style={{color:'var(--klay-paper)',borderColor:'rgba(247,244,238,.4)',marginTop:8}}>Newsletter</Button>
        </div>
      </div>
      <div style={{maxWidth:'var(--container-max)',margin:'40px auto 0',paddingTop:20,borderTop:'1px solid rgba(247,244,238,.16)',display:'flex',justifyContent:'space-between',gap:24}}>
        <span style={{fontFamily:'var(--font-body)',fontSize:'var(--text-xs)',color:'rgba(247,244,238,.45)'}}>© 2026 Klay Keramik &amp; Café</span>
        <span style={{fontFamily:'var(--font-body)',fontSize:'var(--text-xs)',color:'rgba(247,244,238,.45)',letterSpacing:'var(--tracking-wide)'}}>Impressum · Datenschutz</span>
      </div>
    </footer>
  );
}

function Shell({view,onNavigate,children}){
  return (
    <div style={{background:'var(--surface-page)',minHeight:'100%'}}>
      <NavBar logoSrc="../../assets/logo/klay-logo-mark.jpg"
        items={[{id:'home',label:'Klay'},{id:'kurse',label:'Kurse'},{id:'cafe',label:'Café'},{id:'besuch',label:'Besuch'}]}
        active={view} onNavigate={onNavigate}
        right={<Button size="sm" variant="primary" onClick={()=>onNavigate('kurse')}>Kurs buchen</Button>} />
      {children}
      <Footer />
    </div>
  );
}

Object.assign(window,{Shell,Footer});