مقاله با کاورِ تمام‌عرض

"use client"

import { Avatar } from "@/components/ui/avatar"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { stockImages } from "@/lib/stock-images"

/**
 * مقاله با کاورِ تمام‌عرض: عکسِ بزرگ با محوشدنِ تیره و تیتر، نویسنده و زمانِ خواندن روی آن؛
 * متن در ستونِ خوانا (حدودِ ۴۲rem) با نقل‌قولِ برجسته و عکسِ میانِ متن با زیرنویس.
 */
export default function ArticleCoverBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <article className="flex w-full flex-col">
        <header className="relative isolate flex min-h-[28rem] items-end overflow-hidden sm:min-h-[34rem]">
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.restaurant.src} alt="" className="absolute inset-0 -z-10 size-full object-cover" />
          <div aria-hidden className="absolute inset-0 -z-10 bg-linear-to-t from-[var(--dig-graphite-950)] via-[color-mix(in_oklab,var(--dig-graphite-950)_50%,transparent)] to-transparent" />
          <div className="mx-auto flex w-full max-w-3xl flex-col gap-5 px-4 pb-12 text-[var(--dig-white)] sm:px-6">
            <span className="text-sm font-semibold text-[var(--dig-orange-300)]">روایتِ مشتری</span>
            <h1 className="text-3xl leading-snug font-black text-balance sm:text-5xl sm:leading-snug">کافه‌ای که با داده زنده ماند</h1>
            <div className="flex items-center gap-3 text-sm text-[var(--dig-neutral-300)]">
              <Avatar size="sm" alt="" src={stockImages.personWoman3.src} />
              <span className="font-medium text-[var(--dig-white)]">نگار احمدی</span>
              <span aria-hidden>·</span>
              ۱۰ مهر ۱۴۰۵
              <span aria-hidden>·</span>
              ۸ دقیقه
            </div>
          </div>
        </header>
        <div className="mx-auto flex w-full max-w-[42rem] flex-col gap-6 px-4 py-14 text-lg leading-9 sm:px-6">
          <p className="text-xl leading-9 font-medium">سه سال پیش «کافه رست» هر ماه ضرر می‌داد و کسی نمی‌دانست چرا. امروز چهار شعبه دارد.</p>
          <p className="text-muted-foreground">اولین کاری که کردند ساده بود: هر شب، فروشِ روز را با هزینهٔ مواد مقایسه کردند. همین یک عدد نشان داد کدام نوشیدنی‌ها سود ندارند.</p>
          <blockquote className="my-4 border-s-4 border-[var(--dig-orange-400)] ps-6 text-2xl leading-relaxed font-bold">«ما فکر می‌کردیم مشکل فروش است؛ مشکل دانستن بود.»</blockquote>
          <p className="text-muted-foreground">بعد سراغِ ساعت‌های خلوت رفتند و برنامهٔ نیرو را با نمودارِ ساعتی فروش تنظیم کردند.</p>
          <figure className="my-4 flex flex-col gap-3">
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img src={stockImages.foodDish.src} alt={stockImages.foodDish.alt} loading="lazy" className="aspect-[16/10] w-full rounded-xl object-cover" />
            <figcaption className="text-center text-sm text-muted-foreground">منوی تازه با غذاهای کم‌هزینه‌تر و پرفروش‌تر</figcaption>
          </figure>
          <p className="text-muted-foreground">نتیجه: هزینهٔ مواد ٪۲۰ کم شد و میانگینِ سفارش بالا رفت.</p>
        </div>
      </article>
    </ControlSizeProvider>
  )
}