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 />

      <section className="relative pt-24 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="absolute inset-0 z-0">
          <img
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112213_925-XnDB5Tj5KFyS6c2Wr6RZVmZfqeQ1FG.jpg"
            alt="Stone sculpture with moss crown - embodying the soul speaks soil philosophy"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/70 to-background"></div>
        </div>
        <div className="container mx-auto relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 bg-primary/90 text-primary-foreground px-4 py-2 rounded-full text-sm font-medium mb-6 shadow-lg">
              <Sprout className="h-4 w-4" />
              <span>Where Soul Meets Soil</span>
            </div>
            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-display font-bold text-foreground mb-6 text-balance tracking-tight drop-shadow-lg">
              Soul Speaks Soil
            </h1>
            <p className="text-xl text-foreground/90 mb-8 leading-relaxed text-pretty drop-shadow-md">
              Join host Sammy Davies 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 shadow-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-background/80 backdrop-blur-sm shadow-lg"
              >
                <Link href="/episodes">Browse Episodes</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      <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-3xl mx-auto">
            <div className="flex flex-col md:flex-row gap-8 items-center">
              <div className="w-48 h-48 rounded-full overflow-hidden bg-primary/5 shadow-lg flex-shrink-0">
                <img
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images%20%281%29-olhoH5SYKWP3oh7CsSHrhNrGws8GFU.jpeg"
                  alt="Sammy Davies - Host of Soul Speaks Soil"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="text-center md:text-left">
                <h2 className="text-2xl sm:text-3xl font-display font-bold text-foreground mb-3 text-balance">
                  Hosted by Sammy Davies
                </h2>
                <p className="text-muted-foreground leading-relaxed text-pretty">
                  Director of Sustainability & Brand at EcoSafe Zero Waste, MBA Candidate in Sustainable Innovation, and
                  passionate advocate for soil health, composting education, and regenerative storytelling.
                </p>
                <Button asChild variant="outline" className="mt-4 bg-transparent">
                  <Link href="/about">Learn More About Sammy</Link>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 px-4 sm:px-6 lg:px-8 mycelial-pattern">
        <div className="container mx-auto">
          <div className="max-w-6xl mx-auto">
            <div className="grid md:grid-cols-2 gap-6">
              <div className="aspect-square rounded-xl overflow-hidden bg-primary/5 shadow-lg">
                <img
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112207_223-IXghjBiGqE5Eu3b7U3lVXN1spTvTgn.jpg"
                  alt="Vibrant green moss growing on decaying wood - the cycle of life and soil"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="aspect-square rounded-xl overflow-hidden bg-primary/5 shadow-lg">
                <img
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_112203_809-qlO7ndE3aT5sOPWioTlv9j69EyUiRF.jpg"
                  alt="Sammy Davies in her garden with composting systems and natural elements"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About Preview Section with organic texture background */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-muted/30 organic-texture">
        <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-display 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-display 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-display 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-display 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>
  )
}