'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { cn } from '@/lib/utils';

const HomePageFooter = () => {
  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={50} />
                  </div>
                  <p className="txt-body-m text-txt-secondary-normal">
                    Grow your love story with CrushLevel AI—From 'Hi' to 'I Do', sparked by every
                    chat
                  </p>
                </div>

                {/* Features */}
                <div>
                  <h3 className="txt-title-s mb-4">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"
                    >
                      Recharge
                    </Link>
                    <Link
                      href="/vip"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      CrushLevel VIP
                    </Link>
                  </div>
                </div>

                {/* Explore */}
                <div>
                  <h3 className="txt-title-s mb-4">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"
                    >
                      Daily Free CrushCoins
                    </Link>
                    <Link
                      href="/about"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      About Us
                    </Link>
                    <a
                      href="mailto:support@crushlevel.ai"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      Contact Us
                    </a>
                  </div>
                </div>

                {/* Legal */}
                <div>
                  <h3 className="txt-title-s mb-4">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"
                    >
                      User Agreement
                    </Link>
                    <Link
                      href="/policy/privacy"
                      className="txt-label-m text-txt-secondary-normal hover:text-txt-primary-normal block transition-colors"
                    >
                      Privacy Policy
                    </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>Copyright © 2025 Crushlevel. All rights reserved</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;
