web/src/app/(home)/custom/_client.tsx

'use client'
import {useState} from 'react'
import Image from 'next/image'
import {useRouter} from 'next/navigation'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'
import {z} from 'zod'
import {toast} from 'sonner'
import HomePage from '@/components/home/page'
import Wrap from '@/components/wrap'
import {Form, FormField} from '@/components/ui/form'
import {Input} from '@/components/ui/input'
import {Button} from '@/components/ui/button'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
import {merge} from '@/lib/utils'
import {submitInquiry} from '@/actions/inquiry'
import group from './_assets/Group.webp'
import SelfDesc from '@/components/features/self-desc'

const formSchema = z.object({
  company: z.string().min(2, '企业名称至少2个字符'),
  name: z.string().min(2, '联系人姓名至少2个字符'),
  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的11位手机号码'),
  usage: z.string().min(1, '请选择您需要的用量'),
  purpose: z.string().min(2, '请输入用途说明').max(200, '用途说明不超过200字符'),
})

type FormValues = z.infer<typeof formSchema>

export default function CustomPage() {
  const router = useRouter()
  const [isSubmitting, setIsSubmitting] = useState(false)

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      company: '',
      name: '',
      phone: '',
      usage: '',
      purpose: '',
    },
  })

  const onSubmit = async (data: FormValues) => {
    setIsSubmitting(true)
    try {
      const result = await submitInquiry(data)
      if (result.success) {
        toast.success('提交成功！我们的专属顾问会在24小时内联系您')
        form.reset()
      }
      else {
        toast.error(result.message || '提交失败，请稍后重试')
      }
    }
    catch (error) {
      toast.error('网络错误，请稍后重试')
    }
    finally {
      setIsSubmitting(false)
    }
  }

  const scrollToForm = () => {
    const formElement = document.getElementById('inquiry-form')
    if (formElement) {
      formElement.scrollIntoView({behavior: 'smooth', block: 'start'})
    }
  }

  return (
    <HomePage
      path={[
        {label: '业务定制', href: '/custom'},
      ]}
    >
      <Wrap className="flex flex-col gap-16">
        {/* 1. 顶部介绍区 */}
        <SelfDesc onInquiry={() => {
          document.getElementById('inquiry-form')?.scrollIntoView({behavior: 'smooth', block: 'start'})
        }}/>

        {/* 2. 表单区 */}
        <section id="inquiry-form" className="bg-white rounded-lg p-6 lg:p-12">
          <div className="text-center mb-8 lg:mb-12">
            <h2 className="text-2xl lg:text-3xl font-semibold">业务定制</h2>
            <p className="text-gray-500 mt-2 text-sm lg:text-base">
              请填写您的企业信息，我们的专属顾问将在24小时内与您联系
            </p>
          </div>
          <Form form={form} handler={form.handleSubmit(onSubmit)}>
            <div className="mx-auto max-w-2xl space-y-6">
              {/* 企业名称 */}
              <FormField name="companyName">
                {({id, field}) => (
                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
                    <label
                      htmlFor={id}
                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
                    >
                      <span className="text-red-500">*</span>
                      <span>企业名称</span>
                    </label>
                    <div className="flex-1 lg:max-w-md">
                      <Input
                        {...field}
                        id={id}
                        placeholder="请输入企业名称"
                        disabled={isSubmitting}
                        aria-required="true"
                      />
                    </div>
                  </div>
                )}
              </FormField>

              {/* 联系人姓名 */}
              <FormField name="contactName">
                {({id, field}) => (
                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
                    <label
                      htmlFor={id}
                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
                    >
                      <span className="text-red-500">*</span>
                      <span>联系人姓名</span>
                    </label>
                    <div className="flex-1 lg:max-w-md">
                      <Input
                        {...field}
                        id={id}
                        placeholder="请输入联系人姓名"
                        disabled={isSubmitting}
                        aria-required="true"
                      />
                    </div>
                  </div>
                )}
              </FormField>

              {/* 联系人手机号码 */}
              <FormField name="phone">
                {({id, field}) => (
                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
                    <label
                      htmlFor={id}
                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
                    >
                      <span className="text-red-500">*</span>
                      <span>联系人手机号</span>
                    </label>
                    <div className="flex-1 lg:max-w-md">
                      <Input
                        {...field}
                        id={id}
                        type="tel"
                        placeholder="请输入11位手机号码"
                        disabled={isSubmitting}
                        aria-required="true"
                      />
                    </div>
                  </div>
                )}
              </FormField>

              {/* 每月需求用量 */}
              <FormField name="monthlyUsage">
                {({id, field}) => (
                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
                    <label
                      htmlFor={id}
                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
                    >
                      <span className="text-red-500">*</span>
                      <span>每月需求用量</span>
                    </label>
                    <div className="flex-1 lg:max-w-md">
                      <Select
                        onValueChange={field.onChange}
                        value={field.value}
                        disabled={isSubmitting}
                      >
                        <SelectTrigger id={id} aria-required="true">
                          <SelectValue placeholder="请选择您需要的用量"/>
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="less20">小于20万</SelectItem>
                          <SelectItem value="20-100">20万~100万</SelectItem>
                          <SelectItem value="100-500">100万~500万</SelectItem>
                          <SelectItem value="more500">大于500万</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                )}
              </FormField>

              {/* 用途 */}
              <FormField name="purpose">
                {({id, field}) => (
                  <div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
                    <label
                      htmlFor={id}
                      className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
                    >
                      <span className="text-red-500">*</span>
                      <span>用途</span>
                    </label>
                    <div className="flex-1 lg:max-w-md">
                      <Input
                        {...field}
                        id={id}
                        placeholder="请输入用途，例如：数据采集、市场调研等"
                        disabled={isSubmitting}
                        aria-required="true"
                      />
                    </div>
                  </div>
                )}
              </FormField>

              <div className="pt-4 flex justify-center">
                <Button
                  type="submit"
                  className="bg-blue-600 hover:bg-blue-700 px-12 py-2.5"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? '提交中...' : '提交'}
                </Button>
              </div>
            </div>
          </Form>
        </section>

        {/* 3. 底部引导区 */}
        <section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
          <Image
            src={group}
            alt="立即试用背景"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-full max-w-4xl px-6 flex flex-col lg:flex-row items-center gap-4 lg:gap-10 justify-center lg:justify-between">
              <div className="text-blue-600 font-bold text-xl lg:text-2xl text-center lg:text-left">
                现在注册，免费领取5000IP
              </div>
              <Button
                className={merge(
                  'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
                )}
                onClick={() => router.push('/product')}
              >
                立即试用
              </Button>
            </div>
          </div>
        </section>
      </Wrap>
    </HomePage>
  )
}