import { Users, Calendar, Clock, Video } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const Seminars = () => {
  const upcomingSeminars = [
    {
      title: "Grant Writing Fundamentals",
      date: "Next Tuesday, 2:00 PM EST",
      duration: "60 minutes",
      description: "Learn the basics of successful grant writing",
      status: "upcoming"
    },
    {
      title: "Business Funding Strategies",
      date: "Thursday, 3:00 PM EST", 
      duration: "90 minutes",
      description: "Advanced strategies for securing business funding",
      status: "upcoming"
    },
    {
      title: "Non-Profit Grant Applications",
      date: "Friday, 1:00 PM EST",
      duration: "75 minutes", 
      description: "Specialized guidance for non-profit organizations",
      status: "featured"
    }
  ];

  return (
    <div className="max-w-6xl mx-auto">
      <div className="flex items-center gap-3 mb-6">
        <Users className="h-8 w-8 text-primary" />
        <h1 className="text-3xl font-bold">Grant Writer Teleseminars</h1>
      </div>
      
      <Card className="mb-8">
        <CardHeader>
          <CardTitle>Weekly Expert Sessions</CardTitle>
          <CardDescription>
            Join our professional grant writers for live training sessions and Q&A
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-3 gap-6 mb-6">
            <div className="text-center">
              <Video className="h-12 w-12 text-primary mx-auto mb-2" />
              <h3 className="font-semibold">Live Sessions</h3>
              <p className="text-sm text-muted-foreground">Interactive video seminars</p>
            </div>
            <div className="text-center">
              <Users className="h-12 w-12 text-primary mx-auto mb-2" />
              <h3 className="font-semibold">Expert Guidance</h3>
              <p className="text-sm text-muted-foreground">Professional grant writers</p>
            </div>
            <div className="text-center">
              <Clock className="h-12 w-12 text-primary mx-auto mb-2" />
              <h3 className="font-semibold">24/7 Support</h3>
              <p className="text-sm text-muted-foreground">Round-the-clock email support</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Upcoming Seminars</CardTitle>
          <CardDescription>
            Register for our upcoming teleseminars
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {upcomingSeminars.map((seminar, index) => (
              <div key={index} className="border rounded-lg p-4">
                <div className="flex justify-between items-start mb-2">
                  <h3 className="font-semibold text-lg">{seminar.title}</h3>
                  {seminar.status === "featured" && (
                    <Badge variant="secondary">Featured</Badge>
                  )}
                </div>
                
                <div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
                  <div className="flex items-center gap-1">
                    <Calendar className="h-4 w-4" />
                    {seminar.date}
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />
                    {seminar.duration}
                  </div>
                </div>
                
                <p className="text-muted-foreground mb-4">{seminar.description}</p>
                
                <Button>Register Now</Button>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default Seminars;