import Image from "next/image";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero } from "@/components/PageShared";
import { smokeBlocks, smokeIntro } from "@/data/smoke";
import type { Metadata } from "next";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: "مدیریت دود ساختمان",
  description: "طراحی، تامین و اجرای سیستم‌های مدیریت دود ساختمان",
  path: "/solutions/building-smoke-management",
  image: "/images/pages/smoke/hero.png",
});

export default function SmokeManagementPage() {
  return (
    <>
      <Header />
      <main>
        <PageHero
          title="سیستم های مدیریت دود"
          titleEn="Smoke Management Systems"
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "راهکارها", href: "/solutions" },
            {
              label: "مدیریت دود ساختمان",
              href: "/solutions/building-smoke-management",
            },
          ]}
        />

        <section className="section">
          <div className="container-page grid items-center gap-8 md:grid-cols-2">
            <div className="relative flex min-h-[280px] items-center justify-center">
              <Image
                src={smokeIntro.image}
                alt={smokeIntro.title}
                width={560}
                height={420}
                className="h-auto w-full max-w-lg object-contain"
                sizes="(max-width: 768px) 100vw, 50vw"
                priority
              />
            </div>
            <div>
              <h2 className="mb-2 text-xl font-bold text-[#232323]">
                {smokeIntro.title}
              </h2>
              {smokeIntro.titleEn ? (
                <p className="mb-4 text-xs tracking-wide text-[#999]">
                  {smokeIntro.titleEn}
                </p>
              ) : null}
              <div className="space-y-3">
                {smokeIntro.text.map((paragraph) => (
                  <p
                    key={paragraph.slice(0, 48)}
                    className="text-sm leading-8 text-[#666] text-justify"
                  >
                    {paragraph}
                  </p>
                ))}
              </div>
              {smokeIntro.videoUrl ? (
                <div className="mt-6 aspect-video overflow-hidden bg-black">
                  <iframe
                    src={smokeIntro.videoUrl}
                    title="ویدیو سیستم مدیریت دود"
                    className="h-full w-full"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                </div>
              ) : null}
            </div>
          </div>
        </section>

        {smokeBlocks.map((block, index) => (
          <section
            key={block.id}
            className={`section ${index % 2 === 0 ? "section-gray" : ""}`}
          >
            <div
              className={`container-page grid items-start gap-8 ${
                block.image ? "lg:grid-cols-2" : ""
              }`}
            >
              <div className={index % 2 === 1 && block.image ? "lg:order-2" : ""}>
                <h2 className="mb-2 text-lg font-bold leading-8 text-[#232323] sm:text-xl">
                  {block.title}
                </h2>
                {block.titleEn ? (
                  <p className="mb-4 text-xs tracking-wide text-[#999]">
                    {block.titleEn}
                  </p>
                ) : (
                  <div className="mb-4" />
                )}
                {block.intro.length > 0 ? (
                  <div className="space-y-3">
                    {block.intro.map((paragraph) => (
                      <p
                        key={paragraph.slice(0, 48)}
                        className="text-sm leading-8 text-[#666] text-justify"
                      >
                        {paragraph}
                      </p>
                    ))}
                  </div>
                ) : null}
                {block.lists ? (
                  <ul className="mt-4 space-y-2">
                    {block.lists.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>
                ) : null}
                {block.groups
                  ? block.groups.map((group) => (
                      <div key={group.title} className="mt-4">
                        <h3 className="mb-2 text-sm font-bold text-[#333]">
                          {group.title}
                        </h3>
                        <ul className="space-y-2">
                          {group.items.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>
                    ))
                  : null}
              </div>

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