import Image from "next/image";
import { ABOUT } from "@/data/home";
import BilingualTitle from "@/components/ui/BilingualTitle";

type AboutSectionProps = {
  titleFa?: string;
  titleEn?: string;
  lead?: string;
  body?: string;
  image?: string;
  imageSecondary?: string;
};

export default function AboutSection({
  titleFa = ABOUT.titleFa,
  titleEn = ABOUT.titleEn,
  lead = ABOUT.lead,
  body = ABOUT.body,
  image = ABOUT.image,
  imageSecondary = ABOUT.imageSecondary,
}: AboutSectionProps) {
  return (
    <section id="about" dir="rtl" className="scroll-mt-24 bg-background py-16 lg:py-24">
      <div className="mx-auto grid max-w-[1200px] items-center gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
        <div className="relative mx-auto w-full max-w-[520px] lg:mx-0">
          <div
            aria-hidden
            className="absolute -inset-x-4 top-8 bottom-0 -z-0 rounded-[5px] border border-ink/15 bg-[#f3f3f3] sm:-inset-x-6 lg:inset-x-0 lg:-start-8 lg:end-12 lg:top-12"
            style={{
              backgroundImage:
                "radial-gradient(circle, rgba(10,10,10,0.14) 1px, transparent 1.2px)",
              backgroundSize: "14px 14px",
            }}
          />

          <div className="relative z-10 aspect-[4/5] w-[78%] overflow-hidden rounded-[5px] bg-[#ebe6df]">
            <Image
              src={image}
              alt={titleFa}
              fill
              sizes="(max-width: 1024px) 70vw, 380px"
              className="object-cover object-[center_18%]"
            />
          </div>

          <div className="absolute bottom-0 end-0 z-20 aspect-[3/4] w-[48%] overflow-hidden rounded-[5px] border border-white shadow-[0_12px_40px_rgba(0,0,0,0.12)]">
            <Image
              src={imageSecondary}
              alt=""
              fill
              sizes="(max-width: 1024px) 40vw, 240px"
              className="object-cover object-top"
            />
          </div>
        </div>

        <div className="relative text-right">
          <BilingualTitle
            titleFa={titleFa}
            titleEn={titleEn}
            size="xl"
            align="end"
          />
          <p className="mt-4 text-base font-medium text-ink sm:text-lg">
            {lead}
          </p>
          <p className="mt-4 text-justify text-sm font-light leading-8 text-ink/75 sm:text-[15px] sm:leading-8">
            {body}
          </p>
        </div>
      </div>
    </section>
  );
}