"use client";

import Image from 'next/image'
import "aos/dist/aos.css";
import React, { useEffect } from 'react'
import type { CaseStudy } from "@/data/case-studies/types";

const ProjectOverview = ({ intro, challenges, approach, advantages, designImages, extraImage }: CaseStudy["overview"]) => {
        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 overflow-hidden'>
        <div className='absolute w-20 top-[25%] hidden lg:block'>
            <Image src="/images/left_orangeVector.png" className='w-full' width={1200} height={600} alt="Web Design" />
        </div>
        <div className='absolute w-20 right-0 top-[35%] hidden lg:block'>
            <Image src="/images/right_orangeVector.png" className='w-full' width={1200} height={600} alt="Web Design" />
        </div>
      <div className="max-w-[1200px] mx-auto px-4">
        <div data-aos="zoom-in">
            <h2  className='text-[25px] md:text-[32px]  text-center font-bold mb-5'><span className='text-[#E77025]'>Project</span> Overview</h2>
            {intro.map((paragraph, index) => (
                <p key={index} className='text-[#5D5D5D] text-[16px] md:w-[80%] mx-auto text-center'>{paragraph}</p>
            ))}
        </div>
        <div className='grid grid-cols-1 md:grid-cols-3 gap-x-2 gap-y-3 my-10'>
            <div data-aos="fade-right">
                <h2 className='text-[25px] md:text-[32px]  text-center md:text-start font-bold mb-5'>The <span className='text-[#E77025]'>Challenge</span></h2>
                <ul className='ps-4'>
                    {challenges.map((item, index) => (
                        <li key={index} className='list-disc text-[#5D5D5D] text-[16px]'>{item}</li>
                    ))}
                </ul>
            </div>
            <div data-aos="zoom-in" className='h-full flex items-center'>
                <Image src="/images/ProjectOverview.webp" className='w-full' width={1200} height={600} alt="Web Design" />
            </div>
            <div data-aos="fade-left">
                <h2 className='text-[25px] md:text-[32px]  text-center md:text-start font-bold mb-5'>Our <span className='text-[#E77025]'>Approach</span></h2>
                <ul className='ps-4'>
                    {approach.map((item, index) => (
                        <li key={index} className='list-disc text-[#5D5D5D] text-[16px]'>{item}</li>
                    ))}
                </ul>
            </div>
        </div>

        <div data-aos="zoom-in" className='md:w-[60%] mx-auto'>
            <h2 className='text-[25px] md:text-[32px]  text-center font-bold mb-5'>Business <span className='text-[#E77025]'>Advantages</span></h2>
            <ul className='ps-4'>
                {advantages.map((item, index) => (
                    <li key={index} className='list-disc text-[#5D5D5D] text-[16px]'>{item}</li>
                ))}
            </ul>
        </div>

        {/* Design Overview */}

        <div className='py-16'>
            <h2 data-aos="zoom-in" className='text-[25px] md:text-[32px]  text-center font-bold mb-8'><span className='text-[#E77025]'>Design</span> Overview</h2>
            <div className='grid sm:grid-cols-2 gap-10'>
                {designImages.map((design, index) => (
                    <div key={index} data-aos={index % 2 === 0 ? "fade-right" : "fade-left"}>
                        <Image src={design.src} className='w-full' width={1200} height={600} alt={design.alt ?? "Web Design"} />
                        <h3 className='text-[#E77025] text-[22px] font-bold text-center mt-4'>{design.caption}</h3>
                    </div>
                ))}
            </div>
        {extraImage && (
        <div className='pt-10'>
            <Image src={extraImage.src} className='w-full h-full' width={1200} height={1200} alt={extraImage.alt} />
        </div>
        )}
        </div>
      </div>
    </div>
  )
}

export default ProjectOverview
