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

export const metadata: Metadata = pageMetadata({
  title: "خط مشی سیستم مدیریت یکپارچه",
  description:
    "خط مشی سیستم مدیریت یکپارچه (IMS) شرکت رسام تجارت هواران بر اساس استانداردهای ISO 9001، ISO 14001 و ISO 45001",
  path: "/ims-policy",
});

export default function ImsPolicyPage() {
  return (
    <>
      <Header />
      <main>
        <PageHero
          title={imsPolicy.title}
          titleEn={imsPolicy.titleEn}
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: imsPolicy.title, href: imsPolicy.href },
          ]}
        />

        <section className="section">
          <div className="container-page max-w-4xl">
            <div className="space-y-5">
              {imsPolicy.paragraphs.map((paragraph) => (
                <p
                  key={paragraph.slice(0, 40)}
                  className="text-sm leading-8 text-[#666] text-justify"
                >
                  {paragraph}
                </p>
              ))}
            </div>
          </div>
        </section>

        <section className="section section-gray">
          <div className="container-page max-w-4xl">
            <h2 className="mb-6 text-xl font-bold text-[#232323] sm:text-2xl">
              {imsPolicy.goalsTitle}
            </h2>
            <ul className="space-y-3">
              {imsPolicy.goals.map((goal, index) => (
                <li
                  key={goal}
                  className="flex gap-3 border-b border-[#eaeaea] pb-3 text-sm leading-8 text-[#555] text-justify last:border-b-0"
                >
                  <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-navy text-xs font-bold text-white">
                    {index + 1}
                  </span>
                  <span>{goal}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
