import Link from 'next/link'
import Image from 'next/image'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { blogPosts } from '@/lib/mock-data'
import { Calendar, ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { SectionHeader } from '@/components/section-header'

export function BlogSection() {
  const featured = blogPosts.slice(0, 2)

  return (
    <section id="blog" className="section-padding bg-background">
      <div className="container-wide">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-14">
          <SectionHeader
            eyebrow="Dive into"
            title="Our Blog"
            description="Expert perspectives on leadership, strategy, and professional development."
            align="left"
            className="mb-0"
          />
          <Link href="/blog">
            <Button variant="outline" className="font-semibold shrink-0">
              View All Articles
              <ArrowRight className="ml-2 w-4 h-4" />
            </Button>
          </Link>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {featured.map((post) => (
            <Card
              key={post.id}
              className="overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-border/50 hover:border-accent/30 group p-0 gap-0"
            >
              <div className="w-full h-52 relative overflow-hidden bg-muted">
                <Image
                  src={post.image}
                  alt={post.title}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-primary/40 to-transparent" />
              </div>

              <div className="p-7 space-y-4">
                <Badge className="bg-accent/10 text-accent border-0 hover:bg-accent/20">
                  {post.category}
                </Badge>
                <h3 className="text-xl font-bold text-foreground leading-snug group-hover:text-primary transition-colors">
                  {post.title}
                </h3>
                <p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
                  {post.excerpt}
                </p>
                <div className="flex items-center justify-between pt-3 border-t border-border/40">
                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                    <Calendar className="w-3.5 h-3.5" />
                    {new Date(post.date).toLocaleDateString('en-GB', {
                      year: 'numeric',
                      month: 'long',
                      day: 'numeric',
                    })}
                  </div>
                  <Link href="/blog">
                    <span className="text-sm font-semibold text-accent inline-flex items-center gap-1 hover:gap-2 transition-all">
                      Read More
                      <ArrowRight className="w-3.5 h-3.5" />
                    </span>
                  </Link>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}