/* Talk to us: book a call or send a request about one or more modules.
   No account needed. For the sensitive modules the third tier of the
   questionnaire (org structure, compensation, financials, deal material)
   opens only after the mutual NDA is signed on this page or the prospect
   uploads their own template. The record id plus the email are the key to
   coming back to it. */

function InquiryPage({ initialModule }) {
  const resumeId = initialModule && initialModule.startsWith('inq_') ? initialModule : '';
  const [opts, setOpts] = React.useState(null);
  const [step, setStep] = React.useState(resumeId ? 'resume' : 'modules');
  const [modules, setModules] = React.useState(initialModule && initialModule !== '1' && !resumeId ? [initialModule] : []);
  const [resumeEmail, setResumeEmail] = React.useState(resumeId ? (readInquiryEmail(resumeId) || '') : '');
  const [resumeError, setResumeError] = React.useState('');
  const [path, setPath] = React.useState('call');
  const [contact, setContact] = React.useState({ name: '', email: '', company: '', role: '', phone: '' });
  const [call, setCall] = React.useState({ preferred_times: ['', ''], timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || '', length: '30 minutes', notes: '' });
  const [tiers, setTiers] = React.useState({ 1: {}, 2: {}, 3: {} });
  const [inq, setInq] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  React.useEffect(() => { lojo('', { module: 'inquiry', action: 'options' }).then((d) => { if (d.ok) setOpts(d); else setError(d.message || 'Not available right now.'); }); }, []);
  if (error && !opts) return <div className="wrap" style={{ padding: '80px var(--s6)', color: 'var(--fg-muted)' }}>{error}</div>;
  if (!opts) return <div className="wrap" style={{ padding: '80px var(--s6)', color: 'var(--fg-subtle)' }}>Loading…</div>;
  const sensitive = modules.some((m) => opts.modules.find((x) => x.id === m && x.sensitive));
  const toggle = (id) => setModules(modules.includes(id) ? modules.filter((x) => x !== id) : [...modules, id]);
  const labels = (ids) => ids.map((id) => (opts.modules.find((x) => x.id === id) || {}).label || id).join(', ');

  const submit = async () => {
    setBusy(true); setError('');
    const payload = { module: 'inquiry', action: 'create', kind: path, modules, contact, source: 'app',
      call: path === 'call' ? { ...call, preferred_times: call.preferred_times.filter(Boolean) } : undefined,
      tiers: path === 'questionnaire' ? { 1: tiers[1], 2: tiers[2] } : undefined };
    const d = await lojo('', payload);
    setBusy(false);
    if (!d.ok) { setError(d.message || Object.values(d.errors || {}).join(' ') || 'That did not go through.'); return; }
    setInq(d.inquiry);
    setStep(path === 'questionnaire' && d.inquiry.needs_nda ? 'nda' : 'done');
  };

  const shell = (children) => (
    <div className="wrap" style={{ maxWidth: 820, padding: '40px var(--s6) 100px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}><a href="/" style={{ display: 'inline-flex' }}><Wordmark size={16} /></a><a href="/app/?demo=1" style={{ color: 'var(--accent)', fontSize: 13.5 }}>Back to the demo</a></div>
      <div className="overline" style={{ marginBottom: 8 }}>Talk to us</div>
      <h1 className="display" style={{ fontSize: 'clamp(26px,4vw,38px)', margin: '0 0 8px' }}>Implementing a Lojo module</h1>
      <p style={{ color: 'var(--fg-muted)', fontSize: 15, lineHeight: 1.6, margin: '0 0 6px', maxWidth: 680 }}>Book a 30-minute call with the founders, or send a request with as much detail as you want to share. Either way we reply within one business day.</p>
      <p style={{ color: 'var(--warn)', fontSize: 13.5, lineHeight: 1.6, margin: '0 0 24px', maxWidth: 680 }}>{opts.beta_pricing}</p>
      <Steps current={step} path={path} sensitive={sensitive} />
      {children}
    </div>);

  // Coming back to an existing request (from the analysis page) to sign the NDA or add sensitive detail.
  const resume = async () => {
    const em = resumeEmail.trim().toLowerCase();
    const d = await lojo('', { module: 'inquiry', action: 'get', id: resumeId, email: em });
    if (!d.ok) { setResumeError(d.status === 403 ? 'That email does not match this request.' : (d.message || 'Could not open the request.')); return; }
    writeInquiryEmail(resumeId, em);
    setInq(d.inquiry); setModules(d.inquiry.modules); setContact({ ...contact, ...d.inquiry.contact }); setPath('questionnaire');
    setStep(d.inquiry.needs_nda && !d.inquiry.nda_ok ? 'nda' : (d.inquiry.needs_nda ? 'tier3' : 'done'));
  };
  if (step === 'resume') return shell(
    <div className="app-panel" style={{ maxWidth: 480 }}>
      <h3>Continue your request</h3>
      <div style={{ fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.6, marginBottom: 10 }}>Enter the email on request <span className="mono">{resumeId}</span> to sign the NDA or add sensitive detail.</div>
      {resumeError && <div className="flash warn">{resumeError}</div>}
      <Field label="Email on the request"><Input type="email" value={resumeEmail} onChange={(e) => setResumeEmail(e.target.value)} /></Field>
      <button className="btn btn-primary" disabled={!resumeEmail.includes('@')} onClick={resume}>Continue</button>
    </div>);
  if (step === 'done' && inq) return shell(<Done inq={inq} labels={labels} />);
  if (step === 'nda' && inq) return shell(<NdaStep inq={inq} opts={opts} contact={contact} onDone={(updated) => { setInq(updated); setStep('tier3'); }} onSkip={() => setStep('done')} />);
  if (step === 'tier3' && inq) return shell(<Tier3Step inq={inq} opts={opts} onDone={(updated) => { setInq(updated); setStep('done'); }} />);

  return shell(
    <div>
      <div className="app-panel" style={{ marginBottom: 14 }}>
        <h3>Which modules?</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 8 }}>
          {opts.modules.map((m) => <label key={m.id} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '10px 12px', borderRadius: 'var(--r-md)', border: '1px solid ' + (modules.includes(m.id) ? 'var(--accent)' : 'var(--line)'), background: 'var(--navy)', cursor: 'pointer', fontSize: 14 }}>
            <input type="checkbox" checked={modules.includes(m.id)} onChange={() => toggle(m.id)} style={{ marginTop: 3 }} />
            <span>{m.label}{m.sensitive && <span className="mono" style={{ display: 'block', fontSize: 10, color: 'var(--fg-subtle)', letterSpacing: '0.08em', marginTop: 2 }}>SENSITIVE · NDA FOR DETAIL</span>}</span></label>)}
        </div>
        {sensitive && <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 10, lineHeight: 1.5 }}>You chose a module that works on sensitive material. Nothing sensitive is asked for until a mutual NDA is in place; you can sign ours on this page or upload your own.</div>}
      </div>
      <div className="app-panel" style={{ marginBottom: 14 }}>
        <h3>How would you like to proceed?</h3>
        <div className="app-grid cols-2">
          {[['call', 'Book a call', 'Thirty minutes with Adi Malik or Jeremy Sebben. We confirm two or three times by email within one business day.'],
            ['questionnaire', 'Send a request', 'Answer in tiers: the basics, how you operate, and (under NDA) the sensitive detail. We reply with questions, a proposal or a call.']].map(([id, t, d]) =>
          <button key={id} onClick={() => setPath(id)} style={{ textAlign: 'left', padding: 14, borderRadius: 'var(--r-md)', border: '1px solid ' + (path === id ? 'var(--accent)' : 'var(--line)'), background: path === id ? 'color-mix(in oklab, var(--accent) 8%, var(--navy))' : 'var(--navy)', color: 'var(--fg)', cursor: 'pointer', font: 'inherit' }}>
            <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>{t}</div><div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.5 }}>{d}</div></button>)}
        </div>
      </div>
      <div className="app-panel" style={{ marginBottom: 14 }}>
        <h3>About you</h3>
        <div className="app-grid cols-2">
          <Field label="Your name"><Input value={contact.name} onChange={(e) => setContact({ ...contact, name: e.target.value })} required /></Field>
          <Field label="Work email"><Input type="email" value={contact.email} onChange={(e) => setContact({ ...contact, email: e.target.value })} required /></Field>
          <Field label="Company"><Input value={contact.company} onChange={(e) => setContact({ ...contact, company: e.target.value })} /></Field>
          <Field label="Your role"><Input value={contact.role} onChange={(e) => setContact({ ...contact, role: e.target.value })} /></Field>
        </div>
      </div>
      {path === 'call' ? <div className="app-panel" style={{ marginBottom: 14 }}>
        <h3>The call</h3>
        <div className="app-grid cols-2">
          <Field label="A time that suits you" hint="Day and time, e.g. Tuesday 10am"><Input value={call.preferred_times[0]} onChange={(e) => setCall({ ...call, preferred_times: [e.target.value, call.preferred_times[1]] })} /></Field>
          <Field label="A second option"><Input value={call.preferred_times[1]} onChange={(e) => setCall({ ...call, preferred_times: [call.preferred_times[0], e.target.value] })} /></Field>
          <Field label="Your timezone"><Input value={call.timezone} onChange={(e) => setCall({ ...call, timezone: e.target.value })} /></Field>
          <Field label="Length"><Select value={call.length} onChange={(v) => setCall({ ...call, length: v })} options={['30 minutes', '45 minutes', '60 minutes']} /></Field>
        </div>
        <Field label="Anything we should know before the call"><textarea className="app-input" rows={3} value={call.notes} onChange={(e) => setCall({ ...call, notes: e.target.value })} /></Field>
      </div> : <div>
        {[1, 2].map((t) => <TierPanel key={t} tier={opts.tiers[t]} n={t} value={tiers[t]} onChange={(v) => setTiers({ ...tiers, [t]: v })} />)}
        {sensitive && <div className="app-panel" style={{ marginBottom: 14, borderStyle: 'dashed' }}><h3>Tier 3 · {opts.tiers[3].title}</h3><div style={{ fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.6 }}>{opts.tiers[3].intro} The NDA step comes next; tier 3 opens after it.</div></div>}
      </div>}
      {error && <div className="flash warn">{error}</div>}
      <button className="btn btn-primary btn-lg" disabled={busy || !modules.length || !contact.name || !contact.email} onClick={submit}>{busy ? 'Sending…' : path === 'call' ? 'Request the call' : sensitive ? 'Continue to the NDA' : 'Send the request'} <Icon name="arrow-right" size={18} /></button>
      <div style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 10, lineHeight: 1.6 }}>What you send here is seen only by the Lojo founders and used only to prepare for the conversation. No sensitive material is requested before an NDA.</div>
    </div>);
}

