"use client";

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

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>
            <Link href="/" className="inline-flex flex-col mb-3">
              <span className="font-heading text-5xl font-black uppercase tracking-tighter gradient-text-warm">
                Kozmos
              </span>
              <span className="text-[10px] tracking-[0.5em] font-body uppercase text-white/30 mt-0.5">
                Beach &amp; More
              </span>
            </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>
  );
}
