لندینگ آژانس

"use client"

import * as React from "react"

import { ArrowUpIcon, AvatarGenderIcon, CheckIcon, EnvelopeIcon, QuoteIcon, StarIcon } from "@/components/icons"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Chip, ChipLabel } from "@/components/ui/chip"
import { CountUp } from "@/components/ui/count-up"
import {
  Footer,
  FooterBottom,
  FooterBrand,
  FooterColumn,
  FooterColumns,
  FooterColumnTitle,
  FooterContent,
  FooterLink,
  FooterLinkList,
} from "@/components/ui/footer"
import { Marquee, MarqueeItem } from "@/components/ui/marquee"
import { GridPattern } from "@/components/ui/background-pattern"
import { Reveal } from "@/components/ui/reveal"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const PARTNERS = [
  "fintech/digipay",
  "fintech/asan-pardakht",
  "banks/blu",
  "banks/day",
  "banks/caspian",
  "banks/bim",
  "apps/rubika",
  "operators/mci",
]

const SERVICES = [
  { title: "طراحی محصول", text: "از پژوهش کاربر تا رابطِ نهایی؛ جریان‌ها را با داده می‌سازیم، نه حدس.", tags: ["پژوهش", "UX", "پروتوتایپ"] },
  { title: "هویت بصری و برند", text: "لوگو، رنگ، تایپوگرافی و زبانِ تصویری که در هر نقطهٔ تماس یکی بماند.", tags: ["لوگو", "راهنمای برند"] },
  { title: "دیزاین‌سیستم", text: "کتابخانهٔ کامپوننت و توکن، هم در فیگما هم در کد، تا تیم سریع‌تر بسازد.", tags: ["فیگما", "React", "توکن"] },
  { title: "توسعهٔ وب و اپ", text: "پیاده‌سازی دقیقِ همان طرح، سریع، دسترس‌پذیر و آماده برای رشد.", tags: ["Next.js", "اپ موبایل"] },
]

/** هر پروژه با عکسِ واقعی و یک عددِ نتیجه. */
const PROJECTS = [
  { title: "اپ کیف پول سکه", tags: ["طراحی محصول", "اپ موبایل"], year: 1404, image: stockImages.projectMobileApp, stat: "۴٫۸", statLabel: "امتیاز در استور" },
  { title: "پنل فروشندگان بازارچه", tags: ["دیزاین‌سیستم", "وب"], year: 1404, image: stockImages.projectDashboard, stat: "۳۸٪", statLabel: "کاهش زمان ثبت کالا" },
  { title: "هویت بصری کافه‌ رست", tags: ["برند"], year: 1403, image: stockImages.projectCafeBrand, stat: "۲۴", statLabel: "شعبه با یک زبان" },
  { title: "سامانهٔ نوبت‌دهی آنلاین", tags: ["طراحی محصول", "توسعه"], year: 1403, image: stockImages.clinicRoom, stat: "۲ برابر", statLabel: "نوبتِ آنلاین" },
] as const

const STATS = [
  { value: 120, suffix: "+", label: "پروژهٔ تحویل‌شده" },
  { value: 9, label: "سال تجربه" },
  { value: 40, suffix: "+", label: "برند همکار" },
]

const PROCESS = [
  { title: "کشف", time: "۱ تا ۲ هفته", text: "مصاحبه با کاربر و ذی‌نفعان، تحلیل رقبا و تعریفِ مسئلهٔ درست." },
  { title: "طراحی", time: "۳ تا ۶ هفته", text: "جریان‌ها، وایرفریم و رابطِ نهایی؛ هر هفته یک نسخهٔ قابل‌تست." },
  { title: "ساخت", time: "۴ تا ۱۰ هفته", text: "پیاده‌سازی با همان دیزاین‌سیستم، تست و تحویلِ مرحله‌ای." },
  { title: "رشد", time: "پیوسته", text: "اندازه‌گیری، آزمایش A/B و بهبودِ ماه‌به‌ماه بعد از انتشار." },
]

