// ContactPage.jsx — お問い合わせページ
const ContactPage = ({ onNavigate }) => {
  const [form, setForm] = React.useState({ name: '', email: '', tel: '', category: '', message: '' });
  const [sent, setSent] = React.useState(false);

  const field = { fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#1C1410', background: 'white', border: '1.5px solid #E8E0D8', borderRadius: '8px', padding: '10px 14px', width: '100%', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s' };
  const label = { display: 'block', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 500, color: '#3D3028', marginBottom: '6px', letterSpacing: '0.3px' };

  if (sent) return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ textAlign: 'center', maxWidth: '480px', padding: '0 24px' }}>
        <div style={{ width: '64px', height: '64px', borderRadius: '50%', background: '#E5ECF5', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', fontSize: '28px', color: '#1A3A6E' }}>✓</div>
        <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '28px', fontWeight: 500, color: '#0F2240', marginBottom: '14px' }}>送信しました</h2>
        <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.9, marginBottom: '32px' }}>
          お問い合わせを受け付けました。内容を確認の上、折り返しご連絡いたします。
        </p>
        <button onClick={() => onNavigate('home')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer', padding: '12px 28px', borderRadius: '8px' }}>
          トップに戻る
        </button>
      </div>
    </div>
  );

  return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px' }}>
      <div style={{ background: 'linear-gradient(135deg, #1A3A6E, #3E5C8A)', padding: '64px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#B5C4DB', marginBottom: '14px' }}>Contact</div>
        <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '38px', fontWeight: 500, color: '#FAF6F0' }}>お問い合わせ</h1>
      </div>

      <div style={{ maxWidth: '680px', margin: '0 auto', padding: '64px 24px' }}>
        {/* FAQ誘導 */}
        <div style={{ background: '#E5ECF5', borderRadius: '12px', padding: '16px 20px', marginBottom: '36px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: '#1A3A6E' }}>
            よくあるご質問でお探しの回答が見つかるかもしれません。
          </div>
          <button onClick={() => onNavigate('faq')} style={{ flexShrink: 0, fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 500, background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer', padding: '8px 16px', borderRadius: '6px', marginLeft: '16px' }}>
            FAQを見る →
          </button>
        </div>

        {/* Contact options */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '40px' }}>
          <a href="https://lin.ee/bNXQHpg" target="_blank" rel="noreferrer" style={{ display: 'block', background: '#06C755', borderRadius: '12px', padding: '20px', textDecoration: 'none', textAlign: 'center' }}>
            <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, color: 'white', marginBottom: '4px' }}>LINE で問い合わせる</div>
            <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '11px', fontWeight: 300, color: 'rgba(255,255,255,0.8)' }}>返信が早い場合があります</div>
          </a>
          <div style={{ background: 'white', borderRadius: '12px', padding: '20px', textAlign: 'center', boxShadow: '0 1px 4px rgba(18,42,82,0.06)' }}>
            <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, color: '#1C1410', marginBottom: '4px' }}>お電話</div>
            <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '11px', fontWeight: 300, color: '#A89A90' }}>受付開始後に公開予定</div>
          </div>
        </div>

        {/* Form */}
        <div style={{ background: 'white', borderRadius: '20px', padding: '36px', boxShadow: '0 2px 12px rgba(18,42,82,0.07)' }}>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '20px', fontWeight: 500, color: '#0F2240', marginBottom: '28px' }}>メールフォーム</h2>
          <div style={{ display: 'grid', gap: '18px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
              <div><label style={label}>お名前 <span style={{ color: '#C0392B' }}>*</span></label><input type="text" style={field} placeholder="山田 太郎" value={form.name} onChange={e => setForm({...form, name: e.target.value})} /></div>
              <div><label style={label}>電話番号</label><input type="tel" style={field} placeholder="090-0000-0000" value={form.tel} onChange={e => setForm({...form, tel: e.target.value})} /></div>
            </div>
            <div><label style={label}>メールアドレス <span style={{ color: '#C0392B' }}>*</span></label><input type="email" style={field} placeholder="example@email.com" value={form.email} onChange={e => setForm({...form, email: e.target.value})} /></div>
            <div><label style={label}>お問い合わせ種別</label>
              <select style={field} value={form.category} onChange={e => setForm({...form, category: e.target.value})}>
                <option value="">選択してください</option>
                <option>開園・予約について</option>
                <option>アクセス・駐車場について</option>
                <option>料金・プランについて</option>
                <option>その他</option>
              </select>
            </div>
            <div><label style={label}>お問い合わせ内容 <span style={{ color: '#C0392B' }}>*</span></label><textarea style={{ ...field, height: '100px', resize: 'none' }} placeholder="ご質問・ご要望をご記入ください" value={form.message} onChange={e => setForm({...form, message: e.target.value})} /></div>
          </div>
          <button onClick={() => setSent(true)} style={{ marginTop: '24px', width: '100%', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '15px', fontWeight: 500, background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer', padding: '14px', borderRadius: '8px', transition: 'background 0.2s' }}
            onMouseEnter={e => e.target.style.background = '#122A52'}
            onMouseLeave={e => e.target.style.background = '#1A3A6E'}
          >送信する</button>
        </div>
        <div style={{ marginTop: '24px', display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}>
          <button onClick={() => onNavigate('blueberry')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 500, background: '#fff', color: '#1A3A6E', border: '1.5px solid #C9D5E5', borderRadius: '8px', padding: '12px 18px', cursor: 'pointer' }}>体験内容を見る</button>
          <button onClick={() => onNavigate('access')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 500, background: '#fff', color: '#1A3A6E', border: '1.5px solid #C9D5E5', borderRadius: '8px', padding: '12px 18px', cursor: 'pointer' }}>アクセスを見る</button>
        </div>
      </div>
      <Footer onNavigate={onNavigate} />
    </div>
  );
};

Object.assign(window, { ContactPage });