'use client'

import Image from "next/image"

const founderImg = "https://images.pexels.com/photos/14538746/pexels-photo-14538746.jpeg?auto=compress&cs=tinysrgb&h=350"
const bushveldImg = "https://images.pexels.com/photos/6146178/pexels-photo-6146178.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"

export default function OurStorySection() {
  return (
    <section data-vula-section="ourstory" id="our-story" className="py-20 lg:py-28" style={{ backgroundColor: "#ffffff" }}>
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Text side */}
          <div>
            <span className="inline-block text-[#16a34a] text-sm md:text-base tracking-widest uppercase font-semibold mb-3">
              Founded in 2015
            </span>
            <h2 className="text-3xl md:text-5xl font-bold leading-tight mb-6" style={{ color: "#211c0d" }}>
              A Family's Vision, A Village's Welcome
            </h2>
            <div className="space-y-4 text-base leading-relaxed" style={{ color: "#211c0d/80" }}>
              <p>
                vaVenda Lodge was born from a single belief: that the most authentic travel experiences
                are shared around a table, under a thatched roof, with the sounds of the bushveld as your soundtrack.
                Our founder, Makhado Ravele, returned to his ancestral land in the Soutpansberg mountains with a dream
                to welcome the world into his home.
              </p>
              <p>
                Every detail — from the hand-stamped clay walls to the indigenous garden paths — is a tribute to the
                Venda people's deep connection with nature. We partner with local artisans, storytellers, and guides
                to ensure every guest leaves with more than a tan: they take home a piece of Venda soul.
              </p>
              <blockquote className="border-l-4 pl-4 italic text-lg" style={{ borderColor: "#d4af37", color: "#211c0d" }}>
                "I am because we are." — Ubuntu philosophy, echoed in every interaction at vaVenda.
              </blockquote>
            </div>
          </div>

          {/* Image side */}
          <div className="relative">
            <div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
              <Image
                src={bushveldImg}
                alt="Limpopo bushveld at sunrise"
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover"
              />
            </div>
            <div className="absolute -bottom-6 -left-6 w-36 h-36 rounded-full overflow-hidden border-4 border-white shadow-lg">
              <Image
                src={founderImg}
                alt="Makhado Ravele, founder of vaVenda Lodge"
                fill
                sizes="144px"
                className="object-cover"
              />
            </div>
          </div>
        </div>

        {/* Stats bar */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-20 pt-12 border-t" style={{ borderColor: "#e2dfd4" }}>
          {[
            { label: "Suites", value: "6" },
            { label: "Venda Artisans Featured", value: "12" },
            { label: "Years Open", value: "9" },
            { label: "Languages Spoken", value: "5" },
          ].map((stat) => (
            <div key={stat.label} className="text-center">
              <p className="text-4xl font-bold" style={{ color: "#d4af37" }}>{stat.value}</p>
              <p className="text-sm uppercase tracking-wider mt-1" style={{ color: "#211c0d/60" }}>{stat.label}</p>
            </div>
          ))}
        </div>

        {/* Contact snippet */}
        <div className="mt-12 text-center text-sm" style={{ color: "#211c0d/60" }}>
          <p>Makhado, Limpopo, South Africa &nbsp;·&nbsp; +27 15 001 2345 &nbsp;·&nbsp; info@vavendalodge.co.za</p>
        </div>
      </div>
    </section>
  )
}