"use client";

import { useEffect, useState } from "react";
import { getFeaturedPartners } from "@/app/actions";
import { motion } from "framer-motion";
import DynamicLogo from "./DynamicLogo";
import Link from "next/link";

export default function Partners() {
    const [partners, setPartners] = useState<any[]>([]);

    useEffect(() => {
        async function fetchPartners() {
            const data = await getFeaturedPartners();
            setPartners(data || []);
        }
        fetchPartners();
    }, []);

    if (partners.length === 0) return null;

    return (
        <section className="border-y border-black/10 bg-[#f5f5f0] overflow-hidden">
            <div className="max-w-7xl mx-auto px-6 md:px-12 flex items-stretch min-h-[100px] md:min-h-[140px]">
                {/* Left Label Section */}
                <motion.div
                    initial={{ x: -20, opacity: 0 }}
                    whileInView={{ x: 0, opacity: 1 }}
                    viewport={{ once: true }}
                    className="flex items-center gap-4 py-6 md:py-8 pr-8 border-r border-black/10 shrink-0"
                >
                    <span className="text-[9px] md:text-[10px] tracking-[0.2em] uppercase text-black/30 font-bold">Partners</span>
                </motion.div>

                {/* Partners List Section */}
                <div className="flex-1 flex items-center pl-4 md:pl-8 pr-4 md:pr-8 overflow-hidden">
                    <div className="flex flex-wrap md:flex-nowrap items-center justify-center md:justify-start w-full gap-6 md:gap-10 py-4">
                        {partners.slice(0, 5).map((partner, index) => {
                            const content = (
                                <motion.div
                                    initial={{ y: 10, opacity: 0 }}
                                    whileInView={{ y: 0, opacity: 1 }}
                                    viewport={{ once: true }}
                                    transition={{ delay: index * 0.1 + 0.5 }}
                                    className="relative flex items-center justify-center group"
                                >
                                    {partner.logo ? (
                                        <div className="relative h-[60px] md:h-[75px] w-[90px] md:w-[130px] overflow-hidden">
                                            <motion.div
                                                whileHover={{ y: "-50%" }}
                                                transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
                                                className="flex flex-col items-center h-[200%]"
                                            >
                                                {/* Normal State */}
                                                <div className="h-1/2 w-full flex items-center justify-center opacity-70">
                                                    <DynamicLogo
                                                        src={partner.logo}
                                                        color="black"
                                                        width="100%"
                                                        height="100%"
                                                        size="220%"
                                                    />
                                                </div>
                                                {/* Hover State */}
                                                <div className="h-1/2 w-full flex items-center justify-center">
                                                    <DynamicLogo
                                                        src={partner.logo}
                                                        color="#ff5c00" // primary color
                                                        width="100%"
                                                        height="100%"
                                                        size="220%"
                                                    />
                                                </div>
                                            </motion.div>
                                        </div>
                                    ) : (
                                        <span className="text-[14px] md:text-[18px] tracking-tight font-medium text-black/30 whitespace-nowrap">
                                            {partner.name}
                                        </span>
                                    )}
                                </motion.div>
                            );

                            if (partner.project_slug) {
                                return (
                                    <Link key={index} href={`/works/${partner.project_slug}`}>
                                        {content}
                                    </Link>
                                );
                            }

                            return <div key={index}>{content}</div>;
                        })}
                    </div>
                </div>

                {/* Right CTA Section */}
                <motion.div
                    initial={{ x: 20, opacity: 0 }}
                    whileInView={{ x: 0, opacity: 1 }}
                    viewport={{ once: true }}
                    className="flex items-center py-6 md:py-8 pl-8 border-l border-black/10 shrink-0"
                >
                    <a
                        href="/partners"
                        className="text-[10px] md:text-[11px] tracking-[0.1em] font-bold uppercase text-black hover:text-primary transition-colors flex items-center gap-2 group"
                    >
                        Hepsini Gör
                        <motion.span
                            animate={{ x: [0, 5, 0] }}
                            transition={{ repeat: Infinity, duration: 2 }}
                        >
                            →
                        </motion.span>
                    </a>
                </motion.div>
            </div>
        </section>
    );
}