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

/* Öffnungszeiten stehen nur in content/site.json. Diese Umsetzung bringt sie in
   die Form, die HoursList erwartet — Footer und Besuch-Seite nutzen dieselbe. */
function klayHours(){
  const o=window.KLAY.studio.oeffnungszeiten;
  return {todayIndex:o.heuteIndex,hours:o.tage.map(t=>({day:t.tag,hours:t.zeiten}))};
}

/* "Mittwoch bis Samstag, 10:00 – 16:00" wird aus denselben Zeiten errechnet.
   Als fester Text würde er der Öffnungszeitentabelle irgendwann widersprechen. */
function klayHoursSummary(){
  const tage=window.KLAY.studio.oeffnungszeiten.tage;
  const offen=tage.filter(t=>t.zeiten);
  if(!offen.length) return 'Zurzeit geschlossen';
  const gleich=offen.every(t=>t.zeiten===offen[0].zeiten);
  const ersterIdx=tage.indexOf(offen[0]), letzterIdx=tage.indexOf(offen[offen.length-1]);
  const zusammenhaengend=letzterIdx-ersterIdx===offen.length-1;
  if(gleich&&zusammenhaengend&&offen.length>1)
    return `${offen[0].tag} bis ${offen[offen.length-1].tag}, ${offen[0].zeiten}`;
  if(gleich) return `${offen.map(t=>t.tag).join(', ')}, ${offen[0].zeiten}`;
  return offen.map(t=>`${t.tag} ${t.zeiten}`).join(' · ');
}

/* Die offenen Tage, z. B. für die Wunschtag-Auswahl im Anfrageformular. */
function klayOpenDays(){
  return window.KLAY.studio.oeffnungszeiten.tage.filter(t=>t.zeiten).map(t=>t.tag);
}

/* Bildet die Felder aus content/site.json auf die Props von ClassCard ab.
   Die Inhaltsdatei bleibt dadurch deutsch und lesbar für Nicht-Entwickler. */
function klayCourses(){
  return window.KLAY.kurse.map(k=>({
    title:k.titel,level:k.stufe,seats:k.plaetze,when:k.termin,
    duration:k.dauer,price:k.preis,img:k.bild,description:k.beschreibung
  }));
}

Object.assign(window,{klayHours,klayHoursSummary,klayOpenDays,klayCourses});

function Footer(){
  const {adresse,kurzbeschreibung}=window.KLAY.studio;
  return (
    <footer style={{background:'var(--surface-inverse)',color:'var(--text-on-inverse)',padding:'clamp(40px,6vw,64px) var(--gutter-page-lg) 40px',marginTop:'var(--space-section)'}}>
      <div className="klay-split" style={{maxWidth:'var(--container-max)',margin:'0 auto','--split':'1.4fr 1fr 1fr',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}}>
            {kurzbeschreibung}
          </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 {...klayHours()} />
          </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}}>
            {adresse.strasse}<br />{adresse.ort}<br />{adresse.email}
          </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',flexWrap:'wrap',justifyContent:'space-between',gap:'var(--space-3)'}}>
        <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});
