'use client'
import { useEmDashContent } from '@/hooks/useEmDashContent'
import Image from 'next/image'
import Link from 'next/link'
import { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/Card'
import Button from '@/components/ui/Button'

export default function CommunityJusticeSection() {
  const { items, loading } = useEmDashContent('campaigns')

  if (loading) {
    return (
      <div className="flex justify-center py-16">
        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
      </div>
    )
  }

  if (items.length === 0) return null

  return (
    <section id="community-justice" data-vula-section="communityjustice" data-vula-cms="campaigns" className="bg-neutral-50 py-20">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="text-center mb-14">
          <h2 className="text-4xl font-bold text-[#000080] mb-4">Community Justice</h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Pro bono initiatives and legal workshops that uplift our communities
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {items.slice(0, 6).map((item) => {
            const d = item.data as { title?: string; headline?: string; body?: string; cta_text?: string; image?: string }
            const img = d.image || ''
            const title = d.title || d.headline || 'Campaign'
            const desc = d.body || ''
            const cta = d.cta_text || 'Get Involved'
            return (
              <Card key={item.id} className="overflow-hidden rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out flex flex-col">
                <div className="aspect-video overflow-hidden">
                  {img ? (
                    <Image
                      src={img}
                      alt={title}
                      width={400}
                      height={225}
                      className="object-cover w-full h-full hover:scale-105 transition-transform duration-500 ease-out"
                    />
                  ) : (
                    <div className="w-full h-full bg-gray-100 flex items-center justify-center text-gray-400">
                      <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                      </svg>
                    </div>
                  )}
                </div>
                <CardContent className="flex-1 p-6">
                  <CardTitle className="text-xl font-bold text-[#36454F] mb-2">{title}</CardTitle>
                  {desc && (
                    <p className="text-gray-600 text-sm line-clamp-4">{desc}</p>
                  )}
                </CardContent>
                <CardFooter className="px-6 pb-6 pt-0">
                  <Link href="/contact" className="inline-block">
                    <Button variant="secondary" size="sm">
                      {cta}
                    </Button>
                  </Link>
                </CardFooter>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}