import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Helmet } from 'react-helmet-async'
import { posts as postsAPI } from '../utils/api'
import { motion } from 'framer-motion'
import { ArrowRight, AlertTriangle, Shield, Eye } from 'lucide-react'

export default function Home() {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const { data } = await postsAPI.getAll({ limit: 12 })
        setPosts(data)
      } catch (err) {
        console.error('Failed to fetch posts:', err)
      } finally {
        setLoading(false)
      }
    }
    fetchPosts()
  }, [])

  return (
    <>
      <Helmet>
        <title>CardingCentral - Fraud Prevention & Scam Education</title>
        <meta name="description" content="Learn how to protect yourself from fraud, carding scams, and online threats. Educational platform for fraud awareness." />
        <meta name="keywords" content="fraud prevention, carding, scam awareness, card security, fraud detection" />
        <link rel="canonical" href="https://cardingcentral.com" />
      </Helmet>

      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.h1
            className="text-5xl font-bold mb-4"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
          >
            Stay Protected From Fraud & Scams
          </motion.h1>
          <motion.p
            className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
          >
            Comprehensive educational resources about carding fraud awareness, scam detection, and how to protect yourself online.
          </motion.p>
          <motion.button
            className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition inline-flex items-center gap-2"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            Explore Resources
            <ArrowRight size={20} />
          </motion.button>
        </div>
      </section>

      {/* Featured Cards */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid md:grid-cols-3 gap-8 mb-16">
          {[
            { icon: AlertTriangle, title: 'Scam Detection', desc: 'Learn to identify common fraud schemes' },
            { icon: Shield, title: 'Card Security', desc: 'Best practices for protecting your cards' },
            { icon: Eye, title: 'Stay Informed', desc: 'Latest fraud trends and prevention tips' },
          ].map((card, i) => (
            <motion.div
              key={i}
              className="bg-blue-50 p-6 rounded-lg border border-blue-200 hover:shadow-lg transition"
              whileHover={{ y: -5 }}
            >
              <card.icon className="w-12 h-12 text-blue-600 mb-4" />
              <h3 className="text-xl font-bold text-gray-900 mb-2">{card.title}</h3>
              <p className="text-gray-700">{card.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Latest Posts */}
      <section className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">Latest Articles</h2>

          {loading ? (
            <div className="text-center py-12">
              <div className="inline-block w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
            </div>
          ) : posts.length > 0 ? (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {posts.map((post, i) => (
                <motion.article
                  key={post.id}
                  className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition"
                  whileHover={{ y: -5 }}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: i * 0.1 }}
                >
                  {post.thumbnail_image && (
                    <img
                      src={`/uploads/${post.thumbnail_image}`}
                      alt={post.title}
                      className="w-full h-48 object-cover"
                    />
                  )}
                  <div className="p-6">
                    <Link to={`/${post.category_slug}`}>
                      <span className="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-sm font-semibold rounded-full mb-3 hover:bg-blue-200 transition">
                        {post.category_name}
                      </span>
                    </Link>
                    <Link to={`/${post.category_slug}/${post.slug}`}>
                      <h3 className="text-xl font-bold text-gray-900 mb-2 hover:text-blue-600 transition">
                        {post.title}
                      </h3>
                    </Link>
                    <p className="text-gray-600 mb-4 line-clamp-2">{post.excerpt}</p>
                    <div className="flex items-center justify-between text-sm text-gray-500">
                      <span>📖 {post.reading_time || 5} min read</span>
                      <span>👁️ {post.view_count || 0} views</span>
                    </div>
                  </div>
                </motion.article>
              ))}
            </div>
          ) : (
            <p className="text-center text-gray-500">No posts yet.</p>
          )}
        </div>
      </section>
    </>
  )
}
