/* eslint-disable */
// MS BRIDGE — Podcast v2 (restyle) — episode carousel (Mindly "instructor" block reworked)
// Compact slide (video + dark bio + social bar) · prev/next arrows · dot stepper · perspective grid.

;(function () {
const { useState } = React;

const INK   = "#16150F";
const INK60 = "#6B6A64";
const INK40 = "#9A9994";
const LIGHT = "#FFFFFF";
const SPOTIFY = "#1DB954";

const ACCENTS = {
  "#E8291C": { base: "#E8291C", soft: "rgba(232,41,28,0.13)", on: "#fff" },
  "#FF6200": { base: "#FF6200", soft: "rgba(255,98,0,0.14)", on: "#fff" },
};

// `thumb` : laissez vide pour le placeholder, ou pointez vers la miniature/vidéo
// de l'épisode (ex. "assets/podcast-ep01.jpg") quand vous l'aurez.
const EPISODES = [
  { ep: "Épisode 01", name: "Chloé Soriano", role: "Consultante marketing & communication", sig: "Chloé S.",
    dur: "42 min", tint: ["#2e2630", "#100f14"], thumb: "", video: "", vimeo: "https://player.vimeo.com/video/1198818229?badge=0&autopause=0&player_id=0&app_id=58479",
    linkedin: "https://www.linkedin.com/in/chlo%C3%A9-soriano-marketing/",
    bio: "Après avoir accompagné plusieurs entreprises, Chloé partage sa vision pour aligner marketing et ventes tout droit venu du Canada." },
  { ep: "Épisode 02", name: "Fares Bouhamed", role: "Account Manager · Limova", sig: "Fares B.",
    dur: "38 min", tint: ["#222b32", "#0f1114"], thumb: "", video: "", vimeo: "https://player.vimeo.com/video/1198818230?badge=0&autopause=0&player_id=0&app_id=58479",
    linkedin: "https://www.linkedin.com/in/fares-bouhamed-274283280/",
    bio: "Fort de son expérience en prospection commerciale, il nous partage les coulisses de son quotidien avec les marketers." },
  
];

function Mono({ children, color = INK40, style }) {
  return <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color, ...style }}>{children}</span>;
}
function LinkedInIcon() {
  return (<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1-.02-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.75V21h-4v-5.3c0-1.26-.02-2.9-1.77-2.9-1.77 0-2.04 1.38-2.04 2.8V21H9z" /></svg>);
}
function SpotifyIcon() {
  return (
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" aria-hidden>
      <circle cx="12" cy="12" r="11" fill="#fff" />
      <path d="M6.5 9.2c3.6-1 7.8-.7 11 1.3M7 12.4c3-.8 6.5-.5 9.2 1.1M7.6 15.4c2.4-.6 5-.4 7.1.9" stroke={SPOTIFY} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}
function Chevron({ dir }) {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden style={{ transform: dir === "prev" ? "rotate(180deg)" : "none" }}><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>);
}

function Podcast({ accentKey }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];
  const [i, setI] = useState(0);
  const [playing, setPlaying] = useState(false);
  const n = EPISODES.length;
  const e = EPISODES[i];
  const go = (d) => {
    setPlaying(false);
    setI((x) => (x + d + n) % n);
  };

  return (
    <div className="pc" style={{ background: LIGHT, color: INK }}>
      <div className="pc-inner">
        <div className="pc-head">
          <div className="pc-mk-center">
            <span className="pc-mk">
              <span style={{ width: 7, height: 7, borderRadius: 999, background: accent.base, boxShadow: `0 0 0 3px ${accent.soft}` }} />
              <Mono>(09)</Mono>
              <span style={{ width: 18, height: 1, background: INK40 }} />
              <Mono>vos épisodes</Mono>
            </span>
          </div>
          <h2 className="pc-h2">Podcast : <span style={{ color: accent.base }}>Marketing &amp; Sales</span></h2>
          <p className="pc-sub">Découvrez le retour d'expérience de marketers et de sales autour de l'alignement marketing &amp; sales à l'ère de l'intelligence artificielle.</p>
        </div>

        <div className="pc-carousel">
          <button className="pc-arrow pc-arrow-prev" onClick={() => go(-1)} aria-label="Épisode précédent"><Chevron dir="prev" /></button>
          <button className="pc-arrow pc-arrow-next" onClick={() => go(1)} aria-label="Épisode suivant"><Chevron dir="next" /></button>

          <div className="pc-grid" key={i}>
            <div style={{ display: "flex", flexDirection: "column" }}>
              <div style={{ marginBottom: "8px", fontWeight: 600, fontSize: "14px", color: accent.base }}>Extrait vidéo</div>
              <div className="pc-video" style={{ borderColor: accent.base, aspectRatio: "16 / 9", width: "100%", height: "auto" }}>
              {e.vimeo ? (
                <>
                  <div style={{ position: "relative", width: "100%", height: "100%" }}>
                    <iframe
                      src={e.vimeo}
                      frameBorder="0"
                      allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
                      referrerPolicy="strict-origin-when-cross-origin"
                      style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" }}
                      title={`Extrait Interview - ${e.name}`}
                    />
                  </div>
                </>
              ) : e.video ? (
                <>
                  <video 
                    id={`pc-video-el-${i}`}
                    src={`${e.video}#t=4`} 
                    controls={playing}
                    preload="metadata" 
                    playsInline
                    onPlay={() => setPlaying(true)}
                    onPause={() => setPlaying(false)}
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", background: `linear-gradient(140deg, ${e.tint[0]} 0%, ${e.tint[1]} 72%)` }} 
                  />
                  {!playing && (
                    <>
                      <div className="pc-video-overlay-trigger" onClick={() => {
                        setPlaying(true);
                        const vid = document.getElementById(`pc-video-el-${i}`);
                        if (vid) {
                          vid.currentTime = 0;
                          vid.play().catch(() => {});
                        }
                      }} style={{ position: 'absolute', inset: 0, cursor: 'pointer', zIndex: 3 }} />
                      <button className="pc-play" onClick={() => {
                        setPlaying(true);
                        const vid = document.getElementById(`pc-video-el-${i}`);
                        if (vid) {
                          vid.currentTime = 0;
                          vid.play().catch(() => {});
                        }
                      }} style={{ background: accent.base, color: accent.on, zIndex: 4 }} aria-label="Lire l'épisode">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.5v13l11-6.5L8 5.5z" /></svg>
                      </button>
                      <span className="pc-video-cap" style={{ zIndex: 4 }}><Mono color="rgba(255,255,255,0.7)" style={{ fontSize: 10 }}>EXTRAIT · {e.ep}</Mono></span>
                    </>
                  )}
                </>
              ) : (
                <>
                  {e.thumb
                    ? <img className="pc-video-thumb" src={e.thumb} alt={`Podcast — ${e.name}`} />
                    : <div className="pc-video-inner" style={{ background: `linear-gradient(140deg, ${e.tint[0]} 0%, ${e.tint[1]} 72%)` }} aria-hidden />}
                  <button className="pc-play" onClick={() => setPlaying(true)} style={{ background: accent.base, color: accent.on }} aria-label="Lire l'épisode">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.5v13l11-6.5L8 5.5z" /></svg>
                  </button>
                  <span className="pc-video-cap"><Mono color="rgba(255,255,255,0.7)" style={{ fontSize: 10 }}>{e.thumb ? e.dur : `EXTRAIT · ${e.ep}`}</Mono></span>
                </>
              )}
              </div>
            </div>

            <div className="pc-right">
              <div className="pc-bio">
                <div className="pc-bio-top">
                  <div>
                    <div className="pc-bio-name">{e.name}</div>
                    <div className="pc-bio-role">{e.role}</div>
                  </div>
                  <span className="pc-bio-sig">{e.sig}</span>
                </div>
                <div className="pc-bio-div" />
                <Mono color="rgba(246,245,243,0.5)">{e.ep}</Mono>
                <p className="pc-bio-text">{e.bio}</p>
              </div>

              <div className="pc-social">
                <a href={e.linkedin || "#"} target="_blank" rel="noopener noreferrer" className="pc-social-li" aria-label="LinkedIn" style={{ color: "#F6F5F3" }}><LinkedInIcon /></a>
                <a href="https://open.spotify.com/episode/2LM7XLNf8kHuveJcvrF5Oh?si=xaUefORWScCgI7keROPmkw" target="_blank" rel="noopener noreferrer" className="pc-spotify" style={{ background: SPOTIFY }}>
                  <SpotifyIcon />
                  <span style={{ color: "white" }}>Disponible</span>
                </a>
              </div>
            </div>
          </div>

          <div className="pc-dots">
            {EPISODES.map((_, k) => (
              <button key={k} onClick={() => { setPlaying(false); setI(k); }} aria-label={`Épisode ${k + 1}`}
                className="pc-dot" style={k === i ? { width: 24, background: accent.base } : undefined} />
            ))}
          </div>
        </div>
      </div>

      <div className="pc-floor" aria-hidden><div className="pc-floor-grid" /></div>
    </div>
  );
}

Object.assign(window, { PodcastV2: Podcast });

})();