import { fetchServicePageData, fetchCountries } from "../../api/servicesApi";
import { imageUrl } from "../utils/image";
import Breadcrumb from "../components/Breadcrumb";
import ImageWithFallback from "../components/ImageWithFallback";
import "./services.css";

export default async function ServicesPage() {
  const data = await fetchServicePageData();
  const allCountries = await fetchCountries();
  const { services, destinations, visas, reviews } = data;

  // Pagination logic - show only first 5 countries
  const COUNTRIES_PER_PAGE = 5;
  const displayedCountries = allCountries.slice(0, COUNTRIES_PER_PAGE);
  const hasMoreCountries = allCountries.length > COUNTRIES_PER_PAGE;

  return (
    <>
      {/* Breadcrumb Section */}
      <Breadcrumb title="Services" current="Services" />

      {/* Service Section Start */}
      <section className="service-section section-padding fix section-bg-1">
        <div className="container">
          <div className="section-title text-center">
            <span className="sub-title-2 wow fadeInUp">
              {services.title.subTitle}
            </span>
            <h2 className="split-text-right split-text-in-right">
              {services.title.mainTitle}
            </h2>
          </div>
          <div className="row">
            <div className="col-xl-12">
              {services.items.map((service: any) => (
                <div
                  key={service.slug}
                  className={`service-main-item-3 ${service.layout === "right" ? "style-2" : ""} fade-up-anim`}
                >
                  {service.layout === "right" && (
                    <div className="service-button">
                      <a
                        href={`/services/details/${service.slug}`}
                        className="theme-btn"
                      >
                        read more
                        <i className="fa-solid fa-arrow-right"></i>
                      </a>
                    </div>
                  )}
                  <div className="service-left">
                    {service.layout === "left" && (
                      <div className="service-image">
                        <img src={imageUrl(service.image)} alt="img" />
                      </div>
                    )}
                    <div className="content">
                      <h3>
                        <a href={`/services/details/${service.slug}`}>
                          {service.name}
                        </a>
                      </h3>
                      <p>{service.description}</p>
                    </div>
                    {service.layout === "right" && (
                      <div className="service-image">
                        <img src={imageUrl(service.image)} alt="img" />
                      </div>
                    )}
                  </div>
                  {service.layout === "left" && (
                    <div className="service-button">
                      <a
                        href={`/services/details/${service.slug}`}
                        className="theme-btn"
                      >
                        read more
                        <i className="fa-solid fa-arrow-right"></i>
                      </a>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Destination-Offer Section Start */}
      <section className="destination-offer-section section-padding fix">
        <div className="bg-image">
          <img src={imageUrl(destinations.backgroundImage)} alt="img" />
        </div>
        <div className="container">
          <div className="section-title">
            <span className="sub-title-2 theme wow fadeInUp">
              {destinations.title.subTitle}
            </span>
            <h2 className="split-text-right split-text-in-right text-white">
              {destinations.title.mainTitle}
            </h2>
          </div>
          <div className="destination-offer-wrapper-3 fade-up-anim row g-4 g-xl-4 row-cols-xl-5 row-cols-lg-4 row-cols-md-2 row-cols-1">
            {displayedCountries.map((country: any) => (
              <div key={country.id} className="col destination-offer-item">
                <div className="choose-us-image">
                  <ImageWithFallback
                    src={country.mainImage}
                    alt="img"
                    fallbackSrc="_images/default.jpg"
                  />
                </div>
                <div className="choose-us-content">
                  <div className="icon-item">
                    <div className="icon">
                      <img src={imageUrl(country.icon)} alt="img" />
                    </div>
                    <h5>
                      <a href={`/visa/${country.slug}`}>{country.name}</a>
                    </h5>
                  </div>
                  <p>
                    {country.services && country.services.length > 0
                      ? `Services: ${country.services.slice(0, 2).join(", ")}${country.services.length > 2 ? "..." : ""}`
                      : "Immigration services available"}
                  </p>
                </div>
              </div>
            ))}
          </div>

          {/* Show "View More" button if there are more countries */}
          {hasMoreCountries && (
            <div className="text-center mt-4">
              <a href="/visa" className="theme-btn">
                View All Countries ({allCountries.length})
                <i className="fa-solid fa-arrow-right"></i>
              </a>
            </div>
          )}
        </div>
      </section>

      {/* Service-Visa Section Start */}
      {/* <section className="service-visa-section fix">
        <div className="container">
          <div className="service-visa-wrapper">
            {visas.items.map((visa: any, index: number) => (
              <div
                key={visa.id}
                className={`service-visa-items ${index > 0 ? "style-2" : ""}`}
              >
                <div className="top-item">
                  <h4 className="number">{visa.number}</h4>
                  <h3>
                    <a href={visa.buttonLink}>{visa.name}</a>
                  </h3>
                </div>
                <p>{visa.description}</p>
                <a href={visa.buttonLink} className="service-button">
                  {visa.buttonText}
                </a>
              </div>
            ))}
          </div>
        </div>
      </section> */}

      {/* Testimonial Section3 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">
                {reviews.title.subTitle}
              </span>
              <h2 className="split-text-right split-text-in-right">
                {reviews.title.mainTitle}
              </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={imageUrl(reviews.thumb)} alt="img" />
                </div>
              </div>
              <div className="col-lg-8">
                <div className="testimonial-content">
                  <div className="swiper testimonial-slider-3">
                    <div className="swiper-wrapper">
                      {reviews.items.map((testimonial: any) => (
                        <div key={testimonial.id} className="swiper-slide">
                          <div className="content">
                            <div className="star">
                              {[...Array(testimonial.rating)].map(
                                (_: any, i: number) => (
                                  <i key={i} className="fa-solid fa-star"></i>
                                ),
                              )}
                            </div>
                            <h3>"{testimonial.content}"</h3>
                            <div className="info-item">
                              <div className="icon">
                                <i className={testimonial.icon}></i>
                              </div>
                              <div className="content">
                                <h5>{testimonial.author.name}</h5>
                                <span>{testimonial.author.type}</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>
    </>
  );
}