/* global React */
const { useState: useStateC, useRef: useRefC } = React;

// ========== Contact / CTA ==========
function Contact({ panelRef }) {
  const [step, setStep] = useStateC(0);
  const [data, setData] = useStateC({
    interest: [],
    name: "",
    company: "",
    email: "",
    message: "",
  });
  const [errors, setErrors] = useStateC({});

  const interests = [
    "公式LINE構築",
    "Instagram活用",
    "業務効率化",
    "Webサイト制作",
    "まずは相談",
  ];

  const toggleInterest = (it) => {
    setData((d) => ({
      ...d,
      interest: d.interest.includes(it)
        ? d.interest.filter((x) => x !== it)
        : [...d.interest, it],
    }));
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.name) errs.name = "お名前を入力してください";
    if (!data.email) errs.email = "メールアドレスを入力してください";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errs.email = "正しい形式で入力してください";
    if (!data.message) errs.message = "メッセージを入力してください";
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setStep(1);
    }
  };

  return (
    <section id="contact" className="section cta" ref={panelRef}>
      <div className="container">
        <div className="cta-grid">
          <Reveal>
            <div>
              <span className="eyebrow" style={{ color: "var(--accent-soft)" }}>Contact</span>
              <h2 style={{ marginTop: 28 }}>
                まずは、
                <span className="band"><span className="c1">気</span><span className="c3">軽</span><span className="c4">に</span></span>
                <br />
                話してみる。
              </h2>
              <p className="cta-sub">
                <strong style={{ color: "#fff", display: "block", marginBottom: 12, fontSize: 18 }}>まずは30分、お話ししてみませんか?</strong>
                「何から手をつけていいか分からない」「とりあえず話を聞いてほしい」といったご相談も大歓迎です。無理な営業などは一切いたしませんので、ぜひお気軽にお声がけください。
              </p>

              <div style={{ marginTop: 52, paddingTop: 32, borderTop: "1px solid #2a2a2a", display: "flex", flexDirection: "column", gap: 16, fontSize: 14 }}>
                <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "#888", minWidth: 72, fontWeight: 600 }}>PHONE</span>
                  <span style={{ color: "#fff" }}>080-6479-5254</span>
                </div>
                <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "#888", minWidth: 72, fontWeight: 600 }}>EMAIL</span>
                  <span style={{ color: "#fff" }}>eiki@gifty-works.com</span>
                </div>
                <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "#888", minWidth: 72, fontWeight: 600 }}>BASE</span>
                  <span style={{ color: "#fff" }}>宮崎県 / オンライン全国対応</span>
                </div>
                <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "#888", minWidth: 72, fontWeight: 600 }}>HOURS</span>
                  <span style={{ color: "#fff" }}>平日 10:00–18:00 / 外も要相談</span>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div className="form-card" id="form-card">
              {step === 0 ? (
                <form onSubmit={submit} noValidate>
                  <h3>お問い合わせフォーム</h3>
                  <p className="form-sub">2営業日以内にお返事いたします。お気軽にどうぞ。</p>

                  <div className="form-row">
                    <label>ご相談内容 (複数選択可)</label>
                    <div className="chip-row">
                      {interests.map((it) => (
                        <button
                          type="button"
                          key={it}
                          className={`chip ${data.interest.includes(it) ? "active" : ""}`}
                          onClick={() => toggleInterest(it)}
                        >
                          {it}
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className={`form-row ${errors.name ? "error" : ""}`}>
                    <label>お名前 *</label>
                    <input
                      type="text"
                      value={data.name}
                      onChange={(e) => setData({ ...data, name: e.target.value })}
                      placeholder="例)山田 太郎"
                    />
                    {errors.name && <div className="err-msg">{errors.name}</div>}
                  </div>

                  <div className="form-row">
                    <label>お店・会社名</label>
                    <input
                      type="text"
                      value={data.company}
                      onChange={(e) => setData({ ...data, company: e.target.value })}
                      placeholder="例)株式会社〇〇、カフェ〇〇"
                    />
                  </div>

                  <div className={`form-row ${errors.email ? "error" : ""}`}>
                    <label>メールアドレス *</label>
                    <input
                      type="email"
                      value={data.email}
                      onChange={(e) => setData({ ...data, email: e.target.value })}
                      placeholder="hello@example.com"
                    />
                    {errors.email && <div className="err-msg">{errors.email}</div>}
                  </div>

                  <div className={`form-row ${errors.message ? "error" : ""}`}>
                    <label>ご相談内容 *</label>
                    <textarea
                      value={data.message}
                      onChange={(e) => setData({ ...data, message: e.target.value })}
                      placeholder="状況や、今お困りのことを自由にご記入ください。うまくまとまっていなくて大丈夫です。"
                    ></textarea>
                    {errors.message && <div className="err-msg">{errors.message}</div>}
                  </div>

                  <button type="submit" className="btn btn-primary">
                    送信する
                    <span>→</span>
                  </button>
                </form>
              ) : (
                <div className="form-success">
                  <div className="sx-icon">✓</div>
                  <h3>送信ありがとうございました</h3>
                  <p className="form-sub" style={{ marginTop: 12 }}>
                    {data.name} 様<br />
                    2営業日以内に、ご記入いただいたメールアドレスへお返事いたします。<br />
                    急ぎの場合はLINEからもご連絡ください。
                  </p>
                  <button
                    type="button"
                    className="btn btn-primary"
                    style={{ marginTop: 24 }}
                    onClick={() => {
                      setStep(0);
                      setData({ interest: [], name: "", company: "", email: "", message: "" });
                    }}
                  >
                    もう一度送信する
                  </button>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ========== Footer ==========
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="#top" style={{ marginBottom: 18, display: "inline-block" }} aria-label="Gifty">
              <Logo size={36} />
            </a>
            <p style={{ fontSize: 13.5, color: "var(--ink-2)", maxWidth: 380, lineHeight: 1.95, marginTop: 18 }}>
              アイデアと仕組みで、ファンづくりを。生まれた余白で、自由と好きを楽しむ。<br />
              宮崎を拠点に、地域のお店と一緒に歩く伴走パートナー。
            </p>
          </div>
          <div>
            <h4>Service</h4>
            <ul>
              <li><a href="#services">公式LINE構築・運用</a></li>
              <li><a href="#services">Instagram 活用支援</a></li>
              <li><a href="#services">業務効率化・システム</a></li>
            </ul>
          </div>
          <div>
            <h4>About</h4>
            <ul>
              <li><a href="#concept">Concept</a></li>
              <li><a href="#voice">Voice (実績)</a></li>
              <li><a href="#profile">Profile</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="#contact">お問い合わせ</a></li>
              <li><a href="tel:08064795254">080-6479-5254</a></li>
              <li><a href="https://www.instagram.com/gifty_eiki/" target="_blank" rel="noopener noreferrer">Instagram ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Gifty — ODA EIKI</span>
          <span>BASED IN MIYAZAKI, JAPAN</span>
        </div>
      </div>
    </footer>
  );
}

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