import Image from "next/image";

export default function AboutProductSection() {
  return (
    <section
      id="about"
      className="about px-6 py-12 lg:px-12 lg:py-16 lg:max-h-[600px] lg:overflow-y-hidden overflow-y-auto rounded-lg my-12 mx-4"
    >
      <div className="max-w-7xl mx-auto lg:h-full overflow-y-auto text-[18px] font-[400]">
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
          {/* Left Column - Text Content */}
          <div className="space-y-6">
            <h2 className="text-white text-[24px] lg:text-[32px] font-[600] mb-8 text-left">
              About Happy Homes Creator
            </h2>

            <div className="space-y-6 text-white text-base leading-7">
              <p>
                Welcome to Happy Home Creators, where we're redefining how Nigerians connect and find love, both at home and across the diaspora. We understand that finding a life partner is a significant journey, and we're here to make it discreet, deliberate, and deeply personal.


              </p>

              <p>
               Unlike conventional dating sites, you won't find endless profile scrolling or microblogging here. Our unique strength lies in our intelligent matchmaking algorithm, which works tirelessly behind the scenes to connect you with highly compatible individuals. We focus on meaningful connections by matching you based on shared values, aspirations, and genuine compatibility, bringing you closer to building the happy home you envision.

              </p>

              <p>
                At Happy Home Creators, we're dedicated to fostering authentic relationships that lead to lasting partnerships. Let us help you find your perfect match and begin your beautiful journey together.

              </p>
            </div>
          </div>

          {/* Right Column - Images */}
          <div className="relative md:flex justify-center h-full items-center hidden">
            {/* Top Image */}
            <div className="mb-4">
              <div className="rounded-lg overflow-hidden">
                <Image
                  src="/images/about.svg"
                  alt="Woman working on laptop"
                  width={400}
                  height={200}
                  className="w-full h-auto object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
