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

/* ---------- Types (NO any) ---------- */
type MediaNode = {
  sourceUrl: string;
  altText?: string | null;
};
type VisionMissionData = {
  visionSubtitle: string;
  visionTitle: string;
  visionDescription?: string | null;

  missionTitle: string;
  missionSubtitle: string;
  missionDescription?: string | null;

  visionImage?: {
    node?: MediaNode | null;
  } | null;

  visionButtonText?: string | null;
  visionButtonLink?: string | null;
};

type VisionMissionProps = {
  data: VisionMissionData;
};

/* ---------- Component ---------- */
export default function VisionMission({ data }: VisionMissionProps) {
  return (
    <section className="py-28 bg-[#FFFFFF] text-[#202020]">
      <div className="container mx-auto px-4 grid lg:grid-cols-3 gap-8 items-center">

        {/* LEFT IMAGE */}
        {data.visionImage?.node?.sourceUrl && (
          <div className="relative max-w-md mx-auto lg:mx-0">
            <Image
              src={data.visionImage.node.sourceUrl}
              alt={data.visionImage.node.altText || "Vision and Mission"}
              width={520}
              height={620}
              unoptimized
              priority
            />

            <CircularBadge />
          </div>
        )}


        {/* RIGHT CONTENT */}
        <div className="lg:col-span-2">

          {/* Vision */}
          <span className="text-lg tracking-widest text-[#202020]/50 font-medium">
            {data.visionSubtitle}
          </span>

          <h2 className="my-3 text-2xl md:text-[40px] leading-tight text-black font-mono font-medium">
            {data.visionTitle}
          </h2>

          {data.visionDescription && (
            <div
              className="text-[#202020]/70 text-md lg:text-lg space-y-0 font-medium mb-12"
              dangerouslySetInnerHTML={{ __html: data.visionDescription }}
            />
          )}


          {/* Mission */}
          <span className="text-lg tracking-widest text-[#202020]/50 font-medium">
            {data.missionTitle}
          </span>

          <h3 className="my-3 text-2xl md:text-[40px] leading-tight text-black font-mono font-medium">
            {data.missionSubtitle}
          </h3>
          {data.missionDescription && (
            <div
              className="text-[#202020]/70 text-md ld:text-lg space-y-0 font-medium mb-8"
              dangerouslySetInnerHTML={{ __html: data.missionDescription }}
            />
          )}


          {/* CTA */}
          {data.visionButtonLink && data.visionButtonText && (
            <Link
              href={data.visionButtonLink}
              className="group inline-flex items-center gap-2 mt-8
              border border-[#202020]/50 px-6 py-3 rounded text-md lg:text-lg font-medium
              hover:bg-[#101010] text-[#202020] hover:text-white transition"
            >
              {data.visionButtonText}
              <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>
      </div>
    </section>
  );
}