<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAI.ENN Podcast — Endless New Now.</title>
<meta name="description" content="Der CAI.ENN Podcast. KI, Kreativität und Flow-Working — zum Anhören.">
<meta property="og:title" content="CAI.ENN Podcast — KI, Kreativität und Flow-Working">
<meta property="og:description" content="Unsere Gedanken, Learnings und Ideen als Audio-Podcast. Erstellt mit KI-Unterstützung.">
<meta property="og:url" content="https://team-caienn.com/podcast">
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CAI.ENN Podcast">
<meta name="twitter:description" content="KI, Kreativität und Flow-Working — zum Anhören.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#060608;--bg2:#0C0C10;--text:#F2F0ED;--muted:#7A7A85;--a1:#004D98;--a2:#A50044;--a3:#4ECBA0;--f:'Outfit',sans-serif;--m:'Space Mono',monospace}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
a{color:var(--a3);text-decoration:none;transition:.3s}a:hover{color:var(--a1)}
button{font-family:var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent}

/* Milky Way Background */
.space{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.space-img{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80') center center/cover no-repeat;opacity:.45;animation:slowZoom 60s ease-in-out infinite alternate}
@keyframes slowZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.space-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,8,0.2) 0%,rgba(6,6,8,0.1) 15%,rgba(6,6,8,0.3) 30%,rgba(6,6,8,0.75) 45%,rgba(6,6,8,0.95) 55%,rgba(6,6,8,1) 65%)}
.space-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(6,6,8,0.4) 70%,rgba(6,6,8,0.85) 100%)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(24px);background:rgba(6,6,8,0.7);border-bottom:1px solid rgba(255,255,255,0.06)}
.logo{font-weight:800;font-size:1.3rem}
.logo-g{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0.6) 50%,rgba(180,200,220,0.7) 70%,#fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3))}
.nr{display:flex;gap:10px;align-items:center}
.nb{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--muted);padding:6px 14px;border-radius:99px;font-size:12px;transition:.3s;text-decoration:none}
.nb:hover{border-color:rgba(255,255,255,0.2);color:var(--text)}

.hero{padding:6.5rem 2rem 1.5rem;text-align:center;position:relative;z-index:1}
.hero h1{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;letter-spacing:-0.04em;margin-bottom:.3rem;
  background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 40%,rgba(180,200,220,0.5) 60%,rgba(255,255,255,0.9) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
.hero p{color:var(--muted);font-size:clamp(.85rem,1.6vw,1rem);font-weight:300;position:relative;z-index:1}

.main{max-width:700px;margin:0 auto;padding:1.5rem 1.5rem 5rem;position:relative;z-index:1}

/* ═══ PLAYER ═══ */
.pl{display:none;margin-bottom:2rem;animation:fadeUp .4s ease both}
.pl.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pl-card{background:rgba(255,255,255,0.04);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:28px 24px;position:relative;overflow:hidden}
.pl-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent)}

.pl-head{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.pl-cover{width:80px;height:80px;border-radius:18px;background:linear-gradient(135deg,rgba(210,190,29,0.12),rgba(55,121,182,0.12));display:flex;align-items:center;justify-content:center;font-size:2.4rem;flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08)}
.pl-info{flex:1;min-width:0}
.pl-status{font-family:var(--m);font-size:10px;color:var(--a3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px;display:flex;align-items:center;gap:5px}
.pl-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--a3);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.5)}}
.pl-name{font-size:1.15rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sub{font-size:13px;color:var(--muted);margin-top:1px;line-height:1.5}

/* Progress */
.prog{margin-bottom:18px}
.prog-bar{width:100%;height:8px;background:rgba(255,255,255,0.08);border-radius:99px;cursor:pointer;position:relative}
.prog-bar:hover{height:10px}
.prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--a1),var(--a2));width:0%;position:relative;pointer-events:none}
.prog-thumb{position:absolute;right:-8px;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.4);transform:translateY(-50%) scale(0);transition:.15s;pointer-events:none}
.prog-bar:hover .prog-thumb{transform:translateY(-50%) scale(1)}
.pl-times{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--m);font-size:11px;color:var(--muted)}

