"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 OurClients from "../components/OurClients";
import { fullstackScroll } from "../data/serviceScrollData";
import { marketingAndAdFaqData } from "../data/faqData";
import MarketplaceLogoServices from "../components/MarketplaceLogoServices";
import useFormModal from "../store/useFormModal";
import BookSessionbtn from "../components/BookSessionbtn";


function page() {
  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/vds4.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"
                  >
                    Full-Stack Marketplace {" "}
                    <br className="hidden lg:block" />
                    <span className="text-[#c4262e]">Account Management</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"
            >
              One team. Total ownership. {" "}
              <span className="text-[#c4262e]">Real growth.</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]">
                  We don’t manage pieces of your Amazon or Walmart or any e-commerce business.
                </p>
                <p className="text-[18px] md:text-[18px] mt-1">
                  We manage the entire account — strategy, execution, fixes, scale, and accountability.
                </p>
                <p className="text-[18px] md:text-[18px] mt-1">
                  Every brand works with a dedicated Account Manager who owns the account end-to-end, ensuring faster decisions, tighter execution, and clear ownership across listings, ads, operations, and performance.
                </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">One <span className="text-[#c4262e]">team.</span> Total <span className="text-[#c4262e]">ownership.</span> Real <span className="text-[#c4262e]">growth.</span></h2>
             {/*  <h2 className="text-[25px] lg:text-[45px] font-semibold leading-tight">It happens when someone owns the whole system.</h2> */}
            </div>
          </div>
        </div>
      </section>

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

      <section className="bg-neutral-100 py-6 lg: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 mb-3"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1200"
          >
            The problem most {" "}
            <span className="text-[#c4262e]">brands face</span>
          </h2>
          <p className="text-center text-[20px] font-medium"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1500"
          >Most brands don’t fail because of bad products.</p>
          <p className="text-center text-[20px] font-medium"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1700"
          >They struggle because marketplace management is fragmented.</p>
          <div className="flex flex-wrap gap-y-3 justify-center my-5 md:my-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 group"

              >
                <Image
                  src="/assets/icons/efficiency.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] lg:text-[23px] font-semibold my-3">Ads are optimized without fixing listings</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 group">
                <Image
                  src="/assets/icons/graph.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] lg:text-[23px] font-semibold my-3">
                  Inventory runs out while campaigns are scaling
                </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 group"
              >
                <Image
                  src="/assets/icons/compliant.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] lg:text-[23px] font-semibold my-3">
                  Compliance breaks momentum overnight
                </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 group"

              >
                <Image
                  src="/assets/icons/document.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] lg:text-[23px] font-semibold my-3">
                  Operations run without proper planning
                </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 group"

              >
                <Image
                  src="/assets/icons/idea.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] lg:text-[23px] font-semibold my-3">
                  No single owner is accountable when things go wrong
                </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 className="rounded-2xl mx-auto my-10">
            <div className="flex flex-wrap">
                <div className="w-full lg:w-[25%] bg-white p-5">
                    <p className="text-[25px] font-semibold text-center">Ads are optimized without fixing listings</p>
                </div>
                <div className="w-full lg:w-[25%] bg-white p-5">
                    <p className="text-[25px] font-semibold text-center">Inventory runs out while campaigns are scaling</p>
                </div>
                <div className="w-full lg:w-[25%] bg-white p-5">
                    <p className="text-[25px] font-semibold text-center">Compliance breaks momentum overnight</p>
                </div>
                <div className="w-full lg:w-[25%] bg-white p-5">
                    <p className="text-[25px] font-semibold text-center">Operations react instead of planning</p>
                </div>
                <div className="w-full lg:w-[25%] bg-white p-5">
                    <p className="text-[25px] font-semibold text-center">No single owner is accountable when things go wrong</p>
                </div>
            </div>
          </div> */}
          <div className=" rounded-3xl p-5 md:p-14 text-center relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-full z-0"></div>

            <div className="relative z-10">
              <p className="text-gray-900 uppercase tracking-widest text-[30px] lg:text-[35px] font-bold mb-4">The Result</p>
              <div className="flex flex-col md:flex-row justify-center items-center gap-4 md:gap-12">
                <div className="text-black text-2xl md:text-3xl font-bold">
                  Growth <span className="text-gray-700 font-normal italic">without</span> Control.
                </div>
                <div className="hidden md:block w-px h-12 bg-gray-700"></div>
                <div className="text-black text-2xl md:text-3xl font-bold">
                  Control <span className="text-gray-700 font-normal italic">without</span> Growth.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-10 lg:py-20">
        <div className="container mx-auto px-4">
          <div className="">

            <h2
              className="text-center text-[30px] md:text-[40px] lg:text-[50px] font-semibold font-kanit leading-none w-full max-w-[900px] mx-auto mb-3"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1200"
            >
              What <span className="text-[#c4262e]">full stack</span> account management<br className="hidden md:block" /> means at <span className="text-[#c4262e]">Eleantz</span>
            </h2>
            <p className="text-center text-[20px] font-medium"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1500"
            >
              We take end-to-end ownership of your marketplace account.
            </p>
           {/*  <p className="text-center text-[20px] font-medium w-full max-w-[800px] mx-auto"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1500"
            >
              Each brand is managed by a dedicated Account Manager — not a shared team or ticket queue — with a 24-hour SLA on all tasks, issues, and escalations.
            </p> */}

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-3 items-end mb-10 lg:mb-14 mt-5 lg:mt-14">

              <div className="space-y-8">
                <div className="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
                  <ul className="space-y-4">
                    <li className="font-medium">Each brand is managed by a dedicated Account Manager.</li>
                    <li className="flex items-start gap-3 opacity-40">
                      <svg className="w-6 h-6 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                      <span className="line-through">Not a shared team</span>
                    </li>
                    <li className="flex items-start gap-3 opacity-40">
                      <svg className="w-6 h-6 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                      <span className="line-through">No ticket queues</span>
                    </li>
                    <li className="flex items-center gap-3 font-bold text-indigo-900 bg-indigo-50 p-3 rounded-lg -mx-3">
                      <svg className="w-6 h-6 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                      <span>A Dedicated Account Manager</span>
                    </li>
                  </ul>
                </div>
              </div>

              <div className="relative group h-full">
              {/*   <div className="absolute -inset-1 bg-linear-to-r from-[#c4262ec6] to-red-300 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div> */}

                <div className="relative bg-white rounded-2xl p-8 border border-gray-100 shadow-xl h-full">

                  <div className="bg-gray-50 rounded-xl p-5 border border-gray-100 mb-2 h-full">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">The Promise With</span>
                      <svg className="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <div className="text-3xl font-bold text-gray-900">24-Hour SLA</div>
                    <p className="text-sm text-gray-500 mt-1">On all tasks, issues, and escalations.</p>
                  </div>
                </div>
              </div>
            </div>

            <div className=" text-center">
              <div className="inline-block text-left">
                <div>
                  <div className="text-2xl md:text-6xl font-black tracking-tight text-gray-300 mb-2">
                    <span className="line-through decoration-4 decoration-red-400/50">NOT COORDINATION.</span>
                  </div>
                  <div className="text-2xl md:text-6xl font-black tracking-tight text-gray-300 mb-6">
                    <span className="line-through decoration-4 decoration-red-400/50">NOT SUPERVISION.</span>
                  </div>
                </div>

                <div className="relative mt-8">
                  <div className="absolute -inset-2 bg-[#c4262e] transform -skew-y-2 rounded-lg z-0 shadow-lg"></div>
                  <div className="relative z-10 text-xl md:text-5xl font-black text-white px-2 leading-tight">
                    EXECUTION COUPLED WITH<br /> DECISION MAKING.
                  </div>
                </div>
              </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"
          >
            How <span className="text-[#c4262e]">we work</span>
          </h2>
          <ServiceScrollStickyDiv
            serviceScrollDatas={fullstackScroll}
          />
        </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"
              >
                What you get with <span className="text-[#c4262c]">Eleantz</span>
              </h2>
            </div>
            <div className="flex flex-wrap justify-center gap-y-2 md:gap-y-8 mt-8 md:mt-10">
              {fullstackWhyChooseSData.map((item, i) => {
                return (
                  <div
                    key={i}
                    className="w-full md:w-[33.33%] lg:w-[20%] md:px-2"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration={1000 + i * 100}
                  >
                    <div className="bg-gray-50 stat-box rounded-2xl p-6 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group h-full">
                      <h3 className="text-[20px] font-bold">{item.title}</h3>
                      <p className="text-gray-700 text-[14px]">{item.desc}</p>
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="mt-10">
              <p className="text-center text-[22px] font-medium mb-1">We don’t just run tasks.</p>
              <p className="text-center text-[22px] font-medium">We run the business logic behind them.</p>
            </div>
          </div>
        </div>
      </section> */}

      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className="">

            <div className="text-center mb-16">
              <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"
              >
                What You Get With <span className="text-[#c4262c]">Eleantz</span>
              </h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">

              <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
                <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform text-[#c4262c]">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                </div>
                <h3 className="text-lg font-bold mb-2">Single Point of Ownership</h3>
                <p className="text-gray-500 text-sm">through a dedicated Account Manager.</p>
              </div>

              <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
                <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform text-[#c4262c]">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <h3 className="text-lg font-bold mb-2">Clear Accountability</h3>
                <p className="text-gray-500 text-sm">across strategy and execution.</p>
              </div>

              <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
                <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform text-[#c4262c]">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <h3 className="text-lg font-bold mb-2">24-Hour SLA</h3>
                <p className="text-gray-500 text-sm">on communication and escalations.</p>
              </div>

              <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
                <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform text-[#c4262c]">
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                </div>
                <h3 className="text-lg font-bold mb-2">Proactive Management</h3>
                <p className="text-gray-500 text-sm">not reactive fixes.</p>
              </div>

              <div className="md:col-span-2 bg-linear-to-l from-[#c4262c] to-[#f33239] p-8 rounded-2xl shadow-lg text-white flex flex-col md:flex-row items-center gap-6 relative overflow-hidden group">
                <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>

                <div className="bg-white/20 w-16 h-16 rounded-full flex items-center justify-center flex-shrink-0 backdrop-blur-sm">
                  <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                </div>

                <div className="relative z-10">
                  <h3 className="text-2xl font-bold mb-2">Operator Mindset</h3>
                  <p className="text-white text-lg opacity-90">not agency checkbox work.</p>
                </div>
              </div>

            </div>

            <div className="bg-gray-900 rounded-3xl p-10 text-center relative overflow-hidden border border-gray-800">
              <div className="absolute top-0 left-0 w-full h-1 bg-linear-to-r from-green-400 via-blue-500 to-purple-600"></div>

              <div className="max-w-3xl mx-auto">
                <span className="text-2xl md:text-4xl font-bold text-gray-500">We don’t just run tasks.</span>
                <br />
                <span className="text-3xl md:text-5xl font-extrabold text-white mt-4 block">
                  We run the <span className="text-transparent bg-clip-text bg-[#c4262c]">business logic</span> behind them.
                </span>
              </div>
            </div>

          </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="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-extrabold mb-4">Who <span className="text-[#c4262c]">this is best for</span></h2>
            <p className="text-center text-[14px] lg:text-[20px] font-inter mt-4 w-full max-w-[800px] mx-auto">
              If you want peace of mind and performance, we built this for you.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
              <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform">
                😫
              </div>
              <h3 className="font-bold text-lg mb-2">The Tired Brand</h3>
              <p className="text-gray-500 text-sm leading-relaxed">Exhausted from managing multiple vendors who don't talk to each other.</p>
            </div>

            <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
              <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform">
                📞
              </div>
              <h3 className="font-bold text-lg mb-2">The Busy Founder</h3>
              <p className="text-gray-500 text-sm leading-relaxed">You want fewer update calls and better outcomes. You value time over micromanagement.</p>
            </div>

            <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
              <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform">
                🚀
              </div>
              <h3 className="font-bold text-lg mb-2">The Scaling Team</h3>
              <p className="text-gray-500 text-sm leading-relaxed">Scaling revenue fast but lacking the internal bandwidth to handle marketplace complexity.</p>
            </div>

            <div className="bg-gray-50 stat-box rounded-2xl p-8 hover:bg-white hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-gray-100 group">
              <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-2xl group-hover:scale-110 transition-transform">
                ⚓
              </div>
              <h3 className="font-bold text-lg mb-2">The New Entrant</h3>
              <p className="text-gray-500 text-sm leading-relaxed">Entering new marketplaces and needing immediate operational stability.</p>
            </div>
          </div>
        </div>
      </section>


      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className="bg-gray-900 stat-box border border-transparent rounded-3xl p-8 md:p-16 text-black relative overflow-hidden">
            <div className="absolute top-0 right-0 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-pulse"></div>

            <div className="relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">

              <div className="lg:col-span-4">
                <h2 className="text-3xl md:text-4xl font-extrabold mb-6">Why brands choose <span className="text-[#c4262c]">Eleantz</span></h2>
                <p className="text-gray-700 text-lg leading-relaxed">
                  Because marketplaces don’t reward half-measures. We refuse to compromise on the details.
                </p>
              </div>

              <div className="lg:col-span-8 bg-gray-800 rounded-2xl p-1 shadow-2xl border border-gray-700">
                <div className="grid grid-cols-1 md:grid-cols-2">

                  <div className="p-8 space-y-6 md:border-r border-gray-700">
                    <h3 className="text-gray-400 font-bold uppercase tracking-widest text-xs mb-4">We Don't</h3>

                    <div className="flex items-center gap-3 text-gray-400 opacity-60">
                      <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                      <span>Optimize in isolation</span>
                    </div>
                    <div className="flex items-center gap-3 text-gray-400 opacity-60">
                      <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                      <span>Scale blindly</span>
                    </div>
                    <div className="flex items-center gap-3 text-gray-400 opacity-60">
                      <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                      <span>Treat compliance as an afterthought</span>
                    </div>
                    <div className="flex items-center gap-3 text-gray-400 opacity-60">
                      <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                      <span>Hide behind vague reports</span>
                    </div>
                  </div>

                  <div className="bg-gray-700/50 p-8 space-y-6 rounded-b-xl md:rounded-bl-none md:rounded-r-xl relative overflow-hidden">
                    <div className="absolute inset-0 bg-indigo-600 opacity-10 pointer-events-none"></div>

                    <h3 className="text-indigo-400 font-bold uppercase tracking-widest text-xs mb-4 flex items-center gap-2">
                      <span className="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
                      We Do
                    </h3>

                    <div className="flex items-center gap-3 text-white font-medium">
                      <svg className="w-5 h-5 text-indigo-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                      <span>Own outcomes entirely</span>
                    </div>
                    <div className="flex items-center gap-3 text-white font-medium">
                      <svg className="w-5 h-5 text-indigo-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                      <span>Fix root causes, not symptoms</span>
                    </div>
                    <div className="flex items-center gap-3 text-white font-medium">
                      <svg className="w-5 h-5 text-indigo-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                      <span>Stay responsive with defined SLAs</span>
                    </div>
                    <div className="flex items-center gap-3 text-white font-medium">
                      <svg className="w-5 h-5 text-indigo-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                      <span>Stay accountable when it gets hard</span>
                    </div>
                  </div>

                </div>
              </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 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">
                    Let One Team Run the Entire Account
                  </h2>
                  <p className="text-indigo-200 text-lg font-light">
                    From strategy to execution, listings to ads, inventory to compliance —fully managed by one accountable team.
                  </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">
                    Hand over the chaos. Keep the control.
                    <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 page;