import Image from 'next/image'

export default function KwaNtofontofoVisionSection() {
  return (
    <section
      id="vision"
      data-vula-section="kwantofontofovision"
      className="py-20 bg-white"
    >
      <div className="max-w-5xl mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="relative h-80 w-full rounded-xl overflow-hidden border-2 border-[#E67E22]">
            <Image
              src="https://images.pexels.com/photos/38213559/pexels-photo-38213559.jpeg?auto=compress&cs=tinysrgb&h=350"
              alt="Sunrise over nature reserve near KwaNtofontofo"
              fill
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 50vw"
            />
          </div>
          <div>
            <h2 className="text-4xl font-bold text-[#2C1810] mb-6">Our Vision</h2>
            <p className="text-lg text-gray-700 leading-relaxed mb-4">
              To be synonymous with the highest standards of service in terms of
              professionalism with staff that is equipped to deal with guests from
              all walks of life.
            </p>
            <p className="text-gray-700 mb-4">
              <strong>Our Mission</strong> — To provide excellent & efficient
              professional services within safe, affordable & accessible facilities
              to exceed guest expectations through trained staff with emphasis on
              &ldquo;customer service&rdquo;.
            </p>
            <p className="text-gray-700 mb-4">
              <strong>Our Objectives</strong> — To be the best business that offers
              tailor-made service to its customers in a friendly environment without
              compromising on quality.
            </p>
            <blockquote className="border-l-4 border-[#C0392B] pl-4 italic text-[#2C1810] mt-6">
              &ldquo;We believe in ubuntu — I am because we are. Every guest who walks
              through our door becomes family.&rdquo;
            </blockquote>
          </div>
        </div>
      </div>
    </section>
  )
}