import type { Metadata } from "next";
import Link from "next/link";

import heroImage from "@/assets/images/hero/hero-1.jpg";
import heroImageMobile from "@/assets/images/hero/hero-1-mobile.jpg";
import { Reveal } from "@/components/Reveal";
import { NewsCarousel } from "@/components/news/NewsCarousel";
import { Editorial } from "@/components/shared/Editorial";
import { PageCta } from "@/components/shared/PageCta";
import { PageHero } from "@/components/shared/PageHero";
import { SiteFooter } from "@/components/SiteFooter";
import { SiteHeader } from "@/components/SiteHeader";
import { blog, news, newsAndBlogPage } from "@/data/site";

export const metadata: Metadata = {
  title: "مقالات و اخبار",
  description: "آخرین اخبار، رویدادها و مقالات گروه ساختمانی رئوفی.",
};

export default function NewsAndBlogPage() {
  const hasNews = news.length > 0;
  const hasBlog = blog.length > 0;
  const hasNothing = !hasNews && !hasBlog;

  return (
    <>
      <SiteHeader />

      <main>
        <PageHero
          image={heroImage}
          imageMobile={heroImageMobile}
          caption={newsAndBlogPage.hero.caption}
          title={newsAndBlogPage.hero.title}
          breadcrumb={newsAndBlogPage.hero.breadcrumb}
        />

        <section className="bg-paper">
          <Editorial
            caption={newsAndBlogPage.overview.caption}
            captionLatin={newsAndBlogPage.overview.captionLatin}
            title={newsAndBlogPage.overview.title}
            body={newsAndBlogPage.overview.body}
            compact
          />
        </section>

        {hasNothing && (
          <section className="bg-sand py-16 lg:py-24">
            <p className="text-center text-muted">{newsAndBlogPage.emptyMessage}</p>
          </section>
        )}

        {hasNews && (
          <section className="bg-sand py-16 lg:py-24">
            <div className="mx-auto max-w-[1400px] px-6 lg:px-12">
              <Reveal>
                <p className="kicker mb-10 justify-center">
                  {newsAndBlogPage.news.caption}
                  <span className="latin">{newsAndBlogPage.news.captionLatin}</span>
                </p>
              </Reveal>
            </div>

            <NewsCarousel items={news} basePath="/news" />

            <div className="mx-auto mt-10 max-w-[1400px] px-6 text-center lg:px-12">
              <Link
                href="/news"
                className="inline-block rounded-full bg-gold px-9 py-3.5 text-white transition-colors duration-300 hover:bg-ink"
              >
                {newsAndBlogPage.news.action}
              </Link>
            </div>
          </section>
        )}

        {hasBlog && (
          <section className={`py-16 lg:py-24 ${hasNews ? "bg-paper" : "bg-sand"}`}>
            <div className="mx-auto max-w-[1400px] px-6 lg:px-12">
              <Reveal>
                <p className="kicker mb-10 justify-center">
                  {newsAndBlogPage.blog.caption}
                  <span className="latin">{newsAndBlogPage.blog.captionLatin}</span>
                </p>
              </Reveal>
            </div>

            <NewsCarousel items={blog} basePath="/blog" />

            <div className="mx-auto mt-10 max-w-[1400px] px-6 text-center lg:px-12">
              <Link
                href="/blog"
                className="inline-block rounded-full bg-gold px-9 py-3.5 text-white transition-colors duration-300 hover:bg-ink"
              >
                {newsAndBlogPage.blog.action}
              </Link>
            </div>
          </section>
        )}

        <PageCta
          caption={newsAndBlogPage.cta.caption}
          title={newsAndBlogPage.cta.title}
          action={newsAndBlogPage.cta.action}
        />
      </main>

      <SiteFooter />
    </>
  );
}