// ===== Contact Page =====
const { useState } = React;

const ContactPage = () => {
  const [form, setForm] = useState({ name: "", email: "", category: "", subject: "", message: "" });
  const [agreed, setAgreed] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const canSubmit = form.name && form.email && form.subject && form.message && agreed && !loading;

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setLoading(true);
    try {
      const res = await fetch("https://formsubmit.co/ajax/kiiroimanekineko23@gmail.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          _subject: "【AI Blog Start】お問い合わせ: " + form.subject,
          _template: "table",
          お名前: form.name,
          メールアドレス: form.email,
          _replyto: form.email,
          種別: form.category || "未選択",
          件名: form.subject,
          お問い合わせ内容: form.message
        })
      });
      if (!res.ok) throw new Error("send failed");
      setLoading(false);
      setSubmitted(true);
    } catch (err) {
      setLoading(false);
      alert("送信に失敗しました。お手数ですが、時間をおいて再度お試しください。");
    }
  };

  return (
    <>
      {/* Hero */}
      <section className="contact-hero">
        <div className="contact-hero-inner" style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px",flexWrap:"wrap"}}>
          <div>
            <div className="contact-hero-kicker">
              <span className="dot"></span>CONTACT
            </div>
            <h1>
              <span className="en">GET IN TOUCH</span>
              お問い合わせ
            </h1>
            <p>ご質問・ご意見・取材・コラボのご依頼など、お気軽にご連絡ください。<br/>通常2〜3営業日以内にご返信いたします。</p>
          </div>
          <img src="画像/AI-con.png" alt="質問マークを浮かべた猫のキャラクター" style={{width:"170px",maxWidth:"40%",height:"auto",flexShrink:0}} />
        </div>
      </section>

      {/* Layout */}
      <div className="contact-layout">
        {/* Form Card */}
        <div className="contact-card">
          {submitted ? (
            <div className="contact-thanks">
              <div className="thanks-icon">✓</div>
              <h3>送信が完了しました</h3>
              <p>お問い合わせありがとうございます。<br/>内容を確認のうえ、2〜3営業日以内にご返信いたします。</p>
              <a href="index.html" className="back-btn">
                ← ホームへ戻る
              </a>
            </div>
          ) : (
            <form onSubmit={handleSubmit} noValidate>
              <h2>
                <span className="ic">
                  <Icon name="mail" size={16} />
                </span>
                お問い合わせフォーム
              </h2>

              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">
                    お名前 <span className="req">必須</span>
                  </label>
                  <input
                    className="form-input"
                    type="text"
                    name="name"
                    placeholder="山田 太郎"
                    value={form.name}
                    onChange={handleChange}
                    required
                  />
                </div>
                <div className="form-group">
                  <label className="form-label">
                    メールアドレス <span className="req">必須</span>
                  </label>
                  <input
                    className="form-input"
                    type="email"
                    name="email"
                    placeholder="example@email.com"
                    value={form.email}
                    onChange={handleChange}
                    required
                  />
                </div>
              </div>

              <div className="form-group">
                <label className="form-label">
                  お問い合わせ種別 <span className="opt">任意</span>
                </label>
                <select
                  className="form-select"
                  name="category"
                  value={form.category}
                  onChange={handleChange}
                >
                  <option value="">選択してください</option>
                  <option value="question">ブログ内容についての質問</option>
                  <option value="collab">コラボ・取材のご依頼</option>
                  <option value="ads">広告・PR掲載について</option>
                  <option value="correction">記事の誤りについて</option>
                  <option value="other">その他</option>
                </select>
              </div>

              <div className="form-group">
                <label className="form-label">
                  件名 <span className="req">必須</span>
                </label>
                <input
                  className="form-input"
                  type="text"
                  name="subject"
                  placeholder="お問い合わせの件名をご記入ください"
                  value={form.subject}
                  onChange={handleChange}
                  required
                />
              </div>

              <div className="form-group">
                <label className="form-label">
                  メッセージ <span className="req">必須</span>
                </label>
                <textarea
                  className="form-textarea"
                  name="message"
                  placeholder="お問い合わせ内容をできるだけ詳しくご記入ください。"
                  value={form.message}
                  onChange={handleChange}
                  required
                />
              </div>

              <div className="privacy-check" onClick={() => setAgreed(a => !a)}>
                <input
                  type="checkbox"
                  id="privacy"
                  checked={agreed}
                  onChange={e => setAgreed(e.target.checked)}
                  onClick={e => e.stopPropagation()}
                />
                <label htmlFor="privacy" onClick={e => e.stopPropagation()}>
                  <a href="privacy.html" target="_blank" onClick={e => e.stopPropagation()}>プライバシーポリシー</a>に同意のうえ送信します。
                  ご入力いただいた個人情報はお問い合わせへの回答のみに使用し、第三者への提供は行いません。
                </label>
              </div>

              <button
                type="submit"
                className="contact-submit"
                disabled={!canSubmit}
              >
                {loading ? (
                  <>送信中…</>
                ) : (
                  <><Icon name="mail" size={16} /> 送信する</>
                )}
              </button>
            </form>
          )}
        </div>

        {/* Sidebar */}
        <aside className="contact-info">
          {/* Contact Info */}
          <div className="contact-info-card">
            <h3>
              <span className="ic"><Icon name="clock" size={14} /></span>
              ご返信について
            </h3>
            <div className="contact-info-item">
              <span className="ci-label">返信期間</span>
              <span className="ci-val">2〜3営業日以内</span>
            </div>
            <div className="contact-info-item">
              <span className="ci-label">営業日</span>
              <span className="ci-val">月〜金（祝日除く）</span>
            </div>
            <div className="contact-info-item">
              <span className="ci-label">受付時間</span>
              <span className="ci-val">24時間受付（返信は営業日のみ）</span>
            </div>
            <div className="contact-info-item">
              <span className="ci-label">注意事項</span>
              <span className="ci-val">迷惑メールフォルダもご確認ください</span>
            </div>
          </div>

          {/* FAQ */}
          <div className="contact-info-card">
            <h3>
              <span className="ic"><Icon name="spark" size={14} /></span>
              よくある質問
            </h3>
            <div className="contact-faq">
              <div className="contact-faq-item">
                <div className="contact-faq-q">ブログの始め方を教えてもらえますか？</div>
                <div className="contact-faq-a">「始め方・基礎」カテゴリーの記事で詳しく解説しています。まずはそちらをご覧ください。</div>
              </div>
              <div className="contact-faq-item">
                <div className="contact-faq-q">記事の内容に誤りがあります</div>
                <div className="contact-faq-a">お手数ですが「記事の誤りについて」を選択のうえご連絡ください。迅速に確認・修正いたします。</div>
              </div>
              <div className="contact-faq-item">
                <div className="contact-faq-q">コラボや取材は受け付けていますか？</div>
                <div className="contact-faq-a">内容によってはお受けできます。「コラボ・取材のご依頼」よりご連絡ください。</div>
              </div>
              <div className="contact-faq-item">
                <div className="contact-faq-q">返信が来ない場合はどうすれば？</div>
                <div className="contact-faq-a">迷惑メールフォルダをご確認のうえ、再度ご送信ください。</div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </>
  );
};

// ===== App =====
const App = () => {
  const nav = [
    { label: "ホーム", href: "index.html" },
    { label: "始め方・基礎", href: "start-basics.html" },
    { label: "SEO・集客", href: "seo-traffic.html" },
    { label: "AIツール活用", href: "ai-tools.html" },
    { label: "収益化", href: "monetize.html" },
    { label: "ブログ運営", href: "blog-ops.html" },
  ];

  return (
    <>
      <Announce />
      <Header nav={nav} homeHref="index.html" articlesHref="articles/index.html" />
      <main>
        <ContactPage />
      </main>
      <Footer />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);