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

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

      {/* Hero Section */}
      <section className="py-16 px-4 forest-texture">
        <div className="container mx-auto max-w-6xl text-center">
          <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6 text-balance">Photo Gallery</h1>
          <p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty max-w-3xl mx-auto">
            A visual journey through the forest, mushroom cultivation, and life at the edge of the woods on Texada
            Island.
          </p>
        </div>
      </section>

      {/* Mushroom Treasures Section */}
      <section className="py-12 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">Forest Mushrooms & Fungi</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_122601_053-b4W7dW79P82zEnLeq4ESkKtvLLNJ3Q.jpg"
                alt="Vibrant 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_122911_830-2Q0ZOzzzL4YAfdfMMCFpHnOyoCy87p.jpg"
                alt="Orange coral mushrooms growing 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_122907_932-LpmXYCIUZszbpOlB2dHqAv8nJGCtZU.jpg"
                alt="Bright yellow coral mushrooms on moss"
                className="w-full h-auto"
              />
            </div>
          </div>

          <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_122857_357-qnZHfuPlKuvI6Qb5G9QucUFgve1FZk.jpg"
                alt="Turkey tail mushrooms with beautiful banding patterns"
                className="w-full h-auto"
              />
            </div>
            <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>

          <div className="grid md:grid-cols-3 gap-6">
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122900_435-wb8VPiXxn7UUctygqQDrIINgVJkDZF.jpg"
                alt="Moss and lichen with pixie cups"
                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="White ghost pipe plant on mossy log"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_201305-3wgTwCFhUieQiiFioo5PxvbdvQSeWF.jpg"
                alt="Creative moss-covered log sculpture with skull decoration"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Forest Landscapes Section */}
      <section className="py-12 px-4 fern-pattern">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-foreground mb-8">The Old Growth Forest</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/20230831_174019-Qh9v3KIB7YIoRXrezZoSvMXo7qCUMt.jpg"
                alt="Sunlight streaming through tall forest trees with ferns"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210719_072818-pw7FwSOKsKN1SkhhI04Na0uxNAET8a.jpg"
                alt="Forest path with tall trees and morning light"
                className="w-full h-auto"
              />
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            <div className="relative rounded-lg overflow-hidden">
              <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/IMG_20210818_171149-xIrMFjfJgqt8KvoKsU8TW6UAY4Edxl.jpg"
                alt="Moss-covered trees 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_20210717_192600-3x1vh5nWmxpNHlnwD3CL06FGlOUwVJ.jpg"
                alt="Fern frond unfurling on the forest floor"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Cultivation & Work Section */}
      <section className="py-12 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">Mushroom Cultivation</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 in cultivation area"
                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 standing next to freshly cut log for mushroom cultivation"
                className="w-full h-auto"
              />
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_124024-xmt1dHlhBDRwScoQHQTuPC4Fgk1m0b.jpg"
                alt="John examining stacked inoculated logs covered with mesh"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122703_505-Ow3Gc2G2Awhf5xzju6DQG0tQnD7nCT.jpg"
                alt="Working with logs in the cultivation area"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Life in the Forest Section */}
      <section className="py-12 px-4 fern-pattern">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-foreground mb-8">Life at the Edge of the Woods</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_122849_429-trLTSHlz0FNvU5yO4XhGqSk8PakrO2.jpg"
                alt="Una the dog sitting happily on moss-covered log"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_130727-MGAmnEAzKYvyJWvOQuJ7DAcqmwC4fD.jpg"
                alt="John proudly showing off a tall mullein plant"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210818_190727-bmxMdsibaf3JG5U7Y3WsXjGTfAbnyR.jpg"
                alt="Young pine tree in a pot with sunset in background"
                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_20210717_193610-u2vtOa8FutWIIc4dZ9xTCTv4thu5xY.jpg"
              alt="People in a field with John, and a toy unicorn on moss in foreground"
              className="w-full h-auto"
            />
          </div>
        </div>
      </section>

      {/* Mushroom Art & Celebrations Section */}
      <section className="py-12 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">Mushroom Art & Celebrations</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_20201031_212401-Yufv4gFLGszaSBiYQbb0Lx3nZPnkl7.jpg"
                alt="Two carved pumpkins lit up at night with mushroom designs"
                className="w-full h-auto"
              />
            </div>
            <div className="relative rounded-lg overflow-hidden">
              <img
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20201101_162430-qzPwQ3UMd78ABuadb3yz6WAJ8ThZKV.jpg"
                alt="Three carved pumpkins with mushroom designs displayed on a bench"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 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">Experience the Forest Yourself</h2>
          <p className="text-xl mb-8 text-primary-foreground/90 leading-relaxed text-pretty">
            Join us for a hands-on mushroom cultivation course and discover the magic of the old growth forest
            firsthand.
          </p>
          <div className="flex gap-4 justify-center">
            <Link href="/events">
              <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
                View Courses
              </Button>
            </Link>
            <Link href="/sponsor">
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 bg-transparent">
                Support the Forest
              </Button>
            </Link>
          </div>
        </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>
  )
}