---
// Podcast page
import Footer from "../../components/Footer.astro";
import Navbar from "../../components/Navbar.astro";
import { Image } from "astro:assets";

const animateOnScroll = `
  document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate__animated', 'animate__fadeIn');
          entry.target.style.visibility = 'visible';
        }
      });
    });

    document.querySelectorAll('.animate-on-scroll').forEach(el => {
      observer.observe(el);
    });
  });
`;

// Lista de episodios del podcast
const episodes = [
{
        title: "Sostenibilidad ¿Qué es?",
        description:
            "En este episodio comenzaremos dando forma a este tema que nos engloba tanto en nuestro día a día. Sabemos lo que es la sostenibilidad y de que trata ?, pues aquí nuestro protagonistas nos hablarán de ello, que haces que no los estás escuchando ya?¡¡CORREEEEE!!",
        spotifyLink: "https://open.spotify.com/episode/218xJHgfhDBPAtr1qELCMa?si=FpuHWjR4TEegn0dDJLnO1w",
        duration: "10:17",
        date: "10 de diciembre de 2024",
    },
    {
        title: "Criterios ASG",
        description:
            "🎙️ Bienvenidos a Arreglamos el Mundo, el podcast donde exploramos ideas, soluciones y reflexiones para construir un futuro más sostenible y justo. 🌎 En este episodio, nos sumergimos en los criterios ASG: ambiental, social y de gobernanza. ¿Qué significan? ¿Cómo están transformando el mundo de los negocios, las inversiones y nuestras vidas? Acompáñanos mientras desglosamos cómo estas herramientas nos acercan a un mundo mejor. ¡Comencemos a arreglar el mundo, un criterio a la vez! 🌱✨",
        spotifyLink: "https://open.spotify.com/episode/6dqCt8UAukJ8xD0lJnLZgp?si=llWNPManQueraMpaUhpMxQ",
        duration: "14:11",
        date: "10 de diciembre de 2024",
    },
    {
        title: "Retos Ambientales",
        description:
            "🎙️ Bienvenidos a Arreglamos el Mundo, el espacio donde debatimos, reflexionamos y soñamos con un planeta más habitable para todos. 🌎 En este episodio, ponemos sobre la mesa los retos ambientales que enfrentamos hoy: desde el cambio climático hasta la pérdida de biodiversidad y la gestión sostenible de nuestros recursos. ¿Qué desafíos debemos superar y qué podemos hacer para marcar la diferencia? Es hora de analizar el panorama, cuestionar nuestras acciones y buscar soluciones que realmente arreglen el mundo. 🌱💡",
        spotifyLink: "https://open.spotify.com/episode/4g6wy4VLz9RPWu4Iu01cdX?si=NaVoDOoJTBKu54fkKQiOJQ",
        duration: "10:03",
        date: "10 de diciembre de 2024",
    },
    {
        title: "Cómo Minimizar los Impactos Ambientales??",
        description:
            "🎙️ Bienvenidos a Arreglamos el Mundo, el podcast donde exploramos ideas para hacer del planeta un lugar mejor. 🌍✨ En este episodio, hablamos sobre cómo minimizar los impactos ambientales. Desde pequeñas acciones en nuestro día a día hasta grandes estrategias a nivel global, analizaremos qué podemos hacer para reducir nuestra huella ecológica y proteger los recursos naturales. ¡Acompáñanos mientras descubrimos juntos cómo marcar la diferencia y avanzar hacia un futuro más sostenible! 🌱💡",
        spotifyLink: "https://open.spotify.com/episode/2tWQ9PFQfo1qK55rop8h0s?si=9KTe45o9Rw-KBtIqsAlU4g",
        duration: "9:02",
        date: "10 de diciembre de 2024",
    },
    {
        title: '¡¡Hemos vuelto!! Hablemos de: "Los 17 Puntos"',
        description:
            "En Agenda 2030: 17 Pasos hacia un Mundo Mejor, exploramos cada uno de los 17 Objetivos de Desarrollo Sostenible (ODS) propuestos por la ONU. Acompáñanos en este viaje donde analizamos los retos globales, las soluciones innovadoras y el impacto de estas metas en nuestra sociedad, economía y medioambiente. Con entrevistas a expertos, historias inspiradoras y casos reales, descubrirás cómo tú también puedes contribuir a un futuro más justo, sostenible e inclusivo. ¡Sintoniza y forma parte del cambio!",
        spotifyLink: "https://open.spotify.com/episode/6BluxrOOSnji7wkUt50nk3?si=VQf7Na7jQ4C7AnA4aY2leQ",
        duration: "22:08",
        date: "3 de marzo de 2025",
    },
    {
        title: "Economía Verde y Circular",
        description:
            "En este episodio, exploramos la Economía Verde y Circular: ¿Cómo podemos producir y consumir de manera sostenible? Hablamos sobre innovación, reciclaje, energías renovables y nuevos modelos de negocio que buscan equilibrar desarrollo y medioambiente. ¡Únete a la conversación y descubramos juntos soluciones para un futuro más verde! 🌍♻️",
        spotifyLink: "https://open.spotify.com/episode/35E5Po2iiG5Fs2GsVfeCr7?si=THRxtld4QwCj1SmUvLT_TQ",
        duration: "20:57",
        date: "4 de marzo de 2025",
    },
];
---

