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 About() {
  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">
                Living His Best Life in the Wilderness
              </h1>
              <p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty">
                Meet John—a modern-day Tom Bombadil who traded the conventional world for 20 acres of old growth forest
                at the edge of civilization on Texada Island, where the pavement ends and true living begins.
              </p>
              <Link href="/sponsor">
                <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
                  Support His Mission
                </Button>
              </Link>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122853_047-GiNIS8BNoexGmhj8mowW475waeD9TL.jpg"
                alt="John standing next to massive old growth tree"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Life in the Woods */}
      <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">A Life Among the Trees</h2>

          <div className="grid md:grid-cols-2 gap-12 mb-12">
            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🏡</div>
                <h3 className="text-2xl font-semibold mb-4 text-foreground">The Log Cabin</h3>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  John's small log cabin sits nestled deep in the forest, a testament to simple living and
                  self-sufficiency. Built with respect for the land, it's more than a home—it's a sanctuary where the
                  rhythm of nature dictates the pace of life.
                </p>
                <p className="text-muted-foreground leading-relaxed">
                  Here, the crackling fire provides warmth and light, and the forest sounds are the only soundtrack
                  needed. It's a place where stories are shared, poetry flows freely, and the wisdom of the woods seeps
                  into every conversation.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🐕</div>
                <h3 className="text-2xl font-semibold mb-4 text-foreground">Una, His Faithful Companion</h3>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  Una, John's loyal dog, is his constant companion through the forest trails and mushroom patches. She
                  knows every path, every log, and every secret spot where the best shiitakes grow.
                </p>
                <p className="text-muted-foreground leading-relaxed">
                  Together they walk the land daily, checking on the mushroom logs, greeting the deer that share their
                  home, and maintaining the delicate balance between cultivation and conservation.
                </p>
              </CardContent>
            </Card>
          </div>

          <div className="grid md:grid-cols-2 gap-12">
            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🦌</div>
                <h3 className="text-2xl font-semibold mb-4 text-foreground">Living Among the Deer</h3>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  The deer are John's neighbors, moving gracefully through the forest at dawn and dusk. He's learned
                  their patterns, respects their space, and they've come to accept his presence as part of the natural
                  order.
                </p>
                <p className="text-muted-foreground leading-relaxed">
                  This coexistence is a daily reminder that he's not just living in the forest—he's part of its
                  ecosystem, a steward rather than an owner.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <div className="text-4xl mb-4">🌲</div>
                <h3 className="text-2xl font-semibold mb-4 text-foreground">At the Edge of Civilization</h3>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  Texada Island sits at the end of the Sunshine Coast, and John's property is where the pavement
                  literally ends. Beyond his gate, there's only forest, mountains, and the wild beauty of untamed
                  British Columbia.
                </p>
                <p className="text-muted-foreground leading-relaxed">
                  This remoteness isn't isolation—it's freedom. Freedom to live authentically, to cultivate mushrooms
                  the old way, and to share knowledge with those willing to make the journey.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* John Working in the Forest Photo Gallery */}
      <section className="py-16 px-4 fern-pattern">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-4xl font-bold text-foreground mb-12 text-center">John at Work</h2>

          <div className="grid md:grid-cols-2 gap-6 mb-6">
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122703_505-qLwRjiPQfRMDDcs9821eJxhmCLxJrl.jpg"
                alt="John working with logs and wheelbarrow"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122710_780-zlgttFxvfEYGyATvAKqOzNA9R4D0nC.jpg"
                alt="John in the forest with freshly cut logs"
                className="w-full h-auto"
              />
            </div>
          </div>

          <div className="relative rounded-lg overflow-hidden mb-6">
            <img
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122853_047-tpCCLTeR26u6vqYEe567IMg54z1efB.jpg"
              alt="John standing next to massive old growth tree"
              className="w-full h-auto"
            />
          </div>

          <div className="relative rounded-lg overflow-hidden">
            <img
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230831_174019-Qh9v3KIB7YIoRXrezZoSvMXo7qCUMt.jpg"
              alt="Beautiful forest scene with sunlight and ferns"
              className="w-full h-auto"
            />
          </div>
        </div>
      </section>

      {/* The Storyteller */}
      <section className="py-16 px-4 fern-pattern">
        <div className="container mx-auto max-w-4xl">
          <h2 className="text-4xl font-bold text-foreground mb-8 text-center">The Storyteller</h2>

          <div className="space-y-8">
            <Card className="border-border">
              <CardContent className="pt-6">
                <h3 className="text-2xl font-semibold mb-4 text-foreground flex items-center gap-3">
                  <span>⛏️</span>
                  Tales from the Mines
                </h3>
                <p className="text-muted-foreground leading-relaxed">
                  Sit by John's fire long enough, and you'll hear stories from his mining days—tales of working deep in
                  the earth, the camaraderie of miners, and the lessons learned in darkness that illuminate life above
                  ground. These aren't just stories; they're oral history, passed down with the reverence they deserve.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <h3 className="text-2xl font-semibold mb-4 text-foreground flex items-center gap-3">
                  <span>💎</span>
                  The Mystery of Texada Flower Rock
                </h3>
                <p className="text-muted-foreground leading-relaxed">
                  John is one of the few who truly understands the extremely rare composition of Texada flower rock—a
                  geological wonder found nowhere else on Earth. He'll explain the unique mineral formations, the
                  volcanic history that created them, and why collectors travel from around the world to see these
                  natural masterpieces. His knowledge comes from years of observation, study, and a deep connection to
                  the island's geology.
                </p>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="pt-6">
                <h3 className="text-2xl font-semibold mb-4 text-foreground flex items-center gap-3">
                  <span>📖</span>
                  Red Hot Beat Poetry
                </h3>
                <p className="text-muted-foreground leading-relaxed">
                  When the mood strikes, John recites beat poetry with the passion of Ginsberg and the rhythm of
                  Kerouac. His performances are spontaneous, raw, and utterly captivating—words flowing like the forest
                  streams, carrying the energy of a generation that dared to question everything. It's performance art
                  in its purest form, delivered under the stars with only the trees as witnesses.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Community Spirit */}
      <section className="py-16 px-4 bg-muted/30 moss-texture">
        <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">A Heart for Community</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Despite living at the edge of civilization, John is deeply connected to his community. He volunteers
                regularly, sharing his knowledge of sustainable forestry, mushroom cultivation, and the importance of
                watershed protection.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-4">
                His courses aren't just about growing mushrooms—they're about reconnecting with nature, understanding
                our role as stewards of the land, and learning to live more sustainably. Students leave not just with
                technical knowledge, but with a renewed sense of purpose and connection to the natural world.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-6">
                John believes that knowledge should be shared freely, that stories preserve culture, and that we all
                have a responsibility to protect the wild places that remain. His life is a living example of these
                principles.
              </p>
              <Link href="/events">
                <Button
                  size="lg"
                  variant="outline"
                  className="border-primary text-primary hover:bg-primary/10 bg-transparent"
                >
                  Learn from John
                </Button>
              </Link>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122710_780-7GtAuktkY0yLGu87XmHgdeYN8ZiWf1.jpg"
                alt="John working with logs for shiitake cultivation"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section className="py-16 px-4 fern-pattern">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-4xl font-bold text-foreground mb-8">Living His Best Life</h2>
          <p className="text-xl text-muted-foreground leading-relaxed mb-6 text-pretty">
            John's life isn't about escaping the world—it's about engaging with it on his own terms. In his forest
            sanctuary, he's found the perfect balance between solitude and community, tradition and innovation, work and
            contemplation.
          </p>
          <p className="text-xl text-muted-foreground leading-relaxed mb-8 text-pretty">
            He proves that living simply doesn't mean living small. His days are rich with purpose: cultivating
            mushrooms, teaching eager students, protecting endangered species, sharing stories, and simply being present
            in the magnificent wilderness he calls home.
          </p>
          <p className="text-2xl font-semibold text-foreground italic">
            "At the edge of civilization, I found the center of everything that matters."
          </p>
        </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">Support This Way of Life</h2>
          <p className="text-xl mb-8 text-primary-foreground/90 leading-relaxed text-pretty">
            Help John continue his work protecting the old growth forest, teaching sustainable cultivation, and
            preserving the stories and knowledge that connect us to the land.
          </p>
          <Link href="/sponsor">
            <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
              Sponsor the Old Growth
            </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>
  )
}
