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">
        <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 the Shiitake Forest
              </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-primary hover:bg-primary/90 text-primary-foreground">
                    Sponsor the Forest
                  </Button>
                </Link>
                <Link href="/events">
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-primary text-primary hover:bg-primary/10 bg-transparent"
                  >
                    View Courses
                  </Button>
                </Link>
              </div>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden">
              <img
                src="/shiitake-mushrooms-growing-on-logs-in-forest.jpg"
                alt="Shiitake mushrooms on logs"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-16 px-4 bg-muted/30">
        <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>

      {/* Story Section */}
      <section className="py-16 px-4">
        <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="/rustic-log-cabin-in-forest-with-dog.jpg"
                alt="Log cabin in the woods"
                className="w-full h-full object-cover"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold text-foreground mb-6">A Modern Tom Bombadil</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                In his small log cabin deep in the woods, 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 Shiitake Forest</h2>
          <p className="text-xl mb-8 text-primary-foreground/90 leading-relaxed text-pretty">
            Your support helps maintain these 20 acres of forest, continue sustainable mushroom cultivation, and keep
            the courses and community programs thriving.
          </p>
          <Link href="/sponsor">
            <Button size="lg" variant="secondary" className="bg-background text-foreground hover:bg-background/90">
              Become a Sponsor
            </Button>
          </Link>
        </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>
  )
}