import Image from "next/image";
import Link from "next/link";
import { SlotImage } from "@/components/SlotImage";
import { SITE } from "@/lib/site";
import type { StaticImageWithUrl } from "@/lib/static-images";
import { slotAlt, slotAspectStyle } from "@/lib/static-images";

export function AboutUs({
  image,
  aspectRatio,
}: {
  image?: StaticImageWithUrl;
  aspectRatio?: string;
}) {
  return (
    <section id="about" className="container-site mt-14">
      <div className="grid md:grid-cols-2 gap-8 items-center rounded-2xl bg-zinc-50 p-5 md:p-8">
        <div>
          <p className="font-carter text-brand tracking-[0.2em] text-sm mb-2">SALAR STORE</p>
          <h2 className="section-title mb-4">درباره ما</h2>
          <p className="text-zinc-600 leading-8 text-justify">{SITE.about}</p>
          <Link href="/aboutus" className="mt-5 inline-block text-sm text-brand">
            مشاهده بیشتر
          </Link>
        </div>
        {image ? (
          <div className="relative overflow-hidden rounded-2xl bg-white" style={slotAspectStyle(aspectRatio, "8:5")}>
            <SlotImage image={image} fill alt={slotAlt(image, SITE.nameFa)} />
          </div>
        ) : (
          <div className="relative flex aspect-[16/10] items-center justify-center rounded-2xl bg-white p-8 md:p-12">
            <Image
              src="/images/logo/logo.png"
              alt={SITE.nameFa}
              width={360}
              height={120}
              className="h-auto w-full max-w-sm object-contain"
            />
          </div>
        )}
      </div>
    </section>
  );
}