"use client";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import { getIcon } from "@/lib/icons";
import { useSectionVisibility } from "@/hooks/useIntersectionObserver";
import { useApiQuery } from "@/hooks/api/useApiQuery";
import type { AboutCard } from "@/types/models";

export default function AboutSection() {
  const { data: cardsData } = useApiQuery<AboutCard[]>("/api/about", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });
  
  const { data: aboutMeta } = useApiQuery<{ image: string }>("/api/about/sectionmeta", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });
  
  const cards = cardsData ?? [];
  const aboutImage = aboutMeta?.image || "";
  const isVisible = useSectionVisibility("about-section");

  // Main story (first card), pillars (next up to 3 cards)
  const mainStory = cards[0];
  const pillars = cards.slice(1, 5);

  return (
    <section
      id="about-section"
      className="relative py-24 px-4 bg-[#0d1721] overflow-hidden"
      aria-label="About section"
    >
      {/* Gradient border that fades from left to right */}
      <div className="absolute bottom-0 left-0 w-[85%] h-[1px] bg-gradient-to-r 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 px-4 relative z-10">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4" id="about-heading" tabIndex={0}>
            About Us
          </h2>
          <div className="w-20 h-1 bg-gradient-to-r from-[#B87333] to-[#ff914d] mx-auto rounded-full" />
        </div>

        {/* Main About Row */}
        <div className="flex flex-col md:flex-row gap-12 items-center mb-16">
          {/* Image */}
          <div className="flex-1 w-full max-w-md transform transition-all duration-700 hover:scale-105">
            {aboutImage ? (
              <Image
                src={aboutImage.replace("/uploads/", "/api/uploads/").replace(/\.(jpg|jpeg|png)$/i, ".webp")}
                alt="About Nitescape"
                width={800}
                height={384}
                className="rounded-md shadow-md object-cover w-full h-80 md:h-96 border-2 border-[#B87333]/30"
                style={{ minHeight: 220 }}
              />
            ) : (
              <div className="w-full h-80 md:h-96 bg-[#B87333]/10 rounded-md animate-pulse border-2 border-[#B87333]/30" />
            )}
          </div>
          {/* Main Story */}
          <div className="flex-1 w-full">
            <h3 className="text-2xl md:text-3xl font-extrabold text-white drop-shadow-md mb-6">
              {mainStory?.title || "Our Story"}
            </h3>
            <p className="text-lg md:text-xl text-gray-300 leading-relaxed">
              {mainStory?.description ||
                "We are passionate about transforming spaces with light and innovation. Our journey began with a vision to illuminate dreams and create unforgettable experiences for our clients."}
            </p>
          </div>
        </div>

        {/* Pillars/Values Row */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {pillars.map((pillar, index) => (
            <div
              key={pillar.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(pillar.icon)}
                    size="2xl"
                    className="text-white"
                  />
                </div>
                <h4 className="text-xl font-extrabold text-white drop-shadow-md mb-4">{pillar.title}</h4>
                <p className="text-gray-300 text-base leading-snug">{pillar.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
