import Link from "next/link"
import { MapPin, Train, Car, Plane, Phone, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export const metadata = {
  title: "Directions to Commons Hub | CCG 2026",
  description: "Travel directions to Crypto Commons Gathering 2026 at Commons Hub in Reichenau an der Rax, Austria",
}

export default function DirectionsPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between px-4">
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-xl font-bold">CCG 2026</span>
          </Link>
          <nav className="flex items-center space-x-6">
            <Link href="/" className="text-sm hover:text-primary transition-colors">
              Home
            </Link>
            <Link href="/about" className="text-sm hover:text-primary transition-colors">
              About
            </Link>
            <Link href="/register" className="text-sm hover:text-primary transition-colors">
              Register
            </Link>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-16 px-4 bg-gradient-to-br from-primary/5 via-background to-background">
        <div className="container mx-auto max-w-4xl text-center">
          <MapPin className="w-16 h-16 mx-auto mb-6 text-primary" />
          <h1 className="text-5xl font-black mb-4 tracking-tight">Directions to the Hub</h1>
          <p className="text-xl text-muted-foreground mb-8">Getting to Commons Hub in Reichenau an der Rax, Austria</p>
        </div>
      </section>

      {/* Address Section */}
      <section className="py-12 px-4 bg-card/50">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-2 border-primary/20">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <MapPin className="w-6 h-6 text-primary" />
                Address
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-lg mb-4">
                <strong>Commons Hub</strong>
                <br />
                Richard von Schoeller-Straße 9<br />
                2651 Reichenau an der Rax
                <br />
                Austria
              </p>
              <Button asChild>
                <a
                  href="https://www.google.com/maps/place/Richard+von+Schoeller-Stra%C3%9Fe+9,+2651+Reichenau+an+der+Rax,+Austria"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2"
                >
                  Open in Google Maps
                </a>
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Transportation Options */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-4xl space-y-8">
          {/* By Train */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Train className="w-6 h-6 text-primary" />
                By Train
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <p className="text-muted-foreground">
                The closest train station is <strong>Payerbach-Reichenau</strong>, about 10 minutes by car from the
                Commons Hub.
              </p>

              <div>
                <h3 className="font-bold text-lg mb-2">From Vienna:</h3>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
                  <li>Take the S-Bahn S1 or S2 from Vienna to Wiener Neustadt (about 45 minutes)</li>
                  <li>Transfer to the regional train (R) towards Semmering/Mürzzuschlag</li>
                  <li>Get off at Payerbach-Reichenau (about 30 minutes from Wiener Neustadt)</li>
                </ol>
                <p className="mt-2 text-sm">
                  <strong>Total journey time:</strong> approximately 1.5-2 hours
                </p>
              </div>

              <div>
                <h3 className="font-bold text-lg mb-2">From Graz:</h3>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
                  <li>Take the regional train (R) towards Vienna/Wiener Neustadt</li>
                  <li>Get off at Payerbach-Reichenau</li>
                </ol>
                <p className="mt-2 text-sm">
                  <strong>Journey time:</strong> approximately 2 hours
                </p>
              </div>

              <div className="border-t pt-6">
                <h3 className="font-bold text-lg mb-3">From the Train Station:</h3>
                <div className="bg-muted/50 p-4 rounded-lg space-y-3">
                  <p className="font-semibold flex items-center gap-2">
                    <Phone className="w-4 h-4" />
                    Taxi Services:
                  </p>
                  <ul className="space-y-2 text-sm">
                    <li>
                      <strong>Taxi Reichenau:</strong>{" "}
                      <a href="tel:+4326665277" className="text-primary hover:underline">
                        +43 2666 52 777
                      </a>
                    </li>
                    <li>
                      <strong>Taxi Payerbach:</strong>{" "}
                      <a href="tel:+43266652888" className="text-primary hover:underline">
                        +43 2666 52 888
                      </a>
                    </li>
                  </ul>
                  <p className="text-sm text-muted-foreground">
                    Cost: approximately €15-20 to the Commons Hub
                    <br />
                    Journey time: about 10 minutes
                  </p>
                  <p className="text-sm italic text-muted-foreground">
                    Note: It's recommended to call ahead and book a taxi, especially during peak times or late arrivals.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* By Car */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Car className="w-6 h-6 text-primary" />
                By Car
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <h3 className="font-bold text-lg mb-2">From Vienna (about 1 hour):</h3>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
                  <li>Take the A2 motorway towards Graz</li>
                  <li>Exit at "Seebenstein" (Exit 46)</li>
                  <li>Follow signs to Reichenau an der Rax</li>
                  <li>Continue on B27 to Reichenau an der Rax</li>
                </ol>
              </div>

              <div>
                <h3 className="font-bold text-lg mb-2">From Graz (about 1.5 hours):</h3>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
                  <li>Take the A2 motorway towards Vienna</li>
                  <li>Exit at "Seebenstein" (Exit 46)</li>
                  <li>Follow signs to Reichenau an der Rax</li>
                </ol>
              </div>

              <div className="bg-primary/10 p-4 rounded-lg">
                <p className="font-semibold">Parking:</p>
                <p className="text-muted-foreground">Free parking is available at the Commons Hub.</p>
              </div>
            </CardContent>
          </Card>

          {/* By Plane */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Plane className="w-6 h-6 text-primary" />
                By Plane
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-bold text-lg mb-2">Vienna International Airport (VIE):</h3>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
                  <li>Take the CAT (City Airport Train) or S7 to Vienna city center</li>
                  <li>Transfer to S1 or S2 towards Wiener Neustadt</li>
                  <li>Continue as described in the train directions above</li>
                </ol>
                <p className="mt-2 text-sm">
                  <strong>Total journey time:</strong> approximately 2.5-3 hours
                </p>
              </div>

              <div className="bg-muted/50 p-4 rounded-lg">
                <p className="font-semibold mb-2">Alternative:</p>
                <p className="text-muted-foreground">
                  Rent a car at the airport for a direct 1.5-hour drive to Reichenau an der Rax.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Need Help Section */}
      <section className="py-16 px-4 bg-card/50">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-2 border-primary/20">
            <CardHeader>
              <CardTitle>Need Help?</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-muted-foreground">
                If you need assistance with directions or transportation, feel free to reach out:
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button asChild variant="default">
                  <a href="mailto:contact@cryptocommonsgather.ing" className="inline-flex items-center gap-2">
                    <Mail className="w-4 h-4" />
                    Email Us
                  </a>
                </Button>
                <Button asChild variant="outline">
                  <a
                    href="https://t.me/+n5V_wDVKWrk1ZTBh"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2"
                  >
                    Join CCG26 Telegram
                  </a>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border py-12 px-4 bg-card/30">
        <div className="container mx-auto max-w-6xl">
          <div className="grid 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">
                The sixth edition of Crypto Commons Gathering in the Austrian Alps.
              </p>
            </div>
            <div>
              <h3 className="font-bold mb-4">Quick Links</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="/gallery" className="text-muted-foreground hover:text-primary transition-colors">
                    Gallery
                  </Link>
                </li>
                <li>
                  <Link href="/about" className="text-muted-foreground hover:text-primary transition-colors">
                    About CCG 2026
                  </Link>
                </li>
                <li>
                  <Link href="/directions" className="text-muted-foreground hover:text-primary transition-colors">
                    Directions
                  </Link>
                </li>
                <li>
                  <Link href="/transparency" className="text-muted-foreground hover:text-primary transition-colors">
                    Financial Transparency
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Community</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <a
                    href="https://t.me/+n5V_wDVKWrk1ZTBh"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-muted-foreground hover:text-primary transition-colors"
                  >
                    Join the CCG26 Telegram
                  </a>
                </li>
                <li>
                  <a
                    href="https://t.me/+gZjhNaDswIc0ZDg0"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-muted-foreground hover:text-primary transition-colors"
                  >
                    Join the Crypto Commons Association Telegram
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold mb-4">Partners</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link
                    href="https://www.commons-hub.at"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-muted-foreground hover:text-primary transition-colors"
                  >
                    Commons Hub
                  </Link>
                </li>
                <li>
                  <Link
                    href="https://crypto-commons.org"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-muted-foreground hover:text-primary transition-colors"
                  >
                    Crypto Commons Association
                  </Link>
                </li>
                <li>
                  <Link href="/sponsorships" className="text-muted-foreground hover:text-primary transition-colors">
                    Sponsorships
                  </Link>
                </li>
              </ul>
            </div>
          </div>
          <div className="border-t border-border pt-8 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>
  )
}
