import { Link } from '@tanstack/react-router'
import { featuresData, commonDescriptions } from '../../data/siteData'

export default function Features() {
  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">
          {/* Left Content */}
          <div className="w-full lg:w-1/3">
            <h4 className="text-lg font-semibold text-secondary mb-3">
              {commonDescriptions.featuresSubtitle}
            </h4>
            <p className="text-text mt-3 leading-relaxed">
              {commonDescriptions.featuresDesc}
            </p>
            <Link
              to="/services"
              className="inline-block mt-4 px-6 py-3 bg-secondary hover:bg-secondary/80 text-white font-semibold rounded transition-colors"
            >
              See More Services &rarr;
            </Link>
          </div>

          {/* Right Content - Feature Cards */}
          <div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-6 lg:pl-8">
            {featuresData.map((feature) => (
              <div key={feature.id} className="feature-gd">
                <img
                  src={feature.image}
                  alt={feature.title}
                  className="w-full h-auto object-cover rounded"
                />
                <div className="icon-info mt-3">
                  <h5 className="text-lg font-semibold mt-3">
                    <a href="#" className="text-title hover:text-secondary transition-colors">
                      {feature.title}
                    </a>
                  </h5>
                  <p className="text-text mt-2">
                    {feature.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}