import Button from "@/components/ui/Button"
import Image from "next/image"
import Link from "next/link"

export default function BrandStorySection() {
  return (
    <section data-vula-section="brandstory" id="brand-story" className="bg-[#101418] py-16 lg:py-24">
      <div className="max-w-7xl mx-auto px-4 lg:px-8 grid lg:grid-cols-2 gap-8 items-center">
        <div className="relative h-[400px] lg:h-[500px] overflow-hidden border-2 border-white/20 shadow-[6px_6px_0_0_#16a34a]">
          <Image
            src="https://images.pexels.com/photos/35633192/pexels-photo-35633192.jpeg?auto=compress&cs=tinysrgb&h=350"
            alt="Soweto streets - Mzansi Urban roots"
            fill
            sizes="(max-width: 1024px) 100vw, 50vw"
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
        </div>
        <div className="text-white space-y-6">
          <h2 className="text-4xl md:text-5xl font-[900] uppercase tracking-tight leading-tight">
            From Vilakazi Street
            <span className="block text-[#16a34a]">to the World</span>
          </h2>
          <div className="w-16 h-1 bg-[#16a34a]" />
          <p className="text-lg md:text-xl leading-relaxed text-white/80">
            Mzansi Urban was born in Soweto — where shweshwe prints meet raw street energy.
            We take the bold patterns our grandmothers wore and remix them into hoodies, caps,
            and tees that speak township swagger. Every drop is limited — once it's gone, it's
            gone. No restocks, just originals.
          </p>
          <p className="text-base md:text-lg text-white/60">
            Our crew of designers and artisans work out of a small workshop on Vilakazi Street,
            hand‑checking every stitch. When you wear Mzansi Urban, you're not just wearing a
            print — you're wearing a piece of Soweto's story.
          </p>
          <Link href="/products">
            <Button
              variant="outline"
              size="lg"
              className="border-2 border-white text-white hover:bg-[#16a34a] hover:border-[#16a34a] uppercase tracking-wider shadow-[4px_4px_0_0_#16a34a]"
            >
              Explore the Collection
            </Button>
          </Link>
        </div>
      </div>
    </section>
  )
}