import { benefitsData } from "@/data/pricing/chatFeatureData";

export default function ChatFeature() {
  const { subtitle, title, benefits } = benefitsData;
  const normalizeSvgMarkup = (svg: string) =>
    svg
      .replace(/width=\{(\d+)\}/g, 'width="$1"')
      .replace(/height=\{(\d+)\}/g, 'height="$1"')
      .replace(/data-aos-duration=\{(\d+)\}/g, 'data-aos-duration="$1"')
      .replace(/data-aos-delay=\{(\d+)\}/g, 'data-aos-delay="$1"');

  return (
    <div className="carousel-container">
      <div className="sec-title">
        <span
          className="sub-title"
          data-aos="fade-up"
          data-aos-duration={900}
          data-aos-delay={300}
        >
          {subtitle}
        </span>
        <h2
          className="title"
          data-aos="fade-up"
          data-aos-duration={900}
          data-aos-delay={400}
        >
          {title}
        </h2>
      </div>
      <div className="row">
        {benefits.map((benefit, index) => (
          <div key={index} className="col-lg-4 col-md-6">
            <div
              className="feature-card"
              data-aos={benefit.aosAnimation}
              data-aos-duration={900}
              data-aos-delay={benefit.aosDelay}
            >
              <div
                className="feature-icon"
                dangerouslySetInnerHTML={{
                  __html: normalizeSvgMarkup(benefit.icon),
                }}
              />
              <h3 className="title">{benefit.title}</h3>
              <p>{benefit.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}