'use client';

import { Button } from '@workspace/airo-ui/components/button';
import { useTranslations } from 'next-intl';
import { useRef } from 'react';
import OfferDialog, { OfferDialogRef } from './OfferDialog/index';

export default function HomeContent() {
  const dialogRef = useRef<OfferDialogRef>(null);
  const t = useTranslations('components.home');

  return (
    <div className='flex min-h-[calc(100vh-73px)] flex-col items-center justify-center pt-8'>
      {/* 大标题 */}
      <h1 className='mb-6 self-start text-4xl font-bold !leading-tight text-white sm:mb-10 sm:self-center sm:text-6xl'>
        {t('connect')}
        <br />
        {t('anytime')}
        <br />
        {t('anywhere')}
      </h1>
      {/* 副标题 */}
      <div className='mb-12 text-left text-[17px] leading-normal text-white sm:mb-16 sm:text-center sm:font-bold'>
        <p className={'w-[255px] sm:w-full'}>
          <span className='mr-2 text-white'>
            Airo<sup className='text-[8px]'>™</sup>Port
          </span>
          <span>{t('serviceSlogan')}</span>
        </p>
        <p className={'mt-1 w-[255px] sm:mt-0 sm:w-full'}>{t('getSubscription')}</p>
      </div>
      {/* 按钮 */}
      <Button
        onClick={() => dialogRef.current?.show()}
        className='mb-8 h-auto rounded-full border-2 border-white bg-white/10 px-8 py-2 text-lg font-bold text-white transition hover:bg-white/25 sm:py-4 sm:text-2xl'
      >
        {t('viewSubscriptionPlans')}
      </Button>

      <OfferDialog ref={dialogRef} />
    </div>
  );
}