function Steps({ current, path, sensitive }) {
  const steps = path === 'call' ? [['modules', 'Request'], ['done', 'Confirmed']] : sensitive ? [['modules', 'Request'], ['nda', 'NDA'], ['tier3', 'Sensitive detail'], ['done', 'Confirmed']] : [['modules', 'Request'], ['done', 'Confirmed']];
  const idx = steps.findIndex(([id]) => id === current);
  return <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 18 }}>{steps.map(([id, l], i) => <span key={id} className="chip" style={{ borderColor: i <= idx ? 'var(--accent)' : 'var(--line)', color: i <= idx ? 'var(--accent)' : 'var(--fg-subtle)' }}>{i + 1}. {l}</span>)}</div>;
}

function TierPanel({ tier, n, value, onChange, readOnlyNote }) {
  return (
    <div className="app-panel" style={{ marginBottom: 14 }}>
      <h3>Tier {n} · {tier.title}</h3>
      <div style={{ fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.6, marginBottom: 10 }}>{tier.intro}{readOnlyNote}</div>
      {tier.questions.filter((q) => q.type !== 'upload').map((q) => <div key={q.id} className="q-card">
        <div style={{ fontSize: 14.5, fontWeight: 600, marginBottom: 6 }}>{q.text}{q.required && <span style={{ color: 'var(--accent)' }}> *</span>}</div>
        {q.type === 'choice' ? <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>{q.options.map((o) => <button key={o} className={'app-btn small' + (value[q.id] === o ? ' primary' : '')} onClick={() => onChange({ ...value, [q.id]: o })}>{o}</button>)}</div>
          : q.type === 'list' ? <textarea className="app-input" rows={3} placeholder="One per line" value={Array.isArray(value[q.id]) ? value[q.id].join('\n') : (value[q.id] || '')} onChange={(e) => onChange({ ...value, [q.id]: e.target.value })} />
          : <textarea className="app-input" rows={2} value={value[q.id] || ''} onChange={(e) => onChange({ ...value, [q.id]: e.target.value })} />}
      </div>)}
    </div>);
}

