'use client'

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

export default function SowetoHeroSection() {
  const { items, loading } = useVulaContent('hero_banners')

  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

  const d = items[0].data as {
    title?: string
    subtitle?: string
    cta_text?: string
    cta_url?: string
    image?: string
  }

  return (
    <section
      id="hero"
      data-vula-section="sowetohero"
      data-vula-cms="hero_banners"
      className="relative min-h-[90vh] flex overflow-hidden"
    >
      {/* Left solid block — ink black */}
      <div className="w-1/2 bg-[#18181b] flex items-center justify-center p-12">
        <div className="max-w-lg text-left">
          <h1 className="font-['Archivo_Black'] uppercase text-6xl lg:text-7xl leading-tight text-white">
            {d.title || 'FROM THE TOWNSHIP'}
            <span className="text-[#dc2626] block">TO THE WORLD</span>
          </h1>
          {d.subtitle && (
            <p className="mt-6 text-lg text-white/80 uppercase tracking-widest">{d.subtitle}</p>
          )}
          {d.cta_text && (
            <Button
              variant="default"
              size="lg"
              className="mt-8 bg-[#dc2626] hover:bg-[#b02020] text-white border-2 border-white shadow-[6px_6px_0_0_#d4af37] transition-all duration-200 ease-out"
              onClick={() => {
                if (d.cta_url) window.location.href = d.cta_url
              }}
            >
              {d.cta_text}
            </Button>
          )}
        </div>
      </div>

      {/* Right block — brand color (accent red) + image overlay */}
      <div className="w-1/2 bg-[#dc2626] relative">
        {d.image && (
          <div className="absolute inset-0">
            <Image
              src={d.image}
              alt={d.title || 'Hero banner'}
              fill
              sizes="50vw"
              className="object-cover opacity-70"
            />
          </div>
        )}
      </div>

      {/* Decorative offset shadow */}
      <div className="absolute bottom-0 left-0 right-0 h-2 bg-[#d4af37]" />
    </section>
  )
}