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

interface ServiceDetailsBannerProps {
  service: Service;
}

const ServiceDetailsBanner = ({ service }: ServiceDetailsBannerProps) => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    if (document.querySelector(".service-banner")) {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: ".service-banner",
          start: "center center",
          end: "+=100%",
          scrub: true,
          pin: false,
        },
      });

      tl.to(".thumb-one", {
        opacity: 0.3,
        y: "-100%",
        zIndex: -1,
        duration: 2,
      });

      tl.to(
        ".thumb-two",
        {
          opacity: 0.3,
          scale: 2,
          y: "100%",
          zIndex: -1,
          duration: 2,
        },
        0
      );
    }
  }, []);

  return (
    <section className="enterprise-banner position-relative overflow-hidden">
      <div className="banner-background">
        <div className="gradient-orb orb-1"></div>
        <div className="gradient-orb orb-2"></div>
        <div className="gradient-orb orb-3"></div>
        
        {/* Service-Specific Background Elements */}
        <div className="enterprise-bg-elements">
          {/* Flying Service Code Elements */}
          <div className="flying-code">
            <div className="code-snippet code-1">
              <span className="code-line">const service = {'{'}</span>
              <span className="code-line">  name: &apos;{service.title}&apos;,</span>
              <span className="code-line">  category: &apos;{service.category?.name}&apos;</span>
              <span className="code-line">{'}'};</span>
            </div>
            <div className="code-snippet code-2">
              <span className="code-line">if (service.featured) {'{'}</span>
              <span className="code-line">  deploy.premium();</span>
              <span className="code-line">{'}'}</span>
            </div>
            <div className="code-snippet code-3">
              <span className="code-line">class ServiceDelivery {'{'}</span>
              <span className="code-line">  constructor() {'{'}</span>
              <span className="code-line">    this.quality = &apos;enterprise&apos;;</span>
              <span className="code-line">  {'}'}</span>
              <span className="code-line">{'}'}</span>
            </div>
            <div className="code-snippet code-4">
              <span className="code-line">API.deliver({'{'}</span>
              <span className="code-line">  service: &apos;{service.title}&apos;,</span>
              <span className="code-line">  duration: &apos;{service.duration}&apos;</span>
              <span className="code-line">{'}'});</span>
            </div>
          </div>
          
          {/* Industrial Grid */}
          <div className="industrial-grid">
            <div className="grid-line horizontal h-1"></div>
            <div className="grid-line horizontal h-2"></div>
            <div className="grid-line horizontal h-3"></div>
            <div className="grid-line horizontal h-4"></div>
            <div className="grid-line vertical v-1"></div>
            <div className="grid-line vertical v-2"></div>
            <div className="grid-line vertical v-3"></div>
            <div className="grid-line vertical v-4"></div>
          </div>
          
          {/* Service Elements */}
          <div className="security-elements">
            <div className="shield shield-1">
              <i className="fa-solid fa-cogs"></i>
            </div>
            <div className="shield shield-2">
              <i className="fa-solid fa-rocket"></i>
            </div>
            <div className="shield shield-3">
              <i className="fa-solid fa-chart-line"></i>
            </div>
            <div className="shield shield-4">
              <i className="fa-solid fa-users"></i>
            </div>
          </div>
          
          {/* Circuit Patterns */}
          <div className="circuit-patterns">
            <div className="circuit circuit-1">
              <div className="circuit-node"></div>
              <div className="circuit-line"></div>
              <div className="circuit-node"></div>
            </div>
            <div className="circuit circuit-2">
              <div className="circuit-node"></div>
              <div className="circuit-line"></div>
              <div className="circuit-node"></div>
              <div className="circuit-line"></div>
              <div className="circuit-node"></div>
            </div>
            <div className="circuit circuit-3">
              <div className="circuit-node"></div>
              <div className="circuit-line"></div>
              <div className="circuit-node"></div>
            </div>
          </div>
          
          {/* Data Streams */}
          <div className="data-streams">
            <div className="stream stream-1">
              <div className="data-bit"></div>
              <div className="data-bit"></div>
              <div className="data-bit"></div>
              <div className="data-bit"></div>
            </div>
            <div className="stream stream-2">
              <div className="data-bit"></div>
              <div className="data-bit"></div>
              <div className="data-bit"></div>
              <div className="data-bit"></div>
              <div className="data-bit"></div>
            </div>
            <div className="stream stream-3">
              <div className="data-bit"></div>
              <div className="data-bit"></div>
              <div className="data-bit"></div>
            </div>
          </div>
          
          {/* Service Request/Response Data */}
          <div className="request-response-data">
            <div className="api-request req-1">
              <div className="request-label">POST /api/services</div>
              <div className="request-data">
                <div className="data-packet"></div>
                <div className="data-packet"></div>
                <div className="data-packet"></div>
              </div>
            </div>
            <div className="api-response resp-1">
              <div className="response-label">200 OK</div>
              <div className="response-data">
                <div className="data-packet"></div>
                <div className="data-packet"></div>
                <div className="data-packet"></div>
                <div className="data-packet"></div>
              </div>
            </div>
            <div className="api-request req-2">
              <div className="request-label">GET /api/delivery</div>
              <div className="request-data">
                <div className="data-packet"></div>
                <div className="data-packet"></div>
              </div>
            </div>
            <div className="api-response resp-2">
              <div className="response-label">201 Created</div>
              <div className="response-data">
                <div className="data-packet"></div>
                <div className="data-packet"></div>
                <div className="data-packet"></div>
              </div>
            </div>
          </div>
          
          {/* Service Data Generation */}
          <div className="space-data-generation">
            <div className="data-cluster cluster-1">
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
            </div>
            <div className="data-cluster cluster-2">
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
            </div>
            <div className="data-cluster cluster-3">
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
            </div>
            <div className="data-cluster cluster-4">
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
              <div className="data-point"></div>
            </div>
          </div>
          
          {/* Service Connections */}
          <div className="database-connections">
            <div className="db-connection conn-1">
              <div className="connection-line"></div>
              <div className="db-node">
                <i className="fa-solid fa-cogs"></i>
              </div>
              <div className="connection-pulse"></div>
            </div>
            <div className="db-connection conn-2">
              <div className="connection-line"></div>
              <div className="db-node">
                <i className="fa-solid fa-rocket"></i>
              </div>
              <div className="connection-pulse"></div>
            </div>
            <div className="db-connection conn-3">
              <div className="connection-line"></div>
              <div className="db-node">
                <i className="fa-solid fa-chart-line"></i>
              </div>
              <div className="connection-pulse"></div>
            </div>
          </div>
          
          {/* Service Metrics */}
          <div className="real-time-metrics">
            <div className="metric metric-1">
              <div className="metric-label">Service Uptime</div>
              <div className="metric-value">99.9%</div>
              <div className="metric-bar">
                <div className="bar-fill"></div>
              </div>
            </div>
            <div className="metric metric-2">
              <div className="metric-label">Response Time</div>
              <div className="metric-value">45ms</div>
              <div className="metric-bar">
                <div className="bar-fill"></div>
              </div>
            </div>
            <div className="metric metric-3">
              <div className="metric-label">Client Satisfaction</div>
              <div className="metric-value">98%</div>
              <div className="metric-bar">
                <div className="bar-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="enterprise-banner__content">
              <div className="banner-badge mb-4">
                <span className="enterprise-badge">
                  {service.category?.name || 'Professional Service'}
                </span>
              </div>
              
              <h1 className="enterprise-title mb-4">
                {service.title}
              </h1>
              
              <p className="enterprise-description mb-5">
                {service.description}
              </p>
              
              <div className="enterprise-highlights mb-5">
                <div className="row justify-content-center g-4">
                  {service.duration && (
                    <div className="col-auto">
                      <div className="highlight-card">
                        <div className="highlight-icon">
                          <i className="fa-solid fa-clock"></i>
                        </div>
                        <div className="highlight-content">
                          <span className="highlight-label">Duration</span>
                          <span className="highlight-value">{service.duration}</span>
                        </div>
                      </div>
                    </div>
                  )}
                  {service.featured && (
                    <div className="col-auto">
                      <div className="highlight-card featured">
                        <div className="highlight-icon">
                          <i className="fa-solid fa-star"></i>
                        </div>
                        <div className="highlight-content">
                          <span className="highlight-label">Premium</span>
                          <span className="highlight-value">Featured Service</span>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
              
              <div className="enterprise-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="#service-details" className="btn btn-outline-light btn-lg mb-3">
                  <span>Learn More</span>
                  <i className="fa-solid fa-arrow-down ms-2"></i>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul className="social">
        <li>
          <Link
            href="https://www.linkedin.com/company/gnxtech"
            target="_blank"
            aria-label="connect with us on linkedin"
           >
            <i className="fa-brands fa-linkedin-in"></i>
          </Link>
        </li>
        <li>
          <Link
            href="https://github.com/gnxtech"
            target="_blank"
            aria-label="view our code on github"
           >
            <i className="fa-brands fa-github"></i>
          </Link>
        </li>
      </ul>
      <Link href="#scroll-to" className="scroll-to">
        Scroll
        <span className="arrow"></span>
      </Link>
    </section>
  );
};

export default ServiceDetailsBanner;