'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { cn } from '@/lib/utils';
import { useTranslations } from 'next-intl';

const HomePageFooter = React.memo(() => {
  const t = useTranslations('footer');
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <footer
      className={`absolute bottom-0 w-full z-40 transition-all duration-300 ease-in-out`}
      onMouseEnter={() => setIsExpanded(true)}
      onMouseLeave={() => setIsExpanded(false)}
    >
      {/* 背景遮罩 - 磨砂玻璃效果 */}
      <div className="bg-background-default/65 absolute inset-0 backdrop-blur-xl" />

      <div className="relative">
        {/* 展开的内容区域 */}
        <div
          className={`overflow-hidden transition-all duration-300 ${
            isExpanded ? 'max-h-[400px] opacity-100' : 'max-h-0 opacity-0'
          }`}
        >
          <div className="px-16 pt-12 pb-8">
            <div className="mx-auto max-w-[1136px]">
              <div className="grid grid-cols-4 gap-12">
                {/* Logo 和 Slogan */}
                <div className="col-span-1">
                  <div className="mb-4 flex items-center gap-2">
                    <Image
                      src="/logo.svg"
                      alt="logo"
                      width={160}
                      height={160}
                      className="cursor-pointer"
                    />
                  </div>
                  <p className="txt-body-m text-txt-secondary-normal">{t('slogan')}</p>
                </div>

                {/* Features */}
                <div>
                  <h3 className="txt-title-s mb-4">{t('features')}</h3>
                  <div className="space-y-3">
                    <Link
                      href="/wallet"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      {t('recharge')}
                    </Link>
                    <Link
                      href="/vip"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      {t('crushLevelVip')}
                    </Link>
                  </div>
                </div>

                {/* Explore */}
                <div>
                  <h3 className="txt-title-s mb-4">{t('explore')}</h3>
                  <div className="space-y-3">
                    <Link
                      href="/crushcoin"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      {t('dailyFreeCrushCoins')}
                    </Link>
                    <Link
                      href="/about"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      {t('aboutUs')}
                    </Link>
                    <a
                      href="mailto:support@crushlevel.ai"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      {t('contactUs')}
                    </a>
                  </div>
                </div>

                {/* Legal */}
                <div>
                  <h3 className="txt-title-s mb-4">{t('legal')}</h3>
                  <div className="space-y-3">
                    <Link
                      href="/policy/tos"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      {t('userAgreement')}
                    </Link>
                    <Link
                      href="/policy/privacy"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      {t('privacyPolicy')}
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 收起状态 - 版权信息 */}
        <div className="px-16 py-4">
          <div className="mx-auto flex max-w-[1136px] items-center justify-center">
            <div className="txt-body-s text-txt-tertiary-normal flex items-center gap-2">
              <span>{t('copyright', { year: new Date().getFullYear() })}</span>
              <Image
                className={cn(isExpanded ? 'rotate-180' : '')}
                src="/images/home/icon-arrow-bottom.svg"
                alt=""
                width={16}
                height={16}
              />
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
});

export default HomePageFooter;
