'use client';

import Image from 'next/image';

export default function Footer() {
  const productLinks = [
    'AX-Fund',
    'AX-Matrix',
    'Launchpad',
    'Liquid Market',
    'Token Factory'
  ];

  const resourceLinks = [
    'Docs',
    'FAQ & Support',
    'Trust & Security',
    'Learning Center',
    'Community Forum'
  ];

  const companyLinks = [
    'About Team',
    'Careers',
    'Contact Us',
    'Press & Media'
  ];

  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-[1280px] 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
              }}
            >
              Products
            </h3>
            <div className="flex flex-col gap-2">
              {productLinks.map((link, index) => (
                <a
                  key={index}
                  href="#"
                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
                  style={{
                    fontSize: '14px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  {link}
                </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
              }}
            >
              Resources
            </h3>
            <div className="flex flex-col gap-2">
              {resourceLinks.map((link, index) => (
                <a
                  key={index}
                  href="#"
                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
                  style={{
                    fontSize: '14px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  {link}
                </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
              }}
            >
              Company
            </h3>
            <div className="flex flex-col gap-2">
              {companyLinks.map((link, index) => (
                <a
                  key={index}
                  href="#"
                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
                  style={{
                    fontSize: '14px',
                    lineHeight: '150%',
                    fontWeight: 400
                  }}
                >
                  {link}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Section - Copyright and Legal Links */}
      <div className="w-full max-w-[1280px] 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
          }}
        >
          © 2025 ASSETX Protocol. All rights reserved.
        </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
            }}
          >
            Privacy Policy
          </a>
          <a
            href="#"
            className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
            style={{
              fontSize: '14px',
              lineHeight: '150%',
              fontWeight: 400
            }}
          >
            Terms of Service
          </a>
        </div>
      </div>
    </footer>
  );
}