// ContactFormRight.jsx
const { useState, useEffect } = React;

const ContactFormRight = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    budget: '',
    deadline: '',
    purpose: [],
    otherMessage: '',
    referenceVideo: '',
    message: '',
    name: '',
    nameKana: '',
    company: '',
    email: '',
    phone: ''
  });
  
// reCAPTCHA v3用のhandleSubmit関数
const handleSubmit = () => {
  // バリデーション（簡易版）
  if (!formData.name || !formData.email || !formData.phone) {
    alert("必須項目を入力してください");
    return;
  }
  
  setIsSubmitting(true);
  
  // reCAPTCHA v3を実行
  grecaptcha.ready(function() {
    grecaptcha.execute('6LfV3PAqAAAAALjtwxbE6NTJduzTH0k-JWc-7YVp', {action: 'submit'})
    .then(function(token) {
      // フォーム送信処理
      submitForm(token);
    });
  });
};

// フォーム送信関数
const submitForm = (captchaToken) => {
  // 実際のフォーム要素を作成
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = '/sns-lp/01/send_mail.php';
  form.style.display = 'none';
  
  // フォームデータを追加
  Object.entries(formData).forEach(([key, value]) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    
    if (Array.isArray(value)) {
      input.value = value.join(', ');
    } else {
      input.value = value;
    }
    
    form.appendChild(input);
  });
  
  // reCAPTCHAの応答を追加
  const recaptchaInput = document.createElement('input');
  recaptchaInput.type = 'hidden';
  recaptchaInput.name = 'g-recaptcha-response';
  recaptchaInput.value = captchaToken;
  form.appendChild(recaptchaInput);
  
  // リダイレクト先の設定
  const redirectInput = document.createElement('input');
  redirectInput.type = 'hidden';
  redirectInput.name = 'redirect';
  redirectInput.value = 'thanks.html';
  form.appendChild(redirectInput);
  
  // フォームを本文に追加して送信
  document.body.appendChild(form);
  form.submit();
};;
  
  // ステップ1: 動画の内容
  const renderStep1 = () => (
    <div>
      <p style={{textAlign: "center", marginBottom: "15px", fontFamily:"Montserrat"}}>{"2STEPで簡単入力！"}</p>
      
      {/* ステップインジケーター */}
      <div style={{display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "30px", fontFamily:"Montserrat"}}>
        <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#CCAAD8", color: "white", display: "flex", justifyContent: "center", alignItems: "center"}}>1</div>
        <div style={{width: "60px", height: "1px", backgroundColor: "#e5e7eb"}}></div>
        <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#e5e7eb", display: "flex", justifyContent: "center", alignItems: "center"}}>2</div>
        <div style={{width: "60px", height: "1px", backgroundColor: "#e5e7eb"}}></div>
        <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#e5e7eb", display: "flex", justifyContent: "center", alignItems: "center"}}>3</div>
      </div>
      
      {/* 予算 */}
      <div style={{marginBottom: "30px"}}>
        <div style={{display: "flex", alignItems: "center", marginBottom: "20px"}}>
          <p style={{marginRight: "10px", fontSize:"18px"}}>{"検討ご予算"}</p>
          {/* <span style={{backgroundColor: "#D42828", color: "white", fontSize: "12px", padding: "2px 5px", borderRadius: "2px"}}>{"必須"}</span> */}
        </div>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "10px",fontSize:"14px"}}>
          {["~20万円", "20~40万円", "40~60万円", "60~100万円", "100万円以上", "未定"].map((budget) => (
            <label key={budget} style={{display: "flex", alignItems: "flex-start"}}>
              <input
                type="radio"
                name="budget"
                value={budget}
                checked={formData.budget === budget}
                onChange={(e) => setFormData({...formData, budget: e.target.value})}
                style={{marginRight: "5px"}}
              />
              <span>{budget}</span>
            </label>
          ))}
        </div>
      </div>
      
      {/* 納期 */}
      {/* <div style={{marginBottom: "30px"}}>
        <div style={{display: "flex", alignItems: "center", marginBottom: "20px"}}>
          <p style={{marginRight: "10px", fontSize:"18px"}}>{"ご希望の納期"}</p>
          <span style={{backgroundColor: "#D42828", color: "white", fontSize: "12px", padding: "2px 5px", borderRadius: "2px"}}>{"必須"}</span>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "10px", fontSize:"14px"}}>
          {["1ヶ月以内", "2ヶ月以内", "3ヶ月以内", "3ヶ月以上", "未定"].map((deadline) => (
            <label key={deadline} style={{display: "flex", alignItems: "flex-start"}}>
              <input
                type="radio"
                name="deadline"
                value={deadline}
                checked={formData.deadline === deadline}
                onChange={(e) => setFormData({...formData, deadline: e.target.value})}
                style={{marginRight: "5px"}}
              />
              <span>{deadline}</span>
            </label>
          ))}
        </div>
      </div>
       */}
      {/* 用途 */}
      {/* <div style={{marginBottom: "30px"}}>
        <div style={{display: "flex", alignItems: "center", marginBottom: "20px"}}>
          <p style={{marginRight: "10px", fontSize:"18px"}}>{"動画の用途"}</p>
          <span style={{backgroundColor: "#D42828", color: "white", fontSize: "12px", padding: "2px 5px", borderRadius: "2px"}}>{"必須"}</span>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "10px",fontSize:"14px"}}>
          {[
            "企業PR動画",
            "商品・サービス紹介",
            "採用動画",
            "研修・教育動画",
            "イベント記録",
            "オンライン配信",
            "WEBサイト用動画",
            "SNS用動画",
            "その他"
          ].map((purpose) => (
            <label key={purpose} style={{display: "flex", alignItems: "flex-start"}}>
              <input
                type="checkbox"
                value={purpose}
                checked={formData.purpose.includes(purpose)}
                onChange={(e) => {
                  const newPurpose = e.target.checked
                    ? [...formData.purpose, purpose]
                    : formData.purpose.filter(p => p !== purpose);
                  setFormData({...formData, purpose: newPurpose});
                }}
                style={{marginRight: "5px"}}
              />
              <span>{purpose}</span>
            </label>
          ))}
        </div>
      </div> */}
      
      {/* 参考動画 */}
      {/* <div style={{marginBottom: "30px"}}>
        <p style={{marginBottom: "10px",fontSize:"18px"}}>{"参考動画"}</p>
        <input
          type="text"
          placeholder="https://www.youtube.com/"
          value={formData.referenceVideo}
          onChange={(e) => setFormData({...formData, referenceVideo: e.target.value})}
          style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}}
        />
      </div> */}
      
      {/* お問い合わせ内容 */}
      <div style={{marginBottom: "30px"}}>
        <p style={{marginBottom: "10px",fontSize:"18px"}}>{"お問い合わせ内容"}</p>
        {/* チェックボックス（複数回答可）に変更 */}
        <div style={{display: "flex", flexDirection: "column", gap: "10px", fontSize: "14px"}}>
          {[
            "SNS運用をしてくれる会社を探している",
            "社内検討資料（企画書や見積書）が欲しい",
            "運用中のアカウントを分析してほしい",
            "ひとまず話を聞いてみたい"
          ].map((item) => (
            <label key={item} style={{display: "flex", alignItems: "center", cursor: "pointer"}}>
              <input
                type="checkbox"
                value={item}
                checked={formData.purpose.includes(item)}
                onChange={(e) => {
                  // チェックされたら追加、外されたら除去する
                  const newPurpose = e.target.checked
                    ? [...formData.purpose, item]
                    : formData.purpose.filter(p => p !== item);
                  setFormData({...formData, purpose: newPurpose});
                }}
                style={{marginRight: "8px"}}
              />
              <span>{item}</span>
            </label>
          ))}
        </div>
        {/* その他 */}
        <label style={{display: "flex", alignItems: "center", cursor: "pointer", fontSize: "14px", marginTop: "10px"}}>
          <input
            type="checkbox"
            value="その他"
            checked={formData.purpose.includes("その他")}
            onChange={(e) => {
              // チェックされたら「その他」を追加、外したら除去してテキストもリセット
              const newPurpose = e.target.checked
                ? [...formData.purpose, "その他"]
                : formData.purpose.filter(p => p !== "その他");
              setFormData({...formData, purpose: newPurpose, otherMessage: e.target.checked ? formData.otherMessage : ''});
            }}
            style={{marginRight: "8px"}}
          />
          <span>{"その他"}</span>
        </label>
        {/* 「その他」にチェックが入ったときだけテキストエリアを表示 */}
        {formData.purpose.includes("その他") && (
          <textarea
            rows={4}
            value={formData.otherMessage}
            onChange={(e) => setFormData({...formData, otherMessage: e.target.value})}
            placeholder="お問い合わせ内容をご記入ください"
            style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px", marginTop: "8px"}}
          ></textarea>
        )}
        {/* 以前のtextarea（コメントアウト）
        <textarea
          rows={10}
          value={formData.message}
          onChange={(e) => setFormData({...formData, message: e.target.value})}
          placeholder="お問い合わせ内容をご記入ください"
          style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}}
        ></textarea>
        */}
      </div>
      
      {/* 次へボタン */}
      <div style={{textAlign: "center"}}>
      <button
  onClick={() => {
    setCurrentStep(2);
  }}
  style={{
    backgroundColor: "#CCAAD8",
    color: "white",
    padding: "10px 20px",
    borderRadius: "50px",
    border: "none",
    cursor: "pointer"
  }}
  onMouseEnter={(e) => {if(!isSubmitting) e.target.style.opacity = "0.7"}}
  onMouseLeave={(e) => {if(!isSubmitting) e.target.style.opacity = "1"}}
