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

function InvoicePanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Invoice: April maintenance</b><span>ELE-4471 · matched to contract</span></div>
        <div className="panel__chip panel__chip--flag">2 flagged</div>
      </div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Monthly service fee</div><div className="lrow__s">Matches contracted rate</div></div><span className="ltag ltag--ok">$1,240</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Escalation applied</div><div className="lrow__s">Contract caps at 3.5% · billed 5.2%</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">Lubrication kit</div><div className="lrow__s">Listed as included in your contract</div></div><span className="ltag ltag--flag">$640</span></div>
      <div className="ledger__foot">
        <div><span>Flagged on this invoice</span><b>$820</b><small>checked against contract &amp; inclusions</small></div>
        <span className="btn btn--ghost btn--sm">Hold &amp; query</span>
      </div>
    </div>
  );
}

function MaintenancePanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Maintenance: Q2</b><span>Contracted: 6 visits / year</span></div>
        <div className="panel__chip panel__chip--flag">2 missed</div>
      </div>
      <div className="panel__sec">Service visits</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Completed on schedule</div><div className="lrow__s">4 visits · signed off</div></div><span className="ltag ltag--ok">On track</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--good"></span><div className="lrow__main"><div className="lrow__t">Missed against frequency</div><div className="lrow__s">2 visits below contracted rate</div></div><span className="ltag ltag--good">Credit</span></div>
      <div className="ledger__foot">
        <div><span>Credit owed back this quarter</span><b>$620</b><small>auto-tracked from contracted frequency</small></div>
        <span className="btn btn--ghost btn--sm">Claim</span>
      </div>
    </div>
  );
}

function CalloutPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Call-out log: Lift 3</b><span>Tower B · last 60 days</span></div>
        <div className="panel__chip panel__chip--flag">Recurring fault</div>
      </div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">14 Mar · Door not closing</div><div className="lrow__s">Response 3h · covered by contract</div></div><span className="ltag ltag--ok">Covered</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">2 Apr · Door not closing</div><div className="lrow__s">Response 5h · over target</div></div><span className="ltag ltag--flag">Repeat</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">19 Apr · Door not closing</div><div className="lrow__s">Same fault · third time</div></div><span className="ltag ltag--flag">Repeat</span></div>
      <Verdict inPanel tag="Pattern detected" title="Same fault, three times in 6 weeks">
        Three call-outs for one recurring door fault. LPM suggests pursuing a <strong>permanent fix or a part replacement</strong> under warranty, not another billed visit.
      </Verdict>
    </div>
  );
}

function AuditPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Inspection report: Tower B</b><span>Imported PDF · 5 defects</span></div>
        <div className="panel__chip panel__chip--flag">1 critical</div>
      </div>
      <div className="panel__sec">Defects by severity</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Governor overspeed test</div><div className="lrow__s">Overdue, safety critical</div></div><span className="ltag ltag--flag">Critical</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Pit lighting</div><div className="lrow__s">Below standard</div></div><span className="ltag ltag--flag">Major</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Handrail wear</div><div className="lrow__s">Monitor next service</div></div><span className="ltag ltag--ok">Minor</span></div>
      <div className="panel__sec panel__sec--div">Rectification</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--accent"></span><div className="lrow__main"><div className="lrow__t">Tracked to close-out</div><div className="lrow__s">3 of 5 rectified · linked to Lift 3</div></div><span className="ltag ltag--accent">In progress</span></div>
    </div>
  );
}

function Page() {
  return (
    <PageShell current="activity.html">
      <PageHero
        icon="gauge"
        kicker="Activity"
        crumb="Activity"
        title={<>Every dollar and every visit, <span className="soft">accounted for.</span></>}
        sub="The day-to-day of a lift portfolio (invoices, service visits, call-outs and inspections) captured, checked and connected. Nothing slips through, nothing gets paid twice."
        pills={["Invoices", "Maintenance", "Call-outs", "Audit reports"]}
      />

      <section className="section" style={{ paddingTop: 70 }} id="invoices">
        <div className="wrap">
          <DeepRow
            kicker="Invoice validation"
            title="Never pay an invoice you haven't checked."
            desc="Check every invoice against your contract, escalation cap and inclusions list. Overcharges, escalation creep and charges for things you already pay for are flagged before you pay."
            points={[
              <><b>Checked against inclusions:</b> <span>charges for items already covered by your contract are caught automatically.</span></>,
              <><b>Escalation-aware:</b> <span>the agreed cap is enforced; anything above it is flagged to the cent.</span></>,
              <><b>Hold &amp; query in a click:</b> <span>flagged invoices come with the contract reference to back you up.</span></>,
            ]}
            visual={<InvoicePanel />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="maintenance">
        <div className="wrap">
          <DeepRow
            rev
            kicker="Maintenance tracking"
            title="Every visit tracked. Every credit flagged."
            desc="Log each service visit and LPM tracks completion against your contracted frequency. When visits are missed or short, it calculates the credit, automatically."
            points={[
              <><b>Built-in credit tracker:</b> <span>missed visits become a credit owed back, with the dollar figure ready to claim.</span></>,
              <><b>Frequency enforcement:</b> <span>know the moment a contractor falls behind the schedule you're paying for.</span></>,
              <><b>Signed-off history:</b> <span>a clean record of what was done, when, on every lift.</span></>,
            ]}
            visual={<MaintenancePanel />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="callouts">
        <div className="wrap">
          <DeepRow
            kicker="Call-out management"
            title="Spot the lift that keeps breaking."
            desc="Every call-out logged with fault detail, response time and contract coverage. LPM watches for patterns, so a recurring fault becomes a warranty conversation, not a recurring bill."
            points={[
              <><b>Recurring-fault detection:</b> <span>the same problem three times is surfaced as a pattern, not three separate jobs.</span></>,
              <><b>Response times tracked:</b> <span>hold contractors to the response window in your contract.</span></>,
              <><b>Coverage status:</b> <span>know instantly whether a call-out should have been billed at all.</span></>,
            ]}
            visual={<CalloutPanel />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="audit">
        <div className="wrap">
          <DeepRow
            rev
            kicker="Audit & compliance"
            title="Inspections in, defects tracked out."
            desc="Import inspection and audit reports and LPM extracts every defect, ranks it by severity and tracks it through to rectification, each one linked to the lift it belongs to."
            points={[
              <><b>Severity triage:</b> <span>critical, major and minor defects separated so the urgent ones can't hide.</span></>,
              <><b>Rectification tracking:</b> <span>follow every defect to close-out, with nothing forgotten.</span></>,
              <><b>Linked to the lift:</b> <span>defects, call-outs and capital works all tie back to the same asset.</span></>,
            ]}
            visual={<AuditPanel />}
          />
        </div>
      </section>

      <CTASection title="Stay on top of the details." sub="Join the waitlist and get every invoice, visit, call-out and inspection across your portfolio checked against your agreement." />
    </PageShell>
  );
}

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