/* contact.html — お問い合わせ */

/* ==== HubSpot Forms 設定 ====
 * HubSpotで作成したフォームの portalId と formGuid を入れてください。
 * フォームURL: https://app.hubspot.com/forms/{portalId}/edit/{formGuid}
 * 値が "YOUR_..." のままだとデモモード（送信されません）。
 */
const HUBSPOT_PORTAL_ID = "242557963";
const HUBSPOT_FORM_GUID = "c2b85ab3-3fb1-4706-928e-f761cc151258";
const HUBSPOT_REGION    = "na2"; // NA2 region専用エンドポイントを使う

/* HubSpot側のフィールド内部名（フォーム作成時に合わせてください）
 * - inquiry_type           お問い合わせ種別（カスタム / dropdown）
 * - company                会社名（標準）
 * - industry               業種（標準）
 * - lastname               姓（標準）
 * - firstname              名（標準）
 * - lastname_kana          フリガナ・姓（カスタム）
 * - firstname_kana         フリガナ・名（カスタム）
 * - email                  メール（標準）
 * - phone                  電話（標準）
 * - employee_size_range    社員数・区分（カスタム / dropdown）
 * - message                ご相談内容（標準）
 *
 * ※ jobtitle（役職）はサイト側フォームでは聞きません（HubSpot側からも削除推奨）
 */

const CtIntro = () => (
  <section style={{padding:'64px 0 32px', background:'var(--paper)'}} data-screen-label="01 Methods">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>FOUR WAYS · 4つの窓口</Eyebrow>
        <h2>お好きな方法で、ご連絡ください。</h2>
      </div>
      <div className="contact-methods" style={{gridTemplateColumns:'repeat(4, 1fr)', display:'grid'}}>
        <a className="cmethod cmethod--primary" href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">
          <div className="cmethod__icon">
            <svg viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><circle cx="12" cy="14" r="2" fill="currentColor"/></svg>
          </div>
          <div>
            <div className="cmethod__label">CALENDAR · 予約</div>
            <div className="cmethod__value">いますぐ日程を選ぶ<small>30分・オンライン・無料</small></div>
          </div>
          <div className="cmethod__arrow"><Arrow/></div>
        </a>
        <a className="cmethod cmethod--line" href="https://lin.ee/PFDU0ER" target="_blank" rel="noopener">
          <div className="cmethod__icon">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.4 4.6C17.4 2.6 14.8 1.5 12 1.5S6.6 2.6 4.6 4.6 1.5 9.2 1.5 12s1.1 5.4 3.1 7.4 4.6 3.1 7.4 3.1 5.4-1.1 7.4-3.1 3.1-4.6 3.1-7.4-1.1-5.4-3.1-7.4zM7.6 14.5H6.2v-4.3h-1V9h3.4v1.2h-1v4.3zm3.2 0H9.6V9h1.2v5.5zm5 0h-1.4l-2-3.4v3.4H11.2V9h1.4l2 3.4V9h1.2v5.5zm2.5 0h-3.4V9h3.4v1.2h-2.2v.9h2v1.2h-2v.9h2.2v1.3z"/></svg>
          </div>
          <div>
            <div className="cmethod__label">LINE · 公式</div>
            <div className="cmethod__value">友だち追加<small>気軽にメッセージで相談</small></div>
          </div>
          <div className="cmethod__arrow"><Arrow/></div>
        </a>
        <a className="cmethod" href="tel:05057843633">
          <div className="cmethod__icon">
            <svg viewBox="0 0 24 24" fill="none"><path d="M4 5c0-1 1-2 2-2h2l2 5-2 1a12 12 0 006 6l1-2 5 2v2c0 1-1 2-2 2C9 19 5 15 4 5z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>
          </div>
          <div>
            <div className="cmethod__label">PHONE · 電話</div>
            <div className="cmethod__value">050-5784-3633<small>平日 9:00–18:00</small></div>
          </div>
          <div className="cmethod__arrow"><Arrow/></div>
        </a>
        <a className="cmethod" href="#form">
          <div className="cmethod__icon">
            <svg viewBox="0 0 24 24" fill="none"><path d="M3 6h18v12H3zM3 6l9 7 9-7" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>
          </div>
          <div>
            <div className="cmethod__label">FORM · フォーム</div>
            <div className="cmethod__value">下のフォームから<small>24時間・2営業日以内に返信</small></div>
          </div>
          <div className="cmethod__arrow"><Arrow dir="d"/></div>
        </a>
      </div>
      <div className="line-qr">
        <img src="https://qr-official.line.me/gs/M_541ntenk_GW.png?oat_content=qr" alt="公式LINE QRコード" loading="lazy"/>
        <div className="line-qr__txt">
          <div className="line-qr__label">LINE QR · スマホで読み取り</div>
          <p>スマホでQRを読み込むと、公式アカウントを友だち追加できます。<br/>労務のちょっとした疑問や相談予約のご連絡に、お気軽にどうぞ。</p>
          <a className="btn btn--ghost btn--sm" href="https://lin.ee/PFDU0ER" target="_blank" rel="noopener" style={{marginTop:8}}>スマホからは直接タップで追加 <Arrow/></a>
        </div>
      </div>
    </div>
  </section>
);

