"use client";
import { useEffect } from "react";
import Image from "next/legacy/image";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
import { Service } from "@/lib/api/serviceService";
import { serviceUtils } from "@/lib/api/serviceService";

interface TransformProps {
  service: Service;
}

const Transform = ({ service }: TransformProps) => {

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    
    // Check if elements exist before animating
    const footFadeElements = document.querySelectorAll(".foot-fade");
    if (footFadeElements.length > 0) {
      gsap.set(".foot-fade", {
        x: -100,
        opacity: 0,
      });

      ScrollTrigger.batch(".foot-fade", {
        start: "-100px bottom",
        onEnter: (elements) =>
          gsap.to(elements, {
            x: 0,
            opacity: 1,
            stagger: 0.3,
          }),
      });
    }
  }, []);

  return (
    <section className="enterprise-transform py-5" id="scroll-to">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="row align-items-center mb-5">
              <div className="col-12 col-lg-6">
                <div className="transform__content">
                  <div className="section-header mb-4">
                    <span className="enterprise-section-tag">Transform Your Business</span>
                    <h2 className="enterprise-section-title mb-4">
                      Transform your business with {service.title}
                    </h2>
                    <p className="enterprise-section-description">
                      {service.description}
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-12 col-lg-6">
                <div className="transform__thumb">
                  <div className="enterprise-image-wrapper">
                    <Image
                      src={serviceUtils.getServiceImageUrl(service) || "/images/transform-thumb.png"}
                      className="enterprise-service-image"
                      alt={service.title}
                      width={600}
                      height={400}
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <div className="section-header text-center mb-4">
              <span className="enterprise-section-tag">Why Choose Us</span>
              <h2 className="enterprise-section-title mb-3">
                {service.why_choose_description || `Why choose our ${service.title.toLowerCase()}?`}
              </h2>
            </div>
            
            <div className="row g-5">
              {service.features && service.features.length > 0 ? (
                service.features.slice(0, 6).map((feature, index) => (
                  <div key={feature.id} className="col-12 col-md-6 col-lg-4">
                    <div className="benefit-item enterprise-section-card">
                      <div className="card-icon">
                        <i className={`fa-solid fa-${feature.icon || 'check'}`}></i>
                      </div>
                      <div className="card-content">
                        <h6 className="card-title">{feature.title}</h6>
                        <p className="card-description">
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                        // Fallback content if no features are available
                        <>
                          <div className="col-12 col-md-6 col-lg-4">
                            <div className="benefit-item enterprise-section-card">
                              <div className="card-icon">
                                <i className="fa-solid fa-rocket"></i>
                              </div>
                              <div className="card-content">
                                <h6 className="card-title">Fast Delivery</h6>
                                <p className="card-description">
                                  {service.duration ? `Delivered in ${service.duration}` : 'Quick turnaround times for your project needs'}
                                </p>
                              </div>
                            </div>
                          </div>
                          <div className="col-12 col-md-6 col-lg-4">
                            <div className="benefit-item enterprise-section-card">
                              <div className="card-icon">
                                <i className="fa-solid fa-shield-halved"></i>
                              </div>
                              <div className="card-content">
                                <h6 className="card-title">Quality Assured</h6>
                                <p className="card-description">
                                  Rigorous testing and quality control ensure reliable, robust solutions
                                </p>
                              </div>
                            </div>
                          </div>
                          <div className="col-12 col-md-6 col-lg-4">
                            <div className="benefit-item enterprise-section-card">
                              <div className="card-icon">
                                <i className="fa-solid fa-headset"></i>
                              </div>
                              <div className="card-content">
                                <h6 className="card-title">Ongoing Support</h6>
                                <p className="card-description">
                                  Comprehensive support and maintenance to ensure optimal performance
                                </p>
                              </div>
                            </div>
                          </div>
                        </>
                      )}
                    </div>
            
            <div className="section-header text-center mb-4 mt-6">
              <span className="enterprise-section-tag">Our Expertise</span>
              <h2 className="enterprise-section-title mb-3">
                Our Expertise
              </h2>
              {service.expertise_description && (
                <p className="enterprise-section-description">
                  {service.expertise_description}
                </p>
              )}
            </div>
            
            <div className="row g-5">
              {service.expertise_items && service.expertise_items.length > 0 ? (
                service.expertise_items.slice(0, 3).map((expertise, index) => (
                  <div key={expertise.id} className="col-12 col-md-6 col-lg-4">
                    <div className="expertise-item enterprise-section-card">
                      <div className="card-icon">
                        <i className={`fa-solid fa-${expertise.icon || 'star'}`}></i>
                      </div>
                      <div className="card-content">
                        <h6 className="card-title">{expertise.title}</h6>
                        <p className="card-description">
                          {expertise.description}
                        </p>
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                // Fallback content if no expertise items are available
                <>
                  <div className="col-12 col-md-6 col-lg-4">
                    <div className="expertise-item enterprise-section-card">
                      <div className="card-icon">
                        <i className="fa-solid fa-users"></i>
                      </div>
                      <div className="card-content">
                        <h6 className="card-title">Expert Team</h6>
                        <p className="card-description">
                          Our experienced team specializes in {service.title.toLowerCase()} with years of industry expertise.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="col-12 col-md-6 col-lg-4">
                    <div className="expertise-item enterprise-section-card">
                      <div className="card-icon">
                        <i className="fa-solid fa-code"></i>
                      </div>
                      <div className="card-content">
                        <h6 className="card-title">Modern Technologies</h6>
                        <p className="card-description">
                          We use cutting-edge technologies and frameworks to deliver scalable, secure solutions.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="col-12 col-md-6 col-lg-4">
                    <div className="expertise-item enterprise-section-card">
                      <div className="card-icon">
                        <i className="fa-solid fa-chart-line"></i>
                      </div>
                      <div className="card-content">
                        <h6 className="card-title">Proven Results</h6>
                        <p className="card-description">
                          We have successfully delivered solutions to numerous clients, helping them achieve their goals.
                        </p>
                      </div>
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Transform;