import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { ArrowRight, BookOpen, TrendingUp, Code, Globe, Zap } from 'lucide-react'

// Static content for homepage
export default function RecentTopics() {
  return (
    <section className="py-20 bg-muted/30">
      <div className="container">
        <div className="max-w-7xl mx-auto">
          {/* Section Header */}
          <div className="text-center mb-12">
            <div className="flex items-center justify-center gap-3 mb-4">
              <div className="p-3 bg-primary/10 rounded-full">
                <TrendingUp className="w-6 h-6 text-primary" />
              </div>
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Latest from Our Community
            </h2>
            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
              Discover insights, tutorials, and stories from our community.
              Stay updated with the latest in web development, cloud computing, and technology.
            </p>
          </div>

          {/* Static Content Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            <Card className="overflow-hidden hover:shadow-lg transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center gap-3 mb-4">
                  <div className="p-2 bg-blue-500/10 rounded-full">
                    <Code className="w-5 h-5 text-blue-600" />
                  </div>
                  <span className="text-sm text-muted-foreground">Web Development</span>
                </div>
                <h3 className="text-xl font-semibold mb-3">
                  Modern Development Best Practices
                </h3>
                <p className="text-muted-foreground mb-4">
                  Learn the latest approaches to building scalable web applications with modern frameworks and tools.
                </p>
                <div className="flex gap-2">
                  <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs rounded">
                    React
                  </span>
                  <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs rounded">
                    Next.js
                  </span>
                </div>
              </CardContent>
            </Card>

            <Card className="overflow-hidden hover:shadow-lg transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center gap-3 mb-4">
                  <div className="p-2 bg-green-500/10 rounded-full">
                    <Globe className="w-5 h-5 text-green-600" />
                  </div>
                  <span className="text-sm text-muted-foreground">Cloud Computing</span>
                </div>
                <h3 className="text-xl font-semibold mb-3">
                  Scaling Applications in the Cloud
                </h3>
                <p className="text-muted-foreground mb-4">
                  Discover strategies for deploying and scaling applications using cloud infrastructure and services.
                </p>
                <div className="flex gap-2">
                  <span className="px-2 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 text-xs rounded">
                    AWS
                  </span>
                  <span className="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs rounded">
                    Docker
                  </span>
                </div>
              </CardContent>
            </Card>

            <Card className="overflow-hidden hover:shadow-lg transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center gap-3 mb-4">
                  <div className="p-2 bg-purple-500/10 rounded-full">
                    <Zap className="w-5 h-5 text-purple-600" />
                  </div>
                  <span className="text-sm text-muted-foreground">Performance</span>
                </div>
                <h3 className="text-xl font-semibold mb-3">
                  Optimizing for Speed and Efficiency
                </h3>
                <p className="text-muted-foreground mb-4">
                  Learn techniques to optimize your applications for better performance and user experience.
                </p>
                <div className="flex gap-2">
                  <span className="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-xs rounded">
                    Performance
                  </span>
                  <span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 text-xs rounded">
                    Optimization
                  </span>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Call to Action */}
          <div className="text-center space-y-6">
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" asChild>
                <Link href="/blogs" className="flex items-center gap-2">
                  Explore All Articles
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/blogs?q=">Search Articles</Link>
              </Button>
            </div>

            <div className="pt-8 border-t">
              <p className="text-sm text-muted-foreground mb-4">
                Ready to share your knowledge with the community?
              </p>
              <Button variant="ghost" asChild>
                <Link href="/auth" className="flex items-center gap-2">
                  <BookOpen className="w-4 h-4" />
                  Start Writing Today
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}