const CtForm = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState('');
  const isDemoMode = HUBSPOT_PORTAL_ID === 'YOUR_PORTAL_ID' || HUBSPOT_FORM_GUID === 'YOUR_FORM_GUID';

  const onSubmit = async (e) => {
    e.preventDefault();
    setErrorMsg('');
    const form = e.currentTarget;
    const fd = new FormData(form);

    if (isDemoMode) {
      // デモモード（HubSpot未設定）: 確認画面だけ出す
      setSubmitted(true);
      window.scrollTo({top: document.getElementById('form').offsetTop - 100, behavior:'smooth'});
      return;
    }

    setSubmitting(true);
    try {
      const fields = [];
      fd.forEach((value, name) => {
        if (name && value && name !== 'agree') fields.push({ name, value: String(value) });
      });
      const payload = {
        fields,
        context: {
          pageUri: location.href,
          pageName: document.title
        },
        legalConsentOptions: {
          consent: {
            consentToProcess: true,
            text: 'プライバシーポリシーに同意の上、送信します。'
          }
        }
      };
      const apiHost = HUBSPOT_REGION === 'na2' ? 'api-na2.hsforms.com' : 'api.hsforms.com';
      const url = `https://${apiHost}/submissions/v3/integration/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_GUID}`;
      const res = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error(err.message || `送信に失敗しました（HTTP ${res.status}）`);
      }
      setSubmitted(true);
      window.scrollTo({top: document.getElementById('form').offsetTop - 100, behavior:'smooth'});
    } catch (err) {
      setErrorMsg(err.message || '送信に失敗しました。お手数ですがお電話でご連絡ください。');
    } finally {
      setSubmitting(false);
    }
  };
  return (
    <section style={{padding:'56px 0 80px', background:'var(--paper-2)'}} id="form" data-screen-label="02 Form">
      <div className="container">
        <div className="contact-grid">
          <div>
            <div className="section-head" style={{marginBottom:24}}>
              <Eyebrow>FORM · フォームから相談する</Eyebrow>
              <h2>無料相談 / 資料請求 フォーム</h2>
              <p className="lead" style={{marginTop:10, fontSize:15}}>
                24時間いつでも受け付けています。<strong>2営業日以内</strong>に担当よりご返信します。
                お急ぎの場合は、お電話での相談もお気軽にどうぞ。
              </p>
            </div>

            {submitted ? (
              <div className="callout callout--info" style={{maxWidth:640}}>
                <h4>お問い合わせありがとうございます</h4>
                <p>
                  内容を受け付けました。2営業日以内に、担当よりメールまたはお電話にてご連絡いたします。
                  しばらくお待ちください。
                </p>
                {isDemoMode && (
                  <p style={{marginTop:12, fontSize:12, color:'var(--ink-500)'}}>
                    ※ これはデモ画面です（HubSpot 未設定）。実際の送信処理はまだ接続されていません。
                  </p>
                )}
                <button className="btn btn--ghost btn--sm" type="button" onClick={() => setSubmitted(false)} style={{marginTop:6}}>
                  別の問い合わせをする
                </button>
              </div>
            ) : (
            <form className="form" onSubmit={onSubmit}>
              {isDemoMode && (
                <div style={{padding:'10px 14px', background:'#fff7e6', border:'1px solid #ffd591', borderRadius:6, fontSize:12, color:'#8a5a00', marginBottom:18}}>
                  ⚠ HubSpot Form 未接続（DEMO）。<code>HUBSPOT_PORTAL_ID</code> と <code>HUBSPOT_FORM_GUID</code> を contact.jsx に設定してください。
                </div>
              )}
              {errorMsg && (
                <div style={{padding:'10px 14px', background:'#fff1f0', border:'1px solid #ffa39e', borderRadius:6, fontSize:13, color:'#a8071a', marginBottom:18}}>
                  {errorMsg}
                </div>
              )}

              <div className="form__row">
                <label>お問い合わせ種別 <span className="req">必須</span></label>
                <select name="inquiry_type" required defaultValue="">
                  <option value="" disabled>選択してください</option>
                  <option>オマカセロウムくん（労務顧問）について</option>
                  <option>オマカセ助成金申請について</option>
                  <option>オマカセfreee導入について</option>
                  <option>オマカセできない就業規則について</option>
                  <option>どれが合うか相談したい</option>
                  <option>その他</option>
                </select>
              </div>

              <div className="form__row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <div>
                  <label>会社名 <span className="req">必須</span></label>
                  <input name="company" type="text" required placeholder="例）株式会社○○"/>
                </div>
                <div>
                  <label>業種 <span className="opt">任意</span></label>
                  <input name="industry" type="text" placeholder="例）製造業 / 小売業 / IT"/>
                </div>
              </div>

              <div className="form__row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <div>
                  <label>姓 <span className="req">必須</span></label>
                  <input name="lastname" type="text" required placeholder="例）山田"/>
                </div>
                <div>
                  <label>名 <span className="req">必須</span></label>
                  <input name="firstname" type="text" required placeholder="例）太郎"/>
                </div>
              </div>

              <div className="form__row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <div>
                  <label>ふりがな（姓） <span className="opt">任意</span></label>
                  <input name="lastname_kana" type="text" placeholder="例）やまだ"/>
                </div>
                <div>
                  <label>ふりがな（名） <span className="opt">任意</span></label>
                  <input name="firstname_kana" type="text" placeholder="例）たろう"/>
                </div>
              </div>

              <div className="form__row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <div>
                  <label>メールアドレス <span className="req">必須</span></label>
                  <input name="email" type="email" required placeholder="example@company.co.jp"/>
                </div>
                <div>
                  <label>電話番号 <span className="opt">任意</span></label>
                  <input name="phone" type="tel" placeholder="03-0000-0000"/>
                </div>
              </div>

              <div className="form__row">
                <label>社員数 <span className="opt">任意</span></label>
                <select name="employee_size_range" defaultValue="">
                  <option value="" disabled>選択してください</option>
                  <option value="u10">10名未満</option>
                  <option value="10_30">10〜30名</option>
                  <option value="31_50">31〜50名</option>
                  <option value="51_100">51〜100名</option>
                  <option value="100_plus">101名以上</option>
                </select>
              </div>

              <div className="form__row">
                <label>ご相談内容 <span className="req">必須</span></label>
                <textarea name="message" required placeholder="現状や、聞いてみたいことを自由にご記入ください。まとまっていなくて大丈夫です。"/>
                <span className="hint">例）「助成金を取り切れていない気がする」「freeeを入れたが現場で使えていない」など、ざっくりでOKです。</span>
              </div>

              <div className="form__row">
                <label style={{display:'flex', alignItems:'flex-start', gap:10, fontWeight:500, letterSpacing:0}}>
                  <input name="agree" type="checkbox" required style={{width:'auto', marginTop:6}}/>
                  <span style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.7}}>
                    <a href="#" style={{color:'var(--navy-700)', textDecoration:'underline'}}>プライバシーポリシー</a>に同意の上、送信します
                  </span>
                </label>
              </div>

              <div className="form__submit">
                <button className="btn btn--primary btn--lg" type="submit" disabled={submitting}>
                  {submitting ? '送信中…' : <>送信する <Arrow/></>}
                </button>
                <small>送信後、2営業日以内にご返信します</small>
              </div>
            </form>
            )}
          </div>

          <aside>
            <div style={{background:'var(--navy-050)', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'24px 26px'}}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--navy-700)', marginBottom:8}}>PROMISE · 3つの約束</div>
              <ul style={{padding:'10px 0 0 18px', margin:0, fontSize:13, color:'var(--ink-700)', lineHeight:2.1}}>
                <li>ご相談の内容を、外部に漏らしません（秘密保持）</li>
                <li>合わないサービスは、正直に「合わない」とお伝えします</li>
                <li>しつこい営業・追加連絡は一切いたしません</li>
              </ul>
            </div>

            <div style={{marginTop:20, fontSize:12, color:'var(--ink-500)', lineHeight:1.9}}>
              ※ フォームから送信後、自動返信メールが届かない場合は、迷惑メールフォルダをご確認の上、
              お電話（050-5784-3633）にてお知らせください。
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

