'use client';

import Image from 'next/image';
import { Link, Button } from '@heroui/react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';

export default function Footer() {
  const { t } = useLanguage();
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  const socialIcons = [
    { src: '/component-12.svg', alt: 'Twitter', width: 24, height: 24 },
    { src: '/component-13.svg', alt: 'Discord', width: 24, height: 24 },
    { src: '/component-14.svg', alt: 'Telegram', width: 24, height: 24 },
    { src: '/component-15.svg', alt: 'Medium', width: 24, height: 24 }
  ];

  return (
    <footer className={`w-full flex flex-col items-center border-t ${
      isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
    }`}>
      {/* Main Footer Content */}
      <div className="w-full max-w-[1440px] px-6 py-20 flex flex-row gap-8">

        {/* Left Section - Logo, Address, Social Icons */}
        <div className="flex flex-col gap-6 w-[389.33px]">
          {/* Logo */}
          <div className="flex items-center">
            <Image
              src="/logo2.svg"
              alt="AssetX Logo"
              width={160}
              height={40}
              style={{
                filter: isDark ? 'invert(1) brightness(1.2)' : 'none'
              }}
            />
          </div>

          {/* Address */}
          <div
            className="text-[#9ca1af] text-left font-domine"
            style={{
              fontSize: '14px',
              lineHeight: '150%',
              fontWeight: 400
            }}
          >
            G/F, Hong Kong Museum Of Art, 10號 Salisbury
            <br />
            Rd, Tsim Sha Tsui, HongKong
          </div>

          {/* Social Icons */}
          <div className="flex flex-row gap-2 items-center">
            {socialIcons.map((icon, index) => (
              <Button
                key={index}
                isIconOnly
                variant="light"
                className="min-w-10 w-10 h-10"
              >
                <Image
                  src={icon.src}
                  alt={icon.alt}
                  width={icon.width}
                  height={icon.height}
                  style={{
                    filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                  }}
                />
              </Button>
            ))}
          </div>
        </div>

        {/* Right Section - Links */}
        <div className="flex flex-row justify-between flex-1">

          {/* Products Column */}
          <div className="flex flex-col gap-4 w-[178.67px]">
            <h3
              className={`font-domine font-bold text-base ${
                isDark ? 'text-[#fafafa]' : 'text-[#111827]'
              }`}
              style={{
                lineHeight: '150%'
              }}
            >
              {t('footer.products')}
            </h3>
            <div className="flex flex-col gap-2">
              {[1, 2, 3, 4, 5].map((num) => (
                <Link
                  key={num}
                  href="#"
                  className={`font-domine text-sm ${
                    isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
                  }`}
                  style={{
                    lineHeight: '150%'
                  }}
                >
                  {t(`footer.product${num}`)}
                </Link>
              ))}
            </div>
          </div>

          {/* Resources Column */}
          <div className="flex flex-col gap-4 w-[178.67px]">
            <h3
              className={`font-domine font-bold text-base ${
                isDark ? 'text-[#fafafa]' : 'text-[#111827]'
              }`}
              style={{
                lineHeight: '150%'
              }}
            >
              {t('footer.resources')}
            </h3>
            <div className="flex flex-col gap-2">
              {[1, 2, 3, 4, 5].map((num) => (
                <Link
                  key={num}
                  href="#"
                  className={`font-domine text-sm ${
                    isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
                  }`}
                  style={{
                    lineHeight: '150%'
                  }}
                >
                  {t(`footer.resource${num}`)}
                </Link>
              ))}
            </div>
          </div>

          {/* Company Column */}
          <div className="flex flex-col gap-4 w-[178.67px]">
            <h3
              className={`font-domine font-bold text-base ${
                isDark ? 'text-[#fafafa]' : 'text-[#111827]'
              }`}
              style={{
                lineHeight: '150%'
              }}
            >
              {t('footer.company')}
            </h3>
            <div className="flex flex-col gap-2">
              {[1, 2, 3, 4].map((num) => (
                <Link
                  key={num}
                  href="#"
                  className={`font-domine text-sm ${
                    isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
                  }`}
                  style={{
                    lineHeight: '150%'
                  }}
                >
                  {t(`footer.company${num}`)}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Section - Copyright and Legal Links */}
      <div className={`w-full max-w-[1440px] border-t px-6 py-8 flex flex-row items-center justify-between ${
        isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
      }`}>
        {/* Copyright */}
        <div className="text-[#9ca1af] font-domine text-sm" style={{ lineHeight: '150%' }}>
          {t('footer.copyright')}
        </div>

        {/* Legal Links */}
        <div className="flex flex-row gap-6">
          <Link
            href="#"
            className={`font-domine text-sm ${
              isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
            }`}
            style={{ lineHeight: '150%' }}
          >
            {t('footer.privacy')}
          </Link>
          <Link
            href="#"
            className={`font-domine text-sm ${
              isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
            }`}
            style={{ lineHeight: '150%' }}
          >
            {t('footer.terms')}
          </Link>
        </div>
      </div>
    </footer>
  );
}