"use client";

import { useEffect, useState } from "react";
import { getFeaturedServices } from "@/app/actions";
import * as LucideIcons from "lucide-react";
import {
    ArrowRight,
    Layers
} from "lucide-react";
import Link from "next/link";

export default function Capabilities() {
    const [services, setServices] = useState<any[]>([]);

    useEffect(() => {
        async function fetchServices() {
            const data = await getFeaturedServices();

            if (data && data.length > 0) {
                setServices(data);
            }
        }
        fetchServices();
    }, []);

    const DynamicIcon = ({ name, className }: { name: string, className?: string }) => {
        const IconComponent = (LucideIcons as any)[name] || Layers;
        return <IconComponent className={className} />;
    };

    // Fallback static data if database is empty
    const displayData = services.length > 0 ? services : [
        { title: "Art Direction", description: "Conceptualizing visual narratives that resonate. We define the look and feel before the camera even rolls.", icon_name: "Palette" },
        { title: "Cinematography", description: "Capturing light and shadow with state-of-the-art gear. 8K workflows and cinema-grade optics.", icon_name: "Video" },
        { title: "Motion Graphics", description: "Adding kinetic energy to static visuals. 2D and 3D animation that enhances the storytelling.", icon_name: "Clapperboard" },
        { title: "Color Grading", description: "Setting the mood with precise color science. We ensure your visuals look perfect on every screen.", icon_name: "Contrast" }
    ];

    return (
        <section className="py-16 md:py-24 px-6 md:px-16 lg:px-24">
            <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-8 md:gap-16 items-start">
                {/* Left Content */}
                <div className="lg:w-1/3 w-full">
                    <h2 className="text-3xl md:text-5xl font-bold mb-6 text-black italic tracking-tighter uppercase leading-tight">Yeteneklerimiz</h2>
                    <p className="text-white/60 text-lg mb-8 leading-relaxed">
                        Fikir aşamasından final renk düzenlemesine kadar, görsel üretim sürecinin her adımını takıntılı derecede yüksek standartlarla yönetiyoruz.
                    </p>
                    <Link
                        href="/services"
                        className="group flex items-center gap-2 text-[#1e9a83] font-semibold hover:text-white transition-colors"
                    >
                        Tüm Hizmetleri Gör
                        <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                    </Link>
                </div>

                {/* Right Grid - Restored to Original Design */}
                <div className="lg:w-2/3 w-full border border-white/10 rounded-3xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
                    {services.map((service, index) => (
                        <div
                            key={service.id || index}
                            className={`p-10 flex flex-col gap-4 hover:bg-white/[0.02] transition-colors border-white/10
                                ${index === 0 ? "border-b md:border-r" : ""}
                                ${index === 1 ? "border-b md:border-b" : ""}
                                ${index === 2 ? "md:border-r border-b md:border-b-0" : ""}
                                ${index === 3 ? "" : ""}
                            `}
                        >
                            <div className="w-12 h-12 rounded-xl bg-[#1e9a83]/10 flex items-center justify-center text-[#1e9a83]">
                                <DynamicIcon name={service.icon_name} className="w-6 h-6" />
                            </div>
                            <h3 className="text-xl font-bold text-white mt-2 uppercase italic tracking-tight">{service.title}</h3>
                            <p className="text-white/40 leading-relaxed text-sm font-medium">
                                {service.description}
                            </p>

                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}