import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Music, Calendar, Clock } from "lucide-react"

export const metadata = {
  title: "Episodes | Soul Speaks Soil",
  description: "Browse all episodes of the Soul Speaks Soil podcast",
}

// Sample episode data - this would typically come from a CMS or API
const episodes = [
  {
    id: 1,
    title: "Regenerative Agriculture with Maria Santos",
    guest: "Maria Santos",
    description:
      "Maria Santos, a pioneer in regenerative farming, shares her journey from conventional agriculture to building a thriving regenerative farm. We discuss soil health, biodiversity, and how farming can heal both the land and our communities.",
    date: "January 15, 2025",
    duration: "58 min",
    season: 1,
    episode: 12,
  },
  {
    id: 2,
    title: "Mindfulness and Nature Connection with Dr. James Chen",
    guest: "Dr. James Chen",
    description:
      "Dr. James Chen, a psychologist and nature therapy practitioner, explores the profound mental health benefits of connecting with nature. We dive into forest bathing, ecotherapy, and how spending time in nature can transform our wellbeing.",
    date: "January 8, 2025",
    duration: "62 min",
    season: 1,
    episode: 11,
  },
  {
    id: 3,
    title: "Indigenous Wisdom and Land Stewardship with Sarah Blackfeather",
    guest: "Sarah Blackfeather",
    description:
      "Sarah Blackfeather shares indigenous perspectives on land stewardship and the sacred relationship between people and place. We discuss traditional ecological knowledge and what modern society can learn from indigenous practices.",
    date: "January 1, 2025",
    duration: "55 min",
    season: 1,
    episode: 10,
  },
  {
    id: 4,
    title: "Urban Farming and Food Justice with Marcus Johnson",
    guest: "Marcus Johnson",
    description:
      "Marcus Johnson, founder of an urban farming collective, talks about bringing fresh food to food deserts and building community through agriculture. We explore the intersection of food justice, urban planning, and grassroots activism.",
    date: "December 25, 2024",
    duration: "51 min",
    season: 1,
    episode: 9,
  },
  {
    id: 5,
    title: "Permaculture Design Principles with Elena Rodriguez",
    guest: "Elena Rodriguez",
    description:
      "Elena Rodriguez, a permaculture designer and educator, breaks down the core principles of permaculture and how they can be applied to gardens, farms, and even our daily lives. We discuss working with nature rather than against it.",
    date: "December 18, 2024",
    duration: "64 min",
    season: 1,
    episode: 8,
  },
  {
    id: 6,
    title: "Climate Action and Hope with Dr. Aisha Patel",
    guest: "Dr. Aisha Patel",
    description:
      "Climate scientist Dr. Aisha Patel shares the latest research on climate change while maintaining a message of hope and actionable solutions. We discuss individual and collective actions that can make a real difference.",
    date: "December 11, 2024",
    duration: "59 min",
    season: 1,
    episode: 7,
  },
]

export default function EpisodesPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Navigation />

      <main className="flex-1 pt-24 pb-16">
        {/* Header Section with organic texture */}
        <section className="px-4 sm:px-6 lg:px-8 py-12 bg-muted/30 organic-texture">
          <div className="container mx-auto">
            <div className="max-w-4xl mx-auto text-center">
              <h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-4 text-balance">All Episodes</h1>
              <p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
                Explore our collection of conversations with farmers, activists, artists, and thought leaders who are
                working to create a more sustainable and connected world.
              </p>
              <Button asChild size="lg">
                <a href="https://open.spotify.com/show/soul-speaks-soil" target="_blank" rel="noopener noreferrer">
                  <Music className="mr-2 h-5 w-5" />
                  Listen on Spotify
                </a>
              </Button>
            </div>
          </div>
        </section>

        {/* Episodes List with mycelial pattern */}
        <section className="px-4 sm:px-6 lg:px-8 py-16 mycelial-pattern">
          <div className="container mx-auto">
            <div className="max-w-4xl mx-auto space-y-6">
              {episodes.map((episode) => (
                <Card key={episode.id} className="hover:shadow-lg transition-shadow">
                  <CardHeader>
                    <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-2">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <Badge variant="secondary">
                            S{episode.season}E{episode.episode}
                          </Badge>
                        </div>
                        <CardTitle className="text-2xl mb-2 text-balance">{episode.title}</CardTitle>
                        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                          <div className="flex items-center gap-1">
                            <Calendar className="h-4 w-4" />
                            <span>{episode.date}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="h-4 w-4" />
                            <span>{episode.duration}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground leading-relaxed mb-4">{episode.description}</p>
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium text-foreground">Guest:</span>
                      <span className="text-sm text-primary font-medium">{episode.guest}</span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section with mycelial pattern overlay */}
        <section className="px-4 sm:px-6 lg:px-8 py-16 bg-primary text-primary-foreground relative overflow-hidden">
          <div className="absolute inset-0 opacity-10">
            <div
              className="absolute inset-0"
              style={{
                backgroundImage: `radial-gradient(circle at 30% 50%, currentColor 1px, transparent 1px),
                               radial-gradient(circle at 70% 30%, currentColor 1px, transparent 1px),
                               radial-gradient(circle at 50% 80%, currentColor 1px, transparent 1px)`,
                backgroundSize: "100px 100px, 150px 150px, 120px 120px",
              }}
            ></div>
          </div>
          <div className="container mx-auto relative z-10">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-balance">Never Miss an Episode</h2>
              <p className="text-lg mb-8 opacity-90 leading-relaxed text-pretty">
                Subscribe on Spotify to get notified when new episodes drop. Join our growing community of listeners
                committed to positive change.
              </p>
              <Button asChild size="lg" variant="secondary">
                <a href="https://open.spotify.com/show/soul-speaks-soil" target="_blank" rel="noopener noreferrer">
                  <Music className="mr-2 h-5 w-5" />
                  Subscribe on Spotify
                </a>
              </Button>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}