import Header from '../../components/header';
import { Footer } from '../../components/footer';
import DomainSearch from '../../components/domain-search';
import DomainSearchResults from '../../components/domain-search-results';
import Image from 'next/image';
import DomainHeroMotion from '../../components/domain-hero-motion';
import {
  BadgeCheck,
  Link2,
  LineChart,
  Headphones,
  Repeat2,
  Search,
  Settings,
  ShoppingCart,
  Tag,
  UserRound,
} from 'lucide-react';
import FaqTimelineAccordion from '../../components/faq-timeline-accordion';





export default async function DomainPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>;
  searchParams?: Promise<{ q?: string }> | { q?: string };
}) {
  const { locale } = await params;
  const isFa = locale === 'fa';
  const dir = isFa ? 'rtl' : 'ltr';
  const sp = searchParams ? await searchParams : undefined;
  const initialQuery = typeof sp?.q === 'string' ? sp.q : undefined;

  const faqContent = isFa
    ? {
      title: 'سوالات متداول',
      subtitle: 'پاسخ سوالات رایج درباره ثبت دامنه',
      faqs: [
        {
          q: 'قیمت دامنه چگونه محاسبه می‌شود؟',
          a: 'هزینه بر اساس پسوند (TLD)، دوره ثبت و قوانین رجیستری تعیین می‌شود؛ تمدید ممکن است با قیمت ثبت اولیه متفاوت باشد.',
        },
        {
          q: 'آیا انتقال دامنه به MugCloud امکان‌پذیر است؟',
          a: 'بله؛ با دریافت کد انتقال (Auth Code) و تکمیل مراحل، دامنه شما به‌صورت امن منتقل می‌شود.',
        },
        {
          q: 'دامنه چه زمانی بعد از ثبت فعال می‌شود؟',
          a: 'اغلب دامنه‌ها بلافاصله یا طی چند دقیقه فعال می‌شوند؛ در برخی پسوندها ممکن است تایید رجیستری زمان‌بر باشد.',
        },
        {
          q: 'آیا امکان مدیریت DNS و نیم‌سرورها وجود دارد؟',
          a: 'بله؛ از طریق پنل می‌توانید رکوردهای DNS، نیم‌سرورها و تنظیمات امنیتی مثل قفل انتقال را مدیریت کنید.',
        },
        {
          q: 'برای دامنه‌های بین‌المللی به چه اطلاعاتی نیاز است؟',
          a: 'معمولاً اطلاعات مالک (تماس/آدرس) و ایمیل معتبر لازم است؛ برای برخی پسوندها شرایط اختصاصی وجود دارد.',
        },
      ],
    }
    : {
      title: 'FAQ',
      subtitle: 'Common questions about domain registration',
      faqs: [
        {
          q: 'How is the domain price calculated?',
          a: 'Pricing depends on the TLD, registration period, and registry rules; renewal prices can differ from first-year pricing.',
        },
        {
          q: 'Can I transfer my domain to MugCloud?',
          a: 'Yes. Get the Auth Code and follow the transfer steps to move your domain securely.',
        },
        {
          q: 'When does my domain become active?',
          a: 'Most domains activate instantly or within minutes; some TLDs may require additional registry verification time.',
        },
        {
          q: 'Can I manage DNS records and nameservers?',
          a: 'Yes. You can manage DNS records, nameservers, and security settings like transfer lock from the panel.',
        },
        {
          q: 'What information is needed for international domains?',
          a: 'Typically registrant contact details and a valid email are required; some TLDs have additional requirements.',
        },
      ],
    };

  return (
    <main className="min-h-screen font-sans text-[color:var(--text-primary)] dark:bg-[#000310]" dir={dir}>
      <Header />

      {/* Hero (match provided UI) */}
      <DomainHeroMotion>
        <section className="relative overflow-hidden pt-28 pb-10 px-4 sm:px-6">
        {/* <div className="pointer-events-none absolute inset-0">
          <div className="absolute inset-0 bg-[radial-gradient(1200px_520px_at_10%_40%,rgba(59,130,246,0.16),transparent_60%),radial-gradient(900px_420px_at_80%_20%,rgba(139,92,246,0.16),transparent_55%),radial-gradient(900px_420px_at_55%_90%,rgba(16,185,129,0.10),transparent_60%)]" />
          <div className="absolute inset-0 opacity-[0.18] [background-image:radial-gradient(rgba(255,255,255,0.65)_1px,transparent_1px)] [background-size:42px_42px]" />
          <div className="absolute inset-0 opacity-[0.10] [background-image:radial-gradient(rgba(59,130,246,0.70)_1px,transparent_1px)] [background-size:120px_120px]" />
        </div> */}

        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
            {/* Globe */}
            <div className={`lg:col-span-6 ${isFa ? 'order-2 lg:order-1' : 'order-2 lg:order-2'}`}>
              <div className="relative mx-auto w-full max-w-[860px] aspect-[1/1] -mt-10 lg:-mt-16">
                <Image
                  src="/images/domain-globe.png"
                  alt="Domain globe"
                  fill
                  priority
                  className="object-contain"
                />

                {[
                  { t: '.cert', s: 'top-[20%] left-[8%]', d: '0s' },
                  { t: '.ir', s: 'top-[24%] right-[10%]', d: '0.4s' },
                  { t: '.org', s: 'bottom-[34%] left-[6%]', d: '0.8s' },
                  { t: '.co', s: 'bottom-[20%] left-[46%]', d: '1.2s' },
                  { t: '.shop', s: 'bottom-[34%] right-[10%]', d: '1.6s' },
                ].map((b) => (
                  <div
                    key={b.t}
                    className={`absolute ${b.s} px-5 py-2.5 rounded-2xl border border-[rgba(148,163,184,0.20)] bg-[rgba(2,6,23,0.55)] backdrop-blur-md shadow-[0_0_50px_rgba(59,130,246,0.12)] domain-tld-chip`}
                    style={{ animationDelay: b.d }}
                  >
                    <span className="text-base font-extrabold text-cyan-100/90 domain-tld-text">{b.t}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Copy + Search */}
            <div className="lg:col-span-6 order-1">
              <div className={`text-sm font-semibold text-emerald-400 ${isFa ? 'text-right' : 'text-left'}`}>
                {isFa ? 'ثبت دامنه' : 'Domain registration'}
              </div>
              <h1 className={`mt-4 text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-[1.2] ${isFa ? 'text-right' : 'text-left'}`}>
                {isFa ? (
                  <>
                    نامی که برند شما را <span className="text-emerald-400">ماندگار</span>
                    <br />
                    می‌کند.
                  </>
                ) : (
                  <>
                    A name that makes
                    <br />
                    your brand <span className="text-emerald-400">memorable</span>.
                  </>
                )}
              </h1>

              <p className={`mt-5 text-[color:var(--text-muted-2)] leading-relaxed max-w-xl ${isFa ? 'text-right ml-auto' : 'text-left'}`}>
                {isFa
                  ? 'با ثبت دامنه دلخواه خود، اولین قدم برای ساختن هویت آنلاین\nخانواده‌ی دیجیتال خود را محکم بردارید.'
                  : 'Register your desired domain and take the first step to build a strong online identity.'}
              </p>

              <div className="mt-8">
                <DomainSearch isFa={isFa} locale={locale} initialQuery={initialQuery} />

                {false && (
                  /* Search bar: button left + input right (as in screenshot) */
                <div className="flex items-stretch gap-0 rounded-2xl border border-[rgba(148,163,184,0.18)] bg-[rgba(2,6,23,0.40)] backdrop-blur-xl overflow-hidden shadow-[0_0_70px_rgba(59,130,246,0.10)]">
                  <button
                    type="button"
                    className="px-10 py-4 text-sm font-extrabold text-[#071027] bg-gradient-to-r from-emerald-400 via-cyan-400 to-indigo-500 hover:opacity-95 transition-opacity min-w-[160px]"
                  >
                    {isFa ? 'جستجو' : 'Search'}
                  </button>

                  <div className="relative flex-1">
                    <div className={`absolute inset-y-0 ${isFa ? 'left-4' : 'left-4'} flex items-center`}>
                      <div className="w-10 h-10 rounded-xl border border-[rgba(148,163,184,0.18)] bg-[rgba(2,6,23,0.30)] flex items-center justify-center">
                        <Search className="w-5 h-5 text-slate-200/80" />
                      </div>
                    </div>
                    <input
                      type="text"
                      placeholder={isFa ? 'نام دامنه خود را وارد کنید…' : 'Enter your domain name…'}
                      className={`w-full h-full bg-transparent px-4 py-4 text-sm text-[color:var(--text-primary)] placeholder:text-slate-300/40 outline-none ${isFa ? 'pr-6 pl-16 text-right' : 'pl-16 pr-6 text-left'
                        }`}
                    />
                  </div>
                </div>
                )}

                {/* Feature pills */}
                <div
                  className={`mt-5 rounded-2xl border border-[rgba(148,163,184,0.14)] dark:border-[rgba(148,163,184,0.14)] light:border-[color:var(--border-10)] bg-[rgba(2,6,23,0.32)] dark:bg-[rgba(2,6,23,0.32)] light:bg-[color:var(--glass-05)] backdrop-blur-xl overflow-hidden ${isFa ? 'divide-x divide-x-reverse' : 'divide-x'
                    } divide-[rgba(148,163,184,0.12)] light:divide-[color:var(--border-10)]`}
                >
                  <div className="grid grid-cols-2 sm:grid-cols-4">
                    {[
                      { t: isFa ? 'قیمت‌های شفاف' : 'Transparent pricing', i: Tag },
                      { t: isFa ? 'مدیریت آسان' : 'Easy management', i: Settings },
                      { t: isFa ? 'انتقال رایگان' : 'Free transfer', i: Repeat2 },
                      { t: isFa ? 'پشتیبانی ۲۴/۷' : '24/7 support', i: Headphones },
                    ].map((item) => (
                      <div
                        key={item.t}
                        className={`flex items-center justify-center gap-2 px-4 py-4 text-xs sm:text-sm text-slate-200/80 light:text-[#0a192f] ${isFa ? 'flex-row-reverse' : ''
                          }`}
                      >
                        <item.i className="w-5 h-5 text-indigo-300/80 light:text-[#80c8f5]" />
                        <span className="whitespace-nowrap">{item.t}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {initialQuery ? <DomainSearchResults isFa={isFa} base={initialQuery} /> : null}

          {!initialQuery && (
            <>
          {/* Why cards */}
          <div className="mt-12">
            <div className="text-center text-xl md:text-2xl font-bold">{isFa ? 'چرا دامنه از MugCloud؟' : 'Why MugCloud domains?'}</div>
            <div className="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
              {[
                { t: isFa ? 'ثبت فوری' : 'Instant registration', d: isFa ? 'ثبت سریع و قابل اعتماد' : 'Fast and reliable registration' },
                { t: isFa ? 'امنیت کامل' : 'Full security', d: isFa ? 'DNSSEC و قفل انتقال' : 'DNSSEC and transfer lock' },
                { t: isFa ? 'پنل قدرتمند' : 'Powerful panel', d: isFa ? 'مدیریت DNS، رکوردها و نیم‌سرورها' : 'Manage DNS, records, and nameservers' },
                { t: isFa ? 'پشتیبانی همیشه' : 'Always-on support', d: isFa ? 'تیم متخصص در تمام ساعات' : 'Expert help anytime' },
              ].map((c, idx) => {
                const Icon = [Search, BadgeCheck, Settings, Headphones][idx] ?? BadgeCheck;
                return (
                  <div
                    key={c.t}
                    className="glass-rotating-border rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md p-6"
                  >
                    <div className="h-12 w-12 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] shadow-[0_0_25px_rgba(34,211,238,0.10)] flex items-center justify-center">
                      <Icon className="w-6 h-6 text-cyan-300/90" />
                    </div>
                    <div className="mt-4 font-bold">{c.t}</div>
                    <div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed">{c.d}</div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Popular tlds */}
          <div className="mt-12">
            <div className="text-center text-xl md:text-2xl font-bold">{isFa ? 'پسوندهای محبوب' : 'Popular TLDs'}</div>
            <div className="mt-6 grid grid-cols-2 md:grid-cols-6 gap-4">
              {[
                { tld: '.com', price: isFa ? '۷۹۹,۰۰۰' : '799,000' },
                { tld: '.ir', price: isFa ? '۱۹,۹۰۰' : '19,900' },
                { tld: '.net', price: isFa ? '۹۹۹,۰۰۰' : '999,000' },
                { tld: '.org', price: isFa ? '۸۹۹,۰۰۰' : '899,000' },
                { tld: '.co', price: isFa ? '۱,۹۹۹,۰۰۰' : '1,999,000' },
                { tld: '.shop', price: isFa ? '۱,۴۹۹,۰۰۰' : '1,499,000' },
              ].map((p) => (
                <div
                  key={p.tld}
                  className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md p-5"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="text-2xl font-extrabold">{p.tld}</div>
                    <div className="w-10 h-10 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] flex items-center justify-center">
                      <ShoppingCart className="w-4 h-4 text-cyan-300/90" />
                    </div>
                  </div>
                  <div className="mt-2 text-xs text-[color:var(--text-muted-3)]">{isFa ? 'قیمت سالانه' : 'Yearly price'}</div>
                  <div className="mt-2 text-sm text-[color:var(--text-muted-2)]">
                    {p.price} {isFa ? 'تومان/سال' : 'Toman/yr'}
                  </div>
                </div>
              ))}
            </div>
            <div className="mt-6 flex justify-center">
              <button
                type="button"
                className="px-7 py-3 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] transition-colors text-sm font-semibold"
              >
                {isFa ? 'مشاهده همه پسوندها' : 'View all TLDs'}
              </button>
            </div>
          </div>

          {/* 3-step process */}
          <div className="mt-12">
            <div className="text-center text-xl md:text-2xl font-bold">
              {isFa ? 'فرآیند ثبت دامنه در ۳ مرحله' : 'Register a domain in 3 steps'}
            </div>
            <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
              {[
                { t: isFa ? '۱. جستجو' : '1. Search', d: isFa ? 'نام دامنه را وارد کنید و جستجو کنید.' : 'Enter a name and search.' },
                { t: isFa ? '۲. انتخاب' : '2. Choose', d: isFa ? 'پسوند و پلن مناسب را انتخاب کنید.' : 'Pick your TLD and plan.' },
                { t: isFa ? '۳. ثبت و فعال‌سازی' : '3. Register & activate', d: isFa ? 'اطلاعات را تکمیل کنید؛ دامنه فعال می‌شود.' : 'Complete info; your domain becomes active.' },
              ].map((s, idx) => {
                const Icon = [Search, Tag, BadgeCheck][idx] ?? BadgeCheck;
                return (
                <div
                  key={s.t}
                  className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md p-6"
                >
                  <div className="h-12 w-12 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] flex items-center justify-center shadow-[0_0_25px_rgba(34,211,238,0.10)]">
                    <Icon className="w-6 h-6 text-cyan-300/90" />
                  </div>
                  <div className="mt-4 font-bold">{s.t}</div>
                  <div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed">{s.d}</div>
                </div>
                );
              })}
            </div>
          </div>

          {/* Importance */}
          <div className="mt-12">
            <div className="relative rounded-[2rem] border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md overflow-hidden">
              <div className="pointer-events-none absolute inset-0">
                <Image
                  src="/images/domain/domain-importance-bg.png"
                  alt=""
                  fill
                  priority
                  className="object-contain object-center opacity-95 light:opacity-50 scale-80"
                />
                {/* <div className="absolute inset-0 bg-[radial-gradient(900px_420px_at_50%_20%,rgba(0,0,0,0.05),rgba(0,0,0,0.55)_55%,rgba(0,0,0,0.72)_85%)]" /> */}
                {/* <div className="absolute inset-0 bg-[radial-gradient(700px_340px_at_50%_18%,rgba(59,130,246,0.18),transparent_62%),radial-gradient(700px_340px_at_50%_92%,rgba(139,92,246,0.16),transparent_66%)]" /> */}
              </div>

              <div className="relative p-8 md:p-10">
                <div className="text-center text-2xl md:text-3xl font-bold">
                  {isFa ? 'چرا داشتن دامنه مهم است؟' : 'Why does owning a domain matter?'}
                </div>

                <div className="relative mt-10" dir="ltr">
                  {/* Connection curves + dots */}
                  <svg
                    className="hidden lg:block absolute inset-0 w-full h-full pointer-events-none"
                    viewBox="0 0 1200 360"
                    preserveAspectRatio="none"
                  >
                    <defs>
                      <linearGradient id="domGradL" x1="0" y1="0" x2="1" y2="0">
                        <stop offset="0" stopColor="rgba(128,200,245,0.0)" />
                        <stop offset="0.45" stopColor="rgba(34,211,238,0.75)" />
                        <stop offset="1" stopColor="rgba(167,139,250,0.95)" />
                      </linearGradient>
                      <linearGradient id="domGradR" x1="1" y1="0" x2="0" y2="0">
                        <stop offset="0" stopColor="rgba(128,200,245,0.0)" />
                        <stop offset="0.45" stopColor="rgba(34,211,238,0.75)" />
                        <stop offset="1" stopColor="rgba(167,139,250,0.95)" />
                      </linearGradient>
                      <filter id="domGlow">
                        <feGaussianBlur stdDeviation="2.6" result="blur" />
                        <feColorMatrix
                          in="blur"
                          type="matrix"
                          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.9 0"
                        />
                        <feMerge>
                          <feMergeNode />
                          <feMergeNode in="SourceGraphic" />
                        </feMerge>
                      </filter>
                    </defs>

                    {/* left-top -> center */}
                    <path
                      d="M 265 105 C 360 15, 410 70, 530 70"
                      fill="none"
                      stroke="url(#domGradL)"
                      strokeWidth="2"
                      strokeDasharray="3 10"
                      strokeLinecap="round"
                      filter="url(#domGlow)"
                      opacity="0.9"
                    />
                    {/* left-bottom -> center */}
                    <path
                      d="M 265 255 C 360 255, 410 292, 530 292"
                      fill="none"
                      stroke="url(#domGradL)"
                      strokeWidth="2"
                      strokeDasharray="3 10"
                      strokeLinecap="round"
                      filter="url(#domGlow)"
                      opacity="0.9"
                    />
                    {/* right-top -> center */}
                    <path
                      d="M 935 105 C 840 105, 790 70, 670 70"
                      fill="none"
                      stroke="url(#domGradR)"
                      strokeWidth="2"
                      strokeDasharray="3 10"
                      strokeLinecap="round"
                      filter="url(#domGlow)"
                      opacity="0.9"
                    />
                    {/* right-bottom -> center */}
                    <path
                      d="M 935 255 C 840 255, 790 292, 670 292"
                      fill="none"
                      stroke="url(#domGradR)"
                      strokeWidth="2"
                      strokeDasharray="3 10"
                      strokeLinecap="round"
                      filter="url(#domGlow)"
                      opacity="0.9"
                    />

                    {/* end dots */}
                    {[
                      { cx: 265, cy: 105 },
                      { cx: 265, cy: 255 },
                      { cx: 935, cy: 105 },
                      { cx: 935, cy: 255 },
                      { cx: 530, cy: 70 },
                      { cx: 530, cy: 292 },
                      { cx: 670, cy: 70 },
                      { cx: 670, cy: 292 },
                    ].map((p, i) => (
                      <g key={i} filter="url(#domGlow)">
                        <circle cx={p.cx} cy={p.cy} r="7.8" fill="rgba(34,211,238,0.12)" opacity="0.9" />
                        <circle cx={p.cx} cy={p.cy} r="3.6" fill="rgba(167,139,250,0.95)" opacity="0.98" />
                      </g>
                    ))}
                  </svg>

                  <div className="grid grid-cols-1 lg:grid-cols-12 items-center gap-10">
                    {/* Left items */}
                    <div className="lg:col-span-4 space-y-10">
                      {[
                        {
                          t: isFa ? 'ایجاد اعتبار برند' : 'Build brand trust',
                          d: isFa ? 'یک دامنه حرفه‌ای اعتماد مشتریان را افزایش می‌دهد.' : 'A professional domain increases customer trust.',
                          I: BadgeCheck,
                        },
                        {
                          t: isFa ? 'دسترسی آسان' : 'Easy access',
                          d: isFa ? 'مشتریان شما به‌راحتی شما را پیدا می‌کنند.' : 'Customers can find you easily.',
                          I: Link2,
                        },
                      ].map((item) => (
                        <div key={item.t} className="flex items-center justify-end gap-5" dir={dir}>
                          <div className="text-right">
                            <div className="text-lg font-bold">{item.t}</div>
                            <div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed max-w-[260px]">
                              {item.d}
                            </div>
                          </div>
                          <div className="shrink-0 w-16 h-16 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md flex items-center justify-center shadow-[0_0_45px_rgba(59,130,246,0.10)]">
                            <div className="w-12 h-12 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.20),transparent_55%)] flex items-center justify-center">
                              <item.I className="w-6 h-6 text-[#80c8f5] drop-shadow-[0_0_14px_rgba(128,200,245,0.28)]" />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>

                    {/* Center illustration */}
                    <div className="lg:col-span-4">
                      <div className="relative mx-auto w-full max-w-[520px] aspect-[1/1]">
                        <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(2,6,23,0.0),rgba(2,6,23,0.30)_55%,rgba(2,6,23,0.60)_82%)]" />
                      </div>
                    </div>

                    {/* Right items */}
                    <div className="lg:col-span-4 space-y-10">
                      {[
                        {
                          t: isFa ? 'مالکیت واقعی' : 'True ownership',
                          d: isFa ? 'دامنه‌ها دارایی دیجیتالی هستند و کاملاً متعلق به شما می‌باشند.' : 'Domains are digital assets that you truly own.',
                          I: UserRound,
                        },
                        {
                          t: isFa ? 'سرمایه‌گذاری هوشمند' : 'Smart investment',
                          d: isFa ? 'دامنه مناسب می‌تواند ارزش برند شما را در آینده افزایش دهد.' : 'The right domain can increase your brand value over time.',
                          I: LineChart,
                        },
                      ].map((item) => (
                        <div key={item.t} className="flex items-center justify-start gap-5" dir={dir}>
                          <div className="shrink-0 w-16 h-16 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md flex items-center justify-center shadow-[0_0_45px_rgba(59,130,246,0.10)]">
                            <div className="w-12 h-12 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(167,139,250,0.18),transparent_55%)] flex items-center justify-center">
                              <item.I className="w-6 h-6 text-[#80c8f5] drop-shadow-[0_0_14px_rgba(128,200,245,0.28)]" />
                            </div>
                          </div>
                          <div className={isFa ? 'text-right' : 'text-left'}>
                            <div className="text-lg font-bold">{item.t}</div>
                            <div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed max-w-[270px]">
                              {item.d}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <FaqTimelineAccordion
            title={faqContent.title}
            subtitle={faqContent.subtitle}
            faqs={faqContent.faqs}
            contentDir={dir}
          />


          {/* Final CTA */}
          <div className="mt-12 pb-14">
            <div className="rounded-[2rem] border border-[color:var(--border-10)] bg-gradient-to-br from-emerald-500/10 via-[color:var(--glass-05)] to-indigo-500/10 backdrop-blur-md overflow-hidden">
              <div className="p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-6">
                <div>
                  <div className="text-xl md:text-2xl font-extrabold">
                    {isFa ? 'دامنه مناسب برند خود را همین حالا ثبت کنید.' : 'Register the right domain for your brand today.'}
                  </div>
                  <div className="mt-2 text-sm text-[color:var(--text-muted-2)]">
                    {isFa ? 'آینده آنلاین خود را از امروز شروع کنید.' : 'Start building your online future now.'}
                  </div>
                </div>
                <button
                  type="button"
                  className="px-8 py-3.5 rounded-2xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-extrabold text-sm hover:opacity-90 transition-opacity"
                >
                  {isFa ? 'جستجوی دامنه' : 'Search domain'}
                </button>
              </div>
            </div>
          </div>
            </>
          )}
        </div>
        </section>
      </DomainHeroMotion>

      <Footer />
    </main>
  );
}
