// sc-contact.jsx — 無料トライアル / お問い合わせ (Formspree)

// ⚠️ Formspree の送信先URLをここで設定してください
// https://formspree.io で登録後、YOUR_FORM_ID を実際のIDに差し替え
const FORMSPREE_URL = "https://formspree.io/f/xojyrzyl";

function ContactPage({ navigate }) {

  const PageHero = () => (
    <section style={{ background: "var(--dark)", padding: "160px 24px 100px", textAlign: "center" }}>
      <AnimateIn>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "20px" }}>Free Trial</p>
        <h1 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(28px,5vw,52px)", fontWeight: 600, color: "#fff", lineHeight: 1.4, marginBottom: "16px" }}>
          １週間<br />無料トライアル
        </h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "15px", color: "rgba(255,255,255,0.5)", marginBottom: "24px", lineHeight: 1.9 }}>
          まずは体感してください。<br />フォームに入力いただくと、担当コーチよりご連絡します。
        </p>
        <GoldLine width="40px" margin="0 auto" />
      </AnimateIn>
    </section>
  );

  /* ── Contact Form ── */
  const ContactForm = () => {
    const [status, setStatus] = React.useState("idle"); // idle | sending | success | error
    const [form, setForm] = React.useState({
      name: "", email: "", phone: "", business: "",
      _honeypot: "", // ボット対策：人間は入力しない隠しフィールド
    });
    const submitTime = React.useRef(Date.now());
    const [errors, setErrors] = React.useState({});

    const validate = () => {
      const e = {};
      if (!form.name.trim()) e.name = "お名前を入力してください";
      if (!form.email.trim()) e.email = "メールアドレスを入力してください";
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "正しいメールアドレスを入力してください";
      if (!form.phone.trim()) e.phone = "電話番号を入力してください";
      if (!form.business) e.business = "事業の状況を選択してください";
      return e;
    };

    const handleChange = (k, v) => {
      setForm(f => ({ ...f, [k]: v }));
      if (errors[k]) setErrors(e => ({ ...e, [k]: undefined }));
    };

    const handleSubmit = async (ev) => {
      ev.preventDefault();
      const e = validate();
      if (Object.keys(e).length > 0) { setErrors(e); return; }
      // ハニーポット：隠しフィールドが埋まっていたらボットとみなす
      if (form._honeypot) { setStatus("success"); return; }
      // 送信が速すぎる場合もボットとみなす（3秒未満）
      if (Date.now() - submitTime.current < 3000) { setStatus("success"); return; }

      setStatus("sending");
      try {
        const res = await fetch(FORMSPREE_URL, {
          method: "POST",
          headers: { "Content-Type": "application/json", "Accept": "application/json" },
          body: JSON.stringify({
            name: form.name,
            email: form.email,
            phone: form.phone || "（未入力）",
            business: form.business,
          }),
        });
        if (res.ok) setStatus("success");
        else setStatus("error");
      } catch {
        setStatus("error");
      }
    };

    const inputStyle = (hasErr) => ({
      width: "100%", fontFamily: "var(--font-sans)", fontSize: "15px",
      color: "var(--text)", background: "#fff",
      border: `1.5px solid ${hasErr ? "#e05252" : "var(--border)"}`,
      borderRadius: "2px", padding: "14px 16px", outline: "none",
      transition: "border-color 0.2s",
    });

    const labelStyle = {
      fontFamily: "var(--font-sans)", fontSize: "13px", fontWeight: 500,
      color: "var(--text)", marginBottom: "8px", display: "flex",
      alignItems: "center", gap: "6px",
    };

    const Required = () => (
      <span style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.06em", color: "#fff", background: "var(--accent)", padding: "2px 6px", borderRadius: "2px" }}>必須</span>
    );
    const Optional = () => (
      <span style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.06em", color: "var(--text-muted)", background: "var(--bg-alt)", padding: "2px 6px", borderRadius: "2px", border: "1px solid var(--border)" }}>任意</span>
    );
    const ErrorMsg = ({ msg }) => msg ? (
      <p style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "#e05252", marginTop: "6px" }}>⚠ {msg}</p>
    ) : null;

    const businessOptions = [
      { value: "before", label: "起業前・準備中" },
      { value: "freelance", label: "起業済み・個人事業主" },
      { value: "corporation", label: "法人経営者" },
    ];

    if (status === "success") {
      return (
        <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
          <div style={{ maxWidth: "560px", margin: "0 auto", textAlign: "center" }}>
            <div style={{ width: "64px", height: "64px", borderRadius: "50%", background: "rgba(196,152,74,0.12)", border: "2px solid var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 28px", fontSize: "24px" }}>✓</div>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>Sent Successfully</p>
            <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(22px,3.5vw,32px)", fontWeight: 600, color: "var(--text)", marginBottom: "20px", lineHeight: 1.55 }}>
              送信が完了しました
            </h2>
            <GoldLine width="40px" margin="0 auto 24px" />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2, marginBottom: "40px" }}>
              ご連絡ありがとうございます。<br />
              担当コーチより、通常1〜2営業日以内にご連絡いたします。<br />
              しばらくお待ちください。
            </p>
            <button onClick={() => navigate("home")} style={{
              fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--accent)",
              background: "transparent", border: "1px solid var(--accent)",
              padding: "12px 32px", borderRadius: "2px", cursor: "pointer",
              letterSpacing: "0.06em",
            }}>ホームへ戻る</button>
          </div>
        </section>
      );
    }

    return (
      <section style={{ background: "var(--bg)", padding: "100px 24px" }}>
        <div style={{ maxWidth: "var(--max-w)", margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "80px", alignItems: "start" }} className="bio-grid">

            {/* Left: explanation */}
            <AnimateIn>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.18em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "16px" }}>Apply Now</p>
              <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(22px,3vw,30px)", fontWeight: 600, color: "var(--text)", lineHeight: 1.6, marginBottom: "24px" }}>
                まずは、<br />無料で試してください。
              </h2>
              <GoldLine width="40px" margin="0 0 28px" />
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2.1, marginBottom: "40px" }}>
                フォームを送信いただくと、担当コーチより通常1〜2営業日以内にご連絡いたします。初回セッションで、現在の状況と課題をお伺いします。
              </p>

              <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
                {[
                  { icon: "📋", text: "タスクの洗い出しとアクションプランを初回で設定" },
                  { icon: "📱", text: "毎日の進捗確認メッセージでサボれない環境を構築" },
                  { icon: "🎯", text: "週次オンラインセッションで方向性を常にアップデート" },
                ].map((item, i) => (
                  <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: "14px" }}>
                    <div style={{ width: "36px", height: "36px", background: "rgba(196,152,74,0.1)", border: "1px solid rgba(196,152,74,0.2)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "15px", flexShrink: 0 }}>{item.icon}</div>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", lineHeight: 1.8, paddingTop: "8px" }}>{item.text}</p>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: "40px", padding: "20px", background: "var(--bg-alt)", border: "1px solid var(--border)", borderLeft: "3px solid var(--accent)" }}>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--text-muted)", lineHeight: 1.9 }}>
                  LINEでのご連絡・ご相談も歓迎しています。<br />
                  <a href={LINE_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)", textDecoration: "none", fontWeight: 500 }}>公式LINEはこちら →</a>
                </p>
              </div>
            </AnimateIn>

            {/* Right: form */}
            <AnimateIn delay={100}>
              <form onSubmit={handleSubmit} noValidate style={{
                background: "#fff", border: "1px solid var(--border)",
                padding: "48px 40px",
              }}>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.18em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "28px" }}>Contact Form</p>

                {/* ハニーポット：CSSで完全非表示 — ボットのみ入力する */}
                <div style={{ position: "absolute", left: "-9999px", opacity: 0, pointerEvents: "none" }} aria-hidden="true">
                  <label htmlFor="hp_website">ウェブサイト（入力しないでください）</label>
                  <input id="hp_website" type="text" name="website" tabIndex={-1} autoComplete="off"
                    value={form._honeypot} onChange={e => handleChange("_honeypot", e.target.value)} />
                </div>

                {/* お名前 */}
                <div style={{ marginBottom: "24px" }}>
                  <label style={labelStyle}>お名前 <Required /></label>
                  <input
                    type="text" placeholder="山田 太郎"
                    value={form.name} onChange={e => handleChange("name", e.target.value)}
                    style={inputStyle(errors.name)}
                    onFocus={e => e.target.style.borderColor = "var(--accent)"}
                    onBlur={e => e.target.style.borderColor = errors.name ? "#e05252" : "var(--border)"}
                  />
                  <ErrorMsg msg={errors.name} />
                </div>

                {/* メール */}
                <div style={{ marginBottom: "24px" }}>
                  <label style={labelStyle}>メールアドレス <Required /></label>
                  <input
                    type="email" placeholder="example@email.com"
                    value={form.email} onChange={e => handleChange("email", e.target.value)}
                    style={inputStyle(errors.email)}
                    onFocus={e => e.target.style.borderColor = "var(--accent)"}
                    onBlur={e => e.target.style.borderColor = errors.email ? "#e05252" : "var(--border)"}
                  />
                  <ErrorMsg msg={errors.email} />
                </div>

                {/* 電話番号 */}
                <div style={{ marginBottom: "24px" }}>
                  <label style={labelStyle}>電話番号 <Required /></label>
                  <input
                    type="tel" placeholder="090-0000-0000"
                    value={form.phone} onChange={e => handleChange("phone", e.target.value)}
                    style={inputStyle(errors.phone)}
                    onFocus={e => e.target.style.borderColor = "var(--accent)"}
                    onFocus={e => e.target.style.borderColor = "var(--accent)"}
                    onBlur={e => e.target.style.borderColor = errors.phone ? "#e05252" : "var(--border)"}
                  />
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", color: "var(--text-muted)", marginTop: "5px" }}>日程調整のご連絡に使用します</p>
                  <ErrorMsg msg={errors.phone} />
                </div>

                {/* 事業の状況 */}
                <div style={{ marginBottom: "32px" }}>
                  <label style={labelStyle}>事業の状況 <Required /></label>
                  <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
                    {businessOptions.map(opt => (
                      <label key={opt.value} style={{
                        display: "flex", alignItems: "center", gap: "12px",
                        padding: "14px 16px", cursor: "pointer",
                        border: `1.5px solid ${form.business === opt.value ? "var(--accent)" : "var(--border)"}`,
                        background: form.business === opt.value ? "rgba(196,152,74,0.05)" : "#fff",
                        transition: "all 0.2s",
                      }}>
                        <div style={{
                          width: "18px", height: "18px", borderRadius: "50%", flexShrink: 0,
                          border: `2px solid ${form.business === opt.value ? "var(--accent)" : "var(--border)"}`,
                          background: form.business === opt.value ? "var(--accent)" : "transparent",
                          display: "flex", alignItems: "center", justifyContent: "center",
                          transition: "all 0.2s",
                        }}>
                          {form.business === opt.value && <div style={{ width: "6px", height: "6px", borderRadius: "50%", background: "#fff" }} />}
                        </div>
                        <input type="radio" name="business" value={opt.value}
                          checked={form.business === opt.value}
                          onChange={() => handleChange("business", opt.value)}
                          style={{ display: "none" }} />
                        <span style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text)" }}>{opt.label}</span>
                      </label>
                    ))}
                  </div>
                  <ErrorMsg msg={errors.business} />
                </div>

                {/* Submit */}
                <button type="submit" disabled={status === "sending"} style={{
                  width: "100%", padding: "17px", background: "var(--accent)",
                  color: "#fff", border: "none", borderRadius: "2px",
                  fontFamily: "var(--font-sans)", fontSize: "15px", fontWeight: 500,
                  letterSpacing: "0.06em", cursor: status === "sending" ? "not-allowed" : "pointer",
                  opacity: status === "sending" ? 0.7 : 1,
                  transition: "all 0.25s",
                }}
                  onMouseEnter={e => { if (status !== "sending") e.currentTarget.style.opacity = "0.85"; }}
                  onMouseLeave={e => { if (status !== "sending") e.currentTarget.style.opacity = "1"; }}
                >
                  {status === "sending" ? "送信中…" : "無料トライアルに申し込む →"}
                </button>

                {status === "error" && (
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "#e05252", marginTop: "12px", textAlign: "center" }}>
                    送信に失敗しました。時間をおいて再度お試しください。
                  </p>
                )}

                <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", color: "var(--text-muted)", marginTop: "16px", textAlign: "center", lineHeight: 1.8 }}>
                  送信後、1〜2営業日以内にご連絡します。<br />
                  <a href="https://spotter-coaching.com/policy/" style={{ color: "var(--accent)", textDecoration: "none" }}>プライバシーポリシー</a>に同意の上、送信してください。
                </p>
              </form>
            </AnimateIn>
          </div>
        </div>
      </section>
    );
  };

  const FAQ = () => {
    const [open, setOpen] = React.useState(null);
    const faqs = [
      { q: "無料トライアルに費用はかかりますか？", a: "1週間の無料トライアルは完全無料です。費用は一切かかりません。トライアル終了後、継続をご希望の場合のみ、別途ご案内いたします。" },
      { q: "どのような方が対象ですか？", a: "起業家、経営者、個人事業主、副業で事業を進めている方など、ビジネスを前進させたい方であれば幅広く対応しています。事業規模は問いません。" },
      { q: "連絡はメール以外でも可能ですか？", a: "メール、LINE、電話など、ご都合に合わせた方法でご対応しています。ご希望の連絡方法をお知らせください。" },
      { q: "オンラインセッションの所要時間は？", a: "1回あたり60〜90分程度を目安にしています。状況に応じて柔軟に対応しています。" },
      { q: "IT・パソコンが苦手でも大丈夫ですか？", a: "もちろんです。ツールの使い方から丁寧にサポートします。ITが苦手な方でも安心してご利用いただけます。" },
    ];
    return (
      <section style={{ background: "var(--bg-alt)", padding: "100px 24px" }}>
        <div style={{ maxWidth: "720px", margin: "0 auto" }}>
          <AnimateIn><SectionHeader label="FAQ" title="よくあるご質問" /></AnimateIn>
          {faqs.map((f, i) => (
            <AnimateIn key={f.q} delay={i * 40}>
              <div style={{ borderBottom: "1px solid var(--border)", overflow: "hidden" }}>
                <button onClick={() => setOpen(open === i ? null : i)} style={{
                  width: "100%", textAlign: "left", background: "none", border: "none",
                  padding: "22px 0", cursor: "pointer",
                  display: "flex", justifyContent: "space-between", alignItems: "center", gap: "16px",
                }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: "15px", fontWeight: 500, color: "var(--text)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--accent)", marginRight: "10px", fontSize: "13px" }}>Q.</span>{f.q}
                  </span>
                  <span style={{ color: "var(--accent)", fontSize: "18px", flexShrink: 0, transition: "transform 0.3s", transform: open === i ? "rotate(45deg)" : "none", display: "inline-block" }}>+</span>
                </button>
                <div style={{ maxHeight: open === i ? "300px" : "0", overflow: "hidden", transition: "max-height 0.4s ease" }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2, paddingBottom: "22px", paddingLeft: "22px" }}>
                    <span style={{ color: "var(--accent)", marginRight: "8px", fontSize: "13px" }}>A.</span>{f.a}
                  </p>
                </div>
              </div>
            </AnimateIn>
          ))}
        </div>
      </section>
    );
  };

  return (
    <div>
      <PageHero />
      <ContactForm />
      <FAQ />
      <CtaSection title="一歩踏み出すのは、今日がいちばん早い。" sub="1週間の無料トライアルで、変化を実感してください。" />
    </div>
  );
}

window.ContactPage = ContactPage;