"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 { SellingScroll } from "../data/serviceScrollData";
import { marketingAndAdFaqData } from "../data/faqData";
import { sellingWhyChooseSData } from "../data/whyChooseEleantzData";
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/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"
                  >
                    3P selling{" "}
                    <span className="text-[#c4262e]">without the hassle</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 sell on your behalf. You grow without the operational
                    burden. Brands shouldn’t need to master Seller Central,
                    compliance, logistics, and ad ops just to sell on Amazon.
                    With Eleantz 3P Selling, we become the seller — so you don’t
                    have to.
                  </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">
            <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"
            >
              The problem <span className="text-[#c4262e]">brands face</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-[25px] md:text-[33px] leading-tight font-bold mb-4">
                  Selling as a 3P seller sounds simple until it isn’t.
                </p>
                <ul>
                  <li className="text-[15px] md:text-[17px] flex items-start font-semibold gap-x-2 mb-1">
                    <Image
                      className="bg-[#c4262e] p-1 rounded-full mt-1"
                      src="/assets/icons/done.png"
                      alt=""
                      width={20}
                      height={20}
                    />
                    Seller Central setup feels overwhelming
                  </li>
                  <li className="text-[15px] md:text-[17px] flex items-start font-semibold gap-x-2 mb-1">
                    <Image
                      className="bg-[#c4262e] p-1 rounded-full mt-1"
                      src="/assets/icons/done.png"
                      alt=""
                      width={20}
                      height={20}
                    />
                    Compliance, invoices, GST, and documentation slow things
                    down
                  </li>
                  <li className="text-[15px] md:text-[17px] flex items-start font-semibold gap-x-2 mb-1">
                    <Image
                      className="bg-[#c4262e] p-1 rounded-full mt-1"
                      src="/assets/icons/done.png"
                      alt=""
                      width={20}
                      height={20}
                    />
                    Operations eat into product and brand focus
                  </li>
                  <li className="text-[15px] md:text-[17px] flex items-start font-semibold gap-x-2 mb-1">
                    <Image
                      className="bg-[#c4262e] p-1 rounded-full mt-1"
                      src="/assets/icons/done.png"
                      alt=""
                      width={20}
                      height={20}
                    />
                    Ads, pricing, and inventory decisions get messy
                  </li>
                  <li className="text-[15px] md:text-[17px] flex items-start font-semibold gap-x-2 mb-1">
                    <Image
                      className="bg-[#c4262e] p-1 rounded-full mt-1"
                      src="/assets/icons/done.png"
                      alt=""
                      width={20}
                      height={20}
                    />
                    Expansion to Amazon India feels risky and complex
                  </li>
                </ul>
                <p className="text-[18px] mt-3">
                  Most brands don’t want to run Amazon. They just want to sell
                  on it.
                </p>
                <div className="flex justify-start mt-8">
                  <button className="group relative w-auto cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white px-10 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">
                        Get Free Audit
                      </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-9 group-hover:opacity-100">
                      <div className="flex items-center gap-3 whitespace-nowrap">
                        <span className="leading-none font-medium">
                          Get Free Audit
                        </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>
                </div>
              </div>
            </div>
            <div className="w-full lg:w-[50%] order-1 lg:order-2">
              <div
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                <Image
                  className="rounded-2xl md:h-100 object-cover"
                  src="/assets/img/service-1.webp"
                  alt="about-us"
                  width={1200}
                  height={1000}
                />
              </div>
            </div>
          </div>
        </div>
      </section> */}

      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <h2
            className="text-center text-[35px] 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 Problem <span className="text-[#c4262e]">Brands Face</span>
          </h2>
          <p
            className="text-[20px] font-medium text-center"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1500"
          >
            Selling as a 3P seller sounds simple — until it isn’t.
          </p>
          <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/web-promotion.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[18px] lg:text-[22px] font-bold my-3">
                  Seller account setup feels overwhelming
                </h3>
              </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/analysis.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[18px] lg:text-[22px] font-bold my-3">
                  Compliance, invoices, taxes, and documentation slow things
                  down
                </h3>
              </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/target.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[18px] lg:text-[22px] font-bold my-3">
                  Operations eat into product and brand focus
                </h3>
              </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/insight.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[18px] lg:text-[22px] font-bold my-3">
                  Ads, pricing, and inventory decisions get messy
                </h3>
              </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/data.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[22px] font-bold my-3">
                  Expansion to Amazon India feels risky and complex
                </h3>

              </div>
            </div> */}
          </div>
        </div>
      </section>

      <section
        className="py-6 lg:py-20 bg-neutral-100"
        data-aos="fade-up"
        data-aos-anchor-placement="top-bottom"
        data-aos-duration="1000"
      >
        <OurClients />
      </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-[35px] 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={SellingScroll} />
        </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="pb-6 lg:pb-12">
        <div className="container mx-auto px-4">
          <div>
            <div>
              <h2
                className="text-[30px] 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"
              >
                How Eleantz{" "}
                <span className="text-[#c4262c]">3P selling works</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={sellingWhyChooseSData}
            /> */}

            <div className="flex flex-wrap justify-center gap-y-4 md:gap-y-8 mt-8 md:mt-10">
              {sellingWhyChooseSData.map((item, i) => {
                return (
                  <div
                    key={i}
                    className="w-full md:w-[25%] md:px-2"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration={1000 + i * 100}
                  >
                    <div className="bg-white stat-box border border-transparent h-full rounded-2xl px-4 py-3 md:py-4 md:px-6">
                      <h3 className="text-[22px] font-bold leading-tight mb-2">
                        {item.title}
                      </h3>
                      <p className="text-gray-700 text-[17px]">{item.desc}</p>
                    </div>
                  </div>
                );
              })}
            </div>

            <div
              className="bg-gray-800 stat-box border-l-4 border-[#c4262c] p-6 backdrop-blur-sm max-w-3xl mt-5 mx-auto"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1000"
            >
              <p className="text-xl md:text-2xl text-black font-medium">
                You stay focused on manufacturing and brand growth.
                <br />
                We handle the marketplace engine.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-6 lg:py-12 bg-neutral-50">
        <div className="container mx-auto px-4">
          <div>
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-8 lg:mb-16">
                <h2
                  className="mt-4 text-[30px] md:text-5xl font-extrabold text-gray-900 leading-tight"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="1000"
                >
                  Launching Global Brands on{" "}
                  <span className="text-[#c4262c]">Amazon India</span>
                </h2>
                <p
                  className="mt-6 text-[15px] lg:text-lg text-gray-600 max-w-4xl mx-auto leading-relaxed"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="1200"
                >
                  Expanding into India unlocks one of the fastest-growing
                  e-commerce markets in the world. Through our 3P selling model
                  , Eleantz manages the marketplace execution locally while you
                  scale globally.
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 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-blue-100 rounded-lg flex items-center justify-center mb-6">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-8 h-8 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth="2"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                      />
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">
                    Market Entry Evaluation
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    Demand assessment, pricing viability, and category
                    opportunity analysis tailored specifically for the Indian
                    marketplace landscape.
                  </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-orange-100 rounded-lg flex items-center justify-center mb-6">
                    <svg
                      className="w-6 h-6 text-orange-600"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
                      ></path>
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">
                    Local Marketplace Setup
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    Creation and optimization of Amazon India listings featuring
                    localized content, SEO, and precise category alignment.
                  </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-green-100 rounded-lg flex items-center justify-center mb-6">
                    <svg
                      className="w-6 h-6 text-green-600"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                      ></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">
                    Operational Management
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    Eleantz acts as the merchant of record, managing the full
                    execution including cataloging, logistics, and compliance.
                  </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-purple-100 rounded-lg flex items-center justify-center mb-6">
                    <svg
                      className="w-6 h-6 text-purple-600"
                      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-xl font-bold text-gray-900 mb-3">
                    Growth & Marketplace Expansion
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    Aggressive advertising, continuous listing optimization, and
                    performance management to scale your brand presence.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* <section className="pb-6 lg:pb-12 relative overflow-hidden">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl w-full mx-auto">

            <div className="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 flex flex-col md:flex-row">

              <div className="p-10 md:p-14 md:w-3/5 flex flex-col justify-center relative">
                <div className="absolute top-0 left-0 w-24 h-24 bg-linear-to-br from-indigo-100 to-transparent rounded-br-full opacity-50"></div>

                <div className="relative z-10">
                  <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4 tracking-tight">
                    Amazon India <br />
                    <span className="text-transparent bg-clip-text bg-linear-to-r from-[#c4262c] to-[#c4262c]">3P Selling</span>
                  </h2>

                  <p className="text-lg text-gray-500 font-medium mb-10 leading-relaxed border-l-4 border-indigo-100 pl-4">
                    We don’t just sell globally — we actively operate Amazon India 3P.
                  </p>

                  <div className="space-y-5">
                    <h3 className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Ideal For</h3>

                    <div className="flex items-start group">
                      <div className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center mt-0.5 mr-3 group-hover:bg-indigo-500 group-hover:border-indigo-500 transition-colors duration-300">
                        <svg className="w-3.5 h-3.5 text-indigo-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path></svg>
                      </div>
                      <span className="text-gray-700 font-medium group-hover:text-gray-900 transition-colors">International brands entering India</span>
                    </div>

                    <div className="flex items-start group">
                      <div className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center mt-0.5 mr-3 group-hover:bg-indigo-500 group-hover:border-indigo-500 transition-colors duration-300">
                        <svg className="w-3.5 h-3.5 text-indigo-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path></svg>
                      </div>
                      <span className="text-gray-700 font-medium group-hover:text-gray-900 transition-colors">Brands avoiding Seller Central complexity</span>
                    </div>

                    <div className="flex items-start group">
                      <div className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-50 border border-indigo-100 flex items-center justify-center mt-0.5 mr-3 group-hover:bg-indigo-500 group-hover:border-indigo-500 transition-colors duration-300">
                        <svg className="w-3.5 h-3.5 text-indigo-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path></svg>
                      </div>
                      <span className="text-gray-700 font-medium group-hover:text-gray-900 transition-colors">Testing the market without long-term risk</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-gray-900 p-10 md:p-14 md:w-2/5 flex flex-col justify-between relative overflow-hidden">

                <div className="absolute inset-0 opacity-10">
                  <svg className="h-full w-full" fill="none" stroke="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
                    <path strokeWidth="0.5" d="M10 10 L90 10 M10 20 L90 20 M10 30 L90 30 M10 40 L90 40 M10 50 L90 50 M10 60 L90 60 M10 70 L90 70 M10 80 L90 80 M10 90 L90 90 M10 10 L10 90 M20 10 L20 90 M30 10 L30 90 M40 10 L40 90 M50 10 L50 90 M60 10 L60 90 M70 10 L70 90 M80 10 L80 90 M90 10 L90 90"></path>
                  </svg>
                </div>

                <div className="relative z-10 w-12 h-12 bg-gray-800 rounded-xl flex items-center justify-center mb-12 shadow-lg border border-gray-700">
                  <span className="text-2xl">🇮🇳</span>
                </div>

                <div className="relative z-10">
                  <div className="w-12 h-1 bg-linear-to-r from-orange-500 to-green-500 mb-6 rounded-full"></div>
                  <p className="text-xl md:text-2xl font-bold text-white leading-snug">
                    From compliance to execution, we act as your local <span className="text-indigo-400">marketplace operator.</span>
                  </p>
                </div>

              </div>
            </div>

          </div>
           <div className="relative z-10 ">

            <div className="max-w-full w-[650px] mx-auto bg-neutral-50">

              <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"
              >
                Amazon India{" "}
                <span className="text-[#c4262c]">3P Selling</span>
              </h2>

              <p className="text-center text-[14px] lg:text-[20px] font-inter mt-4 w-full max-w-[800px] mx-auto"
                 data-aos="fade-up"
                 data-aos-anchor-placement="top-bottom"
                 data-aos-duration="1200"
              >
                We don’t just sell globally — we actively operate Amazon India 3P.
              </p>

              <div className="pt-4">
                <p className="font-semibold mb-3">Ideal for:</p>
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 flex-shrink-0">✓</div>
                  <span className="text-sm font-semibold text-slate-700">International brands entering India</span>
                </div>
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 flex-shrink-0">✓</div>
                  <span className="text-sm font-semibold text-slate-700">Brands avoiding Seller Central complexity</span>
                </div>
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 flex-shrink-0">✓</div>
                  <span className="text-sm font-semibold text-slate-700">Testing the market without long-term risk</span>
                </div>
                <p className="text-lg text-slate-600 leading-relaxed mt-8"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="1200"
                >
                  From compliance to execution, we act as your local marketplace operator.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section> */}

      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className="text-center mb-6 lg:mb-12">
            <h2
              className="text-[30px] 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 Choose{" "}
              <span className="text-[#c4262c]">Eleantz for 3P Selling</span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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">Not Experimental</h3>
              <p className="text-slate-500 text-sm">
                We already run marketplaces daily. This isn't a test; it's a
                proven engine.
              </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">Holistic View</h3>
              <p className="text-slate-500 text-sm">
                We understand ads, pricing, and demand together — not in silos.
              </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">Brand Protection</h3>
              <p className="text-slate-500 text-sm">
                We protect brand positioning and pricing while driving volume.
              </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">Unit Economics First</h3>
              <p className="text-slate-500 text-sm">
                We scale only when unit economics make sense. Profit over vanity
                metrics.
              </p>
            </div>

            <div className="md:col-span-2 bg-slate-900 text-white p-6 rounded-xl shadow-lg flex flex-col justify-center items-center text-center relative overflow-hidden">
              <div className="relative z-10">
                <h3 className="font-bold text-[20px] lg:text-[25px] mb-2">
                  We Operate Like Owners
                </h3>
                <p className="text-slate-400 text-[15px] lg:text-[17px] mb-2">
                  Not just service providers.
                </p>
                <span className="inline-block rounded-full text-xs font-bold uppercase">
                  Ownership Mindset
                </span>
              </div>
              <div className="absolute top-0 left-0 w-full h-full bg-indigo-600 opacity-10"></div>
            </div>
          </div>

          <div className="mt-12 text-center max-w-2xl mx-auto">
            <p className="text-2xl md:text-3xl font-serif italic text-slate-400 mb-2">
              This isn’t “distribution.”
            </p>
            <p className="text-2xl md:text-3xl font-bold text-slate-900">
              This is responsible marketplace ownership.
            </p>
          </div>
        </div>
      </section>

      <section className="pb-10 md:pb-16">
        <div className="container mx-auto px-4">
          <h2
            className="text-[35px] md:text-[40px] lg:text-[50px] font-semibold text-center font-kanit leading-none mb-10"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1000"
          >
            Who <span className="text-[#c4262c]">this is best for</span>
          </h2>

          <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">
                No Seller Central setup
              </h3>
              <p className="text-gray-500 text-sm leading-relaxed">
                Launching on Amazon but unsure how Seller Central, listings,
                logistics, and compliance actually work. You want to start
                right—without costly trial and error.
              </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">Tired of internal ops</h3>
              <p className="text-gray-500 text-sm leading-relaxed">
                Managing listings, cases, inventory, ads, and reimbursements
                internally has become a distraction. You need dependable
                execution without building a large ops team.
              </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">Expanding to India</h3>
              <p className="text-gray-500 text-sm leading-relaxed">
                Already selling internationally and looking to unlock India as a
                growth market. You need local expertise, regulatory clarity, and
                on-ground execution you can trust.
              </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">Revenue without drag</h3>
              <p className="text-gray-500 text-sm leading-relaxed">
                Selling on Amazon but weighed down by inefficiencies, margin
                leaks, and reactive firefighting. You want clean operations that
                support sustainable, profitable growth.
              </p>
            </div>
          </div>

          {/* <div className="flex flex-wrap justify-center gap-4">
                  <span className="px-6 py-3 bg-white rounded-full text-indigo-800 font-medium shadow-sm border border-indigo-100 flex items-center gap-2">
                      <span className="text-indigo-400 text-xl">🚫</span> No Seller Central setup
                  </span>
                  <span className="px-6 py-3 bg-white rounded-full text-indigo-800 font-medium shadow-sm border border-indigo-100 flex items-center gap-2">
                      <span className="text-indigo-400 text-xl">😪</span> Tired of internal ops
                  </span>
                  <span className="px-6 py-3 bg-white rounded-full text-indigo-800 font-medium shadow-sm border border-indigo-100 flex items-center gap-2">
                      <span className="text-indigo-400 text-xl">🇮🇳</span> Expanding to India
                  </span>
                  <span className="px-6 py-3 bg-white rounded-full text-indigo-800 font-medium shadow-sm border border-indigo-100 flex items-center gap-2">
                      <span className="text-indigo-400 text-xl">💸</span> Revenue without drag
                  </span>
              </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 listings & operations{" "}
              <span className="text-[#c4262c]">framework</span>
            </h2>
          </div>
          <div>
            <AdvertisingProcess
              adProcess={creativeStrategyAndBrandingProcessData}
            />
          </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 Us Be the Seller
                  </h2>
                  <p className="text-indigo-200 text-lg font-light">
                    We operate as your marketplace seller, so you don't have to.
                  </p>
                </div>

                <div className="shrink-0">
                  <button onClick={()=> openModal("3pSelling")} 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">
                    Talk to us about 3P Selling
                    <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>

      {/* <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <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-[30px] font-bold leading-tight mb-1">
                Let Us Be the Seller
              </h2>
              <p className="text-[14px] md:text-[17px] text-gray-600">
                If you want Amazon sales without running Amazon,<br/>
                3P Selling with Eleantz is built for exactly that.
              </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",
                  }}
                >
                  Talk to us about 3P Selling 
                </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;