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 { chillerBlocks, chillerFaq, chillerIntro } from "@/data/chiller";
import type { Metadata } from "next";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: "چیلر",
  description: "خرید انواع چیلر با قیمت مناسب و کیفیت بالا",
  path: "/products/chiller",
  image: "/images/pages/chiller/air-cooled.png",
});

export default function ChillerPage() {
  return (
    <>
      <Header />
      <main>
        <PageHero
          title="چیلـــر"
          titleEn="Chiller"
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "محصولات", href: "/products" },
            { label: "چیلر", href: "/products/chiller" },
          ]}
        />

        <section className="section">
          <div className="container-page max-w-4xl">
            <h2 className="mb-4 text-center text-xl font-bold text-[#232323]">
              {chillerIntro.title}
            </h2>
            {chillerIntro.text.map((paragraph) => (
              <p
                key={paragraph.slice(0, 40)}
                className="text-sm leading-8 text-[#666] text-justify"
              >
                {paragraph}
              </p>
            ))}
          </div>
        </section>

        {chillerBlocks.map((block, index) => (
          <section
            key={block.id}
            className={`section ${index % 2 === 0 ? "section-gray" : ""}`}
          >
            <div className="container-page grid items-start gap-8 lg:grid-cols-2">
              <div className={index % 2 === 1 ? "lg:order-2" : ""}>
                <h2 className="mb-1 text-lg font-bold leading-8 text-[#232323] sm:text-xl">
                  {block.title}
                </h2>
                <p className="mb-4 text-sm tracking-wide text-[#999]">
                  {block.titleEn}
                </p>
                <div className="space-y-3">
                  {block.intro.map((paragraph) => (
                    <p
                      key={paragraph.slice(0, 40)}
                      className="text-sm leading-8 text-[#666] text-justify"
                    >
                      {paragraph}
                    </p>
                  ))}
                </div>

                <h3 className="mt-6 mb-3 text-base font-bold text-[#232323]">
                  {block.benefitsTitle}
                </h3>
                <div className="mb-4 grid grid-cols-3 gap-3">
                  {block.benefits.map((f) => (
                    <div key={f.label} className="text-center">
                      <Image
                        src={f.img}
                        alt={f.label}
                        width={64}
                        height={64}
                        className="mx-auto mb-2 object-contain"
                      />
                      <p className="text-xs text-[#555]">{f.label}</p>
                    </div>
                  ))}
                </div>

                <SpecList items={[...block.specs]} />
              </div>

              <div
                className={`relative flex min-h-[280px] items-center justify-center ${
                  index % 2 === 1 ? "lg:order-1" : ""
                } ${block.isPng ? "" : "overflow-hidden bg-[#f7f7f7]"}`}
              >
                <Image
                  src={block.image}
                  alt={block.imageAlt}
                  width={560}
                  height={420}
                  className={`h-auto w-full max-w-lg object-contain ${
                    block.isPng ? "" : "object-cover"
                  }`}
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  priority={index === 0}
                />
              </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={chillerFaq} />
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
