import Image from "next/image";
import { Accordion } from "@/components/Accordion";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero, SpecList } from "@/components/PageShared";
import { ahuAdvantages, ahuFaq, ahuIntro } from "@/data/ahu";
import type { Metadata } from "next";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: "هواساز",
  description: "خرید انواع هواساز با قیمت مناسب و گارانتی معتبر",
  path: "/products/air-conditioner",
  image: "/images/products/ahu.png",
});

export default function AirConditionerPage() {
  return (
    <>
      <Header />
      <main>
        <PageHero
          title="خرید هــواســاز"
          titleEn="Air Handling Unit"
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "محصولات", href: "/products" },
            { label: "هواساز", href: "/products/air-conditioner" },
          ]}
        />

        <section className="section">
          <div className="container-page grid items-start gap-8 lg:grid-cols-2">
            <div className="relative flex min-h-[280px] items-center justify-center">
              <Image
                src={ahuIntro.image}
                alt={ahuIntro.imageAlt}
                width={560}
                height={420}
                className="h-auto w-full max-w-lg object-contain"
                sizes="(max-width: 1024px) 100vw, 50vw"
                priority
              />
            </div>
            <div>
              <h2 className="mb-1 text-xl font-bold text-[#232323]">
                {ahuIntro.title}
              </h2>
              <p className="mb-4 text-sm tracking-wide text-[#999]">
                {ahuIntro.titleEn}
              </p>
              <div className="space-y-3">
                {ahuIntro.text.map((paragraph) => (
                  <p
                    key={paragraph.slice(0, 40)}
                    className="text-sm leading-8 text-[#666] text-justify"
                  >
                    {paragraph}
                  </p>
                ))}
              </div>
              <h3 className="mt-5 mb-3 text-base font-bold text-[#232323]">
                {ahuIntro.componentsTitle}
              </h3>
              <ul className="space-y-2">
                {ahuIntro.components.map((item) => (
                  <li
                    key={item}
                    className="flex gap-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>
            </div>
          </div>
        </section>

        <section className="section section-gray">
          <div className="container-page grid items-start gap-8 lg:grid-cols-2">
            <div>
              <SpecList items={ahuIntro.specs} />
            </div>
            <div className="relative flex min-h-[280px] items-center justify-center">
              <Image
                src={ahuIntro.specsImage}
                alt="مشخصات فنی هواساز"
                width={560}
                height={420}
                className="h-auto w-full max-w-lg object-contain"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>
          </div>
        </section>

        <section className="section">
          <div className="container-page grid items-start gap-8 lg:grid-cols-2">
            <div
              className={`relative flex min-h-[280px] items-center justify-center overflow-hidden bg-[#f7f7f7]`}
            >
              <Image
                src={ahuAdvantages.image}
                alt={ahuAdvantages.imageAlt}
                width={560}
                height={420}
                className="h-auto w-full max-w-lg object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>
            <div>
              <h2 className="mb-4 text-xl font-bold text-[#232323]">
                {ahuAdvantages.title}
              </h2>
              <ul className="space-y-3">
                {ahuAdvantages.items.map((item) => (
                  <li
                    key={item.slice(0, 40)}
                    className="flex gap-2 text-sm leading-8 text-[#555] text-justify"
                  >
                    <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-green" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

        <section className="section section-gray">
          <div className="container-page max-w-3xl">
            <h2 className="mb-4 text-xl font-bold text-[#232323]">
              پرسش‌های متداول
            </h2>
            <Accordion items={ahuFaq} />
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
