function ContactPage() {
  const [form, setForm] = React.useState({ name:'', email:'', subject:'', message:'' });
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

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

  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { setSent(true); setLoading(false); }, 1200);
  };

  const inputStyle = {
    width:'100%', background:'#fff', border:'2px solid #111', borderRadius:6,
    padding:'14px 16px', fontSize:16, fontFamily:"'DM Sans', sans-serif",
    outline:'none', boxSizing:'border-box',
    transition:'border-color 0.15s',
  };

  return (
    <div style={{ fontFamily:"'DM Sans', sans-serif", paddingTop:64, minHeight:'100vh', background:'#FAF6EE' }}>
      {/* Header */}
      <div style={{ background:'#111', padding:'60px 32px 48px', borderBottom:'3px solid #F5C400' }}>
        <div style={{ maxWidth:1000, margin:'0 auto' }}>
          <p style={{ color:'#F5C400', fontWeight:800, fontSize:12, letterSpacing:3, margin:'0 0 8px' }}>GET IN TOUCH</p>
          <h1 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:72, color:'#fff', margin:0, letterSpacing:-1 }}>CONTACT US</h1>
        </div>
      </div>

      <div style={{ maxWidth:640, margin:'0 auto', padding:'64px 32px' }}>
        {/* Form */}
        <div>
          <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:36, margin:'0 0 8px', color:'#111' }}>SEND A MESSAGE</h2>
          <p style={{ color:'#666', marginBottom:32 }}>We typically respond within 24 hours.</p>

          {sent ? (
            <div style={{ background:'#F5C400', border:'3px solid #111', borderRadius:10, padding:40, textAlign:'center', boxShadow:'4px 4px 0 #111' }}>
              <div style={{ fontSize:56, marginBottom:16 }}>✓</div>
              <h3 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:28, margin:'0 0 8px' }}>MESSAGE SENT!</h3>
              <p style={{ color:'#333', fontSize:16 }}>We'll be in touch within 24 hours.</p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                <div>
                  <label style={{ fontWeight:700, fontSize:13, display:'block', marginBottom:6 }}>Name</label>
                  <input required style={inputStyle} placeholder="Your name" value={form.name} onChange={e => handle('name', e.target.value)} onFocus={e => e.target.style.borderColor='#F5C400'} onBlur={e => e.target.style.borderColor='#111'}/>
                </div>
                <div>
                  <label style={{ fontWeight:700, fontSize:13, display:'block', marginBottom:6 }}>Email</label>
                  <input required type="email" style={inputStyle} placeholder="your@email.com" value={form.email} onChange={e => handle('email', e.target.value)} onFocus={e => e.target.style.borderColor='#F5C400'} onBlur={e => e.target.style.borderColor='#111'}/>
                </div>
              </div>
              <div>
                <label style={{ fontWeight:700, fontSize:13, display:'block', marginBottom:6 }}>Subject</label>
                <select style={{ ...inputStyle, appearance:'none', cursor:'pointer' }} value={form.subject} onChange={e => handle('subject', e.target.value)} required>
                  <option value="">Select a topic…</option>
                  <option>Order inquiry</option>
                  <option>Wholesale / bulk orders</option>
                  <option>Product question</option>
                  <option>Returns & refunds</option>
                  <option>Other</option>
                </select>
              </div>
              <div>
                <label style={{ fontWeight:700, fontSize:13, display:'block', marginBottom:6 }}>Message</label>
                <textarea required rows={6} style={{ ...inputStyle, resize:'vertical' }} placeholder="Tell us what's on your mind…" value={form.message} onChange={e => handle('message', e.target.value)} onFocus={e => e.target.style.borderColor='#F5C400'} onBlur={e => e.target.style.borderColor='#111'}/>
              </div>
              <button type="submit" disabled={loading} style={{
                background: loading ? '#888' : '#111', color:'#F5C400', border:'3px solid #111',
                borderRadius:6, padding:'15px', fontFamily:"'Black Han Sans', Impact, sans-serif",
                fontSize:20, fontWeight:900, cursor: loading ? 'not-allowed' : 'pointer', letterSpacing:1,
                transition:'all 0.15s',
              }}>{loading ? 'SENDING…' : 'SEND MESSAGE →'}</button>
            </form>
          )}
        </div>
      </div>

      <style>{`@media(max-width:700px){ div > div { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

Object.assign(window, { ContactPage });