"use client";

import React from "react";
import ServiceCard from "@/components/service-card";
import Image from "next/image";
import DynamicButton from "@/components/button";
import { motion } from "framer-motion";
import { useTranslations, useLocale } from "next-intl";
import { useGeneralSettings } from "@/lib/clientQueries";

interface Service {
  title: string;
  description: string;
  href?: string;
  icon?: string;
}

interface ServicesSectionProps {
  services: Service[];
}

export default function ServicesSection({ services }: ServicesSectionProps) {
  const t = useTranslations("SERVICES");
  const app = useTranslations("APP_SECTION");
  const locale = useLocale();
  const isArabic = locale === "ar";
  const { data: settings, isLoading } = useGeneralSettings();
  const isFallback = Boolean((settings as any)?._isFallback);

  return (
    <section id="services" className="md:py-12 md:my-6">
      <div className="custom-container">
        <h2 className="text-2xl font-extrabold mb-6 text-[color:var(--g1)] fade-up">
          {t("title")}
        </h2>

        <motion.div
          className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"
          initial="hidden"
          whileInView="show"
          viewport={{ once: false, amount: 0.2 }}
          variants={{
            hidden: {},
            show: {
              transition: { staggerChildren: 0.1 },
            },
          }}
        >
          {services.map((service, idx) => (
            <motion.div
              key={idx}
              variants={{
                hidden: { opacity: 0, y: 20 },
                show: { opacity: 1, y: 0, transition: { duration: 0.35 } },
              }}
            >
              <ServiceCard
                title={service.title}
                description={service.description}
                href={service.href}
                icon={service.icon}
              />
            </motion.div>
          ))}
        </motion.div>

        <div
          id="app-download"
          className="mt-12 rounded-xl bg-[#f6fbfb] p-6 sm:p-7 lg:p-10 flex flex-col lg:flex-row-reverse items-center justify-between gap-4 sm:gap-6 lg:gap-8"
        >
          {isLoading ? (
            <div className="w-full grid lg:grid-cols-2 gap-6 animate-pulse">
              <div className="h-40 bg-slate-200 rounded-2xl" />
              <div className="h-40 bg-slate-200 rounded-2xl" />
            </div>
          ) : (
            <>
              <div
                className={`${isArabic ? "text-center lg:text-right" : "text-center lg:text-left"} w-full lg:w-auto`}
              >
                <p className="text-lg sm:text-xl font-bold text-black mb-3">
                  {isArabic
                    ? "حمله الآن متوفر على"
                    : "Download now available on"}
                </p>

                <div className="flex flex-col md:flex-col gap-2 sm:gap-3 justify-center items-center ">
                  <a
                    href={settings?.ios_app_url || (isFallback ? "#" : "#")}
                    target="_blank"
                  >
                    <Image
                      src="/images/apple.webp"
                      alt={
                        isArabic
                          ? "Download on the App Store"
                          : "Available on the App Store"
                      }
                      width={140}
                      height={42}
                      className="h-10 sm:h-12 w-auto"
                      loading="lazy"
                    />
                  </a>

                  <a
                    href={settings?.android_app_url || (isFallback ? "#" : "#")}
                    target="_blank"
                  >
                    <Image
                      src="/images/google.webp"
                      alt={
                        isArabic
                          ? "Get it on Google Play"
                          : "Available on Google Play"
                      }
                      width={140}
                      height={42}
                      className="h-10 sm:h-12 w-auto"
                      loading="lazy"
                    />
                  </a>
                </div>
              </div>
              <div
                className={`flex flex-col sm:flex-row items-center gap-3 sm:gap-4 lg:gap-6 text-center sm:text-left w-full lg:w-auto`}
              >
                {" "}
                <Image
                  src={
                    settings?.colored_logo || settings?.main_logo || "/logo.png"
                  }
                  width={100}
                  height={100}
                  alt={isArabic ? "تطبيق عطايا" : "Ataya App"}
                  className="shrink-0"
                  loading="lazy"
                />
                <div>
                  <p className="text-lg md:text-start sm:text-xl lg:text-2xl text-black mb-3 sm:mb-4 font-bold">
                    {isArabic ? "تطبيق عطايا" : "Ataya App"}
                  </p>

                  <h3 className="text-base md:text-start sm:text-lg lg:text-2xl font-bold text-black mb-3 sm:mb-4">
                    {isArabic
                      ? "عيش تجربة جميلة مع تطبيق عطايا"
                      : "Enjoy a great experience with the Ataya app"}
                  </h3>

                  <p className="text-slate-600 text-xs md:text-start sm:text-sm max-w-xs sm:max-w-md">
                    {settings?.site_description
                      ? String(settings.site_description)
                      : isFallback
                        ? isArabic
                          ? "تطبيق سهل لإدارة المزادات والبيع والشراء المباشر، وطرق دفع سهلة وسلسة"
                          : "An easy app for managing auctions, direct buying and selling, with easy and smooth payment methods"
                        : ""}
                  </p>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </section>
  );
}