import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Music, Instagram, Sprout, Heart, Users } from "lucide-react"

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

      {/* Hero Section with mycelial pattern overlay */}
      <section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8 mycelial-pattern">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Sprout className="h-4 w-4" />
              <span>Where Soul Meets Soil</span>
            </div>
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-foreground mb-6 text-balance">
              Soul Speaks Soil
            </h1>
            <p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty">
              Join host Sammy Davis for deep conversations exploring the profound connection between our inner world and
              the earth beneath our feet.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg" className="text-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>
              <Button asChild variant="outline" size="lg" className="text-lg bg-transparent">
                <Link href="/episodes">Browse Episodes</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Image Section with soil and moss imagery */}
      <section className="py-12 px-4 sm:px-6 lg:px-8 bg-muted/30 organic-texture">
        <div className="container mx-auto">
          <div className="max-w-5xl mx-auto">
            <div className="aspect-video rounded-xl overflow-hidden bg-primary/5 shadow-lg">
              <img
                src="/close-up-of-rich-dark-soil-with-green-moss-and-f.jpg"
                alt="Rich soil with moss and ferns - Soul Speaks Soil Podcast"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* About Preview Section with organic texture background */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 mycelial-pattern">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="grid md:grid-cols-3 gap-8">
              <Card className="border-2">
                <CardContent className="pt-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                      <Heart className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="text-lg font-semibold text-foreground mb-2">Authentic Conversations</h3>
                    <p className="text-muted-foreground leading-relaxed">
                      Real, unfiltered discussions about sustainability, growth, and connection.
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-2">
                <CardContent className="pt-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                      <Users className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="text-lg font-semibold text-foreground mb-2">Diverse Guests</h3>
                    <p className="text-muted-foreground leading-relaxed">
                      Featuring farmers, activists, artists, and thought leaders.
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-2">
                <CardContent className="pt-6">
                  <div className="flex flex-col items-center text-center">
                    <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                      <Sprout className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="text-lg font-semibold text-foreground mb-2">Rooted in Nature</h3>
                    <p className="text-muted-foreground leading-relaxed">
                      Exploring our relationship with the earth and each other.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section with deeper earth tones */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 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">Join the Conversation</h2>
            <p className="text-lg mb-8 opacity-90 leading-relaxed text-pretty">
              Follow us on Instagram for behind-the-scenes content, episode updates, and community discussions.
            </p>
            <Button asChild size="lg" variant="secondary" className="text-lg">
              <a href="https://instagram.com/soulspeakssoil" target="_blank" rel="noopener noreferrer">
                <Instagram className="mr-2 h-5 w-5" />
                Follow on Instagram
              </a>
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}