import { useState, useEffect } from 'react';
import axios from 'axios';

import Img1 from '../assets/images/Careers/img1.png';
import Img2 from '../assets/images/Careers/img2.png';
import Img3 from '../assets/images/Careers/img3.png';
import Img4 from '../assets/images/Careers/img4.png';

import CardsGrid from '../components/CardsGrid';

import Animation_Diligent from '../assets/animation_diligent.webm';
import Wrapper from '../layout/Wrapper';
import PageTitle from '../components/shared/PageTitle';
import HighlighedText from '../components/shared/HighlighedText';
import CardValues from '../components/shared/CardValues';
import CardLife from '../components/shared/CardLife';
import ActionCard from '../components/shared/ActionCard';
import AboutUsSlider from '../components/shared/AboutUsSlider';
import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
import PageLayout from '../layout/PageLayout';
import TimelineCard from '../components/TimelineCard';
//import useAnalytics from '../hooks/useAnalytics';

// eslint-disable-next-line no-underscore-dangle
const _data = {
  heading: {
    heading: 'Join Our Team of Diligent Minds',
    subheading: 'Careers',
  },
  life: {
    heading: 'A Culture That’s Serious About Work and Fun',
    subheading: 'Diligent life',
    italic: {
      heading: 'Life At diligent',
      paragraph:
        'From the start, you can expect to be challenged and supported. We provide a encouraged atmosphere with knowledgeable mentors to help you advance in your career.  To create an inspiring work life, we collaborate as a team both inside and outside of the office.',
      heading2: 'What It Means to Work With Us',
    },
    cards: [
      {
        id: 1,
        title: 'Shape the Future',
        paragraph:
          'We collaborate with business leaders and entrepreneurs to disrupt and push their industries forward. From startup ideas to enterprise-level product & software development, we work together as a team to transform our clients’ ideas into reality.',
      },
      {
        id: 2,
        title: 'Life-Long Learning',
        paragraph:
          'We believe that learning is a journey that never ends. With us, you will have the opportunity to continuously learn in an environment surrounded by other highly skilled professionals with decades of experience.  Also, there are several chances for you to develop through the use of various technologies, involvement in the product definition process, conference attendance, and more.',
      },
      {
        id: 3,
        title: 'A Unique Culture',
        paragraph:
          'Everyone talks about a work-life balance, we do it - for two reasons. Firstly, we believe in an environment of happy people. Secondly, even if you’re highly productive, the only way to maintain productivity long-term is by taking time for the things that make you happy.',
      },
      {
        id: 4,
        title: 'Make the Impossible Better',
        paragraph:
          "If you have a mindset that is continuously focused on pushing through and beyond your boundaries, conquering a whole new challenge every day in an atmosphere where you constantly learn and improve, this is the place for you. We'd love to learn more about you.",
      },
    ],
  },
  ActionCard: {
    heading: 'Step up Your Career!',
    paragraph:
      'We are continuously on the lookout for talented people to grow our business.',
    primaryBtn: 'Apply',
    secondaryBtn: 'About Us',
  },
};

export default function Careers({ forwardedRef }) {
  const [clickedPosition, setClickedPosition] = useState('');
  const [cntCareers, setCntCareers] = useState('');
  const [isLoaded, setIsLoaded] = useState('');

  const api_url = process.env.REACT_APP_API_URL;

  useEffect(() => {
    document.title = 'Careers';
  }, []);

  //useAnalytics();

  useEffect(async () => {
    var vid = document.getElementById('animation');
    vid.playbackRate = 2;
    axios
      .get(
        `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
      )
      .then(res => {
        //console.log(res.data.data.attributes);
        setCntCareers(res.data.data.attributes);
        setIsLoaded(true);
      })
      .catch(err => {
        console.log(err);
        setIsLoaded(false);
      });
  }, []);

  if (!isLoaded) {
    return (
      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
        <video id="animation" width="540" height="540" autoPlay muted loop>
          <source src={Animation_Diligent} type="video/webm" />
          Loading...
        </video>
      </div>
    );
  }

  return (
    <PageLayout>
      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
        {/* Diligent Life */}
        <Wrapper padding={' py-90p'}>
          <PageTitle
            left
            heading={_data.life.heading}
            subheading={_data.life.subheading}
          />

          <div className="my-20p">
            <div>
              <p className="paragraph">{_data.life.italic.paragraph}</p>
              <div className="w-full pt-72p">
                <iframe
                  className="m-auto w-[300px] h-[180px] md:w-[500px] md:h-[400px] lg:w-[960px] lg:h-[540px]"
                  src="https://www.youtube.com/embed/PFHIqqHRS4s?controls=0&autoplay=0&mute=1"
                  title="YouTube video player"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                ></iframe>
              </div>
            </div>
          </div>
        </Wrapper>

        {/* Left-Right Content */}
        <Wrapper bg padding={' py-90p'}>
          {/* Shape The Future */}
          <section
            id="challanges_solution"
            className="flex flex-col items-center justify-center mt-16"
          >
            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
              <div className="w-full md:w-1/2 md:pr-16">
                <div>
                  <h3 className="h3-heading">{_data.life.cards[0].title}</h3>
                  <p className="text-sm text-dark-gray dark:text-white mt-4">
                    {_data.life.cards[0].paragraph}
                  </p>
                </div>
              </div>
              <img
                src={Img1}
                alt="Case Study main image"
                className="text-center w-full md:w-1/2"
              />
            </div>
          </section>

          {/* Shape The Future */}
          <section
            id="challanges_solution"
            className="flex flex-col items-center justify-center mt-16"
          >
            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
              <img
                src={Img2}
                alt="Case Study main image"
                className="text-center w-full md:w-1/2"
              />
              <div className="w-full md:w-1/2 md:pl-16">
                <div>
                  <h3 className="h3-heading">{_data.life.cards[1].title}</h3>
                  <p className="text-sm text-dark-gray dark:text-white mt-4">
                    {_data.life.cards[1].paragraph}
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* Shape The Future */}
          <section
            id="challanges_solution"
            className="flex flex-col items-center justify-center mt-16"
          >
            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
              <div className="w-full md:w-1/2 md:pr-16">
                <div>
                  <h3 className="h3-heading">{_data.life.cards[2].title}</h3>
                  <p className="text-sm text-dark-gray dark:text-white mt-4">
                    {_data.life.cards[2].paragraph}
                  </p>
                </div>
              </div>
              <img
                src={Img3}
                alt="Case Study main image"
                className="text-center w-full md:w-1/2"
              />
            </div>
          </section>

          {/* Shape The Future */}
          <section
            id="challanges_solution"
            className="flex flex-col items-center justify-center mt-16"
          >
            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
              <img
                src={Img4}
                alt="Case Study main image"
                className="text-center w-full md:w-1/2"
              />
              <div className="w-full md:w-1/2 md:pl-16">
                <div>
                  <h3 className="h3-heading">{_data.life.cards[3].title}</h3>
                  <p className="text-sm text-dark-gray dark:text-white mt-4">
                    {_data.life.cards[3].paragraph}
                  </p>
                </div>
              </div>
            </div>
          </section>
        </Wrapper>

        {/* Action Card */}
        <Wrapper>
          <div className="my-90p">
            <ActionCard
              title={_data.ActionCard.heading}
              text={_data.ActionCard.paragraph}
              btn1={_data.ActionCard.primaryBtn}
              btn2={_data.ActionCard.secondaryBtn}
              link1={'/contact'}
              link2={'/about'}
            />
          </div>
        </Wrapper>
      </div>
    </PageLayout>
  );
}
