"use client"

import { useState } from "react"
import Link from "next/link"
import { Code, Bot, Brain, Globe, ArrowRight, Star, Users, Clock, User } from "lucide-react"
import { cn } from "@/lib/utils"

const courses = [
  {
    id: "Introduction to Robotics",
    icon: Code,
    title: "Introduction to Robotics",
    instructor: "Neliswa",
    price: "R280",
    duration: "9h 4m",
    rating: 0,
    students: 0,
    description: "Master HTML, CSS, and JavaScript from scratch to build modern, responsive websites.",
    color: "bg-bcc-blue",
    enrollLink: "https://beyondclassroomcoding.co.za/courses/introduction-to-robotics/",
  },
  {
    id: "Microsoft Word Full Courses",
    icon: Bot,
    title: "Microsoft Word Full Courses",
    instructor: "Neliswa",
    price: "R120",
    duration: "12h 8m",
    rating: 0,
    students: 0,
    description: "Deep dive into circuit design and Python programming for autonomous robotic systems.",
    color: "bg-bcc-teal",
    enrollLink: "https://beyondclassroomcoding.co.za/courses/mastering-the-microsoft-office-suite/",
  },
  {
    id: "Introduction to Computer Fundamentals",
    icon: Brain,
    title: "Introduction to Computer Fundamentals",
    instructor: "Neliswa",
    price: "R120",
    duration: "10 Weeks",
    rating: 0,
    students: 0,
    description: "Understand the logic behind AI and build your first predictive machine learning models.",
    color: "bg-bcc-orange",
    enrollLink: "https://beyondclassroomcoding.co.za/courses/introduction-to-computer-fundamentals/",
  },
  {
    id: "The Complete Javascript Course",
    icon: Globe,
    title: "The Complete Javascript Course",
    instructor: "Neliswa",
    price: "R150",
    duration: "18h 20m",
    rating: 2.67,
    students: 3,
    description: "Essential computer skills and internet safety for the modern digital workspace.",
    color: "bg-bcc-blue",
    enrollLink: "https://beyondclassroomcoding.co.za/courses/the-complete-javascript-course-2019-build-real-projects/",
  },
]

export function EducationSection() {
    const [hoveredCourse, setHoveredCourse] = useState<string | null>(null)
  
    return (
      <section id="education" className="py-20 lg:py-28 bg-muted/50">
        <div className="container mx-auto px-4 lg:px-8">
          {/* Section Header */}
          <div className="text-center max-w-3xl mx-auto mb-16">
            <span className="inline-block text-bcc-orange font-semibold mb-4">Learn & Grow</span>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-bcc-blue mb-6">Our Featured Courses</h2>
            <p className="text-bcc-gray text-lg leading-relaxed">
              Expand your horizons with our expert-led programs. From basic digital literacy to advanced 
              engineering, we offer affordable learning paths starting from as little as R150.
            </p>
          </div>
  
          {/* Courses Grid */}
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {courses.map((course) => {
              const Icon = course.icon
              return (
                <div
                  key={course.id}
                  className={cn(
                    "group relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer overflow-hidden flex flex-col",
                    hoveredCourse === course.id && "scale-105",
                  )}
                  onMouseEnter={() => setHoveredCourse(course.id)}
                  onMouseLeave={() => setHoveredCourse(null)}
                >
                  {/* Header: Icon & Rating */}
                  <div className="flex justify-between items-start mb-5">
                    <div className={cn("w-12 h-12 rounded-xl flex items-center justify-center text-white", course.color)}>
                      <Icon className="w-6 h-6" />
                    </div>
                    <div className="flex items-center gap-1 bg-yellow-50 px-2 py-1 rounded-lg">
                      <Star className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400" />
                      <span className="text-xs font-bold text-yellow-700">{course.rating}</span>
                    </div>
                  </div>
  
                  {/* Content */}
                  <h3 className="text-lg font-bold text-bcc-blue mb-2 group-hover:text-bcc-orange transition-colors">
                    {course.title}
                  </h3>
                  
                  <div className="flex items-center gap-2 text-xs text-bcc-gray mb-3">
                    <User className="w-3.5 h-3.5" />
                    <span>{course.instructor}</span>
                  </div>
  
                  <p className="text-bcc-gray text-sm leading-relaxed mb-4 flex-grow">
                    {course.description}
                  </p>
  
                  {/* Course Metadata */}
                  <div className="grid grid-cols-2 gap-3 mb-6 pt-4 border-t border-gray-100">
                    <div className="flex items-center gap-1.5 text-xs text-bcc-gray">
                      <Clock className="w-3.5 h-3.5 text-bcc-teal" />
                      {course.duration}
                    </div>
                    <div className="flex items-center gap-1.5 text-xs text-bcc-gray">
                      <Users className="w-3.5 h-3.5 text-bcc-teal" />
                      {course.students.toLocaleString()}
                    </div>
                  </div>
  
                  {/* Footer: Price & Enrollment Link */}
                  <div className="flex items-center justify-between mt-auto">
                    <span className="text-xl font-bold text-bcc-blue">{course.price}</span>
                    <Link
                      href={course.enrollLink}
                      target={course.enrollLink.startsWith('http') ? "_blank" : "_self"}
                      className="inline-flex items-center gap-1 text-bcc-orange font-semibold text-sm group-hover:gap-2 transition-all"
                    >
                      Enroll Now
                      <ArrowRight className="w-4 h-4" />
                    </Link>
                  </div>
  
                  {/* Decorative background shape */}
                  <div
                    className={cn(
                      "absolute -bottom-16 -right-16 w-32 h-32 rounded-full opacity-5 transition-opacity group-hover:opacity-10",
                      course.color,
                    )}
                  />
                </div>
              )
            })}
          </div>
        </div>
      </section>
    )
  }