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

function ReviewPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Contract review: Maxwell Tower</b><span>Uploaded agreement · 22 pages</span></div>
        <div className="panel__chip panel__chip--accent">AI extracted</div>
      </div>
      <div className="panel__sec">Parsed</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Terms, fees &amp; obligations</div><div className="lrow__s">Every clause indexed and searchable</div></div><span className="ltag ltag--ok">Done</span></div>
      <div className="panel__sec panel__sec--div">Surfaced vs portfolio standard</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">No escalation cap</div><div className="lrow__s">Rest of portfolio caps at 3.5%</div></div><span className="ltag ltag--flag">Risk</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Liability cap below standard</div><div className="lrow__s">$50k vs $250k elsewhere</div></div><span className="ltag ltag--flag">Risk</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--accent"></span><div className="lrow__main"><div className="lrow__t">Auto-renews in 28 days</div><div className="lrow__s">Review window closing</div></div><span className="ltag ltag--accent">Act</span></div>
      <Verdict inPanel tag="Portfolio review" title="Reviewed in seconds, not an afternoon">
        Every term, fee and obligation pulled out and <strong>benchmarked against your portfolio standard</strong>, so the odd-one-out contract can't quietly cost you more.
      </Verdict>
    </div>
  );
}

const CAPEX = [
  { yr: "'26", h: 26, kind: "" },
  { yr: "'27", h: 16, kind: "" },
  { yr: "'28", h: 94, kind: "flag" },
  { yr: "'29", h: 22, kind: "" },
  { yr: "'30", h: 38, kind: "ghost" },
  { yr: "'31", h: 58, kind: "ghost" },
];
function CapexPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>CapEx forecast: Tower A</b><span>Component-level · 10-year view</span></div>
        <div className="panel__chip panel__chip--accent">Validated</div>
      </div>
      <div className="panel__body">
        <div className="capex">
          {CAPEX.map((c) => (
            <div className="cxcol" key={c.yr}>
              <div className={"cxbar" + (c.kind === "flag" ? " cxbar--flag" : c.kind === "ghost" ? " cxbar--ghost" : "")} style={{ height: c.h + "%" }}></div>
              <div className="cxyr">{c.yr}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="lrow" style={{ borderTop: "1px solid var(--border)" }}><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">2028 · Controller replacement</div><div className="lrow__s">Largest single line · est. $180k</div></div><span className="ltag ltag--flag">Peak</span></div>
      <Verdict inPanel tag="Validated vs history" title="Not funding what you've already paid for">
        The 2028 controller spend is <strong>checked against your repair history</strong>, if you've been billed for the same components in piecemeal repairs, LPM adjusts the forecast so you don't pay twice.
      </Verdict>
    </div>
  );
}

function KnowledgePanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Knowledge base</b><span>Grounded in your portfolio</span></div>
        <div className="panel__chip panel__chip--accent">Ask Lola</div>
      </div>
      <div style={{ padding: "18px 18px 6px" }}>
        <div style={{ display: "inline-block", maxWidth: "92%", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "12px 12px 12px 4px", padding: "11px 14px", fontSize: 13.5, color: "var(--text)" }}>
          Can the contractor bill us for a controller replacement under this contract?
        </div>
      </div>
      <Verdict inPanel tag="Answer" title="No. That's capital works, not maintenance">
        Your agreement classifies the controller replacement as <strong>capital works and excludes it from the maintenance fee</strong>. It must be quoted separately, and it belongs in CapEx planning, not on a monthly invoice.
        <div style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" }}>Source · ELE-4471 · Clause 7.3 (Exclusions)</div>
      </Verdict>
    </div>
  );
}

function Page() {
  return (
    <PageShell current="enterprise.html">
      <PageHero
        icon="layers"
        kicker="Portfolio"
        crumb="Portfolio"
        title={<>Run a whole portfolio <span className="soft">like one building.</span></>}
        sub="For managers and FM companies with lifts across many properties: review every contract at once, forecast capital works with confidence, and give your whole team one source of truth."
        pills={["Contract review", "CapEx forecast", "Knowledge base", "Team access"]}
      />

      <section className="section" style={{ paddingTop: 70 }} id="review">
        <div className="wrap">
          <DeepRow
            kicker="Contract review"
            title="Read every contract. Find the outliers."
            desc="Upload any agreement (or your whole portfolio) and LPM extracts the terms, fees and obligations, then benchmarks each contract against the rest so the costly outliers stand out."
            points={[
              <><b>Gap &amp; risk detection</b><span>: missing caps, weak liability terms and looming auto-renewals surfaced for every agreement.</span></>,
              <><b>Benchmarked to your standard</b><span>: each contract compared against the rest of your portfolio, not a generic template.</span></>,
              <><b>Searchable in plain English</b><span>: ask a question, get the clause and the answer.</span></>,
            ]}
            visual={<ReviewPanel />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="capex">
        <div className="wrap">
          <DeepRow
            rev
            kicker="CapEx forecast"
            title="Know what's coming, and what it should cost."
            desc="Component-level forecasts give you replacement timelines and costs years out. Crucially, LPM validates each forecast against your repair history, so you plan for real exposure, not inflated estimates."
            points={[
              <><b>Validated against past repairs</b><span>: if you've already paid for components piecemeal, the forecast is adjusted down.</span></>,
              <><b>Component-level detail</b><span>: controllers, doors, ropes and drives, each with its own timeline and cost.</span></>,
              <><b>What-if planning</b><span>: model defer-vs-replace decisions and see the 5 and 10-year impact.</span></>,
            ]}
            visual={<CapexPanel />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="knowledge">
        <div className="wrap">
          <DeepRow
            kicker="Knowledge base"
            title="One source of truth for the whole team."
            desc="Ask Lola anything about your portfolio and get an answer grounded in your actual contracts, with the clause it came from. New team members get up to speed without having to inherit tribal knowledge."
            points={[
              <><b>Answers cite your contracts</b><span>: every response points to the exact clause it's based on.</span></>,
              <><b>Role-based team access</b><span>: building managers, committees and FM staff each see what they need.</span></>,
              <><b>No more tribal knowledge</b><span>: the portfolio's history lives in the platform, not in one person's head.</span></>,
            ]}
            visual={<KnowledgePanel />}
          />
        </div>
      </section>

      <CTASection title="Bring the whole portfolio into focus." sub="Join the waitlist to manage every lift, contract and forecast across your properties from one platform." />
    </PageShell>
  );
}

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