"use client";

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

const DEFAULT_TOOL_CLASS = "h-[50px] w-[40px] md:w-[80px]";
const DEFAULT_HEADING_CLASS = "text-[#3A3A3A] text-[30px] md:text-[65px] font-bold leading-tight Manrope";

const CaseStudyBanner = ({ category, heading, headingClassName, tools, heroImage }: CaseStudy["banner"]) => {
  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="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">
                          <h3 data-aos="fade-right" className="text-[#E77025]  text-[16px] md:text-[24px] font-bold">{category}</h3>
                          <h1 data-aos="fade-right" className={headingClassName ?? DEFAULT_HEADING_CLASS}>{heading}</h1>
                          <div className="mt-5">
                            <p data-aos="fade-right" className="text-[#E77025] text-[18px] md:text-[32px] font-bold">Tools Used:</p>
                            <div data-aos="fade-right" className="flex justify-center md:justify-start gap-3 mt-4">
                                {tools.map((tool) => (
                                    <Image key={tool.src} sizes="120px" src={tool.src} className={tool.widthClass ?? DEFAULT_TOOL_CLASS} width={tool.width ?? 1200} height={tool.height ?? 600} alt={tool.alt} />
                                ))}
                            </div>
                          </div>
                      </div>

                      {/* Right Section - Image */}
                      <div className="md:col-span-5 flex justify-center">
                          <div>
                            <Image src={heroImage.src} width={1200} height={600} alt={heroImage.alt} className="w-full" data-aos="fade-left"/>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      );
  };

export default CaseStudyBanner