'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { Calendar, Clock, ArrowRight, Tag, User, Search } from 'lucide-react';

const blogPosts = [
  {
    id: 'tax-deductions-small-business-2026',
    title: 'Top 10 Tax Deductions Every Small Business Should Know in 2026',
    excerpt: 'Discover the most impactful tax deductions that can significantly reduce your small business tax liability this year. From home office expenses to retirement plan contributions.',
    category: 'Tax Planning',
    author: 'Alpha CPA Team',
    date: 'April 5, 2026',
    readTime: '7 min read',
    featured: true,
  },
  {
    id: 'bookkeeping-mistakes-avoid',
    title: '5 Bookkeeping Mistakes That Could Cost Your Business Thousands',
    excerpt: 'Common bookkeeping errors can lead to costly tax penalties and missed deductions. Learn how to avoid these pitfalls and keep your finances in order.',
    category: 'Bookkeeping',
    author: 'Alpha CPA Team',
    date: 'March 28, 2026',
    readTime: '5 min read',
    featured: false,
  },
  {
    id: 'payroll-compliance-guide',
    title: 'The Complete Guide to Payroll Tax Compliance for Employers',
    excerpt: 'Navigating payroll taxes can be complex. This comprehensive guide covers federal and state requirements, deadlines, and best practices for staying compliant.',
    category: 'Payroll',
    author: 'Alpha CPA Team',
    date: 'March 20, 2026',
    readTime: '9 min read',
    featured: false,
  },
  {
    id: 'sales-tax-multistate',
    title: 'Multi-State Sales Tax: What Online Sellers Need to Know',
    excerpt: 'With the rise of e-commerce, understanding sales tax nexus across multiple states is critical. Learn the rules and how to stay compliant.',
    category: 'Sales Tax',
    author: 'Alpha CPA Team',
    date: 'March 12, 2026',
    readTime: '6 min read',
    featured: true,
  },
  {
    id: 'startup-financial-planning',
    title: 'Financial Planning Essentials for Startups in Their First Year',
    excerpt: 'Setting up proper financial systems from day one is crucial for startup success. Here are the key financial planning steps every new business should take.',
    category: 'Business Planning',
    author: 'Alpha CPA Team',
    date: 'March 5, 2026',
    readTime: '8 min read',
    featured: false,
  },
  {
    id: 'quarterly-estimated-taxes',
    title: 'Quarterly Estimated Taxes: A Step-by-Step Guide for Self-Employed',
    excerpt: 'Self-employed individuals must pay estimated taxes quarterly. Learn how to calculate, when to pay, and how to avoid underpayment penalties.',
    category: 'Tax Planning',
    author: 'Alpha CPA Team',
    date: 'February 25, 2026',
    readTime: '6 min read',
    featured: false,
  },
];

const categories = ['All', 'Tax Planning', 'Bookkeeping', 'Payroll', 'Sales Tax', 'Business Planning'];

