/* ============================================================
   O2 — Public Audit · the AuditReport document
   Loaded after m-shared.jsx + audit-data.js. Defines Report.
   ============================================================ */
const A = window.AUDIT;
const usd = (n) => '$' + (n >= 1000 ? (n / 1000).toFixed(n % 1000 ? 0 : 0) + 'k' : n);

function RCover({ firm }) {
  return (
    <div className="rcover">
      <div>
        <div className="kicker">IP Practice · Operations Audit</div>
        <h1>{firm}, here’s what your<br />intake is really doing.</h1>
        <div className="meta">
          <span>Prepared by <b>Lectual</b></span>
          <span>Source: <b>{A.firm.connector}</b> · read-only</span>
          <span>{A.firm.domain}</span>
          <span>Jun 3, 2026</span>
        </div>
      </div>
      <div className="rcover-score">
        <div className="top">
          <Gauge value={A.health} size={104} stroke={11} />
          <div className="bn"><small>Operations health</small>{bandName(A.health)}</div>
        </div>
        <p>{A.healthNote}</p>
      </div>
    </div>
  );
}

function RInventory() {
  const inv = A.inventory;
  const kpis = [
    { b: inv.contacts.toLocaleString(), s: 'Contacts in CRM' },
    { b: inv.activeLeads, s: 'Open leads' },
    { b: inv.activeClients, s: 'Active clients' },
    { b: usd(inv.pipelineValue), s: 'Open pipeline value' },
    { b: inv.avgResponseHrs + 'h', s: 'Avg first response', cls: 'danger' },
    { b: inv.unworkedPct + '%', s: 'Leads unworked', cls: 'warn' },
  ];
  return (
    <section className="rsec reveal">
      <div className="rsec-head">
        <span className="rsec-num">01</span>
        <div>
          <h2>What we found in your pipeline</h2>
          <p>A read-only snapshot of {A.firm.connector}, normalized into a single picture. Real demand — and a measurable amount of it slipping through.</p>
        </div>
      </div>
      <div className="kpi-strip">
        {kpis.map((k, i) => (
          <div className={'kpi' + (k.cls ? ' ' + k.cls : '')} key={i}><b>{k.b}</b><span>{k.s}</span></div>
        ))}
      </div>
      <div className="scorecard">
        {A.dimensions.map((d, i) => (
          <div className="scl" key={i}>
            <div className="sk scl-wrap"><span>{d.k}</span><span className="snote">{d.note}</span></div>
            <div className="strack"><i style={{ width: d.v + '%', background: d.v >= 65 ? 'var(--protected)' : d.v >= 45 ? 'var(--accent)' : 'var(--warning)' }}></i></div>
            <div className="sv" style={{ color: d.v >= 65 ? 'var(--protected)' : d.v >= 45 ? 'var(--accent)' : 'var(--warning)' }}>{d.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function RFindings() {
  return (
    <section className="rsec reveal">
      <div className="rsec-head">
        <span className="rsec-num">02</span>
        <div>
          <h2>Where it’s leaking</h2>
          <p>Eight findings across pipeline, taxonomy and automation — ranked by what they’re costing you. Dollar figures are conservative estimates from your own throughput.</p>
        </div>
      </div>
      {A.findings.map((g, gi) => (
        <div className="fgroup" key={gi}>
          <div className="fgroup-h">
            <span className="fic">{Ico[g.icon]}</span>
            <span className="ft">{g.group}</span>
            <span className="fc">{String(g.items.length).padStart(2, '0')} findings</span>
          </div>
          {g.items.map((f, fi) => (
            <div className="finding" key={fi}>
              <div className="fmain">
                <span className={'sevdot sev-' + f.sev}></span>
                <div>
                  <div className="ftitle">{f.t}<span className={'sevtag ' + f.sev}>{f.sev === 'high' ? 'High impact' : f.sev === 'med' ? 'Medium' : 'Quick win'}</span></div>
                  <div className="fd">{f.d}</div>
                </div>
              </div>
              <div className="frail">
                <div><div className="rk">Impact</div><div className={'rv' + (f.sev === 'high' ? ' danger' : '')}>{f.impact}</div></div>
                <div><div className="rk">Today</div><div className="rv" style={{ fontSize: 14, color: 'var(--ink-2)' }}>{f.metric}</div></div>
              </div>
            </div>
          ))}
        </div>
      ))}
      <div className="recover">
        <div className="rbig">+$182k</div>
        <div className="rtxt">Recoverable revenue per year if you close the high-impact gaps — before counting the hours your partners get back.</div>
      </div>
    </section>
  );
}

function RConfig() {
  const c = A.config;
  return (
    <section className="rsec reveal">
      <div className="rsec-head">
        <span className="rsec-num">03</span>
        <div>
          <h2>The operating system we’d build you</h2>
          <p>Not a list of problems — a configured practice. We generate this from your data on day one; you review and tweak before anything goes live.</p>
        </div>
      </div>

      <div className="gen-block">
        <div className="gbh">Pipeline · 10 stages<span className="ln"></span></div>
        <div className="gen-stages">
          {c.stages.map((s, i) => (
            <React.Fragment key={i}>
              <span className="gen-stage"><span className="gd" style={{ background: s.dot }}></span><span className="gn">{String(i + 1).padStart(2, '0')}</span>{s.name}</span>
              {i < c.stages.length - 1 && <span className="gen-arrow">{Ico.arrow}</span>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="gen-block">
        <div className="gbh">Taxonomy · 47 freeform tags → 5 clean dimensions<span className="ln"></span></div>
        <div className="tax-grid">
          {c.taxonomy.map((t, i) => (
            <div className="tax-row" key={i}>
              <div className="td">{t.dim}</div>
              <div className="tt">{t.tags.map((tag, j) => <span className="lozenge" key={j}><span className="d"></span>{tag}</span>)}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="gen-block">
        <div className="gbh">Packages · priced for your market<span className="ln"></span></div>
        <div className="pkg-grid">
          {c.packages.map((p, i) => (
            <div className="pkg" key={i}>
              <div><div className="pn">{p.name}</div><div className="ps">{p.scope}</div></div>
              <div className="pp">{p.price}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RImpact() {
  return (
    <section className="rsec reveal">
      <div className="rsec-head">
        <span className="rsec-num">04</span>
        <div>
          <h2>What changes in 90 days</h2>
          <p>Modeled on firms of your size and inbound volume after switching their intake to Lectual.</p>
        </div>
      </div>
      <div className="impact-grid">
        {A.impact.map((r, i) => (
          <div className="impact-row" key={i}>
            <div className="ik">{r.k}</div>
            <div className="ib">{r.before}</div>
            <div className="iar">{Ico.arrow}</div>
            <div className="ia">{r.after}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ReportCTA() {
  return (
    <React.Fragment>
      <div className="report-cta reveal">
        <div className="ab-glow" aria-hidden="true"></div>
        <h2>Fix all of this. Create your workspace.</h2>
        <p>Spin up a fully-configured practice — your stages, your taxonomy, your packages, your brand — in about ten minutes. Your data imports clean.</p>
        <div className="rc-btns">
          <a className="btn btn-primary btn-lg" href="Lectual Onboarding.html">Create your workspace <span className="ar">→</span></a>
          <a className="btn btn-secondary btn-lg" href="#">Book a 20-min walkthrough</a>
        </div>
      </div>
      <div className="report-foot">
        <span className="lock">{Ico.lock} This audit ran read-only · we stored nothing · it never left your browser</span>
      </div>
    </React.Fragment>
  );
}

function Report({ firm, onRestart }) {
  useReveal();
  return (
    <div className="report">
      <div className="report-toolbar">
        <span className="rt-label">Lectual · Operations Audit</span>
        <span className="sp"></span>
        <button className="btn btn-secondary btn-sm" onClick={onRestart}>{Ico.refresh} New audit</button>
        <a className="btn btn-secondary btn-sm" href="#" onClick={(e) => { e.preventDefault(); window.print(); }}>{Ico.download} PDF</a>
        <a className="btn btn-primary btn-sm" href="Lectual Onboarding.html">Fix this {Ico.arrow}</a>
      </div>
      <RCover firm={firm} />
      <RInventory />
      <RFindings />
      <RConfig />
      <RImpact />
      <ReportCTA />
    </div>
  );
}

window.Report = Report;