const CtFAQ = () => (
  <section style={{padding:'64px 0 80px', background:'var(--paper)'}} data-screen-label="03 FAQ">
    <div className="container" style={{maxWidth:860, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>FAQ · よくある質問</Eyebrow>
        <h2>ご相談前の、よくある質問。</h2>
      </div>
      <div style={{display:'grid', gap:12}}>
        {[
          {q:'相談は本当に無料ですか？', a:'はい、初回30分のオンライン相談は完全無料です。その場でサービスをご契約いただく必要は一切ありません。'},
          {q:'千葉県外でも相談できますか？', a:'はい。オンライン（Zoom / Meet / Teams）で全国対応しています。東京都内・千葉県内は訪問も可能です。'},
          {q:'どのサービスが合うか分かりません。', a:'まさにそれをご一緒に整理するのが無料相談の目的です。現状を伺い、当社のサービスが合うか／他社が合うかも含めて、正直にお伝えします。'},
          {q:'顧問契約を結ばないと相談できませんか？', a:'いいえ。単発のご相談（スポット）も承ります。まずは無料相談で、必要な範囲を一緒に見極めましょう。'},
          {q:'他の社労士事務所から切り替えも可能ですか？', a:'可能です。引き継ぎの進め方も含めてご相談に乗ります。切り替えのタイミングも一緒に設計します。'}
        ].map((f, i) => (
          <details key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'18px 22px'}}>
            <summary style={{cursor:'pointer', fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)', listStyle:'none', display:'flex', alignItems:'center', gap:12, letterSpacing:'.02em'}}>
              <span style={{color:'var(--accent)', fontFamily:'var(--font-serif)', fontSize:20}}>Q.</span>
              {f.q}
            </summary>
            <div style={{marginTop:14, paddingLeft:30, paddingTop:14, borderTop:'1px dashed var(--paper-line)', fontSize:14, color:'var(--ink-700)', lineHeight:2}}>
              {f.a}
            </div>
          </details>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { CtIntro, CtForm, CtFAQ });