"use client";

import Image from "next/image";
import React, { useEffect, useRef } from "react";
import AOS from "aos";
import Faq from "../components/Faq";
import ServiceScrollStickyDiv from "../components/ServiceScrollStickyDiv";
import WhyChooseAleantz from "../components/WhyChooseAleantz";
import AdvertisingProcess from "../components/AdvertisingProcess";
import OurClients from "../components/OurClients";
import { salseAndAnalyticsScroll } from "../data/serviceScrollData";
import { saleAndAnalyticsProcessData } from "../data/advertisingProcessData";
import { marketingAndAdFaqData } from "../data/faqData";
import { salesAndAnalyticsWhyChooseSData } from "../data/whyChooseEleantzData";
import MarketplaceLogoServices from "../components/MarketplaceLogoServices";
import useFormModal from "../store/useFormModal";
import BookSessionbtn from "../components/BookSessionbtn";

function SalseAndAnalytics() {
  const {openModal} = useFormModal()
  const videoRef = useRef<HTMLVideoElement | null>(null);
  useEffect(() => {
    AOS.init();
  }, []);

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

  return (
    <main>
      <section className="px-4">
        <div className="h-[70vh] lg:h-[83vh] mt-22 lg:mt-26 mx-auto container rounded-3xl bg-black overflow-hidden relative">
          <video
            ref={videoRef}
            className="absolute top-0 w-full h-[83vh] object-cover opacity-50"
            src="/assets/video/vds6.mp4"
            muted
            loop
            autoPlay
            playsInline
            webkit-playsinline="true"
          />
          {/* <Image src='/assets/video/vds.gif' alt="" width={1900} height={700} /> */}
          <div className="px-4 w-full container mx-auto absolute top-[50%] -translate-y-1/2 left-1/2 -translate-x-1/2 z-50">
            <div className="flex flex-wrap gap-y-3">
              <div className="w-full flex justify-center flex-col gap-y-4 lg:gap-y-6">
                <div className="text-center">
                  <h1
                    className="text-[24px] md:text-[45px] xl:text-[65px] text-white font-semibold font-kanit leading-tight mb-4"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1500"
                  >
                    Data that drives decisions{" "}
                    <br className="hidden lg:block" />
                    <span className="text-[#c4262e]">not just reports</span>
                  </h1>
                 {/*  <p
                    className="text-[14px] md:text-[18px] xl:text-[20px] text-white font-semibold w-full mx-auto max-w-[650px] xl:max-w-[750px]"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1800"
                  >
                    We turn marketplace data across Amazon, Walmart, Target,
                    Etsy, and eBay into clear direction so growth decisions are
                    grounded in reality, not gut feel.
                  </p> */}
                </div>
                <div
                  className="flex justify-center gap-4"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="2000"
                >
                  <BookSessionbtn/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="pt-6 lg:pt-12 overflow-hidden">
        <div className="container mx-auto px-4">
          <div className="mb-5 lg:mb-10">
            {/*  <p
              className="text-[16px] md:text-[20px] text-[#c4262e] text-center font-semibold mb-2"
              data-aos="zoom-out-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1200"
            >
              Why Choose Us
            </p> */}
            {/* <h2
              className="text-[25px] md:text-[40px] lg:text-[50px] text-center font-semibold font-kanit leading-none"
              data-aos="zoom-out-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1200"
            >
              Data is only valuable when{" "}
              <span className="text-[#c4262e]">it drives decisions</span>
            </h2> */}
          </div>
          <div className="flex flex-wrap gap-y-3">
            <div className="w-full lg:w-[50%] flex justify-start flex-col order-2 lg:order-1">
              <div className="lg:px-10">
                <p className="text-[18px] md:text-[18px]">
                  Most brands are drowning in reports but starving for clarity.
                </p>
                <p className="text-[18px] md:text-[18px] mt-1">
                  We focus on analytics that actually inform what to price, what
                  to promote, what to restock, and what to stop selling — not
                  dashboards built for observation alone.
                </p>
              </div>
            </div>
            <div className="w-full lg:w-[50%] order-1 lg:order-2">
            <h2 className="text-[25px] lg:text-[45px] font-bold leading-tight">Data isn’t <span className="text-[#c4262e]">insight.</span></h2>
            <h2 className="text-[25px] lg:text-[45px] font-bold leading-tight"><span className="text-[#c4262e]">Clarity</span> is.</h2>
            </div>
          </div>
        </div>
      </section>

      <section className="py-6 lg:py-20">
        <OurClients />
      </section>

      <section className="bg-neutral-100 py-20">
        <div className="container mx-auto px-4">
          <h2
            className="text-center text-[25px] md:text-[40px] lg:text-[50px] font-semibold font-kanit leading-none w-full max-w-[900px] mx-auto"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1200"
          >
            Where marketplace analytics <br className="hidden lg:block" />
            <span className="text-[#c4262e]">usually fall short</span>
          </h2>
          <div className="flex flex-wrap gap-y-3 justify-center mt-10">
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1200"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/disconnected.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Disconnected data
                </h3>
                <p className="text-[16px]">
                  Each marketplace tells a partial story — without
                  consolidation, decisions stay fragmented.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1500"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/lost.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Revenue without profitability context
                </h3>
                <p className="text-[16px]">
                  Top-line growth hides margin erosion at the SKU and channel
                  level.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1800"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/leadership.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Vanity metrics over decision metrics
                </h3>
                <p className="text-[16px]">
                  Traffic and impressions rise while contribution margins
                  quietly decline.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="2100"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/hourglass.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Lagging indicators
                </h3>
                <p className="text-[16px]">
                  Problems surface after damage is done — not early enough to
                  course-correct.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="2400"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/insight.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Insights without action
                </h3>
                <p className="text-[16px]">
                  Reports explain what happened, but not what to do next.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="pb-6 lg:pb-12">
        <div className="container mx-auto px-4">
          <div className="mb-10"></div>
          <h2
            className="text-center text-[25px] md:text-[40px] lg:text-[50px] font-kanit font-semibold mb-5 md:mb-10"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1000"
          >
            What <span className="text-[#c4262e]">we do</span>
          </h2>
          <ServiceScrollStickyDiv
            serviceScrollDatas={salseAndAnalyticsScroll}
          />
        </div>
      </section>

      <section className="pt-10 pb-24 lg:pt-20 lg:pb-32 bg-neutral-100">
        <div className="container mx-auto px-4">
          <div className="mb-5 lg:mb-16">
            <h2
              className="text-[30px] md:text-[40px] lg:text-[50px] text-center font-semibold font-kanit leading-none mb-3"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1000"
            >
              Marketplace expertise, {" "}
              <span className="text-[#c4262e]">wherever you sell</span>
            </h2>
            <p
              className="text-[16px] md:text-[20px] text-center font-medium"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1800"
            >
              We speak the language of every platform we operate in — because
              performance depends on it.
            </p>
          </div>
          <MarketplaceLogoServices />
        </div>
      </section>

      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className=" ">
            <div>
              <h2
                className="text-[25px] md:text-[40px] lg:text-[50px] font-semibold text-center font-kanit leading-none"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1000"
              >
                Why brands trust <span className="text-[#c4262c]">Eleantz</span>
              </h2>
              {/*  <p className="text-center text-[14px] lg:text-[20px] font-inter mt-4 w-full max-w-[800px] mx-auto">
                We’ve built our reputation on two things: results that matter
                and relationships that last. A 95% average retention rate says
                we’re doing something right.
              </p> */}
            </div>
            <WhyChooseAleantz whyChooseData={salesAndAnalyticsWhyChooseSData} />
          </div>
        </div>
      </section>

      <section className="pt-12 pb-28">
        <div className="container mx-auto px-4">
          <div className="mb-10">
            <h2
              className="text-[25px] md:text-[40px] lg:text-[50px] font-semibold text-center font-kanit leading-none"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1000"
            >
              Our sales & analytics <span className="text-[#c4262c]">framework</span>
            </h2>
          </div>
          <div>
            <AdvertisingProcess adProcess={saleAndAnalyticsProcessData} />
          </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 md:flex-row items-center justify-between gap-8 text-center md:text-left">

                  <div className="max-w-2xl">
                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                    One View. Better Decisions.
                    </h2>
                    <p className="text-indigo-200 text-lg font-light">
                    Want clarity across every marketplace you sell on?
                    </p>
                  </div>

                  <div className="shrink-0">
                    <button onClick={()=> openModal("contactForm")} className="bg-white text-gray-900 hover:bg-indigo-50 transition-colors px-8 py-4 rounded-xl font-bold text-lg shadow-lg flex items-center gap-2 group">
                    Get Your Complimentary Account Audit Today
                      <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 className="flex flex-wrap gap-y-4 text-center lg:text-start bg-[#f3f4f6] stat-box px-5 lg:ps-8 py-8 rounded-3xl">
            <div className="w-full lg:w-[60%]">
              <h2 className="text-[18px] md:text-[35px] font-bold leading-tight mb-1">
                 One View. Better Decisions.
              </h2>
              <p className="text-[14px] md:text-[17px] text-gray-600">
                Want Clarity Across Every Marketplace You Sell On?
              </p>
            </div>
            <div className="w-full lg:w-[40%] flex justify-center flex-col">
              <div>
                <Button
                  variant="contained"
                  sx={{
                    display: "block",
                    mx: "auto",
                    borderRadius: "50px",
                    background: "#c4262c",
                  }}
                >
                  Get Your Complimentary Account Audit Today
                </Button>
              </div>
            </div>
          </div> */}
        </div>
      </section>

      <section className="py-12 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="mb-5 lg:mb-10">
            <h2
              className="text-[25px] md:text-[40px] lg:text-[50px] text-center font-semibold font-kanit leading-none"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1000"
            >
              Frequently <span className="text-[#c4262c]">asked questions</span>
            </h2>
          </div>
          <Faq faqData={marketingAndAdFaqData} />
        </div>
      </section>
    </main>
  );
}

export default SalseAndAnalytics;