>
  {"次のステップへ →"}
</button>
      </div>
    </div>
  );
  
  // ステップ2: お客様情報
  const renderStep2 = () => (
    <div>
      <p style={{textAlign: "center", marginBottom: "15px",fontFamily:"Montserrat"}}>{"2STEPで簡単入力！"}</p>
      
      {/* ステップインジケーター */}
      <div style={{display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "30px",fontFamily:"Montserrat"}}>
        <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#BF95CE", color: "white", display: "flex", justifyContent: "center", alignItems: "center"}}>1</div>
        <div style={{width: "60px", height: "1px", backgroundColor: "#BF95CE"}}></div>
        <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#BF95CE", color: "white", display: "flex", justifyContent: "center", alignItems: "center"}}>2</div>
        <div style={{width: "60px", height: "1px", backgroundColor: "#e5e7eb"}}></div>
        <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#e5e7eb", display: "flex", justifyContent: "center", alignItems: "center"}}>3</div>
      </div>
      
      {/* お客様情報フォーム */}
      <div style={{display: "flex", flexDirection: "column", gap: "20px", marginBottom: "30px"}}>
        {/* 名前 */}
        <div>
          <div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
            <p style={{marginRight: "10px"}}>{"ご担当者名"}</p>
            <span style={{backgroundColor: "#D42828", color: "white", fontSize: "12px", padding: "2px 5px", borderRadius: "2px"}}>{"必須"}</span>
          </div>
          <input
            type="text"
            placeholder="山田 太郎"
            value={formData.name}
            onChange={(e) => setFormData({...formData, name: e.target.value})}
            style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}}
          />
        </div>
        
        {/* ふりがな */}
        {/* <div>
          <div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
            <p style={{marginRight: "10px"}}>{"ふりがな"}</p>
          </div>
          <input
            type="text"
            placeholder="やまだ たろう"
            value={formData.nameKana}
            onChange={(e) => setFormData({...formData, nameKana: e.target.value})}
            style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}}
          />
        </div> */}
        
        {/* 会社名 */}
        <div>
          <div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
            <p style={{marginRight: "10px"}}>{"会社名"}</p>
            <span style={{backgroundColor: "#D42828", color: "white", fontSize: "12px", padding: "2px 5px", borderRadius: "2px"}}>{"必須"}</span>
          </div>
          <input
            type="text"
            placeholder="株式会社Capworks"
            value={formData.company}
            onChange={(e) => setFormData({...formData, company: e.target.value})}
            style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}}
          />
        </div>
        
        {/* メールアドレス */}
        <div>
          <div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
            <p style={{marginRight: "10px"}}>{"メールアドレス"}</p>
            <span style={{backgroundColor: "#D42828", color: "white", fontSize: "12px", padding: "2px 5px", borderRadius: "2px"}}>{"必須"}</span>
          </div>
          <input
            type="email"
            placeholder="example@capworks.jp"
            value={formData.email}
            onChange={(e) => setFormData({...formData, email: e.target.value})}
            style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}}
          />
        </div>
        
        {/* 電話番号 */}
        <div>
          <div style={{display: "flex", alignItems: "center", marginBottom: "10px"}}>
            <p style={{marginRight: "10px"}}>{"お電話番号"}</p>
            <span style={{backgroundColor: "#D42828", color: "white", fontSize: "12px", padding: "2px 5px", borderRadius: "2px"}}>{"必須"}</span>
          </div>
          <input
            type="tel"
            placeholder="09012345678"
            value={formData.phone}
            onChange={(e) => setFormData({...formData, phone: e.target.value})}
            style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}}
          />
        </div>
      </div>
      
   {/* reCAPTCHAのdivを削除 */}
{/* <div style={{marginTop: "20px", display: "flex", justifyContent: "center"}}>
  <div className="g-recaptcha" data-sitekey="6LfV3PAqAAAAALjtwxbE6NTJduzTH0k-JWc-7YVp"></div>
</div> */}

      {/* ボタンエリア */}
      <div style={{display: "flex", justifyContent: "center", alignItems: "center", gap: "20px"}}>
        <button
          onClick={() => setCurrentStep(1)}
          disabled={isSubmitting}
          style={{
            color: "#6b7280",
            background: "none",
            border: "none",
            cursor: isSubmitting ? "not-allowed" : "pointer"
          }}
          onMouseEnter={(e) => {if(!isSubmitting) e.target.style.opacity = "0.7"}}
          onMouseLeave={(e) => {if(!isSubmitting) e.target.style.opacity = "1"}}
        >
          {"戻る"}
        </button>
        <button
          onClick={handleSubmit}
          disabled={isSubmitting}
          style={{
            backgroundColor: "#BF95CE",
            color: "white",
            padding: "10px 20px",
            borderRadius: "50px",
            border: "none",
            cursor: isSubmitting ? "not-allowed" : "pointer",
            opacity: isSubmitting ? "0.7" : "1"
          }}
          onMouseEnter={(e) => {if(!isSubmitting) e.target.style.opacity = "0.7"}}
          onMouseLeave={(e) => {if(!isSubmitting) e.target.style.opacity = "1"}}
        >
          {isSubmitting ? "送信中..." : "送信する →"}
        </button>
      </div>
    </div>
  );
  
  // ステップ3: 完了画面
  const renderStep3 = () => {
    // useEffect でコンポーネントがマウントされた時に一度だけ実行
    useEffect(() => {
      // フォーム送信完了イベントをDataLayerにプッシュ
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        'event': 'form_completion',
        'form_name': 'contact_form',
        'conversion_type': 'lead'
      });
      
      console.log('コンバージョンイベントを送信しました'); // デバッグ用
    }, []); // 空の依存配列で一度だけ実行

    return (
      <div>
        <p style={{textAlign: "center",marginBottom: "15px", fontFamily:"Montserrat"}}>{"2STEPで簡単入力！"}</p>
        
        {/* ステップインジケーター */}
        <div style={{display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "30px"}}>
          <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#BF95CE", color: "white", display: "flex", justifyContent: "center", alignItems: "center"}}>1</div>
          <div style={{width: "60px", height: "1px", backgroundColor: "#BF95CE"}}></div>
          <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#BF95CE", color: "white", display: "flex", justifyContent: "center", alignItems: "center"}}>2</div>
          <div style={{width: "60px", height: "1px", backgroundColor: "#BF95CE"}}></div>
          <div style={{width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "#BF95CE", color: "white", display: "flex", justifyContent: "center", alignItems: "center"}}>3</div>
        </div>
        
        <div style={{textAlign: "center", padding: "40px 0"}}>
          <h3 style={{fontSize: "24px", fontWeight: "bold", marginBottom: "16px"}}>
            {"お問い合わせありがとうございます"}
          </h3>
          <p>{"内容を確認次第、担当者よりご連絡いたします。"}</p>
        </div>
      </div>
    );
  };
  
  // 表示するステップの決定
  const renderContent = () => {
    if (currentStep === 1) {
      return renderStep1();
    } else if (currentStep === 2) {
      return renderStep2();
    } else {
      return renderStep3();
    }
  };
  
  return (
    <div style={{padding: "20px"}}>
      {renderContent()}
    </div>
  );
};

// レンダリング処理
ReactDOM.render(
  <ContactFormRight />,
  document.getElementById('contact-form')
);