export function BlogContent() {
  const [activeCategory, setActiveCategory] = useState('All');
  const [searchQuery, setSearchQuery] = useState('');

  const filteredPosts = blogPosts.filter((post) => {
    const matchesCategory = activeCategory === 'All' || post.category === activeCategory;
    const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      post.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  const featuredPosts = filteredPosts.filter((p) => p.featured);
  const regularPosts = filteredPosts.filter((p) => !p.featured);

  return (
    <>
      {/* Hero */}
      <section className="relative py-20 sm:py-28 overflow-hidden">
        <div className="absolute inset-0 bg-navy-gradient" />
        <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '40px 40px' }} />
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
            <span className="inline-block px-4 py-1.5 bg-[var(--gold)]/10 border border-[var(--gold)]/20 text-[var(--gold-light)] text-sm font-semibold rounded-full mb-4">Our Blog</span>
            <h1 className="font-display text-4xl sm:text-5xl font-bold text-white tracking-tight mb-4">
              Insights & <span className="text-gradient-gold">Resources</span>
            </h1>
            <p className="text-white/70 text-lg max-w-2xl mx-auto mb-8">Stay informed with the latest tax tips, accounting insights, and financial strategies from our expert team.</p>
            
            {/* Search */}
            <div className="max-w-md mx-auto relative">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
              <input
                type="text"
                placeholder="Search articles..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-12 pr-4 py-3.5 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl text-white placeholder-white/40 outline-none focus:border-[var(--gold)]/50 focus:ring-2 focus:ring-[var(--gold)]/20 transition-all text-sm"
              />
            </div>
          </motion.div>
        </div>
      </section>

      {/* Categories */}
      <section className="py-8 border-b border-[var(--navy)]/5 bg-white sticky top-0 z-30">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex gap-2 overflow-x-auto scrollbar-none pb-1">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`shrink-0 px-5 py-2 rounded-full text-sm font-medium transition-all ${
                  activeCategory === cat
                    ? 'bg-[var(--navy)] text-white shadow-md'
                    : 'bg-[hsl(var(--muted))] text-muted-foreground hover:bg-[var(--navy)]/5 hover:text-[var(--navy)]'
                }`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Featured Posts */}
      {featuredPosts.length > 0 && (
        <section className="py-16 bg-white">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="font-display text-2xl font-bold text-[var(--navy)] mb-8">Featured Articles</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {featuredPosts.map((post, i) => (
                <motion.article
                  key={post.id}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: i * 0.1 }}
                  className="card-3d group relative bg-navy-gradient rounded-2xl p-8 overflow-hidden"
                >
                  <div className="absolute top-0 right-0 w-40 h-40 bg-[var(--gold)]/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
                  <div className="relative">
                    <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-[var(--gold)]/20 text-[var(--gold-light)] text-xs font-semibold rounded-full mb-4">
                      <Tag className="w-3 h-3" /> {post.category}
                    </span>
                    <h3 className="font-display text-xl sm:text-2xl font-bold text-white mb-3 group-hover:text-[var(--gold-light)] transition-colors">
                      {post.title}
                    </h3>
                    <p className="text-white/60 text-sm leading-relaxed mb-6">{post.excerpt}</p>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4 text-white/40 text-xs">
                        <span className="flex items-center gap-1"><Calendar className="w-3.5 h-3.5" /> {post.date}</span>
                        <span className="flex items-center gap-1"><Clock className="w-3.5 h-3.5" /> {post.readTime}</span>
                      </div>
                      <span className="inline-flex items-center gap-1 text-[var(--gold-light)] text-sm font-semibold group-hover:gap-2 transition-all">
                        Read More <ArrowRight className="w-4 h-4" />
                      </span>
                    </div>
                  </div>
                </motion.article>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* All Posts */}
      <section className="py-16 bg-[hsl(var(--muted))]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="font-display text-2xl font-bold text-[var(--navy)] mb-8">Latest Articles</h2>
          {regularPosts.length === 0 && featuredPosts.length === 0 ? (
            <div className="text-center py-16">
              <p className="text-muted-foreground text-lg">No articles found matching your search.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {(regularPosts.length > 0 ? regularPosts : filteredPosts).map((post, i) => (
                <motion.article
                  key={post.id}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: i * 0.08 }}
                  className="card-3d group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl border border-transparent hover:border-[var(--gold)]/10 transition-all"
                >
                  <div className="h-2 bg-gradient-to-r from-[var(--navy)] via-[var(--gold)] to-[var(--navy-light)]" />
                  <div className="p-7">
                    <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-[var(--gold)]/10 text-[var(--gold)] text-xs font-semibold rounded-full mb-4">
                      <Tag className="w-3 h-3" /> {post.category}
                    </span>
                    <h3 className="font-display text-lg font-bold text-[var(--navy)] mb-3 group-hover:text-[var(--gold)] transition-colors leading-snug">
                      {post.title}
                    </h3>
                    <p className="text-muted-foreground text-sm leading-relaxed mb-5 line-clamp-3">{post.excerpt}</p>
                    <div className="flex items-center justify-between pt-4 border-t border-[var(--navy)]/5">
                      <div className="flex items-center gap-3 text-muted-foreground text-xs">
                        <span className="flex items-center gap-1"><Calendar className="w-3.5 h-3.5" /> {post.date}</span>
                        <span className="flex items-center gap-1"><Clock className="w-3.5 h-3.5" /> {post.readTime}</span>
                      </div>
                    </div>
                  </div>
                </motion.article>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Newsletter CTA */}
      <section className="py-20 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
            <h2 className="font-display text-2xl sm:text-3xl font-bold text-[var(--navy)] tracking-tight mb-4">Need Expert Financial Advice?</h2>
            <p className="text-muted-foreground text-lg mb-8">Our team is ready to help you navigate your financial challenges. Schedule a free consultation today.</p>
            <Link href="/contact" className="inline-flex items-center gap-2 px-8 py-4 bg-[var(--navy)] text-white font-bold rounded-xl hover:bg-[var(--navy-light)] transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5">
              Get Free Consultation <ArrowRight className="w-5 h-5" />
            </Link>
          </motion.div>
        </div>
      </section>
    </>
  );
}
