/* ===================== Contracts & Pricing page ===================== */
const { Icon, Verdict, PageShell, PageHero, DeepRow, CTASection, HOME } = window;

function ContractPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Maintenance agreement · Tower A</b><span>ELE-4471 · 14-page PDF</span></div>
        <div className="panel__chip panel__chip--accent">AI extracted</div>
      </div>
      <div className="panel__sec">Extracted terms</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Term &amp; escalation</div><div className="lrow__s">5 years · CPI capped at 3.5%</div></div><span className="ltag ltag--ok">Clause 4.2</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Per-unit fee</div><div className="lrow__s">$1,240 / lift / month</div></div><span className="ltag ltag--ok">Sch. A</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Visits included</div><div className="lrow__s">6 routine services / year</div></div><span className="ltag ltag--ok">Clause 6</span></div>
      <div className="panel__sec panel__sec--div">Gaps flagged</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">After-hours call-outs</div><div className="lrow__s">Coverage not defined anywhere</div></div><span className="ltag ltag--flag">Gap</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Spare parts</div><div className="lrow__s">Excluded, no cap on markup</div></div><span className="ltag ltag--flag">Gap</span></div>
      <Verdict inPanel tag="Contract analysis" title="2 gaps worth negotiating">
        The agreement leaves <strong>call-out coverage undefined</strong> and places <strong>no cap on parts markup</strong>, both common cost leaks. Raise them before you renew.
      </Verdict>
    </div>
  );
}

function CompliancePanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Compliance: Tower A</b><span>4 lifts · NSW</span></div>
        <div className="panel__chip panel__chip--flag">1 action</div>
      </div>
      <div className="panel__sec">Obligations</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--accent"></span><div className="lrow__main"><div className="lrow__t">Annual safety inspection</div><div className="lrow__s">Due in 24 days</div></div><span className="ltag ltag--accent">Scheduled</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Routine maintenance log</div><div className="lrow__s">Up to date · last visit 11 days ago</div></div><span className="ltag ltag--ok">Current</span></div>
      <div className="panel__sec panel__sec--div">Code checks · current standards</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Emergency comms</div><div className="lrow__s">Meets current standard</div></div><span className="ltag ltag--ok">Pass</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Door reopening device</div><div className="lrow__s">Proposed upgrade, below current code</div></div><span className="ltag ltag--flag">Review</span></div>
      <Verdict inPanel tag="Upgrade vs code" title="Upgrade checked against the relevant code">
        The proposed modernisation reuses a door reopening device that <strong>no longer meets current code</strong>. LPM flags it so a non-compliant upgrade isn't paid for and redone in two years.
      </Verdict>
    </div>
  );
}

function QuotePanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Repair quote: door operator</b><span>Lift 2 · submitted by contractor</span></div>
        <div className="panel__chip panel__chip--flag">18% over</div>
      </div>
      <div className="panel__sec">AI breakdown</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Quoted total</div><div className="lrow__s">Fixed price, parts + labour</div></div><span className="ltag ltag--flag">$8,400</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Benchmark: scope &amp; market</div><div className="lrow__s">Typical market rate for this scope</div></div><span className="ltag ltag--ok">$7,100</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Labour</div><div className="lrow__s">16h quoted · 4h above typical</div></div><span className="ltag ltag--flag">+$520</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Parts</div><div className="lrow__s">OEM only, aftermarket available</div></div><span className="ltag ltag--flag">−$900</span></div>
      <Verdict inPanel tag="Quote analysis" title="Negotiate or re-scope">
        Pricing runs <strong>18% above</strong> comparable scope. LPM suggests aftermarket parts and trimming labour to typical hours. A fair price lands near <strong>$7,100</strong>.
      </Verdict>
    </div>
  );
}

