'use client';

import Link from 'next/link';

import {
  Facebook,
  Instagram,
  XformerlyTwitter,
} from '@/components/misc/logo-icons';

const socialLinks = [
  {
    id: 'facebook',
    href: 'https://www.facebook.com',
    label: 'Facebook',
    icon: Facebook,
  },
  {
    id: 'instagram',
    href: 'https://www.instagram.com',
    label: 'Instagram',
    icon: Instagram,
  },
  {
    id: 'twitter',
    href: 'https://x.com',
    label: 'X',
    icon: XformerlyTwitter,
  },
];

const Logo = ({ className }: { className?: string }) => (
  <svg
    width='28'
    height='28'
    viewBox='0 0 28 28'
    fill='none'
    xmlns='http://www.w3.org/2000/svg'
    className={className}
    aria-hidden='true'
  >
    <path
      d='M14 9.33333L10.0333 7V2.33333L14 0L17.9667 2.33333V7L14 9.33333Z'
      className='fill-primary-base'
    />
    <path
      d='M21.9333 14L17.9667 11.6667V7L21.9333 4.66667L25.9 7V11.6667L21.9333 14Z'
      className='fill-primary-base'
    />
    <path
      d='M17.9667 21V16.3333L21.9333 14L25.9 16.3333V21L21.9333 23.3333L17.9667 21Z'
      className='fill-primary-base'
    />
    <path
      d='M10.0333 21L14 18.6667L17.9667 21V25.6667L14 28L10.0333 25.6667V21Z'
      className='fill-primary-base'
    />
    <path
      d='M6.06667 14L10.0333 16.3333V21L6.06667 23.3333L2.10001 21V16.3333L6.06667 14Z'
      className='fill-primary-base'
    />
    <path
      d='M6.06667 14L10.0333 11.6667V7L6.06667 4.66667L2.10001 7V11.6667L6.06667 14Z'
      className='fill-primary-base'
    />
  </svg>
);

export default function ApexWordmarkFooter() {
  return (
    <footer className='bg-bg-white-0 w-full overflow-hidden pt-10 lg:pt-12'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='flex flex-col gap-8 lg:gap-6'>
          <div className='flex flex-col gap-8 lg:flex-row lg:items-center'>
            <div className='flex items-center justify-between lg:contents'>
              <Link
                href='/'
                className='flex shrink-0 items-center gap-1.5'
                aria-label='Apex home'
              >
                <Logo className='size-8' />
                <div className='text-title-h5 text-text-strong-950'>
                  Apex <span className='text-text-soft-400 -ml-1.5'>™</span>
                </div>
              </Link>

              <div className='flex items-center gap-2 lg:flex-1'>
                {socialLinks.map((social) => (
                  <Link
                    key={social.id}
                    href={social.href}
                    target='_blank'
                    rel='noreferrer'
                    aria-label={`Follow Apex on ${social.label}`}
                    className='border-stroke-soft-200 hover:bg-bg-weak-50 group flex size-8 items-center justify-center rounded-full border transition-colors'
                  >
                    <social.icon
                      className='text-text-soft-400 group-hover:text-text-sub-600 size-5 transition-colors'
                      aria-hidden='true'
                    />
                  </Link>
                ))}
              </div>
            </div>

            <p className='text-label-sm text-text-soft-400 w-full shrink-0 lg:w-auto lg:text-right'>
              © 2025 AlignUI — All rights reserved
            </p>
          </div>

          <p
            className='text-bg-weak-50 pointer-events-none h-[96px] w-full text-center text-[132px] leading-[132px] font-medium tracking-[-3.432px] select-none lg:h-[232px] lg:text-[372px] lg:leading-[372px] lg:tracking-[-9.672px]'
            aria-hidden='true'
          >
            APEX
          </p>
        </div>
      </div>
    </footer>
  );
}