import { whyChooseUsData, commonDescriptions } from '../../data/siteData'

export default function WhyChooseUs() {
  return (
    <section className="py-20 bg-white" id="about">
      <div className="container mx-auto px-4">
        <div className="flex flex-wrap lg:flex-nowrap gap-12 items-center">
          {/* Left - Image */}
          <div className="w-full lg:w-1/2">
            <img
              src="/src/assets/images/g5.jpg"
              alt="Why Choose Us"
              className="w-full rounded-lg"
            />
          </div>

          {/* Right Content */}
          <div className="w-full lg:w-1/2 lg:pl-8">
            <h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
              {commonDescriptions.whyChooseUsTitle}
            </h3>
            <p className="text-text mb-8 leading-relaxed">
              {commonDescriptions.whyChooseUsDesc}
            </p>

            <ul className="cont-4 space-y-3">
              {whyChooseUsData.map((item, index) => (
                <li key={index} className="flex items-center gap-3">
                  <span className="fa fa-check text-secondary" />
                  <span className="text-text">{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  )
}
