mugladijitalmedya/components/Footer.tsx

"use client";

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

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

    useEffect(() => {
        async function fetchData() {
            const [sData, lData] = await Promise.all([
                getSettings(),
                getLocations()
            ]);
            if (sData) setSettings(sData);
            if (lData) setLocations(lData);
        }
        fetchData();
    }, []);

    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-4 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>

                    {/* Regions Column - Dynamic districts */}
                    <div className="md:col-span-2 flex flex-col gap-6">
                        <span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Bölgeler</span>
                        <div className="flex flex-col gap-2">
                            {locations.map((loc) => (
                                <Link 
                                    key={loc.id} 
                                    href={`/services?region=${loc.slug}`}
                                    className="text-[11px] font-bold uppercase hover:text-primary transition-colors"
                                >
                                    {loc.name}
                                </Link>
                            ))}
                        </div>
                    </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-4 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-3xl 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 & Legal */}
                    <div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8">
                        <p className="text-[10px] text-black/25 tracking-[0.05em]">
                            © {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Tüm hakları saklıdır.
                        </p>
                        <div className="flex gap-4">
                            <Link href="/privacy" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase">Gizlilik Politikası</Link>
                            <Link href="/terms" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase">Kullanım Şartları</Link>
                        </div>
                    </div>

                    {/* 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 uppercase">
                        created by ayris.tech
                    </a>
                </div>
            </div>
        </footer>
    );
}