function ContactForm({ title, subtitle }) {
  const [sent, setSent] = React.useState(false);
  if (sent) {
    return (
      <section className="fade-in" style={{ padding: '90px 40px', textAlign: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--success-bg)', color: 'var(--success)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
          <i data-lucide="check" style={{ width: 28, height: 28 }}></i>
        </div>
        <h2 style={{ fontSize: 'var(--text-xl)', marginBottom: 8 }}>Thanks — we got it.</h2>
        <p style={{ color: 'var(--text-secondary)' }}>Opus Technology Group will reach out within one business day.</p>
      </section>
    );
  }
  return (
    <section className="fade-in" style={{ padding: '72px 40px', maxWidth: 560, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 32 }}>
        <h2 style={{ fontSize: 'var(--text-2xl)', marginBottom: 8 }}>{title || 'Contact Us'}</h2>
        <p style={{ color: 'var(--text-secondary)', margin: 0 }}>{subtitle || "Tell us what's going on — we'll follow up within one business day."}</p>
      </div>
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 16, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)', padding: 28 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)' }}>Name<input required style={{ font: 'inherit', fontSize: 'var(--text-base)', padding: '9px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)' }} /></label>
          <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)' }}>Company<input style={{ font: 'inherit', fontSize: 'var(--text-base)', padding: '9px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)' }} /></label>
        </div>
        <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)' }}>Email<input type="email" required style={{ font: 'inherit', fontSize: 'var(--text-base)', padding: '9px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)' }} /></label>
        <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)' }}>What do you need help with?
          <select style={{ font: 'inherit', fontSize: 'var(--text-base)', padding: '9px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)' }}>
            <option>Managed IT & Network Support</option><option>Infrastructure & Architecture</option><option>Power Platform & Automation</option><option>AI Integration & Advisory</option><option>Repairs & Troubleshooting</option><option>Something else</option>
          </select>
        </label>
        <label style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)' }}>Message<textarea rows="3" style={{ font: 'inherit', fontSize: 'var(--text-base)', padding: '9px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)', resize: 'vertical' }}></textarea></label>
        <button type="submit" style={{ background: 'var(--navy)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', padding: '11px 18px', fontWeight: 'var(--weight-semibold)', fontSize: 'var(--text-base)', cursor: 'pointer' }}>Send</button>
        <p style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', textAlign: 'center', margin: 0 }}>Prefer to talk it through? Contact for a quote — no pricing surprises.</p>
      </form>
    </section>
  );
}
window.ContactForm = ContactForm;