"use client";

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

function CreativeStrategyAndBranding() {
  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/vds3.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"
                  >
                    Designing for Decisions, <br className="hidden lg:block" />
                    <span className="text-[#c4262e]">Not Aesthetics</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 design marketplace-native creative systems across Amazon,
                    Walmart, Target, Etsy, and eBay — built to earn trust,
                    remove hesitation, and drive conversion at the point of
                    purchase.
                  </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-[35px] 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"
            >
              Creative Is Not Decoration. It’s a{" "}
              <br className="hidden lg:block" />
              <span className="text-[#c4262e]">Conversion Lever.</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">
                {/* <h3 className="text-[23px] md:text-[32px] font-bold">
                  Advertising amplifies performance.
                </h3> */}
                <p className="text-[18px] md:text-[18px]">
                  On marketplaces, creative has one job: help shoppers decide.
                </p>
                <p className="text-[18px] md:text-[18px] mt-1">
                  It must communicate value quickly, establish trust instantly,
                  and reduce hesitation — all within seconds. We design creative
                  that works inside real marketplace constraints, not
                  moodboards.
                </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">Creative is not <span className="text-[#c4262e]">decoration.</span> </h2>
              <h2 className="text-[25px] lg:text-[45px] font-bold leading-tight">It’s a conversion <span className="text-[#c4262e]">lever.</span></h2>
            </div>
          </div>
        </div>
      </section>

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

      <section className="bg-neutral-100 py-20">
        <div className="container mx-auto px-4">
          <h2
            className="text-center text-[25px] md:text-[40px] lg:text-[50px] font-semibold font-kanit leading-none w-full max-w-[900px] mx-auto"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1200"
          >
            Where Marketplace Creative <br className="hidden lg:block" />
            <span className="text-[#c4262e]">Usually Falls Short</span>
          </h2>
          <div className="flex flex-wrap gap-y-3 justify-center mt-10">
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
               data-aos="fade-up"
               data-aos-anchor-placement="top-bottom"
               data-aos-duration="1200"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
               
              >
                <Image
                  src="/assets/icons/target.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Aesthetic without intent
                </h3>
                <p className="text-[16px]">
                  Design looks premium but fails to explain value or answer
                  buyer questions.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1500"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/idea.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  One creative style reused everywhere
                </h3>
                <p className="text-[16px]">
                  What works on Amazon doesn’t automatically work on Etsy or
                  Target.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="1800"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/efficacy.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Creative disconnected from performance
                </h3>
                <p className="text-[16px]">
                  Assets are produced without feedback from conversion data.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
            data-aos="fade-up"
            data-aos-anchor-placement="top-bottom"
            data-aos-duration="2100"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
                
              >
                <Image
                  src="/assets/icons/brand.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Brand inconsistency across marketplaces
                </h3>
                <p className="text-[16px]">
                  Visuals and messaging drift as platforms scale.
                </p>
              </div>
            </div>
            <div className="w-full md:w-[50%] lg:w-[33.33%] px-1.5"
             data-aos="fade-up"
             data-aos-anchor-placement="top-bottom"
             data-aos-duration="2400"
            >
              <div
                className="bg-white stat-box p-8 rounded-2xl shadow-sm border-l-4 border-[#c4262c] hover:shadow-lg transition-all duration-300 h-full"
               
              >
                <Image
                  src="/assets/icons/data.png"
                  alt="icons"
                  width={65}
                  height={65}
                />
                <h3 className="text-[20px] font-bold my-3">
                  Testing without direction
                </h3>
                <p className="text-[16px]">
                  Creative changes happen randomly, not systematically.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

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

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

      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div className=" ">
            <div>
              <h2
                className="text-[25px] md:text-[40px] lg:text-[50px] font-semibold text-center font-kanit leading-none"
                data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"
                data-aos-duration="1000"
              >
                Why brands trust <span className="text-[#c4262c]">Eleantz</span>
              </h2>
              {/*  <p className="text-center text-[14px] lg:text-[20px] font-inter mt-4 w-full max-w-[800px] mx-auto">
                We’ve built our reputation on two things: results that matter
                and relationships that last. A 95% average retention rate says
                we’re doing something right.
              </p> */}
            </div>
            <WhyChooseAleantz
              whyChooseData={creativeStrategyAndBrandingWhyChooseSData}
            />
          </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 creative strategy {" "}
              <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">
                    Ready to Build Creative That Converts Everywhere You Sell?
                    </h2>
                    <p className="text-indigo-200 text-lg font-light">
                      We’ll align your brand story with how shoppers actually buy.
                    </p>
                  </div>

                  <div className="shrink-0">
                    <button onClick={()=> openModal("contactForm")} className="bg-white text-gray-900 hover:bg-indigo-50 transition-colors px-8 py-4 rounded-xl font-bold text-lg shadow-lg flex items-center gap-2 group">
                    Get a Creative Strategy Review
                      <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-[30px] font-bold leading-tight mb-1">
                Ready to Build Creative That Converts Everywhere You Sell?
              </h2>
              <p className="text-[14px] md:text-[17px] text-gray-600">
                Want Clarity Across Every Marketplace You Sell On?
              </p>
            </div>
            <div className="w-full lg:w-[40%] flex justify-center flex-col">
              <div>
                <Button
                  variant="contained"
                  sx={{
                    display: "block",
                    mx: "auto",
                    borderRadius: "50px",
                    background: "#c4262c",
                  }}
                >
                  Get a Creative Strategy Review
                </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 CreativeStrategyAndBranding;