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

export default function HomePage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-accent/5 to-background z-0" />

        {/* Background pattern */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23000000' fillOpacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        />

        <div className="container mx-auto px-4 relative z-10 text-center max-w-5xl">
          <div className="inline-block mb-6 px-4 py-1.5 bg-primary/10 border border-primary/20 rounded-full">
            <p className="text-sm font-mono text-primary">August 24-29, 2025 • Fifth Edition</p>
          </div>

          <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold mb-6 text-balance leading-[1.1]">
            Crypto Commons
            <br />
            Gathering
          </h1>

          <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto text-pretty leading-relaxed">
            A hack-ademic confluence of commons praxis and the latest cryptographic technologies, set in the foothills
            of the Austrian Alps.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
            <Button size="lg" className="gap-2 text-base" asChild>
              <Link
                href="https://docs.google.com/forms/d/1crj5ukURBHMKhVg71cDbikjL2D8BVtNw9C6gl3myG9c/edit"
                target="_blank"
                rel="noopener noreferrer"
              >
                Register Now <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" className="gap-2 text-base bg-transparent" asChild>
              <Link href="https://t.me/+8a7PooNV6202YjI0" target="_blank" rel="noopener noreferrer">
                Join Telegram
              </Link>
            </Button>
          </div>

          <div className="flex flex-wrap gap-6 justify-center text-sm text-muted-foreground">
            <div className="flex items-center gap-2">
              <MapPin className="w-4 h-4 text-primary" />
              <span>Reichenau an der Rax, Austria</span>
            </div>
            <div className="flex items-center gap-2">
              <Calendar className="w-4 h-4 text-primary" />
              <span>6 Days • Unconference</span>
            </div>
            <div className="flex items-center gap-2">
              <Users className="w-4 h-4 text-primary" />
              <span>Activists, Researchers, Hackers, Builders</span>
            </div>
          </div>
        </div>
      </section>

      {/* What is CCG Section */}
      <section className="py-24 px-4 bg-muted/30">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">The Best Event in the World</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Join us for an unconference-style gathering where you bring as much as you receive. Friendships are made
                that last a lifetime, and solidarity is built that might just coalesce into new digital public
                infrastructures.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-4">
                CCG has spawned movements like <span className="text-primary font-semibold">#CoFi</span> and{" "}
                <span className="text-primary font-semibold">#MycoFi</span>, and holds the possibility for a new
                technologically-enabled commons that leverages network technologies to regain ground against state and
                corporate control.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                What began in 2021 as a modest gathering has evolved into an annual moment of (re)connection and
                reflection for a growing community of crypto-commons thinkers from around the world.
              </p>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <Heart className="w-8 h-8 text-primary mb-3" />
                  <h3 className="font-semibold mb-2">Lifelong Friendships</h3>
                  <p className="text-sm text-muted-foreground">
                    Connect with like-minded individuals in a convivial setting
                  </p>
                </CardContent>
              </Card>

              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <Sprout className="w-8 h-8 text-primary mb-3" />
                  <h3 className="font-semibold mb-2">Cross-Pollination</h3>
                  <p className="text-sm text-muted-foreground">Share visions, trajectories, and strategies</p>
                </CardContent>
              </Card>

              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <Network className="w-8 h-8 text-primary mb-3" />
                  <h3 className="font-semibold mb-2">New Infrastructures</h3>
                  <p className="text-sm text-muted-foreground">Build regenerative and cooperative systems</p>
                </CardContent>
              </Card>

              <Card className="border-primary/20">
                <CardContent className="p-6">
                  <Users className="w-8 h-8 text-primary mb-3" />
                  <h3 className="font-semibold mb-2">Participant-Driven</h3>
                  <p className="text-sm text-muted-foreground">Everyone contributes and shapes the event</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Themes Section */}
      <section className="py-24 px-4">
        <div className="container mx-auto max-w-5xl">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-center text-balance">Explore Key Themes</h2>
          <p className="text-muted-foreground text-center mb-12 max-w-2xl mx-auto">
            Through participant-led sessions, we collectively explore the intersection of commoning, degrowth, and web3
          </p>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              "Regenerative Finance",
              "MycoFi",
              "Community Currencies",
              "Digital Commons",
              "Crypto Commons",
              "Open Source",
              "Degrowth",
              "Post-Capitalism",
              "Ecofeminism",
              "Multispecies Justice",
              "Radical Game Design",
              "Speculative Fiction",
            ].map((theme) => (
              <div
                key={theme}
                className="p-4 bg-card border border-border rounded-lg hover:border-primary/40 transition-colors"
              >
                <p className="font-medium text-card-foreground">{theme}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Unconference Format */}
      <section className="py-24 px-4 bg-primary text-primary-foreground">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">What is an Unconference?</h2>
          <p className="text-lg leading-relaxed opacity-90 mb-8">
            An unconference is a participant-driven event format that emphasizes open, flexible, and spontaneous
            discussions rather than traditional pre-planned presentations. Unlike conventional conferences,
            unconferences have no predefined agenda or speakers.
          </p>
          <p className="leading-relaxed opacity-90 mb-8">
            Attendees collaboratively propose topics, sessions, and activities on the spot. Participants vote or
            self-organize around topics they find most interesting, forming small groups or breakout sessions where
            discussions, workshops, or hands-on activities take place.
          </p>
          <p className="leading-relaxed opacity-90">
            Everyone is considered equally qualified to contribute, share insights, and guide conversations. Bring your
            ideas for talks, roundtables, workshops, prototyping sessions, board game nights, LARPs, and more.
          </p>
        </div>
      </section>

      {/* Location Section */}
      <section className="py-24 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="order-2 md:order-1">
              <div className="aspect-[4/3] bg-muted rounded-lg overflow-hidden">
                <img
                  src="/austrian-alps-foothills-mountain-landscape-with-tr.jpg"
                  alt="Commons Hub in the Austrian Alps"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>

            <div className="order-1 md:order-2">
              <h2 className="text-3xl md:text-4xl font-bold mb-6">The Commons Hub</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Located in the foothills of the Austrian Alps at Reichenau an der Rax, the Commons Hub provides a
                convivial, off-grid setting perfect for deep reflection and meaningful connection.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-6">
                The Commons Hub has become a full-fledged event hosting organization, co-led by brothers Felix and Emil
                Fritsch, with exciting expansion and ecovillage plans in the works.
              </p>

              <div className="space-y-3 mb-8">
                <div className="flex items-start gap-3">
                  <MapPin className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
                  <div>
                    <p className="font-medium">Richard von Schoeller-Straße 9</p>
                    <p className="text-sm text-muted-foreground">2651 Reichenau an der Rax, Austria</p>
                  </div>
                </div>
              </div>

              <div className="flex gap-4">
                <Button variant="outline" asChild>
                  <Link href="https://ccg2025.vercel.app/directions" target="_blank" rel="noopener noreferrer">
                    Get Directions
                  </Link>
                </Button>
                <Button variant="outline" asChild>
                  <Link href="https://www.commons-hub.at/" target="_blank" rel="noopener noreferrer">
                    Visit Commons Hub
                  </Link>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 px-4 bg-muted/30">
        <div className="container mx-auto max-w-3xl text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">Join the Fifth Edition of CCG</h2>
          <p className="text-lg text-muted-foreground mb-8 text-pretty">
            Whether you're reconnecting or arriving for the first time, CCG 2025 presents a space to collectively take
            stock of what crypto commons has become and what it still could be.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <Button size="lg" className="gap-2" asChild>
              <Link
                href="https://docs.google.com/forms/d/1crj5ukURBHMKhVg71cDbikjL2D8BVtNw9C6gl3myG9c/edit"
                target="_blank"
                rel="noopener noreferrer"
              >
                Register and Get Tickets <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link href="https://ccg2025.vercel.app/financial-transparency" target="_blank" rel="noopener noreferrer">
                Financial Transparency
              </Link>
            </Button>
          </div>

          <p className="text-sm text-muted-foreground">
            Interested in the Crypto Commons Association cooperative? Learn more at the event.
          </p>
        </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 2025</h3>
              <p className="text-sm text-muted-foreground">
                Crypto Commons Gathering
                <br />
                August 24-29, 2025
              </p>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Links</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="https://ccg2025.vercel.app/about"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    About CCG 2025
                  </Link>
                </li>
                <li>
                  <Link
                    href="https://ccg2025.vercel.app/directions"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                  >
                    Directions
                  </Link>
                </li>
                <li>
                  <Link
                    href="https://ccg2025.vercel.app/financial-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/+8a7PooNV6202YjI0"
                    className="text-muted-foreground hover:text-foreground transition-colors"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Telegram
                  </Link>
                </li>
                <li>
                  <span className="text-muted-foreground">#CoFi</span>
                </li>
                <li>
                  <span className="text-muted-foreground">#MycoFi</span>
                </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>
                  <span className="text-muted-foreground">Crypto Commons Association</span>
                </li>
              </ul>
            </div>
          </div>

          <div className="pt-8 border-t border-border text-center text-sm text-muted-foreground">
            <p>© 2025 Crypto Commons Gathering. Built with solidarity for the commons.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}