"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { motion } from "framer-motion"
import { ArrowRight, Calendar, Clock } from "lucide-react"

const blogPosts = [
  {
    title: "How I Built a Full E-commerce Platform with Vibe Coding",
    excerpt: "Learn how I used Cursor and Claude AI to build O4D Diary, the biggest e-commerce platform in Enugu State, Nigeria.",
    category: "VIBE CODING",
    date: "Coming Soon",
    readTime: "8 min read",
  },
  {
    title: "AI Automation: Transforming Business Operations",
    excerpt: "Discover how I leverage Zapier, GoHighLevel, and n8n to automate workflows and scale businesses.",
    category: "AI AUTOMATION",
    date: "Coming Soon",
    readTime: "6 min read",
  },
  {
    title: "The Art of High-Converting Landing Pages",
    excerpt: "My approach to building sales pages with irresistible offers that drive conversions.",
    category: "WEB DEVELOPMENT",
    date: "Coming Soon",
    readTime: "5 min read",
  },
  {
    title: "UGC AI: Clone Yourself and Scale Your Content",
    excerpt: "How I create AI clones of content creators to triple their leads and sales on autopilot.",
    category: "UGC AI",
    date: "Coming Soon",
    readTime: "7 min read",
  },
  {
    title: "From Freelancer to Agency: My 9-Year Journey",
    excerpt: "Lessons learned building a successful web development and digital marketing career.",
    category: "CAREER",
    date: "Coming Soon",
    readTime: "10 min read",
  },
  {
    title: "Livestream Engineering: Behind the Scenes",
    excerpt: "Technical insights on running professional livestreams with OBS, VMIX, and broadcasting equipment.",
    category: "LIVESTREAM",
    date: "Coming Soon",
    readTime: "6 min read",
  },
]

export default function BlogPage() {
  return (
    <main className="min-h-screen pt-12 pb-24">
      <Navigation />
      
      {/* Hero Section */}
      <section className="px-6 md:px-12 lg:px-24 py-24">
        <div className="max-w-6xl mx-auto">
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-primary text-sm tracking-widest mb-4"
          >
            MY BLOG
          </motion.p>
          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-4xl md:text-6xl font-bold text-foreground mb-6"
          >
            Thoughts & Insights
          </motion.h1>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="text-muted-foreground text-lg max-w-2xl"
          >
            Sharing my knowledge and experiences in web development, AI automation, 
            digital marketing, and the tech industry.
          </motion.p>
        </div>
      </section>

      {/* Blog Posts */}
      <section className="px-6 md:px-12 lg:px-24 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {blogPosts.map((post, index) => (
              <motion.article
                key={post.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="group p-6 rounded-2xl border border-border bg-card hover:border-primary/30 transition-all duration-300 flex flex-col"
              >
                <span className="text-primary text-xs tracking-widest mb-3">{post.category}</span>
                <h2 className="text-lg font-bold text-foreground mb-3 group-hover:text-primary transition-colors line-clamp-2">
                  {post.title}
                </h2>
                <p className="text-muted-foreground text-sm mb-4 flex-1 line-clamp-3">
                  {post.excerpt}
                </p>
                <div className="flex items-center justify-between text-xs text-muted-foreground pt-4 border-t border-border">
                  <div className="flex items-center gap-2">
                    <Calendar className="w-3 h-3" />
                    <span>{post.date}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Clock className="w-3 h-3" />
                    <span>{post.readTime}</span>
                  </div>
                </div>
              </motion.article>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter Section */}
      <section className="px-6 md:px-12 lg:px-24 py-24">
        <div className="max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center p-12 md:p-16 rounded-3xl border border-border bg-gradient-to-b from-card to-background relative overflow-hidden"
          >
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[400px] h-[400px] bg-gradient-to-b from-primary/20 to-transparent rounded-full blur-3xl -z-10" />
            
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Coming Soon
            </h2>
            <p className="text-muted-foreground mb-8 max-w-lg mx-auto">
              I&apos;m working on bringing you valuable content about web development, AI, and digital marketing.
              Stay tuned for updates!
            </p>
            <a
              href="/contact"
              className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-8 py-4 rounded-full font-semibold tracking-wider hover:bg-primary/90 transition-colors"
            >
              GET NOTIFIED
              <ArrowRight className="w-4 h-4" />
            </a>
          </motion.div>
        </div>
      </section>

      <Footer />
    </main>
  )
}