"use client";

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

const WebsitePortfolioBanner = () => {
  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="relative">
            <div className="orange_sedo_img">
                <Image src="/images/orange_sedo_img.webp" className="w-[100%]" width={1200} height={600} alt="" />
            </div>
            <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">
                            See Our Creations in Action
                        </h1>
                        <p data-aos="fade-right" className="text-[#AAAAAA] text-[18px] lg:text-[22px] mt-4 mx-auto md:mx-0">
                            A showcase of our best projects, where strategy meets design and technology to create outstanding digital experiences.
                        </p>
                        {/* <div className='flex justify-center md:justify-start mt-10'>
                            <div className="Custome_Orange_button Apply now flex ">
                                Apply now <GoArrowUpRight className='h-[30px] w-[30px]'/>
                            </div>
                        </div> */}
                    </div>
            
                    {/* Right Section - Image */}
                    <div className="md:col-span-5 flex justify-center">
                        <div className="lg:mx-20 md:mx-10 mx-10">
                            <Image src="/images/Website_Portfolio_stiki.svg" width={1200} height={600} alt="Web Design" className="w-full" data-aos="fade-left"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default WebsitePortfolioBanner
