import Image from "next/image";
// LanguageAwareLink, not next/link: `AiButtonLink` defaults to the in-page
// "#footerForm" anchor, and routing a hash through next/link makes repeat
// clicks re-fetch the force-dynamic route before scrolling.
import Link from "@/src/lib/utils/LanguageAwareLink";
import { withCDN } from "@/src/lib/utils";

interface AIFeatureSectionProps {
  data?: {
    AiSubtitle: string;
    AiDescription: string;
    AiImage: string;
    AiButtonText?: string;
    AiButtonLink?: string;
    reverse?: boolean;
    AiGradientStart?: string;
    AiGradientEnd?: string;
  };
}

export default function AIFeatureSection({
  data,
}: AIFeatureSectionProps) {
  if (!data) return null;
  const {
    AiSubtitle,
    AiDescription,
    AiImage,
    AiButtonText = "SIGN UP FOR A TRIAL LESSON",
    AiButtonLink = "#",
    reverse = false,
    AiGradientStart = "#226B20",
    AiGradientEnd = "#6ECF68",
  } = data;

  return (
    <section className="relative max-w-[1300px] mx-auto w-full  py-6 pt-[50px] md:py-10 ">

      {/* Default Background */}
        <div className="absolute inset-0 bg-[#fff] -z-10 rounded-[30px] bg-box" />

      <div
        className={`container mx-auto px-4 sm:px-6 xl:px-0 flex flex-col items-center gap-10 lg:gap-16 ${
          reverse ? "md:flex-row-reverse" : "md:flex-row"
        }`}
      >
        {/* Left Image */}
        <div className="w-full lg:w-[1/2] xl:max-w-[700px] flex justify-center hidden md:block">
          <div className="relative w-full max-w-[600px] xl:max-w-[700px] aspect-[4/3] xl:w-[700px] xl:h-[566px] xl:absolute xl:top-[60px] xl:left-[-50px] img-container">
            <Image
              src={AiImage}
              alt="Feature Image"
              fill
              className="object-contain xl:object-cover"
            />
          </div>
        </div>

        {/* Right Content */}
        <div className="w-full lg:w-1/2 xl:w-full xl:max-w-[550px] text-center md:text-left text-right-container">
          <div className="max-[1290px]:flex max-[1290px]:items-center max-[1290px]:gap-3 max-[769px]:flex-col max-[769px]:items-start right-container-wrapper">
          {/* Gradient SVG */}
          <div className="xl:mb-6 flex justify-start AI_IMG ">
            <svg
              width="170"
              height="114"
              viewBox="0 0 170 114"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M170 114H118.24V100.326L132.096 93.9661V20.51L118.24 14.1502V0.476562H170V14.1502L156.144 20.51V93.9661L170 100.326V114Z"
                fill="url(#gradient1)"
              />
              <path
                d="M83.9306 114L75.649 86.9707H34.2411L25.9596 114H0L40.1338 0H69.5971L109.89 114H83.9306ZM61.634 40.3849C61.1032 38.583 60.413 36.304 59.5636 33.5481C58.7143 30.7922 57.8649 27.9833 57.0155 25.1213C56.1661 22.2594 55.4759 19.7685 54.9451 17.6485C54.4142 19.7685 53.671 22.4184 52.7154 25.5983C51.866 28.6722 51.0166 31.6402 50.1672 34.5021C49.424 37.258 48.8401 39.219 48.4154 40.3849L40.2931 66.7782H69.9156L61.634 40.3849Z"
                fill="url(#gradient2)"
              />

              <defs>
                <linearGradient
                  id="gradient1"
                  x1="169.238"
                  y1="104.344"
                  x2="113.651"
                  y2="99.5257"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop offset="0%" stopColor={AiGradientStart} />
                  <stop offset="100%" stopColor={AiGradientEnd} />
                </linearGradient>

                <linearGradient
                  id="gradient2"
                  x1="108.271"
                  y1="104.304"
                  x2="-6.76653"
                  y2="83.2203"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop offset="0%" stopColor={AiGradientStart} />
                  <stop offset="100%" stopColor={AiGradientEnd} />
                </linearGradient>
              </defs>
            </svg>
          </div>

          {/* Title */}
          <h3 className="text-[24px] sm:text-[24px] xl:text-[40px] font-bold leading-tight uppercase text-[#58585A] max-[769px]:text-left max-[769px]:mt-1 ">
            {AiSubtitle}
          </h3>
          </div>
          
          {/* Mobile-image */}
          <div className="relative w-full h-[280px] block md:hidden">
            <Image
              src={AiImage}
              alt="Feature Image"
              fill
              className="object-contain w-full h-[280px]"
            />
          </div>


          {/* Description */}
          <p className="mt-2 text-[16px] xl:text-[22px] font-light text-[#58585A] text-left">
            {AiDescription}
          </p>

          {/* CTA Button */}
          <Link
            href={AiButtonLink}
            className="inline-flex items-center justify-center gap-3 mt-4  w-full lg:w-[460px] h-[40px] lg:h-[60px] rounded-full bg-[#0097DC] text-white text-[15px] md:text-[18px] xl:text-[24px] transition-transform duration-300 btn-AI"
          >
            <Image
              src={withCDN("/gear-white.png")}
              alt="Gear Icon"
              width={28}
              height={28}
              className="w-5 h-5 object-contain"
            />
            {AiButtonText}
          </Link>
        </div>
      </div>
    </section>
  );
}