/* global React, ReactDOM, BrandMark, Check */

const PURPOSES = ['まずは話を聞きたい', '料金の見積もりがほしい', '導入について相談したい'];
const SCALES = ['〜10室', '11〜30室', '31〜50室', '51室以上'];
const CHALLENGES = ['OTA手数料・価格競争', '現場の業務負担', 'リピーター・再訪づくり', '宿泊税の対応', '既存システムからの移行'];

function Field({ label, required, children, hint, error }) {
  return (
    <div className="form-field">
      <label className="form-label">
        {label}
        {required && <span className="req">必須</span>}
      </label>
      {children}
      {hint && !error && <div className="form-hint">{hint}</div>}
      {error && <div className="form-error">{error}</div>}
    </div>
  );
}

function RequestForm() {
  const [form, setForm] = React.useState({
    inn: '', location: '', url: '', name: '', email: '', phone: '',
    scale: '', purpose: 'まずは話を聞きたい', challenges: [], message: '', agree: false,
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(false);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggleChallenge = (c) => setForm(f => ({
    ...f,
    challenges: f.challenges.includes(c) ? f.challenges.filter(x => x !== c) : [...f.challenges, c],
  }));

  const validate = () => {
    const e = {};
    if (!form.inn.trim()) e.inn = '宿泊施設名をご入力ください。';
    if (!form.location.trim()) e.location = '宿の所在地をご入力ください。';
    if (!form.name.trim()) e.name = 'ご担当者名をご入力ください。';
    if (!form.email.trim()) e.email = 'メールアドレスをご入力ください。';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'メールアドレスの形式をご確認ください。';
    if (!form.agree) e.agree = 'プライバシーポリシーへの同意が必要です。';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = async (ev) => {
    ev.preventDefault();
    if (!validate()) {
      const first = document.querySelector('.form-error');
      if (first) window.scrollTo({ top: first.getBoundingClientRect().top + window.scrollY - 140, behavior: 'smooth' });
      return;
    }
    setSending(true); setSendError(false);
    // 本番（Vercel）では /api/shiryou がメール送信を担当。
    // ローカルプレビューなど API がない環境では localStorage に保存して完了扱い。
    let ok = false;
    try {
      const r = await fetch('/api/shiryou', {
        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form),
      });
      ok = r.ok;
      if (!ok && r.status !== 404 && r.status !== 405) { setSending(false); setSendError(true); return; }
    } catch (err) { /* API なし環境 → フォールバック */ }
    if (!ok) {
      try {
        const all = JSON.parse(localStorage.getItem('tomarin_requests') || '[]');
        all.push({ ...form, at: new Date().toISOString() });
        localStorage.setItem('tomarin_requests', JSON.stringify(all));
      } catch (err) { /* ignore */ }
    }
    setSending(false);
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (submitted) {
    return (
      <div className="req-done">
        <div className="req-done-mark">
          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <h2>送信が完了しました。</h2>
        <p>
          {form.name} 様、ありがとうございます。<br/>
          <strong>{form.email}</strong> 宛に、受付確認のメールをお送りしました。<br/>
          1営業日以内に、担当者よりご連絡いたします。
        </p>
        <div className="req-done-summary">
          <div className="rds-row"><span>宿泊施設</span><span>{form.inn}</span></div>
          {form.location && <div className="rds-row"><span>所在地</span><span>{form.location}</span></div>}
          <div className="rds-row"><span>ご希望</span><span>{form.purpose}</span></div>
          {form.scale && <div className="rds-row"><span>客室規模</span><span>{form.scale}</span></div>}
        </div>
        <div className="req-done-actions">
          <a href="/tomarin/" className="btn btn-dark btn-lg">トップへ戻る</a>
          <button className="btn btn-outline btn-lg" onClick={() => { setSubmitted(false); setForm({ inn: '', location: '', url: '', name: '', email: '', phone: '', scale: '', purpose: 'まずは話を聞きたい', challenges: [], message: '', agree: false }); }}>続けて入力する</button>
        </div>
      </div>
    );
  }

  return (
    <form className="req-form" onSubmit={onSubmit} noValidate>
      <div className="req-form-head">
        <span className="req-time">入力は約1分</span>
        <span className="req-time-note">1営業日以内にご連絡します</span>
      </div>
      <div className="form-grid">
        <Field label="宿泊施設名" required error={errors.inn}>
          <input className={`form-input ${errors.inn ? 'err' : ''}`} type="text" placeholder="例：山あいの宿 つきのや"
            value={form.inn} onChange={e => set('inn', e.target.value)} />
        </Field>
        <Field label="宿の所在地" required error={errors.location}>
          <input className={`form-input ${errors.location ? 'err' : ''}`} type="text" placeholder="例：北海道 上川郡 東川町"
            value={form.location} onChange={e => set('location', e.target.value)} />
        </Field>
        <Field label="宿のWebサイト・予約ページ" hint="任意。OTAの掲載ページでも構いません。">
          <input className="form-input" type="url" placeholder="https://"
            value={form.url} onChange={e => set('url', e.target.value)} />
        </Field>
        <Field label="ご担当者名" required error={errors.name}>
          <input className={`form-input ${errors.name ? 'err' : ''}`} type="text" placeholder="例：田中 さくら"
            value={form.name} onChange={e => set('name', e.target.value)} />
        </Field>
        <Field label="メールアドレス" required error={errors.email}>
          <input className={`form-input ${errors.email ? 'err' : ''}`} type="email" placeholder="example@inn.jp"
            value={form.email} onChange={e => set('email', e.target.value)} />
        </Field>
        <Field label="電話番号" hint="任意。お急ぎの場合にご連絡します。">
          <input className="form-input" type="tel" placeholder="0166-00-0000"
            value={form.phone} onChange={e => set('phone', e.target.value)} />
        </Field>
      </div>

      <Field label="客室規模" hint="任意。ご提案の参考にします。">
        <div className="chip-group">
          {SCALES.map(s => (
            <button type="button" key={s} className={`select-chip ${form.scale === s ? 'active' : ''}`}
              onClick={() => set('scale', s)}>{s}</button>
          ))}
        </div>
      </Field>

      <Field label="ご希望の内容" required>
        <div className="chip-group">
          {PURPOSES.map(p => (
            <button type="button" key={p} className={`select-chip ${form.purpose === p ? 'active' : ''}`}
              onClick={() => set('purpose', p)}>{p}</button>
          ))}
        </div>
      </Field>

      <Field label="いま感じている課題" hint="複数選択できます（任意）。">
        <div className="chip-group">
          {CHALLENGES.map(c => (
            <button type="button" key={c} className={`select-chip multi ${form.challenges.includes(c) ? 'active' : ''}`}
              onClick={() => toggleChallenge(c)}>
              {form.challenges.includes(c) && <span className="chip-check">✓</span>}
              {c}
            </button>
          ))}
        </div>
      </Field>

      <Field label="ご質問・ご要望" hint="任意。">
        <textarea className="form-input form-textarea" rows={4} placeholder="現在ご利用中のシステムや、特に知りたいことなどがあればご記入ください。"
          value={form.message} onChange={e => set('message', e.target.value)} />
      </Field>

      <div className={`form-agree ${errors.agree ? 'err' : ''}`}>
        <button type="button" className={`agree-box ${form.agree ? 'on' : ''}`} onClick={() => set('agree', !form.agree)} aria-label="同意">
          {form.agree && <Check color="#fff" size={13} />}
        </button>
        <span onClick={() => set('agree', !form.agree)}>
          <a href="https://www.ramps.jp/privacy" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意します。
        </span>
      </div>
      {errors.agree && <div className="form-error" style={{ marginTop: -8 }}>{errors.agree}</div>}

      <button type="submit" className="btn btn-primary btn-xl req-submit" disabled={sending}>{sending ? '送信中…' : '送信する（無料）'}</button>
      {sendError && <div className="form-error" style={{ marginTop: 10 }}>送信に失敗しました。時間をおいて再度お試しいただくか、 tomarin@ramps.jp までご連絡ください。</div>}
      <div className="req-trust">✓ しつこい営業はしません　✓ ご希望がない限りお電話はしません</div>
    </form>
  );
}

function RequestPage() {
  return (
    <>
      <nav className="site-nav scrolled">
        <div className="nav-inner nav-inner-simple">
          <a href="/tomarin/" className="nav-brand">
            <img src="/tomarin/assets/tomarin-logo-cropped.png" alt="tomarin" className="nav-logo-img" />
          </a>
          <a href="/tomarin/" className="nav-back">← トップへ戻る</a>
        </div>
      </nav>

      <main className="req-main">
        <div className="req-shapes">
          <svg style={{ top: '40px', left: '6%' }} width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="26" fill="#F5D938"/></svg>
          <svg style={{ top: '120px', right: '8%' }} width="46" height="46" viewBox="0 0 60 60"><circle cx="30" cy="30" r="24" fill="#9ED4E2"/></svg>
          <svg style={{ bottom: '8%', left: '10%' }} width="38" height="38" viewBox="0 0 60 60"><polygon points="30,6 54,52 6,52" fill="#6FAF2A"/></svg>
        </div>
        <div className="req-wrap">
          <aside className="req-aside">
            <div className="req-eyebrow"><span className="dot" />お問い合わせ（無料）</div>
            <h1 className="req-title">宿のことを、<br/>聞かせてください。</h1>
            <p className="req-lead">
              いただいた内容に合わせて、担当者が1営業日以内にご連絡します。無理な営業はいたしません。
              画面を見ながら詳しく知りたい方は、<a href="/tomarin/demo-yoyaku.html" style={{ color: 'var(--green-text)', fontWeight: 500 }}>オンラインデモのご予約</a>もどうぞ。
            </p>
            <div className="req-doc">
              <div className="req-doc-body">
                <div className="req-doc-title">ご連絡の内容</div>
                <ul className="req-doc-list">
                  <li>宿の状況にあわせた機能のご案内</li>
                  <li>規模に応じたお見積もり</li>
                  <li>導入の流れとスケジュール</li>
                </ul>
              </div>
            </div>
            <ul className="req-points">
              <li><Check color="#6FAF2A" size={15} /><div><strong>初期費用なし</strong><span>規模に合わせて個別にご提案します。</span></div></li>
              <li><Check color="#6FAF2A" size={15} /><div><strong>最短2週間で導入</strong><span>既存データの移行もサポート。</span></div></li>
              <li><Check color="#6FAF2A" size={15} /><div><strong>宿泊税にも標準対応</strong><span>徴収から申告書出力まで。</span></div></li>
            </ul>
            <div className="req-contact">
              <div className="rc-label">直接のお問い合わせ</div>
              <a href="mailto:tomarin@ramps.jp" className="rc-mail">tomarin@ramps.jp</a>
              <div className="rc-org">Ramps 株式会社 · 北海道 上川郡 東川町</div>
            </div>
          </aside>

          <div className="req-card">
            <RequestForm />
          </div>
        </div>
      </main>

      <footer className="req-footer">
        <div className="rf-inner">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <BrandMark size={22} />
            <span>tomarin</span>
          </div>
          <div className="rf-copy">© 2026 Ramps Inc. · 北海道 上川郡 東川町</div>
        </div>
      </footer>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<RequestPage />);