"use client";
import Image from "next/image";
import React, { useEffect, useRef } from "react";
import AOS from "aos";
import { testimonialData } from "../data/testimonialData";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import { AutoScroll } from "@splidejs/splide-extension-auto-scroll";
import Link from "next/link";
import { eleantzGallery } from "../data/eleantzGallery";

function page() {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const splideRef = useRef<any>(null);
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => { });
    }
  }, []);
  useEffect(() => {
    AOS.init();
  }, []);

  return (
    <main>
      <section className="px-4">
        <div className="h-[60vh] 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/about.mp4"
            muted
            loop
            autoPlay
            playsInline
            webkit-playsinline="true"
          />
          <div className="px-2 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-12">
                <div className="text-center">
                  <h1
                    className="text-[30px] md:text-[45px] xl:text-[65px] text-white font-semibold font-kanit leading-tight mb-4 lg:mb-12"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1500"
                  >
                    Built by <span className="text-[#c4262e]">professionals<br className="hidden lg:block" />
                    </span> who care about the <span className="text-[#c4262e]">work</span>
                  </h1>
                </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-3 lg:gap-y-5">
            <div className="w-full lg:w-[40%] md:px-2"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1200"
            >
              <div className="">
                <p className="text-[#c4262e] font-semibold"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="1000"
                >
                  The Eleantz story
                </p>
                <h2 className="text-[25px] md:text-[50px] font-bold leading-tight"
                  data-aos="fade-up"
                  data-aos-anchor-placement="top-bottom"
                  data-aos-duration="1200"
                >
                  Agencies deliver tasks. {" "}
                  <span className="text-[#c4262e]">Partners deliver ownership</span>
                </h2>
              </div>
            </div>
            <div className="w-full lg:w-[60%] md:px-4">
              <div className="flex flex-wrap gap-y-3 md:gap-y-6">
                <div className="w-full">
                  <p className="md:text-[18px] mb-3"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1300"
                  >
                    Eleantz was founded to help brands scale globally while maintaining control over their business. As e-commerce ecosystems evolved, we recognized the struggle brands face with fragmented execution and short-term thinking. We bring strategy, execution, and accountability together under one roof.
                  </p>
                  <p className="md:text-[18px] mb-3"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1400"
                  >
                    Operating as an extension of our clients’ teams, we leverage decades of collective experience across Amazon Seller Central, Vendor Central, and various global marketplaces. Our team’s expertise spans strategy, operations, and performance—ensuring sustainable, long-term growth for the brands we partner with. By uniting our knowledge, we help brands thrive in the competitive digital marketplace landscape.
                  </p>
                </div>

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

      <section className="pt-6 lg:pt-12 bg-neutral-100 overflow-hidden">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <h2
              className="text-[35px] 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"
            >
              The thinking behind{" "}
              <span className="text-[#c4262e]">Eleantz</span>
            </h2>
          </div>
          <div className="flex flex-wrap mt-10">
            <div className="w-full lg:w-[25%] px-1.5">
              <div className="rounded-b-2xl">
                <Image
                  className="rounded-b-2xl"
                  src="/assets/img/prashantSir.webp"
                  alt=""
                  width={500}
                  height={500}
                />
              </div>
            </div>
            <div className="w-full lg:w-[75%] flex flex-col justify-end px-1.5">
              <div className="bg-white px-4 pb-6 pt-4 rounded-2xl mb-10">
                <h2 className="text-[25px] md:text-[35px] font-semibold leading-tight">
                  PRASHANT MEHROTRA
                </h2>
                <div className="flex gap-x-1 items-center mb-3">
                  <Link target="_blank" href='https://www.linkedin.com/in/prashanteleantz?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app'>
                    <Image className="grayscale hover:grayscale-0 transition-all duration-500" src='/assets/icons/linkedin.png' alt='' width={25} height={25} />
                  </Link>
                  <p className="font-semibold text-[15px] text-[#c4262e]">
                    CEO & CO-FOUNDER
                  </p>
                </div>
                <p className="mb-2">
                  From the beginning, Eleantz was never meant to be a
                  traditional agency.
                </p>
                <p className="text-[17px] font-medium">
                  We wanted to build a partner that could think long-term, act
                  decisively, and stay accountable through every phase of
                  growth. That philosophy continues to guide how we work with
                  our clients today. ”
                </p>
              </div>
            </div>
          </div>
          <div className="flex flex-wrap">
            <div className="w-full lg:w-[25%] px-1.5 order-1 lg:order-2">
              <Image
                src="/assets/img/rounak-sir.webp"
                alt=""
                width={500}
                height={500}
              />
            </div>
            <div className="w-full lg:w-[75%] flex flex-col justify-end px-1.5 order-2 lg:order-1">
              <div className="bg-white px-4 pb-6 pt-4 rounded-2xl mb-10">
                <h2 className="text-[25px] md:text-[35px] font-semibold leading-tight">
                  ROUNAK AGARWAL
                </h2>
                <div className="flex gap-x-1 items-center mb-3">
                  <Link target="_blank" href='https://www.linkedin.com/in/rounakeleantz?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app'>
                    <Image className="grayscale hover:grayscale-0 transition-all duration-500" src='/assets/icons/linkedin.png' alt='' width={25} height={25} />
                  </Link>
                  <p className="font-semibold text-[15px] text-[#c4262e]">
                    CFO & CO-FOUNDER
                  </p>
                </div>
                <p className="mb-2">
                  Growth only matters when it’s profitable and repeatable.
                </p>
                <p className="text-[17px] font-medium">
                  At Eleantz, we approach marketplaces with a strong financial
                  lens — understanding margins, cash flow, and unit economics
                  alongside performance metrics. Our focus is on building
                  systems that allow brands to scale with confidence, not
                  uncertainty. ”
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-12">
        <div className="container mx-auto px-4">
          <h2
            className="text-[35px] 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"
          >
            Empowering Brands {" "}
            <span className="text-[#c4262e]">Globally</span>
          </h2>
          <p
            className="text-[15px] lg:text-[18px] text-center font-medium w-full max-w-[700px] mx-auto"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1500"
          >
            Unlocking potential across continents.
          </p>
          <div
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1500"
          >
            <video
              ref={videoRef}
              className="rounded-2xl mt-10"
              src="/assets/video/map.mp4"
              muted
              loop
              autoPlay
              playsInline
              webkit-playsinline="true"
            />
          </div>
        </div>
      </section>

      <section className="py-6 lg:py-12 bg-neutral-100 overflow-hidden">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <h2
              className="text-[35px] 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"
            >
              How we <span className="text-[#c4262e]">think.</span> How we <span className="text-[#c4262e]">work.</span>
            </h2>
            <p
              className="text-[18px] font-semibold w-full text-center max-w-[1200px] mx-auto"
              data-aos="fade-up"
              data-aos-anchor-placement="top-bottom"
              data-aos-duration="1200"
            >
              The principles that guide every decision we make.
            </p>
          </div>
          <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">
              <div
                className="p-5 bg-white stat-box border-2 border-transparent rounded-2xl flex items-center gap-x-3"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                <Image
                  src="/assets/icons/number-1.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <div>
                  <h3 className="text-[27px] font-bold">Ownership</h3>
                  <p className="text-[16px]">We own outcomes, not tasks.</p>
                </div>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5">
              <div
                className="p-5 bg-white stat-box border-2 border-transparent rounded-2xl flex items-center gap-x-3"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1500"
              >
                <Image
                  src="/assets/icons/number-2.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <div>
                  <h3 className="text-[27px] font-bold">Clarity</h3>
                  <p className="text-[16px]">
                    Decisions driven by data and context.
                  </p>
                </div>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5">
              <div
                className="p-5 bg-white stat-box border-2 border-transparent rounded-2xl flex items-center gap-x-3"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1800"
              >
                <Image
                  src="/assets/icons/number-3.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <div>
                  <h3 className="text-[27px] font-bold">Discipline</h3>
                  <p className="text-[16px]">
                    Growth built with structure and intent.
                  </p>
                </div>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5">
              <div
                className="p-5 bg-white stat-box border-2 border-transparent rounded-2xl flex items-center gap-x-3"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="2100"
              >
                <Image
                  src="/assets/icons/number-4.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <div>
                  <h3 className="text-[27px] font-bold">Consistency</h3>
                  <p className="text-[16px]">
                    Execution that compounds over time.
                  </p>
                </div>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5">
              <div
                className="p-5 bg-white stat-box border-2 border-transparent rounded-2xl flex items-center gap-x-3"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="2400"
              >
                <Image
                  src="/assets/icons/number-5.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <div>
                  <h3 className="text-[27px] font-bold">Partnership</h3>
                  <p className="text-[16px]">
                    Aligned goals. Shared accountability.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

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


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

            <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-start">

              <div className="lg:col-span-5 flex flex-col justify-center h-full space-y-8 order-2">

                <div className="prose prose-lg">
                  <p className="text-xl font-medium leading-relaxed text-gray-800">
                    At Eleantz, culture isn’t a separate initiative — <span className="bg-indigo-50 text-[#c4262e] px-1 rounded">it’s how the work gets done.</span>
                  </p>
                  <p className="text-gray-500 leading-relaxed mt-4">
                    We believe the best ideas come from teams built on trust, ownership, and genuine collaboration. Our environment is open and curious, where diverse perspectives are encouraged and thoughtful debate is part of the process.
                  </p>
                </div>

                <div className="border-l-4 border-[#c4262e] pl-4 py-2">
                  <p className="text-gray-600">
                    "By working closely, learning from challenges, and celebrating wins together, we move faster and think deeper."
                  </p>
                </div>

              </div>

              <div className="lg:col-span-6 relative order-1">
      
                <div className="">
                  <h2
                    className="text-[25px] md:text-[40px] lg:text-[50px] font-bold font-kanit leading-none mb-3"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1000"
                  >
                    Life at Eleantz<br />
                    <span className="text-[#c4262e]">It’s more than just work!</span>
                  </h2>
                  <p
                    className="text-[18px] font-semibold w-full max-w-[1200px] mx-auto"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1200"
                  >The people and culture behind Eleantz.</p>
                </div>
                <div className="flex flex-wrap gap-3 mt-10">
                  <span className="px-4 py-2 rounded-full border border-gray-200 text-sm font-semibold text-gray-600 bg-gray-50">🤝 Trust & Ownership</span>
                  <span className="px-4 py-2 rounded-full border border-gray-200 text-sm font-semibold text-gray-600 bg-gray-50">💡 Genuine Collaboration</span>
                  <span className="px-4 py-2 rounded-full border border-gray-200 text-sm font-semibold text-gray-600 bg-gray-50">🗣️ Thoughtful Debate</span>
                </div>
              </div>
            </div>


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

      <section className="pt-6 lg:pt-12">
        <div className="max-w-full w-[1200px] mx-auto mb-10 px-4">
          <h2
            className="text-[35px] md:text-[40px] lg:text-[50px] font-bold text-center font-kanit leading-none mb-3"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1000"
          >
            Eleantz <span className="text-[#c4262e]">gallery</span>
          </h2>
        </div>
        <div
          data-aos="fade-up"
          data-aos-anchor-placement="top-bottom"
          data-aos-duration="1500"
        >
          <Splide
            ref={splideRef}
            aria-label="Client Logos"
            extensions={{ AutoScroll }}
            options={{
              type: "loop",
              perPage: 3,
              gap: "0.65",
              arrows: false,
              pagination: false,
              focus: "center",
              autoWidth: true,
              autoScroll: {
                speed: 1,
                pauseOnHover: true,
                pauseOnFocus: false,
              },
            }}
          >
            {
              eleantzGallery.map((ele, i) => {
                return (
                  <SplideSlide key={i}>
                    <div className="h-[120px] md:h-[370px] px-px flex items-center justify-center">
                      <Image
                        src={ele.img}
                        alt=""
                        width={1000}
                        height={1000}
                        className="h-full w-auto object-contain"
                      />
                    </div>
                  </SplideSlide>
                )
              })
            }
          </Splide>

        </div>
      </section>

      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div>
            <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">
                    Think you’d enjoy working here?
                  </h2>
                  <p className="text-indigo-200 text-lg font-light">
                    If our way of working resonates, we’d love to hear from you. Our HR might be searching for you right now.
                  </p>
                </div>

                <div className="shrink-0">
                  <Link href="mailto:careers@eleantz.com" 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">
                    Drop your resume
                    <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>
                  </Link>
                </div>

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



      {/*  <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div>
            <h2 className="text-[25px] lg:text-[60px] text-center font-semibold font-kanit leading-none">
              Meet the Innovators Behind Eleantz
            </h2>
          </div>
          <div className="flex flex-wrap justify-center">
            <div className="w-[50%] md:w-[33.33%] lg:w-[20%] p-4">
              <div
                className="border-b-2 py-3"
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                <Image
                  className="border border-gray-200 rounded-2xl"
                  src="/assets/img/team/team-1.webp"
                  alt="about-us"
                  width={265}
                  height={310}
                />
                <div>
                  <h4 className="text-[20px] text-[#c4262e] font-bold">Mina</h4>
                  <p className="text-[13px] md:text-[16px] uppercase">
                    entj - Founder & CEO
                  </p>
                </div>
              </div>
            </div>
            <div className="w-[50%] md:w-[33.33%] lg:w-[20%] p-4">
              <div
                className="border-b-2 py-3"
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                <Image
                  className="border border-gray-200 rounded-2xl"
                  src="/assets/img/team/team-1.webp"
                  alt="about-us"
                  width={265}
                  height={310}
                />
                <div>
                  <h4 className="text-[20px] text-[#c4262e] font-bold">Mina</h4>
                  <p className="text-[13px] md:text-[16px] uppercase">
                    entj - Founder & CEO
                  </p>
                </div>
              </div>
            </div>
            <div className="w-[50%] md:w-[33.33%] lg:w-[20%] p-4">
              <div
                className="border-b-2 py-3"
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                <Image
                  className="border border-gray-200 rounded-2xl"
                  src="/assets/img/team/team-1.webp"
                  alt="about-us"
                  width={265}
                  height={310}
                />
                <div>
                  <h4 className="text-[20px] text-[#c4262e] font-bold">Mina</h4>
                  <p className="text-[13px] md:text-[16px] uppercase">
                    entj - Founder & CEO
                  </p>
                </div>
              </div>
            </div>
            <div className="w-[50%] md:w-[33.33%] lg:w-[20%] p-4">
              <div
                className="border-b-2 py-3"
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                <Image
                  className="border border-gray-200 rounded-2xl"
                  src="/assets/img/team/team-1.webp"
                  alt="about-us"
                  width={265}
                  height={310}
                />
                <div>
                  <h4 className="text-[20px] text-[#c4262e] font-bold">Mina</h4>
                  <p className="text-[13px] md:text-[16px] uppercase">
                    entj - Founder & CEO
                  </p>
                </div>
              </div>
            </div>
            <div className="w-[50%] md:w-[33.33%] lg:w-[20%] p-4">
              <div
                className="border-b-2 py-3"
                data-aos="zoom-out-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1200"
              >
                <Image
                  className="border border-gray-200 rounded-2xl"
                  src="/assets/img/team/team-1.webp"
                  alt="about-us"
                  width={265}
                  height={310}
                />
                <div>
                  <h4 className="text-[20px] text-[#c4262e] font-bold">Mina</h4>
                  <p className="text-[13px] md:text-[16px] uppercase">
                    entj - Founder & CEO
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section> */}
    </main>
  );
}

export default page;