"use client";

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

const CaseStudyBanner = () => {
  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">
                  <img src="/images/orange_sedo_img.webp" className="w-[100%]" 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">
                            {/* <div className="w-[150px]">
                                <Image src="/images/Main_logo.png" width={1200} height={600} className="w-full" alt="Fruxinfo logo" />
                            </div> */}
                          <h1 data-aos="fade-right" className="text-[#3A3A3A] text-[30px] md:text-[65px] font-bold leading-tight">
                           Web Design & App Development Case Studies
                          </h1>
                          <p data-aos="fade-right" className="text-[#AAAAAA] text-[18px] md:text-[22px] mt-4 mx-auto md:mx-0">
                              Check out our success stories of web design and app development, where creativity leads to brilliant strategies, exceptional design, and innovative technologies that merge together to achieve memorable digital experiences and measurable business results.
                          </p>
                      </div>
              
                      {/* Right Section - Image */}
                      <div className="md:col-span-5 flex justify-center">
                          <div className="mx-20">
                          <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 CaseStudyBanner
