import { useTranslations } from 'next-intl';
import { Divider } from '@nextui-org/react';
import PaneMainTitle from './PaneMainTitle';
import PaneMainFeatures from './PaneMainFeatures';
import PaneDemoImages from './PaneDemoImages';

export default function Home(params: { locale: string }) {
  const t = useTranslations('Index');

  const messages = {
    title: t('organize_test_cases'),
    caseEdit: t('case_edit'),
    caseHome: t('case_home'),
    caseRun: t('case_run'),
  };

  return (
    <section className="mx-auto max-w-screen-xl my-12">
      <div className="flex flex-wrap">
        <div className="w-full md:w-7/12 order-last md:order-first p-4">
          <PaneMainTitle locale={params.locale} />
        </div>

        <div className="w-full md:w-5/12 p-4">
          <div
            style={{
              position: 'relative',
              textAlign: 'center',
            }}
          >
            <span
              style={{
                fontSize: '10rem',
                position: 'relative',
                zIndex: 1,
              }}
            >
              📋
            </span>
            <div
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                filter: 'blur(48px)',
                zIndex: 0,
                background: 'linear-gradient(to bottom, #ffecd2, #fcb69f)',
              }}
            ></div>
          </div>
        </div>
      </div>

      <div
        className="flex flex-wrap flex-col items-center"
        style={{
          marginTop: '6rem',
        }}
      >
        <PaneMainFeatures />
      </div>

      <Divider className="my-12" />
      <PaneDemoImages messages={messages} />

      <Divider className="my-12" />
      <div className="w-full text-center py-2">
        <div>Copyright © 2024 UnitTCMS</div>
      </div>
    </section>
  );
}
