const BUDGETS = ["〜10万", "10 — 20万", "20 — 40万", "40万〜", "未定"];

function Contact() {
  const [form, setForm] = React.useState({
    name: "",
    company: "",
    email: "",
    plan: "",
    budget: "",
    message: "",
  });
  const [sent, setSent] = React.useState(false);

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  function submit(e) {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
  }

  return (
    <section className="section" id="contact">
      <div className="section__inner">
        <div className="section__head">
          <div className="section__index">
            <span>SECTION</span><b>/ 05</b>
          </div>
          <h2 className="section__title">
            お気軽にお問い合わせください。
            <span className="en">Contact</span>
          </h2>
        </div>

        <div className="contact__grid">
          <div className="contact__intro">
            <h3>まずは下記フォームから<br/>ご連絡ください。</h3>
            <p>
              内容を拝見した上で、こちらから打ち合わせのご案内をお送りいたします。
              強引な営業はいたしません。お気軽にどうぞ。
            </p>
            <div className="contact__channels">
              <a className="channel" href="mailto:info@fuji-web-studio.com">
                <span className="ch__label">📧 Email</span>
                <span className="ch__val">info@fuji-web-studio.com</span>
              </a>
              <div className="channel">
                <span className="ch__label">📍 Studio</span>
                <span className="ch__val">奈良市 / オンライン対応</span>
              </div>
            </div>
          </div>

          {sent ? (
            <div className="form">
              <div className="form__success">
                <h4>送信完了しました ✓</h4>
                <p>3営業日以内に <b>{form.email || "ご記入のアドレス"}</b> 宛てに藤本よりご返信いたします。<br/>少々お待ちください。</p>
              </div>
            </div>
          ) : (
            <form className="form" onSubmit={submit}>
              <div className="form__row">
                <div className="field" style={{margin: 0}}>
                  <label>お名前 <span className="req">*必須</span></label>
                  <input value={form.name} onChange={e => set('name', e.target.value)}
                         placeholder="山田 太郎" required />
                </div>
                <div className="field" style={{margin: 0}}>
                  <label>事業者名 <span style={{color: 'var(--sub)'}}>任意</span></label>
                  <input value={form.company} onChange={e => set('company', e.target.value)}
                         placeholder="〇〇行政書士事務所" />
                </div>
              </div>

              <div className="field">
                <label>メールアドレス <span className="req">*必須</span></label>
                <input type="email" value={form.email}
                       onChange={e => set('email', e.target.value)}
                       placeholder="name@example.com" required />
              </div>

              <div className="field">
                <label>ご希望のプラン</label>
                <select value={form.plan} onChange={e => set('plan', e.target.value)}>
                  <option value="">— 選択してください —</option>
                  <option>LP (¥88,000〜)</option>
                  <option>Standard (¥110,000〜)</option>
                  <option>Custom (¥143,000〜)</option>
                  <option>まだ決めていない</option>
                </select>
              </div>

              <div className="field">
                <label>ご予算感</label>
                <div className="budget-row">
                  {BUDGETS.map(b => (
                    <button type="button" key={b}
                            className={`budget-chip ${form.budget === b ? 'is-active' : ''}`}
                            onClick={() => set('budget', b)}>{b}</button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>ご相談内容 <span className="req">*必須</span></label>
                <textarea value={form.message}
                          onChange={e => set('message', e.target.value)}
                          placeholder="現在のサイトの課題や、つくりたいサイトのイメージなど。箇条書きでも大丈夫です。" required></textarea>
              </div>

              <button type="submit" className="form__submit">
                送信する
                <span className="arrow">→</span>
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__top">
          <div className="footer__brand">
            <div style={{display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16}}>
              <FujiMark size={28} />
              <h3 style={{margin: 0}}>FUJI<small style={{fontSize: 13, fontWeight: 400, color: 'var(--sub)', marginLeft: 8, letterSpacing: '0.1em'}}>web studio</small></h3>
            </div>
            <p>奈良市拠点の小さなホームページ制作スタジオ。地元の事業者・士業・個人店主のための、明朗価格 88,000円〜。</p>
            <p className="mono" style={{fontSize: 11, color: 'var(--sub)'}}>〒630-0000 奈良県奈良市 ◯◯町 0-0-0</p>
          </div>
          <div className="footer__col">
            <h5>Sitemap</h5>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#works">Works</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">特定商取引法に基づく表記</a></li>
              <li><a href="#">プライバシーポリシー</a></li>
              <li><a href="#">利用規約</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Connect</h5>
            <ul>
              <li><a href="mailto:hello@fuji.studio">hello@fuji.studio</a></li>
              <li><a href="#">X / Twitter</a></li>
              <li><a href="#">Note</a></li>
              <li><a href="#">GitHub</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 FUJI web studio — Kazuki Fujimoto</span>
          <span>Made in Nara, Japan · 34.68°N 135.80°E</span>
        </div>
      </div>
    </footer>
  );
}

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