import { t } from 'i18next';
import useDarkMode from '../utils/hooks/useDarkMode';

const Home = () => {
  const [isDark] = useDarkMode();
  return (
    <>
      <section
        id="homePage"
        className="flex flex-col-reverse justify-center sm:flex-row p-6 items-center gap-8"
      >
        <article className="sm:w-1/2">
          <h4 className="max-w-lg text-nafithBlueColor-500 ">{t('HOME_PAGE_SLOGN')} </h4>
          <h3 className="max-w-xl text-4xl font-bold  sm:text-5xl   text-nafithBlueColor-500 dark:text-white">
            <div className="text-nafithBlueColor-500 dark:text-sky-600">{t('HOME_PAGE_TITLE')}</div>
          </h3>
          <div className="max-w-lg text-5xs mt-4 text-nafithBlueColor-500 dark:text-white text-justify">
            {t('HOME_PAGE_PARAGRAPH')
              .split('\n')
              .map((line, index) => (
                <p key={index}>{line}</p>
              ))}
          </div>
        </article>
        <img className="w-1/2" src={`/img/others/homepage_${isDark ? 'dark' : 'light'}.png`} alt="eWaybill" />
      </section>
    </>
  );
};

export default Home;
