import React, { useEffect } from 'react';
import Map from '../components/integrations/GoogleMaps/Map';
import HighlighedText from '../components/shared/HighlighedText';
import PageTitle from '../components/shared/PageTitle';
import CountdownTimer from '../components/shared/Timer/CountdownTimer';
import PageLayout from '../layout/PageLayout';
import Wrapper from '../layout/Wrapper';
import Networking from './../assets/openday/networking.svg';
import Message from './../assets/openday/message.svg';
import Food from './../assets/openday/food.svg';
import VideoGame from './../assets/openday/videogame.svg';
import Prize from './../assets/openday/prize.svg';
import location from './../assets/openday/location.svg';

const url = 'https://mailchi.mp/dilig.net/opendayform';

const OpenDay = () => {
  const EventDate = new Date('Oct 26, 2022 17:00:00').getTime();

  useEffect(() => {
    document.title = 'Diligent Open Day';
  }, []);

  return (
    <PageLayout>
      <div className="pt-32 text-center">
        <Wrapper>
          <PageTitle color heading={'Open Day'} subheading={'Diligent Meet up'} pb />
          <h3 className="py-2">Meet our team of Diligent Minds</h3>
          <h3 className="h3-heading text-dg-secondary py-2">October 26, 5 PM, Niš</h3>
          <div className="w-full flex justify-center py-90p">
            <a
              // onClick={event => scrollToView(event)}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="btn-primary px-64p py-20p lg:w-max whitespace-nowrap"
            >
              Register
            </a>
          </div>
          <div className="py-4">
            <CountdownTimer targetDate={EventDate} />
          </div>

          <h3 className="h3-heading text-dg-secondary py-32p">Join us!</h3>

          <p className='py-32p'>Our doors are (always) open</p>

          <p>

            What we are doing while we are not working? What is Diligent core domain expertise and how it looks like working in an inspiring and encouraging environment? Join us and get to know a team of diligent minds. You will have a chance to hear in which technologies we are experts and what projects we are working on. If you want to check out what are our values and how does our process of selection looks like, you are more than welcome! That’s not everything, you will enjoy playing games, networking, and having fun. We have prepared some snacks, food, and drink, and of course special rewards!

          </p>

          <h3 className="h3-heading text-dg-secondary pb-32p pt-90p">Check out our Schedule</h3>

          <div className='flex justify-center w-full py-32p'>
          <table className="table-auto text-italic-title-mobile font-medium">
            <tbody>
              <tr className=''>
              <td className='p-4'>17:00-17:30 </td>
              <td className='p-4 text-dg-primary-900'>Check-In</td>
              </tr>
              <tr>
              <td className='p-4'>17:30-17:45</td>
              <td className='p-4 text-dg-primary-900'>Opening</td>
              </tr>
              <tr>
              <td className='p-4'>17:45-18:45</td>
              <td className='p-4 text-dg-primary-900'>Meet Diligent</td>
              </tr>
              <tr>
              <td className='p-4'>19:00-21:00</td>
              <td className='p-4 text-dg-primary-900'>Diligent Quiz</td>
              </tr>

              <tr>
              <td className='p-4'>21:00</td>
              <td className='p-4 text-dg-primary-900'>Closing</td>
              </tr>
            
            </tbody>
          </table>
          </div>

         


          <div className='py-90p'>
            <div className="flex flex-col md:flex-row md:w-3/5 py-8 m-auto justify-between gap-8">
              <div className='flex flex-col justify-center align-middle gap-4'>
                <img src={Message} className='h-[100px] md:h-[150px]' />
                <p>Get to know Diligent</p>
              </div>
              <div className='flex flex-col justify-center align-middle gap-4'>
                <img src={VideoGame} className='h-[100px] md:h-[150px]' />
                <p>Interactive games</p>
              </div>
              <div className='flex flex-col justify-center align-middle gap-4'>
                <img src={Food} className='h-[100px] md:h-[150px]' />
                <p>Food & Drink</p>
              </div>
            </div>
            <div className="flex flex-col md:flex-row  md:w-2/5 w-4/5 py-8 m-auto justify-between gap-8">
              <div className='flex flex-col justify-center align-middle gap-4'>
                <img src={Networking} className='h-[100px] md:h-[150px]' />
                <p>Networking</p>
              </div>
              <div className='flex flex-col justify-center align-middle gap-4'>
                <img src={Prize} className='h-[100px] md:h-[150px]' />
                <p>Prizes</p>
              </div>
            </div>
          </div>


          <div>
            <h3 className="h3-heading text-dg-secondary py-32p">Who we are</h3>

            <p className='md:w-3/5 m-auto'>
              We are a team of diligent, creative, and dedicated minds who are always open to new pieces of our giant puzzle. As a modern software development company, we build high-quality custom software solutions while cultivating a work environment that promotes community, family, learning, and mentoring.
            </p>

            <p className='md:w-3/5 m-auto'>
              By utilizing cutting-edge technologies, our agile teams provide a
              combination of product & technology strategies to help our clients become
              more engaging, responsive, and efficient. We can proudly say that we have
              been cooperating with our largest clients from the American market for
              almost a decade. Our core industries are fintech, healthcare, and
              transportation.
            </p>

            <section
              id="highlight"
              className="flex flex-col items-center justify-center w-3/5 m-auto py-32p"
            >
              <HighlighedText
                text={'Diligent has close to 100 employees located throughout Serbia.'}
              />
            </section>

            <p className='w-3/5 m-auto py-32p'>
              We understand that investing in long-term customer relationships is
              essential, but we also recognize the importance of providing rewarding and
              challenging careers for our employees.
            </p>
          </div>

          <div className='flex gap-2 m-auto justify-center py-20p'>
            <img src={location} />
            <a
              target="_blank"
              rel="noopener noreferrer"
              className="text-dg-primary-900 font-semibold text-title-24 lg:w-max whitespace-nowrap"
              href='https://www.google.com/maps/place/Diligent+Software/@43.3078669,21.9108848,16.25z/data=!4m5!3m4!1s0x4755b13c6411e133:0xe026a5711c5df85b!8m2!3d43.3091417!4d21.9108349'>
              Zetska 36, Nis
            </a>
          </div>


        </Wrapper>
      </div>
    </PageLayout>
  );
};

export default OpenDay;