"use client";

import { Button } from "@mui/material";
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 Link from "next/link";
import ExpandableDiv from "../components/ExpandableDiv";
import WhyChooseAleantz from "../components/WhyChooseAleantz";
import AdvertisingProcess from "../components/AdvertisingProcess";
import OurClients from "../components/OurClients";
import { marketingAndAdvertisementScroll } from "../data/serviceScrollData";
import { marketingAndAdvertisementExpandData } from "../data/expandableDivData";
import { marketingAndAdProcessData } from "../data/advertisingProcessData";
import { marketingAndAdFaqData } from "../data/faqData";
import { marketingAndAdWhyChooseSData } from "../data/whyChooseEleantzData";
import MarketplaceLogo from "../components/MarketplaceLogo";
import useFormModal from "../store/useFormModal";
import BookSessionbtn from "../components/BookSessionbtn";


function MarketingAndAdvertisement() {
  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/vds1.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"
                  >
                    Performance driven marketplace{" "}
                    <br className="hidden lg:block" />
                    advertising,{" "}
                    <span className="text-[#c4262e]">managed by humans.</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-[950px]"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1800"
                  >
                    We plan, execute, and optimize paid media across Amazon,
                    Walmart, Target, Etsy, and eBay using real performance metrics
                    like CTR, CVR, ACoS, TACoS, and ROAS, not set-and-forget
                    automation.
                  </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"
            >
              <span className="text-[#c4262e]">Advertising</span> Built for{" "}
              <span className="text-[#c4262e]">Modern Marketplaces</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]">
                  Marketplace advertising today is not just about running ads
                  it’s about understanding{" "}

                  auction mechanics, placement logic, audience intent, and
                  attribution models{" "}

                  across platforms.
                </p>
                <p className="text-[18px] md:text-[18px] mt-1">
                  At Eleantz, we manage paid media with a retail-media-first
                  mindset, aligning visibility, efficiency, and scale across
                  multiple marketplaces — without operating in silos. While
                  automation and tools support execution, strategic decisions
                  are always human-led — because performance marketing still
                  requires judgment, context, and experience.
                </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">Advertising <span className="text-[#c4262e]">alone</span> doesn’t drive <span className="text-[#c4262e]">growth. Decisions</span> do.</h2>
            </div>
          </div>
        </div>
      </section>

      <section className="py-6 lg:py-20">
        {/* <Splide
          ref={splideRef}
          aria-label="Client Logos"
          extensions={{ AutoScroll }}
          options={{
            type: "loop",
            perPage: 2,
            perMove: 1,
            gap: ".5rem",
            drag: true,
            direction: "ltr",
            trimSpace: true,
            live: true,
            arrows: false,
            pagination: false,
            autoHeight: true,
            autoWidth: true,
            autoScroll: {
              speed: 1,
              pauseOnHover: false,
              pauseOnFocus: false,
            },
            breakpoints: {
              1024: {
                perPage: 3,
                perMove: 1,
              },
            },
          }}
        >
          {[
            "Market & Advertisement",
            "Listing & Operation",
            "Sales & Analytics",
            "Creative Strategy",
            "3P Selling",
          ].map((ele, i) => {
            return (
              <SplideSlide key={i}>
                <div className="flex items-center gap-x-5 px-8">
                  <svg
                    className="w-16 h-16 lg:w-22 lg:h-22"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 80 80"
                    fill="#888888"
                  >
                    <path
                      fill="#888888"
                      d="M78.4,38.4c0,0-11.8,0-15.8,0c-1.6,0-4.8-0.2-7.1-0.8c-2.3-0.6-4.3-0.8-6.3-2.4c-2-1.2-3.5-3.2-4.7-4.8 c-1.2-1.6-1.6-3.6-2-5.5c-0.3-1.5-0.7-4.3-0.8-5.9c-0.2-4.3,0-17.4,0-17.4C41.8,0.8,41,0,40.2,0s-1.6,0.8-1.6,1.6c0,0,0,13.1,0,17.4 c0,1.6-0.6,4.3-0.8,5.9c-0.3,2-0.8,4-2,5.5c-1.2,2-2.8,3.6-4.7,4.8s-4,1.8-6.3,2.4c-1.9,0.5-4.7,0.6-6.7,0.8c-3.9,0.4-16.6,0-16.6,0 C0.8,38.4,0,39.2,0,40c0,0.8,0.8,1.6,1.6,1.6c0,0,12.2,0,16.6,0c1.6,0,4.8,0.3,6.7,0.8c2.3,0.6,4.3,0.8,6.3,2.4 c1.6,1.2,3.2,2.8,4.3,4.4c1.2,2,2.1,3.9,2.4,6.3c0.2,1.7,0.7,4.7,0.8,6.7c0.2,4,0,16.2,0,16.2c0,0.8,0.8,1.6,1.6,1.6 s1.6-0.8,1.6-1.6c0,0,0-12.3,0-16.2c0-1.6,0.5-5.1,0.8-6.7c0.5-2.3,0.8-4.4,2.4-6.3c1.2-1.6,2.8-3.2,4.3-4.4c2-1.2,3.9-2,6.3-2.4 c1.8-0.3,5.1-0.7,7.1-0.8c3.5-0.2,15.8,0,15.8,0c0.8,0,1.6-0.8,1.6-1.6C80,39.2,79.2,38.4,78.4,38.4C78.4,38.4,78.4,38.4,78.4,38.4z "
                    ></path>
                  </svg>
                  <h2 className="text-[32px] lg:text-[90px] text-[#888888]">
                    {ele}
                  </h2>
                </div>
              </SplideSlide>
            );
          })}
        </Splide> */}
        <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"
          >
            The real complexities of<br className="hidden lg:block" />
            <span className="text-[#c4262e]">marketplace advertising</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/expenses.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">Wasted Ad Spend</h3>
                <p className="text-[16px]">
                  Poor keyword hygiene, inefficient bids, over-broad targeting,
                  and unchecked automation drive impressions without conversions
                  — quietly eroding ROAS.
                </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/graph.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Rising Competition & CPC Inflation
                </h3>
                <p className="text-[16px]">
                  As auctions tighten, automated bidding without human oversight
                  often inflates CPCs without improving CTR or CVR.
                </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/circle-button.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Low Visibility Where It Matters
                </h3>
                <p className="text-[16px]">
                  Ads may run continuously, but without placement control and
                  strategic intervention, they miss high-intent touchpoints.
                </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/conflict.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Conflicting Performance Metrics
                </h3>
                <p className="text-[16px]">
                  Optimizing purely for ACoS can stall growth. Scaling without
                  TACoS control can hurt profitability. These trade-offs require
                  active decision-making, not rules alone.
                </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/planning.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  One Strategy Applied Across All Marketplaces
                </h3>
                <p className="text-[16px]">
                  Automation-first approaches often reuse the same logic
                  everywhere leading to inefficiency and missed opportunity
                  across platforms. At Eleantz, we don’t let automation decide
                  strategy. We use it as a tool not a replacement.
                </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={marketingAndAdvertisementScroll}
          />
        </div>
      </section>

      <section className="py-10 lg:py-20 bg-neutral-100">
        <div className="container mx-auto px-4">
          <div className="mb-5 lg:mb-16">
            <h2
              className="text-[25px] 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 specific{" "}
              <span className="text-[#c4262e]">advertising expertise</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>
          <ExpandableDiv
            expandableData={marketingAndAdvertisementExpandData}
          />

          <div className="mt-10">
            <MarketplaceLogo />
          </div>
        </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 choose <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={marketingAndAdWhyChooseSData}
            />
          </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 <span className="text-[#c4262c]">Advertising Process</span>
            </h2>
          </div>
          <div>
            <AdvertisingProcess
              adProcess={marketingAndAdProcessData}
            />
          </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">
                    Ready to Scale Marketplace Advertising With Real Oversight?
                  </h2>
                  <p className="text-indigo-200 text-lg font-light">
                    If you’re looking for advertising that’s actively managed,
                    strategically guided, and performance-driven, let’s talk.
                  </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 a Free Marketplace Advertising 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 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-[25px] font-bold leading-tight mb-3">
                Ready to Scale Marketplace Advertising With Real Oversight?
              </h2>
              <p className="text-[14px] md:text-[17px]">
                If you’re looking for advertising that’s actively managed,
                strategically guided, and performance-driven, let’s talk.
              </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 a Free Marketplace Advertising Audit
                </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 MarketingAndAdvertisement;