import { PageLayout } from '@/components/common/PageLayout';
import { Button } from '@/components/ui/button';
import { FaGithub, FaGitlab, FaRocket, FaUserGraduate } from 'react-icons/fa';
import { IoLogoVercel } from 'react-icons/io5';
import { UserService } from '@/src/services/UserService';

export default function DeploymentsJoin() {
  return (
    <PageLayout title='Connect your Vercel account' backButton={false}>
      <div className='flex flex-col gap-6 items-center mx-auto'>
        <div className='text-center space-y-4 w-full'>
          <h1 className='text-4xl font-bold text-neutral-200'>Show off your code with Vercel</h1>
          <p className='text-xl text-neutral-400 mx-auto'>
            Turn your Git repositories into live websites. Impress recruiters with real demos.
          </p>
        </div>

        <div className='grid grid-cols-1 md:grid-cols-2 gap-6 w-full'>
          <BenefitCard
            icon={<FaRocket className='text-blue-400' />}
            title='Quick Deployment'
            description='Get your projects online in minutes without dealing with complex hosting setups'
          />
          <BenefitCard
            icon={<FaUserGraduate className='text-purple-400' />}
            title='Portfolio Ready'
            description='Add professional live demos to your portfolio site with just a few clicks'
          />
        </div>

        <div className='bg-neutral-200 p-6 rounded-lg w-full text-center text-neutral-800'>
          <h2 className='text-2xl font-bold mb-4'>Connect with your existing repositories</h2>
          <div className='flex justify-center space-x-8 mb-4'>
            <FaGithub className='text-black w-[40px] h-[40px] hover:scale-110 transition-transform' />
            <FaGitlab className='text-[#FC6D27] w-[40px] h-[40px] hover:scale-110 transition-transform' />
          </div>
          <p className='text-neutral-700'>Easily deploy projects from your GitHub or GitLab repositories</p>
        </div>

        <div className='bg-neutral-200 rounded-lg w-full text-neutral-800 p-6'>
          <h2 className='text-2xl font-bold mb-4 text-center'>Why live demos matter for your career</h2>
          <ul className='space-y-3 text-neutral-600 max-w-2xl mx-auto'>
            <li className='flex items-start'>
              <span className='text-green-400 mr-2 font-bold'>✓</span>
              <span>
                Recruiters spend less than 1 minute reviewing most portfolios - make yours memorable with working demos
              </span>
            </li>
            <li className='flex items-start'>
              <span className='text-green-400 mr-2 font-bold'>✓</span>
              <span>Show that you understand the full development cycle, from coding to deployment</span>
            </li>
            <li className='flex items-start'>
              <span className='text-green-400 mr-2 font-bold'>✓</span>
              <span>Stand out among other junior developers who only have GitHub links</span>
            </li>
            <li className='flex items-start'>
              <span className='text-green-400 mr-2 font-bold'>✓</span>
              <span>Demonstrate your projects work in real-world environments, not just locally</span>
            </li>
          </ul>
        </div>

        <Button
          onClick={() => UserService.connectToVercel()}
          className='group bg-black hover:bg-neutral-900 text-white px-8 py-6 rounded-lg text-xl font-medium transition-all hover:shadow-lg hover:shadow-blue-500/20 flex items-center gap-3'
        >
          <IoLogoVercel className='text-2xl group-hover:rotate-12 transition-transform' />
          <span>Get Your Projects Online</span>
          <span className='group-hover:translate-x-1 transition-transform'>→</span>
        </Button>
        <p className='text-neutral-400 text-center'>Free for personal projects.</p>
      </div>
    </PageLayout>
  );
}

function BenefitCard({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
  return (
    <div className='bg-neutral-200 p-6 rounded-lg transition-colors border text-neutral-900 border-neutral-700 hover:border-neutral-300'>
      <div className='text-3xl mb-3'>{icon}</div>
      <h3 className='text-xl font-bold mb-2'>{title}</h3>
      <p className='text-neutral-700'>{description}</p>
    </div>
  );
}
