import React from "react";
import Image from "next/image";
export default function Process() {
  return (
    <div className="section-process style-1 tf-spacing-5">
      <div className="tf-container">
        <div className="wrap">
          <div className="row align-items-end">
            <div className="col-xl-6 left">
              <div className="heading-section mb_88 ps-0">
                <h2 className="heading-title split-text effect-right">
                  Our Approach
                </h2>
                <p
                  className="text-body-1 text_mono-gray-7 mt_18 wow animate__fadeInUp animate__animated"
                  data-wow-delay="0s"
                >
                  We rely on datadriven analysis and rigorous methodologies
                  <br />
                  to inform our decisions and ensure accuracy.
                </p>
              </div>
              <ul
                className="accordion-wrap gap-16 style-faqs"
                id="accordion-approach"
              >
                <li className="accordion-item action_click scrolling-effect effectLeft style-default">
                  <a
                    href="#accordion-approach-1"
                    className="accordion-title action collapsed current"
                    data-bs-toggle="collapse"
                    aria-expanded="true"
                    aria-controls="accordion-approach-1"
                  >
                    <div className="heading">
                      <h3 className="text_mono-gray-5 title">
                        <span className="text_primary">1.</span>Story &amp;
                        Reserach
                      </h3>
                    </div>
                    <span className="icon" />
                  </a>
                  <div
                    id="accordion-approach-1"
                    className="collapse"
                    data-bs-parent="#accordion-approach"
                  >
                    <div className="accordion-faqs-content">
                      <p className="text-body-1">
                        The research gathered to inform the development of the
                        story provides the foundation for a product or service,
                        shaping its direction and purpose.
                      </p>
                    </div>
                  </div>
                </li>
                <li className="accordion-item action_click scrolling-effect effectLeft active style-default">
                  <a
                    href="#accordion-approach-2"
                    className="accordion-title action current"
                    data-bs-toggle="collapse"
                    aria-expanded="true"
                    aria-controls="accordion-approach-2"
                  >
                    <div className="heading">
                      <h3 className="text_mono-gray-5 title">
                        <span className="text_primary">2.</span> Strategy &amp;
                        Concept
                      </h3>
                    </div>
                    <span className="icon" />
                  </a>
                  <div
                    id="accordion-approach-2"
                    className="collapse show"
                    data-bs-parent="#accordion-approach"
                  >
                    <div className="accordion-faqs-content">
                      <p className="text-body-1">
                        The research gathered to inform the development of the
                        story provides the foundation for a product or service,
                        shaping its direction and purpose.
                      </p>
                    </div>
                  </div>
                </li>
                <li className="accordion-item action_click scrolling-effect effectLeft style-default">
                  <a
                    href="#accordion-approach-3"
                    className="accordion-title action collapsed current"
                    data-bs-toggle="collapse"
                    aria-expanded="true"
                    aria-controls="accordion-approach-3"
                  >
                    <div className="heading">
                      <h3 className="text_mono-gray-5 title">
                        <span className="text_primary">3.</span> Implementation
                      </h3>
                    </div>
                    <span className="icon" />
                  </a>
                  <div
                    id="accordion-approach-3"
                    className="collapse"
                    data-bs-parent="#accordion-approach"
                  >
                    <div className="accordion-faqs-content">
                      <p className="text-body-1">
                        The research gathered to inform the development of the
                        story provides the foundation for a product or service,
                        shaping its direction and purpose.
                      </p>
                    </div>
                  </div>
                </li>
                <li className="accordion-item action_click scrolling-effect effectLeft style-default">
                  <a
                    href="#accordion-approach-4"
                    className="accordion-title action collapsed current"
                    data-bs-toggle="collapse"
                    aria-expanded="true"
                    aria-controls="accordion-approach-4"
                  >
                    <div className="heading">
                      <h3 className="text_mono-gray-5 title">
                        <span className="text_primary">4.</span>Usability
                        Testing
                      </h3>
                    </div>
                    <span className="icon" />
                  </a>
                  <div
                    id="accordion-approach-4"
                    className="collapse"
                    data-bs-parent="#accordion-approach"
                  >
                    <div className="accordion-faqs-content">
                      <p className="text-body-1">
                        To place an order, browse our We differentiate ourselves
                        through our commitment to innovation, personalized
                        solutions, and client satisfaction. We differentiate
                        ourselves through our commitment to innovation,
                        personalized solutions, and client satisfaction.
                      </p>
                    </div>
                  </div>
                </li>
                <li className="accordion-item action_click scrolling-effect effectLeft style-default">
                  <a
                    href="#accordion--approach-5"
                    className="accordion-title action collapsed current"
                    data-bs-toggle="collapse"
                    aria-expanded="true"
                    aria-controls="accordion--approach-5"
                  >
                    <div className="heading">
                      <h3 className="text_mono-gray-5 title">
                        <span className="text_primary">5.</span>Guide &amp; Hand
                        Over
                      </h3>
                    </div>
                    <span className="icon" />
                  </a>
                  <div
                    id="accordion--approach-5"
                    className="collapse"
                    data-bs-parent="#accordion-approach"
                  >
                    <div className="accordion-faqs-content">
                      <p className="text-body-1">
                        To place an order, browse our We differentiate ourselves
                        through our commitment to innovation, personalized
                        solutions, and client satisfaction. We differentiate
                        ourselves through our commitment to innovation,
                        personalized solutions, and client satisfaction.
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div className="col-xl-6 right">
              <div
                className="shape-img-bg shape-border style-2 scroll-tranform"
                data-distance="20%"
              >
                <Image
                  alt=""
                  className="img-custom-anim-left wow"
                  src="/images/section/img-with-shape-2.jpg"
                  width={802}
                  height={535}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}