import ActionCard from '../components/shared/ActionCard';
import PageLayout from '../layout/PageLayout';

const technologies = [
  {
    id: 1,
    link: 'https://drive.google.com/uc?export=view&id=1nWXbpkRi72bkx7X7inIG0OvM33n4r2rL',
  },
  {
    id: 2,
    link: 'https://drive.google.com/uc?export=view&id=1Fk55xWgInwK7NCV73EJwkicpR31eREY5',
  },
  {
    id: 3,
    link: 'https://drive.google.com/uc?export=view&id=1IhUF2SnwVJVNLhz40Lrc-YHcGQjkyjej',
  },
  {
    id: 4,
    link: 'https://drive.google.com/uc?export=view&id=1kdRSGh0kRBCwuQbicmXJh9fdBgOugEI9',
  },
  {
    id: 5,
    link: 'https://drive.google.com/uc?export=view&id=1xEIZNe-7nMc32FU-WP_Z6vcctuJMiyMo',
  },
  {
    id: 6,
    link: 'https://drive.google.com/uc?export=view&id=1XjNywQygbZPwiT3QmjqQcU5Du3kWytB3',
  },
  {
    id: 7,
    link: 'https://drive.google.com/uc?export=view&id=1pprmQzgz49XstcyXhNbM0JfeLsU5rZ-2',
  },
  {
    id: 8,
    link: 'https://drive.google.com/uc?export=view&id=1QEiw-Kay797I0EEicpze9ZCYx0qEg4d8',
  },
];

export default function CaseStudy() {
  return (
    <PageLayout>
    <div className="bg-baby-blue dark:bg-dg-primary-1700 w-full pt-20 md:pt-24">
      {/* Heading Section */}
      <section
        id="heading"
        className="flex flex-col items-center justify-center m-auto py-16 md:py-32 bg-[url('https://images.unsplash.com/photo-1619252584172-a83a949b6efd')] bg-fixed bg-cover"
      >
        <div className="my-8 flex flex-col md:flex-row justify-start items-center w-full max-w-custom px-8 xl:px-0">
          <div className="w-full">
            <h6 className="subheading">Case Study</h6>
            <h1 className="heading text-dg-secondary mt-2">BI Healthcare Solution </h1>
            <p className="paragraph mt-4">
              BI Solution that provides an uncommon level of insights into the healing
              process.
            </p>
          </div>
        </div>
      </section>

      {/* About the Client Section */}
      <section id="client" className="flex flex-col items-center justify-center mt-16">
        <div className="my-8 flex flex-col md:flex-row justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
          <div className="w-full md:w-1/2">
            <h3 className="h3-heading text-teal-600">About the Client</h3>
            <p className="paragraph mt-4">
              Healthcare company has a centralized IT solution for tracking every aspect
              of their own business, especially services provided to clients and working
              times of their clinicians in all clinics they own all around the USA.
            </p>
          </div>
          <div className="w-full md:w-1/2 grid grid-cols-2 md:grid-cols-3 gap-16 mt-8 md:mt-0">
            <div className="hidden md:inline-block"></div>
            <div className="float-left md:float-right text-left md:text-right">
              <h5 className="text-teal-600 font-semibold">Country</h5>
              <p className="mt-4">USA</p>
            </div>
            <div className="float-left md:float-right text-left md:text-right">
              <h5 className="text-teal-600 font-semibold">Industry</h5>
              <p className="mt-4">Healthcare</p>
            </div>
          </div>
        </div>
      </section>

      {/* Domain Section */}
      <section id="domain" className="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">
            <h3 className="h3-heading">Domain</h3>
            <p className="paragraph mt-4">
              BI Solution helps clinicians to improve their work and create a wider
              picture of client progress during the healing process. The solution offers
              our customers a high level of insight into their cash flows and workforce
              organization. In one word, this is a fully customizable solution for a
              comprehensive business process.
            </p>
          </div>
        </div>
      </section>

      {/* Challanges, Solution Section */}
      <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">Challanges</h3>
              <p className="text-sm text-dark-gray dark:text-white mt-4">
                The main objective is to create a solution that meets the requirements of
                stakeholders while integrating with existing IT systems to get data
                without impacting the system. The solution should use only an MS stack of
                technologies while taking care of sensitive data, and maintaining and
                providing up-to-date data. The solution should also be a comfortable and
                reliable, user-friendly solution for everyday work.
              </p>
            </div>
            <div className="mt-8">
              <h3 className="h3-heading">Solution</h3>
              <p className="text-sm text-dark-gray dark:text-white mt-4">
                The purpose of interactive data visualization is to allow users to explore
                and understand data. We used the Power BI analytics service to accomplish
                this. Azure has several features that automate data processing and ensure
                the reliability and security of the data.
              </p>
            </div>
          </div>
          <img
            src="https://drive.google.com/uc?export=view&id=1TDOQDUkH4dDnjx2x5DJkDpi5xEHrbCvS"
            alt="Case Study main image"
            className="text-center w-full md:w-1/2"
          />
        </div>
      </section>

      {/* Results Section */}
      <section id="results" className="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">
            <h3 className="h3-heading text-dg-secondary">Results</h3>
            <ul className="list-disc paragraph mt-2 pl-8">
              <li>Visualize information to ensure better data understanding </li>
              <li>
                Deliver the product within an established amount of time and defined
                budgets
              </li>
              <li> Be up to date with the latest stack of technologies</li>
              <li>
                Offer services from ETL with complex data processing to data visualization
              </li>
            </ul>
          </div>
        </div>
      </section>

      {/* Technologies Section */}
      <section
        id="technologies"
        className="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">
            <h3 className="h3-heading">Technologies</h3>
          </div>
          <div className="grid grid-cols-4 justify-center justify-items-center gap-8 xl:flex xl:flex-row items-center xl:justify-start xl:gap-16 w-full mt-8">
            {technologies.map(technology => (
              <img
                key={technology.id}
                src={technology.link}
                alt="Technology's image"
                className="w-12 md:w-16 lg:w-20"
              />
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section id="cta" className="flex flex-col items-center justify-center mt-16">
        <div className="px-8 mt-8 mb-32 w-full max-w-custom">
          <ActionCard
            title="Let's Work Together!"
            text="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."
            btn1="More Projects"
            btn2="Contact Us"
            link1={'/portfolio'}
            link2={'/contact'}
          />
        </div>
      </section>
    </div>
    </PageLayout>
  );
}
