"use client";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { getIcon } from "@/lib/icons";
import { useSectionVisibility } from "@/hooks/useIntersectionObserver";
import { useApiQuery } from "@/hooks/api/useApiQuery";
import type { Service, ServicesCTA } from "@/types/models";

export default function ServicesSection() {
  const { data: servicesData } = useApiQuery<Service[]>("/api/services", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });
  
  const { data: ctaData } = useApiQuery<ServicesCTA>("/api/services-cta", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });
  
  const services = servicesData ?? [];
  const ctaSettings = ctaData ?? { id: 1, buttonText: "Get Started", buttonLink: "/contact" };
  
  const isVisible = useSectionVisibility("services-section");

  const renderServiceCard = (service: Service, index: number) => (
    <div
      key={service.id}
      className={`transform transition-all duration-700 ${
        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
      }`}
      style={{ transitionDelay: `${index * 100}ms` }}
    >
      <div className="bg-[#020c13] rounded-md shadow-md border border-[#B87333]/20 p-8 flex flex-col items-center text-center hover:border-[#B87333]/40 hover:-translate-y-1 hover:shadow-lg hover:shadow-[#B87333]/10 transition-all duration-300">
        <div className="w-16 h-16 rounded-md bg-[#B87333] flex items-center justify-center mb-6 shadow-md">
          <FontAwesomeIcon icon={getIcon(service.icon)} size="2xl" className="text-white" />
        </div>
        <h4 className="text-xl font-extrabold text-white drop-shadow-md mb-4">{service.title}</h4>
        <p className="text-gray-300 text-base leading-snug">{service.description}</p>
      </div>
    </div>
  );

  const renderServicesGrid = () => {
    if (services.length === 0) return null;

    if (services.length === 1) {
      return <div className="max-w-3xl mx-auto">{renderServiceCard(services[0], 0)}</div>;
    }

    if (services.length === 2) {
      return (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {services.map((service, index) => renderServiceCard(service, index))}
        </div>
      );
    }

    if (services.length === 3) {
      return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {services.map((service, index) => renderServiceCard(service, index))}
        </div>
      );
    }

    // For 4 or more services - 3 cards per row
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {services.map((service, index) => renderServiceCard(service, index))}
      </div>
    );
  };

  return (
    <section id="services-section" className="relative py-24 px-4 bg-[#020c13] overflow-hidden">
      {/* Gradient border that fades from right to left */}
      <div className="absolute bottom-0 right-0 w-[85%] h-[1px] bg-gradient-to-l from-[#B87333] to-transparent" />

      {/* Animated background elements */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute w-96 h-96 bg-[#B87333]/5 rounded-full blur-3xl -top-48 -left-48 animate-float" />
        <div className="absolute w-96 h-96 bg-[#B87333]/5 rounded-full blur-3xl -bottom-48 -right-48 animate-float2" />
      </div>

      <div className="max-w-7xl mx-auto relative z-10">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">Our Services</h2>
          <div className="w-20 h-1 bg-gradient-to-r from-[#B87333] to-[#ff914d] mx-auto rounded-full" />
          <p className="mt-6 text-xl text-gray-300 max-w-2xl mx-auto">
            Discover our comprehensive range of lighting solutions and services designed to transform your
            space
          </p>
        </div>

        {/* Services Grid */}
        {renderServicesGrid()}

        {/* Call to Action */}
        <div className="text-center mt-16">
          <a
            href={ctaSettings.buttonLink}
            className="inline-block px-8 py-4 rounded-full font-semibold text-lg bg-[#B87333] text-white shadow-xl hover:bg-[#A05A2C] hover:scale-105 hover:shadow-[#B87333]/30 hover:shadow-2xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#B87333] focus:ring-offset-2 focus:ring-offset-[#020c13]"
          >
            {ctaSettings.buttonText}
          </a>
        </div>
      </div>
    </section>
  );
}
