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

export default function Home() {
  return (
    <div className="min-h-screen bg-background">
      <Navigation />

      {/* Hero Section */}
      <section className="relative py-20 px-4 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 md:text-6xl font-bold text-foreground mb-6 text-balance">
                Welcome to Shiitake John&#39;s Woodlot
              </h1>
              <p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty">
                At the edge of civilization on Texada Island, where the pavement ends and the forest begins, John
                cultivates shiitake mushrooms the old way—with patience, care, and 20 acres of pristine woodland.
              </p>
              <div className="flex gap-4">
                <Link href="/sponsor">
                  <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
                    Sponsor the Old Growth
                  </Button>
                </Link>
                <Link href="/events">
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-primary text-primary hover:bg-primary/10 bg-transparent"
                  >
                    View Cultivation Courses
                  </Button>
                </Link>
              </div>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122857_357-qnZHfuPlKuvI6Qb5G9QucUFgve1FZk.jpg"
                alt="Turkey tail mushrooms growing on mossy log"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-16 px-4 bg-muted/30 moss-texture">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-4xl font-bold text-foreground mb-12 text-center">Life at the Edge of the Woods</h2>

          <div className="grid md:grid-cols-3 gap-8">
            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🌲</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Log Cultivation</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Traditional shiitake cultivation using sustainable forest practices. Each mushroom is lovingly grown
                  on carefully selected logs.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🎓</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Teaching & Courses</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Learn the art of mushroom cultivation from someone who lives and breathes it. Hands-on courses in the
                  heart of the forest.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🤝</div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Community Spirit</h3>
                <p className="text-muted-foreground leading-relaxed">
                  A regular volunteer and storyteller, sharing tales of mining days, Texada flower rock, and red hot
                  beat poetry by the fire.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <section className="py-16 px-4 fern-pattern">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-4xl font-bold text-foreground mb-6">Protecting the Watershed</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Our forest is part of a critical watershed that supports one of the world's rarest fish species—the
                Texada Island stickleback species pairs. These remarkable fish are found in only five small lakes on the
                Sunshine Coast, making them globally significant.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-4">
                The stickleback species pairs are among the youngest species on Earth, having evolved in less than
                13,000 years since the last Ice Age. They consist of two distinct forms—the "limnetics" that live in
                open water eating plankton, and the "benthics" that dwell in the shallows feeding on invertebrates.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-6">
                By supporting sustainable forest practices here, you're helping protect the pristine watershed these
                endangered fish depend on for survival. Our careful stewardship ensures clean water flows into nearby
                lakes, preserving habitat for these unique evolutionary treasures.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button
                  variant="outline"
                  className="border-primary text-primary hover:bg-primary/10 bg-transparent"
                  asChild
                >
                  <a
                    href="https://bcinvasives.ca/news/texada-island-sticklebacks/"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Learn About the Stickleback →
                  </a>
                </Button>
                <Button
                  variant="outline"
                  className="border-primary text-primary hover:bg-primary/10 bg-transparent"
                  asChild
                >
                  <a
                    href="https://texada.org/texada-island-stickleback-society/"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Texada Stickleback Society →
                  </a>
                </Button>
              </div>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden bg-muted/50 flex items-center justify-center">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122900_435-wb8VPiXxn7UUctygqQDrIINgVJkDZF.jpg"
                alt="Moss and lichen in the forest watershed"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Story Section */}
      <section className="py-16 px-4 moss-texture">
        <div className="container mx-auto max-w-4xl">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="relative h-[350px] rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122849_429-trLTSHlz0FNvU5yO4XhGqSk8PakrO2.jpg"
                alt="Una the dog in the mossy forest"
                className="w-full h-full object-cover"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold text-foreground mb-6">A Modern Day Tom Bombadil</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                In his small log cabin deep in the woods, Shiitake John lives amongst the deer with his faithful
                companion Una. The forest is his home, his classroom, and his sanctuary.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Sit by the fire long enough, and you'll hear stories of mining adventures, the mysteries of Texada's
                rare flower rock, or perhaps a spontaneous recitation of beat poetry that echoes through the trees.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                This is more than mushroom farming—it's a way of life at the edge of civilization, where nature and
                knowledge intertwine.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-primary text-primary-foreground">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-4xl font-bold mb-6">Help Preserve the Old Growth</h2>
          <p className="text-xl mb-8 text-primary-foreground/90 leading-relaxed text-pretty">
            Your support helps maintain these 20 acres of old growth forest, protect the watershed for endangered
            species, continue sustainable mushroom cultivation, and keep the courses and community programs thriving.
          </p>
          <Link href="/sponsor">
            <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
              Become a Sponsor
            </Button>
          </Link>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 border-t border-border forest-texture">
        <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>
  )
}
