'use client'

import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { ArrowRight } from 'lucide-react'

export function SuccessClient() {
  const searchParams = useSearchParams()
  const id = searchParams.get('id')

  return (
    <section className="flex min-h-[calc(100vh-70px)] items-center bg-[#f6f9fc] py-12 md:min-h-[calc(100vh-106px)]">
      <div className="mx-auto grid w-full max-w-[1120px] gap-8 px-6 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
        <div>
          <div className="text-sm font-extrabold text-brand">合作咨询</div>
          <h1 className="mt-4 text-4xl font-extrabold leading-tight text-ink md:text-5xl">提交成功</h1>
          <p className="mt-5 max-w-[560px] text-[15px] leading-8 text-muted">
            您的合作需求已提交。后续将由相关业务团队根据需求方向联系沟通，请保持联系方式畅通。
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Link href="/" className="inline-flex h-11 items-center rounded-[4px] bg-brand px-6 text-sm font-extrabold text-white hover:bg-brand-dark">
              回到首页
            </Link>
            <Link href="/about" className="inline-flex h-11 items-center gap-2 rounded-[4px] border border-line bg-white px-6 text-sm font-extrabold text-brand hover:border-brand">
              继续了解研究院
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>

        <div className="rounded-[4px] border border-line bg-white p-7 shadow-[0_24px_70px_rgba(10,58,120,0.08)]">
          <div className="border-b border-line pb-5">
            <div className="text-xs font-extrabold tracking-[0.14em] text-soft">SUBMITTED</div>
            <div className="mt-2 text-2xl font-extrabold text-ink">合作需求记录</div>
          </div>
          <div className="divide-y divide-line text-sm">
            <div className="grid gap-2 py-5 md:grid-cols-[110px_1fr]">
              <span className="text-soft">需求编号</span>
              <strong className="text-text-body">{id || '已生成'}</strong>
            </div>
            <div className="grid gap-2 py-5 md:grid-cols-[110px_1fr]">
              <span className="text-soft">联系人</span>
              <strong className="text-text-body">已提交</strong>
            </div>
            <div className="grid gap-2 py-5 md:grid-cols-[110px_1fr]">
              <span className="text-soft">所在机构</span>
              <strong className="text-text-body">已提交</strong>
            </div>
            <div className="grid gap-2 py-5 md:grid-cols-[110px_1fr]">
              <span className="text-soft">处理状态</span>
              <strong className="text-brand">待联系</strong>
            </div>
          </div>
          <Link href="/about#contact" className="mt-2 inline-flex text-sm font-extrabold text-brand">
            再提交一条需求
          </Link>
        </div>
      </div>
    </section>
  )
}
