"use client";

import { useTranslations } from 'next-intl';
import { Instagram } from '@/components/InstagramIcon';
import { Link, usePathname } from '@/i18n/routing';
import Image from 'next/image';

export default function Footer() {
  const t = useTranslations('Footer');
  const tNav = useTranslations('Navbar');

  const pathname = usePathname();

  const navLinks = [
    { href: pathname === '/' ? '#about' : '/#about', label: tNav('about') },
    { href: '/accommodation', label: tNav('accommodation') },
    { href: pathname === '/' ? '#beach' : '/#beach', label: tNav('beach') },
    { href: pathname === '/' ? '#dining' : '/#dining', label: tNav('dining') },
    { href: pathname === '/' ? '#events' : '/#events', label: tNav('events') },
    { href: pathname === '/' ? '#gallery' : '/#gallery', label: tNav('gallery') },
    { href: pathname === '/' ? '#contact' : '/#contact', label: tNav('contact') },
  ];

  return (
    <footer
      className="text-white py-16 relative overflow-hidden"
      style={{ background: '#080D18' }}
    >
      {/* Rainbow top border */}
      <div
        className="absolute top-0 left-0 right-0 h-[1px]"
        style={{
          background:
            'linear-gradient(90deg, transparent 0%, #FF5A36 25%, #FFA827 50%, #00BFA5 75%, transparent 100%)',
        }}
      />

      <div className="container mx-auto px-6 lg:px-12">
        <div className="flex flex-col md:flex-row justify-between items-start gap-12 mb-12">

          {/* Brand */}
          <div className="relative w-40 h-24">
            <Link href="/" className="inline-flex flex-col mb-4 transform transition-transform hover:scale-105">
              <Image 
                src="/logo.png" 
                alt="Kozmos Logo" 
                fill
                sizes="(max-width: 768px) 120px, 160px"
                className="object-contain brightness-0 invert opacity-100 drop-shadow-lg"
              />
            </Link>
            <p className="text-white/35 text-sm mt-1">{t('tagline')}</p>
          </div>

          {/* Nav links */}
          <div className="flex flex-wrap gap-x-7 gap-y-3">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="text-sm text-white/40 hover:text-white transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>

          {/* Social */}
          <a
            href="https://www.instagram.com/kozmosbeach/"
            target="_blank"
            rel="noreferrer"
            className="w-12 h-12 rounded-2xl border border-white/10 flex items-center justify-center text-white/40 hover:border-coral hover:text-coral transition-all"
          >
            <Instagram size={19} />
          </a>
        </div>

        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-white/25">
          <div>{t('rights')}</div>
          <div>
            Created by{' '}
            <a 
              href="https://ayris.tech" 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-white/40 hover:text-coral transition-colors"
            >
              ayris.tech
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}