import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { ContactForm } from "@/components/contact-form"
import { Card, CardContent } from "@/components/ui/card"
import { Mail, Instagram, Music, MessageSquare } from "lucide-react"

export const metadata = {
  title: "Contact | Soul Speaks Soil",
  description: "Get in touch with Sammy Davis for consulting, podcast collaborations, and more",
}

export default function ContactPage() {
  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-3xl mx-auto text-center">
              <h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-4 text-balance">Get in Touch</h1>
              <p className="text-lg text-muted-foreground leading-relaxed text-pretty">
                Whether you're interested in consulting, podcast collaborations, speaking engagements, or just want to
                say hello, I'd love to hear from you.
              </p>
            </div>
          </div>
        </section>

        {/* Contact Options with mycelial pattern */}
        <section className="px-4 sm:px-6 lg:px-8 py-12 mycelial-pattern">
          <div className="container mx-auto">
            <div className="max-w-5xl mx-auto">
              <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">
                        <MessageSquare className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="text-lg font-semibold text-foreground mb-2">Consulting</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Sustainability strategy, regenerative practices, and organizational transformation
                      </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">
                        <Music className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="text-lg font-semibold text-foreground mb-2">Podcast Guest</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Invite Sammy to be a guest on your podcast or collaborate on content
                      </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">
                        <Mail className="h-6 w-6 text-primary" />
                      </div>
                      <h3 className="text-lg font-semibold text-foreground mb-2">Speaking</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">
                        Book Sammy for conferences, workshops, and speaking engagements
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Contact Form Section */}
        <section className="px-4 sm:px-6 lg:px-8 py-12">
          <div className="container mx-auto">
            <div className="max-w-2xl mx-auto">
              <Card className="shadow-lg">
                <CardContent className="pt-6">
                  <ContactForm />
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Social Links with organic texture background */}
        <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-2xl mx-auto text-center">
              <h2 className="text-2xl font-bold text-foreground mb-4">Connect on Social Media</h2>
              <p className="text-muted-foreground mb-6 leading-relaxed">
                Follow Soul Speaks Soil for updates, behind-the-scenes content, and community discussions.
              </p>
              <div className="flex justify-center gap-4">
                <a
                  href="https://instagram.com/soulspeakssoil"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors shadow-md"
                >
                  <Instagram className="h-5 w-5" />
                  <span className="font-medium">Instagram</span>
                </a>
                <a
                  href="https://open.spotify.com/show/soul-speaks-soil"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 px-6 py-3 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors shadow-md"
                >
                  <Music className="h-5 w-5" />
                  <span className="font-medium">Spotify</span>
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}