/* ============ Contact — input / confirm / complete ============ */
const PURPOSES = ["アプリ開発について","Webシステム開発について","AI開発について","ハードウェア・IoT開発について","DX・業務改善について","プロトタイプ開発について","共同開発・協業について","取材・登壇について","その他"];
const BUDGETS = ["未定","〜50万円","50〜100万円","100〜300万円","300〜500万円","500万円以上"];

function Field({ label, en, required, children, error }) {
  return (
    <label className={`cf-field ${error ? "err" : ""}`}>
      <span className="cf-label"><span className="mono">{en}</span>{label}{required && <i className="req">必須</i>}</span>
      {children}
      {error && <span className="cf-error mono">{error}</span>}
    </label>
  );
}

function Contact() {
  const [step, setStep] = useState(0); // 0 form, 1 confirm, 2 done
  const [f, setF] = useState({ title:"", purpose:"", content:"", company:"", name:"", email:"", phone:"", budget:"", timing:"", url:"", file:"", agree:false });
  const [errs, setErrs] = useState({});
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState("");
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }));

  const validate = () => {
    const e = {};
    if (!f.title.trim()) e.title = "入力してください";
    if (!f.purpose) e.purpose = "選択してください";
    if (!f.content.trim()) e.content = "入力してください";
    if (!f.name.trim()) e.name = "入力してください";
    if (!f.email.trim()) e.email = "入力してください";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = "メール形式が正しくありません";
    if (!f.agree) e.agree = "同意が必要です";
    setErrs(e); return Object.keys(e).length === 0;
  };
  const toConfirm = () => { if (validate()) { setSendError(""); setStep(1); window.scrollTo({top:document.getElementById("contact").offsetTop-40,behavior:"smooth"}); } };
  const submit = async () => {
    if (sending) return;
    setSending(true);
    setSendError("");
    try {
      const res = await fetch("contact.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(f)
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) {
        if (data.errors) setErrs(data.errors);
        throw new Error(data.message || "送信に失敗しました。");
      }
      setStep(2);
    } catch (err) {
      setSendError(err.message || "送信に失敗しました。");
    } finally {
      setSending(false);
    }
  };
  const reset = () => { setF({ title:"",purpose:"",content:"",company:"",name:"",email:"",phone:"",budget:"",timing:"",url:"",file:"",agree:false }); setErrs({}); setSendError(""); setStep(0); };

  return (
    <section className="contact section" id="contact">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow"><span className="idx">07</span> Contact</div>
          <div className="mono sec-co">GET IN TOUCH</div>
        </div>
        <div className="contact-grid">
          <div className="contact-intro">
            <Lines className="contact-h" items={["後悔させません、","ぜひご連絡を。"]} />
            <p className="contact-lead">開発・DX・AI・ハードウェア／IoT・プロトタイプ制作まで、まずは気軽にご相談ください。アイデア段階でも構いません。</p>
            <div className="contact-steps mono">
              {["入力","確認","完了"].map((s,i)=>(
                <span key={s} className={`cstep ${step===i?"on":""} ${step>i?"done":""}`}><i>{i+1}</i>{s}</span>
              ))}
            </div>
            <div className="contact-direct">
              <span className="mono">DIRECT</span>
              <a href="mailto:thankyou@hashbit.co.jp">thankyou@hashbit.co.jp</a>
            </div>
          </div>

          <div className="contact-form-wrap">
            {step === 0 && (
              <div className="cf">
                <Field label="お問い合わせタイトル" en="TITLE" required error={errs.title}>
                  <input value={f.title} onChange={set("title")} placeholder="例）地域向けアプリ開発の相談" />
                </Field>
                <Field label="お問い合わせ目的" en="PURPOSE" required error={errs.purpose}>
                  <div className="cf-chips">
                    {PURPOSES.map(p => (
                      <button key={p} type="button" className={`cf-chip ${f.purpose===p?"on":""}`} onClick={()=>setF(s=>({...s,purpose:p}))}>{p}</button>
                    ))}
                  </div>
                </Field>
                <Field label="お問い合わせ内容" en="MESSAGE" required error={errs.content}>
                  <textarea rows="5" value={f.content} onChange={set("content")} placeholder="課題・背景・実現したいことなどをお書きください。" />
                </Field>
                <div className="cf-row">
                  <Field label="会社名・団体名" en="COMPANY">
                    <input value={f.company} onChange={set("company")} placeholder="HASHBIT株式会社" />
                  </Field>
                  <Field label="氏名" en="NAME" required error={errs.name}>
                    <input value={f.name} onChange={set("name")} placeholder="山田 太郎" />
                  </Field>
                </div>
                <div className="cf-row">
                  <Field label="メールアドレス" en="EMAIL" required error={errs.email}>
                    <input value={f.email} onChange={set("email")} placeholder="you@example.com" />
                  </Field>
                  <Field label="電話番号（任意）" en="TEL">
                    <input value={f.phone} onChange={set("phone")} placeholder="000-0000-0000" />
                  </Field>
                </div>
                <div className="cf-row">
                  <Field label="ご予算" en="BUDGET">
                    <select value={f.budget} onChange={set("budget")}>
                      <option value="">選択してください</option>
                      {BUDGETS.map(b=><option key={b} value={b}>{b}</option>)}
                    </select>
                  </Field>
                  <Field label="希望時期" en="TIMING">
                    <input value={f.timing} onChange={set("timing")} placeholder="例）2025年内 / 未定" />
                  </Field>
                </div>
                <Field label="関連URL（任意）" en="URL">
                  <input value={f.url} onChange={set("url")} placeholder="https://" />
                </Field>
                <Field label="ファイル添付（任意）" en="FILE">
                  <div className="cf-file"><span className="mono">＋ ファイルを選択</span><small>PDF / 画像 · 10MBまで</small></div>
                </Field>
                <label className={`cf-agree ${errs.agree?"err":""}`}>
                  <input type="checkbox" checked={f.agree} onChange={set("agree")} />
                  <span><a href="#">プライバシーポリシー</a>に同意します{errs.agree && <i className="mono cf-error"> {errs.agree}</i>}</span>
                </label>
                <button className="btn accent cf-submit" onClick={toConfirm}>入力内容を確認する <span className="arr">→</span></button>
              </div>
            )}

            {step === 1 && (
              <div className="cf cf-confirm">
                <div className="cf-confirm-note mono">CONFIRM — 内容をご確認ください</div>
                {[["タイトル",f.title],["目的",f.purpose],["内容",f.content],["会社名・団体名",f.company||"—"],["氏名",f.name],["メール",f.email],["電話番号",f.phone||"—"],["予算",f.budget||"未選択"],["希望時期",f.timing||"—"],["関連URL",f.url||"—"]].map(r=>(
                  <div className="cf-cf-row" key={r[0]}><span className="mono">{r[0]}</span><p>{r[1]}</p></div>
                ))}
                {sendError && <p className="cf-error mono" style={{marginBottom:14}}>{sendError}</p>}
                <div className="cf-confirm-btns">
                  <button className="btn ghost" onClick={()=>setStep(0)} disabled={sending}>← 修正する</button>
                  <button className="btn accent" onClick={submit} disabled={sending}>{sending ? "送信中..." : "この内容で送信"} <span className="arr">→</span></button>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="cf cf-done">
                <div className="cf-check"><svg viewBox="0 0 48 48"><path d="M14 25l7 7 14-15" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
                <h3>送信が完了しました</h3>
                <p>お問い合わせありがとうございます。担当より2〜3営業日以内にご連絡いたします。</p>
                <div className="mono cf-done-id">TICKET #HB-2025-{Math.floor(Math.random()*9000+1000)}</div>
                <button className="btn ghost" onClick={reset}>← フォームに戻る</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;