"use client";

import { useEffect, useState } from "react";

const interests = ["真人当前形象 AI 分身","年轻时期 AI 分身","原创数字人 IP","内容增长","评论与私信运营","粉丝变现","全链路转化分析"];
const returnUrl = "https://ai-creator-partnership.liuxiaorong2025.chatgpt.site/contact?sent=1";

export function ContactForm(){
  const [sent,setSent]=useState(false);
  useEffect(()=>{if(new URLSearchParams(window.location.search).get("sent")==="1")setSent(true)},[]);

  if(sent)return <div className="success" role="status"><i>✓</i><p className="eyebrow">INQUIRY SENT</p><h2>合作意向已发送。</h2><p>信息已提交至合作团队邮箱。我们会评估你的账号基础与合作目标，并在有合作空间时与你联系。</p><button className="link" type="button" onClick={()=>{window.history.replaceState({},"","/contact");setSent(false)}}>继续填写一份 <b>→</b></button></div>;

  return <form className="form" action="https://formsubmit.co/liuxiaorong2018@gmail.com" method="POST">
    <input type="hidden" name="_subject" value="COZCREATOR：收到新的创作者合作意向"/>
    <input type="hidden" name="_template" value="table"/>
    <input type="hidden" name="_next" value={returnUrl}/>
    <input type="text" name="_honey" className="form-honey" tabIndex={-1} autoComplete="off"/>
    <div className="form-row"><label>你的称呼<input name="称呼" required placeholder="怎么称呼你"/></label><label>合作身份<select name="合作身份" required defaultValue=""><option value="" disabled>请选择</option><option>个人创作者</option><option>艺人 / 经纪团队</option><option>原创数字人 IP / 项目方</option><option>MCN / Agency</option><option>品牌或平台</option></select></label></div>
    <label>联系邮箱或 WhatsApp<input name="联系方式" required placeholder="方便我们与你联系"/></label>
    <label>主要账号或作品链接<input name="账号或作品链接" required type="url" placeholder="https://"/></label>
    <div className="form-row"><label>主要平台<select name="主要平台" required defaultValue=""><option value="" disabled>请选择</option><option>Facebook</option><option>Instagram</option><option>TikTok</option><option>YouTube</option><option>其他</option></select></label><label>粉丝规模<select name="粉丝规模" required defaultValue=""><option value="" disabled>请选择</option><option>尚未创建</option><option>1 万以下</option><option>1–10 万</option><option>10–100 万</option><option>100 万以上</option></select></label></div>
    <fieldset><legend>感兴趣的合作方向</legend><div className="checks">{interests.map(x=><label key={x}><input name="合作方向" value={x} type="checkbox"/><span>{x}</span></label>)}</div></fieldset>
    <label>你现在最想解决的问题<textarea name="合作需求" rows={5} placeholder="例如：想从零打造一个面向拉美市场的原创数字人 IP……"/></label>
    <label className="consent"><input required type="checkbox"/><span>我同意团队仅为评估本次合作而使用以上信息。</span></label>
    <button className="btn primary submit" type="submit">提交合作意向 <b>→</b></button>
    <p className="note">提交后，合作意向将发送至团队邮箱。</p>
  </form>
}