'use client'

import Image from 'next/image'

export default function FounderStorySection() {
  return (
    <section
      id="our-story"
      data-vula-section="founder-story"
      className="py-20 bg-[#f9fafb]"
    >
      <div className="container mx-auto px-4 max-w-5xl">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="relative aspect-[3/4] overflow-hidden rounded-xl shadow-[var(--shadow-lifted)]">
            <Image
              src="https://images.pexels.com/photos/1317712/pexels-photo-1317712.jpeg?auto=compress&cs=tinysrgb&h=350"
              alt="Smiso Khumalo — founder of S.A.W"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
            />
          </div>

          <div>
            <span className="text-xs uppercase tracking-widest text-[#36454F] font-semibold">
              Our Story
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#18181b] mt-2 mb-6">
              Born in 2024 — a 19-year-old saw the gap.
            </h2>

            <div className="space-y-4 text-gray-700 leading-relaxed">
              <p>
                Smiso Khumalo grew up in Soweto wearing hand-me-down tees that never
                fit right. By 16 he was screen-printing his own designs in his
                grandmother&apos;s garage — learning that quality fabric and sharp
                graphics shouldn&apos;t cost a fortune.
              </p>
              <p>
                In 2024, at just 19, he launched <strong>S.A.W</strong> — South
                African Wear. No hype drops, no inflated prices. Just heavyweight
                cotton tees with bold, monochrome prints that speak the language of
                the streets. Every T-shirt is cut for the township & metropolitan
                youth who value authenticity over logos.
              </p>
              <p className="font-medium text-[#18181b]">
                &ldquo;I wanted a T-shirt that felt like mine — clean, tough, and
                unapologetically South African. That&apos;s S.A.W.&rdquo;
              </p>
            </div>

            <div className="mt-8 flex gap-3">
              <span className="inline-block bg-[#18181b] text-white text-xs px-3 py-1 rounded-full font-semibold">
                Premium 240GSM cotton
              </span>
              <span className="inline-block border border-[#e5e7eb] text-[#111827] text-xs px-3 py-1 rounded-full">
                Designed in Jozi
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}