'use client'

import Image from 'next/image'
import Link from 'next/link'
import Button from '@/components/ui/Button'
import { useVulaContent } from '@/hooks/useVulaContent'

export default function CampaignsSection() {
  const { items, loading } = useVulaContent('campaigns')

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

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

  const featured = items[0]
  const rest = items.slice(1)
  const d = featured?.data as { title?: string; headline?: string; body?: string; cta_text?: string; image?: string }

  return (
    <section id="seasonal-offers" data-vula-section="campaigns" data-vula-cms="campaigns" className="bg-[#f9f5f4] py-20">
      <div className="mx-auto max-w-7xl px-4">
        <div className="mb-12 flex flex-col md:flex-row md:items-end md:justify-between gap-4">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#6b8e23]">Fresh from KZN co-ops</p>
            <h2 className="mt-2 font-display text-3xl md:text-5xl text-[#21140d]">Seasonal colour, made in small batches</h2>
          </div>
          <Link href="/products" className="shrink-0">
            <Button variant="outline">Shop all products</Button>
          </Link>
        </div>

        <div className="grid gap-6 lg:grid-cols-2">
          <article className="relative min-h-[420px] overflow-hidden rounded-2xl bg-[#36454F]">
            {d?.image && (
              <Image src={d.image} alt={d?.headline || d?.title || 'Campaign'} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" />
            )}
            <div className="absolute inset-0 bg-gradient-to-t from-[#21140d]/80 via-[#21140d]/20 to-transparent" />
            <div className="absolute bottom-0 p-8 text-[#f9f5f4]">
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#6b8e23]">{d?.title}</p>
              <h3 className="mt-2 font-display text-2xl md:text-3xl">{d?.headline}</h3>
              {d?.body && <p className="mt-3 max-w-xl text-sm md:text-base text-[#f9f5f4]/80">{d.body}</p>}
              {d?.cta_text && (
                <Link href="/products" className="mt-5 inline-block">
                  <Button variant="default">{d.cta_text}</Button>
                </Link>
              )}
            </div>
          </article>

          <div className="grid gap-6">
            {rest.slice(0, 2).map((item) => {
              const x = item.data as { title?: string; headline?: string; body?: string; cta_text?: string; image?: string }
              return (
                <article key={item.id} className="group relative min-h-[200px] overflow-hidden rounded-2xl bg-[#36454F]">
                  {x?.image && (
                    <Image src={x.image} alt={x?.headline || x?.title || 'Campaign'} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover transition-transform duration-500 ease-out group-hover:scale-105" />
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-[#21140d]/70 to-transparent" />
                  <div className="absolute bottom-0 p-6 text-[#f9f5f4]">
                    <h3 className="font-display text-xl">{x?.headline || x?.title}</h3>
                    {x?.body && <p className="mt-1 line-clamp-2 text-sm text-[#f9f5f4]/80">{x.body}</p>}
                  </div>
                </article>
              )
            })}
          </div>
        </div>
      </div>
    </section>
  )
}