import Image from "next/image";
import Link from "next/link";
import type { AboutContent } from "@/app/lib/content";

export default function AboutSection({ content }: { content: AboutContent }) {
  return (
    <section
      id="about"
      className="site-container flex flex-col md:flex-row items-stretch gap-4 md:gap-4 py-4"
    >
      <div className="flex-1 bg-[#1f3fb8] text-white rounded-2xl p-5 md:p-6 lg:p-8 border border-[#18339a] flex flex-col gap-3">
        <h2 className="text-xl md:text-2xl font-bold">{content.heading}</h2>
        <p className="text-sm md:text-base text-white/95 leading-relaxed">
          {content.body}
        </p>
        <div className="relative w-full h-56 sm:h-64 md:h-70 mt-2">
          <Image
            src={content.primaryImage}
            alt={content.heading}
            fill
            sizes="(min-width: 768px) 50vw, 100vw"
            className="rounded-xl object-cover"
          />
        </div>
        <Link
          href={content.ctaHref}
          className="mt-2 inline-flex items-center gap-2 w-fit text-white font-semibold hover:underline"
        >
          <span>{content.ctaText}</span>
          <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-white text-[12px] leading-none">
            &gt;
          </span>
        </Link>
      </div>
      <div className="flex-1 flex flex-col gap-4 md:items-end w-full md:w-auto">
        <div className="relative w-full md:w-[86%] h-64 sm:h-80 md:h-104 lg:h-120">
          <Image
            src={content.secondaryImage}
            alt={`${content.heading} secondary`}
            fill
            sizes="(min-width: 1600px) 640px, (min-width: 768px) 43vw, 94vw"
            className="rounded-xl object-cover"
          />
        </div>
      </div>
    </section>
  );
}
