import Image from "next/image";
import Link from "next/link";
import { SITE } from "@/lib/site";

export function AboutUs() {
  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>
        <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>
  );
}