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

interface ServicePricingProps {
  service: Service;
}

const ServicePricing = ({ service }: ServicePricingProps) => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    
    // Animate pricing section
    gsap.set(".pricing-content", {
      y: 50,
      opacity: 0,
    });

    ScrollTrigger.create({
      trigger: ".pricing-content",
      start: "-100px bottom",
      onEnter: () =>
        gsap.to(".pricing-content", {
          y: 0,
          opacity: 1,
          duration: 0.8,
          ease: "power2.out",
        }),
    });
  }, []);

  return (
    <section className="enterprise-pricing py-5">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="row">
              <div className="col-12 col-lg-8 offset-lg-2">
                <div className="section-header text-center mb-5">
                  <span className="enterprise-section-tag">Pricing & Packages</span>
                  <h2 className="enterprise-section-title mb-4">
                    Pricing & Packages
                  </h2>
                  <p className="enterprise-section-description">
                    Get started with our {service.title.toLowerCase()} service. 
                    Contact us for a customized quote based on your specific requirements.
                  </p>
                </div>
            
                <div className="pricing-content text-center">
                  
                  <div className="enterprise-pricing-card">
                    <div className="pricing-header">
                      <div className="pricing-badge">
                        <span>Most Popular</span>
                      </div>
                      <h3 className="pricing-title">
                        {service.title}
                      </h3>
                      <div className="price-display">
                        <span className="price-period">
                          Contact Us for Pricing
                        </span>
                      </div>
                    </div>
                    
                    <div className="pricing-features">
                      <ul className="enterprise-feature-list">
                        <li className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-check"></i>
                          </div>
                          <span>Custom {service.title.toLowerCase()} solution</span>
                        </li>
                        <li className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-check"></i>
                          </div>
                          <span>Professional consultation</span>
                        </li>
                        <li className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-check"></i>
                          </div>
                          <span>Ongoing support & maintenance</span>
                        </li>
                        <li className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-check"></i>
                          </div>
                          <span>Quality assurance & testing</span>
                        </li>
                        <li className="feature-item">
                          <div className="feature-icon">
                            <i className="fa-solid fa-check"></i>
                          </div>
                          <span>Documentation & training</span>
                        </li>
                        {service.duration && (
                          <li className="feature-item">
                            <div className="feature-icon">
                              <i className="fa-solid fa-clock"></i>
                            </div>
                            <span>Project duration: {service.duration}</span>
                          </li>
                        )}
                        {service.technologies && (
                          <li className="feature-item">
                            <div className="feature-icon">
                              <i className="fa-solid fa-code"></i>
                            </div>
                            <span>Latest technologies & frameworks</span>
                          </li>
                        )}
                      </ul>
                    </div>
                    
                    <div className="pricing-cta">
                      <Link href="/contact-us" className="btn btn-primary btn-lg me-3 mb-3">
                        <span>Get Free Quote</span>
                        <i className="fa-solid fa-arrow-right ms-2"></i>
                      </Link>
                      <Link href="/services" className="btn btn-outline-secondary btn-lg mb-3">
                        <span>View All Services</span>
                      </Link>
                    </div>
                  </div>
                  
                  <div className="pricing-note">
                    <div className="note-content">
                      <i className="fa-solid fa-info-circle"></i>
                      <p>
                        Final pricing depends on project scope, complexity, and specific requirements. 
                        Contact us for a detailed proposal.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ServicePricing;