const {Button,Card,Tag,Badge,Divider,SectionHeader,ClassCard,ImageFrame,MenuRow,HoursList}=window.KlayKeramikAmpCafDesignSystem_6e7cc9;

function Hero({onNavigate}){
  return (
    <section style={{padding:'88px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'1.05fr .95fr',gap:64,alignItems:'center'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)',alignItems:'flex-start'}}>
          <Badge status="open">Mittwoch bis Samstag, 10:00 – 16:00</Badge>
          <h1 style={{fontSize:'var(--text-hero)',lineHeight:'var(--leading-tight)',margin:0}}>Ton, Hände,<br />ein Kaffee dazu.</h1>
          <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-lead)',lineHeight:'var(--leading-body)',color:'var(--text-body)',maxWidth:'44ch',margin:0}}>
            Klay ist Werkstatt und Café in einem Raum. Du kommst für drei Stunden an die Drehscheibe — oder nur für den Filterkaffee und ein Stück Kuchen.
          </p>
          <div style={{display:'flex',gap:'var(--space-3)',flexWrap:'wrap',marginTop:8}}>
            <Button size="lg" onClick={()=>onNavigate('kurse')}>Kurs buchen</Button>
            <Button size="lg" variant="outline" onClick={()=>onNavigate('cafe')}>Menü ansehen</Button>
          </div>
        </div>
        <ImageFrame src="../../assets/imagery/studio-shelves.png" ratio="4 / 5" shape="vessel" alt="Werkstatt mit Regalen voller Keramik" />
      </div>
    </section>
  );
}

function ThreeUp(){
  const items=[
    {k:'Werkstatt',t:'Sechs Plätze, drei Stunden',d:'Offene Kurse für Anfänger und alle, die schon einmal am Rad gesessen haben.'},
    {k:'Café',t:'Kaffee aus eigener Röstung',d:'Filter, Espresso, Kuchen vom Blech. Alles auf Geschirr, das hier entstanden ist.'},
    {k:'Laden',t:'Stücke aus dem Regal',d:'Was in der Werkstatt übrig bleibt, verkaufen wir vorne im Laden.'}
  ];
  return (
    <section style={{padding:'96px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-6)'}}>
        {items.map(i=>(
          <Card key={i.k} variant="paper" padding="var(--space-6)" style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
            <span className="klay-label">{i.k}</span>
            <h3 style={{fontSize:'var(--text-h3)',margin:0}}>{i.t}</h3>
            <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-sm)',lineHeight:'var(--leading-body)',color:'var(--text-body)',margin:0}}>{i.d}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

function NextCourses({onBook}){
  const courses=window.KLAY_COURSES.slice(0,3);
  return (
    <section style={{padding:'96px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
        <SectionHeader eyebrow="Nächste Termine" title="Am Rad und mit den Händen" />
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-6)'}}>
          {courses.map(c=><ClassCard key={c.title} {...c} image={'../../assets/imagery/'+c.img} onBook={()=>onBook(c)} />)}
        </div>
      </div>
    </section>
  );
}

function Interlude(){
  return (
    <section style={{padding:'96px 0 0'}}>
      <div style={{position:'relative'}}>
        <img src="../../assets/imagery/cafe-shelves-evening.png" alt="Regale im Abendlicht" style={{width:'100%',height:520,objectFit:'cover',filter:'saturate(.92)'}} />
        <span aria-hidden="true" style={{position:'absolute',inset:0,background:'linear-gradient(to top,rgba(31,29,27,.55),rgba(31,29,27,0) 62%)'}}></span>
        <blockquote style={{position:'absolute',left:'var(--gutter-page-lg)',bottom:48,margin:0,maxWidth:'22ch',fontFamily:'var(--font-display)',fontSize:'var(--text-h2)',lineHeight:'var(--leading-display)',color:'var(--klay-paper)'}}>
          Am Abend bleibt das Licht an, bis das letzte Stück im Regal steht.
        </blockquote>
      </div>
    </section>
  );
}

function CafePeek({onNavigate}){
  return (
    <section style={{padding:'96px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'.9fr 1.1fr',gap:64,alignItems:'center'}}>
        <ImageFrame src="../../assets/imagery/corner-chair-stool.png" ratio="4 / 5" shape="soft" caption="Die Ecke am Fenster" />
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)',alignItems:'flex-start'}}>
          <SectionHeader eyebrow="Café" title="Heute im Café" />
          <div style={{width:'100%'}}>
            <MenuRow name="Filterkaffee" description="Hausröstung, Handfilter" note="Vegan" price="3,80 €" />
            <MenuRow name="Zimtschnecke" description="Frisch aus dem Ofen" price="4,20 €" />
            <MenuRow name="Matcha Latte" description="Hafer oder Vollmilch" note="Saisonal" price="5,40 €" />
          </div>
          <Button variant="clay" onClick={()=>onNavigate('cafe')}>Ganze Karte</Button>
        </div>
      </div>
    </section>
  );
}

function HomeScreen({onNavigate,onBook}){
  return (
    <main>
      <Hero onNavigate={onNavigate} />
      <ThreeUp />
      <NextCourses onBook={onBook} />
      <Interlude />
      <CafePeek onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window,{HomeScreen});