// contact.jsx — お問い合わせフォーム + フッター

const ContactSection = () => {
  const [form, setForm] = React.useState({ name: "", phone: "", email: "", area: "", type: "予防工事", floor: "", message: "" });
  const [sent, setSent] = React.useState(false);
  const update = (k, v) => setForm({ ...form, [k]: v });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <section className="section" id="contact" style={{ background: "var(--c-sky)" }}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">CONTACT</div>
          <h2>お気軽に<span className="em">ご相談ください</span></h2>
          <p>お電話・フォームどちらからでもお問い合わせいただけます。<br />無料点検・お見積り、強引な営業は一切ございません。</p>
        </div>
        <div className="contact-wrap">
          <div className="contact-info">
            <h3>無料点検・お見積りは<br />お気軽にどうぞ</h3>
            <p>シロアリのことでお悩みの方、5年に1度の予防工事をご検討の方、まずはお気軽にお問い合わせください。専門スタッフがていねいにご対応いたします。</p>
            <div className="contact-tel">
              <div className="label">お電話でのお問い合わせ</div>
              <div className="num">0120-456-789</div>
              <div className="hours">受付 8:00〜19:00 / 年中無休</div>
            </div>
            <div style={{ marginTop: 20, padding: 18, background: "var(--c-cream)", borderRadius: 12, fontSize: 13, color: "var(--c-ink-2)", lineHeight: 1.85 }}>
              <b style={{ color: "var(--c-navy)", display: "block", marginBottom: 6 }}>
                <Icon name="clock" size={14} color="var(--c-blue)" style={{ verticalAlign: "-2px", marginRight: 4 }} />
                お問い合わせ後の流れ
              </b>
              フォーム送信後、24時間以内にご担当者よりご連絡を差し上げます。お電話の場合は受付時間内にお応えいたします。
            </div>
          </div>
          <form onSubmit={submit}>
            <div className="form-row">
              <label>お名前<span className="req">必須</span></label>
              <input type="text" required value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="例：山田 太郎" />
            </div>
            <div className="form-row">
              <div className="row-2">
                <div>
                  <label>電話番号<span className="req">必須</span></label>
                  <input type="tel" required value={form.phone} onChange={(e) => update("phone", e.target.value)} placeholder="090-1234-5678" />
                </div>
                <div>
                  <label>メールアドレス</label>
                  <input type="email" value={form.email} onChange={(e) => update("email", e.target.value)} placeholder="example@email.com" />
                </div>
              </div>
            </div>
            <div className="form-row">
              <label>お住まいの地域<span className="req">必須</span></label>
              <select required value={form.area} onChange={(e) => update("area", e.target.value)}>
                <option value="">選択してください</option>
                <option>名古屋市千種区</option>
                <option>名古屋市東区</option>
                <option>名古屋市北区</option>
                <option>名古屋市西区</option>
                <option>名古屋市中村区</option>
                <option>名古屋市中区</option>
                <option>名古屋市昭和区</option>
                <option>名古屋市瑞穂区</option>
                <option>名古屋市熱田区</option>
                <option>名古屋市中川区</option>
                <option>名古屋市港区</option>
                <option>名古屋市南区</option>
                <option>名古屋市守山区</option>
                <option>名古屋市緑区</option>
                <option>名古屋市名東区</option>
                <option>名古屋市天白区</option>
                <option>愛知県内（その他）</option>
              </select>
            </div>
            <div className="form-row">
              <div className="row-2">
                <div>
                  <label>ご相談内容<span className="req">必須</span></label>
                  <select required value={form.type} onChange={(e) => update("type", e.target.value)}>
                    <option>予防工事</option>
                    <option>駆除工事</option>
                    <option>無料床下点検</option>
                    <option>その他のご相談</option>
                  </select>
                </div>
                <div>
                  <label>建物の延床面積（㎡）</label>
                  <input type="text" value={form.floor} onChange={(e) => update("floor", e.target.value)} placeholder="例：60㎡くらい" />
                </div>
              </div>
            </div>
            <div className="form-row">
              <label>ご相談・ご質問</label>
              <textarea value={form.message} onChange={(e) => update("message", e.target.value)} placeholder="ご自由にお書きください。お困りのこと、ご希望の日時など。" />
            </div>
            <button type="submit" className="btn btn-primary" style={{ width: "100%", padding: "16px 24px", fontSize: 15, justifyContent: "center" }}>
              <Icon name="mail" size={16} />この内容で送信する
            </button>
            {sent && (
              <div style={{ marginTop: 14, padding: 14, background: "#e6f7ee", border: "1px solid var(--c-success)", borderRadius: 8, fontSize: 13, color: "var(--c-success)", display: "flex", alignItems: "center", gap: 10 }}>
                <Icon name="check" size={18} stroke={3} />送信ありがとうございました。担当者より24時間以内にご連絡いたします。
              </div>
            )}
            <p style={{ fontSize: 11, color: "var(--c-ink-3)", marginTop: 10, textAlign: "center" }}>
              送信いただいた内容はお問い合わせ対応のみに使用し、第三者に提供することはありません。
            </p>
          </form>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="logo">
            <Logo size={56} style={{ background: "white", borderRadius: 12, padding: "8px 12px", boxShadow: "0 4px 16px rgba(0,0,0,0.2)" }} />
          </div>
          <p>名古屋市・愛知県全域でシロアリ予防工事を専門とする、地域密着の会社です。創業15年、3,200件以上の施工実績で、皆様のお家を守ります。</p>
        </div>
        <div>
          <h5>サービス</h5>
          <ul>
            <li><a href="#service">シロアリ予防工事</a></li>
            <li><a href="#service">シロアリ駆除工事</a></li>
            <li><a href="#service">無料床下点検</a></li>
            <li><a href="#price">料金表</a></li>
          </ul>
        </div>
        <div>
          <h5>会社情報</h5>
          <ul>
            <li><a href="#staff">スタッフ紹介</a></li>
            <li><a href="#case">施工事例</a></li>
            <li><a href="#voice">お客様の声</a></li>
            <li><a href="#area">対応エリア</a></li>
          </ul>
        </div>
        <div>
          <h5>お問い合わせ</h5>
          <ul style={{ lineHeight: 1.85 }}>
            <li style={{ color: "white", fontWeight: 700, fontSize: 18, fontFamily: "var(--f-rounded)" }}>0120-456-789</li>
            <li>受付 8:00〜19:00</li>
            <li>年中無休</li>
            <li><a href="#contact" style={{ textDecoration: "underline" }}>フォームから相談する →</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 名古屋シロアリ駆除センター</span>
        <span>愛知県名古屋市〇〇区〇〇 1-2-3</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { ContactSection, Footer });