/* ===================== Invoice Audit page ===================== */
const { Icon, Verdict, PageShell, PageHero, DeepRow, CTASection, HOME } = window;

/* invoice read line-by-line against the contract it falls under */
function InvoiceAuditPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Invoice INV-2231 · Tower A</b><span>Monthly maintenance · ELE-4471</span></div>
        <div className="panel__chip panel__chip--flag">3 flagged</div>
      </div>
      <div className="panel__sec">Checked against your contract</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Monthly maintenance fee</div><div className="lrow__s">Matches Schedule A · $1,240 / lift</div></div><span className="ltag ltag--ok">Sch. A</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">CPI escalation applied</div><div className="lrow__s">Billed 4.8% · your agreement caps it at 3.1%</div></div><span className="ltag ltag--flag">+$612 / yr</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">After-hours call-out</div><div className="lrow__s">Fault type already covered under your contract</div></div><span className="ltag ltag--flag">$420</span></div>
      <div className="panel__sec panel__sec--div">Matched to service records</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Quarterly service visit</div><div className="lrow__s">Invoiced with no matching service record</div></div><span className="ltag ltag--flag">Credit due</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Parts markup</div><div className="lrow__s">Within your agreed 15% cap</div></div><span className="ltag ltag--ok">OK</span></div>
      <Verdict inPanel tag="Invoice audit" title="Three charges worth querying">
        The escalation runs above your <strong>3.1% cap</strong>, an <strong>after-hours call-out</strong> duplicates cover you already pay for, and one <strong>quarterly visit</strong> is unevidenced. Query all three before you pay.
      </Verdict>
    </div>
  );
}

/* the four patterns the audit looks for, with example impact */
function CatchPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>What we found</b><span>Across 3 invoices · Tower A</span></div>
        <div className="panel__chip panel__chip--accent">Independent read</div>
      </div>
      <div className="panel__sec">Flagged for your review</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Overcharge</div><div className="lrow__s">Escalation applied above your agreed cap</div></div><span className="ltag ltag--flag">+$612</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Scope creep</div><div className="lrow__s">Oil &amp; grease billed as an extra, already included</div></div><span className="ltag ltag--flag">+$180</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Missed service</div><div className="lrow__s">One visit invoiced with no service record</div></div><span className="ltag ltag--flag">Credit</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Rate variance</div><div className="lrow__s">After-hours rate above what you agreed</div></div><span className="ltag ltag--flag">+$90 / call</span></div>
      <Verdict inPanel tag="The pattern" title="Small lines, real money">
        None of these are dramatic on their own. Across a portfolio and a full year, they are the difference between a fair contract and an expensive one.
      </Verdict>
    </div>
  );
}

