"use client";
import { motion } from "framer-motion";
import Image from "next/image";
import { useSectionVisibility } from "@/hooks/useIntersectionObserver";
import { useApiQuery } from "@/hooks/api/useApiQuery";

interface Feature {
  title: string;
  description: string;
  icon: string;
}

interface WattsContent {
  title: string;
  subtitle: string;
  features: Feature[];
}

export default function WattsSection() {
  const isVisible = useSectionVisibility("watts-section");
  const { data: contentData } = useApiQuery<WattsContent>("/api/watts", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });
  
  const content = contentData ?? { title: "", subtitle: "", features: [] };

  return (
    <section id="watts-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 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isVisible ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <div className="flex justify-center mb-6">
            <Image
              src="/images/wattslogo.webp"
              alt="Watts Lights Logo"
              width={200}
              height={80}
              className="object-contain"
            />
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4 min-h-[56px]">
            {content.title || <span className="inline-block w-2/3 h-8 bg-gray-700 rounded animate-pulse" />}
          </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 min-h-[32px]">
            {content.subtitle || (
              <span className="inline-block w-full h-6 bg-gray-700 rounded animate-pulse" />
            )}
          </p>
        </motion.div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 min-h-[320px]">
          {content.features.length > 0
            ? content.features.map((feature, index) => (
                <motion.div
                  key={feature.title}
                  initial={{ opacity: 0, y: 30 }}
                  animate={isVisible ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.6, delay: index * 0.2 }}
                  className="bg-[#030f18] rounded-md p-8 border border-[#B87333]/20 shadow-md hover:border-[#B87333]/40 hover:-translate-y-1 hover:shadow-lg hover:shadow-[#B87333]/10 transition-all duration-300 min-h-[220px]"
                >
                  <div className="text-4xl mb-4">{feature.icon}</div>
                  <h3 className="text-2xl font-bold text-white mb-4 min-h-[32px]">{feature.title}</h3>
                  <p className="text-gray-300 min-h-[48px]">{feature.description}</p>
                </motion.div>
              ))
            : Array.from({ length: 3 }).map((_, i) => (
                <div
                  key={i}
                  className="bg-[#030f18] rounded-md p-8 border border-[#B87333]/20 min-h-[220px] animate-pulse flex flex-col items-center"
                >
                  <div className="w-12 h-12 bg-gray-700 rounded-full mb-4" />
                  <div className="w-2/3 h-6 bg-gray-700 rounded mb-4" />
                  <div className="w-full h-4 bg-gray-700 rounded" />
                </div>
              ))}
        </div>

        {/* Call to Action */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isVisible ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="text-center mt-16"
        >
          <a
            href="/watts-lights"
            className="inline-flex items-center px-8 py-4 rounded-full bg-[#B87333] text-white font-semibold hover:bg-[#A05A2C] hover:shadow-lg hover:shadow-[#B87333]/30 hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#B87333] focus:ring-offset-2 focus:ring-offset-[#020c13]"
          >
            Learn More About Watts
            <svg
              className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17 8l4 4m0 0l-4 4m4-4H3"
              />
            </svg>
          </a>
        </motion.div>
      </div>
    </section>
  );
}
