"use client";

import Image from "next/image";
import Link from "next/link";
import { useState, useEffect, useRef } from "react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import { AutoScroll } from "@splidejs/splide-extension-auto-scroll";
import AOS from "aos";
import { testimonialData } from "./data/testimonialData";
import HorizontalScrollDiv from "./components/HorizontalScrollDiv";
import OurClients from "./components/OurClients";
import MarketplaceLogo from "./components/MarketplaceLogo";
import useFormModal from "./store/useFormModal";
import useCalendlyModal from "./store/useCalendlyModal";
import BookSessionbtn from "./components/BookSessionbtn";

// Tilt card component
const TiltCard = ({
  children,
  className = "",
  dataAos = "",
  dataAosAnchor = "",
  dataAosDuration = "",
}: {
  children: React.ReactNode;
  className?: string;
  dataAos?: string;
  dataAosAnchor?: string;
  dataAosDuration?: string;
}) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const [transform, setTransform] = useState("");

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;

    const card = cardRef.current;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const rotateX = ((y - centerY) / centerY) * -10;
    const rotateY = ((x - centerX) / centerX) * 10;

    setTransform(
      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`
    );
  };

  const handleMouseLeave = () => {
    setTransform("perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)");
  };

  return (
    <div
      ref={cardRef}
      className={className}
      data-aos={dataAos}
      data-aos-anchor-placement={dataAosAnchor}
      data-aos-duration={dataAosDuration}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{
        transform,
        transition: "transform 0.15s ease-out",
      }}
    >
      {children}
    </div>
  );
};

export default function Home() {
  const [countedValues, setCountedValues] = useState({
    managedSpend: 0,
    revenueGrowth: 0,
    categories: 0,
    recoverRevenue: 0
  });
  const [hasCounted, setHasCounted] = useState(false);
  const splideRef = useRef<any>(null);
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const {openModal} = useFormModal()
  const {openCalendlyModal} = useCalendlyModal()

  useEffect(() => {
    AOS.init();
  }, []);
  
    useEffect(()=>{
      setTimeout(()=>{
        openModal("contactForm")  
      }, 5000)
    },[])

  // Counting animation effect
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !hasCounted) {
            setHasCounted(true);

            // Animate to 24 million
            const animateCount = (
              target: number,
              setter: (val: number) => void,
              suffix: string = ""
            ) => {
              const duration = 2000;
              const startTime = Date.now();
              const startValue = 0;

              const animate = () => {
                const elapsed = Date.now() - startTime;
                const progress = Math.min(elapsed / duration, 1);
                const easeOutQuart = 1 - Math.pow(1 - progress, 4);
                const currentValue = Math.floor(
                  startValue + (target - startValue) * easeOutQuart
                );

                setter(currentValue);

                if (progress < 1) {
                  requestAnimationFrame(animate);
                } else {
                  setter(target);
                }
              };

              animate();
            };

            animateCount(200, (val) =>
              setCountedValues((prev) => ({ ...prev, managedSpend: val }))
            );
            animateCount(800, (val) =>
              setCountedValues((prev) => ({ ...prev, revenueGrowth: val }))
            );
            animateCount(60, (val) =>
              setCountedValues((prev) => ({ ...prev, categories: val }))
            );
            animateCount(15, (val) =>
              setCountedValues((prev) => ({ ...prev, recoverRevenue: val }))
            );
          }
        });
      },
      { threshold: 0.3 }
    );

    const targetElement = document.getElementById("stats-section");
    if (targetElement) {
      observer.observe(targetElement);
    }

    return () => {
      if (targetElement) {
        observer.unobserve(targetElement);
      }
    };
  }, [hasCounted]);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => { });
    }
  }, []);

  return (
    <main>
      <section className="px-4">
        <div className="h-[70vh] lg:h-[83vh] mt-22 md:mt-24 lg:mt-26 mx-auto container rounded-3xl bg-black overflow-hidden relative">
          <video
            ref={videoRef}
            className="absolute top-0 w-full h-screen object-cover opacity-50"
            src="/assets/video/vds2.mp4"
            muted
            loop
            autoPlay
            playsInline
            webkit-playsinline="true"
          />
          <div className="container mx-auto px-4 absolute top-[50%] -translate-y-1/2 left-1/2 -translate-x-1/2 z-50">
            <div className="pb-10">
              <h1
                className="lg:text-[60px] md:text-[40px] text-[30px] text-white font-semibold text-center font-kanit leading-tight"
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                A smarter way to build <span className="text-[#c4262e]">marketplace growth</span>
              </h1>
              {/* <p
                className="text-center text-[15px] lg:text-[25px] text-white font-inter w-full max-w-[1000px] mx-auto mt-5 lg:mt-10"
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                If you’re looking for a partner who’ll optimize your listings, scale your operations, and drive performance across multiple marketplaces, let’s connect.
              </p> */}
            </div>
            <div className="flex flex-col md:flex-row justify-center gap-4">
              <BookSessionbtn/>
              <button className="button" onClick={()=> openModal("contactForm")}>
                Get a complimentary audit
              </button>
            </div>
          </div>
        </div>
      </section>

      <section id="stats-section" className="py-6 md:py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-full w-[1200px] mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Left Side - Statistics */}
              <div className="grid grid-cols-2 gap-4 md:gap-6">
                {/* Managed Ad Spend */}
                <div
                  className="stat-box rounded-2xl p-4 lg:p-8 bg-white border-2 border-transparent hover:shadow-[-5px_5px_10px_0px_rgba(0,0,0,0.3)] transition-all duration-1000"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="500"
                >
                  <p className="text-[11px] lg:text-[13px] font-inter uppercase tracking-wide text-black mb-3">
                    MANAGED AD<br/> SPEND
                  </p>
                  <div className="flex items-baseline gap-1">
                    <span className="text-[25px] lg:text-[48px] font-bold text-black font-kanit">
                      ${countedValues.managedSpend}
                    </span>
                    <span className="text-[11px] lg:text-[18px] font-bold text-black font-kanit">
                      MILLION +
                    </span>
                  </div>
                </div>

                {/* Average Revenue Growth */}
                <div
                  className="stat-box rounded-2xl p-4 lg:p-8 bg-white border-2 border-transparent hover:shadow-[-5px_5px_10px_0px_rgba(0,0,0,0.3)] transition-all duration-1000"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="800"
                >
                  <p className="text-[11px] lg:text-[13px] font-inter uppercase tracking-wide text-black mb-3">
                    TOTAL SALES<br/> REVENUE
                  </p>
                  <div className="flex items-baseline gap-1">
                    <span className="text-[25px] lg:text-[48px] font-bold text-black font-kanit">
                      ${countedValues.revenueGrowth}
                    </span>
                    <span className="text-[12px] lg:text-[18px] font-bold text-black font-kanit">
                      MILLION +
                    </span>
                  </div>
                </div>

                {/* Worked In Categories */}
                <div
                  className="stat-box rounded-2xl p-4 lg:p-8 bg-white border-2 border-transparent hover:shadow-[-5px_5px_10px_0px_rgba(0,0,0,0.3)] transition-all duration-1000"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="1200"
                >
                  <p className="text-[11px] lg:text-[13px] font-inter uppercase tracking-wide text-black mb-3">
                    PARTNERED WITH
                  </p>
                  <div className="flex items-baseline gap-1 mt-7 lg:mt-8">
                    <span className="text-[25px] lg:text-[48px] font-bold text-black font-kanit">
                      {countedValues.categories}+
                    </span>
                    <span className="text-[12px] lg:text-[18px] font-bold text-black font-kanit">
                      BRANDS
                    </span>
                  </div>
                </div>
                <div
                  className="stat-box rounded-2xl p-4 lg:p-8 bg-white border-2 border-transparent hover:shadow-[-5px_5px_10px_0px_rgba(0,0,0,0.3)] transition-all duration-1000"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="1200"
                >
                  <p className="text-[11px] lg:text-[13px] font-inter uppercase tracking-wide text-black mb-3">
                    MARKETPLACE REIMBURSEMENTS
                  </p>
                  <div className="flex items-baseline gap-1">
                    <span className="text-[25px] lg:text-[48px] font-bold text-black font-kanit">
                      ${countedValues.recoverRevenue}
                    </span>
                    <span className="text-[12px] lg:text-[18px] font-bold text-black font-kanit">
                      MILLION +
                    </span>
                  </div>
                </div>
              </div>

              {/* Right Side - About Us */}
              <div
                className="bg-[#c4262e] rounded-2xl p-8 lg:p-12 flex flex-col justify-center"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1500"
              >
                <h2 className="text-[28px] lg:text-[42px] font-bold uppercase text-white font-kanit mb-5">
                  ABOUT US
                </h2>
                <p className="text-white text-[16px] lg:text-[19px] font-inter leading-relaxed">
                  Our philosophy is simple: <br />
                  {/*  <span className="font-bold">Partnership</span> &gt;{" "}
                  <span className="font-bold">Outsourcing</span> */}
                </p>
                <p className="text-white text-[16px] font-inter leading-relaxed mt-2">
                  Eleantz becomes an extension of your team, integrating seamlessly with your workflows, your business goals, and your brand DNA.
                </p>
                <p className="text-white text-[16px] font-inter leading-relaxed mt-2">
                  We align with your vision, challenge assumptions when needed, and move decisively as the market evolves.
                </p>
                <p className="text-white text-[16px] font-inter leading-relaxed mt-2">
                  Because true growth is built through partnership, not delegation.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="pb-6 md:pb-12 relative z-1 before:content-[''] before:absolute before:top-0 before:left-0 before:w-[100px] before:h-full md:before:bg-linear-to-r before:from-[#fefefe] before:to-[#f8fafc00] before:z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[100px] after:h-full md:after:bg-linear-to-l after:from-[#fefefe] after:to-[#f8fafc00] after:z-10">
        <h2 className="text-[37px] md:text-[40px] lg:text-[50px] font-bold leading-none text-center font-kanit pb-5 md:pb-10">
          Brands we’ve <span className="text-[#c4262e]">elevated</span>
        </h2>
        <OurClients />
      </section>

      <section className="py-6 md:py-12 bg-neutral-100">
        <div className="container mx-auto px-4">
          <div>
            <div className="mb-5 md:mb-10">
              <h2 className="text-[35px] md:text-[40px] lg:text-[50px] font-bold text-center font-kanit leading-none mb-5">
                Built into our{" "}<span className="text-[#c4262c]">DNA</span>
              </h2>
            </div>
            <div className="flex flex-wrap gap-y-3">
              <div className="w-full lg:w-[33.33%] md:px-4">
                <div className="card">
                  <div className="content">
                    <div className="back">
                      <div className="back-content">
                        <h3 className="text-[25px] font-bold">COLLABORATE</h3>
                      </div>
                    </div>
                    <div className="front">

                      <div className="img">
                        <div className="circle">
                        </div>
                        <div className="circle" id="right">
                        </div>
                        <div className="circle" id="bottom">
                        </div>
                      </div>

                      <div className="front-content">
                        <h4 className="text-[25px] font-bold leading-tight mb-3">True partnership at its core.</h4>
                        <p>At Eleantz, we don’t just work for you—we work with you, co-creating tailored solutions to drive sustainable growth.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="w-full lg:w-[33.33%] md:px-4">
                <div className="card">
                  <div className="content">
                    <div className="back">
                      <div className="back-content">
                        <h3 className="text-[25px] font-bold">ACCELERATE</h3>
                      </div>
                    </div>
                    <div className="front">

                      <div className="img">
                        <div className="circle">
                        </div>
                        <div className="circle" id="right">
                        </div>
                        <div className="circle" id="bottom">
                        </div>
                      </div>

                      <div className="front-content">
                        <h4 className="text-[25px] font-bold leading-tight mb-3">Speed with precision.</h4>
                        <p>In today’s dynamic marketplace, timing is everything. We accelerate growth by swiftly identifying opportunities and acting on them with data-driven insights. Our agility ensures your brand stays ahead, outpacing the competition in every step.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="w-full lg:w-[33.33%] md:px-4">
                <div className="card">
                  <div className="content">
                    <div className="back">
                      <div className="back-content">
                        <h3 className="text-[25px] font-bold">ELEVATE</h3>
                      </div>
                    </div>
                    <div className="front">

                      <div className="img">
                        <div className="circle">
                        </div>
                        <div className="circle" id="right">
                        </div>
                        <div className="circle" id="bottom">
                        </div>
                      </div>

                      <div className="front-content">
                        <h4 className="text-[25px] font-bold leading-tight mb-3">Raising the bar for excellence.</h4>
                        <p>We elevate your brand by delivering exceptional strategies, optimized operations, and measurable results.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="relative z-20 bg-cover bg-center py-10 lg:py-12">
        <div className="container mx-auto px-4">
          <div className="mb-5 lg:mb-10 max-w-full w-[1100px] mx-auto">
            <h2
              className="text-[30px] md:text-[40px] lg:text-[50px] font-bold text-center font-kanit leading-none"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1000"
            >
              You set the  <span className="text-[#c4262e]">goals.</span> We make them  {" "}
              <span className="text-[#c4262e]"> happen.</span>
            </h2>
          </div>
          <div className="flex flex-wrap justify-center max-w-full w-[1300px] mx-auto">
            <div
              className="w-full md:w-[50%] lg:w-[33.33%] p-3 lg:p-6"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1000"
            >
              <TiltCard className="bg-linear-to-r from-[#fa4851] to-[#c4262c] rounded-2xl p-10 h-full flex justify-between flex-col">
                <div className="h-full">
                  <h3 className="text-[20px] lg:text-[25px] text-white font-bold leading-tight mb-5">
                    Full Stack Marketplace Management
                  </h3>
                  <p className="text-[14px] lg:text-[16px] font-inter text-white">
                    End-to-end management of your marketplace presence from
                    strategy to execution ensuring your business thrives on
                    every platform.
                  </p>
                </div>
                <div className="mt-25">
                  <Link href="/full-stack-marketplace-management">
                    <button className="group relative w-auto cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white px-5 py-2 text-center font-medium text-gray-900 shadow-sm transition-all duration-300 hover:shadow-md">
                      <div className="flex items-center gap-3">
                        <div className="h-2 w-2 rounded-full bg-gray-900 transition-all duration-300 group-hover:scale-[100.8]"></div>
                        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
                          See More
                        </span>
                      </div>

                      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-3 bg-gray-900 text-white opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
                        <div className="flex items-center gap-3 whitespace-nowrap">
                          <span className="leading-none font-medium">
                            See More
                          </span>

                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 leading-none"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth="2.5"
                            aria-hidden="true"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M3 12h14"
                            ></path>
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M13 6l6 6-6 6"
                            ></path>
                          </svg>
                        </div>
                      </div>
                    </button>
                  </Link>
                </div>
              </TiltCard>
            </div>
            <div
              className="w-full md:w-[50%] lg:w-[33.33%] p-3 lg:p-6"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1300"
            >
              <TiltCard className="bg-linear-to-r from-[#fa4851] to-[#c4262c] rounded-2xl p-10 h-full flex justify-between flex-col">
                <div className="h-full">
                  <Link href="#">
                    <h3 className="text-[20px] lg:text-[25px] text-white font-bold leading-tight mb-5">
                      Marketing & Advertising
                    </h3>
                  </Link>
                  <p className="text-[14px] lg:text-[16px] text-white font-inter">
                    We build high-performance ad ecosystems that drive
                    profitable, scalable growth across marketplaces with
                    precision targeting and real-time optimization.
                  </p>
                </div>
                <div className="mt-25">
                  <Link href="/marketing-and-advertisement">
                    <button className="group relative w-auto cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white px-5 py-2 text-center font-medium text-gray-900 shadow-sm transition-all duration-300 hover:shadow-md">
                      <div className="flex items-center gap-3">
                        <div className="h-2 w-2 rounded-full bg-gray-900 transition-all duration-300 group-hover:scale-[100.8]"></div>
                        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
                          See More
                        </span>
                      </div>

                      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-3 bg-gray-900 text-white opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
                        <div className="flex items-center gap-3 whitespace-nowrap">
                          <span className="leading-none font-medium">
                            See More
                          </span>

                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 leading-none"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth="2.5"
                            aria-hidden="true"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M3 12h14"
                            ></path>
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M13 6l6 6-6 6"
                            ></path>
                          </svg>
                        </div>
                      </div>
                    </button>
                  </Link>
                </div>
              </TiltCard>
            </div>
            <div
              className="w-full md:w-[50%] lg:w-[33.33%] p-3 lg:p-6"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1600"
            >
              <TiltCard className="bg-linear-to-r from-[#fa4851] to-[#c4262c] rounded-2xl p-10 h-full flex justify-between flex-col">
                <div className="h-full">
                  <Link href="#">
                    <h3 className="text-[20px] lg:text-[25px] text-white font-bold leading-tight mb-5">
                      Listing & Operations
                    </h3>
                  </Link>
                  <p className="text-[14px] lg:text-[16px] text-white font-inter">
                    We optimize listings and streamline operations to boost
                    visibility, conversions, and catalog health while ensuring
                    smooth, compliant, revenue-ready execution.
                  </p>
                </div>
                <div className="mt-25">
                  <Link href="/listing-and-operations">
                    <button className="group relative w-auto cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white px-5 py-2 text-center font-medium text-gray-900 shadow-sm transition-all duration-300 hover:shadow-md">
                      <div className="flex items-center gap-3">
                        <div className="h-2 w-2 rounded-full bg-gray-900 transition-all duration-300 group-hover:scale-[100.8]"></div>
                        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
                          See More
                        </span>
                      </div>

                      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-3 bg-gray-900 text-white opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
                        <div className="flex items-center gap-3 whitespace-nowrap">
                          <span className="leading-none font-medium">
                            See More
                          </span>

                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 leading-none"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth="2.5"
                            aria-hidden="true"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M3 12h14"
                            ></path>
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M13 6l6 6-6 6"
                            ></path>
                          </svg>
                        </div>
                      </div>
                    </button>
                  </Link>
                </div>
              </TiltCard>
            </div>
            <div
              className="w-full md:w-[50%] lg:w-[33.33%] p-3 lg:p-6"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1900"
            >
              <TiltCard className="bg-linear-to-r from-[#fa4851] to-[#c4262c] rounded-2xl p-10 h-full flex justify-between flex-col">
                <div className="h-full">
                  <Link href="#">
                    <h3 className="text-[20px] lg:text-[25px] text-white font-bold leading-tight mb-5">
                      Sales & Analytics
                    </h3>
                  </Link>
                  <p className="text-[14px] lg:text-[16px] text-white font-inter">
                    We turn data into direction with unified sales insights,
                    TACoS analysis, and performance diagnostics that power
                    sharper decisions and stronger growth.
                  </p>
                </div>
                <div className="mt-25">
                  <Link href="/sales-and-analytics">
                    <button className="group relative w-auto cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white px-5 py-2 text-center font-medium text-gray-900 shadow-sm transition-all duration-300 hover:shadow-md">
                      <div className="flex items-center gap-3">
                        <div className="h-2 w-2 rounded-full bg-gray-900 transition-all duration-300 group-hover:scale-[100.8]"></div>
                        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
                          See More
                        </span>
                      </div>

                      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-3 bg-gray-900 text-white opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
                        <div className="flex items-center gap-3 whitespace-nowrap">
                          <span className="leading-none font-medium">
                            See More
                          </span>

                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 leading-none"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth="2.5"
                            aria-hidden="true"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M3 12h14"
                            ></path>
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M13 6l6 6-6 6"
                            ></path>
                          </svg>
                        </div>
                      </div>
                    </button>
                  </Link>
                </div>
              </TiltCard>
            </div>
            <div
              className="w-full md:w-[50%] lg:w-[33.33%] p-3 lg:p-6"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="2100"
            >
              <TiltCard className="bg-linear-to-r from-[#fa4851] to-[#c4262c] rounded-2xl p-10 h-full flex justify-between flex-col">
                <div className="h-full">
                  <h3 className="text-[20px] lg:text-[25px] text-white font-bold leading-tight mb-5">
                    Creative Strategy & Branding
                  </h3>
                  <p className="text-[14px] lg:text-[16px] text-white font-inter">
                    We craft conversion-driven brand stores, EBC, and
                    creative assets that elevate your brand and directly
                    influence buying decisions.
                  </p>
                </div>
                <div className="mt-25">
                  <Link href="/creative-strategy-and-branding">
                    <button className="group relative w-auto cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white px-5 py-2 text-center font-medium text-gray-900 shadow-sm transition-all duration-300 hover:shadow-md">
                      <div className="flex items-center gap-3">
                        <div className="h-2 w-2 rounded-full bg-gray-900 transition-all duration-300 group-hover:scale-[100.8]"></div>
                        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
                          See More
                        </span>
                      </div>

                      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-3 bg-gray-900 text-white opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
                        <div className="flex items-center gap-3 whitespace-nowrap">
                          <span className="leading-none font-medium">
                            See More
                          </span>

                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 leading-none"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth="2.5"
                            aria-hidden="true"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M3 12h14"
                            ></path>
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M13 6l6 6-6 6"
                            ></path>
                          </svg>
                        </div>
                      </div>
                    </button>
                  </Link>
                </div>
              </TiltCard>
            </div>
            <div
              className="w-full md:w-[50%] lg:w-[33.33%] p-3 lg:p-6"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="2400"
            >
              <TiltCard className="bg-linear-to-r from-[#fa4851] to-[#c4262c] rounded-2xl p-10 h-full flex justify-between flex-col">
                <div className="h-full">
                  <h3 className="text-[20px] lg:text-[25px] text-white font-bold leading-tight mb-5">
                    3P Selling
                  </h3>
                  <p className="text-[14px] lg:text-[16px] font-inter text-white">
                    We act as your managed retail partner handling
                    forecasting, FBA, inventory, and account ownership to grow
                    your brand profitably through 3P channels.
                  </p>
                </div>
                <div className="mt-25">
                  <Link href="/3p-selling">
                    <button className="group relative w-auto cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white px-5 py-2 text-center font-medium text-gray-900 shadow-sm transition-all duration-300 hover:shadow-md">
                      <div className="flex items-center gap-3">
                        <div className="h-2 w-2 rounded-full bg-gray-900 transition-all duration-300 group-hover:scale-[100.8]"></div>
                        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
                          See More
                        </span>
                      </div>

                      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-3 bg-gray-900 text-white opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
                        <div className="flex items-center gap-3 whitespace-nowrap">
                          <span className="leading-none font-medium">
                            See More
                          </span>

                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4 leading-none"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            strokeWidth="2.5"
                            aria-hidden="true"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M3 12h14"
                            ></path>
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              d="M13 6l6 6-6 6"
                            ></path>
                          </svg>
                        </div>
                      </div>
                    </button>
                  </Link>
                </div>
              </TiltCard>
            </div>

          </div>
        </div>
      </section>

      {/*  <section className="py-12 bg-[#f8fafc]">
        <div className="container mx-auto px-4">
          <div className="max-w-full w-[1100px] mx-auto">
            <h2 className="text-[25px] lg:text-[46px] font-semibold text-center font-kanit leading-none">
              Retail media{" "}
              <span className="text-[#c4262c]">isn’t one-size-fits-all.</span>
            </h2>
            <p className="text-[14px] lg:text-[23px] font-inter mt-8 text-center">
              No two retailers are the same. That’s why we customize every
              approach from strategy, to creative, and data are built for how
              each platform actually works.
            </p>
          </div>
          <div className="flex flex-wrap justify-center gap-y-3 mt-10">
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-2">
              <div
                className="bg-[#e1e7ec] rounded-2xl p-10 flex justify-center flex-col gap-y-5"
                data-aos="fade-right"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="500"
              >
                <div>
                  <Image
                    src="/assets/icons/amazon_l.svg"
                    alt="icon"
                    width={100}
                    height={40}
                  />
                </div>
                <div>
                  <h4 className="font-semibold">Amazon Advertising</h4>
                  <p className="text-[16px]">
                    Amazon’s where we started and still where we go the deepest.
                    From search to DSP to AMC, we use data to find what matters
                    and act fast on it.
                  </p>
                </div>
                <div className="flex justify-end">
                  <Link href="#" className="border px-3 py-1 rounded">
                    See More
                  </Link>
                </div>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-2">
              <div
                className="bg-[#e1e7ec] rounded-2xl p-10 flex justify-center flex-col gap-y-5"
                data-aos="fade-right"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1000"
              >
                <div>
                  <Image
                    src="/assets/icons/amazon_l.svg"
                    alt="icon"
                    width={100}
                    height={40}
                  />
                </div>
                <div>
                  <h4 className="font-semibold">Amazon Advertising</h4>
                  <p className="text-[16px]">
                    Amazon’s where we started and still where we go the deepest.
                    From search to DSP to AMC, we use data to find what matters
                    and act fast on it.
                  </p>
                </div>
                <div className="flex justify-end">
                  <Link href="#" className="border px-3 py-1 rounded">
                    See More
                  </Link>
                </div>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-2">
              <div
                className="bg-[#e1e7ec] rounded-2xl p-10 flex justify-center flex-col gap-y-5"
                data-aos="fade-right"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1500"
              >
                <div>
                  <Image
                    src="/assets/icons/amazon_l.svg"
                    alt="icon"
                    width={100}
                    height={40}
                  />
                </div>
                <div>
                  <h4 className="font-semibold">Amazon Advertising</h4>
                  <p className="text-[16px]">
                    Amazon’s where we started and still where we go the deepest.
                    From search to DSP to AMC, we use data to find what matters
                    and act fast on it.
                  </p>
                </div>
                <div className="flex justify-end">
                  <Link href="#" className="border px-3 py-1 rounded">
                    See More
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section> */}


      <HorizontalScrollDiv />

      <section className="py-10 lg:py-20">
        <div className="container mx-auto px-4">
          <div>
            <h2
              className="text-[30px] md:text-[40px] lg:text-[50px] font-bold text-center font-kanit leading-none mb-3"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1000"
            >
              Why stop at five? Let’s <span className="text-[#c4262e]"> expand your reach! </span>
            </h2>
          </div>
          <div className="mt-10">
            <MarketplaceLogo />
          </div>
        </div>
      </section>

      <section className="pt-20 pb-10 lg:py-20">
        <div className="max-w-full w-[1200px] mx-auto mb-10 px-4">
          <h2
            className="text-[35px] md:text-[40px] lg:text-[50px] font-bold text-center font-kanit leading-none mb-3"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1000"
          >
            Words from the <span className="text-[#c4262e]">winners</span>
          </h2>
        </div>
        <div
          data-aos="fade-up"
          data-aos-anchor-placement="top-bottom"
          data-aos-duration="1500"
        >
          <Splide
            ref={splideRef}
            aria-label="Client Logos"
            extensions={{ AutoScroll }}
            options={{
              type: "loop",
              perPage: 4,
              perMove: 1,
              gap: "2.5rem",
              arrows: false,
              pagination: false,
              autoScroll: {
                speed: 1,
                pauseOnHover: true,
                pauseOnFocus: false,
              },
              breakpoints: {
                1024: {
                  perPage: 3,
                  perMove: 1,
                  padding: "1rem",
                },
                640: {
                  perPage: 1,
                },
              },
            }}
          >
            {testimonialData.map((item) => (
              <SplideSlide key={item.id}>
                <div className="relative w-full h-auto bg-[#ecf2f6] rounded-2xl py-5 px-5 shadow-lg flex justify-center flex-col">
                  <div>
                    <Image
                      className=""
                      src={item.image}
                      alt="Image 1"
                      width={50}
                      height={50}
                    />
                    <div>
                      <p className="text-[14px] lg:text-[18px] font-inter italic my-5">
                        {item.text}
                      </p>
                      <span className="text-[20px] text-[#c4262e] font-semibold">
                        {item.company}
                      </span>
                    </div>
                  </div>
                </div>
              </SplideSlide>
            ))}
          </Splide>
        </div>
      </section>

      <section className="pb-12">
        <div className="container mx-auto px-4">
          <div className="w-full mx-auto h-[500px] flex flex-col md:flex-row shadow-2xl rounded-none rounded-xl md:rounded-2xl overflow-hidden bg-white">

            <div className="relative w-full md:w-1/2 h-full group overflow-hidden cursor-pointer">
              <div className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" style={{ backgroundImage: "url('/assets/img/74.jpg')" }}></div>

              <div className="absolute inset-0 bg-gray-900/60 group-hover:bg-gray-900/50 transition-colors duration-500"></div>

              <div className="relative z-10 h-full flex flex-col justify-center items-center text-center p-4 lg:p-8">
                <h2 className="text-[22px] lg:text-4xl font-extrabold text-white lg:mb-6 tracking-tight translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                  Real Results, Real Impact
                </h2>

                <Link href="/case-study" className="inline-flex items-center gap-2 px-8 py-2 lg:py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-indigo-50 transition-all duration-300 transform translate-y-8 lg:opacity-0 group-hover:opacity-100 group-hover:translate-y-0">
                  Explore Case Studies
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </Link>
              </div>
            </div>

            <div className="relative w-full md:w-1/2 h-full group overflow-hidden cursor-pointer border-t md:border-t-0 md:border-l border-white/20">
              <div className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" style={{ backgroundImage: " url('/assets/img/blogs.jpg')" }}></div>

              <div className="absolute inset-0 bg-bg-gray-900/60 group-hover:bg-gray-900/50 transition-colors duration-500"></div>

              <div className="relative z-10 h-full flex flex-col justify-center items-center text-center p-4 lg:p-8">
                <h2 className="text-[22px] lg:text-4xl font-extrabold text-white lg:mb-6 tracking-tight translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                  The Eleantz Advantage: <span className="">Insights That Matter</span>
                </h2>

                <Link href="/blogs" className="inline-flex items-center gap-2 px-8 py-2 lg:py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-indigo-50 transition-all duration-300 transform translate-y-8 lg:opacity-0 group-hover:opacity-100 group-hover:translate-y-0">
                  Read Our Insights
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </Link>
              </div>
            </div>
          </div>


          {/* <div className="flex flex-wrap gap-y-4">
              <div className="w-full lg:w-[50%] md:px-4">
                    <div className="mb-5">
                        <h3 className="text-[27px] font-bold leading-tight">Real Results, <span className="">Real Impact </span></h3>
                    </div>
                  <div className="">
                    <Image className="rounded-xl" src='/assets/img/caseStudy.webp' alt="" width={800} height={500} />
                  </div>
              </div>
              <div className="w-full lg:w-[50%] md:px-4">
                    <div className="mb-5">
                        <h3 className="text-[27px] font-bold leading-tight">The Eleantz Advantage: <span className="">Insights That Matter</span></h3>
                    </div>
                  <div className="group relative">
                    <Image className="rounded-xl" src='/assets/img/blogs.webp' alt="" width={800} height={500} />
                  </div>
              </div>
            </div> */}
        </div>
      </section>

      <section className="pb-6 lg:pb-12">
        <div className="container mx-auto px-4">
          <div className="">
            <div className="bg-gray-900 rounded-3xl p-10 md:p-16 relative overflow-hidden">
              <div className="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-indigo-600 rounded-full blur-3xl opacity-20"></div>

              <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8 text-center md:text-left">

                <div className="max-w-2xl">
                  <h2 className="text-2xl md:text-4xl font-bold text-white mb-4">
                    Ready to Take Your Marketplace Growth to the Next Level?
                  </h2>
                  <p className="text-indigo-200 text-[15px] lg:text-lg font-light">
                    If you’re looking for a partner who’ll optimize your listings, scale your operations, and drive performance across multiple marketplaces, let’s connect.
                  </p>
                </div>

                <div className="shrink-0">
                  <button onClick={()=> openModal("contactForm")} className="bg-white text-gray-900 hover:bg-indigo-50 transition-colors px-3 lg:px-8 py-4 rounded-xl font-bold text-[15px] lg:text-lg shadow-lg flex items-center gap-2 group">
                    Get a complimentary marketplace growth audit
                    <svg className="w-5 h-5 text-indigo-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                  </button>
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}