import React, { useEffect, useState } from 'react';
import Loader from '../components/shared/Loader';
import PageTitle from '../components/shared/PageTitle';
import useFetch from '../hooks/useFetch';
import Wrapper from '../layout/Wrapper';
import ProcessCardsWrapper from '../components/shared/ProcessCardWrapper';
import ProcessCard from '../components/shared/ProcessCard';
import ActionCard from '../components/shared/ActionCard';
import axios from 'axios';

import Animation_Diligent from '../assets/animation_diligent.webm';

import { ReactComponent as ProcessSvg } from './../assets/images/Process.svg';
import { m } from 'framer-motion';
import PageLayout from '../layout/PageLayout';
import ProcessFacelessSlider from '../components/shared/ProcessFacelessSlider';
import useWindowSize from '../hooks/useWindowSize';
import ProcessSlider from '../components/ProcessSlider';

const _data = {
  heading: {
    heading: 'How We Do It?',
    subheading: 'Our Process',
    paragraph:
      'We work with our clients to deliver the full software release lifecycle, from development to final rollout. We understand how important a good process is for success because our team members have deep backgrounds in product development. Our clients can rely on us for a complete software release solution that meets their needs and achieves their desired outcomes.',
  },
  processImg: {
    url: '',
  },
  cards: [
    {
      id: '1',
      title: 'Figure It Out',
      subtitle: "After understanding the company's goals, we build a digital strategy.",
      paragraphs: [
        {
          paragraph:
            'We collaborate with you to comprehend each business possibility associated with your project. Early technological issues are identified, followed by study and solution architecture. Our user-centric methodology yields results that are straightforward and interesting. To better understand your user base, we create Personas, Journey Mapping, and Usability Testing.',
        },
      ],
    },
    {
      id: '2',
      title: 'Solution Design',
      subtitle: 'Align user and business strategies.',
      paragraphs: [
        {
          paragraph:
            'User experience (UX) User research inevitably leads to design. Know your users, their requirements, and their objectives. Our multidisciplinary design team creates system flows, journey maps, annotated wireframes, final UI designs, and click-model prototypes.',
        },
        {
          paragraph:
            "Close communication is essential for success here, and concepts are iterated on both our and your teams. We'll keep optimizing until we have the ideal design that meets your needs and those of your users.",
        },
      ],
    },
    {
      id: '3',
      title: 'Build',
      subtitle: 'Delightful user experiences meet precise engineering.',
      paragraphs: [
        {
          paragraph:
            'Diligent can point you in the direction of the appropriate framework, language, and platform for your project, whether you already have a codebase or you start from scratch. Our talented group of developers includes computer scientists who are proficient in a variety of programming languages.',
        },
        {
          paragraph:
            "We'll assist you in selecting the best technology for your project. We proceed with secure front-end, back-end, and full-stack development after deciding on the optimal strategy.",
        },
      ],
    },
    {
      id: '4',
      title: 'QA Test',
      subtitle: 'Maximum efficiency, zero bugs.',
      paragraphs: [
        {
          paragraph:
            'We take pride in creating quality software. Our code is scalable, reusable, readable, and high performing. We have developed extensive testing processes and standardized Diligent Software Practices thanks to our more than 7 years of expertise in software development with a wide range of projects.',
        },
      ],
    },
    {
      id: '5',
      title: 'Launch',
      subtitle: 'Go Live!',
      paragraphs: [
        {
          paragraph:
            'We are prepared to launch after all sprints have ended and User Acceptance Testing (UAT) has been successful. Hosting is often done with Amazon AWS, which allows us to quickly grow, backup, and manage your application.',
        },
        {
          paragraph:
            'Depending on the nature and complexity of the project, one or several releases may be appropriate. Your time to market will be accelerated in either case by our agile development.',
        },
      ],
    },
    {
      id: '6',
      title: 'Maintain and Improve',
      subtitle: 'Continually optimize and grow.',
      paragraphs: [
        {
          paragraph:
            "We aim to provide long-term support for your program and establish ourselves as a reliable technological partner. We're here to support you while you update, monitor, and manage your app.",
        },
        {
          paragraph:
            'We will work with you to ensure stability and longevity. We also assist with new concepts and features. Allow us to assist you with your plan so you may keep wowing your users, clients, and investors.',
        },
      ],
    },
  ],
  ActionCard: {
    heading: 'Let’s Work Together!',
    paragraph:
      'Business Intelligence portal which enhouses series of web applications & reporting tools used for in-depth analysis on product pricing, money flow, resources, employees, etc. Applications provide administrative users overview, as well as detail look scaled down to individual product.',
    primaryBtn: 'Contact Us',
    secondaryBtn: 'Portfolio',
  },
};

const ProcessPage = () => {
  //const api_url = process.env.REACT_APP_API_URL;
  // const [cntProcess, setCntProcess] = useState('');
  // const [isLoaded, setIsLoaded] = useState('');
  // useEffect(() => {
  //   var vid = document.getElementById('animation');
  //   vid.playbackRate = 2;
  //   async function fetch() {
  //     axios
  //       .get(
  //         `${api_url}/api/process-page`,
  //       )
  //       .then(res => {
  //         setCntProcess(res.data.data.attributes);
  //         //console.log(res.data.data.attributes);
  //         setIsLoaded(true);
  //       })
  //       .catch(err => {
  //         console.log(err);
  //         setIsLoaded(false);
  //       });
  //   }
  //   fetch();
  // }, []);

  // 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>
  //   );
  // }

  const [isMobile, setIsMobile] = useState(false);

  const windowInfo = useWindowSize();

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

  useEffect(() => {
    if (windowInfo.width < 1000) setIsMobile(true);
    else setIsMobile(false);
  }, [windowInfo]);

  return (
    <PageLayout>
      <div className="pt-32">
        {_data.heading.heading && (
          <Wrapper>
            <h1 className="hidden">Our Process - How We Do It?</h1>
            <PageTitle
              left
              color
              heading={_data.heading.heading}
              subheading={_data.heading.subheading}
            />
            {/* <div className="flex justify-center items-center mt-90p overflow-x-auto">
            <div className='w-full' draggable >
                <ProcessSvg className='' />
            </div>
            
          </div> */}
            <div className="relative mx-auto my-32p md:my-90p">
              {!isMobile ? (
                <div className="w-full">
                  <ProcessSvg className="" />
                </div>
              ) : (
                <div className="">
                  <ProcessSlider />
                </div>
              )}
            </div>
            <p className="my-90p">{_data.heading.paragraph}</p>
          </Wrapper>
        )}
        <Wrapper bg padding={' py-90p'}>
          {_data.cards.length > 0 && (
            <ProcessCardsWrapper>
              {_data.cards.map((item, index) => (
                <ProcessCard
                  key={index}
                  id={item.id}
                  title={item.title}
                  subtitle={item.subtitle}
                  text={item.paragraphs}
                  numeric
                />
              ))}
            </ProcessCardsWrapper>
          )}
        </Wrapper>
        <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={'/portfolio'}
            />
          </div>
        </Wrapper>
      </div>
    </PageLayout>
  );
};

export default ProcessPage;
