import Contact from '../components/shared/Contact';

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

import Animation_Diligent from '../assets/animation_diligent.webm';
import HighlighedText from '../components/shared/HighlighedText';
import CardValues from '../components/shared/CardValues';

import Care from './../assets/icons/values/care.svg';
import Doing from './../assets/icons/values/doing.svg';
import Culture from './../assets/icons/values/culture.svg';
import Ideas from './../assets/icons/values/ideas.svg';

import NisExpress from '../assets/NE_large_logo.png';

import Djole from './../';
import valuesBG from './../assets/ValuesBG.svg';
import TimelineCardsWrapper from '../components/TimelineWrapper';
import TimelineCard from '../components/TimelineCard';
import PageTitle from '../components/shared/PageTitle';
import Wrapper from '../layout/Wrapper';
import TimelineCardsWrapper2 from '../components/TimelineWrapper2';
import TimelineLogo from '../components/TimelineLogo';
import PageLayout from '../layout/PageLayout';
const _data = {
  heading: {
    subheading: 'About Us',
    heading: 'Who We Are',
    imgUrl:
      'https://lh6.googleusercontent.com/nCX_ne2JiqAAQqxF2ObEIA6EmP_cl6BciWQUqGaIzrgvv83Eo4nhzcqyZw_pYNxnByo=w2400',
    paragraph:
      'When ten enthusiasts came together in 2020 with the same vision and impactful goals our journey officially began. We believed that taking small steps could result in meaningful changes and help us succeed in areas of a global pandemic and rapid social changes.',
  },
  segment1: {
    paragraph:
      'Diligent Software is a collaborative software development team that delivers high-quality custom software solutions while also cultivating a work environment that promotes community, family, learning, and mentoring.',
    imgUrl:
      'https://lh5.googleusercontent.com/YD0JCH9v2hZ2_M42T7QD4U1CbTPolaelasj0SJF8kDQQiuRFmO9lLukjxfBqg5dxHsY=w2400',
  },
  segment2: {
    paragraph:
      'By utilizing cutting-edge technologies, our agile, multi-disciplinary teams provide a combination of product & technology strategies, intelligent experiences, and world-class engineering to help our clients become more engaging, responsive, and efficient.',
    imgUrl:
      'https://lh6.googleusercontent.com/WEoQNbjwT9EpeG2kM4pvdeJM4MwFoEnSj2Dn0e3vPM54iN6P911_Y0wAXvSsbspd3Lg=w2400',
  },
  subtitle: 'Diligent has close to 100 employees located throughout Serbia.',
  subtitleImgUrl:
    'https://lh5.googleusercontent.com/Nk7pWU1H028YvdMkXvH6CECmQVWtTuKpKQuTUTKzUVXfhCF1JAjXThy1585YnXYdWio=w2400',
  italicParagraph:
    '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.',
  segment3: {
    mission: {
      title: 'Our Vision',
      imgUrl:
        'https://lh5.googleusercontent.com/IdGSbzSZ8fRwwkP43Lkzm3fQBRGqywFNpfi2Qe2bkstNXunQGM1zVFrdX4blaiSGuEM=w2400',
      paragraphs: [
        {
          paragraph:
            'Our vision is to be a leading software solutions company for a variety of industries. We believe that our growth is directly related to the success of our customers, so we are dedicated to helping them achieve their business goals. ',
        },
        {
          paragraph:
            'We want to be known as a reliable, innovative, and top-quality software service provider in the IT industry. We are constantly striving to exceed the expectations of our customers and to be the best in our field. ',
        },
      ],
    },
    vision: {
      title: 'Our Mission',
      imgUrl:
        'https://lh3.googleusercontent.com/gqO6y406jsrU5mt2c2rcbZS-2Z6Q9rg2zxHQ576LExMo1ptRx-SVZj2iAkR1wg2lNF0=w2400',
      paragraphs: [
        {
          paragraph:
            'Our mission is to help our customers grow their businesses through creative design and development solutions. We strive to deliver market-defining high-quality solutions that create value and competitive advantage for our customers around the world.',
        },
        {
          paragraph:
            'We are dedicated to providing our clients with the best possible service and continually improving our processes and capabilities to better meet their needs. ',
        },
      ],
    },
  },
  values: {
    heading: 'Values',
    cards: [
      {
        id: 0,
        iconUrl: Care,
        title: 'Care',
        paragraph:
          'We believe that by working together and being kind to one another, we can make a difference. We care about work colleagues, ourselves, partnerships, but also the planet. We constantly strive to be helpful, kind, and inclusive in everything we do and looking for ways to be more sustainable. ',
      },
      {
        id: 1,
        iconUrl: Culture,
        title: 'Culture',
        paragraph:
          'Our people love what they do. We provide a fun and supportive environment that empowers our staff to grow, learn, and thrive. We are consistent and transparent in our actions and committed to our clients and colleagues. We believe that together we can achieve more.',
      },
      {
        id: 2,
        iconUrl: Doing,
        title: 'Learn by Doing',
        paragraph:
          'Our legacy is our impact on the people around us. By being kind and helping others, we can make a positive difference and leave a lasting impression. We grow as individuals, as well as we grow as a team.',
      },
      {
        id: 3,
        iconUrl: Ideas,
        title: 'Ideas Over Hierarchy',
        paragraph:
          'We believe that the best ideas can come from anywhere, both inside and outside our company. Our job is to seek out those ideas, shape and improve them through candid debate, and take them from concept to action.',
      },
    ],
  },

  partners: {
    title: 'Partners',
    paragraph:
      "We collaborate with Fortune 500 companies, innovative start-ups, and established industry leaders. We deliver specialized software solutions and services that enable businesses to expand and face tomorrow's problems by combining world-class engineering teams, sector knowledge, and technical experts.",
    icons: [
      'https://lh4.googleusercontent.com/e5Zf5H4bL-6N4R7TOJIlB7hAPzzIk41dnWlCvJDZKAWyyjbJ_kWmONzHqddi11rb_SA=w2400',
      'https://lh6.googleusercontent.com/4QxTBdL0JdRHjbujuHSEO9ysyQL7N64bykQm4DutzoAB0MOIYBODgShJ9uSChiI1kHo=w2400',
      NisExpress,
      'https://lh6.googleusercontent.com/8TrErMJ6QyxdwhmM57Oiy-41Db7thyvaHmGfb4teaFiYKWFVDd3reL1Ok1T88nAgvaE=w2400',
      'https://lh4.googleusercontent.com/D05_HBhHcJf8Rpbxf7Uc4ix_J4advqIFM6Rwe-Vd9huTQCt2JKocAKqAf_AwszThr2Y=w2400',
    ],
  },
  industries: {
    title: 'Industries',
    industries: [
      {
        title: 'Fintech',
        paragraph:
          'We help fintech startups and financial institutions to manage risk and stay ahead of the curve by developing financial software solutions and integrating them with third-party systems while ensuring the stable operation of financial systems.',
        imgUrl:
          'https://lh6.googleusercontent.com/hNzi8UOWwAYzL9ZFR5bPnhge1RCIPgaFDwvZ-Cz7jaIRzKOySxZi2duV5-plTpGczLE=w2400',
      },
      {
        title: 'Healthcare',
        paragraph:
          'We provide the healthcare sector with seamless transitions from an offline business to a tailored digital platform. All with the assistance of cutting-edge technology to enhance the user experience and improve health care delivery.',
        imgUrl:
          'https://lh4.googleusercontent.com/8xQPhJ2FZrTFamSUf2EkpL_vsvjAFymUEEX4PWF-R4Mhznt6vo2kkYCHY4gZCF5XjYs=w2400',
      },
    ],
  },
  timeline: {
    subtitle: 'our journey',
    title: 'Timeline of Our Growth',
    cards: [
      {
        subtitle: '1st Step',
        title: 'First Year of Our Work',
        paragraph:
          'Our journey began two years ago when a group of ten tech enthusiasts made the decision to put their ideas into practice and accomplish their goals. With more than ten years of technology experience in a variety of industries, including fintech, transportation, and healthcare,  they created a modern company that can deliver solutions tailored to each client. ',
      },
      {
        subtitle: '2nd Step',
        title: 'Choosing our clients',
        paragraph:
          'We strive to build strong partnerships with our clients. We can proudly say that our biggest value is a long-lasting partnership with our very first clients. Good impressions and commitment lead us to the first clients. Furthermore, we continue to build long-term partnerships. ',
      },
      {
        subtitle: '3rd Step',
        title: 'Overcoming hard times',
        paragraph:
          'As the COVID-19 pandemic was taking off, we were extremely impressed by how well our team adapted to the changing circumstances. Diligent’s greatest strengths have always been our team of highly qualified and experienced professionals. Diligent team increased from 35 employees to 67 technology experts.',
      },
      {
        subtitle: '4th Step',
        title: 'Where We Are Today',
        paragraph:
          'We are constantly growing, coding the vision of the future! Today we are about to have 100 employees who diligently work on more than 50 projects, trying to give cutting-edge solutions to the most common and modern problems. Our partnerships with the clients are based on trust and commitment.',
      },
      {
        subtitle: '5th Step',
        title: 'road to future success',
        paragraph:
          'Professional and personal growth and development of our employees are crucial for strengthening our team. We strive hard to offer high-quality education, mentoring, and an inspiring environment where everyone may reach their full potential. This will enable us to progress as a team and achieve our long-term goals.',
      },
    ],
  },
};

