import { Link } from "react-router-dom";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Users, Accessibility, Wifi, Plane, Train, Car, MapPin, Building, Layers, Star } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const infoCards = [
  { icon: Users, label: "Capacity", value: "2,500", desc: "Main hall seats 2,000 with additional breakout rooms for workshops and panels." },
  { icon: Accessibility, label: "Accessibility", value: "Fully Accessible", desc: "Wheelchair ramps, elevators, accessible restrooms, and reserved seating on all levels." },
  { icon: Wifi, label: "WiFi", value: "High-Speed", desc: "Dedicated 1Gbps conference WiFi network with separate speaker and attendee SSIDs." },
];

const travelOptions = [
  { icon: Plane, title: "By Air", desc: "SFO International Airport is 20 minutes away. BART runs directly to the venue area." },
  { icon: Train, title: "By Train", desc: "Caltrain and BART stations are within a 5-minute walk. Take BART to Powell Street." },
  { icon: Car, title: "By Car", desc: "Parking available at 5th & Mission Garage ($35/day). Rideshare drop-off on Howard St." },
];

const hotels = [
  { name: "The St. Regis", distance: "0.2 miles from venue", price: "$350–$500/night" },
  { name: "Hotel Nikko", distance: "0.4 miles from venue", price: "$200–$320/night" },
  { name: "Axiom Hotel", distance: "0.5 miles from venue", price: "$150–$240/night" },
];

export default function VenuePage() {
  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <Header />

      {/* Hero */}
      <section className="pt-32 pb-24 text-center px-6">
        <h1 className="text-5xl font-black tracking-tight mb-4 animate-fade-up">The Apex Centre</h1>
        <p className="text-slate-400 flex items-center justify-center gap-2"><MapPin className="h-4 w-4" />747 Howard Street, San Francisco, CA 94103</p>
      </section>

      {/* Image Placeholder */}
      <section className="px-6 pb-24">
        <div className="mx-auto max-w-5xl">
          <div className="aspect-video rounded-2xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-800 relative overflow-hidden flex items-center justify-center">
            <div className="absolute inset-0 bg-gradient-to-t from-slate-950/60 to-transparent rounded-2xl z-10" />
            <div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: "radial-gradient(circle, #94a3b8 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
            <div className="absolute top-1/4 left-1/3 w-40 h-40 bg-indigo-500/20 rounded-full blur-3xl" />
            <div className="absolute bottom-1/3 right-1/4 w-32 h-32 bg-cyan-400/15 rounded-full blur-3xl" />
            <div className="relative z-20 text-center text-slate-500">
              <Building className="h-16 w-16 mx-auto mb-4 opacity-50" />
              <p className="text-sm">Venue Photo</p>
            </div>
          </div>
        </div>
      </section>

      {/* Info Cards */}
      <section className="px-6 pb-24">
        <div className="mx-auto max-w-5xl grid md:grid-cols-3 gap-6 stagger">
          {infoCards.map((card, i) => (
            <Card key={i} className="backdrop-blur-sm bg-slate-900/80 border-slate-800 hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6 text-center">
                <card.icon className="h-8 w-8 text-indigo-400 mx-auto mb-3" />
                <div className="font-semibold text-white mb-1">{card.label}</div>
                <div className="text-lg font-bold text-indigo-400 mb-2">{card.value}</div>
                <p className="text-sm text-slate-400">{card.desc}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Getting There */}
      <section className="px-6 pb-24">
        <div className="mx-auto max-w-5xl">
          <h2 className="text-3xl font-black tracking-tight text-center mb-10 animate-fade-up">Getting There</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {travelOptions.map((opt, i) => (
              <Card key={i} className="bg-slate-900/50 border-slate-800 hover:border-indigo-500/50 transition-colors">
                <CardContent className="p-6">
                  <opt.icon className="h-8 w-8 text-cyan-400 mb-4" />
                  <h3 className="font-semibold text-white mb-2">{opt.title}</h3>
                  <p className="text-sm text-slate-400">{opt.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Accommodation */}
      <section className="px-6 pb-24">
        <div className="mx-auto max-w-5xl">
          <h2 className="text-3xl font-black tracking-tight text-center mb-10 animate-fade-up">Accommodation</h2>
          <div className="grid md:grid-cols-3 gap-6 stagger">
            {hotels.map((h, i) => (
              <Card key={i} className="bg-slate-900/50 border-slate-800 hover:border-indigo-500/50 hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6">
                  <Building className="h-6 w-6 text-indigo-400 mb-3" />
                  <div className="flex gap-0.5 mb-2">{[...Array(4)].map((_, i) => <Star key={i} className="h-3 w-3 fill-amber-400 text-amber-400" />)}</div>
                  <h3 className="font-semibold text-white mb-1">{h.name}</h3>
                  <p className="text-sm text-slate-400 mb-2">{h.distance}</p>
                  <Badge variant="outline" className="border-slate-700 text-slate-300">{h.price}</Badge>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Map Placeholder */}
      <section className="px-6 pb-24">
        <div className="mx-auto max-w-5xl">
          <div className="aspect-[2/1] rounded-2xl bg-slate-200 border border-slate-300 flex items-center justify-center">
            <div className="text-center text-slate-500">
              <MapPin className="h-12 w-12 mx-auto mb-3 opacity-50" />
              <p className="text-sm">Interactive Map</p>
            </div>
          </div>
        </div>
      </section>

      {/* Floor Plan */}
      <section className="px-6 pb-24">
        <div className="mx-auto max-w-5xl text-center">
          <h2 className="text-3xl font-black tracking-tight mb-4 animate-fade-up">Floor Plan</h2>
          <p className="text-slate-400 mb-8">The venue features a main hall, three breakout rooms, a workshop lab, and a networking lounge.</p>
          <div className="aspect-video rounded-2xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-800 relative overflow-hidden flex items-center justify-center">
            <div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: "radial-gradient(circle, #94a3b8 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
            <div className="absolute top-1/3 right-1/4 w-36 h-36 bg-indigo-500/15 rounded-full blur-3xl" />
            <div className="absolute bottom-1/4 left-1/3 w-28 h-28 bg-cyan-400/10 rounded-full blur-3xl" />
            <div className="relative text-center text-slate-500">
              <Layers className="h-12 w-12 mx-auto mb-3 opacity-50" />
              <p className="text-sm">Floor Plan Diagram</p>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}