'use client'

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

export default function OriginRootsSection() {
  const { items, loading } = useVulaContent('posts')
  
  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 item = items[0]
  const data = item.data as { title?: string; excerpt?: string; body?: string; author?: string; category?: string; image?: string }

  return (
    <section id="our-story" data-vula-section="originroots" data-vula-cms="posts" className="bg-[#18181b] text-white py-20">
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="relative h-[400px] lg:h-[550px] overflow-hidden border-[3px] border-[#ea580c] shadow-[8px_8px_0_0_#16a34a]">
            {data.image && (
              <Image
                src={data.image}
                alt={data.title ?? 'Our Roots'}
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover"
              />
            )}
          </div>
          <div className="flex flex-col justify-center">
            {data.category && (
              <p className="text-[#16a34a] uppercase tracking-[0.2em] text-sm font-bold mb-2">{data.category}</p>
            )}
            {data.title && (
              <h2 className="text-4xl md:text-5xl font-black uppercase tracking-tighter leading-none mb-4">
                <span className="text-white">{data.title.split(' ').slice(0, -1).join(' ')}</span>{' '}
                <span className="text-[#ea580c]" style={{ WebkitTextStroke: "2px #ea580c", color: "transparent" }}>{data.title.split(' ').pop()}</span>
              </h2>
            )}
            {data.excerpt && (
              <p className="text-lg text-gray-300 uppercase tracking-wide mb-6">{data.excerpt}</p>
            )}
            {data.body && (
              <p className="text-base text-gray-400 leading-relaxed mb-8">{data.body}</p>
            )}
            <div className="flex items-center gap-4 border-t-2 border-[#ea580c] pt-4">
              {data.author && (
                <p className="text-sm uppercase tracking-wider text-gray-300">By <span className="text-white font-bold">{data.author}</span></p>
              )}
              <Link href="/products">
                <Button variant="outline" className="border-2 border-white text-white hover:bg-white hover:text-[#18181b] rounded-none uppercase tracking-widest text-xs shadow-[4px_4px_0_0_#16a34a] hover:shadow-[6px_6px_0_0_#ea580c] transition-all duration-200 ease-out">
                  Shop Collection
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}