// ContactForm.jsx — SMTP via /api/contact serverless function
const ContactForm = () => {
  const [state, setState] = React.useState({ name: '', email: '', message: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const change = (e) => setState(s => ({ ...s, [e.target.name]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(state),
      });

      if (res.ok) {
        setStatus('sent');
        setState({ name: '', email: '', message: '' });
        setTimeout(() => setStatus('idle'), 5000);
      } else {
        setStatus('error');
        setTimeout(() => setStatus('idle'), 4000);
      }
    } catch {
      setStatus('error');
      setTimeout(() => setStatus('idle'), 4000);
    }
  };

  const isSending = status === 'sending';
  const isSent    = status === 'sent';
  const isError   = status === 'error';

  return (
    <div className="contact-grid">
      <div className="contact-info">
        <div className="eyebrow">Get in touch</div>
        <h3>Let's build something<br/><span className="grad-text">worth shipping.</span></h3>
        <p>Have a project in mind? Tell us about it — we'll reply within a working day.</p>
        <ul className="contact-details">
          <li><Icon name="mail"    size={18}/><span>sanmeet@devnityco.com</span></li>
          <li><Icon name="map-pin" size={18}/><span>Aurangabad (India) · Dubai (UAE)</span></li>
          <li><Icon name="clock"   size={18}/><span>Mon – Fri · 9:00 AM – 6:00 PM</span></li>
        </ul>
      </div>

      <form className="contact-form" onSubmit={submit}>
        <label>
          Name
          <input name="name" value={state.name} onChange={change} placeholder="Your name" required disabled={isSending}/>
        </label>
        <label>
          Email
          <input name="email" type="email" value={state.email} onChange={change} placeholder="your@email.com" required disabled={isSending}/>
        </label>
        <label>
          Message
          <textarea name="message" rows="4" value={state.message} onChange={change} placeholder="What are you building?" required disabled={isSending}/>
        </label>

        {isError && (
          <p style={{color:'#F24E5C', fontSize:'13px', margin:'0'}}>
            Something went wrong — please try again or email us directly.
          </p>
        )}

        <Button
          variant="primary"
          size="md"
          iconRight={isSent ? 'check' : 'arrow-right'}
          disabled={isSending || isSent}
        >
          {isSending ? 'Sending…' : isSent ? 'Message sent!' : 'Send message'}
        </Button>
      </form>
    </div>
  );
};
window.ContactForm = ContactForm;