/* SetOne Labs — Contact form section */
const NSC = window.SetOneLabsDesignSystem_88261c;

const WORKSTREAMS = [
  'Financial modeling', 'Valuation', 'Fundraising',
  'Investor materials', 'Market research', 'Transaction support',
];

function Contact() {
  const { Kicker, Input, Tag, Checkbox, Button, Icon } = NSC;
  const [form, setForm] = React.useState({ name: '', email: '', firm: '', message: '' });
  const [streams, setStreams] = React.useState([]);
  const [nda, setNda] = React.useState(false);
  const [touched, setTouched] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
  const errors = {
    name: !form.name.trim() ? 'Please tell us your name.' : null,
    email: !form.email.trim() ? 'A work email is required.' : (!emailOk ? 'Enter a valid email address.' : null),
  };
  const valid = !errors.name && !errors.email;

  const toggleStream = (s) =>
    setStreams((arr) => arr.includes(s) ? arr.filter((x) => x !== s) : [...arr, s]);

  const submit = (e) => {
    e.preventDefault();
    setTouched(true);
    if (!valid) return;
    setSent(true);
  };

  return (
    <section className="section contact" id="contact">
      <div className="container contact__in">
        <div className="contact__pitch" data-reveal>
          <Kicker number={4}>Get in touch</Kicker>
          <h2>Request a scoped proposal.</h2>
          <p>Tell us your priorities — active deals, a fundraise, a model that needs hardening — and we'll send a scoped proposal, typically within two business days. Every engagement begins with a confidential conversation.</p>
          <ul className="contact__direct">
            <li><Icon name="mail" size={18} color="var(--teal-600)" /><a href="mailto:hello@setonelabs.com">hello@setonelabs.com</a></li>
            <li><Icon name="calendar" size={18} color="var(--teal-600)" /><a href="#">Book a 30-minute intro call</a></li>
            <li><Icon name="lock" size={18} color="var(--teal-600)" /><span>NDA available on request — engagements are kept confidential.</span></li>
          </ul>
        </div>

        <div className="contact__card" data-reveal style={{ '--reveal-delay': '90ms' }}>
          {sent ? (
            <div className="contact__success">
              <span className="contact__check"><Icon name="check" size={28} color="#fff" /></span>
              <h3>Thank you — your request is in.</h3>
              <p>We'll review your priorities and reply to <strong>{form.email}</strong> with next steps, usually within two business days.</p>
              <Button variant="secondary" iconLeft="rotate-ccw" onClick={() => { setSent(false); setForm({ name: '', email: '', firm: '', message: '' }); setStreams([]); setNda(false); setTouched(false); }}>Send another request</Button>
            </div>
          ) : (
            <form className="contact__form" onSubmit={submit} noValidate>
              <div className="contact__row2">
                <Input label="Name" placeholder="Your name" value={form.name} onChange={set('name')} iconLeft="user" error={touched ? errors.name : null} />
                <Input label="Work email" type="email" placeholder="you@fund.com" value={form.email} onChange={set('email')} iconLeft="mail" error={touched ? errors.email : null} />
              </div>
              <Input label="Firm or fund" placeholder="Legal entity name" value={form.firm} onChange={set('firm')} iconLeft="building-2" hint="Optional — kept confidential." />

              <div className="contact__field">
                <span className="contact__label">Where can we help?</span>
                <div className="contact__tags">
                  {WORKSTREAMS.map((s) => (
                    <Tag key={s} clickable active={streams.includes(s)} onClick={() => toggleStream(s)}>{s}</Tag>
                  ))}
                </div>
              </div>

              <div className="contact__field">
                <label className="contact__label" htmlFor="c-msg">What are you trying to get done?</label>
                <textarea id="c-msg" className="so-input contact__textarea" rows={4} placeholder="Active deals, a fundraise, a model that needs hardening…" value={form.message} onChange={set('message')} />
              </div>

              <Checkbox label="Send me a mutual NDA before we talk." checked={nda} onChange={(e) => setNda(e.target.checked)} />

              <Button type="submit" variant="accent" size="lg" fullWidth iconRight="arrow-right">Send request</Button>
              <p className="contact__fine">By submitting, you agree to be contacted about your inquiry. We never share your information.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

window.SO_SITE = window.SO_SITE || {};
Object.assign(window.SO_SITE, { Contact });