'use client'

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

export default function ShopTheVibeSection() {
  return (
    <section data-vula-section="shopthevibe" id="shop-cta" className="relative h-[70vh] min-h-[500px] overflow-hidden">
      {/* Background image */}
      <Image
        src="https://images.pexels.com/photos/2259131/pexels-photo-2259131.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
        alt="Mzansi streetwear lifestyle — young crew owning the vibe"
        fill
        className="object-cover brightness-[0.65] grayscale contrast-125"
        sizes="100vw"
        priority
      />

      {/* Overlay content */}
      <div className="absolute inset-0 flex items-center">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-2xl">
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black uppercase tracking-tight text-white"
                style={{ WebkitTextStroke: "1px #ea580c" }}>
              Own your
              <span className="bg-[#ea580c] text-white px-2 ml-2">vibe</span>
            </h2>
            <p className="mt-4 text-lg md:text-xl text-white/90 max-w-md font-medium">
              Real street style from Joburg to Cape Town. Drop culture that speaks your language.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <Link href="/products">
                <Button variant="default" size="lg" className="bg-[#ea580c] hover:bg-[#d4500a] text-white font-bold uppercase tracking-wider shadow-[6px_6px_0_0_#101418]">
                  Shop the drop
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}