"use client"

import type React from "react"

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

export default function HomePage() {
  const [selectedImage, setSelectedImage] = useState<string | null>(null)

  const handleImageClick = (imageSrc: string) => {
    setSelectedImage(imageSrc)
  }

  const handleCloseModal = () => {
    setSelectedImage(null)
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Escape") {
      handleCloseModal()
    }
  }

  const handleAddToCalendar = () => {
    const event = {
      title: "Crypto Commons Gathering 2026",
      description:
        "A week-long retreat where genuine desire for postcapitalist change meets blockchain tinkering, commons building, and radical imagination in the Austrian Alps.",
      location: "Commons Hub, Richard von Schoeller-Straße 9, 2651 Reichenau an der Rax, Austria",
      startDate: "2026-08-16T15:00:00",
      endDate: "2026-08-22T12:00:00",
    }

    const icsContent = `BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Crypto Commons Gathering//CCG 2026//EN
BEGIN:VEVENT
UID:ccg2026@cryptocommonsgather.ing
DTSTAMP:${new Date().toISOString().replace(/[-:]/g, "").split(".")[0]}Z
DTSTART:${event.startDate.replace(/[-:]/g, "")}
DTEND:${event.endDate.replace(/[-:]/g, "")}
SUMMARY:${event.title}
DESCRIPTION:${event.description}
LOCATION:${event.location}
STATUS:CONFIRMED
END:VEVENT
END:VCALENDAR`

    const blob = new Blob([icsContent], { type: "text/calendar;charset=utf-8" })
    const link = document.createElement("a")
    link.href = URL.createObjectURL(blob)
    link.download = "ccg2026.ics"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

  return (
    <div className="min-h-screen">
      {selectedImage && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
          onClick={handleCloseModal}
          onKeyDown={handleKeyDown}
          tabIndex={0}
        >
          <button
            className="absolute top-4 right-4 text-white hover:text-white/70 transition-colors"
            onClick={handleCloseModal}
            aria-label="Close"
          >
            <X className="w-8 h-8" />
          </button>
          <img
            src={selectedImage || "/placeholder.svg"}
            alt="Zoomed view"
            className="max-w-full max-h-[90vh] object-contain rounded-lg"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}

      {/* Hero Section */}
      <section className="relative min-h-[90vh] 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/60 via-background/50 to-background/70 z-[1]" />

        <div className="container mx-auto px-4 relative z-10 text-center max-w-5xl">
          <p className="text-xl md:text-2xl font-spray text-primary mb-2 tracking-wide animate-in fade-in slide-in-from-bottom-4 duration-700 [text-shadow:_2px_2px_0_rgb(0_0_0_/_10%)]">
            Join the SIXTH edition of the
          </p>

          <h1 className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 text-balance leading-[1.05] tracking-tight animate-in fade-in slide-in-from-bottom-6 duration-1000 [font-feature-settings:'ss01'] [text-shadow:_3px_3px_0_rgb(0_0_0_/_5%)]">
            Crypto Commons
            <br />
            Gathering
          </h1>

          <div className="inline-block mb-6 px-6 py-2 bg-primary/20 border-2 border-primary/40 rounded-full backdrop-blur-sm">
            <p className="text-lg md:text-xl font-mono font-semibold text-primary">August 16-22, 2026</p>
          </div>

          <p className="text-xl md:text-2xl text-foreground/90 mb-8 max-w-2xl mx-auto text-pretty leading-relaxed font-medium">
            A week-long retreat where genuine desire for postcapitalist change meets blockchain tinkering, commons
            building, and radical imagination in 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="/register">
                Register Now <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="gap-2 text-base bg-transparent backdrop-blur-sm"
              onClick={handleAddToCalendar}
            >
              <Calendar className="w-4 h-4" />
              Add to Calendar
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="gap-2 text-base bg-transparent backdrop-blur-sm"
              onClick={() => {
                const aboutSection = document.getElementById("about-ccg")
                aboutSection?.scrollIntoView({ behavior: "smooth" })
              }}
            >
              Learn about the Event
            </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>Hackers, Academics, Activists, Researchers, Builders </span>
            </div>
          </div>
        </div>
      </section>

      {/* Community Photos Section */}
      <section className="py-16 px-4 bg-background">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-3 gap-4">
            <div
              className="aspect-[4/3] rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity"
              onClick={() => handleImageClick("/images/20220901-085249.jpg")}
            >
              <img
                src="/images/20220901-085249.jpg"
                alt="Wooden bridge in Reichenau an der Rax with Austrian Alps"
                className="w-full h-full object-cover"
              />
            </div>
            <div
              className="aspect-[4/3] rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity"
              onClick={() => handleImageClick("/images/20220505-113225.jpg")}
            >
              <img
                src="/images/20220505-113225.jpg"
                alt="CCG 2022 community group photo in the Austrian Alps"
                className="w-full h-full object-cover"
              />
            </div>
            <div
              className="aspect-[4/3] rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity"
              onClick={() => handleImageClick("/images/20250826-161715.jpg")}
            >
              <img
                src="/images/20250826-161715.jpg"
                alt="Discussion circle at Commons Hub with Austrian Alps backdrop"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* What is CCG Section */}
      <section className="py-24 px-4 bg-muted/30" id="about-ccg">
        <div className="container mx-auto max-w-4xl">
          <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">What is CCG?</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                The Crypto Commons Gathering (CCG) is an annual week-long retreat organised by the Crypto Commons
                Association in collaboration with the Commons Hub. To its growing community, it serves as a recurring
                temporary refuge from late-capitalism (or something worse) and as a convivium to reimagine how we
                organize value, care and meaning for a "post-capitalist world of many worlds".
              </p>
              <p className="text-muted-foreground leading-relaxed mb-4">
                2026 marks the 6th edition of the CCG — six years of bringing together commons builders, token
                tinkerers, speculative worldbuilders, artists, complex systems thinkers, degens turned regen, and
                everyone curious about the weird futures that emerge when crypto meets genuine international and
                intersectional postcapitalist desire.
              </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">
            Unconference Themes: What to Expect
          </h2>
          <p className="text-muted-foreground text-center mb-12 max-w-3xl mx-auto leading-relaxed">
            Talks, workshops, and spontaneous experiments at CCG cover a wide range of topics. They often start with a
            curiosity in using blockchain, tokenization and decentralized governance for the common good, but rarely
            stay there exclusively – crypto, non-crypto alternatives, open source projects, degrowth initiatives, and
            other spheres increasingly cross-pollinate here under a decolonial, feminist, queer, multispecies-attuned
            frame.
          </p>

          <div className="grid sm:grid-cols-2 gap-6 mb-8">
            <Card className="border-primary/20">
              <CardContent className="p-6">
                <h3 className="font-bold mb-3 text-lg">Regenerative & Collaborative Finance</h3>
                <p className="text-sm text-muted-foreground">
                  <Link href="https://www.refidao.com/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">ReFi DAO</Link>,{" "}
                  <Link href="https://www.ethichub.com/en" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">EthicHub</Link>,{" "}
                  <Link href="https://www.collaborative-finance.net/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">CoFi Gathering</Link>,{" "}
                  <Link href="https://www.regen.network/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Regen Network</Link>,{" "}
                  <Link href="https://circles.garden/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Circles UBI</Link>
                </p>
              </CardContent>
            </Card>
            <Card className="border-primary/20">
              <CardContent className="p-6">
                <h3 className="font-bold mb-3 text-lg">Myco-Economics</h3>
                <p className="text-sm text-muted-foreground">
                  <Link href="https://mycofi.earth" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">MycoFi</Link>,{" "}
                  <Link href="https://psilo-cyber.net/ics" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Psilo-Cybernetics</Link>,{" "}
                  <Link href="https://post-appitalism.app" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Post-Appitalism</Link>
                </p>
              </CardContent>
            </Card>
            <Card className="border-primary/20">
              <CardContent className="p-6">
                <h3 className="font-bold mb-3 text-lg">Governance & Mutualism</h3>
                <p className="text-sm text-muted-foreground">
                  <Link href="https://ecsa.io/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Economic Space Agency</Link>,{" "}
                  <Link href="https://bread.coop/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Bread Coop</Link>,{" "}
                  <Link href="https://www.holochain.org/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Holochain</Link>
                </p>
              </CardContent>
            </Card>
            <Card className="border-primary/20">
              <CardContent className="p-6">
                <h3 className="font-bold mb-3 text-lg">Solarpunk & Radical Games</h3>
                <p className="text-sm text-muted-foreground">
                  <Link href="https://pocas.store/" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">pocas</Link>,{" "}
                  <Link href="https://dandelion.events/e/ct16g" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Solar Punk WOW</Link>,{" "}
                  <Link href="https://linktr.ee/futurescraft" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors underline">Futurescraft</Link>, economic science fiction
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Unconference Format */}
      <section className="py-24 px-4 relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: `url('/images/image.jpeg')`,
          }}
        />
        <div className="absolute inset-0 bg-primary/90" />
        <div className="container mx-auto max-w-4xl text-center relative z-10">
          <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance text-primary-foreground">
            Format: How We Explore
          </h2>
          <p className="text-lg leading-relaxed opacity-90 mb-8 text-primary-foreground">
            CCG follows an open space or "unconference" format. This means the schedule is co-created on-site by all
            participants: during the daily morning circle, anyone can propose a session, host a discussion, or start a
            collective experiment, and schedule it at one of five sites across the Hub, each with its own affordances.
          </p>
          <p className="leading-relaxed opacity-90 text-primary-foreground">
            Workshops, keynotes, rituals, games and evening performances traditionally unfold organically, reflecting
            the shared interests, dynamics and projects that emerge over the week.
          </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/4] bg-muted rounded-lg overflow-hidden">
                <img
                  src="/images/20220429-145359.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 mountains 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="/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 Sixth 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 2026 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="/register">
                Register and Get Tickets <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link href="/transparency">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 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/+gZjhNaNDswIc0ZDg0"
                    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 a Creative Commons license. Built with solidarity for the commons.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}