"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 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label="Muğla Dijital - Ana Sayfaya Dön">
                            <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/50 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" role="navigation" aria-label="Hizmet Bölgeleri">
                        <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 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm"
                                    aria-label={`${loc.name} bölgesi hizmetlerimiz`}
                                >
                                    {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" aria-hidden="true">
                        <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" role="navigation" aria-label="Footer Navigasyon">
                        {[
                            { 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 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm"
                            >
                                {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 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Gizlilik Politikası Sayfası">Gizlilik Politikası</Link>
                            <Link href="/terms" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Kullanım Şartları Sayfası">Kullanım Şartları</Link>
                        </div>
                    </div>

                    {/* Credit & SEO Links */}
                    <div className="flex items-center gap-1.5 text-[10px] text-black/25 tracking-[0.05em] uppercase">
                        <span>Created by</span>
                        <a
                            href="https://ayris.tech"
                            target="_blank"
                            rel="noopener"
                            className="font-medium hover:text-primary transition-colors duration-200 hover:underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm"
                            aria-label="Tasarım ve Yazılım: Ayris Tech"
                        >
                            Ayris Tech
                        </a>

                        {/* Google Bot & Arama Motoru İndeksleme Katmanı (Görünmez / Screen-Reader Safe) */}
                        <span className="sr-only">
                            Legal AI & Solutions: 
                            <a href="https://ayris.legal" rel="noopener">AyrisLegal</a>, 
                            <a href="https://ayrislegal.com" rel="noopener">Ayris Legal AI</a>
                            The best local spots, hidden from plain sight. Marmaris Local
                            <a href="https://marmarislocal.com" rel="noopener">Marmaris Local</a>
                        </span>
                    </div>
                </div>
            </div>
        </footer>
    );
}