import Image from 'next/image'

export default function SowetoRootsSection() {
  const storyImages = [
    'https://images.pexels.com/photos/4956184/pexels-photo-4956184.jpeg?auto=compress&cs=tinysrgb&h=650&w=940',
    'https://images.pexels.com/photos/38487458/pexels-photo-38487458.jpeg?auto=compress&cs=tinysrgb&h=350'
  ]

  return (
    <section data-vula-section="sowetoroots" id="our-story" className="py-20 bg-[#18181b] text-white">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
          {/* Left — narrative text */}
          <div className="space-y-6">
            <h2 className="font-['Archivo_Black'] uppercase text-4xl lg:text-5xl leading-tight">
              SOWETO ROOTS
            </h2>
            <p className="text-lg text-white/80 leading-relaxed">
              Mzansi Wear was born in the heart of Soweto, where street corners pulse with creativity and the rhythm of the township shapes every stitch. Our founder, Thabo Mokoena, learned the craft of African-print tailoring from his grandmother in Orlando West. Each hoodie, cap, and tee carries the story of a community that refuses to be ignored.
            </p>
            <p className="text-white/70">
              We blend traditional Shweshwe and Ankara fabrics with modern streetwear silhouettes — because heritage isn't old, it's now.
            </p>
            <div className="pt-4 border-t-2 border-[#d4af37]">
              <p className="italic text-[#d4af37]">
                "Our prints are a declaration. We wear our roots on our sleeves, literally."
              </p>
              <p className="text-sm text-white/60 mt-2">— Thabo Mokoena, Founder</p>
            </div>
          </div>

          {/* Right — stacked images with offset shadow */}
          <div className="relative h-[500px] lg:h-[600px]">
            <div className="absolute top-0 left-0 w-3/4 h-3/4 z-10 border-2 border-white shadow-[8px_8px_0_0_#dc2626]">
              <Image
                src={storyImages[0]}
                alt="Soweto streetscape"
                fill
                sizes="(max-width: 1024px) 75vw, 37.5vw"
                className="object-cover"
              />
            </div>
            <div className="absolute bottom-0 right-0 w-2/3 h-2/3 border-2 border-white shadow-[-6px_6px_0_0_#d4af37]">
              <Image
                src={storyImages[1]}
                alt="African print fabric detail"
                fill
                sizes="(max-width: 1024px) 66vw, 33vw"
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Marquee-style stat strip */}
      <div className="mt-20 border-y-2 border-white bg-[#dc2626] py-4 overflow-hidden">
        <div className="flex gap-12 uppercase tracking-widest text-white text-xl font-bold whitespace-nowrap animate-marquee">
          <span>Rooted in Soweto</span>
          <span>African Prints</span>
          <span>Limited drops</span>
          <span>Street culture</span>
          <span>Proudly Mzansi</span>
          <span>Rooted in Soweto</span>
          <span>African Prints</span>
          <span>Limited drops</span>
          <span>Street culture</span>
          <span>Proudly Mzansi</span>
        </div>
      </div>
    </section>
  )
}