import React from 'react';

import Link from '@/components/link/Link';
import { DiscordIcon, InstagramIcon, TiktokIcon, TwitterXIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';

import { SectionViewLogger } from '../HomePageClient';

const COPYRIGHT_YEAR = new Date()?.getUTCFullYear();

const FooterLink: React.FC<{
  href: string;
  link:
    | 'about'
    | 'careers'
    | 'blog'
    | 'pricing'
    | 'hub'
    | 'help'
    | 'contact-us'
    | 'community-guidelines'
    | 'faqs'
    | 'terms-of-service'
    | 'privacy-policy';
  children: React.ReactNode;
}> = ({ href, link, children }) => {
  return (
    <Link
      href={href}
      target='_blank'
      rel='noopener noreferrer'
      className='text-[12px] leading-[155%] font-medium text-[#FAF7F5] transition-colors hover:text-[#FFFFFF] hover:underline'
      onClick={() =>
        logWebUserEvent({
          actionName: 'HomePageFooterLinkClicked',
          context: { link },
        })
      }
    >
      {children}
    </Link>
  );
};

const FooterSocialLink: React.FC<{
  href: string;
  platform: 'twitter' | 'instagram' | 'tiktok' | 'discord';
  children: React.ReactNode;
}> = ({ href, platform, children }) => {
  return (
    <Link
      href={href}
      className='text-[#FFFFFF] transition-transform hover:scale-[1.05]'
      onClick={() =>
        logWebUserEvent({
          actionName: 'HomePageSocialLinkClicked',
          context: { platform },
        })
      }
    >
      {children}
    </Link>
  );
};

const FooterSection: React.FC = () => {
  return (
    <section className='z-50 w-full px-[35px] py-[15px] md:pt-0'>
      <SectionViewLogger sectionName='Footer' />

      <div className='flex w-full flex-col items-start justify-between md:flex-row'>
        <div className='flex w-full flex-2 md:w-auto'>
          <div className='mb-[40px] flex flex-1 flex-col items-start md:mb-0 md:items-center'>
            <div>
              <div className='text-[16px] leading-[155%] font-medium text-[#FAF7F5]'>
                Brand
              </div>
              <div>
                <FooterLink href='https://suno.com/about' link='about'>
                  About
                </FooterLink>
              </div>
              <div>
                <FooterLink href='https://suno.com/careers' link='careers'>
                  Work at Suno
                </FooterLink>
              </div>
              <div>
                <FooterLink href='https://suno.com/blog?tag=all' link='blog'>
                  Blog
                </FooterLink>
              </div>
              <div>
                <FooterLink href='https://suno.com/pricing' link='pricing'>
                  Pricing
                </FooterLink>
              </div>
              <div>
                <FooterLink href='https://suno.com/hub' link='hub'>
                  Hub
                </FooterLink>
              </div>
            </div>
          </div>
          <div className='mb-[40px] flex flex-1 flex-col items-start md:mb-0 md:items-center'>
            <div>
              <div className='text-[16px] leading-[155%] font-medium text-[#FAF7F5]'>
                Support
              </div>
              <div>
                <FooterLink href='https://help.suno.com/' link='help'>
                  Help
                </FooterLink>
              </div>
              <div>
                <FooterLink
                  href='https://help.suno.com/en/articles/2551617'
                  link='contact-us'
                >
                  Contact Us
                </FooterLink>
              </div>
              <div>
                <FooterLink
                  href='https://suno.com/community-guidelines'
                  link='community-guidelines'
                >
                  Community Guidelines
                </FooterLink>
              </div>
              <div>
                <FooterLink href='https://help.suno.com' link='faqs'>
                  FAQs
                </FooterLink>
              </div>
              <div>
                <FooterLink
                  href='https://suno.com/terms-of-service'
                  link='terms-of-service'
                >
                  Terms of Service
                </FooterLink>
              </div>
              <div>
                <FooterLink
                  href='https://suno.com/privacy-policy'
                  link='privacy-policy'
                >
                  Privacy Policy
                </FooterLink>
              </div>
            </div>
          </div>
        </div>
        <div className='flex flex-1 items-center justify-start gap-[16px] md:justify-center'>
          <div className='flex items-center gap-[16px]'>
            <FooterSocialLink
              href='https://twitter.com/sunomusic'
              platform='twitter'
            >
              <TwitterXIcon className='h-4 w-4' />
            </FooterSocialLink>
            <FooterSocialLink
              href='https://www.instagram.com/sunomusic/'
              platform='instagram'
            >
              <InstagramIcon className='h-4 w-4' />
            </FooterSocialLink>
            <FooterSocialLink
              href='https://www.tiktok.com/@sunomusic'
              platform='tiktok'
            >
              <TiktokIcon className='h-4 w-4' />
            </FooterSocialLink>
            <FooterSocialLink
              href='https://discord.com/invite/suno'
              platform='discord'
            >
              <DiscordIcon className='h-4 w-4' />
            </FooterSocialLink>
          </div>
        </div>
      </div>
      <div className='flex w-full items-center justify-start py-[40px] md:justify-center md:py-[60px]'>
        <div className='text-[12px] leading-[155%] font-medium text-[#FAF7F5]'>
          © {COPYRIGHT_YEAR} Suno, Inc.
        </div>
      </div>
    </section>
  );
};

export default FooterSection;