// ---- contact + footer ----
const { useState: uSt } = React;

function Contact() {
  const [f, setF] = uSt({ name: "", email: "", kind: "アテモヤについて", msg: "" });
  const [err, setErr] = uSt({});
  const [sent, setSent] = uSt(false);
  const [busy, setBusy] = uSt(false);

  const set = (k) => (e) => { setF({ ...f, [k]: e.target.value }); setErr({ ...err, [k]: "" }); };

  const CONTACT_EMAIL = "aki3oka3@gmail.com";

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!f.name.trim()) er.name = "お名前をご入力ください";
    if (!f.email.trim()) er.email = "メールアドレスをご入力ください";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) er.email = "メールアドレスの形式をご確認ください";
    if (!f.msg.trim()) er.msg = "お問い合わせ内容をご入力ください";
    setErr(er);
    if (Object.keys(er).length) return;
    setBusy(true);
    const subject = `【お問い合わせ】${f.kind}／${f.name} 様`;
    const body =
      `お名前：${f.name}\n` +
      `メールアドレス：${f.email}\n` +
      `種別：${f.kind}\n` +
      `\n----------------------------------------\n` +
      `${f.msg}\n` +
      `----------------------------------------\n\n` +
      `※アグリファーム あき ウェブサイトのお問い合わせフォームより`;
    const url = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setTimeout(() => {
      window.location.href = url;
      setBusy(false);
      setSent(true);
    }, 600);
  };

  return (
    <section className="band-green pad" id="contact">
      <div className="wrap contact-grid">
        <div className="contact-info">
          <Reveal><Eyebrow>Contact</Eyebrow></Reveal>
          <Reveal delay={100}>
            <h2 className="section-title" style={{ color: "var(--paper)" }}>お気軽に<br />お問い合わせください。</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead" style={{ color: "rgba(251,248,240,.82)" }}>
              アテモヤや農園に関するご質問、お取り扱いのご相談など、なんでもどうぞ。最新の様子はSNSでも発信しています。
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div className="cinfo-list">
              <div className="cinfo">
                <span className="ci"><Icon name="pin" /></span>
                <span><b>FARM</b><span>沖縄県国頭郡恩納村</span></span>
              </div>
              <div className="cinfo">
                <span className="ci"><Icon name="clock" /></span>
                <span><b>SEASON</b><span>収穫期 12月〜翌3月</span></span>
              </div>
              <div className="cinfo">
                <span className="ci"><Icon name="mail" /></span>
                <span><b>MAIL</b><a href={`mailto:${CONTACT_EMAIL}`} style={{ color: "var(--paper)", borderBottom: "1px solid rgba(230,178,95,.5)" }}>{CONTACT_EMAIL}</a></span>
              </div>
            </div>
          </Reveal>
          <Reveal delay={280}>
            <div className="socials">
              <a href="https://x.com/OkinawaAtemoya" target="_blank" rel="noopener" aria-label="X"><Icon name="x" /></a>
              <a href="#" aria-label="Instagram"><Icon name="instagram" /></a>
            </div>
          </Reveal>
        </div>

        <Reveal delay={140}>
          <div className="form">
            {sent ? (
              <div className="form-success">
                <div className="check"><Icon name="check" /></div>
                <h3>メールアプリが開きます</h3>
                <p>内容が入力されたメールが立ち上がります。<br />そのまま送信していただけば、農園に届きます。</p>
                <p style={{ marginTop: 14, fontSize: 13 }}>開かない場合は <a href={`mailto:${CONTACT_EMAIL}`} style={{ color: "var(--amber-soft)" }}>{CONTACT_EMAIL}</a> 宛に直接お送りください。</p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="form-row">
                  <div className={`fld ${err.name ? "err" : ""}`}>
                    <label>お名前<span className="req">*</span></label>
                    <input value={f.name} onChange={set("name")} placeholder="山田 太郎" />
                    {err.name && <div className="msg">{err.name}</div>}
                  </div>
                  <div className={`fld ${err.email ? "err" : ""}`}>
                    <label>メールアドレス<span className="req">*</span></label>
                    <input value={f.email} onChange={set("email")} placeholder="you@example.com" />
                    {err.email && <div className="msg">{err.email}</div>}
                  </div>
                </div>
                <div className="fld">
                  <label>お問い合わせ種別</label>
                  <select value={f.kind} onChange={set("kind")}>
                    <option>アテモヤについて</option>
                    <option>お取り扱い・ご購入のご相談</option>
                    <option>農園の見学・取材について</option>
                    <option>その他</option>
                  </select>
                </div>
                <div className={`fld ${err.msg ? "err" : ""}`}>
                  <label>お問い合わせ内容<span className="req">*</span></label>
                  <textarea value={f.msg} onChange={set("msg")} placeholder="ご質問・ご相談の内容をご記入ください"></textarea>
                  {err.msg && <div className="msg">{err.msg}</div>}
                </div>
                <button className="submit" type="submit" disabled={busy}>
                  {busy ? "準備しています…" : "メールで送信する"}
                </button>
                <p style={{ fontSize: 12, color: "rgba(251,248,240,.55)", marginTop: 14, textAlign: "center" }}>送信ボタンを押すと、ご利用のメールアプリが開きます。</p>
              </form>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-top">
          <a href="#top" className="foot-brand">
            <span className="mark"><Mark /></span>
            <span className="name">アグリファーム あき<small>AGRIFARM AKI</small></span>
          </a>
          <nav className="foot-nav">
            {NAV.map((n) => <a key={n.id} href={`#${n.id}`}>{n.label}</a>)}
          </nav>
        </div>
        <div className="foot-bottom">
          <span>© 2026 アグリファーム あき</span>
          <span>沖縄県国頭郡恩納村 — Atemoya Farm</span>
        </div>
      </div>
    </footer>
  );
}

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