import Link from "next/link";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { SlotLink } from "@/components/SlotLink";
import { about } from "@/lib/data";
import { parseAspectRatio } from "@/lib/static-images";
import type { SlotMediaItem } from "@/lib/static-images";

export function AboutPreview({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
  const src = image?.image ?? about.image;
  const ratio = parseAspectRatio(aspectRatio);

  return (
    <section className="py-20 sm:py-28">
      <Container className="grid items-center gap-12 lg:grid-cols-12 lg:gap-16">
        <div className="lg:col-span-5">
          <p className="section-kicker">About us</p>
          <h2 className="mt-4 text-3xl font-extrabold leading-snug sm:text-[34px]">{about.title}</h2>
          <p className="mt-6 text-[17px] leading-9 text-muted">{about.paragraphs[0]}</p>
          <p className="mt-4 text-[17px] leading-9 text-muted">{about.paragraphs[1]}</p>
          <Link
            href="/about"
            className="mt-8 inline-flex items-center gap-3 text-[14px] font-bold text-brand"
          >
            ادامه داستان مجموعه
            <span className="h-px w-10 bg-brand" />
          </Link>
        </div>
        <div className="relative lg:col-span-7">
          <SlotLink
            href={image?.href}
            className="relative z-[1] block overflow-hidden rounded-2xl"
          >
            <span className="relative block w-full" style={ratio ? { aspectRatio: ratio } : undefined}>
              <Placeholder
                src={src}
                fallbackSrc={image?.fallbackSrc ?? about.image}
                alt={about.title}
                className={`w-full object-cover ${ratio ? "absolute inset-0 h-full" : "relative h-auto"}`}
              />
            </span>
          </SlotLink>
          <div className="absolute -bottom-6 left-0 z-[2] rounded-2xl bg-brand px-8 py-6 text-white sm:-bottom-8 sm:left-8">
            <p className="text-5xl font-extrabold leading-none sm:text-6xl">۳۰+</p>
            <p className="mt-1 text-[13px] text-white/85">سال خدمت در قم</p>
          </div>
        </div>
      </Container>
    </section>
  );
}