/* the headline: the free public audit, no account needed */
const FA_ROWS = [
  { t: "CPI escalation above contract", s: "Billed 4.8%, your agreement allows 3.1%", sev: "High" },
  { t: "After-hours call-out billed", s: "Fault type already covered by your contract", sev: "Medium" },
  { t: "Service visit not evidenced", s: "Invoiced with no matching service record", sev: "Medium" },
];
function FreeAuditBand() {
  return (
    <section className="section band" id="free-audit">
      <div className="wrap">
        <div className="guard__grid">
          <div className="guard__copy">
            <span className="eyebrow" style={{ fontSize: "13px" }}>Free invoice audit · no account needed</span>
            <h2 className="section__title">Try it on your own invoices.<br />Free, in two minutes.</h2>
            <p className="section__sub">Upload a maintenance contract and a few invoices. LPM reads every line against your agreement and shows you exactly what to query before you ever sign up. Your files are processed in memory and never stored. Nothing is saved after this audit.</p>
            <div className="guard__points">
              <div className="gpoint">
                <div className="gpoint__ico"><Icon name="scale" /></div>
                <div><div className="gpoint__t">An independent read of every charge</div><div className="gpoint__d">Overcharges, scope creep, missed services and rate variances, each flagged for your review.</div></div>
              </div>
              <div className="gpoint">
                <div className="gpoint__ico"><Icon name="lock" /></div>
                <div><div className="gpoint__t">Nothing stored, nothing to install</div><div className="gpoint__d">No account, no upload to a database. The audit runs, and the files are gone.</div></div>
              </div>
            </div>
            <a className="btn btn--accent" href="https://app.liftportfoliomanagement.com.au/audit-demo" style={{ marginTop: 6 }}>Run a free audit <span className="arr"><Icon name="arrow" /></span></a>
          </div>

          <div className="glow-pad">
            <div className="ledger">
              <div className="ledger__top">
                <div className="ledger__title">
                  <b>Invoice audit</b>
                  <span>Your contract · 3 invoices reviewed</span>
                </div>
                <div className="ledger__chip">3 flagged</div>
              </div>
              <div className="ledger__sec ledger__sec--top">What we found</div>
              <div className="ledger__rows">
                {FA_ROWS.map((r) => (
                  <div className="lrow" key={r.t}>
                    <span className="lrow__dot lrow__dot--flag"></span>
                    <div className="lrow__main"><div className="lrow__t">{r.t}</div><div className="lrow__s">{r.s}</div></div>
                    <span className="ltag ltag--lock"><span style={{ display: "inline-flex", marginRight: 4 }}><Icon name="lock" stroke={2} /></span>{r.sev}</span>
                  </div>
                ))}
              </div>
              <div className="ledger__foot">
                <div>
                  <span>Estimated impact</span>
                  <b style={{ color: "var(--accent)", fontSize: 16, whiteSpace: "nowrap" }}>Sign up to unlock</b>
                  <small>every line checked against your agreement</small>
                </div>
                <a className="btn btn--ghost" href="https://app.liftportfoliomanagement.com.au/audit-demo">Try it<span className="arr"><Icon name="arrow" /></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Page() {
  return (
    <PageShell current="invoicing.html">
      <PageHero
        icon="scale"
        kicker="Invoice Audit"
        crumb="Invoice Audit"
        title={<>Every invoice, checked against <span className="soft">the contract you signed.</span></>}
        sub="Lift invoices are dense, and overcharges hide in the details. LPM reads every line against your agreement, fee adjustment, and service schedule, then tells you exactly what to query before you pay it."
        pills={["Overcharges", "Scope creep", "Missed services", "Rate variance"]}
        actions={<a className="btn btn--ghost" href="https://app.liftportfoliomanagement.com.au/audit-demo">Run a free audit</a>}
      />

      <section className="section" style={{ paddingTop: 70 }} id="audit">
        <div className="wrap">
          <DeepRow
            kicker="How it reads an invoice"
            title="Line by line, against your own terms."
            desc="Upload an invoice and the contract it falls under. LPM extracts every charge and matches it to the agreed fee, the escalation clause, the inclusions and the service frequency, so anything off-contract stands out at once."
            points={[
              <><b>Contract-aware</b><span>: every charge is checked against your agreed rate and your escalation cap, not a generic benchmark.</span></>,
              <><b>Plain-English findings</b><span>: each flag explains what was billed, what your contract says, and exactly what to ask.</span></>,
              <><b>Nothing assumed</b><span>: charges it cannot tie back to the contract are surfaced for review, never quietly passed.</span></>,
            ]}
            visual={<InvoiceAuditPanel />}
          />
        </div>
      </section>

      <section className="section band" id="catches" style={{ paddingTop: 90 }}>
        <div className="wrap">
          <DeepRow
            rev
            kicker="What it catches"
            title="The four ways invoices leak money."
            desc="Most overbilling is unintentional; it is a detail nobody has time to check. These are the patterns LPM looks for on every invoice you run through it."
            points={[
              <><b>Overcharges</b><span>: rates above the agreed fee, or escalation applied beyond your cap.</span></>,
              <><b>Scope creep</b><span>: extras billed for work your contract already includes.</span></>,
              <><b>Missed services</b><span>: visits invoiced with no matching service record, a credit you are owed.</span></>,
              <><b>Rate variance</b><span>: call-out and labour rates that drift above what you agreed.</span></>,
            ]}
            visual={<CatchPanel />}
          />
        </div>
      </section>

      <FreeAuditBand />

      <CTASection title="Stop paying for things you never agreed to." sub="Join the waitlist to put every invoice across your portfolio under LPM's lens, or run a free audit now to see it on your own." />
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);