import Image from "next/image";
import Link from "next/link";

type SolutionsData = {
  solutionsSubtitle?: string;
  solutionsTitle?: string;
  solutionsDescription?: string;
  solutionsButtonLabel?: string;
  solutionsButtonLink?: string | null; // ✅ FIX
};

type FeaturedImage = {
  node?: {
    sourceUrl?: string;
    altText?: string | null; // ✅ FIX
  } | null;
};

type SolutionsSectionProps = {
  data: SolutionsData;
  featuredImage?: FeaturedImage;
};


export default function SolutionsSection({
  data,
  featuredImage,
}: SolutionsSectionProps) {
  return (
    <section className="bg-[#F3F3F3] py-10 md:py-10">
      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-12 gap-[30px] items-center">

        {/* LEFT CONTENT */}
        <div className="lg:col-span-7">
          <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
            {data.solutionsSubtitle}
          </span>

          <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight mb-6">
            {data.solutionsTitle}
          </h2>

          <div
            className="solutions-text text-[#202020]/70 text-lg font-medium space-y-4 mb-8"
            dangerouslySetInnerHTML={{
              __html: data.solutionsDescription ?? "",
            }}
          />

          {/* CTA */}
          {data.solutionsButtonLabel && (
            <Link
              href={data.solutionsButtonLink ?? "#"}
              className="inline-flex items-center gap-2 border border-[#202020]/50 px-6 py-3 rounded text-[16px] font-medium text-[#202020] hover:bg-[#202020] hover:text-white transition"
            >
              {data.solutionsButtonLabel}
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
              </svg>
            </Link>
          )}
        </div>
            
        {/* RIGHT IMAGE */}
        <div className="lg:col-span-5">
            {featuredImage?.node?.sourceUrl && (
              <Image
                src={featuredImage.node.sourceUrl}
                alt={featuredImage.node.altText || "Services overview"}
                width={1600}
                height={800}
                className="w-full h-full object-cover rounded-2xl"
                priority
                unoptimized
              />
            )}
        </div>

      </div>
    </section>
  );
}