// ContactCTA.jsx
// Web3Forms-backed contact form. Get a free access key at https://web3forms.com (no signup needed,
// just enter the destination email and they'll mail you a key). Paste it in WEB3FORMS_ACCESS_KEY below.
const WEB3FORMS_ACCESS_KEY = '82b53d1c-d399-4d7a-9391-67e594bda9f8';

const ContactCTA = ({ onSubmit }) => {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');

  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_ACCESS_KEY,
          subject: 'New inquiry — Constructive Creativity LLC',
          from_name: 'Constructive Creativity Landing',
          name: form.name,
          email: form.email,
          message: form.message,
        }),
      });
      const data = await res.json();
      if (data && data.success) {
        setStatus('sent');
        onSubmit && onSubmit(form);
      } else {
        setStatus('error');
        setErrorMsg((data && data.message) || 'Could not send. Please email us directly.');
      }
    } catch (err) {
      setStatus('error');
      setErrorMsg('Network error. Please email us directly.');
    }
  };

  return (
    <section className="cc-contact" id="contact">
      <div className="cc-contact-inner">
        <h2 className="cc-contact-title">
          <span>Have an idea?</span>
          <span className="cc-contact-italic">Let's build it.</span>
        </h2>
        <p className="cc-contact-text">
          Whether you need a new app from scratch, AI integration, or help getting to the App Store, we'd love to hear from you.
        </p>
        {status === 'sent' ? (
          <div className="cc-contact-thanks">
            <span className="cc-badge-dot" />
            Thanks{form.name ? `, ${form.name.split(' ')[0]}` : ''}. We'll be in touch at <strong>{form.email}</strong>.
          </div>
        ) : (
          <form className="cc-contact-form-card" onSubmit={handleSubmit} noValidate={false}>
            <div className="cc-contact-row">
              <input
                type="text" required name="name" placeholder="Your name"
                autoComplete="name"
                value={form.name} onChange={update('name')}
                className="cc-contact-field"
              />
              <input
                type="email" required name="email" placeholder="you@studio.com"
                autoComplete="email" inputMode="email"
                value={form.email} onChange={update('email')}
                className="cc-contact-field"
              />
            </div>
            <textarea
              required name="message" rows={4}
              placeholder="Tell us about your project — what are you trying to build?"
              value={form.message} onChange={update('message')}
              className="cc-contact-field cc-contact-textarea"
              minLength={10}
            />
            {status === 'error' && (
              <div className="cc-contact-error" role="alert">{errorMsg}</div>
            )}
            <div className="cc-contact-actions">
              <Button variant="primary" disabled={status === 'sending'}>
                {status === 'sending' ? 'Sending…' : (<>Send <Icon name="arrow" size={16} /></>)}
              </Button>
            </div>
          </form>
        )}
        <a href="mailto:constructivecreativityllc@gmail.com" className="cc-contact-mail">
          or email constructivecreativityllc@gmail.com
        </a>
      </div>
    </section>
  );
};
window.ContactCTA = ContactCTA;