// 06 Contact — Form
function Contact() {
  const [topic, setTopic] = React.useState('ワークショップ');
  const topics = ['ワークショップ', 'BCP相談', '取材', '登壇依頼', 'その他'];
  return (
    <section className="s tint" id="contact">
      <div className="inner" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <div className="sect-mark reveal" style={{ marginBottom: 56 }}>
          <span>07 / Contact</span><span className="bar" /><span>Get in touch</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 96, alignItems: 'flex-start' }}>
          <div className="reveal">
            <div className="hd" style={{ fontSize: 'clamp(24px, 2.8vw, 40px)', fontWeight: 700, lineHeight: 1.3 }}>
              お問い合わせ
            </div>
            <div style={{ marginTop: 32, fontSize: 15, lineHeight: 2.0, color: 'var(--ink-soft)', maxWidth: 380 }}>
              はじめてのご相談も、お気軽にどうぞ。
            </div>
            <div style={{ marginTop: 56, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-soft)', lineHeight: 2.4, letterSpacing: '0.06em' }}>
              EMAIL — contact@conen.jp<br />
              INSTAGRAM — @conen_jp<br />
              NOTE — note.com/conen
            </div>
          </div>

          <form className="reveal delay-2" onSubmit={(e) => e.preventDefault()}>
            <Field label="お名前" type="text" placeholder="" />
            <Field label="ご所属（任意）" type="text" placeholder="" />
            <Field label="メールアドレス" type="email" placeholder="" />

            <div style={{ marginTop: 36 }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                ご相談内容
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
                {topics.map(t => (
                  <button key={t} type="button" className="hot" onClick={() => setTopic(t)} style={{
                    padding: '10px 18px',
                    border: '0.5px solid ' + (topic === t ? 'var(--ink)' : 'var(--rule)'),
                    borderRadius: 999,
                    background: topic === t ? 'var(--ink)' : 'transparent',
                    color: topic === t ? '#fff' : 'var(--ink-soft)',
                    fontSize: 13, letterSpacing: '0.02em',
                    transition: 'all .25s',
                  }}>{t}</button>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 36 }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                メッセージ
              </div>
              <textarea rows={5} style={{
                width: '100%', marginTop: 12,
                padding: '16px 0',
                border: 'none', borderBottom: '0.5px solid var(--rule)',
                background: 'transparent', resize: 'vertical',
                fontFamily: 'var(--sans)', fontSize: 16, color: 'var(--ink)',
                outline: 'none',
              }} />
            </div>

            <div style={{ marginTop: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.08em' }}>
                通常2-3営業日でご返信します
              </span>
              <button type="submit" className="cta hot">送信する</button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function Field({ label, type, placeholder }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <div style={{ marginTop: 28 }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
        {label}
      </div>
      <input
        type={type} placeholder={placeholder}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{
          width: '100%', marginTop: 10, padding: '12px 0',
          border: 'none',
          borderBottom: '0.5px solid ' + (focus ? 'var(--ink)' : 'var(--rule)'),
          background: 'transparent',
          fontFamily: 'var(--sans)', fontSize: 17, color: 'var(--ink)',
          outline: 'none',
          transition: 'border-color .25s',
        }}
      />
    </div>
  );
}
window.Contact = Contact;