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

export const metadata: Metadata = pageMetadata({
  title: "درباره ما",
  description:
    "درباره شرکت رسام تجارت هواران؛ طراحی، تامین و تولید تجهیزات تهویه مطبوع و سیستم‌های مدیریت دود",
  path: "/about",
  image: aboutPage.image,
});

export default function AboutUsPage() {
  return (
    <>
      <Header />
      <main>
        <PageHero
          title={aboutPage.title}
          titleEn={aboutPage.titleEn}
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "درباره ما", href: "/about" },
          ]}
        />

        <section className="section">
          <div className="container-page grid items-start gap-8 lg:grid-cols-2">
            <div className="relative aspect-[4/3] overflow-hidden">
              <Image
                src={aboutPage.image}
                alt={aboutPage.companyTitle}
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
                priority
              />
            </div>
            <div>
              <h2 className="mb-1 text-xl font-bold text-[#232323] sm:text-2xl">
                {aboutPage.companyTitle}
              </h2>
              <p className="mb-5 text-sm tracking-wide text-[#999]">
                {aboutPage.companyTitleEn}
              </p>
              <div className="space-y-4">
                {aboutPage.paragraphs.map((paragraph) => (
                  <p
                    key={paragraph.slice(0, 32)}
                    className="text-sm leading-8 text-[#666] text-justify"
                  >
                    {paragraph}
                  </p>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="section section-gray">
          <div className="container-page max-w-4xl">
            <div className="mb-6 text-center">
              <h2 className="mb-1 text-xl font-bold text-[#232323] sm:text-2xl">
                {aboutPage.activitiesTitle}
              </h2>
              <p className="text-sm tracking-wide text-[#999]">
                {aboutPage.activitiesTitleEn}
              </p>
            </div>
            <ol className="space-y-3">
              {aboutPage.activities.map((item, index) => (
                <li
                  key={item}
                  className="flex gap-3 text-sm leading-8 text-[#555] text-justify"
                >
                  <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>{item}</span>
                </li>
              ))}
            </ol>

            <h3 className="mt-8 mb-4 text-lg font-bold text-[#232323]">
              {aboutPage.technicalTitle}
            </h3>
            <ul className="space-y-2">
              {aboutPage.technicalServices.map((item) => (
                <li
                  key={item}
                  className="flex gap-2 border-b border-[#eaeaea] py-2 text-sm leading-7 text-[#555]"
                >
                  <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-green" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            <p className="mt-10 text-center text-base font-bold text-[#232323]">
              {aboutPage.slogan}
            </p>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