const TEAM = [
  { name: "نیما رضایی", role: "مدیر خلاقیت", photo: stockImages.personMan1 },
  { name: "مهسا کریمی", role: "طراح ارشد محصول", photo: stockImages.personWoman1 },
  { name: "آرش نوری", role: "توسعه‌دهندهٔ فرانت‌اند", photo: stockImages.personMan2 },
  { name: "لیلا احمدی", role: "پژوهشگر تجربهٔ کاربر", photo: stockImages.personWoman2 },
] as const

const AWARDS = [
  { year: 1404, title: "بهترین تجربهٔ کاربری اپ مالی", by: "جشنوارهٔ وب و موبایل", project: "اپ کیف پول سکه" },
  { year: 1403, title: "برترین هویت بصری", by: "دوسالانهٔ گرافیک", project: "کافه رست" },
  { year: 1403, title: "طراحی دسترس‌پذیر", by: "رویداد دسترس‌پذیری وب", project: "سامانهٔ نوبت‌دهی" },
]

const PLANS = [
  { title: "پروژه‌ای", price: "از ۴۵۰ میلیون", unit: "تومان", text: "دامنهٔ مشخص، زمان‌بندی مشخص؛ برای محصول یا وب‌سایتِ تازه.", features: ["کشف و طراحی کامل", "تحویلِ فایل فیگما و کد", "۳ ماه پشتیبانی"] },
  { title: "اسپرینتی", price: "۱۲۰ میلیون", unit: "تومان / دو هفته", text: "تیمِ کوچک برای اعتبارسنجی سریعِ یک ایده یا یک جریان.", features: ["پروتوتایپ قابل‌تست", "تست با ۵ کاربر", "گزارشِ تصمیم‌گیری"], featured: true },
  { title: "تیم اختصاصی", price: "توافقی", unit: "ماهانه", text: "طراح و توسعه‌دهندهٔ ما، کنار تیم شما، برای محصولِ در حال رشد.", features: ["حداقل ۳ ماه", "جلسهٔ هفتگی با تیم شما", "گزارشِ ماهانهٔ شاخص‌ها"] },
]

const FAQ = [
  { q: "یک پروژهٔ معمولی چقدر طول می‌کشد؟", a: "بیشترِ پروژه‌ها از کشف تا انتشار بین ۸ تا ۱۶ هفته‌اند؛ در جلسهٔ اول زمان‌بندی دقیق را با هم می‌چینیم." },
  { q: "با تیم داخلی ما هم کار می‌کنید؟", a: "بله؛ بیشترِ وقت‌ها کنار تیم محصول و توسعهٔ شما می‌نشینیم و دیزاین‌سیستم را به خودشان تحویل می‌دهیم." },
  { q: "بعد از تحویل چه اتفاقی می‌افتد؟", a: "سه ماه پشتیبانی رایگان دارید و می‌توانید برای رشد و بهبود، تیم اختصاصی بگیرید." },
]

/** سرِ بخش: تیترِ بزرگ و توضیحِ کوتاه زیرش، و در صورتِ نیاز یک کنش در انتها. */
function SectionHeader({ id, title, description, action }: { id: string; title: string; description: string; action?: React.ReactNode }) {
  return (
    <div className="flex flex-wrap items-end justify-between gap-4">
      <div className="flex max-w-2xl flex-col gap-3">
        <h2 id={id} className="text-3xl font-black sm:text-5xl">
          {title}
        </h2>
        <p className="text-lg leading-8 text-muted-foreground">{description}</p>
      </div>
      {action}
    </div>
  )
}

/** فلشِ «رو به جلو» در راست‌به‌چپ: بالا و چپ. */
function ForwardArrow({ className }: { className?: string }) {
  return <ArrowUpIcon className={`-rotate-45 ${className ?? ""}`} />
}

