// Anstehende Termine + fixer "Termine"-Button.
// Datenform entspricht dem Sanity-Dokumenttyp "termin" (siehe sanity/termin.js).
// Mia pflegt Termine in Sanity (Dokumenttyp "termin"). Ist SANITY konfiguriert, werden sie live geladen;
// sonst wird TERMINE_FALLBACK angezeigt. Vergangene Termine blenden sich automatisch aus.
const SANITY = {projectId:"mk65dr0w", dataset:"production", apiVersion:"2024-01-01"};
// Felder entsprechen dem realen Studio-Schema (schemaTypes/termin.js): typ ist "Workshop"/"Markt" (groß),
// Uhrzeit liegt als uhrzeitVon/uhrzeitBis vor, der Anmeldelink heißt anmeldelink, und "sichtbar" blendet
// abgesagte Termine aus, ohne sie zu löschen. Wird unten auf die von der Website erwartete Form gemappt.
const TERMINE_QUERY = `*[_type=="termin" && datum >= string::split(string(now()),"T")[0] && sichtbar != false] | order(datum asc){_id,typ,titel,datum,uhrzeitVon,uhrzeitBis,ort,preis,leistungen,beschreibung,anmeldelink}`;
const TERMINE_FALLBACK = [
{_id:"raeuchern-2026-10-24",typ:"workshop",titel:"Die Magie des Räucherns mit heimischen Wildkräutern",datum:"2026-10-24",uhrzeit:"15:00 – ca. 18:30 Uhr",ort:"Untere Hauptstraße 30, 2475 Neudorf",preis:"55 €",leistungen:"inkl. Skriptum, Kohle, Räuchermischung u. kl. Jause",beschreibung:"Wir tauchen ein in die spannende Welt des Räucherns. Du erfährst warum geräuchert wird, was dazu gehört und welches Räucherwerk verwendet werden kann. Im Anschluss kannst du dir deine eigene individuelle Räuchermischung selbst kreieren.",anmeldeUrl:null}
];
const TERMINE = TERMINE_FALLBACK;
function normiereTermin(t){
const uhrzeit = [t.uhrzeitVon,t.uhrzeitBis].filter(Boolean).join(" – ");
return {...t,typ:(t.typ||"").toLowerCase(),uhrzeit:uhrzeit||t.uhrzeit,anmeldeUrl:t.anmeldelink||null};
}
function useTermine(){
const [list,setList] = React.useState(TERMINE_FALLBACK);
React.useEffect(()=>{
if(!SANITY.projectId) return;
const url = `https://${SANITY.projectId}.apicdn.sanity.io/v${SANITY.apiVersion}/data/query/${SANITY.dataset}?query=${encodeURIComponent(TERMINE_QUERY)}`;
fetch(url).then(r=>r.json()).then(d=>{if(Array.isArray(d.result)) setList(d.result.map(normiereTermin));}).catch(()=>{});
},[]);
return list;
}

const TERMIN_TYP = {
workshop:{label:"Workshop",accent:"var(--color-secondary)"},
markt:{label:"Markt",accent:"var(--color-primary)"}
};

function scrollToSection(id){
if(!window.gsap||!window.ScrollToPlugin){document.getElementById(id)?.scrollIntoView;return;}
gsap.to(window,{duration:1.1,ease:"power2.inOut",scrollTo:{y:"#"+id,offsetY:80,autoKill:true}});
}

function TerminKarte({t}){
const {Button} = window.MiaSZauberwerkstattDesignSystem_5d2d48;
const typ = TERMIN_TYP[t.typ]||TERMIN_TYP.workshop;
const d = new Date(t.datum+"T00:00:00");
const tag = d.getDate();
const monat = d.toLocaleDateString("de-AT",{month:"short"}).replace(".","");
const wochentag = d.toLocaleDateString("de-AT",{weekday:"long"});
const anmelden = () => t.anmeldeUrl ? window.open(t.anmeldeUrl,"_blank","noopener") : scrollToSection("kontakt");
return <article style={{display:"grid",gridTemplateColumns:"64px minmax(0,1fr)",gap:20,background:"var(--color-canvas-light)",borderLeft:`4px solid ${typ.accent}`,borderRadius:"var(--radius-md)",padding:"24px 24px 24px 20px",alignItems:"start"}}>
<div style={{textAlign:"center",paddingTop:2}}>
<div style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:40,lineHeight:1,color:"var(--color-ink)"}}>{tag}</div>
<div style={{fontSize:13,fontWeight:500,letterSpacing:"1.5px",textTransform:"uppercase",color:"var(--color-muted)",marginTop:6}}>{monat}</div>
</div>
<div style={{display:"flex",flexDirection:"column",gap:8,minWidth:0}}>
<div style={{fontSize:12,fontWeight:500,letterSpacing:"1.5px",textTransform:"uppercase",color:typ.accent}}>{typ.label}</div>
<h3 style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:21,lineHeight:1.3,color:"var(--color-ink)",margin:0,textWrap:"pretty"}}>{t.titel}</h3>
<div style={{fontSize:15,lineHeight:1.55,color:"var(--color-body)"}}>
<div>{wochentag}, {t.uhrzeit}</div>
<div>{t.ort}</div>
{t.preis && <div style={{marginTop:4}}><span style={{fontWeight:500,color:"var(--color-ink)"}}>{t.preis}</span>{t.leistungen && <span> · {t.leistungen}</span>}</div>}
</div>
{t.beschreibung && <p style={{fontSize:15,lineHeight:1.6,color:"var(--color-body)",margin:"4px 0 0",textWrap:"pretty"}}>{t.beschreibung}</p>}
{t.typ==="workshop" && <div style={{marginTop:6,display:"flex",flexWrap:"wrap",alignItems:"center",gap:16}}><Button variant="primary" onClick={anmelden}>Anmelden</Button><a href="tel:+4369911592950" style={{fontSize:15,color:"var(--color-secondary)"}}>0699 / 11 59 29 50</a></div>}
</div>
</article>;
}

