export default function PricingPage() {
  return (
    <>
      {/* Breadcrumb-Wrapper Section Start */}
      <section
        className="breadcrumb-wrapper fix bg-cover"
        style={{ backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)" }}
      >
        <div className="shape">
          <img src="/assets/img/inner-page/shape.png" alt="img" />
        </div>
        <div className="container">
          <div className="page-heading">
            <h1 className="breadcrumb-title">pricing plan</h1>
            <ul className="breadcrumb-list">
              <li>
                <a href="/">Home</a>
              </li>
              <li>
                <i className="fa-solid fa-chevron-right"></i>
              </li>
              <li>Pricing Plan</li>
            </ul>
          </div>
        </div>
      </section>

      {/* Pricing Section Start */}
      <section className="pricing-section-2 section-padding fix section-bg-1">
        <div className="container">
          <div className="pricing-wrapper-2">
            <div className="row g-4 align-items-center">
              <div className="col-xl-6 col-lg-5">
                <div className="pricing-content">
                  <div className="section-title mb-0">
                    <span className="sub-title-2 wow fadeInUp">
                      pricing plan
                    </span>
                    <h2 className="split-text-right split-text-in-right">
                      Flexible Plans to Suit Every Traveler
                    </h2>
                  </div>
                  <p className="pricing-text wow fadeInUp" data-wow-delay=".5s">
                    Choose the plan that fits your visa needs and enjoy expert
                    guidance every step of the way.
                  </p>
                  <div
                    className="d-flex mt-3 mt-md-0 wow fadeInUp"
                    data-wow-delay=".5s"
                  >
                    <div className="pricing-two__tab">
                      <nav>
                        <div className="nav nav-tabs" id="nav-tab" role="tablist">
                          <button
                            className="nav-link active"
                            id="pt-1-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#pt-1"
                            type="button"
                            role="tab"
                            aria-controls="pt-1"
                            aria-selected="true"
                          >
                            Monthly
                          </button>
                          <button
                            className="nav-link"
                            id="pt-2-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#pt-2"
                            type="button"
                            role="tab"
                            aria-controls="pt-2"
                            aria-selected="false"
                            tabIndex={-1}
                          >
                            Yearly
                          </button>
                        </div>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-xl-6 col-lg-7">
                <div className="pricing__tab-content">
                  <div className="tab-content" id="nav-tabContent">
                    <div
                      className="tab-pane fade active show"
                      id="pt-1"
                      role="tabpanel"
                      aria-labelledby="pt-1-tab"
                    >
                      <div className="pricing-right-items">
                        <div className="pricing-box-items">
                          <div className="pricing-header">
                            <h2>
                              <sup>$</sup>
                              32
                              <sub>/mo</sub>
                            </h2>
                            <span className="sub-texts">Basic Plan</span>
                          </div>
                          <a href="/pricing" className="theme-btn">
                            Get Started Today
                            <i className="fa-solid fa-arrow-right"></i>
                          </a>
                          <ul className="pricing-list">
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Everything in Basic Plan
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Visa Interview Preparation
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Priority Processing Support
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Phone &amp; Email Assistance
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Step-by-Step Application Support
                            </li>
                          </ul>
                        </div>
                        <div className="pricing-box-items style-2">
                          <div className="pricing-header">
                            <h2>
                              <sup>$</sup>
                              32
                              <sub>/mo</sub>
                            </h2>
                            <span className="sub-texts">Premium Plan</span>
                          </div>
                          <a href="/pricing" className="theme-btn style-2">
                            Get Started Today
                            <i className="fa-solid fa-arrow-right"></i>
                          </a>
                          <ul className="pricing-list">
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Everything in Basic Plan
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Visa Interview Preparation
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Priority Processing Support
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Phone &amp; Email Assistance
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Step-by-Step Application Support
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div
                      className="tab-pane fade"
                      id="pt-2"
                      role="tabpanel"
                      aria-labelledby="pt-2-tab"
                    >
                      <div className="pricing-right-items">
                        <div className="pricing-box-items">
                          <div className="pricing-header">
                            <h2>
                              <sup>$</sup>
                              32
                              <sub>/mo</sub>
                            </h2>
                            <span className="sub-texts">Basic Plan</span>
                          </div>
                          <a href="/pricing" className="theme-btn">
                            Get Started Today
                            <i className="fa-solid fa-arrow-right"></i>
                          </a>
                          <ul className="pricing-list">
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Everything in Basic Plan
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Visa Interview Preparation
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Priority Processing Support
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Phone &amp; Email Assistance
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Step-by-Step Application Support
                            </li>
                          </ul>
                        </div>
                        <div className="pricing-box-items style-2">
                          <div className="pricing-header">
                            <h2>
                              <sup>$</sup>
                              32
                              <sub>/mo</sub>
                            </h2>
                            <span className="sub-texts">Premium Plan</span>
                          </div>
                          <a href="/pricing" className="theme-btn style-2">
                            Get Started Today
                            <i className="fa-solid fa-arrow-right"></i>
                          </a>
                          <ul className="pricing-list">
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Everything in Basic Plan
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Visa Interview Preparation
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Priority Processing Support
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Phone &amp; Email Assistance
                            </li>
                            <li>
                              <i className="fa-solid fa-chevrons-right"></i>{" "}
                              Step-by-Step Application Support
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonial Section Start */}
      <section className="testimonial-section section-padding fix">
        <div className="container">
          <div className="section-title-area">
            <div className="section-title mb-0">
              <span className="sub-title-2 wow fadeInUp">
                What Our Clients Say
              </span>
              <h2 className="split-text-right split-text-in-right">
                Immigration Success Stories
              </h2>
            </div>
            <a href="/contact" className="theme-btn">
              View All Review
              <i className="fa-solid fa-arrow-right"></i>
            </a>
          </div>
          <div className="testimonial-wrapper-3">
            <div className="row g-4 align-items-center">
              <div className="col-lg-4">
                <div className="testimonial-thumb">
                  <img src="/assets/img/home-3/test-thumb.jpg" alt="img" />
                </div>
              </div>
              <div className="col-lg-8">
                <div className="testimonial-content">
                  <div className="swiper testimonial-slider-3">
                    <div className="swiper-wrapper">
                      <div className="swiper-slide">
                        <div className="content">
                          <div className="star">
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                          </div>
                          <h3>
                            &ldquo;The team provided exceptional guidance
                            throughout my immigration process. Their expertise,
                            personalized support, and attention to detail
                            ensured a smooth, stress-free experience and
                            successful visa approval.&rdquo;
                          </h3>
                          <div className="info-item">
                            <div className="icon">
                              <i className="fa-solid fa-quote-right"></i>
                            </div>
                            <div className="content">
                              <h5>Mohammed Ali,</h5>
                              <span>Family Visa</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="swiper-slide">
                        <div className="content">
                          <div className="star">
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                            <i className="fa-solid fa-star"></i>
                          </div>
                          <h3>
                            &ldquo;The team provided exceptional guidance
                            throughout my immigration process. Their expertise,
                            personalized support, and attention to detail
                            ensured a smooth, stress-free experience and
                            successful visa approval.&rdquo;
                          </h3>
                          <div className="info-item">
                            <div className="icon">
                              <i className="fa-solid fa-quote-right"></i>
                            </div>
                            <div className="content">
                              <h5>Mohammed Ali,</h5>
                              <span>Family Visa</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="array-buttons-3">
                    <button className="array-prev">
                      <i className="fa-solid fa-arrow-left"></i>
                    </button>
                    <button className="array-next">
                      <i className="fa-solid fa-arrow-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}