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

export const metadata = {
  title: "About | Soul Speaks Soil",
  description: "Learn about Sammy Davis and the Soul Speaks Soil podcast",
}

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

      <main className="flex-1 pt-24 pb-16">
        {/* About Sammy Section */}
        <section className="px-4 sm:px-6 lg:px-8 py-16 mycelial-pattern">
          <div className="container mx-auto">
            <div className="max-w-5xl mx-auto">
              <div className="grid md:grid-cols-2 gap-12 items-center">
                <div>
                  <div className="aspect-square rounded-xl overflow-hidden bg-primary/5 shadow-lg">
                    <img
                      src="/sammy-davis-in-garden-with-plants-and-soil.jpg"
                      alt="Sammy Davis in her garden"
                      className="w-full h-full object-cover"
                    />
                  </div>
                </div>
                <div>
                  <h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-6 text-balance">Meet Sammy Davis</h1>
                  <div className="space-y-4 text-muted-foreground leading-relaxed">
                    <p>
                      Sammy Davis is a passionate advocate for sustainable living, regenerative agriculture, and the
                      profound connection between human consciousness and the natural world.
                    </p>
                    <p>
                      With a background in environmental science and a deep love for storytelling, Sammy created Soul
                      Speaks Soil to bridge the gap between ancient wisdom and modern sustainability practices.
                    </p>
                    <p>
                      Through authentic conversations with farmers, activists, artists, and thought leaders, Sammy
                      explores how we can cultivate a more harmonious relationship with the earth and each other.
                    </p>
                  </div>
                  <div className="flex gap-4 mt-8">
                    <Button asChild variant="outline">
                      <a href="https://instagram.com/soulspeakssoil" target="_blank" rel="noopener noreferrer">
                        <Instagram className="mr-2 h-4 w-4" />
                        Follow Sammy
                      </a>
                    </Button>
                    <Button asChild>
                      <Link href="/contact">Get in Touch</Link>
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* About the Podcast Section */}
        <section className="px-4 sm:px-6 lg:px-8 py-16 bg-muted/30 organic-texture">
          <div className="container mx-auto">
            <div className="max-w-5xl mx-auto">
              <div className="text-center mb-12">
                <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-4">
                  <Sprout className="h-4 w-4" />
                  <span>The Podcast</span>
                </div>
                <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4 text-balance">
                  About Soul Speaks Soil
                </h2>
                <p className="text-lg text-muted-foreground max-w-3xl mx-auto leading-relaxed text-pretty">
                  A podcast exploring the intersection of consciousness, sustainability, and our relationship with the
                  earth.
                </p>
              </div>

              <div className="grid md:grid-cols-3 gap-6 mb-12">
                <Card>
                  <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">
                        <Mic className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="text-lg font-semibold text-foreground mb-2">Deep Conversations</h3>
                      <p className="text-muted-foreground leading-relaxed">
                        Hour-long episodes diving deep into topics that matter for our planet and our souls.
                      </p>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <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">
                        <BookOpen className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="text-lg font-semibold text-foreground mb-2">Diverse Topics</h3>
                      <p className="text-muted-foreground leading-relaxed">
                        From regenerative farming to mindfulness, permaculture to social justice.
                      </p>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <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">Community Focused</h3>
                      <p className="text-muted-foreground leading-relaxed">
                        Building a community of listeners committed to positive change.
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </div>

              <Card className="bg-primary text-primary-foreground shadow-lg">
                <CardContent className="p-8">
                  <h3 className="text-2xl font-bold mb-4 text-balance">Our Mission</h3>
                  <p className="text-lg leading-relaxed opacity-90 mb-6 text-pretty">
                    Soul Speaks Soil exists to inspire and empower individuals to reconnect with the earth, cultivate
                    sustainable practices, and foster a deeper understanding of our interconnectedness with all living
                    things. Through storytelling and authentic dialogue, we aim to plant seeds of change that grow into
                    a more regenerative future.
                  </p>
                  <Button asChild variant="secondary" 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 Now
                    </a>
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Consulting Section */}
        <section className="px-4 sm:px-6 lg:px-8 py-16 mycelial-pattern">
          <div className="container mx-auto">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4 text-balance">Work with Sammy</h2>
              <p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
                Sammy is available for consulting, speaking engagements, and podcast collaborations. Whether you're
                looking to start your own sustainability initiative or want to feature Sammy on your podcast, let's
                connect.
              </p>
              <Button asChild size="lg">
                <Link href="/contact">Get in Touch</Link>
              </Button>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}