import { FaEnvelope, FaGithub } from 'react-icons/fa';
import TechScroller from '../components/TechScroller';
import Logo from '../components/Logo';
import {
  StyledBrandName,
  StyledLinkIcon,
  StyledLanding,
  StyledLandingWrapper,
  StyledLinkIcons,
  StyledLandingRight,
} from '../components/styles/Landing.styled';
import { useEffect, useRef } from 'react';
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
import { useTranslation } from 'react-i18next';

export default function LandingSection() {
  const container = useRef<HTMLElement>(null);

  useGSAP(() => {
    gsap.to('.logo', { opacity: 1 });
    gsap.to('.greeting', { opacity: 1, delay: 0.75 });
    gsap.to('.description', { opacity: 1, delay: 1.25 });
    gsap.to('.icons', { opacity: 1, delay: 1.25 });
    gsap.to('.landing_tech', { opacity: 1, delay: 1.75 });
  });

  useEffect(() => {
    // const splittedDesc = container.current!.querySelector('.description');
    // console.log(splittedDesc?.textContent);
  }, []);

  const { t } = useTranslation();

  return (
    <StyledLanding id="landing" ref={container}>
      <StyledLandingWrapper>
        <div className="landing_main">
          <div className="logo">
            <Logo />
          </div>
          <StyledLandingRight>
            <b className="greeting">{t('landing.greeting')}</b>

            <StyledBrandName>
              <b className="text--gradient">SPYTHERE://</b>
            </StyledBrandName>

            <div className="description">{t('landing.sub')}</div>

            <StyledLinkIcons className="icons">
              <StyledLinkIcon href="https://github.com/Spythere" target="_blank">
                <FaGithub />
              </StyledLinkIcon>
              <StyledLinkIcon href="mailto:spythere@proton.me">
                <FaEnvelope />
              </StyledLinkIcon>
            </StyledLinkIcons>
          </StyledLandingRight>
        </div>

        <div className="landing_tech">
          <h3>{t('landing.tech-title')}</h3>
          <hr />

          <TechScroller />
        </div>
      </StyledLandingWrapper>
    </StyledLanding>
  );
}
