"use client";

import React, { useEffect } from "react";
import "aos/dist/aos.css";
import Image from "next/image";

const ServicesBanner = () => {
  useEffect(() => {
    import("aos").then((mod) => {
          mod.default.init({
          disable: window.innerWidth < 768, // mobile: no scroll animations (perf/LCP)
      duration: 1000, // Animation duration in ms
      offset: 100, // Offset from original trigger point
      easing: "ease-in-out",
      once: false, // Animation runs only once
    });
        });
  }, []);

  return (
    <div className="max-w-[1200px] mx-auto px-4 py-20">
      <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
        {/* Left Section - Text Content */}
        <div className="md:col-span-7 text-center md:text-left">
          <h1 data-aos="fade-right" className="text-[#3A3A3A] text-[30px] lg:text-[65px] font-bold leading-tight Manrope">
            {/* Helping You Succeed <br /> Online */}
            Struggling Online? We Fix, Build & Grow Your Business.
          </h1>
          <p data-aos="fade-right" className="text-[#AAAAAA] text-[18px] lg:text-[22px] mt-4 md:w-[80%] mx-auto md:mx-0">
            From stunning web design to powerful SEO and seamless development, we deliver tailored solutions that enhance your online presence, drive traffic, and elevate your brand’s digital journey.
          </p>
        </div>

        {/* Right Section - Image */}
        <div className="md:col-span-5 flex justify-center">
          <div className="mx-10 md:mx-5 lg:mx-20">
            <Image src="/images/we_ddd.svg" alt="Web Design" className="w-full" width={1200} height={600} data-aos="fade-left"/>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServicesBanner;
