"use client";

import React, { useState, useEffect } from "react";

interface ServiceCard {
  id: string;
  firstWord: string;
  restTitle: string;
  bgColor: string;
  items: { label: string; href: string }[];
}

const SERVICES_DATA: ServiceCard[] = [
  {
    id: "assignment",
    firstWord: "Assignment",
    restTitle: "Writing Service",
    bgColor: "#3e4356",
    items: [
      { label: "Custom Assignment Help", href: "/custom-assignment-help" },
      { label: "Do My Assignment", href: "/do-my-assignment" },
      { label: "Law Assignment Help", href: "/law-assignment-help" },
      { label: "MBA Assignment Help", href: "/mba-assignment-help" },
      { label: "University Assignment Help", href: "/university-assignment-help" },
    ],
  },
  {
    id: "essay",
    firstWord: "Essay",
    restTitle: "Writing Service",
    bgColor: "#f58e0e",
    items: [
      { label: "Custom Essay Writing", href: "/essay-writing" },
      { label: "Persuasive Essay Writing", href: "/persuasive-essay-writing" },
      { label: "Essay Proofreading", href: "/essay-proofreading" },
      { label: "Essay Topics", href: "/essay-topics" },
      { label: "Essay Editing Services", href: "/essay-editing-services" },
    ],
  },
  {
    id: "dissertation",
    firstWord: "Dissertation",
    restTitle: "Writing Service",
    bgColor: "#246ed0",
    items: [
      { label: "Dissertation Help", href: "/dissertation-help" },
      { label: "Marketing Dissertation", href: "/marketing-dissertation" },
      { label: "Nursing Dissertation", href: "/nursing-dissertation" },
      { label: "History Dissertation", href: "/history-dissertation" },
      { label: "Dissertation Proposal", href: "/dissertation-proposal" },
    ],
  },
  {
    id: "academic",
    firstWord: "Academic",
    restTitle: "Writing Services",
    bgColor: "#068473",
    items: [
      { label: "Proofreading", href: "/proofreading-services" },
      { label: "Editing", href: "/editing-services" },
      { label: "Case Study Help", href: "/case-study-help" },
      { label: "Business Plan Assignment Help", href: "/business-plan-help" },
      { label: "Homework Assistance", href: "/homework-help" },
    ],
  },
];

export function HomeServicesSlider() {
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [isPaused, setIsPaused] = useState<boolean>(false);
  const [isTransitioning, setIsTransitioning] = useState<boolean>(true);

  // Quadruple items list for continuous smooth infinite looping towards left
  const displayItems = [
    ...SERVICES_DATA,
    ...SERVICES_DATA,
    ...SERVICES_DATA,
    ...SERVICES_DATA,
  ];
  const CARD_WIDTH = 320;
  const CARD_GAP = 28;

  useEffect(() => {
    if (isPaused) return;
    const interval = setInterval(() => {
      setCurrentIndex((prev) => prev + 1);
    }, 3000);
    return () => clearInterval(interval);
  }, [isPaused]);

  // Handle seamless infinite loop reset
  useEffect(() => {
    if (currentIndex >= SERVICES_DATA.length * 2) {
      const timer = setTimeout(() => {
        setIsTransitioning(false);
        setCurrentIndex(SERVICES_DATA.length);
      }, 700);
      return () => clearTimeout(timer);
    } else if (!isTransitioning) {
      const timer = setTimeout(() => {
        setIsTransitioning(true);
      }, 50);
      return () => clearTimeout(timer);
    }
  }, [currentIndex, isTransitioning]);

  const getOrderCpanelUrl = () => {
    const baseUrl =
      process.env.NEXT_PUBLIC_CPANEL_URL ||
      "https://customerpanel.globalassignmenthelp.com";
    return `${baseUrl}/order?code=EXTRA25`;
  };

  return (
    <section
      className="home-services-new relative py-12 bg-white overflow-hidden"
      style={{
        backgroundImage: "url('/images/home-service.png')",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "-35px 140px",
      }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        {/* Section Heading */}
        <div className="mb-6">
          <p className="home-heading text-lg font-medium text-[#f58e0e] mb-1">
            We Offer
          </p>
          <h2 className="home-subheading text-2xl md:text-3xl font-bold text-[#1d1d1d]">
            A Wide Range of Academic Writing Services
          </h2>
        </div>

        {/* Cards Auto-Slider Row (Offset to right so Card 1 overlaps the girl background image) */}
        <div className="relative min-h-[360px] pt-4 lg:pl-[210px]">
          <div
            className="w-full overflow-hidden relative py-2"
            onMouseEnter={() => setIsPaused(true)}
            onMouseLeave={() => setIsPaused(false)}
          >
            <div
              className="flex"
              style={{
                transform: `translateX(-${currentIndex * (CARD_WIDTH + CARD_GAP)
                  }px)`,
                transition: isTransitioning
                  ? "transform 700ms ease-in-out"
                  : "none",
                gap: `${CARD_GAP}px`,
              }}
            >
              {displayItems.map((card, idx) => (
                <div
                  key={`${card.id}-${idx}`}
                  className="rounded-xl p-6 shadow-md text-white shrink-0 relative flex flex-col justify-between"
                  style={{
                    width: `${CARD_WIDTH}px`,
                    backgroundColor: card.bgColor,
                    minHeight: "340px",
                  }}
                >
                  <div>
                    <h3 className="text-2xl font-bold mb-5 leading-snug">
                      <span>
                        {card.firstWord}
                      </span>
                      <br />
                      <span className="relative inline-block pb-1 border-b-[4px] border-white/30">{card.restTitle}</span>
                    </h3>
                    <br />

                    <ul className="space-y-3">
                      {card.items.map((item, itemIdx) => (
                        <li   
                          key={itemIdx}
                          className="flex items-center gap-2.5 text-[15px] font-medium !text-white"
                          style={{ color: "#ffffff" }}
                        >
                          <span
                            className="w-4 h-4 rounded-full border-2 border-white flex items-center justify-center shrink-0 bg-white"
                            style={{ borderColor: "#ffffff" }}
                          >
                            <span
                              className="w-1.5 h-1.5 rounded-full"
                              style={{ backgroundColor: card.bgColor }}
                            />
                          </span>
                          <a
                            href={item.href}
                            className="hover:underline truncate !text-white"
                            style={{ color: "#ffffff" }}
                          >
                            {item.label}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom Order Now Button */}
        <div className="text-center mt-8">
          <a
            href={getOrderCpanelUrl()}
            className="btn inline-block bg-[#f58e0e] hover:bg-[#e78e21] text-white font-medium text-base sm:text-lg px-8 py-3 rounded shadow transition-colors"
          >
            Order Now
          </a>
        </div>
      </div>
    </section>
  );
}