"use client";

import { Instagram, Twitter } from "lucide-react";
import Link from "next/link";

interface StatItemProps {
    icon: React.ReactNode;
    label: string;
    sublabel: string;
}

function StatItem({ icon, label, sublabel }: StatItemProps) {
    return (
        <div className="glass p-4 rounded-2xl flex items-center gap-4 min-w-[200px]">
            <div className="w-10 h-10 glass rounded-lg flex items-center justify-center text-white/40">
                {icon}
            </div>
            <div>
                <h4 className="text-white font-bold text-sm leading-tight">{label}</h4>
                <p className="text-white/40 text-[10px] font-medium">{sublabel}</p>
            </div>
        </div>
    );
}

export default function BottomBar() {
    return (
        <div className="absolute bottom-0 left-0 w-full px-6 md:px-8 py-6 md:py-10 flex flex-col md:flex-row items-center md:items-end justify-between gap-6 pointer-events-none">
            {/* Stats Section - Hidden on mobile */}
            <div className="hidden md:flex items-center gap-4 pointer-events-auto">
                <StatItem
                    icon={<div className="text-[#1e9a83]">📸</div>}
                    label="500+"
                    sublabel="Tamamlanan Çekim"
                />
                <StatItem
                    icon={<div className="text-[#1e9a83]">🏢</div>}
                    label="150+"
                    sublabel="Mutlu Müşteri"
                />
                <StatItem
                    icon={<div className="text-[#1e9a83]">🚁</div>}
                    label="Drone"
                    sublabel="Profesyonel Çekim"
                />
            </div>

            {/* Socials & Scroll Section */}
            <div className="flex flex-col items-center md:items-end gap-4 md:gap-6 pointer-events-auto mb-2">
                <div className="flex items-center gap-6">
                    <span className="text-[10px] font-bold tracking-[0.2em] text-white/30 uppercase">Bizi Takip Edin</span>
                    <div className="flex items-center gap-4 text-white/60">
                        <Link href="#" className="hover:text-white transition-colors"><Instagram className="w-4 h-4" /></Link>
                        <Link href="#" className="hover:text-white transition-colors"><Twitter className="w-4 h-4" /></Link>
                    </div>
                </div>
            </div>

            {/* Copyright */}
            <div className="md:absolute md:bottom-4 md:left-8 text-[10px] text-white/20 font-medium text-center md:text-left">
                © {new Date().getFullYear()} Muğla Dijital Medya Ajansı. Tüm hakları saklıdır.
            </div>
        </div>
    );
}