import { PageHero } from '@/components/page-hero'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Calendar, User } from 'lucide-react'

const blogPosts = [
  {
    id: 1,
    title: 'STP (Segmentation, Targeting, Positioning): A Strategic Framework in Marketing',
    description: 'Learn how to effectively segment your market, target the right audience, and position your brand for success',
    category: 'Marketing',
    author: 'Sarah Johnson',
    date: 'March 15, 2024',
    readTime: '8 min read',
    featured: true,
  },
  {
    id: 2,
    title: 'The Importance of Interpersonal Skills in Today\'s World',
    description: 'Discover why emotional intelligence and communication skills are crucial for modern professionals',
    category: 'Leadership',
    author: 'Michael Chen',
    date: 'March 10, 2024',
    readTime: '6 min read',
    featured: true,
  },
  {
    id: 3,
    title: 'Digital Transformation: Leading Your Organization Through Change',
    description: 'A comprehensive guide to navigating digital transformation and building organizational resilience',
    category: 'Strategy',
    author: 'Emma Thompson',
    date: 'March 5, 2024',
    readTime: '10 min read',
    featured: false,
  },
  {
    id: 4,
    title: 'Building High-Performance Teams: Core Principles and Practices',
    description: 'Explore the fundamental principles that enable teams to achieve exceptional results',
    category: 'Management',
    author: 'David Williams',
    date: 'February 28, 2024',
    readTime: '7 min read',
    featured: false,
  },
  {
    id: 5,
    title: 'Sustainability in Business: More Than Just Corporate Responsibility',
    description: 'How sustainable practices drive business value and long-term competitive advantage',
    category: 'Sustainability',
    author: 'Lisa Anderson',
    date: 'February 20, 2024',
    readTime: '9 min read',
    featured: false,
  },
  {
    id: 6,
    title: 'The Future of Work: Remote, Hybrid, and Flexible Arrangements',
    description: 'Understanding the evolving workplace and how to manage distributed teams effectively',
    category: 'HR',
    author: 'James Roberts',
    date: 'February 15, 2024',
    readTime: '8 min read',
    featured: false,
  },
  {
    id: 7,
    title: 'Financial Acumen for Non-Finance Leaders',
    description: 'Essential financial concepts and metrics every manager should understand',
    category: 'Finance',
    author: 'Patricia Moore',
    date: 'February 10, 2024',
    readTime: '7 min read',
    featured: false,
  },
  {
    id: 8,
    title: 'Innovation in the Age of AI: Preparing Your Organization',
    description: 'How to harness artificial intelligence to drive innovation and competitive advantage',
    category: 'Technology',
    author: 'Robert Davis',
    date: 'February 5, 2024',
    readTime: '11 min read',
    featured: false,
  },
]

const categories = ['All', 'Marketing', 'Leadership', 'Strategy', 'Management', 'Sustainability', 'HR', 'Finance', 'Technology']

export default function BlogPage() {
  return (
    <main>
      
      <PageHero
        eyebrow="Resources"
        title="Latest Insights & Articles"
        description="Expert perspectives on leadership, business strategy, and professional development."
      />

      {/* Category Filter */}
      <section className="py-8 px-4 sm:px-6 lg:px-8 border-b">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-wrap gap-2">
            {categories.map((cat, i) => (
              <Badge
                key={i}
                variant={i === 0 ? 'default' : 'outline'}
                className="cursor-pointer hover:opacity-80 transition"
              >
                {cat}
              </Badge>
            ))}
          </div>
        </div>
      </section>

      {/* Featured Posts */}
      <section className="py-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold mb-12">Featured Articles</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {blogPosts.filter(post => post.featured).map((post) => (
              <Card key={post.id} className="hover:shadow-lg transition-shadow cursor-pointer overflow-hidden group">
                <CardHeader className="pb-4">
                  <div className="flex items-center gap-2 mb-3">
                    <Badge className="bg-primary/10 text-primary border-0">{post.category}</Badge>
                    <span className="text-xs text-muted-foreground">{post.readTime}</span>
                  </div>
                  <CardTitle className="group-hover:text-primary transition">{post.title}</CardTitle>
                  <CardDescription>{post.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between text-xs text-muted-foreground pt-4 border-t">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center gap-1">
                        <User className="w-4 h-4" />
                        <span>{post.author}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="w-4 h-4" />
                        <span>{post.date}</span>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* All Articles */}
      <section className="bg-muted py-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold mb-12">All Articles</h2>
          <div className="space-y-4">
            {blogPosts.map((post) => (
              <Card key={post.id} className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader className="pb-4">
                  <div className="flex items-start justify-between">
                    <div className="flex-grow">
                      <div className="flex items-center gap-2 mb-2">
                        <Badge variant="outline" className="text-xs">{post.category}</Badge>
                        <span className="text-xs text-muted-foreground">{post.readTime}</span>
                      </div>
                      <CardTitle className="text-xl hover:text-primary transition">{post.title}</CardTitle>
                      <CardDescription className="mt-2">{post.description}</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center gap-1">
                        <User className="w-4 h-4" />
                        <span>{post.author}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="w-4 h-4" />
                        <span>{post.date}</span>
                      </div>
                    </div>
                    <span className="text-primary font-semibold cursor-pointer hover:opacity-80">Read More →</span>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter Signup */}
      <section className="py-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-2xl mx-auto bg-card rounded-lg p-8 border">
          <h2 className="text-2xl font-bold mb-4 text-center">Subscribe to Our Newsletter</h2>
          <p className="text-center text-muted-foreground mb-6">
            Get the latest insights and articles delivered directly to your inbox
          </p>
          <form className="space-y-4">
            <input
              type="email"
              placeholder="Your email address"
              className="w-full px-4 py-2 rounded-lg border border-input bg-background"
            />
            <button
              type="submit"
              className="w-full bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:opacity-90 transition font-semibold"
            >
              Subscribe
            </button>
          </form>
        </div>
      </section>

    </main>
  )
}