/* global React */

const EPISODES = [
  {
    num: 1,
    title: 'Mi ansiedad es galopante | MARINA MAMMOLITI',
    dur: '54 min',
    date: '5 jun',
    href: 'https://open.spotify.com/episode/4755v5fFxyiG3PPomMD3Wq',
    img: R('assets/ep-marina-mammoliti.png'),
  },
  {
    num: 2,
    title: '¿La IA reemplaza a los creadores de contenido?',
    dur: '55 min',
    date: '17 may',
    href: 'https://open.spotify.com/episode/4X9EjzVf1fRBgMhnjsHX3v',
    img: R('assets/ep-santiago-balosky.png'),
  },
  {
    num: 3,
    title: '"Se le perdió el respeto al docente" | ROSENDO GROBO',
    dur: '47 min',
    date: '17 abr',
    href: 'https://open.spotify.com/episode/0RRnQGa15i5rWU2RWsBlkw',
    img: R('assets/ep-rosendo-grobo.png'),
  },
];

const SPOTIFY_URL = 'https://open.spotify.com/show/3nHMg6VwAZbI0bJhhMoXR1?si=d2b9b999c4ff429c';

function HomePodcast() {
  const MicIcon = (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/>
      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
      <line x1="12" y1="19" x2="12" y2="23"/>
      <line x1="8" y1="23" x2="16" y2="23"/>
    </svg>
  );
  const Spotify = <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 01-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 11-.277-1.215c3.809-.87 7.076-.496 9.712 1.115a.623.623 0 01.207.857zm1.223-2.722a.78.78 0 01-1.072.257c-2.687-1.652-6.785-2.13-9.965-1.166a.78.78 0 01-.543-1.794c3.532-1.072 8.147-.568 11.234 1.325a.78.78 0 01.346 1.378zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.937.937 0 11-.543-1.794c3.532-1.072 9.404-.865 13.115 1.338a.937.937 0 01-.955 1.613z"/></svg>;
  const Apple = <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>;
  const YouTube = <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"/></svg>;

  return (
    <section className="hpod" id="podcast">
      <img className="hpod-bg" src={R("assets/isotype-waves.svg")} alt="" aria-hidden="true" />

      <div className="hpod-main">
        <div>
          <div className="eyebrow" style={{ color: 'var(--acmp-orange)', marginBottom: 14 }}>EL PODCAST DE ACADEMIA COMUNICA</div>
          <img
            src={R("assets/logo-podcast.png")}
            alt="Dos Pensamientos de Mai Pistiner"
            style={{ maxWidth: 560, width: '100%', display: 'block', marginBottom: 6 }}
          />
          <p className="hpod-desc">Un podcast para abrir preguntas, sacudir ideas y dejarte pensando un poco más allá de lo obvio. Dos perspectivas, una conversación real.</p>
          <div className="hpod-platforms">
            {[[Spotify,'Spotify',SPOTIFY_URL]].map(([icon,label,href]) => (
              <a key={label} href={href} target="_blank" rel="noopener noreferrer" className="hpod-btn">{icon}<span>{label}</span></a>
            ))}
          </div>
        </div>

        <div className="hpod-cover hpod-cover-photo">
          <img src={R("assets/mai-podcast.png")} alt="Mai Pistiner — Dos Pensamientos podcast" />
        </div>
      </div>

      <div className="hpod-eps">
        <div className="hpod-eps-inner">
          <div className="hpod-eps-hdr">
            <h3>Últimos episodios</h3>
            <a href={SPOTIFY_URL} target="_blank" rel="noopener noreferrer">Ver todos →</a>
          </div>
          <div className="hpod-grid">
            {EPISODES.map((ep, i) => (
              <a key={i} href={ep.href} target="_blank" rel="noopener noreferrer" className="hpod-ep">
                <div className="hpod-ep-thumb hpod-ep-thumb-img">
                  <img src={ep.img} alt={ep.title} />
                  <button className="hpod-ep-play" aria-label={`Escuchar ${ep.title}`} onClick={e => e.preventDefault()}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                  </button>
                </div>
                <div className="hpod-ep-body">
                  <div className="hpod-ep-meta"><span>{ep.date}</span><span>·</span><span>{ep.dur}</span></div>
                  <p className="hpod-ep-title">{ep.title}</p>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { HomePodcast });