'use client';
import { TechnologiesInfiniteLoop } from '@/src/components/builder/technologies/TechnologiesInfiniteLoop';
import { Layout } from '@/src/components/common/Layout';
import { getUniqueFrameworkIcons } from '@/src/components/icons/FrameworkIcons';
import { useMemo } from 'react';

export default function Page() {
  const icons = useMemo(() => getUniqueFrameworkIcons('w-[60px] h-[60px] object-contain mx-1'), []);

  return (
    <Layout>
      <div className='flex flex-col items-center gap-5 justify-center h-full px-4 overflow-hidden w-full' id='home'>
        <div className='relative group flex flex-col items-center justify-center w-full max-w-full'>
          <h1 className='text-3xl md:text-4xl lg:text-7xl text-neutral-800 font-bold text-center'>
            Build your portfolio easily and fast!
          </h1>
          <p className='text-neutral-800 text-base md:text-lg lg:text-2xl text-center mt-2'>
            Deploy projects using these technologies!
          </p>
        </div>
        <div className='hover:border-neutral-400 relative w-full max-w-[1366px] overflow-hidden'>
          <TechnologiesInfiniteLoop
            icons={icons}
            technologies={Object.keys(icons)}
            styling={{ backgroundColor: 'transparent' }}
            className='logos-home'
          />
        </div>
      </div>
    </Layout>
  );
}
