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

export default function AdvanceFeatures() {
  return (
    <section className="py-20 bg-light-bg" id="features">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-12">
          <h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
            {commonDescriptions.advanceFeaturesTitle}
          </h3>
          <p className="text-text my-3">
            {commonDescriptions.sectionDesc}
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid md:grid-cols-2 gap-8 mt-8 pt-3">
          {advanceFeaturesData.map((feature) => (
            <div
              key={feature.id}
              className="feature-gd grid gap-5"
              style={{ gridTemplateColumns: 'auto 1fr' }}
            >
              <div className="icon flex-shrink-0 w-[55px] h-[55px] bg-secondary rounded text-center leading-[55px]">
                <span className={`fa fa-${feature.icon} text-[22px] text-white`} aria-hidden="true" />
              </div>
              <div className="icon-info">
                <h5 className="text-[20px] leading-[30px] font-bold mb-3 font-sans">
                  <a href="#" className="text-title hover:text-secondary transition-colors">
                    {feature.title}
                  </a>
                </h5>
                <p className="text-text text-base leading-6 mb-3 max-w-[450px]">
                  {feature.description}
                </p>
                <a href="#" className="text-secondary hover:text-primary transition-colors font-bold">
                  Read More <span className="fa fa-angle-right pl-1" />
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
