import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, ArrowUpLeft, CheckCircle2 } from "lucide-react";
import { ProductCarousel } from "@/components/product-carousel";
import { Features, SectionHeading, VideoBanner } from "@/components/sections";
import {
  blogUrl,
  formatPersianDate,
  getBlogs,
  getProducts,
} from "@/lib/meshkee";

export const metadata: Metadata = {
  title: "آینه هوشمند ضد بخار",
  description:
    "گلسموند، تولیدکننده آینه هوشمند ضد بخار با نور حرفه‌ای، استاندارد IP64، یک سال گارانتی و ده سال خدمات پس از فروش.",
  alternates: { canonical: "/" },
  openGraph: {
    title: "آینه هوشمند ضد بخار گلسموند",
    description:
      "آینه‌های هوشمند گلسموند؛ تلفیق طراحی مدرن، نور حرفه‌ای و فناوری ضد بخار.",
    url: "/",
    type: "website",
    locale: "fa_IR",
    images: ["/images/hero.jpg"],
  },
};

export default async function HomePage() {
  const [productData, blogData] = await Promise.all([
    getProducts({ pageSize: 12 }).catch(() => ({ items: [], total: 0, page: 1, pageSize: 12 })),
    getBlogs({ pageSize: 4 }).catch(() => ({ items: [], total: 0, page: 1, pageSize: 4 })),
  ]);

  return (
    <>
      <section className="home-hero">
        <div className="container hero-content">
          <span className="hero-kicker">اولین آینه ضد بخار در ایران</span>
          <h1>
            زیبایی را <strong>هوشمندانه</strong> ببینید
          </h1>
          <p>
            آینه‌های هوشمند گلسموند؛ تلفیقی از طراحی مدرن، نور حرفه‌ای و فناوری
            ضد بخار برای تجربه‌ای متفاوت.
          </p>
          <div className="hero-actions">
            <Link href="/products" className="primary-button">
              مشاهده محصولات
              <ArrowLeft />
            </Link>
            <Link href="/about" className="text-button">
              درباره گلسموند
              <ArrowUpLeft />
            </Link>
          </div>
        </div>
        <div className="hero-index" aria-hidden="true">
          <span>01</span>
          <i />
          <small>GLASSMOND</small>
        </div>
        <a href="#products" className="scroll-hint" aria-label="رفتن به محصولات">
          <span>اسکرول کنید</span>
          <i />
        </a>
      </section>

      <section id="products" className="products-section">
        <div className="container">
          <SectionHeading
            eyebrow=""
            englishTitle="NEW PRODUCTS"
            title="محصولات جدید ما"
            description="اولین آینه ضد بخار در ایران"
          />
          {productData.items.length > 0 ? (
            <ProductCarousel products={productData.items} />
          ) : (
            <p className="empty-state">در حال حاضر محصولی برای نمایش وجود ندارد.</p>
          )}
        </div>
      </section>

      <section className="resume-section">
        <div className="container resume-grid">
          <div>
            <SectionHeading
              eyebrow=""
              englishTitle="OUR STORY"
              title="یک دهه نوآوری در صنعت آینه هوشمند"
              align="start"
            />
            <p className="resume-text">
              صادرات به کشورهای خاورمیانه، همکاری با بزرگ‌ترین شرکت واگن‌سازی و
              لوکوموتیوسازی خاورمیانه (پارس مپنا) و ایجاد نمایندگی‌های معتبر و
              فعال در ایران و مناطق شمال کشور عراق، بخشی از مسیر گلسموند است.
            </p>
            <ul className="check-list">
              <li><CheckCircle2 /> ثبت اختراع آینه هوشمند ضد بخار</li>
              <li><CheckCircle2 /> تولید صنعتی با استاندارد IP64</li>
              <li><CheckCircle2 /> یک سال گارانتی و ده سال خدمات</li>
            </ul>
          </div>
          <div className="resume-image">
            <Image src="/images/about/gallery-2.jpg" alt="آینه هوشمند گلسموند" fill sizes="50vw" />
            <div className="experience-badge">
              <strong>+۱۰</strong>
              <span>سال تجربه و نوآوری</span>
            </div>
          </div>
        </div>
      </section>

      <Features />
      <VideoBanner />

      <section id="articles" className="articles-section">
        <div className="container">
          <SectionHeading
            eyebrow=""
            englishTitle="JOURNAL"
            title="جدیدترین مقالات"
            description="مطالب کاربردی درباره آینه، طراحی داخلی و دکوراسیون مدرن"
          />
          <div className="articles-grid">
            {blogData.items.map((article) => (
              <article className="article-card" key={article.id}>
                <div className="article-image">
                  <Link href={blogUrl(article)}>
                    <Image
                      src={article.titleImageUrl || "/images/articles/decorative-mirrors.jpg"}
                      alt={article.title}
                      fill
                      sizes="(max-width: 800px) 100vw, 25vw"
                    />
                  </Link>
                </div>
                <div className="article-copy">
                  <span>{formatPersianDate(article.publishedAt)}</span>
                  <h3><Link href={blogUrl(article)}>{article.title}</Link></h3>
                  <p>{article.abstract}</p>
                  <Link href={blogUrl(article)} aria-label={`مطالعه ${article.title}`}>
                    ادامه مطلب
                    <ArrowLeft />
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}