import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Users, Heart, Sprout, Network, Sparkles } from "lucide-react"
import Link from "next/link"

export default function AboutPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center z-0"
          style={{
            backgroundImage: `url('/images/20220429-145359.jpg')`,
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-b from-background/90 via-background/80 to-background z-[1]" />

        <div className="container mx-auto px-4 relative z-10 text-center max-w-4xl py-20">
          <h1 className="text-4xl md:text-6xl font-black mb-6 text-balance leading-tight">About CCG 2026</h1>
          <p className="text-lg md:text-xl text-muted-foreground text-pretty">
            Six years of thinkering with the promises and paradoxes of crypto and the commons
          </p>
        </div>
      </section>

      {/* Main Content */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-4xl">
          <div className="prose prose-lg max-w-none">
            <h2 className="text-3xl font-bold mb-6">A Growing Movement</h2>
            <p className="text-muted-foreground leading-relaxed mb-6">
              What began in 2020 as a modest excuse for then-PhD researcher Felix Fritsch to bring together
              crypto-commons thinkers from around the world in his own backyard has since evolved into an annual moment
              of (re)connection and reflection for a growing community—and for the many lived practices and experiments
              in commoning, degrowth, mutualism, and post-capitalist economic worldbuilding it is linked to.
            </p>

            <p className="text-muted-foreground leading-relaxed mb-8">
              Over the years, CCG has welcomed activists, researchers, hackers, builders, artists, game designers, and
              others—newcomers and "OGs" alike. It has shaped itself as a convivial and fertile space for people and
              projects working across and beyond web3 to cross-pollinate visions, trajectories, and strategies for
              realizing regenerative and cooperative infrastructures.
            </p>

            <div className="grid md:grid-cols-3 gap-4 my-12">
              <Card className="border-primary/20">
                <CardContent className="p-6 text-center">
                  <div className="text-4xl font-black text-primary mb-2">6th</div>
                  <p className="text-sm text-muted-foreground">Annual Edition</p>
                </CardContent>
              </Card>
              <Card className="border-primary/20">
                <CardContent className="p-6 text-center">
                  <div className="text-4xl font-black text-primary mb-2">100+</div>
                  <p className="text-sm text-muted-foreground">Expected Participants</p>
                </CardContent>
              </Card>
              <Card className="border-primary/20">
                <CardContent className="p-6 text-center">
                  <div className="text-4xl font-black text-primary mb-2">7</div>
                  <p className="text-sm text-muted-foreground">Days of Connection</p>
                </CardContent>
              </Card>
            </div>

            <h2 className="text-3xl font-bold mb-6 mt-16">The 2026 Edition: New Infrastructures</h2>
            <p className="text-muted-foreground leading-relaxed mb-6">
              While remaining an unconference at heart, each edition has reflected the community's shifting priorities
              and aspirations. In 2026, the gathering enters its sixth year, presenting not only a space to collectively
              take stock of what crypto commons has become and what it still could be, but also a moment for the growing
              community to think and organize itself anew.
            </p>

            <div className="bg-muted/50 border border-border rounded-lg p-8 my-8">
              <h3 className="text-2xl font-bold mb-4">What's Evolving in 2026</h3>
              <ul className="space-y-4">
                <li className="flex gap-3">
                  <Sparkles className="w-5 h-5 text-primary flex-shrink-0 mt-1" />
                  <div>
                    <strong className="text-foreground">The Commons Hub</strong> has become a full-fledged event hosting
                    organization, co-led by brothers Felix and Emil Fritsch, with exciting expansion and ecovillage
                    plans underway.
                  </div>
                </li>
                <li className="flex gap-3">
                  <Sparkles className="w-5 h-5 text-primary flex-shrink-0 mt-1" />
                  <div>
                    <strong className="text-foreground">The Crypto Commons Association</strong>, previously stewarded by
                    Felix Fritsch and Giulio Quarta, is being reimagined as a cooperative vehicle for organizing and
                    supporting events at the Hub and beyond, introducing peer-production values and frameworks.
                  </div>
                </li>
              </ul>
            </div>

            <h2 className="text-3xl font-bold mb-6 mt-16">What to Expect</h2>

            <div className="space-y-6 mb-12">
              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <div className="flex gap-4">
                    <Heart className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-bold mb-2">Gather & Connect</h3>
                      <p className="text-muted-foreground">
                        Meet others in a convivial, off-grid setting in the Austrian countryside, whether you're
                        reconnecting or arriving for the first time. Form friendships that last a lifetime.
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <div className="flex gap-4">
                    <Sprout className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-bold mb-2">Explore Key Themes</h3>
                      <p className="text-muted-foreground mb-3">
                        Engage through participant-led sessions on regenerative and collaborative finance, MycoFi,
                        community currencies, digital and crypto commons, open source, degrowth, post-capitalism,
                        ecofeminism, multispecies justice, radical game design, speculative fiction, and more.
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <div className="flex gap-4">
                    <Users className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-bold mb-2">Participate Fully</h3>
                      <p className="text-muted-foreground">
                        Experience a fully unconferenced structure where time and sessions are collectively managed.
                        Bring your ideas for talks, roundtables, workshops, prototyping sessions, board game nights,
                        LARPs, and more. Immerse yourself, find inspiration, and team up with others.
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <div className="flex gap-4">
                    <Network className="w-6 h-6 text-primary flex-shrink-0 mt-1" />
                    <div>
                      <h3 className="font-bold mb-2">Co-Create the Future</h3>
                      <p className="text-muted-foreground">
                        If you're interested, contribute to the ongoing co-creation of the Crypto Commons Association as
                        it transitions into an events-oriented cooperative, a DAO, or something in between.
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            <h2 className="text-3xl font-bold mb-6 mt-16">Spawning New Movements</h2>
            <p className="text-muted-foreground leading-relaxed mb-6">
              CCG has been a catalyst for emerging movements and initiatives. From the gathering, movements like{" "}
              <strong className="text-primary">#CoFi</strong> (Cooperative Finance) and{" "}
              <strong className="text-primary">#MycoFi</strong> (Mycelial Finance) have emerged, embodying the potential
              for technologically-enabled commons that leverage network technologies to reclaim ground from state and
              corporate control.
            </p>
            <p className="text-muted-foreground leading-relaxed mb-8">
              The solidarity built here has coalesced into new digital public infrastructures, experimental protocols,
              and collaborative frameworks that continue to evolve between gatherings.
            </p>
          </div>
        </div>
      </section>

      {/* Photo Section */}
      <section className="py-16 px-4 bg-muted/30">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold mb-8 text-center">Experience CCG</h2>
          <div className="grid md:grid-cols-3 gap-4">
            <div className="aspect-[4/3] rounded-lg overflow-hidden">
              <img
                src="/images/20220830-104828.jpg"
                alt="CCG discussion circle"
                className="w-full h-full object-cover"
              />
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden">
              <img src="/images/20220503-155430.jpg" alt="Community gathering" className="w-full h-full object-cover" />
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden">
              <img src="/images/image.png" alt="Alpine setting" className="w-full h-full object-cover" />
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 px-4">
        <div className="container mx-auto max-w-3xl text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">Be Part of the Sixth Edition</h2>
          <p className="text-lg text-muted-foreground mb-8 text-pretty">
            Join us August 16-22, 2026 in the Austrian Alps for an unforgettable week of connection, collaboration, and
            commons-building.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="gap-2" asChild>
              <Link href="/register">
                Register Now <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link href="/">Back to Home</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 border-t border-border">
        <div className="container mx-auto max-w-6xl">
          <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-8">
            <div>
              <h3 className="font-bold mb-4">CCG 2026</h3>
              <p className="text-sm text-muted-foreground">
                Crypto Commons Gathering
                <br />
                August 16-22, 2026
              </p>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Links</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="/gallery" className="text-muted-foreground hover:text-foreground transition-colors">
                    Gallery
                  </Link>
                </li>
                <li>
                  <Link href="/about" className="text-muted-foreground hover:text-foreground transition-colors">
                    About CCG 2026
                  </Link>
                </li>
                <li>
                  <Link href="/directions" className="text-muted-foreground hover:text-foreground transition-colors">
                    Directions
                  </Link>
                </li>
                <li>
                  <Link href="/transparency" className="text-muted-foreground hover:text-foreground transition-colors">
                    Financial Transparency
                  </Link>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Community</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="https://t.me/+n5V_wDVKWrk1ZTBh"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Join the CCG26 Telegram
                  </Link>
                </li>
                <li>
                  <Link
                    href="https://t.me/+gZjhNaDswIc0ZDg0"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Join the Crypto Commons Association Telegram
                  </Link>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Partners</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="https://www.commons-hub.at/"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Commons Hub
                  </Link>
                </li>
                <li>
                  <Link
                    href="https://crypto-commons.org"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Crypto Commons Association
                  </Link>
                </li>
                <li>
                  <Link href="/sponsorships" className="text-muted-foreground hover:text-foreground transition-colors">
                    Sponsorships
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          <div className="pt-8 border-t border-border text-center text-sm text-muted-foreground">
            <p>This website is under Creative Commons license. Built with solidarity for the commons.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