<html lang="es">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="generator" content={Astro.generator} />
        <script
            async
            src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
        ></script>
        <meta
            name="google-site-verification"
            content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk"
        />
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag("js", new Date());
            gtag("config", "G-1JT18RF3R4");
        </script>
        <meta
            name="description"
            content="Podcast Arreglamos el Mundo? - Podcast dinámico y entretenido
                                que aborda los desafíos y soluciones relacionadas
                                con la Sostenibilidad. "
        />
        <link rel="icon" type="image/png" href="/logo.png" />
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
            crossorigin="anonymous"
        />
        <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
        />
        <title>Arreglamos el Mundo? | Ecobjetivos</title>
    </head>
    <body>
        <Navbar />

        <header class="podcast-header text-white py-5 mt-5">
            <div class="container text-center">
                <h1
                    class="display-3 mb-4 animate__animated animate__fadeInDown"
                >
                    ¿Arreglamos el Mundo?
                </h1>
                <p
                    class="lead mb-4 animate__animated animate__fadeInUp animate__delay-1s"
                >
                Podcast que aborda los desafíos sobre la Sostenibilidad. 
                </p>
                <div
                    class="d-flex justify-content-center gap-3 animate__animated animate__zoomIn animate__delay-1s"
                >
                    <a
                        href="https://open.spotify.com/show/2snFzgOSnk1AVH4gx6HGG1?si=e8c250c65f534d72"
                        target="_blank"
                        class="btn btn-success btn-lg"
                    >
                        <i class="fab fa-spotify me-2"></i> Escuchar en Spotify
                    </a>
                    <!--                     <a
                        href="https://podcasts.apple.com/podcast/example"
                        target="_blank"
                        class="btn btn-outline-light btn-lg"
                    >
                        <i class="fab fa-apple me-2"></i> Apple Podcasts
                    </a> -->
                </div>
            </div>
        </header>

        <main>
            <section class="py-5">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-6 animate-on-scroll">
                            <h2 class="display-5 mb-4">Sobre el Podcast</h2>
                            <p class="lead">
                                <strong>¿Arreglamos el Mundo?</strong> es un Podcast dinámico y entretenido
                                que aborda los desafíos y soluciones relacionadas
                                con la Sostenibilidad. 
                            </p>
                            <p>
                                Liderado por Rafa, el carismático
                                presentador, y Vicente, el productor y segundo presentador,
                                cada episodio se convierte en un espacio de debate
                                y aprendizaje. Junto a ellos, los expertos invitados
                                María Jesús y Rubén comparten conocimientos, experiencias
                                y perspectivas para inspirar a los oyentes a tomar
                                acción por un planeta más sostenible. Con conversaciones
                                cercanas, datos relevantes y un toque de humor, este
                                equipo busca, literalmente, arreglar el mundo. 🌍✨
                            </p>
                        </div>
                        <div class="col-lg-6 animate-on-scroll">
                            <iframe
                                style="border-radius:12px"
                                src="https://open.spotify.com/embed/show/2snFzgOSnk1AVH4gx6HGG1?utm_source=generator"
                                width="100%"
                                height="352"
                                frameBorder="0"
                                allowfullscreen=""
                                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                                loading="lazy"></iframe>
                        </div>
                    </div>
                </div>
            </section>

            <section class="py-5 bg-light">
                <div class="container">
                    <h2 class="text-center mb-5 animate-on-scroll">
                        Episodios Destacados
                    </h2>

                    <div class="row g-4">
                        {
                            episodes.map((episode, index) => (
                                <div class="col-md-6 animate-on-scroll">
                                    <div class="card h-100 border-0 shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between mb-2">
                                                <span class="badge bg-success" style="padding-top: 6px;">
                                                    {episode.date}
                                                </span>
                                                <span class="text-muted">
                                                    <i class="far fa-clock me-1" />
                                                    {episode.duration}
                                                </span>
                                            </div>
                                            <h3 class="h5 card-title">
                                                {episode.title}
                                            </h3>
                                            <p class="card-text">
                                                {episode.description}
                                            </p>
                                        </div>
                                        <div class="card-footer bg-white border-0">
                                            <a
                                                href={episode.spotifyLink}
                                                target="_blank"
                                                class="btn btn-outline-success w-100"
                                            >
                                                <i class="fab fa-spotify me-2" />{" "}
                                                Escuchar episodio
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </section>

<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center animate-on-scroll">
                <h2 class="mb-4">¿Por qué escuchar Arreglamos el Mundo?</h2>
                <div class="row g-4 mt-3">
                    <div class="col-md-12">
                        <div class="p-3 bg-light rounded-3 h-100">
                            <video controls class="w-100">
                                <source src="/imgs/videoPodcast.mp4" type="video/mp4">
                                Tu navegador no soporta la reproducción de videos.
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

            <section class="py-5 bg-success text-white">
                <div class="container text-center">
                    <h2 class="mb-4 animate-on-scroll">
                        ¿Tienes sugerencias para futuros episodios?
                    </h2>
                    <p class="lead mb-4 animate-on-scroll">
                        Nos encantaría conocer qué temas te interesan
                    </p>
                    <a
                        href="/contacto"
                        class="btn btn-light btn-lg animate-on-scroll"
                    >
                        <i class="fas fa-envelope me-2"></i> Enviar sugerencia
                    </a>
                </div>
            </section>
        </main>

        <Footer />

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        ></script>
        <script set:html={animateOnScroll} />
    </body>
</html>

<style is:global>
    @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a {
        font-family: "Inter Tight", sans-serif !important;
        font-optical-sizing: auto;
        font-weight: 400 !important;
        font-style: normal;
    }
    .londrina-sketch-regular {
        font-family: "Londrina Sketch", sans-serif !important;
        font-weight: 400;
        font-style: normal;
    }
</style>

<style>
    .podcast-header {
        background-color: #1db954; /* Color verde de Spotify */
        background-image: linear-gradient(45deg, #1db954, #219653);
        padding: 6rem 0;
        position: relative;
    }

    .podcast-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background-image: url("/imgs/podcast-pattern.png");*/
        opacity: 0.1;
    }

    .animate-on-scroll {
        visibility: hidden;
    }

    .episode-card {
        transition: transform 0.3s ease;
    }

    .episode-card:hover {
        transform: translateY(-5px);
    }

    .object-fit-cover {
        object-fit: cover;
    }
</style>