/* Controls - BIGGER & CLICKABLE */
.pl-ctrls{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:18px}
.btn-skip{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:var(--text);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:.2s;position:relative}
.btn-skip:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}
.btn-skip:active{transform:scale(0.9);background:rgba(255,255,255,0.15)}
.btn-skip span{font-size:9px;font-family:var(--m);font-weight:700;margin-top:-2px;pointer-events:none}
.btn-skip svg{width:18px;height:18px;pointer-events:none}

.btn-play{width:80px;height:80px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--a1),var(--a2));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 28px rgba(210,190,29,0.3);transition:.2s}
.btn-play:hover{transform:scale(1.06);box-shadow:0 8px 36px rgba(210,190,29,0.4)}
.btn-play:active{transform:scale(0.93)}
.btn-play svg{width:30px;height:30px;fill:#0a0a0f;pointer-events:none}

/* Bottom Row */
.pl-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--muted);padding:8px 16px;border-radius:99px;font-size:12px;font-family:var(--m);font-weight:600;transition:.2s;display:flex;align-items:center;gap:6px}
.pill:hover{border-color:rgba(255,255,255,0.25);color:var(--text);background:rgba(255,255,255,0.08)}
.pill:active{transform:scale(0.94)}
.pill.on{border-color:var(--a1);color:var(--a1);background:rgba(210,190,29,0.1)}
.pill-share{color:var(--a3);border-color:rgba(0,229,160,0.15)}
.pill-share:hover{background:rgba(0,229,160,0.08);border-color:var(--a3)}
.vol-row{display:flex;align-items:center;gap:8px}
.vol-btn{background:none;border:none;color:var(--muted);font-size:18px;padding:6px;transition:.2s}
.vol-btn:hover{color:var(--text)}
.vol-range{-webkit-appearance:none;width:80px;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;outline:none}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text);box-shadow:0 1px 6px rgba(0,0,0,0.3)}

.kb{text-align:center;margin-top:12px;font-size:9px;color:rgba(255,255,255,0.12);font-family:var(--m)}
kbd{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:3px;padding:1px 5px;font-size:9px;font-family:var(--m)}

/* ═══ EPISODES ═══ */
.sec-label{font-family:var(--m);font-size:11px;color:var(--a1);text-transform:uppercase;letter-spacing:.15em;margin-bottom:8px}
.sec-title{font-size:clamp(1.2rem,3vw,1.5rem);font-weight:800;letter-spacing:-0.02em;margin-bottom:4px}
.sec-desc{color:var(--muted);font-size:13px;margin-bottom:1.2rem}
.ep-list{display:flex;flex-direction:column;gap:8px}
.ep{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:16px;padding:16px 18px;cursor:pointer;transition:.3s;position:relative;overflow:hidden}
.ep:hover{border-color:rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.ep.act{border-color:rgba(210,190,29,0.2);background:rgba(210,190,29,0.03)}
.ep::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--a1),var(--a2));opacity:0;transition:.3s}
.ep:hover::after,.ep.act::after{opacity:1}
.ep-row{display:flex;align-items:center;gap:14px}
.ep-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,rgba(210,190,29,0.08),rgba(55,121,182,0.08));display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;border:1px solid rgba(255,255,255,0.06)}
.ep-body{flex:1;min-width:0}
.ep-name{font-size:14px;font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:8px}
.eq{display:none;gap:2px;align-items:flex-end;height:12px}
.ep.act .eq{display:inline-flex}
.bar{width:2.5px;background:var(--a1);border-radius:1px;animation:eqA .7s ease-in-out infinite alternate}
.bar:nth-child(1){height:5px}.bar:nth-child(2){height:9px;animation-delay:.15s}.bar:nth-child(3){height:3px;animation-delay:.3s}.bar:nth-child(4){height:7px;animation-delay:.1s}
@keyframes eqA{0%{height:3px}100%{height:12px}}
.ep-sub{color:var(--muted);font-size:12px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ep-tags{display:flex;gap:10px;margin-top:3px;font-family:var(--m);font-size:10px;color:rgba(255,255,255,0.22)}
.ep-btns{display:flex;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.04)}
.ep-btn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--muted);padding:6px 14px;border-radius:99px;font-size:11px;transition:.2s;display:flex;align-items:center;gap:5px}
.ep-btn:hover{color:var(--a3);border-color:rgba(0,229,160,0.3);background:rgba(0,229,160,0.05)}
.ep-btn:active{transform:scale(0.95)}
.ep-btn-blog{color:var(--a1)!important;border-color:rgba(210,190,29,0.2)!important;background:rgba(210,190,29,0.05)!important}
.ep-btn-blog:hover{border-color:rgba(210,190,29,0.4)!important;background:rgba(210,190,29,0.1)!important;color:var(--a1)!important}
.pl-blog-link{display:none;margin-top:14px;text-align:center}
.pl-blog-link.on{display:block}
.pl-blog-link a{display:inline-flex;align-items:center;gap:6px;background:rgba(210,190,29,0.08);border:1px solid rgba(210,190,29,0.2);color:var(--a1);padding:10px 20px;border-radius:99px;font-size:13px;font-weight:600;transition:.25s;text-decoration:none}
.pl-blog-link a:hover{background:rgba(210,190,29,0.15);border-color:rgba(210,190,29,0.4);transform:translateY(-1px)}

