// ===== 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);
    // Simulate sending (replace with real endpoint if needed)
    await new Promise(r => setTimeout(r, 1200));
    setLoading(false);
    setSubmitted(true);
  };

  return (
    <>
      {/* Hero */}
      <section className="contact-hero">
        <div className="contact-hero-inner">
          <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>
      </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 />);