import Image from "next/image";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero } from "@/components/PageShared";
import { catalogPage } from "@/data/company";
import type { Metadata } from "next";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: "کاتالوگ",
  description:
    "دانلود کاتالوگ عمومی شرکت رسام تجارت هواران؛ محصولات و فعالیت‌ها",
  path: "/catalog",
});

export default function CatalogPage() {
  return (
    <>
      <Header />
      <main>
        <PageHero
          title={catalogPage.title}
          titleEn={catalogPage.titleEn}
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "کاتالوگ", href: "/catalog" },
          ]}
        />

        <section className="section">
          <div className="container-page grid max-w-4xl items-center gap-8 md:grid-cols-2">
            <div className="relative mx-auto aspect-[5/4] w-full max-w-md overflow-hidden bg-[#fafafa]">
              <Image
                src={catalogPage.cover}
                alt={catalogPage.heading}
                fill
                className="object-contain p-4"
                sizes="(max-width: 768px) 100vw, 40vw"
                priority
              />
            </div>

            <div>
              <h2 className="mb-4 text-xl font-bold text-[#232323]">
                {catalogPage.heading}
              </h2>
              <div className="mb-6 space-y-3">
                {catalogPage.text.map((paragraph) => (
                  <p
                    key={paragraph}
                    className="text-sm leading-8 text-[#666] text-justify"
                  >
                    {paragraph}
                  </p>
                ))}
              </div>

              <a
                href={catalogPage.downloadHref}
                download={catalogPage.fileName}
                className="group inline-flex items-stretch overflow-hidden bg-[#f3f3f3] text-[#232323] transition hover:bg-[#ececec]"
              >
                <span className="flex items-center justify-center bg-accent-green px-4 text-white transition group-hover:bg-[#218838]">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    aria-hidden
                  >
                    <path
                      d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14"
                      stroke="currentColor"
                      strokeWidth="1.8"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </span>
                <span className="flex flex-col justify-center px-5 py-3 text-right">
                  <span className="text-sm font-bold leading-none">
                    {catalogPage.downloadLabel} کاتالوگ
                  </span>
                  <span className="mt-1.5 text-[11px] tracking-wide text-[#888]">
                    PDF — HavaranCatalog.pdf
                  </span>
                </span>
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
