import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle2 } from "lucide-react"
import Link from "next/link"

export default function SuccessPage() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <div className="flex-1 flex items-center justify-center p-4">
        <Card className="max-w-md w-full">
          <CardHeader className="text-center">
            <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
              <CheckCircle2 className="w-10 h-10 text-primary" />
            </div>
            <CardTitle className="text-2xl">Payment Successful!</CardTitle>
            <CardDescription>Welcome to Crypto Commons Gathering 2026</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-center text-muted-foreground">
              You've successfully registered for CCG 2026. Check your email for confirmation details and next steps.
            </p>
            <div className="space-y-2">
              <h3 className="font-semibold">What's Next?</h3>
              <ul className="text-sm space-y-1 text-muted-foreground">
                <li>• Join our Telegram community</li>
                <li>• Watch for pre-event communications</li>
                <li>• Prepare your session proposals</li>
                <li>• Get ready for an amazing experience</li>
              </ul>
            </div>
            <div className="flex gap-3 pt-4">
              <Button asChild className="flex-1">
                <Link href="/">Back to Home</Link>
              </Button>
              <Button asChild variant="outline" className="flex-1 bg-transparent">
                <a href="https://t.me/+Bc48A-mqvmY3MmE0">Join Telegram</a>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      <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-23, 2026
              </p>
            </div>

            <div>
              <h3 className="font-semibold mb-4 text-sm">Links</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="/register" className="text-muted-foreground hover:text-foreground transition-colors">
                    Register to Attend
                  </Link>
                </li>
                <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>
  )
}