هیروی وسط‌چین

"use client"

import { ArrowUpIcon } from "@/components/icons"
import { DotPattern } from "@/components/ui/background-pattern"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Marquee, MarqueeItem } from "@/components/ui/marquee"

const LOGOS = ["fintech/digipay", "fintech/asan-pardakht", "banks/blu", "banks/day", "fintech/digipay", "banks/blu"]

/**
 * هیروی وسط‌چینِ تیره روی پترنِ نقطه‌ای: اعلانِ کوچکِ قابلِ کلیک، تیترِ بزرگ، دو دکمه،
 * و ردیفِ لوگوی مشتری‌ها که بی‌پایان می‌چرخد. رنگ‌ها با بازتعریفِ متغیرهای پایه.
 */
export default function HeroCenteredBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section className="relative overflow-hidden bg-inverse px-4 py-24 text-[var(--dig-white)] [--border:var(--inverse-border)] [--muted-foreground:var(--dig-neutral-400)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)] sm:px-6 sm:py-32">
        <DotPattern size={22} />
        <div className="relative mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
          <a href="#" className="flex items-center gap-2 rounded-full border border-border bg-inverse-raised px-4 py-1.5 text-sm hover:bg-inverse-border">
            <span className="size-2 rounded-full bg-[var(--dig-green-400)]" aria-hidden />
            نسخهٔ ۳ منتشر شد
            <ArrowUpIcon aria-hidden className="size-4 rotate-45 rtl:-rotate-45" />
          </a>
          <h1 className="text-4xl leading-snug font-black text-balance sm:text-6xl sm:leading-snug">ابزاری که تیمت واقعاً از آن استفاده می‌کند</h1>
          <p className="max-w-xl text-lg leading-8 text-muted-foreground">کار، گفت‌وگو و فایل‌ها کنارِ هم؛ بدونِ ده تبِ باز و پیامِ گم‌شده.</p>
          <div className="mt-2 flex flex-wrap justify-center gap-3">
            <Button>رایگان شروع کن</Button>
            <Button variant="outline" className="bg-inverse text-[var(--dig-white)] hover:bg-inverse-raised">
              گفت‌وگو با فروش
            </Button>
          </div>
        </div>
        <div className="relative mx-auto mt-20 flex max-w-4xl flex-col gap-6">
          <p className="text-center text-sm text-muted-foreground">مورد اعتمادِ تیم‌های پیشرو</p>
          <Marquee fade pauseOnHover duration={30} gap={48} repeat={3} className="[--background:var(--inverse)]">
            {LOGOS.map((logo, index) => (
              <MarqueeItem key={`${logo}-${index}`} className="flex h-10 items-center">
                {/* eslint-disable-next-line @next/next/no-img-element -- لوگوی کوچکِ ثابت */}
                <img src={`/logos/${logo}.svg`} alt="" className="h-8 w-auto brightness-0 invert" />
              </MarqueeItem>
            ))}
          </Marquee>
        </div>
      </section>
    </ControlSizeProvider>
  )
}