import React from 'react';

import { motion } from 'framer-motion';
import OrbitOnScroll from './shared/graphics/OrbitOnScroll';
import PageHeading from './shared/PageHeading';
import WhyUsCard from './WhyUsCard';

import why1 from './../assets/icons/why-us-1.svg';
import why2 from './../assets/icons/why-us-2.svg';
import why3 from './../assets/icons/why-us-3.svg';

import Wrapper from '../layout/Wrapper';

const api_url = process.env.REACT_APP_API_URL;

const _data = {
  heading: {
    subheading: 'Why us',
    heading: 'Dedicated and Long-lasting Partnerships',
    paragraph1:
      'Committed and loyal we build long-lasting partnerships that go beyond technology. We believe that the key to a prosperous partnership is empathy and understanding.',
    paragraph2:
      "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.",
  },
  card_left: {
    imgUrl: why1,
    alt: 'Innovative Solutions',
    heading: 'Innovative Solutions',
    paragraph:
      'Technology is just one aspect of our client relationships. Enthusiasts to the core, we bring innovative and real-life solutions to each client’s problems through a deep understanding of their market, approach, and vision.',
  },
  card_mid: {
    imgUrl: why2,
    alt: 'Product Discovery',
    heading: 'Product Discovery',
    paragraph:
      'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business. We develop a roadmap to make sure the development is ready to begin constructing the MVP.',
  },
  card_right: {
    imgUrl: why3,
    alt: 'End-user Engagement',
    heading: 'End-user Engagement',
    paragraph:
      'Our company helps clients to create a successful product. We focus on technical quality to ensure that products are up to standards and meet the needs of users. Innovation is key in developing products that are unique and valuable.',
  },
};

const WhySection = ({ data }) => {
  return (
    <Wrapper bg hideOverflow>
      <div className="relative">
        <div className="relative h-[1px] w-full m-auto">
          <div
            className="absolute hidden lg:block"
            id="test"
            style={{ top: '800px', marginLeft: '-200px' }}
          >
            <OrbitOnScroll />
          </div>
        </div>

        <motion.section
          id="why_us"
          className=" flex flex-col items-center relative pt-164p pb-240p"
        >
          <div className="flex flex-col justify-center items-center gap-90p">
            <div className="max-w-[780px]">
              <PageHeading
                subheading={_data.heading.subheading}
                heading={_data.heading.heading}
                paragraph1={_data.heading.paragraph1}
                paragraph2={_data.heading.paragraph2}
              />
            </div>

            <div className="flex flex-col lg:flex-row gap-32p h-fit sm:px-64p lg:px-0">
              {/* Card - left */}
              <motion.div
                initial={{ opacity: 0, scale: 1.1, y: 90 }}
                whileInView={{ opacity: 1, scale: 1, y: 0 }}
                transition={{ delay: 0, default: { duration: 0.45 } }}
              >
                <WhyUsCard
                  image={_data.card_left.imgUrl}
                  alt={_data.card_left.alt}
                  heading={_data.card_left.heading}
                  paragraph={_data.card_left.paragraph}
                />
              </motion.div>
              {/* Card - mid */}
              <motion.div
                initial={{ opacity: 0, scale: 1.1, y: 120 }}
                whileInView={{ opacity: 1, scale: 1, y: 0 }}
                transition={{ delay: 0.27, default: { duration: 0.45 } }}
              >
                <WhyUsCard
                  image={_data.card_mid.imgUrl}
                  alt={_data.card_mid.alt}
                  heading={_data.card_mid.heading}
                  paragraph={_data.card_mid.paragraph}
                />
              </motion.div>
              {/* Card - right */}
              <motion.div
                initial={{ opacity: 0, scale: 1.1, y: 140 }}
                whileInView={{ opacity: 1, scale: 1, y: 0 }}
                transition={{ delay: 0.54, default: { duration: 0.45 } }}
              >
                <WhyUsCard
                  image={_data.card_right.imgUrl}
                  alt={_data.card_right.alt}
                  heading={_data.card_right.heading}
                  paragraph={_data.card_right.paragraph}
                />
              </motion.div>
            </div>
          </div>
        </motion.section>
      </div>
    </Wrapper>
  );
};

export default WhySection;
