'use client'
import { useState } from 'react'

export default function ContactForm() {
  const [sent, setSent] = useState(false)
  const [form, setForm] = useState({ name: '', email: '', phone: '', message: '' })

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSent(true)
  }

  if (sent) return (
    <div className="card" style={{ padding: '2rem', textAlign: 'center' }}>
      <div style={{ fontSize: 40, marginBottom: 12 }}>✅</div>
      <h3 style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>Message received!</h3>
      <p style={{ fontSize: 13, color: 'var(--body)' }}>We'll get back to you within 24 hours.</p>
    </div>
  )

  const inputStyle = {
    width: '100%', padding: '10px 14px', borderRadius: 8,
    border: '0.5px solid var(--border)', background: 'var(--card-bg)',
    color: 'var(--heading)', fontSize: 13, outline: 'none',
    transition: 'border-color 0.15s',
  }
  const labelStyle = { fontSize: 12, fontWeight: 500, color: 'var(--heading)', display: 'block', marginBottom: 5 }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div>
          <label style={labelStyle}>Name *</label>
          <input required style={inputStyle} placeholder="Your name" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
        </div>
        <div>
          <label style={labelStyle}>Phone / WhatsApp</label>
          <input style={inputStyle} placeholder="+65 9XXX XXXX" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} />
        </div>
      </div>
      <div>
        <label style={labelStyle}>Email *</label>
        <input required type="email" style={inputStyle} placeholder="you@email.com" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
      </div>
      <div>
        <label style={labelStyle}>Message *</label>
        <textarea required rows={5} style={{ ...inputStyle, resize: 'vertical' }} placeholder="Tell us about your storeroom — size, BTO estate, any special requirements..." value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
      </div>
      <button type="submit" className="btn-primary" style={{ alignSelf: 'flex-start' }}>Send Message</button>
    </form>
  )
}