import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "@/plugins";
import Link from "next/link";
import Service11 from "../../../public/assets/imgs/service/1.jpg";
import Service12 from "../../../public/assets/imgs/service/2.jpg";
import Service13 from "../../../public/assets/imgs/service/3.jpg";
import Service14 from "../../../public/assets/imgs/service/4.jpg";
import Service15 from "../../../public/assets/imgs/service/5.jpg";
import Service16 from "../../../public/assets/imgs/service/6.jpg";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

const Service1 = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      let device_width = window.innerWidth;
      let tHero = gsap.context(() => {
        if (device_width > 1200) {
          gsap.to(".service__list-6", {
            scrollTrigger: {
              trigger: ".service__area-6",
              pin: ".service__list-6",
              pinSpacing: true,
              start: "top top",
              end: "bottom bottom",
            },
          });

          gsap.to(".service__image-wrap", {
            scrollTrigger: {
              trigger: ".service__area-6",
              pin: ".mid-content",
              pinSpacing: true,
              start: "top top",
              end: "bottom bottom",
              markers: false,
            },
          });

          let service_images = gsap.utils.toArray(".service__image");
          let service_imagess = gsap.utils.toArray(".service__image img");
          let service_items = gsap.utils.toArray(".service__item-6");

          if (service_items) {
            service_items.forEach((image, i) => {
              let tl = gsap.timeline({
                scrollTrigger: {
                  trigger: image,
                  scrub: 1,
                  start: "top top-=600",
                  markers: false,
                },
              });
              tl.to(service_images[i], {
                zIndex: "1",
              });
              tl.fromTo(
                service_imagess[i],
                { opacity: 1, scale: 1 },
                {
                  opacity: 0,
                  duration: 1,
                  scale: 1.2,
                  ease: "power4.out",
                  scrollTrigger: {
                    trigger: image,
                    scrub: 1,
                    start: "top 15%", // Adjust to start earlier in the viewport
                    markers: false,
                  },
                },
                "-=1"
              );
            });
          }

          let navItems = gsap.utils.toArray(".service__list-6 li a");
          if (navItems) {
            navItems.forEach((nav) => {
              nav.addEventListener("click", (e) => {
                e.preventDefault();
                const ids = nav.getAttribute("href");
                gsap.to(window, {
                  duration: 0.5,
                  scrollTo: ids,
                  ease: "power4.out",
                });
              });
            });
          }
        }
      });
      return () => tHero.revert();
    }
  }, []);
  return (
    <>
      <section className="service__area-6">
        <div className="container">
          <div className="row inherit-row">
            <div className="col-xxl-12">
              <div className="content-wrapper">
                <div className="left-content">
                  <ul className="service__list-6">
                    <li>
                      <a href="#service_1">
                        Branding
                      </a>
                    </li>
                    <li>
                      <a href="#service_2">
                        Web<br />
                        Development
                      </a>
                    </li>
                    <li>
                      <a href="#service_3">
                        Mobile <br />
                        Development
                      </a>
                    </li>
                    <li>
                      <a href="#service_4">
                        Internal Systems <br /> Development
                      </a>
                    </li>
                    <li>
                      <a href="#service_5">
                        Odoo <br />
                        Implementation
                      </a>
                    </li>
                    <li>
                      <a href="#service_6">
                        Marketing
                      </a>
                    </li>
                  </ul>
                </div>

                <div className="mid-content">
                  <div className="service__image">
                    <Image
                      priority
                      style={{ width: "auto", height: "auto" }}
                      src={Service11}
                      alt="Service Image"
                    />
                  </div>
                  <div className="service__image">
                    <Image
                      priority
                      style={{ width: "auto", height: "auto" }}
                      src={Service12}
                      alt="Service Image"
                    />
                  </div>
                  <div className="service__image">
                    <Image
                      priority
                      style={{ width: "auto", height: "auto" }}
                      src={Service13}
                      alt="Service Image"
                    />
                  </div>
                  <div className="service__image">
                    <Image
                      priority
                      style={{ width: "auto", height: "auto" }}
                      src={Service14}
                      alt="Service Image"
                    />
                  </div>
                  <div className="service__image">
                    <Image
                      priority
                      style={{ width: "auto", height: "auto" }}
                      src={Service15}
                      alt="Service Image"
                    />
                  </div>
                  <div className="service__image">
                    <Image
                      priority
                      style={{ width: "auto", height: "auto" }}
                      src={Service16}
                      alt="Service Image"
                    />
                  </div>
                </div>

                <div className="right-content">
                  <div className="service__items-6">
                    <div
                      className="service__item-6 has__service_animation"
                      id="service_1"
                      data-secid="1"
                    >
                      <div className="image-tab">
                        <Image
                          priority
                          style={{ width: "auto", height: "auto" }}
                          src={Service11}
                          alt="Service Image"
                        />
                      </div>

                      <div className="animation__service_page">
                        <h2 className="service__title-6">
                          Transform Your Brand into a Powerful Asset
                        </h2>
                        <p>
                          Unlock the full potential of your brand with our comprehensive branding services, designed to position your business for success in a competitive market. Our expert team will work closely with you to create a unique and compelling brand identity that resonates with your target audience, differentiates you from competitors, and drives lasting customer loyalty.
                        </p>
                        <ul>
                          <li>+ Brand Strategy</li>
                          <li>+ Visual Identity</li>
                          <li>+ Brand Messaging Voice</li>
                          <li>+ Brand Collateral</li>
                          <li>+ Brand Guidelines</li>
                          <li>+ Brand Audit</li>
                        </ul>
                        <div className="btn_wrapper">
                          <Link
                            href="/contact"
                            className="wc-btn-secondary btn-item btn-hover"
                          >
                            <span></span>Book Your
                            <br />
                            {" "}Demo Now <i className="fa-solid fa-arrow-right"></i>
                          </Link>
                        </div>
                      </div>
                    </div>

                    <div
                      className="service__item-6"
                      id="service_2"
                      data-secid="2"
                    >
                      <div className="image-tab">
                        <Image
                          priority
                          style={{ width: "auto", height: "auto" }}
                          src={Service12}
                          alt="Service Image"
                        />
                      </div>

                      <div className="animation__service_page">
                        <h2 className="service__title-6">
                          Create a Powerful Online Presence
                        </h2>
                        <p>
                          In today&apos;s digital age, your website is often the first interaction potential customers have with your brand. Our comprehensive web development services are designed to create a stunning, functional, and user-friendly website that reflects your brand identity and drives business growth. Let us help you turn your vision into reality and elevate your online presence.
                        </p>
                        <ul>
                          <li>+ Website Design (UI/UX)</li>
                          <li>+ Front-End Development</li>
                          <li>+ Back-End Development</li>
                          <li>+ E-Commerce Solutions</li>
                          <li>+ Maintenance and Support</li>
                          <li>+ Performance Optimization</li>
                        </ul>
                        <div className="btn_wrapper">
                          <Link
                            href="/contact"
                            className="wc-btn-secondary btn-item btn-hover"
                          >
                            <span></span>Book Your
                            <br />
                            Demo Now <i className="fa-solid fa-arrow-right"></i>
                          </Link>
                        </div>
                      </div>
                    </div>

                    <div
                      className="service__item-6"
                      id="service_3"
                      data-secid="3"
                    >
                      <div className="image-tab">
                        <Image
                          priority
                          style={{ width: "auto", height: "auto" }}
                          src={Service13}
                          alt="Service Image"
                        />
                      </div>

                      <div className="animation__service_page">
                        <h2 className="service__title-6">
                          Transform Your Ideas into Mobile Excellence
                        </h2>
                        <p>
                          In a world where mobile devices dominate, having a robust and engaging mobile app is crucial for reaching your audience and enhancing your business. Our comprehensive mobile development services are designed to turn your innovative ideas into high-performing mobile applications that deliver an exceptional user experience and drive business success.
                        </p>
                        <ul>
                          <li>+ Mobile App Design (UI/UX)</li>
                          <li>+ Cross-Platform App</li>
                          <li>+ Back-End Development</li>
                          <li>+ API Development</li>
                          <li>+ App Testing</li>
                          <li>+ Maintenance and Support</li>
                        </ul>
                        <div className="btn_wrapper">
                          <Link
                            href="/contact"
                            className="wc-btn-secondary btn-item btn-hover"
                          >
                            <span></span>Book Your
                            <br />
                            Demo Now <i className="fa-solid fa-arrow-right"></i>
                          </Link>
                        </div>
                      </div>
                    </div>

                    <div
                      className="service__item-6"
                      id="service_4"
                      data-secid="4"
                    >
                      <div className="image-tab">
                        <Image
                          priority
                          style={{ width: "auto", height: "auto" }}
                          src={Service14}
                          alt="Service Image"
                        />
                      </div>

                      <div className="animation__service_page">
                        <h2 className="service__title-6">
                          Optimize Your Workflows with Custom Solutions
                        </h2>
                        <p>
                          In today&apos;s fast-paced business environment, efficient internal systems are essential for maintaining productivity and competitiveness. Our internal systems development services are designed to create tailored solutions that automate processes, enhance collaboration, and improve overall operational efficiency. Let us help you build robust systems that empower your team and drive business success.
                        </p>
                        <ul>
                          <li>+ Custom Software</li>
                          <li>+ Workflow Automation</li>
                          <li>+ Database Management</li>
                          <li>+ Integration Services</li>
                          <li>+ Performance Monitoring</li>
                          <li>+ Security and Compliance</li>
                        </ul>
                        <div className="btn_wrapper">
                          <Link
                            href="/contact"
                            className="wc-btn-secondary btn-item btn-hover"
                          >
                            <span></span>Book Your
                            <br />
                            Demo Now <i className="fa-solid fa-arrow-right"></i>
                          </Link>
                        </div>
                      </div>
                    </div>

                    <div
                      className="service__item-6"
                      id="service_5"
                      data-secid="5"
                    >
                      <div className="image-tab">
                        <Image
                          priority
                          style={{ width: "auto", height: "auto" }}
                          src={Service15}
                          alt="Service Image"
                        />
                      </div>

                      <div className="animation__service_page">
                        <h2 className="service__title-6">
                          Optimize Operations with a Seamless Odoo Implementation
                        </h2>
                        <p>
                          Enhance your business operations with Odoo, the all-in-one ERP solution that integrates all your essential processes into a single, cohesive system. Our Odoo implementation services are designed to customize and deploy Odoo to fit your unique business needs, ensuring a smooth transition and maximizing your operational efficiency.
                        </p>
                        <ul>
                          <li>+ Needs Assessment</li>
                          <li>+ Odoo Configuration</li>
                          <li>+ Systems Integration</li>
                          <li>+ Training and Support</li>
                          <li>+ Performance Optimization</li>
                          <li>+ Maintenance and Support </li>
                        </ul>
                        <div className="btn_wrapper">
                          <Link
                            href="/contact"
                            className="wc-btn-secondary btn-item btn-hover"
                          >
                            <span></span>Book Your
                            <br />
                            Demo Now <i className="fa-solid fa-arrow-right"></i>
                          </Link>
                        </div>
                      </div>
                    </div>

                    <div
                      className="service__item-6"
                      id="service_6"
                      data-secid="6"
                    >
                      <div className="image-tab">
                        <Image
                          priority
                          style={{ width: "auto", height: "auto" }}
                          src={Service15}
                          alt="Service Image"
                        />
                      </div>

                      <div className="animation__service_page">
                        <h2 className="service__title-6">
                          Maximize Your Reach with Expert Marketing Strategies
                        </h2>
                        <p>
                          In an increasingly digital world, reaching the right audience requires a comprehensive marketing strategy that combines creativity, data, and technology. Our marketing services are designed to elevate your brand&apos;s visibility, drive customer engagement, and deliver measurable results. From social media management to SEO and paid advertising, let us help you craft a marketing plan that drives growth and maximizes your return on investment.
                        </p>
                        <ul>
                          <li>+ Social Media Marketing</li>
                          <li>+ SEO Optimization</li>
                          <li>+ PPC Advertising</li>
                          <li>+ Content Strategy</li>
                          <li>+ Email Campaigns</li>
                          <li>+ Data & Analytics </li>
                        </ul>
                        <div className="btn_wrapper">
                          <Link
                            href="/contact"
                            className="wc-btn-secondary btn-item btn-hover"
                          >
                            <span></span>Book Your
                            <br />
                            Demo Now <i className="fa-solid fa-arrow-right"></i>
                          </Link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Service1;