'use client';

import Image from 'next/image';
import { useLanguage } from '@/contexts/LanguageContext';

export default function Footer() {
  const { t } = useLanguage();

  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="bg-white border-t border-[#e5e7eb] w-full flex flex-col items-center">
      {/* 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}
            />
          </div>

          {/* Address */}
          <div
            className="text-[#9ca1af] text-left font-inter"
            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-4 items-center">
            {socialIcons.map((icon, index) => (
              <div
                key={index}
                className="cursor-pointer hover:opacity-70 transition-opacity"
              >
                <Image
                  src={icon.src}
                  alt={icon.alt}
                  width={icon.width}
                  height={icon.height}
                />
              </div>
            ))}
          </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="text-[#111827] font-inter"
              style={{
                fontSize: '16px',
                lineHeight: '150%',
                fontWeight: 700
              }}
            >
              {t('footer.products')}
            </h3>
            <div className="flex flex-col gap-2">
              {[1, 2, 3, 4, 5].map((num) => (
                <a
                  key={num}
                  href="#"
                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
                  style={{
                    fontSize: '14px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  {t(`footer.product${num}`)}
                </a>
              ))}
            </div>
          </div>

          {/* Resources Column */}
          <div className="flex flex-col gap-4 w-[178.67px]">
            <h3
              className="text-[#111827] font-inter"
              style={{
                fontSize: '16px',
                lineHeight: '150%',
                fontWeight: 700
              }}
            >
              {t('footer.resources')}
            </h3>
            <div className="flex flex-col gap-2">
              {[1, 2, 3, 4, 5].map((num) => (
                <a
                  key={num}
                  href="#"
                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
                  style={{
                    fontSize: '14px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  {t(`footer.resource${num}`)}
                </a>
              ))}
            </div>
          </div>

          {/* Company Column */}
          <div className="flex flex-col gap-4 w-[178.67px]">
            <h3
              className="text-[#111827] font-inter"
              style={{
                fontSize: '16px',
                lineHeight: '150%',
                fontWeight: 700
              }}
            >
              {t('footer.company')}
            </h3>
            <div className="flex flex-col gap-2">
              {[1, 2, 3, 4].map((num) => (
                <a
                  key={num}
                  href="#"
                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
                  style={{
                    fontSize: '14px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  {t(`footer.company${num}`)}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Section - Copyright and Legal Links */}
      <div className="w-full max-w-[1440px] border-t border-[#f3f4f6] px-6 py-8 flex flex-row items-center justify-between">
        {/* Copyright */}
        <div
          className="text-[#9ca1af] font-inter"
          style={{
            fontSize: '14px',
            lineHeight: '150%',
            fontWeight: 400
          }}
        >
          {t('footer.copyright')}
        </div>

        {/* Legal Links */}
        <div className="flex flex-row gap-6">
          <a
            href="#"
            className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
            style={{
              fontSize: '14px',
              lineHeight: '150%',
              fontWeight: 400
            }}
          >
            {t('footer.privacy')}
          </a>
          <a
            href="#"
            className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
            style={{
              fontSize: '14px',
              lineHeight: '150%',
              fontWeight: 400
            }}
          >
            {t('footer.terms')}
          </a>
        </div>
      </div>
    </footer>
  );
}