هیرو روی عکس

"use client"

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

/**
 * هیروی تمام‌قد روی عکس: عکسِ واقعی پشتِ متن با محوشدنِ تیره از پایین و کنار تا متن
 * همیشه خوانا بماند؛ تیتر، توضیح و دو دکمه در پایینِ قاب. برای برند، سفر و فروشگاه.
 */
export default function HeroImageBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section className="relative isolate flex min-h-[36rem] items-end overflow-hidden bg-[var(--dig-graphite-950)] text-[var(--dig-white)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)] sm:min-h-[44rem]">
        {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
        <img src={stockImages.planeWindow.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)_55%,transparent)] to-transparent" />
        <div aria-hidden className="absolute inset-0 -z-10 bg-linear-to-l from-[color-mix(in_oklab,var(--dig-graphite-950)_60%,transparent)] to-transparent" />
        <div className="mx-auto flex w-full max-w-6xl flex-col items-start gap-6 px-4 pb-16 sm:px-6 sm:pb-24">
          <span className="text-sm font-semibold text-[var(--dig-orange-400)]">سفرِ پاییزی</span>
          <h1 className="max-w-2xl text-4xl leading-snug font-black text-balance sm:text-6xl sm:leading-snug">از پنجرهٔ هواپیما، جای تازه‌ای را ببین</h1>
          <p className="max-w-lg text-lg leading-8 text-[var(--dig-neutral-300)]">پرواز و هتل با قیمتِ روشن، بازپرداختِ آسان و پشتیبانی شبانه‌روزی.</p>
          <div className="mt-2 flex flex-wrap gap-3">
            <Button>جست‌وجوی پرواز</Button>
            <Button variant="outline" className="border-[var(--dig-neutral-400)] bg-inverse text-[var(--dig-white)] hover:bg-inverse-raised">
              پیشنهادهای ویژه
            </Button>
          </div>
        </div>
      </section>
    </ControlSizeProvider>
  )
}