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

function Hero({onNavigate}){
  const hero=window.KLAY.startseite.hero;
  return (
    <section style={{padding:'clamp(40px,7vw,88px) var(--gutter-page-lg) 0'}}>
      <div className="klay-split" style={{maxWidth:'var(--container-max)',margin:'0 auto','--split':'1.05fr .95fr',alignItems:'center'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)',alignItems:'flex-start'}}>
          <Badge status="open">{window.klayHoursSummary()}</Badge>
          <h1 style={{fontSize:'var(--text-hero)',lineHeight:'var(--leading-tight)',margin:0}}>
            {hero.titel.split('\n').map((zeile,i)=>
              <React.Fragment key={i}>{i>0&&<br />}{zeile}</React.Fragment>)}
          </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}}>
            {hero.text}
          </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=window.KLAY.startseite.hausvorstellung.map(i=>({k:i.kennzeichen,t:i.titel,d:i.text}));
  return (
    <section style={{padding:'var(--space-section) var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,300px),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.klayCourses().slice(0,3);
  return (
    <section style={{padding:'var(--space-section) 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(auto-fit,minmax(min(100%,300px),1fr))',gap:'var(--space-6)'}}>
          {courses.map(c=><ClassCard key={c.title} {...c} image={'../../assets/imagery/'+c.img} onBook={()=>onBook(c)} />)}
        </div>
      </div>
    </section>
  );
}

/* Der breite Abschnitt in der Mitte. Was er zeigt, entscheidet
   content/site.json → startseite.interlude.medium: "video" oder "bild". */
function Interlude(){
  const il=window.KLAY.startseite.interlude;
  return il.medium==='video' ? <InterludeVideo il={il} /> : <InterludeBild il={il} />;
}

/* Das Standbild wie bisher: Foto mit Verlauf, Zitat weiß darüber. */
function InterludeBild({il}){
  return (
    <section style={{padding:'var(--space-section) 0 0'}}>
      <div style={{position:'relative'}}>
        <img src={'../../assets/imagery/'+il.bild.datei} alt={il.bild.alt} style={{width:'100%',height:'clamp(260px,44vw,520px)',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>
        {il.zitat&&<blockquote style={{position:'absolute',left:'var(--gutter-page-lg)',right:'var(--gutter-page-lg)',bottom:'clamp(24px,4vw,48px)',margin:0,maxWidth:'22ch',fontFamily:'var(--font-display)',fontSize:'var(--text-h2)',lineHeight:'var(--leading-display)',color:'var(--klay-paper)'}}>
          {il.zitat}
        </blockquote>}
      </div>
    </section>
  );
}

/* Das Video spielt genau einmal, sobald es zur Hälfte im Bild ist, und bleibt
   auf dem letzten Bild stehen — aus Ton wird ein Gefäß, dann Ruhe. Kein Loop:
   ein Aufbau lässt sich nicht loopen, ohne dass das Gefäß zurück zum Klumpen springt.

   object-fit: contain statt cover. Der Videohintergrund ist auf die Seitenfarbe
   gehoben, damit die Ränder unsichtbar sind — so wird das Gefäß nie angeschnitten,
   egal wie breit der Bildschirm ist.

   prefers-reduced-motion greift im Projekt nur auf CSS-Animationen. Ein <video>
   braucht die Behandlung selbst: dann gibt es nur das Endbild, das fertige Gefäß. */
function InterludeVideo({il}){
  const ref=React.useRef(null);
  const [reduziert]=React.useState(()=>!!(window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches));
  React.useEffect(()=>{
    const v=ref.current;
    if(reduziert||!v||typeof IntersectionObserver==='undefined') return;
    let gespielt=false;
    const io=new IntersectionObserver(([e])=>{
      if(e.isIntersecting&&!gespielt){gespielt=true;v.play().catch(()=>{});io.disconnect();}
    },{threshold:.5});
    io.observe(v);
    return ()=>io.disconnect();
  },[reduziert]);
  const base='../../assets/video/', v=il.video;
  /* Nicht randlos: Der Videohintergrund trägt Vignette und Papierstruktur, nur
     sein Mittelwert entspricht der Seitenfarbe — randlos bliebe die Kante sichtbar.
     Stattdessen wie Hero und Café-Ausschnitt: eine gerahmte Fläche mit --radius-lg
     (das ImageFrame-Muster). Eigene 16:9-Box, damit nichts angeschnitten wird;
     die Höhe folgt derselben Formel wie das frühere Standbild. */
  const box={display:'block',aspectRatio:'16 / 9',height:'auto',
    width:'min(100%, calc(clamp(260px,44vw,520px) * 16 / 9))',margin:'0 auto',
    objectFit:'cover',background:'var(--surface-page)',borderRadius:'var(--radius-lg)'};
  return (
    <section style={{padding:'var(--space-section) var(--gutter-page-lg) 0'}}>
      {reduziert
        ? <img src={base+v.ende} alt={v.beschreibung} style={box} />
        : <video ref={ref} muted playsInline preload="metadata" poster={base+v.start} aria-label={v.beschreibung} style={box}>
            <source src={base+v.webm} type="video/webm" />
            <source src={base+v.mp4} type="video/mp4" />
            <img src={base+v.ende} alt={v.beschreibung} style={box} />
          </video>}
      {il.zitat&&<blockquote style={{margin:'var(--space-5) auto 0',maxWidth:'var(--container-max)'}}>
        <span style={{display:'block',maxWidth:'26ch',fontFamily:'var(--font-display)',fontSize:'var(--text-h2)',lineHeight:'var(--leading-display)',letterSpacing:'var(--tracking-display)',color:'var(--text-display)'}}>{il.zitat}</span>
      </blockquote>}
    </section>
  );
}

function CafePeek({onNavigate}){
  return (
    <section style={{padding:'var(--space-section) var(--gutter-page-lg) 0'}}>
      <div className="klay-split" style={{maxWidth:'var(--container-max)',margin:'0 auto','--split':'.9fr 1.1fr',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%'}}>
            {window.KLAY.startseite.cafeVorschau.positionen.map(m=>
              <MenuRow key={m.name} name={m.name} description={m.beschreibung} note={m.hinweis} price={m.preis} />)}
          </div>
          <Button variant="clay" onClick={()=>onNavigate('cafe')}>Ganze Karte</Button>
        </div>
      </div>
    </section>
  );
}

/* Die Startseite hat zwei Aufbauten, umgeschaltet in content/site.json →
   startseite.aufbau. "film": das Video ist die Bühne, die Inhalte erscheinen
   beim Scrollen darüber. "klassisch": die Abschnittsseite. Wer reduzierte
   Bewegung eingestellt hat, bekommt immer die klassische — der Film IST Bewegung. */
function HomeScreen({onNavigate,onBook}){
  const st=window.KLAY.startseite;
  const reduziert=!!(window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches);
  if(st.aufbau==='film'&&st.film&&!reduziert) return <HomeFilm onNavigate={onNavigate} onBook={onBook} />;
  return (
    <main>
      <Hero onNavigate={onNavigate} />
      <ThreeUp />
      <NextCourses onBook={onBook} />
      <Interlude />
      <CafePeek onNavigate={onNavigate} />
    </main>
  );
}

/* ---- Film ----------------------------------------------------------------
   Das Video wird gescrubbt: seine Bildposition folgt dem Scrollfortschritt
   durch einen (scrollLaenge × 100vh) hohen Abschnitt, in dem die Bühne klebt.
   Dafür ist es All-Intra kodiert — jedes Bild ein Keyframe, sonst ruckelt es.
   Die Karten liegen ALLE in der Bühne; welche zu sehen ist, entscheidet derselbe
   Fortschritt. Eine Quelle für Bild und Text, nichts kann auseinanderlaufen. */
function HomeFilm({onNavigate,onBook}){
  const st=window.KLAY.startseite, f=st.film, b=f.beschriftungen, base='../../assets/video/';
  const secRef=React.useRef(null), vidRef=React.useRef(null);
  const [fortschritt,setFortschritt]=React.useState(0);

  const karten=[
    {id:'hero',inhalt:<FilmHero onNavigate={onNavigate} b={b} />},
    {id:'haus',inhalt:<FilmHaus b={b} />},
    {id:'kurse',inhalt:<FilmKurse onNavigate={onNavigate} onBook={onBook} b={b} />},
    {id:'cafe',inhalt:<FilmCafe onNavigate={onNavigate} b={b} />}
  ];
  const n=karten.length;
  const aktiv=Math.min(n-1,Math.floor(fortschritt*n));

  React.useEffect(()=>{
    const sec=secRef.current, v=vidRef.current; if(!sec||!v) return;
    let raf=0, letzteZeit=-1, entsperrt=false;
    const tick=()=>{
      raf=0;
      const strecke=sec.offsetHeight-window.innerHeight;
      const p=strecke>0?Math.min(1,Math.max(0,-sec.getBoundingClientRect().top/strecke)):0;
      setFortschritt(p);
      sec.style.setProperty('--film-progress',p.toFixed(4));
      if(v.duration&&isFinite(v.duration)){
        const t=p*v.duration;
        /* nur springen, wenn sich mindestens ein Bild geändert hat */
        if(Math.abs(t-letzteZeit)>=1/24){letzteZeit=t;try{v.currentTime=t}catch(e){}}
      }
    };
    const onScroll=()=>{
      if(!raf) raf=requestAnimationFrame(tick);
      /* iOS gibt das Dekodieren erst nach einem play() frei — kurz an, sofort aus. */
      if(!entsperrt){entsperrt=true;const pr=v.play();if(pr&&pr.then)pr.then(()=>v.pause()).catch(()=>{});}
    };
    /* Nach einem Tabwechsel ist zweierlei kaputt: Browser (Safari besonders) legen
       den Video-Decoder schlafen — currentTime ändert sich, das Bild nicht mehr —,
       und ein noch ausstehender requestAnimationFrame kann verworfen werden, sodass
       das Gate für immer gesetzt bleibt und kein Scroll je wieder ein Bild plant.
       Beides wird bei Rückkehr repariert: Gate lösen, Decoder mit play()/pause()
       wecken, Bild zur aktuellen Scrollposition neu setzen. */
    const wecken=()=>{
      if(raf){cancelAnimationFrame(raf);raf=0;}
      letzteZeit=-1;
      const pr=v.play();
      if(pr&&pr.then) pr.then(()=>{v.pause();tick();}).catch(tick); else tick();
    };
    const onVisible=()=>{if(document.visibilityState==='visible')wecken();};
    v.addEventListener('loadedmetadata',tick);
    window.addEventListener('scroll',onScroll,{passive:true});
    window.addEventListener('resize',onScroll);
    document.addEventListener('visibilitychange',onVisible);
    window.addEventListener('pageshow',wecken);
    tick();
    return ()=>{v.removeEventListener('loadedmetadata',tick);window.removeEventListener('scroll',onScroll);
      window.removeEventListener('resize',onScroll);document.removeEventListener('visibilitychange',onVisible);
      window.removeEventListener('pageshow',wecken);if(raf)cancelAnimationFrame(raf);};
  },[]);

  return (
    <main>
      <section ref={secRef} className="klay-film" style={{height:`calc(${f.scrollLaenge||5} * 100vh)`}} aria-label={f.beschreibung}>
        <div className="klay-film-stage">
          <video ref={vidRef} className="klay-film-video" muted playsInline preload="auto"
            poster={base+f.start} aria-hidden="true">
            <source src={base+f.mp4} type="video/mp4" />
            <source src={base+f.webm} type="video/webm" />
          </video>
          {karten.map((k,i)=>(
            <article key={k.id} className="klay-glass klay-film-card"
              data-side={i%2===0?'left':'right'} data-shown={i===aktiv} aria-hidden={i!==aktiv}
              style={{padding:'clamp(20px,3vw,32px)',display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
              {k.inhalt}
            </article>
          ))}
          <span className="klay-film-progress" style={{width:'100%'}} aria-hidden="true"></span>
        </div>
      </section>
    </main>
  );
}

function FilmHero({onNavigate,b}){
  const hero=window.KLAY.startseite.hero;
  return (<>
    <Badge status="open">{window.klayHoursSummary()}</Badge>
    <h1 style={{fontSize:'var(--text-h2)',lineHeight:'var(--leading-tight)',margin:0}}>
      {hero.titel.split('\n').map((z,i)=><React.Fragment key={i}>{i>0&&<br />}{z}</React.Fragment>)}
    </h1>
    <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-base)',lineHeight:'var(--leading-body)',color:'var(--text-body)',margin:0}}>{hero.text}</p>
    <div style={{display:'flex',gap:'var(--space-3)',flexWrap:'wrap',marginTop:'var(--space-1)'}}>
      <Button onClick={()=>onNavigate('kurse')}>{b.kursBuchen}</Button>
      <Button variant="outline" onClick={()=>onNavigate('cafe')}>{b.menue}</Button>
    </div>
  </>);
}

function FilmHaus({b}){
  const items=window.KLAY.startseite.hausvorstellung;
  return (<>
    <span className="klay-label">{b.haus}</span>
    {items.map((i,idx)=>(
      <div key={i.kennzeichen} style={{paddingTop:idx?'var(--space-3)':0,borderTop:idx?'var(--border-hairline)':'none'}}>
        <h3 style={{fontSize:'var(--text-h4)',margin:'0 0 4px'}}>{i.titel}</h3>
        <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-sm)',lineHeight:'var(--leading-body)',color:'var(--text-body)',margin:0}}>{i.text}</p>
      </div>))}
  </>);
}

function FilmKurse({onNavigate,onBook,b}){
  const kurse=window.klayCourses().slice(0,3);
  return (<>
    <span className="klay-label">{b.kurse}</span>
    {kurse.map((c,idx)=>(
      <div key={c.title} style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:'var(--space-3)',
        paddingTop:idx?'var(--space-3)':0,borderTop:idx?'var(--border-hairline)':'none'}}>
        <div style={{minWidth:0}}>
          <div style={{fontFamily:'var(--font-display)',fontSize:'var(--text-h4)',color:'var(--text-display)'}}>{c.title}</div>
          <div style={{fontFamily:'var(--font-body)',fontSize:'var(--text-xs)',color:'var(--text-muted)'}}>{c.when} · {c.price}</div>
        </div>
        <Button size="sm" variant={c.seats===0?'outline':'primary'} onClick={()=>onBook(c)}>{c.seats===0?'Warteliste':'Buchen'}</Button>
      </div>))}
    <Button variant="ghost" size="sm" onClick={()=>onNavigate('kurse')} style={{alignSelf:'flex-start',marginTop:'var(--space-1)'}}>{b.alleKurse} →</Button>
  </>);
}

function FilmCafe({onNavigate,b}){
  const pos=window.KLAY.startseite.cafeVorschau.positionen;
  return (<>
    <span className="klay-label">{b.cafe}</span>
    <div>{pos.map(m=><MenuRow key={m.name} name={m.name} description={m.beschreibung} note={m.hinweis} price={m.preis} />)}</div>
    <Button variant="clay" onClick={()=>onNavigate('cafe')} style={{alignSelf:'flex-start'}}>{b.ganzeKarte}</Button>
  </>);
}

Object.assign(window,{HomeScreen});