import Link from 'next/link';

import { MedReportLogo } from '@/components/med-report-title';
import { ArrowRightIcon } from 'lucide-react';

import { CtaButton, Hero } from '@kit/ui/marketing';
import { Trans } from '@kit/ui/trans';

import { withI18n } from '~/lib/i18n/with-i18n';

function Home() {
  return (
    <div className={'mt-4 flex flex-col space-y-24 py-14'}>
      <div className={'container mx-auto'}>
        <Hero
          title={<MedReportLogo />}
          subtitle={
            <span>
              <Trans i18nKey={'marketing:heroSubtitle'} />
            </span>
          }
          cta={<MainCallToActionButton />}
        />
      </div>
    </div>
  );
}

export default withI18n(Home);

function MainCallToActionButton() {
  return (
    <div className={'flex space-x-4'}>
      <CtaButton>
        <Link href={'/auth/sign-up'}>
          <span className={'flex items-center space-x-0.5'}>
            <span>
              <Trans i18nKey={'common:getStarted'} />
            </span>

            <ArrowRightIcon
              className={
                'animate-in fade-in slide-in-from-left-8 h-4' +
                ' zoom-in fill-mode-both delay-1000 duration-1000'
              }
            />
          </span>
        </Link>
      </CtaButton>

      <CtaButton variant={'link'}>
        <Link href={'/register-company'}>
          <Trans i18nKey={'account:createCompanyAccount'} />
        </Link>
      </CtaButton>
    </div>
  );
}