"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Calendar, Clock, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const latestArticle = {
  id: 1,
  title: "The Future of AI in African Education: Opportunities and Challenges",
  excerpt:
    "Artificial Intelligence is revolutionizing education across the globe, and Africa is no exception. In this article, we explore how AI-powered tools are transforming learning experiences in South African and Lesotho classrooms, the challenges educators face in adoption, and the incredible opportunities that lie ahead for our students.",
  image: "/articles/first-robot-guide.jpg",
  author: "Dr. Thabo Molefe",
  date: "May 28, 2025",
  readTime: "8 min read",
  category: "AI & Education",
  slug: "future-of-ai-african-education",
}

export function BeyondBytesSection() {
  const [email, setEmail] = useState("")
  const [isSubscribed, setIsSubscribed] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

  const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email) return

    setIsLoading(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000))
    setIsSubscribed(true)
    setIsLoading(false)
    setEmail("")
  }

  return (
    <section id="beyond-bytes" className="py-20 bg-gradient-to-b from-white to-slate-50">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <div className="text-center mb-12">
          <span className="inline-block px-4 py-2 bg-bcc-orange/10 text-bcc-orange rounded-full text-sm font-semibold mb-4">
            Beyond Bytes
          </span>
          <h2 className="text-3xl md:text-4xl font-bold text-bcc-blue mb-4">
            Weekly Insights
          </h2>
          <p className="text-lg text-bcc-gray max-w-2xl mx-auto">
            Stay updated with the latest trends in coding, robotics, AI, and education technology
            from our team of experts.
          </p>
        </div>

        {/* Latest Article */}
        <div className="max-w-5xl mx-auto mb-16">
          <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
            <div className="grid md:grid-cols-2 gap-0">
              {/* Article Image */}
              <div className="relative h-64 md:h-full min-h-[300px]">
                <Image
                  src={latestArticle.image}
                  alt={latestArticle.title}
                  fill
                  className="object-cover"
                />
                <div className="absolute top-4 left-4">
                  <span className="px-3 py-1 bg-bcc-teal text-white text-sm font-medium rounded-full">
                    Latest Article
                  </span>
                </div>
              </div>

              {/* Article Content */}
              <div className="p-6 md:p-8 flex flex-col justify-center">
                <span className="inline-block px-3 py-1 bg-bcc-blue/10 text-bcc-blue text-sm font-medium rounded-full w-fit mb-4">
                  {latestArticle.category}
                </span>
                <h3 className="text-xl md:text-2xl font-bold text-bcc-blue mb-4 leading-tight">
                  {latestArticle.title}
                </h3>
                <p className="text-bcc-gray mb-6 line-clamp-3">
                  {latestArticle.excerpt}
                </p>

                {/* Meta Info */}
                <div className="flex flex-wrap items-center gap-4 text-sm text-bcc-gray mb-6">
                  <span className="flex items-center gap-1">
                    <User className="w-4 h-4" />
                    {latestArticle.author}
                  </span>
                  <span className="flex items-center gap-1">
                    <Calendar className="w-4 h-4" />
                    {latestArticle.date}
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock className="w-4 h-4" />
                    {latestArticle.readTime}
                  </span>
                </div>

                <div className="flex flex-wrap gap-4">
                  {/* Link disabled using preventDefault and pointer-events-none */}
                  <Link 
                    href={`/articles/${latestArticle.slug}`} 
                    onClick={(e) => e.preventDefault()} 
                    className="pointer-events-none"
                  >
                    <Button 
                      disabled 
                      className="bg-bcc-blue/50 text-white/70 cursor-not-allowed select-none"
                    >
                      Read Full Article
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </Link>

                  {/* Link disabled using preventDefault and pointer-events-none */}
                  <Link 
                    href="/articles" 
                    onClick={(e) => e.preventDefault()} 
                    className="pointer-events-none"
                  >
                    <Button 
                      disabled 
                      variant="outline" 
                      className="border-slate-200 text-slate-400 bg-slate-50 cursor-not-allowed select-none"
                    >
                      View All Articles
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Newsletter Subscription */}
        <div className="max-w-3xl mx-auto">
          <div className="bg-bcc-blue rounded-2xl p-8 md:p-12 text-center relative overflow-hidden">
            {/* Background Pattern */}
            <div className="absolute inset-0 opacity-10">
              <div className="absolute top-0 left-0 w-40 h-40 bg-white rounded-full -translate-x-1/2 -translate-y-1/2" />
              <div className="absolute bottom-0 right-0 w-60 h-60 bg-white rounded-full translate-x-1/3 translate-y-1/3" />
            </div>

            <div className="relative z-10">
              <h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
                Subscribe for Weekly Updates
              </h3>
              <p className="text-white/80 mb-8 max-w-lg mx-auto">
                Get the latest articles, tutorials, and insights delivered straight to your inbox
                every week. Join our community of educators and tech enthusiasts.
              </p>

              {isSubscribed ? (
                <div className="bg-white/20 rounded-xl p-6 max-w-md mx-auto">
                  <div className="w-16 h-16 bg-bcc-teal rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                  </div>
                  <h4 className="text-xl font-semibold text-white mb-2">You&apos;re Subscribed!</h4>
                  <p className="text-white/80">
                    Thank you for subscribing. Check your inbox for a confirmation email.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubscribe} className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
                  <Input
                    type="email"
                    placeholder="Enter your email address"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                    className="flex-1 h-12 bg-white border-0 text-bcc-blue placeholder:text-bcc-gray/60"
                  />
                  <Button
                    type="submit"
                    disabled={isLoading}
                    className="h-12 px-8 bg-bcc-orange hover:bg-bcc-orange/90 text-white font-semibold"
                  >
                    {isLoading ? "Subscribing..." : "Subscribe"}
                  </Button>
                </form>
              )}

              <p className="text-white/60 text-sm mt-4">
                We respect your privacy. Unsubscribe at any time.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}