"use client"; // Required for animations and interactivity

import Image from "next/image";
import WhyChooseUs from "./WhyChooseUs";

export default function AboutUs() {
  // Initialize animations

  return (
    <section className="container bg-white py-16 px-4 sm:px-6 lg:px-8">
      <h2 className="heading-decoration-1 pb-16">
        <span className="heading-inner">Why Dynamic Realty?</span>
      </h2>
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          {/* Text Content (Left) */}
          <div className="lg:w-full space-y-6" data-aos="fade-right">
            <p className="text-lg text-gray-600">
              <span className="font-semibold text-gold-600">DYNAMIC REALTY</span> is a full-service veteran-owned real
              estate company based in Centerville, GA, established in 2004.
            </p>
            <p className="text-lg text-gray-600">
              Our services include buying & selling, rentals, & property management. We are committed to providing a
              personalized structure to each client, with on-site management & a robust property management division. We
              strive to provide a service that meets the needs of all our customers & are proud to have been helping
              people with their real estate needs for the past 20 years.
            </p>

            <div className="pt-2">
              <span className="text-lg italic font-medium text-gold-600">Making Moves, Building Trust.</span>
            </div>
          </div>

          {/* Image (Right) */}
          <div className="lg:w-full" data-aos="fade-left">
            <div className="relative rounded-lg overflow-hidden shadow-xl aspect-video">
              <Image
                src="/images/portrait-of-smiling-mature-couple-standing-in-fron-2024-09-21-17-43-42-utc.webp"
                alt="Dynamic Realty Team"
                fill
                className="object-cover transition-transform duration-500 hover:scale-105 h-full"
                priority
              />
              {/* Optional: Overlay for visual polish */}
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
            </div>
          </div>
        </div>
        <WhyChooseUs />
      </div>
    </section>
  );
}