function Termine({termine}){
const geladen = useTermine();
termine = termine || geladen;
const heute = new Date(); heute.setHours(0,0,0,0);
const liste = termine.filter(t=>new Date(t.datum+"T00:00:00")>=heute).sort((a,b)=>a.datum.localeCompare(b.datum));
return <section id="termine" style={{padding:"96px 5%",background:"var(--color-canvas)"}}>
<div style={{maxWidth:1200,margin:"0 auto"}}>
<div style={{fontSize:13,fontWeight:500,letterSpacing:"1.5px",textTransform:"uppercase",color:"var(--color-muted)",marginBottom:12}}>Kalender</div>
<h2 data-word-reveal="heading" style={{fontFamily:"var(--font-display)",fontWeight:600,fontSize:36,color:"var(--color-ink)",margin:"0 0 40px"}}>Anstehende Termine</h2>
{liste.length ? <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(min(100%,460px),1fr))",gap:20}}>
{liste.map(t=><TerminKarte key={t._id} t={t}/>)}
</div> : <p style={{fontSize:18,lineHeight:1.6,color:"var(--color-body)",margin:0}}>Aktuell sind keine Termine geplant. Frag gerne direkt nach einem Workshop nach Vereinbarung.</p>}
</div>
</section>;
}

function TermineButton(){
const btn = React.useRef(null), ring = React.useRef(null);
React.useEffect(()=>{
gsap.registerPlugin(ScrollToPlugin,ScrollTrigger);
// Anker-Links (#...) auf der ganzen Seite ebenfalls über GSAP scrollen
const onAnchor = e => {const a=e.target.closest&&e.target.closest('a[href^="#"]'); if(!a) return; const id=a.getAttribute("href").slice(1); if(!id||!document.getElementById(id)) return; e.preventDefault(); scrollToSection(id);};
document.addEventListener("click",onAnchor);
const ctx = gsap.context(()=>{
if(!window.matchMedia("(prefers-reduced-motion: reduce)").matches){
gsap.fromTo(ring.current,{scale:1,opacity:.55},{scale:1.35,opacity:0,duration:2.2,ease:"power1.out",repeat:-1,repeatDelay:1.2});
}
ScrollTrigger.create({trigger:"#termine",start:"top 70%",end:"bottom 30%",onToggle:s=>gsap.to(btn.current,{autoAlpha:s.isActive?0:1,y:s.isActive?12:0,duration:.3,overwrite:true})});
});
return ()=>{document.removeEventListener("click",onAnchor);ctx.revert();};
},[]);
return <button ref={btn} onClick={()=>scrollToSection("termine")} aria-label="Zu den anstehenden Terminen" style={{position:"fixed",right:"max(20px, env(safe-area-inset-right))",bottom:"max(20px, env(safe-area-inset-bottom))",zIndex:1000,height:48,padding:"0 22px",border:"none",borderRadius:999,background:"var(--color-canvas-deep)",color:"var(--color-on-dark)",fontFamily:"var(--font-body)",fontSize:15,fontWeight:500,letterSpacing:".5px",cursor:"pointer",display:"flex",alignItems:"center",gap:10,boxShadow:"0 6px 20px rgba(43,36,32,.25)"}}>
<span ref={ring} aria-hidden="true" style={{position:"absolute",inset:0,borderRadius:999,border:"2px solid var(--color-primary)",pointerEvents:"none"}}></span>
<span aria-hidden="true" style={{width:8,height:8,borderRadius:"50%",background:"var(--color-primary)"}}></span>
Termine
</button>;
}

Object.assign(window,{Termine,TermineButton,TERMINE,TERMINE_QUERY,SANITY,scrollToSection});