export default function About() {
  useEffect(() => {
    document.title = 'About Us';
  }, []);

  return (
    <PageLayout>
      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32">
        {/* Heading Section */}
        <section
          id="heading"
          className="flex flex-col items-center justify-center max-w-custom m-auto"
        >
          <div className="mb-8 flex flex-col md:flex-row justify-start items-start w-full px-8 xl:px-0">
            <div className="w-full md:w-1/2 md:pr-16">
              <h6 className="subheading">{_data.heading.subheading}</h6>
              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
            </div>
            <img
              src={_data.heading.imgUrl}
              alt="Our Team's image"
              className="w-full md:w-1/2 text-center"
            />
          </div>
        </section>

        {/* The After Heading pt.1 Section */}
        <section
          id="after_heading"
          className="bg-white dark:bg-dg-primary-1700 flex items-center justify-center px-2"
        >
          <div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center max-w-custom m-auto w-full  px-8 xl:px-0">
            <img
              src={_data.segment1.imgUrl}
              alt="Our Team's image"
              className="w-full md:w-1/2 text-center mt-8 md:mt-0"
            />
            <div className="w-full md:w-1/2 md:pl-16">
              <p className="paragraph mt-4">{_data.segment1.paragraph}</p>
            </div>
          </div>
        </section>

        {/* The After Heading pt.2 Section */}
        <section id="after_heading" className="flex flex-col items-center justify-center">
          <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">
              <p className="paragraph mt-4">{_data.segment2.paragraph}</p>
            </div>
            <img
              src={_data.segment2.imgUrl}
              alt="Office's image"
              className="w-full md:w-1/2 text-center"
            />
          </div>
        </section>

        {/* Highlighted Text Section */}
        <section
          id="highlight"
          className="flex flex-col items-center justify-center mt-16"
        >
          <HighlighedText text={_data.subtitle} />
        </section>

        {/* Info Section */}
        <section id="info" className="flex flex-col items-center justify-center mt-16">
          <div className="flex flex-col items-center justify-center w-full">
            <img
              src={_data.subtitleImgUrl}
              alt="Info image"
              className="max-w-[660px] w-full"
            />
            <p className="text-sm font-medium italic text-gray-500 dark:text-white w-2/3 lg:w-1/3 mt-4">
              {_data.italicParagraph}
            </p>
          </div>
        </section>

        {/* Our Mission & Our Vision Section */}
        <section
          id="mission_vision"
          className="bg-baby-blue dark:bg-dg-primary-1600 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">
              <h2 className="heading text-dg-secondary">{_data.segment3.vision.title}</h2>
              {_data.segment3.vision.paragraphs.map((item, index) => (
                <p key={index} className="paragraph mt-4">
                  {item.paragraph}
                </p>
              ))}
            </div>
            <img
              src={_data.segment3.mission.imgUrl}
              alt="Our mission image"
              className="text-center w-full md:w-1/2"
            />
          </div>
          <div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
            <img
              src={_data.segment3.vision.imgUrl}
              alt="Our vision image"
              className="text-center w-full md:w-1/2 mt-8 md:mt-0"
            />
            <div className="w-full md:w-1/2 md:pl-16">
              <h2 className="heading text-dg-secondary">
                {_data.segment3.mission.title}
              </h2>
              {_data.segment3.mission.paragraphs.map((item, index) => (
                <p key={index} className="paragraph mt-4">
                  {item.paragraph}
                </p>
              ))}
            </div>
          </div>
        </section>

        {/* Values Section */}
        <section
          id="values"
          className="bg-white dark:bg-dg-primary-1700 flex flex-row items-center justify-center mt-16"
        >
          <div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
            <h2 className="heading text-dg-secondary">{_data.values.heading}</h2>
            <div className="absolute justify-center md:flex hidden self-center">
              <img src={valuesBG} alt="Values background" />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
              {_data.values.cards.map((item, index) => (
                <CardValues
                  key={index}
                  image={item.iconUrl}
                  heading={item.title}
                  paragraph={item.paragraph}
                />
              ))}
            </div>
          </div>
        </section>

        {/* Partners Section */}
        <section
          id="partners"
          className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
        >
          <div className="my-16 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
            <div className="w-full md:w-2/3">
              <h2 className="text-center heading text-dg-secondary">
                {_data.partners.title}
              </h2>
              <p className="text-left paragraph mt-4">{_data.partners.paragraph}</p>
            </div>
            <div className="flex flex-row justify-between items-center w-full mt-16">
              {_data.partners.icons.map((item, index) => (
                <img
                  key={index}
                  src={item}
                  alt="Partner's image"
                  className="w-16 md:w-20 lg:w-24"
                />
              ))}
            </div>
          </div>
        </section>

        {/* Industries Section */}
        <section
          id="industries"
          className="bg-white dark:bg-dg-primary-1700 flex flex-col items-center justify-center mt-16"
        >
          <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
            <div className="w-full">
              <h2 className="heading text-dg-secondary">{_data.industries.title}</h2>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
              {_data.industries.industries.map((industry, index) => (
                <div key={index}>
                  <h3 className="h3-heading">{industry.title}</h3>
                  <p className="paragraph mt-2">{industry.paragraph}</p>
                  <img src={industry.imgUrl} alt="Industries images" className="m-auto" />
                </div>
              ))}
            </div>
          </div>
        </section>

        <Wrapper bg padding={' py-90p'}>
          <PageTitle
            heading={_data.timeline.title}
            subheading={_data.timeline.subtitle}
            left
          />

          <div className="my-90p">
            <div className="w-full relative ">
              <div className="md:absolute top-[5%] left-0 w-full h-full hidden md:block">
                <TimelineLogo />
              </div>

              <TimelineCardsWrapper2>
                {_data.timeline.cards.map((item, index) => (
                  <TimelineCard
                    key={index}
                    id={index}
                    title={item.title}
                    subtitle={item.subtitle}
                    paragraph={item.paragraph}
                  />
                ))}
              </TimelineCardsWrapper2>
            </div>
          </div>
        </Wrapper>
      </div>
    </PageLayout>
  );
}
