// spndly — faq, book, footer

function FAQ() {
  const items = [
    { q: 'What kind of workflows are a good fit?', a: 'Repeatable operational work with documents, data entry, review steps, portals, reports, follow-up, or exception queues. If the same process keeps stalling because people are copying, checking, routing, or assembling information by hand, it is worth mapping.' },
    { q: 'Do we need to replace our current tools?', a: 'Usually no. The point is to connect and automate the tools you already use: email, spreadsheets, storage, internal systems, CRMs, claim tools, EHRs, billing tools, and portals.' },
    { q: 'What if the workflow involves important decisions?', a: 'Then we design for review. Automation can gather, extract, route, draft, and explain; accountable humans still approve decisions, signed outputs, clinical actions, financial actions, and anything compliance-sensitive.' },
    { q: 'Is this just a chatbot?', a: 'No. Most useful automations are not chat. They are intake flows, review queues, alerts, reporting systems, data syncs, document assembly, and follow-up workflows around real operations.' },
    { q: 'How do you handle sensitive data?', a: 'We scope access narrowly, keep review points explicit, and document subprocessors and data handling before an engagement. For regulated workflows, the agreement needs to match the data involved before we touch production information.' },
    { q: 'Can you work under NDA?', a: 'Yes. The public work samples on this site are intentionally broad. Client identity, exact metrics, integrations, and implementation specifics stay private unless written approval says otherwise.' },
    { q: 'Who are you, exactly?', a: 'Spndly is an operations engineering company for healthcare and insurance. We design and build the systems behind document-heavy operations — engineered to integrate with your existing tools and run reliably, not brittle one-off automations — with accountable humans in control wherever judgment, money, or compliance is involved.' },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" id="faq" data-screen-label="06 faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="label-eye">Questions</div>
            <h2 className="h2" style={{ marginTop: 14 }}>What teams ask<br />before we start.</h2>
            <p className="lead" style={{ marginTop: 18 }}>If the workflow is manual, repeatable, and expensive to keep doing by hand, we can usually tell quickly whether automation is worth exploring.</p>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <div className={'faq-item ' + (open === i ? 'open' : '')} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span className="qt">{it.q}</span>
                  <span className="ic">+</span>
                </div>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Book() {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', bottleneck: '', notes: '' });
  const [tools, setTools] = React.useState(['quickbooks']);
  const [submitted, setSubmitted] = React.useState(false);
  const [touched, setTouched] = React.useState({});

  const errs = {
    name: !form.name.trim() ? 'required' : null,
    email: !form.email.trim() ? 'required' : (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email) ? 'invalid format' : null),
    company: !form.company.trim() ? 'required' : null,
    bottleneck: !form.bottleneck ? 'required' : null,
  };
  const valid = !Object.values(errs).some(Boolean);

  const toggleTool = (m) => setTools(ms => ms.includes(m) ? ms.filter(x => x !== m) : [...ms, m]);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const touch = (k) => () => setTouched({ ...touched, [k]: true });

  const submit = () => {
    setTouched({ name: true, email: true, company: true, bottleneck: true });
    if (valid) setSubmitted(true);
  };

  return (
    <section className="section" id="book" data-screen-label="07 book">
      <div className="container">
        <div className="book">
          <div className="book-side">
            <div className="label-eye">Start with one workflow</div>
            <h2 className="h2" style={{ marginTop: 14 }}>Tell us what is still manual.</h2>
            <p>Send the workflow that is slow, expensive, or hard to keep consistent. We will reply with a first-pass read on what should be automated, what should stay reviewed, and what systems need to connect.</p>
            <p style={{ marginTop: 18 }}>If it is not a good fit for automation, we will say so early.</p>
            <div className="book-meta">
              <div><div className="v"><span className="green">ops</span></div><div className="l">workflow first</div></div>
              <div><div className="v"><span className="green">review</span></div><div className="l">where it matters</div></div>
              <div><div className="v"><span className="green">1 day</span></div><div className="l">to our first reply</div></div>
              <div><div className="v"><span className="green">0</span></div><div className="l">platforms to replace</div></div>
            </div>
            <div className="book-talk">
              <p><strong>Prefer to talk it through first?</strong> Book a 30-minute discovery call — no form required.</p>
              <a href="https://cal.com/aarnav-putta-1mvmcz/discovery-call-spndly" target="_blank" rel="noopener noreferrer" className="btn btn-primary">Speak with a founder →</a>
            </div>
          </div>

          <div className="book-form">
            <div className="book-form-head">
              <span>Workflow intake</span>
              <span className="tag tag-green">Ready</span>
            </div>

            {!submitted ? (
              <>
                <div className="book-form-body">
                  <div className="field-row">
                    <div className="field">
                      <label><span>name <span className="req">*</span></span>{touched.name && errs.name && <span className="err">{errs.name}</span>}</label>
                      <input value={form.name} onChange={set('name')} onBlur={touch('name')} placeholder="Jane Smith" className={touched.name && errs.name ? 'invalid' : ''} />
                    </div>
                    <div className="field">
                      <label><span>work email <span className="req">*</span></span>{touched.email && errs.email && <span className="err">{errs.email}</span>}</label>
                      <input value={form.email} onChange={set('email')} onBlur={touch('email')} placeholder="jane@company.com" className={touched.email && errs.email ? 'invalid' : ''} />
                    </div>
                  </div>

                  <div className="field-row">
                    <div className="field">
                      <label><span>business <span className="req">*</span></span>{touched.company && errs.company && <span className="err">{errs.company}</span>}</label>
                      <input value={form.company} onChange={set('company')} onBlur={touch('company')} placeholder="Company name" className={touched.company && errs.company ? 'invalid' : ''} />
                    </div>
                    <div className="field">
                      <label><span>workflow type <span className="req">*</span></span>{touched.bottleneck && errs.bottleneck && <span className="err">{errs.bottleneck}</span>}</label>
                      <select value={form.bottleneck} onChange={set('bottleneck')} onBlur={touch('bottleneck')} className={touched.bottleneck && errs.bottleneck ? 'invalid' : ''}>
                        <option value="">Select one</option>
                        <option>field service / blue-collar ops</option>
                        <option>clinic / healthcare admin</option>
                        <option>document intake</option>
                        <option>claims / case workflow</option>
                        <option>review queue</option>
                        <option>report generation</option>
                        <option>data sync / cleanup</option>
                        <option>billing or follow-up</option>
                        <option>something else</option>
                      </select>
                    </div>
                  </div>

                  <div className="field">
                    <label><span>tools involved <span className="dim">(select any)</span></span></label>
                    <div className="checks">
                      {['gmail / outlook', 'google sheets', 'excel', 'drive / dropbox', 'crm', 'ehr / billing tool', 'claims system', 'internal portal'].map(m => (
                        <span key={m} className={'check-chip ' + (tools.includes(m) ? 'on' : '')} onClick={() => toggleTool(m)}>{m}</span>
                      ))}
                    </div>
                  </div>

                  <div className="field">
                    <label><span>what happens today? <span className="dim">(optional)</span></span></label>
                    <textarea value={form.notes} onChange={set('notes')} placeholder="Example: a file comes in by email, three people copy facts into a sheet, then someone drafts the report by hand."></textarea>
                  </div>
                </div>

                <div className="form-foot">
                  <span className="form-status">Fields marked <span className="green">*</span> are required.</span>
                  <button className="btn btn-accent" onClick={submit}>Send workflow →</button>
                </div>
              </>
            ) : (
              <div className="book-form-body" style={{ minHeight: 360, justifyContent: 'center', alignItems: 'flex-start', gap: 18 }}>
                <div style={{ fontSize: 13, color: 'var(--accent)' }}>✓ got it</div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>thanks, {form.name.split(' ')[0]}.</div>
                <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65 }}>
                  We{"'"}ll send a first-pass workflow read to <span className="green">{form.email}</span> within one business day.<br />
                  If you do not see it, check spam. Sometimes {"\"spndly\""} trips filters.
                </p>
                <button className="btn btn-secondary btn-sm" onClick={() => { setSubmitted(false); setTouched({}); setForm({ name: '', email: '', company: '', bottleneck: '', notes: '' }); }}>Reset</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-screen-label="08 footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-col foot-brand">
            <div className="logo"><SpndlyMark /><span className="logo-word">spndly</span></div>
            <p className="foot-tag">Operations engineering for healthcare and insurance: the systems behind intake, claims, review, reporting, and follow-up — built to run on the infrastructure you already have.</p>
          </div>
          <div className="foot-col">
            <h4>product</h4>
            <ul>
              <li><a href="#how">how it works</a></li>
              <li><a href="#cases">body of work</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>contact</h4>
            <ul>
              <li><a href="mailto:hello@spndly.ai">hello@spndly.ai</a></li>
              <li><a href="https://cal.com/aarnav-putta-1mvmcz/discovery-call-spndly" target="_blank" rel="noopener noreferrer">speak with a founder</a></li>
              <li><a href="#book">map a workflow</a></li>
              <li><a href="/privacy#g">security</a></li>
              <li><a href="/privacy">privacy</a></li>
            </ul>
          </div>
        </div>

        <div className="status-bar">
          <div className="status-pills">
            <span className="tag tag-green">● now onboarding</span>
            <span className="tag">document-heavy ops</span>
            <span className="tag">review-first automation</span>
            <span className="tag">NDA-safe work samples</span>
            <span className="tag">HIPAA-aware · BAA on signed engagements</span>
          </div>
          <div className="foot-legal">
            <span>© 2026 spndly</span>
            <a href="/privacy">privacy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, Book, Footer });