import Image from 'next/image'
import Link from 'next/link'

export default function AboutKasiDripSection() {
  return (
    <section data-vula-section="aboutkasidrip" id="about-kasi-drip" className="bg-white text-[#18181b]">
      <div className="grid lg:grid-cols-2">
        <div className="relative min-h-[50vh] border-b-4 border-[#18181b] lg:min-h-[70vh] lg:border-b-0 lg:border-r-4">
          <Image src="https://images.pexels.com/photos/19218014/pexels-photo-19218014.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Kasi Drip crew in Durban" fill sizes="(max-width: 1024px) 100vw, 50vw" className="object-cover" unoptimized />
        </div>
        <div className="flex flex-col justify-center bg-[#18181b] px-6 py-14 text-white lg:px-14">
          <p className="mb-4 text-sm font-black uppercase tracking-[0.3em] text-[#fbbf24]">Born in Durban</p>
          <h2 className="text-4xl font-black uppercase leading-none sm:text-5xl">From kasi streets to streetwear statement.</h2>
          <p className="mt-5 max-w-xl text-lg text-white/80">
            Kasi Drip started in Durban's townships, where style is survival and every corner has a story. We print those stories on heavyweight tees, oversized hoodies and caps that move from the block to the global front row.
          </p>
          <p className="mt-4 max-w-xl text-white/70">
            Limited numbered drops. No restocks. When it's gone, it's gone — same as the moment.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <div className="border-2 border-[#fbbf24] bg-[#fbbf24] px-4 py-3 font-black uppercase text-[#18181b]">Durban, KZN</div>
            <div className="border-2 border-white px-4 py-3 font-black uppercase">Est. 2019</div>
          </div>
          <Link href="/products" className="mt-8 inline-flex w-fit items-center justify-center border-2 border-[#fbbf24] bg-[#fbbf24] px-8 py-4 text-sm font-black uppercase tracking-wider text-[#18181b] shadow-[6px_6px_0_0_#ea580c] transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[8px_8px_0_0_#ea580c]">
            Shop the story
          </Link>
        </div>
      </div>
    </section>
  )
}