import type { Metadata } from "next";
import Image from "next/image";
import { PageHero } from "@/components/PageHero";
import { SlotImage } from "@/components/SlotImage";
import { SITE } from "@/lib/site";
import {
  STATIC_IMAGE_KEYS,
  getStaticImageSlot,
  imagesForSlot,
  slotAlt,
} from "@/lib/static-images";

export const metadata: Metadata = {
  title: `درباره ما | ${SITE.nameFa}`,
  description: SITE.about,
  alternates: { canonical: "/aboutus" },
};

export default async function AboutPage() {
  const slot = await getStaticImageSlot(STATIC_IMAGE_KEYS.aboutUsImage);
  const images = slot ? imagesForSlot([slot], STATIC_IMAGE_KEYS.aboutUsImage) : [];
  const hero = images[0];
  const side = images[1];

  return (
    <>
      <PageHero title="درباره ما" english="About Us" />
      <section className="container-site py-10 md:py-14">
        <div className="relative overflow-hidden rounded-2xl min-h-[280px] md:min-h-[360px]">
          {hero ? (
            <SlotImage image={hero} fill alt={slotAlt(hero, SITE.nameFa)} />
          ) : (
            <Image
              src="/images/pages/about-bg.webp"
              alt={SITE.nameFa}
              fill
              priority
              sizes="1200px"
              className="object-cover object-center"
            />
          )}
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                "linear-gradient(to left, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.2) 100%)",
            }}
          />
          <div className="relative z-[1] max-w-xl p-6 md:p-10 text-white">
            <h2 className="text-2xl md:text-4xl font-extrabold mb-4">{SITE.nameFa}</h2>
            <p className="text-sm md:text-base leading-8 text-white/90 text-justify">{SITE.about}</p>
          </div>
        </div>

        <div className="mt-10 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>
          </div>
          <div className="relative mx-auto w-full max-w-xs">
            {side ? (
              <SlotImage
                image={side}
                alt={slotAlt(side, SITE.nameFa)}
                imgClassName="h-auto w-full object-contain"
              />
            ) : (
              <Image
                src="/images/pages/about-side.png"
                alt={SITE.nameFa}
                width={300}
                height={603}
                className="h-auto w-full object-contain"
              />
            )}
          </div>
        </div>
      </section>
    </>
  );
}