import Link from "next/link"
import { Calendar, MapPin, Clock, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"

const upcomingEvents = [
  {
    id: 1,
    title: "Annual Business Summit 2025",
    date: "March 15, 2025",
    time: "9:00 AM - 5:00 PM",
    location: "Kwara International Conference Centre, Ilorin",
    description:
      "Join business leaders, policymakers, and entrepreneurs for a day of insights, networking, and strategic discussions on the future of business in Kwara State.",
    category: "Conference",
    image: "/business-conference-nigeria.jpg",
  },
  {
    id: 2,
    title: "Agricultural Innovation Workshop",
    date: "March 28, 2025",
    time: "10:00 AM - 3:00 PM",
    location: "KWACCIMA Secretariat, Ilorin",
    description:
      "Explore modern farming techniques, agritech solutions, and sustainable agricultural practices that can transform farming in Kwara State.",
    category: "Workshop",
    image: "/agriculture-technology-farming.jpg",
  },
  {
    id: 3,
    title: "Mining Sector Roundtable",
    date: "April 10, 2025",
    time: "2:00 PM - 6:00 PM",
    location: "Harmony Hotel, Ilorin",
    description:
      "A strategic discussion on sustainable mining practices, regulatory compliance, and opportunities in Kwara's mining sector.",
    category: "Roundtable",
    image: "/mining-industry-resources.jpg",
  },
  {
    id: 4,
    title: "SME Growth Masterclass",
    date: "April 22, 2025",
    time: "9:00 AM - 4:00 PM",
    location: "KWACCIMA Training Centre, Ilorin",
    description:
      "Practical strategies for scaling small and medium enterprises, accessing finance, and building sustainable business models.",
    category: "Training",
    image: "/small-business-training-entrepreneurs.jpg",
  },
  {
    id: 5,
    title: "Kwara Trade Fair 2025",
    date: "May 5-8, 2025",
    time: "8:00 AM - 6:00 PM Daily",
    location: "Kwara State Exhibition Ground, Ilorin",
    description:
      "The largest trade exhibition in Kwara State, showcasing products and services from industry, commerce, agriculture, and mining sectors.",
    category: "Exhibition",
    image: "/trade-fair-exhibition-products.jpg",
  },
  {
    id: 6,
    title: "Women in Business Forum",
    date: "May 18, 2025",
    time: "11:00 AM - 4:00 PM",
    location: "Royal Tropicana Hotel, Ilorin",
    description:
      "Empowering women entrepreneurs through mentorship, networking, and access to resources for business growth and development.",
    category: "Forum",
    image: "/women-business-leaders-entrepreneurs.jpg",
  },
]

const pastEvents = [
  {
    id: 7,
    title: "2024 End of Year Gala & Awards",
    date: "December 20, 2024",
    location: "Kwara Hotel, Ilorin",
    description:
      "Celebrating excellence in business and recognizing outstanding contributions to Kwara's economic development.",
  },
  {
    id: 8,
    title: "Industrial Development Symposium",
    date: "November 8, 2024",
    location: "KWACCIMA Secretariat, Ilorin",
    description:
      "Exploring opportunities and challenges in Kwara's industrial sector with stakeholders and policymakers.",
  },
  {
    id: 9,
    title: "Youth Entrepreneurship Bootcamp",
    date: "October 15-17, 2024",
    location: "University of Ilorin Innovation Hub",
    description:
      "Three-day intensive program equipping young entrepreneurs with skills and knowledge to launch successful ventures.",
  },
]

export default function EventsPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <SiteHeader />

      {/* Hero Section */}
      <section className="relative pt-32 pb-16 lg:pt-40 lg:pb-24">
        <div className="absolute inset-0 bg-gradient-to-br from-muted/50 to-background -z-10" />
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-4xl mx-auto text-center space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif font-bold tracking-tight text-balance">
              Events & Programs
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground leading-relaxed text-pretty">
              Connect, learn, and grow through our diverse range of business events, workshops, and networking
              opportunities.
            </p>
          </div>
        </div>
      </section>

      {/* Upcoming Events */}
      <section className="py-16 lg:py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="mb-12">
            <h2 className="text-3xl md:text-4xl font-serif font-bold mb-4">Upcoming Events</h2>
            <p className="text-muted-foreground leading-relaxed">
              Mark your calendar for these exciting opportunities to connect and learn
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {upcomingEvents.map((event) => (
              <Card
                key={event.id}
                className="border-none shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col"
              >
                <div className="relative h-48 overflow-hidden">
                  <img
                    src={event.image || "/placeholder.svg"}
                    alt={event.title}
                    className="object-cover w-full h-full"
                  />
                  <Badge className="absolute top-4 right-4 bg-accent text-accent-foreground">{event.category}</Badge>
                </div>
                <CardHeader className="space-y-2">
                  <h3 className="text-xl font-serif font-semibold line-clamp-2">{event.title}</h3>
                </CardHeader>
                <CardContent className="space-y-3 flex-grow">
                  <div className="flex items-start gap-2 text-sm text-muted-foreground">
                    <Calendar className="h-4 w-4 mt-0.5 flex-shrink-0" />
                    <span>{event.date}</span>
                  </div>
                  <div className="flex items-start gap-2 text-sm text-muted-foreground">
                    <Clock className="h-4 w-4 mt-0.5 flex-shrink-0" />
                    <span>{event.time}</span>
                  </div>
                  <div className="flex items-start gap-2 text-sm text-muted-foreground">
                    <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" />
                    <span>{event.location}</span>
                  </div>
                  <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3">{event.description}</p>
                </CardContent>
                <CardFooter>
                  <Button className="w-full bg-primary text-primary-foreground hover:bg-primary/90">
                    Register Now <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Past Events */}
      <section className="py-16 lg:py-24 bg-muted/30">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="mb-12">
            <h2 className="text-3xl md:text-4xl font-serif font-bold mb-4">Past Events</h2>
            <p className="text-muted-foreground leading-relaxed">Highlights from our recent programs and activities</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {pastEvents.map((event) => (
              <Card key={event.id} className="border-none shadow-sm">
                <CardHeader className="space-y-2">
                  <h3 className="text-xl font-serif font-semibold">{event.title}</h3>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Calendar className="h-4 w-4 flex-shrink-0" />
                    <span>{event.date}</span>
                  </div>
                  <div className="flex items-start gap-2 text-sm text-muted-foreground">
                    <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" />
                    <span>{event.location}</span>
                  </div>
                  <p className="text-sm text-muted-foreground leading-relaxed">{event.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 lg:py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-3xl mx-auto text-center space-y-6">
            <h2 className="text-3xl md:text-4xl font-serif font-bold text-balance">Stay Updated on Our Events</h2>
            <p className="text-muted-foreground leading-relaxed">
              Subscribe to our newsletter to receive updates on upcoming events, programs, and opportunities.
            </p>
            <Button asChild size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
              <Link href="/contact">Subscribe Now</Link>
            </Button>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  )
}