// Contact + Footer + Floating CTA

const Contact = () => {
  const [form, setForm] = React.useState({
    name: "",
    phone: "",
    email: "",
    type: "",
    message: "",
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "お名前をご入力ください";
    if (!form.phone.trim()) e.phone = "お電話番号をご入力ください";
    return e;
  };

  const onSubmit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) {
      setSubmitted(true);
    }
  };

  const setField = (k) => (e) => {
    setForm({ ...form, [k]: e.target.value });
    if (errors[k]) setErrors({ ...errors, [k]: undefined });
  };

  return (
    <section className="section section--deep" id="contact">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow" style={{ color: "#C9D7CC" }}>
            <span style={{ background: "#C9D7CC" }}></span>
            CONTACT
          </div>
          <h2 className="section-title" style={{ color: "white" }}>
            まずは、お気軽にご相談ください
          </h2>
          <p className="lead" style={{ color: "rgba(234, 238, 233, 0.75)" }}>
            電話・メール・フォーム、お好きな方法でどうぞ。<br />
            「ちょっと話を聞いてみたい」だけでも大歓迎です。
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-card reveal">
            <div className="contact-card__title">直接ご連絡いただく場合</div>
            <div className="contact-list">
              <div className="contact-list__item">
                <span className="contact-list__icon"><Icon name="phone" size={18} /></span>
                <div>
                  <div className="contact-list__label">TEL</div>
                  <a href="tel:022-778-3621" className="contact-list__value contact-list__value--big">
                    022-778-3621
                  </a>
                </div>
              </div>
              <div className="contact-list__item">
                <span className="contact-list__icon"><Icon name="phone" size={18} /></span>
                <div>
                  <div className="contact-list__label">MOBILE</div>
                  <a href="tel:070-9034-9195" className="contact-list__value">
                    070-9034-9195
                  </a>
                </div>
              </div>
              <div className="contact-list__item">
                <span className="contact-list__icon"><Icon name="mail" size={18} /></span>
                <div>
                  <div className="contact-list__label">EMAIL</div>
                  <a href="mailto:satorijp2021@gmail.com" className="contact-list__value">
                    satorijp2021@gmail.com
                  </a>
                </div>
              </div>
              <div className="contact-list__item">
                <span className="contact-list__icon"><Icon name="pin" size={18} /></span>
                <div>
                  <div className="contact-list__label">ADDRESS</div>
                  <div className="contact-list__value" style={{ fontSize: "0.9375rem", lineHeight: 1.7 }}>
                    〒982-0812<br />
                    仙台市太白区ひより台31-1
                  </div>
                </div>
              </div>
              <div className="contact-list__item">
                <span className="contact-list__icon"><Icon name="clock" size={18} /></span>
                <div>
                  <div className="contact-list__label">営業日</div>
                  <div className="contact-list__value" style={{ fontSize: "0.9375rem" }}>
                    月〜金 9:00 – 16:00
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="contact-card reveal">
            <div className="contact-card__title">フォームから問い合わせる</div>
            {submitted ? (
              <div style={{ textAlign: "center", padding: "40px 20px" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: "50%",
                  background: "rgba(201, 215, 204, 0.2)",
                  color: "#C9D7CC",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  marginBottom: 20,
                }}>
                  <Icon name="check" size={32} />
                </div>
                <h3 style={{ color: "white", fontFamily: "var(--serif)", fontSize: "1.25rem", letterSpacing: "0.06em", marginBottom: 12 }}>
                  お問い合わせありがとうございます
                </h3>
                <p style={{ color: "rgba(234, 238, 233, 0.75)", fontSize: "0.9375rem", lineHeight: 1.95 }}>
                  内容を確認のうえ、3日以内にご連絡いたします。<br />
                  お急ぎの場合はお電話でも承っております。
                </p>
              </div>
            ) : (
              <form onSubmit={onSubmit} noValidate>
                <div className="form-grid form-grid--2">
                  <div className="form-field">
                    <label className="form-label" htmlFor="f-name">
                      お名前 <span className="form-required">必須</span>
                    </label>
                    <input
                      id="f-name" type="text" className="form-input"
                      placeholder="例）佐藤 一郎"
                      value={form.name} onChange={setField("name")}
                    />
                    {errors.name && <span className="form-error">{errors.name}</span>}
                  </div>
                  <div className="form-field">
                    <label className="form-label" htmlFor="f-phone">
                      電話番号 <span className="form-required">必須</span>
                    </label>
                    <input
                      id="f-phone" type="tel" className="form-input"
                      placeholder="例）022-778-3621"
                      value={form.phone} onChange={setField("phone")}
                    />
                    {errors.phone && <span className="form-error">{errors.phone}</span>}
                  </div>
                </div>
                <div className="form-field" style={{ marginTop: 18 }}>
                  <label className="form-label" htmlFor="f-email">メールアドレス（任意）</label>
                  <input
                    id="f-email" type="email" className="form-input"
                    placeholder="例）example@example.com"
                    value={form.email} onChange={setField("email")}
                  />
                </div>
                <div className="form-field" style={{ marginTop: 18 }}>
                  <label className="form-label" htmlFor="f-type">お問い合わせ種別</label>
                  <select id="f-type" className="form-select" value={form.type} onChange={setField("type")}>
                    <option value="">選択してください</option>
                    <option value="visit">見学を申し込みたい</option>
                    <option value="info">資料がほしい</option>
                    <option value="question">質問したい</option>
                    <option value="other">その他</option>
                  </select>
                </div>
                <div className="form-field" style={{ marginTop: 18 }}>
                  <label className="form-label" htmlFor="f-msg">メッセージ</label>
                  <textarea
                    id="f-msg" className="form-textarea" rows="4"
                    placeholder="ご質問・ご希望の見学日時など、お気軽にお書きください。"
                    value={form.message} onChange={setField("message")}
                  ></textarea>
                </div>
                <button type="submit" className="btn btn--primary btn--lg" style={{ marginTop: 28, width: "100%" }}>
                  送信する <Icon name="arrow" size={16} />
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__logo">
            <div className="logo">
              <span className="logo__name">SATORI</span>
              <span className="logo__sub">就労継続支援B型事業所｜仙台市太白区</span>
            </div>
            <p className="footer__desc">
              仙台市太白区の就労継続支援B型事業所。「誰一人取り残さない」を理念に、障がいのある方が自分らしく働ける環境を提供しています。
            </p>
          </div>
          <div>
            <div className="footer__heading">MENU</div>
            <nav className="footer__nav">
              <a href="#about">SATORIについて</a>
              <a href="#works">作業内容</a>
              <a href="#wage">工賃</a>
              <a href="#transport">送迎・昼食</a>
              <a href="#staff">スタッフ</a>
              <a href="#steps">ご利用までの流れ</a>
              <a href="#faq">よくあるご質問</a>
              <a href="#contact">お問い合わせ</a>
            </nav>
          </div>
          <div>
            <div className="footer__heading">COMPANY INFO</div>
            <div className="footer__info">
              <div className="footer__info-row">
                <span className="footer__info-label">法人名</span>
                <span>株式会社SATORI</span>
              </div>
              <div className="footer__info-row">
                <span className="footer__info-label">住所</span>
                <span>〒982-0812<br />仙台市太白区ひより台31-1</span>
              </div>
              <div className="footer__info-row">
                <span className="footer__info-label">TEL</span>
                <span>022-778-3621</span>
              </div>
              <div className="footer__info-row">
                <span className="footer__info-label">FAX</span>
                <span>022-778-3621</span>
              </div>
              <div className="footer__info-row">
                <span className="footer__info-label">Mobile</span>
                <span>070-9034-9195</span>
              </div>
              <div className="footer__info-row">
                <span className="footer__info-label">Email</span>
                <span>satorijp2021@gmail.com</span>
              </div>
              <div className="footer__info-row">
                <span className="footer__info-label">認可番号</span>
                <span>0415402197</span>
              </div>
            </div>
          </div>
        </div>
        <div className="footer__bottom">
          <span>©2024 株式会社SATORI All Rights Reserved.</span>
          <span>誰一人取り残さない</span>
        </div>
      </div>
    </footer>
  );
};

const FloatCTA = () => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      // show after past hero, but hide when near footer
      setVisible(y > 600 && y < max - 800);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <a href="#contact" className={`float-cta ${visible ? "is-visible" : ""}`}>
      <Icon name="arrow" size={16} />
      無料で見学を申し込む
    </a>
  );
};

window.Contact = Contact;
window.Footer = Footer;
window.FloatCTA = FloatCTA;