function TenderBand() {
  return (
    <section className="section--tight">
      <div className="wrap">
        <a href="maintenance-tender.html" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap", border: "1px solid var(--border-strong)", borderRadius: 18, padding: "26px 30px", background: "linear-gradient(180deg, rgba(132,166,246,0.06), rgba(255,255,255,0.01))" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <span style={{ width: 44, height: 44, borderRadius: 12, border: "1px solid var(--accent-line)", background: "rgba(132,166,246,0.08)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="clipboardList" /></span>
            <div>
              <div style={{ fontWeight: 600, fontSize: 17, letterSpacing: "-0.01em" }}>Going to tender?</div>
              <div style={{ color: "var(--muted)", fontSize: 14, marginTop: 3 }}>Scope, collect and AI-compare contractor tenders, then negotiate T&amp;Cs and award, all in one place.</div>
            </div>
          </div>
          <span className="btn btn--ghost">Open Maintenance Tender <span className="arr"><Icon name="arrow" /></span></span>
        </a>
      </div>
    </section>
  );
}

function Page() {
  return (
    <PageShell current="contracts.html">
      <PageHero
        icon="file"
        kicker="Contracts &amp; Pricing"
        crumb="Contracts &amp; Pricing"
        title={<>Your contracts, finally <span className="soft">working for you.</span></>}
        sub="LPM reads every agreement, quote and renewal the way a seasoned consultant would, extracting the terms that matter, flagging the gaps that cost you, and pricing every quote against scope and market."
        pills={["Contract analysis", "Compliance & codes", "Quote analysis", "Renegotiation"]}
        actions={<a className="btn btn--ghost" href="maintenance-tender.html">Maintenance tender</a>}
      />

      <section className="section" style={{ paddingTop: 70 }} id="contracts">
        <div className="wrap">
          <DeepRow
            kicker="Contract analysis"
            title="Every clause, extracted and remembered."
            desc="Upload an agreement, and LPM pulls out fees, per-unit rates, fee adjustments, inclusions, exclusions, and expiry, and remembers all of it. Most importantly, it tells you what's missing."
            points={[
              <><b>Gap detection</b><span>: undefined call-out coverage, uncapped markups and vague scope are surfaced as negotiable risks.</span></>,
              <><b>Escalation-aware</b><span>: the agreed cap is remembered and applied whenever you check an invoice.</span></>,
              <><b>Expiry &amp; renewal alerts</b><span>: never roll into an auto-renewal you didn't review.</span></>,
            ]}
            visual={<ContractPanel />}
          />
        </div>
      </section>

      <section className="section band" id="compliance" style={{ paddingTop: 90 }}>
        <div className="wrap">
          <DeepRow
            rev
            kicker="Compliance & codes"
            title="Stay ahead of every obligation."
            desc="Track inspections, certifications and due dates across every lift, and check proposed upgrades and modernisations against the relevant codes before you commit a cent."
            points={[
              <><b>Code-checked upgrades</b><span>: modernisation and repair proposals validated against current standards.</span></>,
              <><b>Obligation calendar</b><span>: inspections and certifications tracked per lift, with lead-time alerts.</span></>,
              <><b>Defect linkage</b><span>: every obligation ties back to the lift and its audit history.</span></>,
            ]}
            visual={<CompliancePanel />}
          />
        </div>
      </section>

      <section className="section band" id="quotes" style={{ paddingTop: 90 }}>
        <div className="wrap">
          <DeepRow
            kicker="Quote analysis"
            title="Quotes, analysed the moment they land."
            desc="Maintenance, renegotiation, repair or modernisation: every quote is read, broken down and benchmarked against comparable scope and market pricing, so inflated numbers stand out."
            points={[
              <><b>Line-by-line breakdown</b><span>: labour hours and parts compared to typical, with the dollar gap shown.</span></>,
              <><b>Impartial benchmark</b><span>: benchmarked against typical Australian market rates, so you have an independent reference point.</span></>,
              <><b>A fair-price target</b><span>: on repair, renegotiation and modernisation quotes, the number to negotiate to and the reasons why.</span></>,
            ]}
            visual={<QuotePanel />}
          />
        </div>
      </section>

      <TenderBand />

      <CTASection title="See your contracts clearly." sub="Join the waitlist and be first to put every agreement, quote and renewal under LPM's lens." />
    </PageShell>
  );
}

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