/* ═══ COMMENTS ═══ */
.comments{margin-top:3rem}
.cmt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cmt-count{font-family:var(--m);font-size:12px;color:var(--muted)}
.cmt-form{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:18px;margin-bottom:20px}
.cmt-row{display:flex;gap:12px;flex-wrap:wrap}
.cmt-input{flex:1;min-width:120px;padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:var(--text);font-size:14px;outline:none;font-family:var(--f)}
.cmt-input:focus{border-color:var(--a1)}
.cmt-textarea{width:100%;margin-top:10px;padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:var(--text);font-size:14px;outline:none;font-family:var(--f);min-height:70px;resize:vertical}
.cmt-textarea:focus{border-color:var(--a1)}
.cmt-submit{margin-top:10px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#0a0a0f;border:none;padding:10px 24px;border-radius:99px;font-weight:700;font-size:13px;transition:.2s}
.cmt-submit:hover{transform:scale(1.03);box-shadow:0 4px 20px rgba(210,190,29,0.2)}
.cmt-submit:active{transform:scale(0.97)}
.cmt-submit:disabled{opacity:.5}

.cmt-list{display:flex;flex-direction:column;gap:12px}
.cmt{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:14px 16px}
.cmt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cmt-author{font-weight:700;font-size:14px}
.cmt-date{font-family:var(--m);font-size:10px;color:var(--muted)}
.cmt-text{font-size:14px;color:rgba(255,255,255,0.8);line-height:1.6}
.cmt-empty{text-align:center;padding:2rem;color:var(--muted);font-size:13px}

/* Toast & Footer */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:400;background:rgba(26,26,42,0.92);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:12px 22px;font-size:13px;opacity:0;transition:.4s;pointer-events:none;white-space:nowrap}
.toast.ok{border-color:rgba(0,229,160,0.4);color:var(--a3)}.toast.err{border-color:rgba(255,107,107,0.4);color:#ff6b6b}
.toast.vis{opacity:1;transform:translateX(-50%) translateY(0)}
.empty{text-align:center;padding:3rem 2rem;color:var(--muted)}.empty span{font-size:2.2rem;display:block;margin-bottom:.5rem;opacity:.4}
footer{text-align:center;padding:20px;color:var(--muted);font-size:11px;border-top:1px solid rgba(255,255,255,0.04);font-family:var(--m);position:relative;z-index:1}

@media(max-width:640px){
.pl-head{gap:12px}.pl-cover{width:64px;height:64px;font-size:2rem;border-radius:14px}
.btn-play{width:68px;height:68px}.btn-play svg{width:26px;height:26px}
.btn-skip{width:48px;height:48px}.pl-ctrls{gap:14px}
.vol-row{display:none}.kb{display:none}
.pl-bottom{justify-content:center}
.cmt-row{flex-direction:column}
}
</style>
</head>
<body>
<div class="space"><div class="space-img"></div><div class="space-grad"></div><div class="space-vig"></div></div>
<nav>
<a href="/" class="logo"><span class="logo-g">CAI.ENN</span></a>
<div class="nr">
<a href="/" class="nb">← Startseite</a>
<a href="https://tzcgwbjkzhmftojtdpnh.supabase.co/functions/v1/podcast-rss" class="nb" target="_blank" title="RSS Feed abonnieren">📡 RSS Feed</a>
</div>
</nav>
<section class="hero">
<h1>🎙️ CAI.ENN Podcast</h1>
<p>KI, Kreativität und Flow-Working — zum Anhören.</p>
</section>
<div class="main">

<!-- PLAYER -->
<div class="pl" id="player">
<div class="pl-card">
<div class="pl-head">
<div class="pl-cover" id="pl-cover">🎙️</div>
<div class="pl-info">
<div class="pl-status">Wird abgespielt</div>
<div class="pl-name" id="pl-name"></div>
<div class="pl-sub" id="pl-sub"></div>
</div>
</div>
<div class="prog">
<div class="prog-bar" id="prog-bar"><div class="prog-fill" id="prog-fill"><div class="prog-thumb"></div></div></div>
<div class="pl-times"><span id="t-cur">0:00</span><span id="t-rem">-0:00</span></div>
</div>
<div class="pl-ctrls">
<button class="btn-skip" onclick="skip(-15)" type="button" title="-15s">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M1 4v6h6"/><path d="M3.5 15a9 9 0 1 0 .5-5.3L1 10"/></svg>
<span>15</span>
</button>
<button class="btn-play" id="btn-play" onclick="togglePlay()" type="button" title="Play/Pause">
<svg id="ico-play" viewBox="0 0 24 24"><polygon points="9,4 21,12 9,20"/></svg>
</button>
<button class="btn-skip" onclick="skip(30)" type="button" title="+30s">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M23 4v6h-6"/><path d="M20.5 15a9 9 0 1 1-.5-5.3L23 10"/></svg>
<span>30</span>
</button>
</div>
<div class="pl-bottom">
<div class="pill-row">
<button class="pill" id="pill-speed" onclick="cycleSpeed()" type="button">1×</button>
<button class="pill" id="pill-sleep" onclick="cycleSleep()" type="button">🌙 <span id="sleep-txt">Timer</span></button>
<button class="pill pill-share" onclick="shareNow()" type="button">↗ Teilen</button>
</div>
<div class="vol-row">
<button class="vol-btn" onclick="toggleMute()" type="button"><span id="vol-ico">🔊</span></button>
<input type="range" class="vol-range" id="vol-range" min="0" max="1" step="0.02" value="1" oninput="setVol(+this.value)">
</div>
</div>
<div class="kb"><kbd>Space</kbd> Play · <kbd>←</kbd> -15s · <kbd>→</kbd> +30s · <kbd>↑↓</kbd> Lautstärke</div>
<div class="pl-blog-link" id="pl-blog-link"><a id="pl-blog-link-a" href="/blog">📝 Zum passenden Blog-Beitrag →</a></div>
</div>
</div>

<!-- EPISODES -->
<div class="sec-label">// Alle Episoden</div>
<h2 class="sec-title">Podcast-Bibliothek</h2>
<p class="sec-desc">Klicke auf eine Episode zum Anhören.</p>
<div class="ep-list" id="ep-list"><div class="empty"><span>🎧</span>Noch keine Episoden. Komm bald wieder!</div></div>

<!-- COMMENTS -->
<div class="comments" id="comments-section" style="display:none">
<div class="cmt-header">
<h2 class="sec-title" style="margin-bottom:0">💬 Kommentare</h2>
<span class="cmt-count" id="cmt-count"></span>
</div>
<div class="cmt-form">
<div class="cmt-row">
<input class="cmt-input" id="cmt-name" placeholder="Dein Name" maxlength="50">
</div>
<textarea class="cmt-textarea" id="cmt-text" placeholder="Was denkst du über diese Folge?" maxlength="2000"></textarea>
<button class="cmt-submit" id="cmt-btn" onclick="postComment()" type="button">Kommentar abschicken</button>
</div>
<div class="cmt-list" id="cmt-list"></div>
</div>
</div>

<div style="max-width:500px;margin:2rem auto 0;text-align:center;padding:28px 24px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px">
<div style="font-size:1.2rem;font-weight:700;margin-bottom:4px">Neue Folge? Wir sagen Bescheid!</div>
<p style="color:var(--muted);font-size:13px;margin-bottom:14px">Kein Spam, nur Podcast-Updates.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">
<input type="email" id="pod-nl-email" placeholder="Deine E-Mail" style="flex:1;min-width:180px;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:var(--text);font-size:13px;outline:none;font-family:var(--f)" onfocus="this.style.borderColor='var(--a1)'" onblur="this.style.borderColor='rgba(255,255,255,0.1)'">
<button onclick="podNLSub()" style="background:linear-gradient(135deg,var(--a1),var(--a2));color:#0a0a0f;border:none;padding:10px 20px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--f);white-space:nowrap">Dabei! →</button>
</div>
<p id="pod-nl-ok" style="display:none;color:var(--a3);font-size:12px;margin-top:8px"></p>
</div>

<footer>
<span style="color:var(--a1)">CAI</span><span style="color:var(--a2)">.</span><span style="color:var(--a3)">ENN</span> Podcast · Handgemacht mit ♥ und KI<br>
<span style="font-size:10px;opacity:.5">Audioinhalte mit KI-Unterstützung erstellt · <a href="/impressum" style="color:var(--muted)">Impressum</a> · <a href="/datenschutz" style="color:var(--muted)">Datenschutz</a></span>
</footer>
<audio id="audio" preload="metadata"></audio>
<div class="toast" id="toast"></div>

<script>
const SB_URL="https://tzcgwbjkzhmftojtdpnh.supabase.co";
const SB_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR6Y2d3YmpremhtZnRvanRkcG5oIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzM2MDk0MzAsImV4cCI6MjA4OTE4NTQzMH0.1Pifo0WzpSfhFNOA7nra1MumNQuV2VfyyyjrpJHe-JE";
const sb=supabase.createClient(SB_URL,SB_KEY);

let pods=[],idx=-1,playing=false,dragging=false;
const au=document.getElementById("audio");
const speeds=[0.75,1,1.25,1.5,1.75,2];let si=1;
const sleeps=[0,5,10,15,30,45,60];const sleepNames=["Timer","5 min","10 min","15 min","30 min","45 min","60 min"];
let sli=0,slTimer=null;

async function init(){
  await loadTheme();await loadPods();setupAudio();setupDrag();setupKeys();
  // Deep-link: auto-play episode from URL hash
  const hash=window.location.hash;
  if(hash&&hash.startsWith("#episode-")){
    const num=parseInt(hash.replace("#episode-",""),10);
    if(num>=1&&num<=pods.length)playEp(num-1);
  }
}

async function loadTheme(){
  try{const{data}=await sb.from("caienn_settings").select("*").eq("category","colors");
  if(data)data.forEach(r=>{const m={color_a1:'--a1',color_a2:'--a2',color_a3:'--a3',color_bg:'--bg',color_bg2:'--bg2',color_text:'--text',color_muted:'--muted'};
  if(m[r.key])document.documentElement.style.setProperty(m[r.key],r.value)})}catch(e){}}

async function loadPods(){
  try{const{data}=await sb.from("caienn_podcasts").select("*").eq("published",true).order("created_at",{ascending:false});
  pods=data||[];render()}catch(e){console.error(e)}}

function render(){
  const list=document.getElementById("ep-list");
  if(!pods.length){list.innerHTML='<div class="empty"><span>🎧</span>Noch keine Episoden. Komm bald wieder!</div>';return}
  list.innerHTML="";
  pods.forEach((ep,i)=>{
    const d=document.createElement("div");d.className="ep"+(idx===i?" act":"");
    d.innerHTML=`
    <div class="ep-row" onclick="playEp(${i})">
      <div class="ep-icon">${ep.cover_emoji||'🎙️'}</div>
      <div class="ep-body">
        <div class="ep-name">${esc(ep.title)} <span class="eq"><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span></span></div>
        <div class="ep-sub">${esc(ep.description||'')}</div>
        <div class="ep-tags">
          <span>${new Date(ep.created_at).toLocaleDateString("de-DE",{day:"2-digit",month:"short",year:"numeric"})}</span>
          ${ep.duration_seconds?'<span>'+fmt(ep.duration_seconds)+'</span>':''}
          ${ep.play_count?'<span>▶ '+ep.play_count+'</span>':''}
          <span style="color:rgba(0,229,160,0.4)">🤖 KI-Audio</span>
        </div>
      </div>
    </div>
    <div class="ep-btns">
      <button class="ep-btn" type="button" onclick="event.stopPropagation();shareEp(${i})">↗ Teilen</button>
      <button class="ep-btn" type="button" onclick="event.stopPropagation();scrollToComments(${i})" style="color:var(--muted)">💬 Kommentare</button>
      ${ep.linked_blog_slug?'<a class="ep-btn ep-btn-blog" href="/blog#'+esc(ep.linked_blog_slug)+'" onclick="event.stopPropagation()">📝 Zum Blog</a>':''}
    </div>`;
    list.appendChild(d);
  });
}

// ═══ PLAYBACK ═══
function playEp(i){
  if(i===idx&&playing){au.pause();return}
  if(i===idx&&!playing){au.play();return}
  idx=i;const ep=pods[i];
  au.src=ep.audio_url;au.play();
  document.getElementById("pl-name").textContent=ep.title;
  document.getElementById("pl-sub").textContent=ep.description||'';
  document.getElementById("pl-cover").textContent=ep.cover_emoji||'🎙️';
  document.getElementById("player").classList.add("on");
  // Blog-Verlinkung im Player
  const blogLink=document.getElementById("pl-blog-link");
  const blogLinkA=document.getElementById("pl-blog-link-a");
  if(ep.linked_blog_slug){blogLinkA.href="/blog#"+ep.linked_blog_slug;blogLink.classList.add("on")}else{blogLink.classList.remove("on")}
  render();loadComments(ep.id);
  document.getElementById("comments-section").style.display="block";
  sb.rpc("increment_podcast_stat",{podcast_id:ep.id,stat_name:"play"}).catch(()=>{});
  // Deep-link: update URL hash
  try{history.replaceState(null,null,"#episode-"+(i+1))}catch(e){}
}

function togglePlay(){if(!au.src)return;playing?au.pause():au.play()}
function skip(s){if(!au.src)return;au.currentTime=Math.max(0,Math.min(au.duration||0,au.currentTime+s))}

function setupAudio(){
  au.addEventListener("play",()=>{playing=true;
    document.getElementById("ico-play").innerHTML='<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>';
    render();
    if('mediaSession' in navigator&&idx>=0){const ep=pods[idx];
      navigator.mediaSession.metadata=new MediaMetadata({title:ep.title,artist:'CAI.ENN Podcast'});
      navigator.mediaSession.setActionHandler('play',()=>au.play());
      navigator.mediaSession.setActionHandler('pause',()=>au.pause());
      navigator.mediaSession.setActionHandler('seekbackward',()=>skip(-15));
      navigator.mediaSession.setActionHandler('seekforward',()=>skip(30))}});
  au.addEventListener("pause",()=>{playing=false;
    document.getElementById("ico-play").innerHTML='<polygon points="9,4 21,12 9,20"/>';render()});
  au.addEventListener("timeupdate",()=>{if(dragging||!au.duration)return;
    document.getElementById("prog-fill").style.width=(au.currentTime/au.duration*100)+"%";
    document.getElementById("t-cur").textContent=fmt(Math.floor(au.currentTime));
    document.getElementById("t-rem").textContent="-"+fmt(Math.floor(au.duration-au.currentTime))});
  au.addEventListener("loadedmetadata",()=>{
    document.getElementById("t-rem").textContent="-"+fmt(Math.floor(au.duration));
    if(idx>=0&&!pods[idx].duration_seconds){const d=Math.floor(au.duration);
      sb.from("caienn_podcasts").update({duration_seconds:d}).eq("id",pods[idx].id).then(()=>{pods[idx].duration_seconds=d;render()})}});
  au.addEventListener("ended",()=>{if(idx<pods.length-1)playEp(idx+1)});
}

function setupDrag(){
  const t=document.getElementById("prog-bar");
  function seek(e){const r=t.getBoundingClientRect();const x=e.clientX||e.touches?.[0]?.clientX||0;
    const p=Math.max(0,Math.min(1,(x-r.left)/r.width));
    document.getElementById("prog-fill").style.width=(p*100)+"%";if(au.duration)au.currentTime=p*au.duration}
  t.addEventListener("mousedown",e=>{dragging=true;seek(e)});
  document.addEventListener("mousemove",e=>{if(dragging)seek(e)});
  document.addEventListener("mouseup",()=>{dragging=false});
  t.addEventListener("touchstart",e=>{dragging=true;seek(e)},{passive:true});
  t.addEventListener("touchmove",e=>{if(dragging)seek(e)},{passive:true});
  t.addEventListener("touchend",()=>{dragging=false});
}

function setupKeys(){document.addEventListener("keydown",e=>{
  if(e.target.tagName==="INPUT"||e.target.tagName==="TEXTAREA")return;
  if(e.code==="Space"){e.preventDefault();togglePlay()}
  if(e.code==="ArrowLeft"){e.preventDefault();skip(-15)}
  if(e.code==="ArrowRight"){e.preventDefault();skip(30)}
  if(e.code==="ArrowUp"){e.preventDefault();setVol(Math.min(1,au.volume+0.05))}
  if(e.code==="ArrowDown"){e.preventDefault();setVol(Math.max(0,au.volume-0.05))}})}

function cycleSpeed(){si=(si+1)%speeds.length;au.playbackRate=speeds[si];
  const p=document.getElementById("pill-speed");p.textContent=speeds[si]+"×";p.classList.toggle("on",speeds[si]!==1)}

function cycleSleep(){sli=(sli+1)%sleeps.length;const m=sleeps[sli];
  const p=document.getElementById("pill-sleep");document.getElementById("sleep-txt").textContent=sleepNames[sli];
  p.classList.toggle("on",m>0);if(slTimer){clearTimeout(slTimer);slTimer=null}
  if(m>0){slTimer=setTimeout(()=>{au.pause();toast("💤 Gute Nacht!",1);sli=0;document.getElementById("sleep-txt").textContent="Timer";p.classList.remove("on");slTimer=null},m*60000);
  toast("🌙 Sleep Timer: "+m+" Minuten",1)}}

function setVol(v){v=Math.max(0,Math.min(1,v));au.volume=v;document.getElementById("vol-range").value=v;
  document.getElementById("vol-ico").textContent=v===0?'🔇':v<0.3?'🔈':v<0.7?'🔉':'🔊'}
function toggleMute(){au.muted=!au.muted;document.getElementById("vol-ico").textContent=au.muted?'🔇':'🔊'}

// ═══ SHARE ═══
function shareNow(){if(idx>=0)doShare(pods[idx])}
function shareEp(i){doShare(pods[i])}

function doShare(ep){
  var url="https://team-caienn.com/podcast";
  // Track share
  try{sb.rpc("increment_podcast_stat",{podcast_id:ep.id,stat_name:"share"})}catch(e){}
  // Mobile: native share dialog (here title+text are fine)
  var isMobile=/iPhone|iPad|Android|Mobile/i.test(navigator.userAgent);
  if(isMobile&&navigator.share){
    navigator.share({title:ep.title+" — CAI.ENN Podcast",text:ep.description||"",url:url}).catch(function(){});
    return;
  }
  // Desktop: copy ONLY the URL (no text before it!)
  var ta=document.createElement("textarea");
  ta.value=url;
  ta.setAttribute("readonly","");
  ta.style.position="fixed";ta.style.left="-9999px";ta.style.top="0";ta.style.opacity="0";
  document.body.appendChild(ta);
  ta.select();
  ta.setSelectionRange(0,99999);
  var copied=false;
  try{copied=document.execCommand("copy")}catch(e){}
  document.body.removeChild(ta);
  if(copied){
    toast("📋 Link kopiert — einfach an Freunde schicken!",1);
  }else{
    window.prompt("Link kopieren:",url);
  }
}

// ═══ COMMENTS ═══
let currentCommentPodcast=null;

async function loadComments(podcastId){
  currentCommentPodcast=podcastId;
  const list=document.getElementById("cmt-list");
  list.innerHTML='<div class="cmt-empty">Lade Kommentare...</div>';
  try{
    const{data,error}=await sb.from("caienn_comments").select("*").eq("podcast_id",podcastId).order("created_at",{ascending:false});
    if(error)throw error;
    document.getElementById("cmt-count").textContent=(data?data.length:0)+" Kommentare";
    if(!data||!data.length){list.innerHTML='<div class="cmt-empty">Noch keine Kommentare. Sei der/die Erste! 🎉</div>';return}
    list.innerHTML="";
    data.forEach(c=>{
      const d=document.createElement("div");d.className="cmt";
      d.innerHTML=`<div class="cmt-top"><span class="cmt-author">${esc(c.author_name)}</span><span class="cmt-date">${timeAgo(c.created_at)}</span></div><div class="cmt-text">${esc(c.content)}</div>`;
      list.appendChild(d);
    });
  }catch(e){list.innerHTML='<div class="cmt-empty" style="color:#ff6b6b">Fehler beim Laden.</div>'}
}

let lastCmtTime=0;
async function postComment(){
  const now=Date.now();
  if(now-lastCmtTime<30000){toast("Bitte warte einen Moment.",0);return}
  const name=document.getElementById("cmt-name").value.trim();
  const text=document.getElementById("cmt-text").value.trim();
  if(!name){toast("Bitte gib deinen Namen ein!",0);return}
  if(!text){toast("Bitte schreib einen Kommentar!",0);return}
  if(name.length>50||text.length>2000){toast("Text zu lang!",0);return}
  if(!currentCommentPodcast){toast("Wähle erst eine Episode!",0);return}
  const btn=document.getElementById("cmt-btn");btn.disabled=true;btn.textContent="Wird gesendet...";
  try{
    const{error}=await sb.from("caienn_comments").insert({podcast_id:currentCommentPodcast,author_name:name,content:text});
    if(error)throw error;
    lastCmtTime=Date.now();
    toast("Kommentar veröffentlicht! 🎉",1);
    document.getElementById("cmt-text").value="";
    loadComments(currentCommentPodcast);
  }catch(e){toast("Fehler: "+e.message,0)}
  btn.disabled=false;btn.textContent="Kommentar abschicken";
}

function scrollToComments(i){
  playEp(i);
  setTimeout(()=>{document.getElementById("comments-section").scrollIntoView({behavior:"smooth",block:"start"})},200);
}

function timeAgo(d){
  const s=Math.floor((Date.now()-new Date(d))/1000);
  if(s<60)return "gerade eben";if(s<3600)return Math.floor(s/60)+" Min.";
  if(s<86400)return Math.floor(s/3600)+" Std.";if(s<604800)return Math.floor(s/86400)+" Tage";
  return new Date(d).toLocaleDateString("de-DE",{day:"2-digit",month:"short",year:"numeric"});
}

// ═══ NEWSLETTER ═══
async function podNLSub(){
var email=document.getElementById("pod-nl-email").value.trim();
if(!email||!email.includes("@")){toast("Bitte gültige E-Mail eingeben!",0);return}
try{
var{error}=await sb.from("caienn_subscribers").insert({email:email});
if(error){if(error.code==="23505"){toast("Du bist bereits angemeldet!",1);return}throw error}
document.getElementById("pod-nl-email").value="";
var ok=document.getElementById("pod-nl-ok");
ok.textContent="🎉 Willkommen! Du bekommst Updates zu neuen Folgen.";
ok.style.display="block";setTimeout(function(){ok.style.display="none"},5000);
}catch(e){toast("Fehler: "+e.message,0)}}

// ═══ HELPERS ═══
function fmt(s){if(!s||isNaN(s))return "0:00";const h=Math.floor(s/3600);const m=Math.floor((s%3600)/60);const sc=s%60;
  if(h>0)return h+":"+(m<10?"0":"")+m+":"+(sc<10?"0":"")+sc;return m+":"+(sc<10?"0":"")+sc}
function esc(s){const d=document.createElement("div");d.textContent=s;return d.innerHTML}
function toast(msg,ok){const t=document.getElementById("toast");t.textContent=msg;t.className="toast "+(ok?"ok":"err");setTimeout(()=>t.classList.add("vis"),10);setTimeout(()=>t.classList.remove("vis"),3500)}

init();
</script>
</body>
</html>
