import { Navigation } from "@/components/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"

export default function EventsPage() {
  const courses = [
    {
      title: "Introduction to Shiitake Cultivation",
      duration: "Full Day Workshop",
      description:
        "Learn the fundamentals of log-based shiitake cultivation. We'll cover log selection, inoculation techniques, and long-term care of your mushroom logs.",
      topics: ["Log selection and preparation", "Inoculation methods", "Seasonal care", "Harvesting techniques"],
    },
    {
      title: "Advanced Mushroom Cultivation",
      duration: "Weekend Course",
      description:
        "Deep dive into the art and science of mushroom farming. Perfect for those looking to start their own cultivation operation or expand their knowledge.",
      topics: ["Multiple species cultivation", "Forest management", "Sustainable practices", "Market preparation"],
    },
    {
      title: "Forest Ecology & Mushrooms",
      duration: "Half Day Experience",
      description:
        "Explore the relationship between mushrooms and forest health. A walking tour through the 20-acre forest with hands-on learning.",
      topics: ["Mycology basics", "Forest ecosystems", "Identification skills", "Sustainable foraging"],
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      <Navigation />

      {/* Hero Section */}
      <section className="py-16 px-4 bg-muted/30 forest-texture">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-5xl font-bold text-foreground mb-6 text-balance">Courses and Events</h1>
              <p className="text-xl text-muted-foreground leading-relaxed text-pretty">
                Learn the ancient art of shiitake cultivation in the heart of a working forest. Hands-on courses taught
                by someone who lives and breathes mushroom farming.
              </p>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122911_830-2Q0ZOzzzL4YAfdfMMCFpHnOyoCy87p.jpg"
                alt="Vibrant coral mushrooms in the forest"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Courses Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-5xl">
          <div className="space-y-8">
            {courses.map((course, index) => (
              <Card key={index} className="border-border">
                <CardHeader>
                  <div className="flex justify-between items-start mb-2">
                    <CardTitle className="text-2xl text-foreground">{course.title}</CardTitle>
                    <span className="text-sm font-medium text-primary bg-primary/10 px-3 py-1 rounded-full">
                      {course.duration}
                    </span>
                  </div>
                  <p className="text-muted-foreground leading-relaxed">{course.description}</p>
                </CardHeader>
                <CardContent>
                  <h4 className="font-semibold text-foreground mb-3">What You'll Learn:</h4>
                  <ul className="grid md:grid-cols-2 gap-2 mb-6">
                    {course.topics.map((topic, i) => (
                      <li key={i} className="flex items-start gap-2 text-muted-foreground">
                        <span className="text-primary mt-1">•</span>
                        <span>{topic}</span>
                      </li>
                    ))}
                  </ul>
                  <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
                    Inquire About Dates
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Experience Section */}
      <section className="py-16 px-4 bg-muted/30 moss-texture">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-foreground mb-8 text-center">The Learning Experience</h2>

          <div className="grid md:grid-cols-3 gap-6 mb-6">
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122707_376-AQekit9vQDRnqWMpzrQY4xP8WvC8vI.jpg"
                alt="Morel mushroom in the forest"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122907_932-LpmXYCIUZszbpOlB2dHqAv8nJGCtZU.jpg"
                alt="Yellow coral mushrooms on moss"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122904_554-FMaSl7fxVmpFdmsHaZEX3E5Vh0NqGN.jpg"
                alt="Ghost pipe plant in the forest"
                className="w-full h-auto"
              />
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-6 mb-12">
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122601_053-b4W7dW79P82zEnLeq4ESkKtvLLNJ3Q.jpg"
                alt="Orange coral mushrooms on mossy forest floor"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122857_357-qnZHfuPlKuvI6Qb5G9QucUFgve1FZk.jpg"
                alt="Turkey tail mushrooms with beautiful banding"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122904_554-FMaSl7fxVmpFdmsHaZEX3E5Vh0NqGN.jpg"
                alt="Ghost pipe plant in the forest"
                className="w-full h-auto"
              />
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-3xl mb-4">🌲</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">In the Forest</h3>
                <p className="text-muted-foreground leading-relaxed">
                  All courses take place in the working forest where shiitake cultivation happens daily. Experience
                  real-world conditions and see established operations in action.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-3xl mb-4">🔥</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Stories by the Fire</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Courses often include fireside sessions where John shares decades of knowledge, mining tales, and the
                  occasional beat poetry performance.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-3xl mb-4">🤲</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Hands-On Learning</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Get your hands dirty with practical experience. From drilling logs to harvesting mushrooms, you'll
                  learn by doing.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-3xl mb-4">🏡</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Small Groups</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Intimate class sizes ensure personal attention and plenty of time for questions. You'll leave with
                  knowledge and new friends.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-primary bg-primary/5">
            <CardContent className="pt-8 text-center">
              <h2 className="text-3xl font-bold text-foreground mb-4">Ready to Learn?</h2>
              <p className="text-muted-foreground mb-6 leading-relaxed text-pretty">
                Course schedules vary by season. Get in touch to find out about upcoming dates or to arrange a private
                workshop for your group.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
                  Contact About Courses
                </Button>
                <Link href="/sponsor">
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-primary text-primary hover:bg-primary/10 bg-transparent"
                  >
                    Support the Forest
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 border-t border-border">
        <div className="container mx-auto max-w-6xl text-center text-muted-foreground">
          <p>Shiitake John's Forest • Texada Island, BC • Where the pavement ends</p>
        </div>
      </footer>
    </div>
  )
}