'use client'

import Image from 'next/image'
import Button from '@/components/ui/Button'

export default function BrandAnthemSection() {
  return (
    <section data-vula-section="brandanthem" id="brand-anthem" className="relative min-h-screen flex items-center justify-center bg-[#18181b] text-white overflow-hidden">
      <div className="absolute inset-0">
        <Image
          src="https://images.pexels.com/photos/2259131/pexels-photo-2259131.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="Urban streetwear style"
          fill
          sizes="100vw"
          className="object-cover opacity-50"
          priority
        />
      </div>
      <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
        <h1 className="text-6xl md:text-8xl font-black tracking-tight uppercase mb-6">S.A.W</h1>
        <p className="text-2xl md:text-3xl font-light mb-4">South African Youth Streetwear</p>
        <p className="text-xl md:text-2xl font-medium text-gray-300 mb-8">
          Born in 2024. 19-year-old founder. Black &amp; white. No cap.
        </p>
        <p className="text-lg text-gray-400 mb-12 max-w-2xl mx-auto">
          This is Smiso Khumalo&apos;s vision — quality T-shirts that speak your language. 
          From the townships to the city, we dress the movement.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button variant="default" size="lg">Join the Movement</Button>
          <Button variant="secondary" size="lg" className="border-white text-white hover:bg-white hover:text-[#18181b]">
            Check the Tees
          </Button>
        </div>
      </div>
    </section>
  )
}