import Link from "next/link";
import { SlotLinkedImage } from "@/app/components/slot-media";
import { getStaticImageSlot, getStaticImages } from "@/lib/meshkee/api";
import { slotImages } from "@/lib/meshkee/static-slots";
import type { StaticImageItem, StaticImageSlot } from "@/lib/meshkee/types";
import { aboutCopy, features, site } from "@/lib/site-data";

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

async function loadAboutImages(): Promise<StaticImageItem[]> {
  const aboutSlots = await getStaticImages("about").catch(
    () => [] as StaticImageSlot[],
  );
  const fromPage = slotImages(aboutSlots, "about-us-image");
  if (fromPage.length) return fromPage;

  const slot = await getStaticImageSlot("about-us-image");
  return slot ? slotImages([slot], "about-us-image") : [];
}

export default async function AboutPage() {
  const aboutImages = await loadAboutImages();
  const primaryImage = aboutImages[0];
  const secondaryImage = aboutImages[1];

  return (
    <main className="container">
      <section className="page-hero">
        <p className="eyebrow">{aboutCopy.eyebrow}</p>
        <h1>{aboutCopy.title}</h1>
        <p>{aboutCopy.quote}</p>
      </section>

      <section className="content-grid">
        <article className="contact-card">
          <p className="eyebrow">Story</p>
          <h2>{aboutCopy.storyTitle}</h2>
          <p>{aboutCopy.story}</p>
          <p>
            هومت با تکیه بر تولید مستقیم، تلاش می‌کند تجربه خرید مبلمان را برای
            خانواده‌ها ساده‌تر کند؛ از انتخاب محصول تا مشاوره، سفارش و تحویل.
          </p>
        </article>

        <article className="contact-card">
          <p className="eyebrow">Vision</p>
          <h2>{aboutCopy.visionTitle}</h2>
          <p>{aboutCopy.vision}</p>
          <ul className="contact-list">
            {features.map((feature) => (
              <li key={feature.title}>
                {feature.title} - {feature.subtitle}
              </li>
            ))}
          </ul>
          <Link className="primary-btn" href="/contactus">
            تماس با هومت
          </Link>
        </article>
      </section>

      <section className="section">
        <div className="about-panel">
          <SlotLinkedImage
            image={primaryImage}
            fallbackSrc={site.heroImages[2]}
            alt="نمایشگاه و مبلمان هومت"
            width={720}
            height={620}
          />
          <div className="about-copy">
            <p className="eyebrow">ONLINE FURNITURE SHOP</p>
            <h2>فروشگاه آنلاین خرید مبلمان منزل با تنوع بالا</h2>
            <p>
              مجموعه هومت محصولات اصلی مورد نیاز دکوراسیون منزل را پوشش می‌دهد:
              مبلمان راحتی، کلاسیک، مینیمال، مبل تخت‌خواب‌شو، میز ناهارخوری،
              صندلی، سرویس خواب و میزهای کاربردی.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="about-panel about-panel-secondary">
          <SlotLinkedImage
            image={secondaryImage}
            fallbackSrc={site.heroImages[0]}
            alt="فضای نمایشگاهی هومت"
            width={720}
            height={620}
          />
          <div className="about-copy">
            <p className="eyebrow">SHOWROOM</p>
            <h2>از انتخاب مدل تا چیدمان نهایی</h2>
            <p>
              در نمایشگاه و کارخانه هومت می‌توانید پارچه، رنگ و مدل را از نزدیک
              بررسی کنید و با راهنمایی مشاوران، ترکیبی هماهنگ برای منزل خود بسازید.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}