import Image from "next/image";
import Container from "./Container";
import { aspectRatioToCss, getStaticImageSlot } from "@/lib/meshkee";

export default async function About() {
  const slot = await getStaticImageSlot("about-us");
  const slotImage = slot?.images?.[0];

  const imageSrc = slotImage?.url || "/images/hero-2.jpg";
  const imageAlt = slotImage?.titleFa || "محصولات آراد آریسمان";
  const objectPositionClass = slotImage ? "object-center" : "object-left";
  const image = (
    <Image
      src={imageSrc}
      alt={imageAlt}
      fill
      className={`object-cover ${objectPositionClass}`}
      sizes="(min-width: 1024px) 45vw, 90vw"
    />
  );

  return (
    <section id="about" className="py-16 sm:py-20 bg-surface">
      <Container className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
        <div
          className="relative rounded-3xl overflow-hidden shadow-xl order-2 lg:order-1"
          style={{ aspectRatio: aspectRatioToCss(slot?.aspectRatio, "4 / 3") }}
        >
          {slotImage?.linkUrl ? (
            <a href={slotImage.linkUrl} className="absolute inset-0 block" aria-label={imageAlt}>
              {image}
            </a>
          ) : (
            image
          )}
        </div>

        <div className="order-1 lg:order-2 text-center lg:text-start">
          <span className="text-sm font-bold text-accent">درباره ما</span>
          <h2 className="mt-3 text-3xl sm:text-4xl font-extrabold text-primary">
            آراد آریسمان
          </h2>
          <p className="mt-6 leading-8 text-foreground">
            شرکت آراد آریسمان پیشرو در تولید و عرضه افزودنی‌های خوراک، ویتامین‌ها و
            مکمل‌های غذایی دام و طیور با بیش از ۲۳ سال فعالیت در بازار ایران می‌باشد.
            واردات این شرکت عمدتا از تولیدکنندگان معتبر بین‌المللی غذای دام و طیور از
            کشورهای انگلستان، فرانسه، ترکیه، هندوستان و چین می‌باشد.
          </p>
          <div className="mt-8 flex justify-center lg:justify-start gap-10">
            <div>
              <div className="text-3xl font-extrabold text-primary">۲۳+</div>
              <div className="mt-1 text-sm text-foreground">سال تجربه</div>
            </div>
            <div>
              <div className="text-3xl font-extrabold text-primary">۲۳۰+</div>
              <div className="mt-1 text-sm text-foreground">رضایت مشتری</div>
            </div>
            <div>
              <div className="text-3xl font-extrabold text-primary">۵</div>
              <div className="mt-1 text-sm text-foreground">کشور واردات</div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}