"use client";

import { useEffect, useState } from "react";
import { getSettings } from "@/app/actions";
import Link from "next/link";
import DynamicLogo from "./DynamicLogo";

export default function Footer() {
    const [settings, setSettings] = useState<any>(null);

    useEffect(() => {
        async function fetchSettings() {
            const data = await getSettings();
            if (data) setSettings(data);
        }
        fetchSettings();
    }, []);

    return (
        <footer className="border-t border-black/10">
            {/* Main Footer Content */}
            <div className="max-w-7xl mx-auto px-6 md:px-12 py-16 md:py-20">
                <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8">

                    {/* Left Column - Logo & Description */}
                    <div className="md:col-span-5 flex flex-col justify-between gap-12">
                        {/* Logo */}
                        <Link href="/" className="inline-block">
                            <div className="relative w-40 h-12">
                                <DynamicLogo
                                    src="/logo.png"
                                    color="black"
                                    width="100%"
                                    height="100%"
                                    size="contain"
                                />
                            </div>
                        </Link>

                        {/* Description */}
                        <p className="text-[11px] text-black/40 leading-[1.8] max-w-xs">
                            {settings?.footer_description || "Muğla Dijital olarak markaların dijital dünyada özgün bir şekilde var olmasını sağlıyoruz. Drone çekimi, video prodüksiyon ve sosyal medya yönetimi ile gerçek bağlantılar kuruyoruz."}
                        </p>
                    </div>

                    {/* Center Column - Menu label + divider */}
                    <div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex">
                        <div className="flex flex-col items-center gap-4">
                            <div className="w-px h-8 bg-black/10" />
                            <span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Menu</span>
                        </div>
                    </div>

                    {/* Right Column - Navigation Links */}
                    <div className="md:col-span-5 flex flex-col items-start md:items-end gap-3">
                        {[
                            { label: "Çalışmalar", href: "/works" },
                            { label: "Hizmetler", href: "/services" },
                            { label: "Partnerler", href: "/partners" },
                            { label: "Hakkımızda", href: "/about" },
                            { label: "İletişim", href: "/contact" },
                        ].map((item) => (
                            <Link
                                key={item.label}
                                href={item.href}
                                className="text-2xl md:text-4xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight"
                            >
                                {item.label}
                            </Link>
                        ))}
                    </div>
                </div>
            </div>

            {/* Bottom Bar */}
            <div className="border-t border-black/10">
                <div className="max-w-7xl mx-auto px-6 md:px-12 py-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    {/* Copyright */}
                    <p className="text-[10px] text-black/25 tracking-[0.05em]">
                        © {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Dijital çözümler üreten ajans.
                    </p>

                    {/* Credit */}
                    <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-primary transition-colors">
                        created by ayris.tech
                    </a>
                </div>
            </div>
        </footer>
    );
}