import { FaBriefcase, FaHeart, FaStar, FaUserGraduate, FaVuejs } from 'react-icons/fa';
import { StyledAbout } from '../components/styles/About.styled';
import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
import { StyledCursor } from '../components/styles/Cursor.styled';
import { SiNestjs } from 'react-icons/si';

import { useGSAP } from '@gsap/react';
import { gsap } from 'gsap';
import { Trans, useTranslation } from 'react-i18next';

function AboutSection() {
  const { t } = useTranslation();

  useGSAP(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '.about-grid'
      }
    });

    tl.from('.about-gif', { opacity: 0 });
    tl.from('.about-content', { opacity: 0 });
    tl.from('.stat-item', {
      duration: 0.5,
      ease: 'power1.in',
      opacity: 0,
      stagger: {
        each: 0.5
      }
    });
  });

  return (
    <StyledAbout id="about">
      <div className="about-grid">
        <div className="about-gif">
          <img src="hello-world.gif" alt="" />
        </div>

        <div className="about-content">
          <StyledSectionHeader>
            <div>
              {t('about.title-1') + ' '}
              <span className="text--accent" style={{ position: 'relative' }}>
                {t('about.title-2')}
                <StyledCursor />
              </span>
            </div>
          </StyledSectionHeader>

          <h2>{t('about.subtitle')}</h2>

          <p>
            <Trans i18nKey="about.content">
              <a href="https://web.td2.info.pl/pl" target="_blank"></a>
              <a href="https://web.td2.info.pl/en" target="_blank"></a>
            </Trans>
          </p>
        </div>
      </div>

      <div className="about-stats">
        <div className="stat-item">
          <div className="stat-item-icon">
            <FaStar size={35} color="gold" />
          </div>

          <h2>{t('about.brief-1-title')}</h2>

          <div className="stat-item-text">{t('about.brief-1-content')}</div>
        </div>

        <div className="stat-item">
          <div className="stat-item-icon">
            <FaUserGraduate size={35} color="#1e6dcc" />
          </div>

          <h2>{t('about.brief-2-title')}</h2>

          <div className="stat-item-text">{t('about.brief-2-content')}</div>
        </div>

        <div className="stat-item">
          <div className="stat-item-icon">
            <FaBriefcase size={35} color="gray" />
          </div>

          <h2>{t('about.brief-3-title')}</h2>

          <div className="stat-item-text">{t('about.brief-3-content')}</div>
        </div>

        <div className="stat-item">
          <div className="stat-item-icon">
            <FaHeart size={35} color="firebrick" />
          </div>

          <h2>{t('about.brief-4-title')}</h2>

          <div className="stat-item-text">
            <div>
              <FaVuejs size={30} color="seagreen" /> Vue
            </div>
            <div>
              <SiNestjs size={30} color="#fc466b" /> NestJS
            </div>
          </div>
        </div>
      </div>
    </StyledAbout>
  );
}

export default AboutSection;
