// contact.jsx — formspree-backed inquiry form

const { useState: useStateCT } = React;

const FORMSPREE_URL = "https://formspree.io/f/mdabvvae";

function Contact() {
  const [state, setState] = useStateCT("idle"); // idle | sending | ok | error
  const [errMsg, setErrMsg] = useStateCT("");
  const [form, setForm] = useStateCT({
    name:"", email:"", company:"", kind:"業務ツール / 自動化", budget:"未定", message:"", ok:false
  });

  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (state === "sending") return;
    if (!form.ok) { setErrMsg("プライバシー方針への同意が必要です"); return; }
    setState("sending"); setErrMsg("");
    try {
      const res = await fetch(FORMSPREE_URL, {
        method:"POST",
        headers:{ "Accept":"application/json", "Content-Type":"application/json" },
        body: JSON.stringify({
          お名前: form.name,
          メール: form.email,
          会社名: form.company,
          ご相談内容の種類: form.kind,
          ご予算感: form.budget,
          ご相談内容: form.message
        })
      });
      if (res.ok) setState("ok");
      else { const j = await res.json().catch(()=>({})); setErrMsg(j?.error || "送信に失敗しました。少し時間をおいて再度お試しください。"); setState("error"); }
    } catch(err){
      setErrMsg("通信エラーが発生しました。"); setState("error");
    }
  };

  const fld = {
    background:"var(--surface)",
    border:"1px solid var(--line-2)",
    borderRadius:12,
    padding:"15px 17px",
    color:"var(--text)",
    fontFamily:"var(--body)",
    fontSize:15.5,
    width:"100%",
    outline:"none",
    transition:"border-color .15s"
  };
  const lbl = { fontSize:12.5, fontWeight:600, color:"var(--text-2)", marginBottom:9, display:"flex", alignItems:"center", gap:8, fontFamily:"var(--mono)", letterSpacing:"0.04em", textTransform:"uppercase" };
  const req = <span style={{color:"var(--primary)",fontSize:10}}>*REQUIRED</span>;

  return (
    <section id="contact">
      <div className="container">
        <div className="reveal"><div className="sec-label">10 / CONTACT</div></div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1.4fr",gap:60,alignItems:"start"}} className="contact-grid">
          <div>
            <h2 className="sec-title reveal" data-d="1">
              気になったら、<span style={{color:"var(--primary)"}}>まずは投げて</span>みてください。
            </h2>
            <p className="reveal sec-lead" data-d="2">
              30秒で送れます。箇条書きで構いません。<br/>
              対応可否と概算感は、できるだけ早くお返しします。<br/>
              迷うのは、お互いに時間のムダなので。
            </p>

            <div className="reveal" data-d="3" style={{marginTop:36,display:"flex",flexDirection:"column",gap:18}}>
              {[
                ["完全無料","ヒアリング・お見積もりまで費用は発生しません"],
                ["返信目安","通常 1〜2 営業日以内（土日は遅れる場合があります）"],
                ["対応エリア","オンライン中心 / 全国・海外OK"]
              ].map(([k,v]) => (
                <div key={k} style={{display:"flex",gap:14}}>
                  <span style={{width:6,height:6,borderRadius:"50%",background:"var(--primary)",marginTop:11,flex:"none"}}/>
                  <div>
                    <div style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--muted)",letterSpacing:"0.08em"}}>{k.toUpperCase()}</div>
                    <div style={{fontSize:14.5,color:"var(--text-2)",lineHeight:1.7}}>{v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="reveal" data-d="2">
            {state === "ok" ? (
              <div style={{
                background:"var(--surface)",border:"1px solid var(--line-2)",borderRadius:22,
                padding:"60px 40px",textAlign:"center",position:"relative",overflow:"hidden"
              }}>
                <div style={{width:64,height:64,borderRadius:"50%",background:"color-mix(in oklab, var(--p-lime) 24%, transparent)",color:"var(--p-lime)",margin:"0 auto 18px",display:"grid",placeItems:"center"}}>
                  <Icon name="check" size={32} stroke={2.4}/>
                </div>
                <h3 style={{margin:"0 0 10px",fontSize:22,fontWeight:700}}>送信ありがとうございました</h3>
                <p style={{margin:"0 auto",maxWidth:420,color:"var(--text-2)",fontSize:14.5,lineHeight:1.85}}>
                  内容を確認のうえ、1〜2営業日以内にご記入のメールアドレスへご連絡します。<br/>
                  迷惑メールフォルダに入ることがあるのでご確認ください。
                </p>
                <button onClick={()=>{setState("idle");setForm({name:"",email:"",company:"",kind:"業務ツール / 自動化",budget:"未定",message:"",ok:false});}}
                  className="btn btn-ghost" style={{marginTop:24}}>もう一度送る</button>
              </div>
            ) : (
              <form onSubmit={onSubmit} style={{
                background:"var(--surface)",border:"1px solid var(--line)",borderRadius:22,
                padding:"32px 32px 30px",display:"flex",flexDirection:"column",gap:22
              }}>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}} className="form-row">
                  <div>
                    <div style={lbl}>お名前 {req}</div>
                    <input style={fld} required value={form.name} onChange={upd("name")} placeholder="山田 太郎"/>
                  </div>
                  <div>
                    <div style={lbl}>メール {req}</div>
                    <input style={fld} type="email" required value={form.email} onChange={upd("email")} placeholder="you@example.com"/>
                  </div>
                </div>
                <div>
                  <div style={lbl}>会社名・屋号 <span style={{color:"var(--muted)"}}>OPTIONAL</span></div>
                  <input style={fld} value={form.company} onChange={upd("company")} placeholder="株式会社サンプル / 個人事業主"/>
                </div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}} className="form-row">
                  <div>
                    <div style={lbl}>ご相談内容の種類</div>
                    <select style={{...fld,appearance:"none",backgroundImage:"linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)",backgroundPosition:"calc(100% - 18px) 50%, calc(100% - 13px) 50%",backgroundSize:"5px 5px",backgroundRepeat:"no-repeat",paddingRight:36}} value={form.kind} onChange={upd("kind")}>
                      <option>業務ツール / 自動化</option>
                      <option>Webアプリ / 会員サイト</option>
                      <option>業務フロー設計・改善</option>
                      <option>個人利用ツール</option>
                      <option>その他・まだ決まっていない</option>
                    </select>
                  </div>
                  <div>
                    <div style={lbl}>ご予算感</div>
                    <select style={{...fld,appearance:"none",backgroundImage:"linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)",backgroundPosition:"calc(100% - 18px) 50%, calc(100% - 13px) 50%",backgroundSize:"5px 5px",backgroundRepeat:"no-repeat",paddingRight:36}} value={form.budget} onChange={upd("budget")}>
                      <option>未定</option>
                      <option>〜10万円</option>
                      <option>10〜30万円</option>
                      <option>30〜50万円</option>
                      <option>50〜100万円</option>
                      <option>100万円以上</option>
                      <option>相談して決めたい</option>
                    </select>
                  </div>
                </div>
                <div>
                  <div style={lbl}>ご相談内容 {req}</div>
                  <textarea style={{...fld,minHeight:140,resize:"vertical",fontFamily:"var(--body)",lineHeight:1.75}} required value={form.message} onChange={upd("message")} placeholder="例：Excelの転記作業を毎日30分やっています。これを半自動化したい..."></textarea>
                </div>
                <label style={{display:"flex",alignItems:"flex-start",gap:10,fontSize:13,color:"var(--text-2)",lineHeight:1.7,cursor:"pointer"}}>
                  <input type="checkbox" checked={form.ok} onChange={upd("ok")} style={{marginTop:4,accentColor:"var(--primary)",width:16,height:16,flex:"none"}}/>
                  <span>送信内容を本問い合わせの返信・お見積もり目的に限って利用することに同意します。情報は第三者に共有されません。</span>
                </label>

                {state === "error" && <div style={{padding:"12px 14px",borderRadius:10,background:"color-mix(in oklab, var(--p-orange) 18%, transparent)",color:"var(--p-orange)",fontSize:13}}>{errMsg}</div>}

                <button type="submit" disabled={state==="sending"} className="btn btn-accent" style={{justifyContent:"center",padding:"14px 22px",fontSize:14.5,opacity:state==="sending"?.6:1,cursor:state==="sending"?"wait":"pointer"}}>
                  {state==="sending" ? "送信中..." : <>無料で相談を送る <span className="btn-arrow">→</span></>}
                </button>

                <div style={{fontFamily:"var(--mono)",fontSize:10.5,color:"var(--muted)",textAlign:"center",letterSpacing:"0.06em"}}>FORM POWERED BY FORMSPREE · SSL ENCRYPTED</div>
              </form>
            )}
          </div>
        </div>
        <style>{`
          @media (max-width:880px){.contact-grid{grid-template-columns:1fr !important;gap:40px !important}}
          @media (max-width:520px){.form-row{grid-template-columns:1fr !important}}
          input:focus, textarea:focus, select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--primary-soft) !important }
          input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1 }
        `}</style>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });