/* global React, Eyebrow, Button, Icon */
const { useState: useFormState } = React;

// Where booking requests are sent for now (swap for a real endpoint later).
const BOOKING_EMAIL = 'info@fractoservices.com';

function Contact() {
  const [form, setForm] = useFormState({ name: '', email: '', detail: '' });
  const [errors, setErrors] = useFormState({});
  const [sent, setSent] = useFormState(false);
  const set = (k) => (e) => { setForm(f => ({ ...f, [k]: e.target.value })); setErrors(er => ({ ...er, [k]: null })); };
  function submit(e) {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = 'Tell us your name';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = 'Enter a valid work email';
    if (form.detail.trim().length < 8) er.detail = 'A sentence or two helps us prep';
    setErrors(er);
    if (Object.keys(er).length === 0) {
      const subject = `Working session request — ${form.name}`;
      const body =
        `Name: ${form.name}\n` +
        `Work email: ${form.email}\n\n` +
        `What they're building:\n${form.detail}\n`;
      window.location.href =
        `mailto:${BOOKING_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      setSent(true);
    }
  }
  return (
    <section id="contact" className="sec-pad sec-light">
      <div className="wrap contact-grid">
        <div className="reveal" data-reveal>
          <Eyebrow color="#D1006B">Start a project</Eyebrow>
          <h2 className="h2" style={{ marginTop: 14 }}>Book a working session.</h2>
          <p className="lead" style={{ marginTop: 16, maxWidth: 420 }}>
            Thirty minutes with our principal consultants. We'll map your stack and
            leave you with a concrete architecture — no charge, no deck.
          </p>
          <ul className="contact-points">
            <li><Icon name="check" size={15} color="#0B8E97" /> Response within one business day</li>
            <li><Icon name="check" size={15} color="#0B8E97" /> Senior consultants, not a sales team</li>
            <li><Icon name="check" size={15} color="#0B8E97" /> NDA-ready from first contact</li>
          </ul>
        </div>
        <div className="contact-card reveal" data-reveal>
          {sent ? (
            <div className="sent-state">
              <span className="sent-ic"><Icon name="check" size={26} color="#fff" /></span>
              <h4>Email ready to send.</h4>
              <p>Thanks, {form.name.split(' ')[0]}. We've opened a pre-filled email to our team — just hit send and a principal consultant will reply within one business day.</p>
              <Button variant="outline-dark" onClick={() => { setSent(false); setForm({ name: '', email: '', detail: '' }); }}>Send another</Button>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <div className={`field${errors.name ? ' err' : ''}`}>
                <label>Name</label>
                <input className="inp" value={form.name} onChange={set('name')} placeholder="Ada Lovelace" />
                {errors.name && <div className="err-msg">{errors.name}</div>}
              </div>
              <div className={`field${errors.email ? ' err' : ''}`}>
                <label>Work email</label>
                <input className="inp" value={form.email} onChange={set('email')} placeholder="ada@company.com" />
                {errors.email && <div className="err-msg">{errors.email}</div>}
              </div>
              <div className={`field${errors.detail ? ' err' : ''}`}>
                <label>What are you building?</label>
                <textarea className="ta" value={form.detail} onChange={set('detail')} placeholder="Tell us about your data stack and where it hurts…" />
                {errors.detail && <div className="err-msg">{errors.detail}</div>}
              </div>
              <Button variant="primary" size="lg" icon="arrow">Request session</Button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;