/** کاورِ پروژه: عکسِ واقعی با کارتِ کوچکِ نتیجه روی گوشهٔ پایین. */
function ProjectCover({ image, stat, statLabel }: { image: { src: string; alt: string }; stat: string; statLabel: string }) {
  return (
    <div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-muted">
      {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
      <img src={image.src} alt="" loading="lazy" className="size-full object-cover transition-transform duration-500 group-hover:scale-105" />
      <div className="absolute start-4 bottom-4 flex flex-col rounded-lg bg-card px-4 py-3 text-card-foreground shadow-card">
        <span className="text-xl font-bold">{stat}</span>
        <span className="text-xs text-muted-foreground">{statLabel}</span>
      </div>
    </div>
  )
}

export default function AgencyLandingBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
    <div className="flex min-h-svh flex-col bg-background">
      <header className="sticky top-0 z-10 border-b border-border bg-background">
        <nav aria-label="ناوبری اصلی" className="mx-auto flex h-16 w-full max-w-6xl items-center gap-6 px-4 sm:px-6">
          <span className="flex items-center gap-2 text-lg font-black">
            <span aria-hidden className="size-6 rounded-full bg-[conic-gradient(var(--dig-violet-500),var(--dig-amber-400),var(--dig-green-500),var(--dig-violet-500))]" />
            استودیو نقش
          </span>
          <ul className="hidden items-center gap-6 text-sm text-muted-foreground md:flex">
            {["خدمات", "پروژه‌ها", "درباره", "تماس"].map((item) => (
              <li key={item}>
                <a href="#" className="transition-colors hover:text-foreground">
                  {item}
                </a>
              </li>
            ))}
          </ul>
          <Button className="ms-auto">
            شروع پروژه
            <ForwardArrow />
          </Button>
        </nav>
      </header>

      <main className="flex flex-col">
        {/* قهرمانِ تیره: زمینه همرنگِ تصویر است و تصویر سمتِ چپ به سمتِ متن محو می‌شود. رنگ‌ها با بازتعریفِ متغیرهای پایه برعکس می‌شوند. */}
        <section className="relative overflow-hidden bg-inverse text-[var(--dig-white)] [--background:var(--inverse)] [--border:var(--inverse-border)] [--foreground:var(--dig-white)] [--input:var(--inverse-border)] [--muted-foreground:var(--dig-neutral-400)] [--muted:var(--inverse-border)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)]">
          <div
            aria-hidden
            style={{ backgroundImage: `url(${stockImages.heroStudioDark.src})` }}
            className="absolute inset-x-0 top-0 h-72 bg-cover bg-center [mask-image:linear-gradient(to_bottom,black_40%,transparent)] lg:inset-y-0 lg:end-0 lg:start-auto lg:h-auto lg:w-[55%] lg:[mask-image:linear-gradient(to_right,black_45%,transparent)]"
          />
          <div className="relative mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 pt-72 pb-20 sm:px-6 lg:pt-28 lg:pb-28">
            <div className="flex max-w-xl flex-col gap-6">
              <Badge variant="outline" className="self-start border-inverse-border bg-inverse-raised text-[var(--dig-white)]">
                <span aria-hidden className="size-1.5 rounded-full bg-success" />
                پذیرش پروژهٔ جدید برای پاییز
              </Badge>
              <h1 className="text-4xl leading-snug font-black sm:text-6xl sm:leading-snug">
                محصول دیجیتالی می‌سازیم که{" "}
                <span className="bg-[linear-gradient(to_left,var(--dig-violet-400),var(--dig-amber-400))] bg-clip-text whitespace-nowrap text-transparent">دیده می‌شود</span>{" "}
                و کار می‌کند.
              </h1>
              <p className="text-lg leading-8 text-muted-foreground">استودیوی طراحی و توسعه؛ از ایده تا محصولِ زنده، کنار تیم شما.</p>
              <div className="mt-4 flex flex-wrap gap-3">
                <Button>
                  گفت‌وگو دربارهٔ پروژه
                  <ForwardArrow />
                </Button>
                <Button variant="outline">
                  دیدن نمونه‌کارها
                </Button>
              </div>
            </div>

            <dl className="grid max-w-xl grid-cols-3 gap-4 border-t border-border pt-8">
              {STATS.map((stat) => (
                <div key={stat.label} className="flex flex-col gap-1">
                  <dt className="order-2 text-sm text-muted-foreground">{stat.label}</dt>
                  <dd className="text-3xl font-black sm:text-4xl">
                    <CountUp value={stat.value} suffix={stat.suffix} />
                  </dd>
                </div>
              ))}
            </dl>
          </div>
        </section>

        {/* لوگوی همکاران در یک ردیفِ متحرک و بی‌پایان؛ با هاور می‌ایستد. */}
        <section aria-labelledby="agency-partners" className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-20 sm:px-6">
          <h2 id="agency-partners" className="text-sm text-muted-foreground">
            برندهایی که با آن‌ها ساخته‌ایم
          </h2>
          <Marquee fade pauseOnHover duration={30} gap={16} repeat={4} className="py-2">
            {PARTNERS.map((logo) => (
              <MarqueeItem key={logo} className="flex h-20 w-40 items-center justify-center rounded-xl border border-border bg-card">
                {/* eslint-disable-next-line @next/next/no-img-element -- لوگوی کوچکِ ثابت */}
                <img src={`/logos/${logo}.svg`} alt="" className="h-8 w-auto grayscale transition-[filter] hover:grayscale-0" />
              </MarqueeItem>
            ))}
          </Marquee>
        </section>

        {/* خدماتِ شماره‌دار: شماره، عنوانِ بزرگ، توضیح و برچسب‌ها در یک ردیف. */}
        <section aria-labelledby="agency-services" className="bg-muted py-24">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 sm:px-6">
            <SectionHeader id="agency-services" title="خدمات ما" description="چهار کار را خیلی خوب انجام می‌دهیم، و همه را کنار هم." />
            <ol className="flex flex-col">
              {SERVICES.map((service, index) => (
                <Reveal asChild key={service.title} delay={index * 100}>
                  <li className="group border-t border-border last:border-b">
                    <a
                      href="#"
                      className="grid grid-cols-1 gap-4 rounded-xl py-8 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 md:grid-cols-[5rem_1fr_1.2fr_auto] md:items-center md:gap-8"
                    >
                      <span className="text-sm font-bold text-muted-foreground tabular-nums">{toFaDigits(String(index + 1).padStart(2, "0"))}</span>
                      <span className="text-2xl font-bold transition-colors group-hover:text-brand-secondary sm:text-3xl">{service.title}</span>
                      <span className="flex flex-col gap-3">
                        <span className="leading-7 text-muted-foreground">{service.text}</span>
                        <span className="flex flex-wrap gap-2">
                          {service.tags.map((tag) => (
                            <Chip key={tag} className="bg-background">
                              <ChipLabel>{tag}</ChipLabel>
                            </Chip>
                          ))}
                        </span>
                      </span>
                      <span
                        aria-hidden
                        className="hidden size-12 items-center justify-center rounded-full border border-border bg-background transition-colors group-hover:border-foreground group-hover:bg-foreground group-hover:text-background md:flex [&_svg]:size-5"
                      >
                        <ForwardArrow />
                      </span>
                    </a>
                  </li>
                </Reveal>
              ))}
            </ol>
          </div>
        </section>

        {/* روندِ کار: چهار گام با زمان؛ خطِ پیشرفت بالای هر کارت. */}
        <section aria-labelledby="agency-process" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 pt-24 sm:px-6">
          <SectionHeader id="agency-process" title="روند کار" description="از روز اول می‌دانید هر هفته چه چیزی تحویل می‌گیرید." />
          <ol className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {PROCESS.map((step, index) => (
              <Reveal asChild key={step.title} delay={index * 100}>
                <li className="flex flex-col gap-4 rounded-xl border border-border bg-card p-6">
                  <div className="flex gap-1" aria-hidden>
                    {PROCESS.map((_, bar) => (
                      <span key={bar} className={`h-1.5 flex-1 rounded-full ${bar <= index ? "bg-brand-secondary" : "bg-muted"}`} />
                    ))}
                  </div>
                  <div className="flex items-baseline justify-between gap-2">
                    <span className="text-xl font-bold">
                      <span className="text-muted-foreground">{toFaDigits(index + 1)}. </span>
                      {step.title}
                    </span>
                    <span className="text-xs text-muted-foreground">{step.time}</span>
                  </div>
                  <p className="text-sm leading-7 text-muted-foreground">{step.text}</p>
                </li>
              </Reveal>
            ))}
          </ol>
        </section>

        {/* پروژه‌های منتخب: کاورِ رنگی، عنوان، دسته‌ها و سال. */}
        <section aria-labelledby="agency-work" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-24 sm:px-6">
          <SectionHeader
            id="agency-work"
            title="پروژه‌های منتخب"
            description="چند کارِ تازه؛ هر کدام با عددی که برای مشتری مهم بود."
            action={
              <Button variant="outline">
                همهٔ پروژه‌ها
                <ForwardArrow />
              </Button>
            }
          />
          <ul className="grid grid-cols-1 gap-x-6 gap-y-12 md:grid-cols-2">
            {PROJECTS.map((project, index) => (
              <Reveal asChild key={project.title} delay={index * 100}>
                <li>
                  <a href="#" className="group flex flex-col gap-5 rounded-xl outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
                    <ProjectCover image={project.image} stat={project.stat} statLabel={project.statLabel} />
                    <span className="flex items-start justify-between gap-4">
                      <span className="flex flex-col gap-2">
                        <span className="text-xl font-bold">{project.title}</span>
                        <span className="flex flex-wrap gap-2">
                          {project.tags.map((tag) => (
                            <Badge key={tag} variant="soft" size="sm">
                              {tag}
                            </Badge>
                          ))}
                        </span>
                      </span>
                      <span className="text-sm text-muted-foreground tabular-nums">{toFaDigits(project.year)}</span>
                    </span>
                  </a>
                </li>
              </Reveal>
            ))}
          </ul>
        </section>

        {/* نظرِ مشتری روی کارتِ تیره؛ رنگ‌ها با بازتعریفِ متغیرهای پایه برعکس می‌شوند. */}
        <section className="mx-auto w-full max-w-6xl px-4 pb-24 sm:px-6">
          <figure className="relative flex flex-col gap-8 overflow-hidden rounded-xl bg-inverse p-8 text-[var(--dig-white)] sm:p-14 [--border:var(--inverse-border)] [--muted-foreground:var(--dig-graphite-300)] [--muted:var(--inverse-raised)] [&>*:not([data-slot=grid-pattern])]:relative">
            {/* پترنِ شبکه‌ای که از گوشهٔ شروع محو می‌شود؛ عمق می‌دهد بی آن‌که متن را شلوغ کند. */}
            <GridPattern size={44} className="[--border:var(--inverse-border)] [mask-image:radial-gradient(ellipse_at_top_left,black,transparent_75%)]" />
            <div className="flex items-center justify-between gap-4">
              <QuoteIcon className="size-10 text-[var(--dig-amber-400)]" aria-hidden />
              <span className="flex gap-0.5 text-[var(--dig-amber-400)]" role="img" aria-label="امتیاز ۵ از ۵">
                {[0, 1, 2, 3, 4].map((star) => (
                  <StarIcon key={star} className="size-5 fill-current" aria-hidden />
                ))}
              </span>
            </div>
            <blockquote className="max-w-3xl text-2xl leading-relaxed font-bold sm:text-3xl sm:leading-relaxed">
              «نقش فقط طراحی نکرد؛ کنار تیم محصول نشست، فرضیه‌ها را تست کرد و در سه ماه نرخ تبدیل ثبت‌نام ما را دو برابر کرد.»
            </blockquote>
            <figcaption className="flex items-center gap-3">
              <Avatar size="lg" alt="سارا محمدی" src={stockImages.personWoman3.src} icon={<AvatarGenderIcon gender="female" />} className="ring-2 ring-[var(--dig-graphite-700)]" />
              <span className="flex flex-col">
                <span className="font-semibold">سارا محمدی</span>
                <span className="text-sm text-muted-foreground">مدیر محصول، سکه</span>
              </span>
            </figcaption>
          </figure>
        </section>

        {/* تیم: کارتِ هر نفر با عکس، نام و نقش. */}
        <section aria-labelledby="agency-team" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 pb-24 sm:px-6">
          <SectionHeader id="agency-team" title="آدم‌های پشت کار" description="تیمی کوچک و ارشد؛ همان کسانی که در جلسه می‌بینید، کار را می‌سازند." />
          <ul className="grid grid-cols-2 gap-4 lg:grid-cols-4">
            {TEAM.map((person, index) => (
              <Reveal asChild key={person.name} delay={index * 100}>
                <li className="group flex flex-col gap-4">
                  <div className="aspect-square overflow-hidden rounded-xl bg-muted">
                    {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
                    <img
                      src={person.photo.src}
                      alt={`عکسِ ${person.name}`}
                      loading="lazy"
                      className="size-full object-cover object-top transition-transform duration-500 group-hover:scale-105"
                    />
                  </div>
                  <div className="flex flex-col gap-0.5">
                    <span className="font-bold">{person.name}</span>
                    <span className="text-sm text-muted-foreground">{person.role}</span>
                  </div>
                </li>
              </Reveal>
            ))}
          </ul>
        </section>

        {/* افتخارات: ردیف‌های سال، عنوان، داوری و پروژه. */}
        <section aria-labelledby="agency-awards" className="bg-muted py-24">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 sm:px-6">
            <SectionHeader id="agency-awards" title="افتخارات" description="جایزه هدف نیست، ولی خوب است وقتی کار دیده می‌شود." />
            <ul className="flex flex-col">
              {AWARDS.map((award, index) => (
                <Reveal asChild key={award.title} delay={index * 100}>
                  <li className="grid grid-cols-1 gap-2 border-t border-border py-6 last:border-b md:grid-cols-[6rem_1.4fr_1fr_1fr] md:items-center md:gap-8">
                    <span className="text-sm font-bold text-muted-foreground tabular-nums">{toFaDigits(award.year)}</span>
                    <span className="text-lg font-bold">{award.title}</span>
                    <span className="text-sm text-muted-foreground">{award.by}</span>
                    <span className="text-sm md:text-end">{award.project}</span>
                  </li>
                </Reveal>
              ))}
            </ul>
          </div>
        </section>

        {/* مدل‌های همکاری: سه کارت؛ کارتِ پیشنهادی تیره است. */}
        <section aria-labelledby="agency-plans" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-24 sm:px-6">
          <SectionHeader id="agency-plans" title="مدل‌های همکاری" description="هر پروژه فرق دارد؛ از یکی از این سه شروع می‌کنیم و با هم تنظیمش می‌کنیم." />
          <ul className="grid grid-cols-1 gap-4 lg:grid-cols-3">
            {PLANS.map((plan) => (
              <li
                key={plan.title}
                className={`flex flex-col gap-6 rounded-xl border p-8 ${
                  plan.featured
                    ? "border-[var(--dig-graphite-900)] bg-inverse text-[var(--dig-white)] [--muted-foreground:var(--dig-graphite-300)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)] [--border:var(--inverse-border)]"
                    : "border-border bg-card"
                }`}
              >
                <div className="flex items-center justify-between gap-2">
                  <span className="text-lg font-bold">{plan.title}</span>
                  {plan.featured && (
                    <Badge size="sm" className="bg-[var(--dig-amber-400)] text-[var(--dig-graphite-950)]">
                      پیشنهاد ما
                    </Badge>
                  )}
                </div>
                <div className="flex flex-col gap-1">
                  <span className="text-3xl font-black">{plan.price}</span>
                  <span className="text-sm text-muted-foreground">{plan.unit}</span>
                </div>
                <p className="text-sm leading-7 text-muted-foreground">{plan.text}</p>
                <ul className="flex flex-col gap-3 border-t border-border pt-6 text-sm">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2">
                      <CheckIcon className="size-4 shrink-0 text-success" aria-hidden />
                      {feature}
                    </li>
                  ))}
                </ul>
                <Button variant={plan.featured ? "default" : "outline"} className="mt-auto">
                  شروع گفت‌وگو
                </Button>
              </li>
            ))}
          </ul>
        </section>

        {/* سؤال‌های متداول */}
        <section aria-labelledby="agency-faq" className="mx-auto grid grid-cols-1 w-full max-w-6xl gap-12 px-4 pb-24 sm:px-6 lg:grid-cols-[1fr_1.4fr]">
          <SectionHeader id="agency-faq" title="سؤال‌های رایج" description="جوابِ سؤالت این‌جا نیست؟ یک پیام بفرست، همان روز جواب می‌دهیم." />
          <Accordion type="single" collapsible defaultValue="faq-0">
            {FAQ.map((item, index) => (
              <AccordionItem key={item.q} value={`faq-${index}`}>
                <AccordionTrigger className="text-base font-bold">{item.q}</AccordionTrigger>
                <AccordionContent className="leading-7 text-muted-foreground">{item.a}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </section>

        {/* دعوتِ پایانی: تیترِ بزرگ، ایمیل و دکمهٔ گفت‌وگو. */}
        <section className="mx-auto flex w-full max-w-6xl flex-col items-start gap-8 border-t border-border px-4 py-24 sm:px-6">
          <h2 className="max-w-3xl text-4xl leading-snug font-black sm:text-6xl sm:leading-snug">پروژهٔ بعدی‌ات را با هم بسازیم.</h2>
          <div className="flex flex-wrap items-center gap-6">
            <Button>
              شروع گفت‌وگو
              <ForwardArrow />
            </Button>
            <a href="mailto:hello@naghsh.studio" dir="ltr" className="flex items-center gap-2 text-lg font-semibold underline-offset-4 hover:underline">
              hello@naghsh.studio
              <EnvelopeIcon className="size-5 text-muted-foreground" aria-hidden />
            </a>
          </div>
        </section>
      </main>

      <Footer className="border-inverse-border bg-inverse text-[var(--dig-white)] [--border:var(--inverse-border)] [--foreground:var(--dig-white)] [--muted-foreground:var(--dig-neutral-400)]">
        <FooterContent>
          <FooterBrand>
            <span className="text-lg font-black">استودیو نقش</span>
            <p className="text-sm text-muted-foreground">استودیوی طراحی و توسعهٔ محصول دیجیتال، تهران.</p>
          </FooterBrand>
          <FooterColumns>
            <FooterColumn>
              <FooterColumnTitle>استودیو</FooterColumnTitle>
              <FooterLinkList>
                <FooterLink href="#">خدمات</FooterLink>
                <FooterLink href="#">پروژه‌ها</FooterLink>
              </FooterLinkList>
            </FooterColumn>
            <FooterColumn>
              <FooterColumnTitle>ارتباط</FooterColumnTitle>
              <FooterLinkList>
                <FooterLink href="#">همکاری با ما</FooterLink>
                <FooterLink href="#">اینستاگرام</FooterLink>
              </FooterLinkList>
            </FooterColumn>
          </FooterColumns>
        </FooterContent>
        <FooterBottom>
          <span>© {toFaDigits(1405)} استودیو نقش</span>
        </FooterBottom>
      </Footer>
    </div>
    </ControlSizeProvider>
  )
}