"use client";
import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { Service } from "@/lib/api/serviceService";

interface ServiceDeliverablesProps {
  service: Service;
}

const ServiceDeliverables = ({ service }: ServiceDeliverablesProps) => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    
    // Modern entrance animations
    gsap.set(".deliverable-item", {
      y: 60,
      opacity: 0,
      scale: 0.9,
    });

    ScrollTrigger.batch(".deliverable-item", {
      start: "-150px bottom",
      onEnter: (elements) =>
        gsap.to(elements, {
          y: 0,
          opacity: 1,
          scale: 1,
          stagger: {
            amount: 0.6,
            from: "start"
          },
          duration: 1,
          ease: "power3.out",
        }),
    });
    
    // Animate section header
    gsap.fromTo(".section-header", 
      {
        y: 40,
        opacity: 0
      },
      {
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power3.out",
        scrollTrigger: {
          trigger: ".section-header",
          start: "-100px bottom"
        }
      }
    );
  }, []);

  if (!service.deliverables) {
    return null;
  }

  const deliverablesList = service.deliverables
    .split(/[,;•\n]/)
    .map(item => item.trim())
    .filter(item => item.length > 0);

  return (
    <section className="enterprise-deliverables py-4">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="section-header text-center mb-4">
              <span className="enterprise-section-tag">What You Get</span>
              <h2 className="enterprise-section-title mb-3">
                What You Get with {service.title}
              </h2>
              <p className="enterprise-section-description">
                {service.deliverables_description || `Our comprehensive ${service.title.toLowerCase()} service includes everything you need for success`}
              </p>
            </div>
            
            <div className="row g-5">
              {deliverablesList.map((deliverable, index) => (
                <div key={index} className="col-12 col-md-6 col-lg-4">
                  <div className="deliverable-item enterprise-section-card">
                    <div className="card-icon">
                      <i className="fa-solid fa-check-circle"></i>
                    </div>
                    <div className="card-content">
                      <h6 className="card-title">
                        {deliverable}
                      </h6>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ServiceDeliverables;