function NdaStep({ inq, opts, contact, onDone, onSkip }) {
  const [mode, setMode] = React.useState('ours');
  const [text, setText] = React.useState('');
  const [sig, setSig] = React.useState({ name: contact.name || '', title: '', company: contact.company || '', email: contact.email || '', agree: false });
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const [showFull, setShowFull] = React.useState(false);
  React.useEffect(() => { lojo('', { module: 'inquiry', action: 'nda-text', id: inq.id, email: inq.contact.email, company: sig.company, name: sig.name, title: sig.title }).then((d) => { if (d.ok) setText(d.text); }); }, [sig.company, sig.name, sig.title]);
  const sign = async () => {
    setBusy(true); setError('');
    const d = await lojo('', { module: 'inquiry', action: 'nda-sign', id: inq.id, email: inq.contact.email, ...sig });
    setBusy(false);
    if (!d.ok) { setError(d.message || Object.values(d.errors || {}).join(' ')); return; }
    onDone(d.inquiry);
  };
  const upload = async (file) => {
    setBusy(true); setError('');
    const b64 = await fileToBase64(file);
    const d = await lojo('', { module: 'inquiry', action: 'nda-upload', id: inq.id, email: inq.contact.email, filename: file.name, content_type: file.type || 'application/octet-stream', content_base64: b64 });
    setBusy(false);
    if (!d.ok) { setError(d.message || Object.values(d.errors || {}).join(' ')); return; }
    onDone(d.inquiry);
  };
  return (
    <div>
      <div className="flash good">Request received ({inq.id}). The next tier asks for sensitive material, so a mutual NDA comes first.</div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
        <button className={'app-btn' + (mode === 'ours' ? ' primary' : '')} onClick={() => setMode('ours')}>Sign Lojo's mutual NDA</button>
        <button className={'app-btn' + (mode === 'theirs' ? ' primary' : '')} onClick={() => setMode('theirs')}>Use our own NDA</button>
        <button className="app-btn" onClick={onSkip}>Skip tier 3 for now</button>
      </div>
      {mode === 'ours' ? <div>
        <div className="app-panel" style={{ marginBottom: 14 }}>
          <h3>What it says, in plain words</h3>
          <ul style={{ margin: '0 0 10px', paddingLeft: 18, fontSize: 14, lineHeight: 1.7 }}>{opts.nda_points.map((p) => <li key={p}>{p}</li>)}</ul>
          <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>Signed for {opts.discloser} by {opts.signatories.join(' and ')}; their electronic signatures are on file and apply to your copy. Version {opts.nda_version}.</div>
          <button className="app-btn small" style={{ marginTop: 10 }} onClick={() => setShowFull(!showFull)}>{showFull ? 'Hide the full text' : 'Read the full text'}</button>
          {showFull && <pre style={{ whiteSpace: 'pre-wrap', fontFamily: 'var(--font-sans)', fontSize: 13, lineHeight: 1.6, color: 'var(--fg-muted)', background: 'var(--navy)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: 16, marginTop: 10, maxHeight: 420, overflowY: 'auto' }}>{text || 'Loading…'}</pre>}
        </div>
        <div className="app-panel" style={{ marginBottom: 14 }}>
          <h3>Your signature block</h3>
          <div className="app-grid cols-2">
            <Field label="Legal name of your company"><Input value={sig.company} onChange={(e) => setSig({ ...sig, company: e.target.value })} /></Field>
            <Field label="Your full name"><Input value={sig.name} onChange={(e) => setSig({ ...sig, name: e.target.value })} /></Field>
            <Field label="Your title"><Input value={sig.title} onChange={(e) => setSig({ ...sig, title: e.target.value })} placeholder="e.g. Chief Operating Officer" /></Field>
            <Field label="Email"><Input type="email" value={sig.email} onChange={(e) => setSig({ ...sig, email: e.target.value })} /></Field>
          </div>
          <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, lineHeight: 1.6 }}>
            <input type="checkbox" checked={sig.agree} onChange={(e) => setSig({ ...sig, agree: e.target.checked })} style={{ marginTop: 4 }} />
            <span>I am authorised to sign for {sig.company || 'my company'}, I have read the agreement, and I intend my typed name to be my electronic signature, binding under the E-SIGN Act. A copy with its SHA-256 hash is emailed to me.</span>
          </label>
          {error && <div className="flash warn" style={{ marginTop: 10 }}>{error}</div>}
          <button className="btn btn-primary" style={{ marginTop: 12 }} disabled={busy || !sig.agree || !sig.name || !sig.title || !sig.company} onClick={sign}>{busy ? 'Signing…' : 'Sign the NDA'}</button>
        </div>
      </div> : <div className="app-panel" style={{ marginBottom: 14 }}>
        <h3>Upload your template</h3>
        <div style={{ fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.6, marginBottom: 10 }}>PDF or Word, up to 3 MB. The founders review and countersign it before anything in tier 3 is read; you can still fill tier 3 in now and it stays sealed until then.</div>
        <input type="file" accept=".pdf,.doc,.docx,.txt" disabled={busy} onChange={(e) => { const f = e.target.files && e.target.files[0]; if (f) upload(f); }} />
        {error && <div className="flash warn" style={{ marginTop: 10 }}>{error}</div>}
      </div>}
    </div>);
}

function Tier3Step({ inq, opts, onDone }) {
  const [value, setValue] = React.useState({});
  const [files, setFiles] = React.useState([]);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const tier = opts.tiers[3];
  const upload = async (file) => {
    const b64 = await fileToBase64(file);
    const d = await lojo('', { module: 'inquiry', action: 'file-upload', id: inq.id, email: inq.contact.email, filename: file.name, content_type: file.type || 'application/octet-stream', content_base64: b64 });
    if (d.ok) setFiles([...files, file.name]); else setError(d.message || 'Upload failed');
  };
  const send = async () => {
    setBusy(true); setError('');
    const d = await lojo('', { module: 'inquiry', action: 'update', id: inq.id, email: inq.contact.email, tiers: { 3: value } });
    setBusy(false);
    if (!d.ok) { setError(d.message || 'Not saved'); return; }
    onDone(d.inquiry);
  };
  return (
    <div>
      <div className="flash good">NDA in place{inq.nda.status === 'uploaded_theirs' ? ' (your template, pending countersignature)' : ` (signed ${shortDate(inq.nda.signed.at)}, hash ${String(inq.nda.signed.doc_sha256 || '').slice(0, 12)}…)`}. Everything below is covered by it.</div>
      <TierPanel tier={tier} n={3} value={value} onChange={setValue} />
      <div className="app-panel" style={{ marginBottom: 14 }}><h3>Files under NDA</h3>
        <div style={{ fontSize: 13.5, color: 'var(--fg-muted)', marginBottom: 8 }}>Org chart, P&amp;L, software inventory, deal memo. Up to 3 MB each.</div>
        <input type="file" onChange={(e) => { const f = e.target.files && e.target.files[0]; if (f) upload(f); e.target.value = ''; }} />
        {files.length > 0 && <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>{files.map((f) => <span key={f} className="chip"><Icon name="doc" size={12} /> {f}</span>)}</div>}</div>
      {error && <div className="flash warn">{error}</div>}
      <button className="btn btn-primary" disabled={busy} onClick={send}>{busy ? 'Sending…' : 'Send the sensitive detail'}</button>
    </div>);
}

function readInquiryEmail(id) { try { return sessionStorage.getItem('lojo.inquiry.' + id) || localStorage.getItem('lojo.inquiry.' + id) || ''; } catch (e) { return ''; } }
function writeInquiryEmail(id, email) { try { sessionStorage.setItem('lojo.inquiry.' + id, email); localStorage.setItem('lojo.inquiry.' + id, email); } catch (e) { /* fine */ } }

function Done({ inq, labels }) {
  const [copy, setCopy] = React.useState('');
  React.useEffect(() => { writeInquiryEmail(inq.id, inq.contact.email); }, [inq.id]);
  const analysable = inq.modules.some((m) => ['stack', 'execute', 'operations', 'workforce', 'strategy', 'mna', 'portfolio'].includes(m));
  const fetchCopy = async () => { const d = await lojo('', { module: 'inquiry', action: 'nda-copy', id: inq.id, email: inq.contact.email }); if (d.ok && d.text) downloadText(`lojo-mutual-nda-${inq.id}.txt`, d.text, 'text/plain'); else setCopy('No signed copy on file for this request.'); };
  return (
    <div>
      <div className="flash good" style={{ fontSize: 14.5 }}>Thank you, {inq.contact.name.split(' ')[0]}. {inq.kind === 'call' ? 'We will email two or three times for the call within one business day.' : 'We will read it and reply within one business day.'}</div>
      <div className="app-panel" style={{ marginBottom: 14 }}>
        <h3>Your request</h3>
        <div style={{ fontSize: 14, lineHeight: 1.8 }}>
          <div>Reference <span className="mono">{inq.id}</span> · modules: {labels(inq.modules)}</div>
          <div>Contact: {inq.contact.name} · {inq.contact.email}{inq.contact.company ? ' · ' + inq.contact.company : ''}</div>
          {inq.kind !== 'questionnaire' && inq.call && <div>Preferred times: {(inq.call.preferred_times || []).join(' or ') || 'any'}{inq.call.timezone ? ` (${inq.call.timezone})` : ''}</div>}
          <div>NDA: {inq.nda.status === 'signed_ours' ? `signed ${shortDate(inq.nda.signed.at)} by ${inq.nda.signed.name}` : inq.nda.status === 'uploaded_theirs' ? 'your template uploaded, pending our countersignature' : inq.nda.status === 'required' ? 'not yet in place (needed before sensitive detail)' : 'not needed for these modules'}</div>
          <div style={{ color: 'var(--warn)' }}>Beta pricing applies and is confirmed once we understand complexity and the size of your organization.</div>
        </div>
        {inq.nda.status === 'signed_ours' && <div style={{ marginTop: 10, display: 'flex', gap: 10, alignItems: 'center' }}><button className="app-btn small" onClick={fetchCopy}>Download your signed NDA</button>{copy && <span style={{ fontSize: 12.5, color: 'var(--fg-muted)' }}>{copy}</span>}</div>}
      </div>
      {analysable && <div className="app-panel" style={{ marginBottom: 14, borderColor: 'var(--accent)' }}>
        <h3>Your first analysis</h3>
        <div style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.65, marginBottom: 10 }}>
          Lojo now reads what you sent, fetches your own website, researches the public record where it helps, and writes a first analysis for {labels(inq.modules)}.
          Every fact carries its evidence grade; what cannot be known without you is listed as a gap, never guessed. The first insights per module are free; the rest unlocks per module.
        </div>
        <a href={'/app/?analysis=' + inq.id} className="btn btn-primary">Open your analysis <Icon name="arrow-right" size={16} /></a>
        <span style={{ fontSize: 12.5, color: 'var(--fg-subtle)', marginLeft: 12 }}>Takes one to three minutes the first time.</span>
      </div>}
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}><a href="/app/?demo=1" className="app-btn">Back to the demo</a><a href="/" className="app-btn">Lojo home</a></div>
    </div>);
}

Object.assign(window, { InquiryPage, TierPanel, readInquiryEmail, writeInquiryEmail });