/* ============================================================
   LPM landing page: uses shared.jsx components (window globals)
   ============================================================ */
const { useEffect, useState } = React;
const { Icon, AIMark, Badge, Waitlist, VideoFrame, PageShell, CTASection, ScrollTilt, CountUp, MOTION_OK } = window;

/* cursor parallax: sets --px/--py (tilt + float depths) and --hx/--hy (spotlight) on a host element */
function useParallax(sel) {
  useEffect(() => {
    if (!MOTION_OK) return;
    const host = document.querySelector(sel);
    if (!host) return;
    const onMove = (e) => {
      const r = host.getBoundingClientRect();
      host.style.setProperty("--px", (((e.clientX - r.left) / r.width - 0.5) * 2).toFixed(3));
      host.style.setProperty("--py", (((e.clientY - r.top) / Math.max(r.height, 1) - 0.5) * 2).toFixed(3));
      host.style.setProperty("--hx", e.clientX - r.left + "px");
      host.style.setProperty("--hy", e.clientY - r.top + "px");
    };
    const onLeave = () => { host.style.setProperty("--px", 0); host.style.setProperty("--py", 0); };
    host.addEventListener("pointermove", onMove, { passive: true });
    host.addEventListener("pointerleave", onLeave);
    return () => { host.removeEventListener("pointermove", onMove); host.removeEventListener("pointerleave", onLeave); };
  }, [sel]);
}

/* ---------- data: mirrors the product's real sections ---------- */
const GROUPS = [
  {
    label: "Overview",
    page: "enterprise.html",
    items: [
      { icon: "gauge", title: "Dashboard", desc: "Your whole portfolio at a glance: buildings, lifts, spend and open issues in one view.", href: "enterprise.html" },
      { icon: "building", title: "Buildings & lifts", desc: "Every asset you manage, with its contract, service history and status attached.", href: "enterprise.html" },
      { icon: "sparkles", title: "Ask Lola", desc: "Ask any question about your lifts and get answers sourced directly from your contracts, with the clause referenced.", href: "ai.html" },
      { icon: "book", title: "Knowledge base", desc: "Centralised guidance and answers, so your whole team works from the same playbook.", href: "enterprise.html#knowledge" },
    ],
  },
  {
    label: "Contracts & pricing",
    page: "contracts.html",
    items: [
      { icon: "file", title: "Contracts", desc: "Multi-lift agreements with per-unit fees, escalation clauses, inclusions and expiry alerts.", href: "contracts.html#contracts" },
      { icon: "fileSearch", title: "Contract review", desc: "AI extracts terms, fees and obligations and surfaces gaps in any agreement you upload.", href: "enterprise.html#review" },
      { icon: "shield", title: "Compliance", desc: "Track obligations, certifications and due dates across every lift in your portfolio.", href: "contracts.html#compliance" },
      { icon: "clipboard", title: "Quotes", desc: "AI analysis on quotes across maintenance, renegotiation, repair and modernisation.", href: "contracts.html#quotes" },
      { icon: "swap", title: "Contract renewal", desc: "Renegotiate from strength, with terms, fees and full service history in front of you before you re-sign.", href: "contracts.html#contracts" },
      { icon: "clipboardList", title: "Run a tender", desc: "Scope, collect and AI-compare contractor tenders, then negotiate terms and award.", href: "maintenance-tender.html" },
    ],
  },
  {
    label: "Activity & planning",
    page: "activity.html",
    items: [
      { icon: "receipt", title: "Invoices", desc: "AI fee-checking validates every invoice against your contract and escalation clause.", href: "activity.html#invoices" },
      { icon: "scale", title: "Invoice audit", desc: "One click audits a contract's invoices and service records against its terms. Overcharges, scope creep, missed services and rate variances surface in an independent report.", href: "invoicing.html" },
      { icon: "wrench", title: "Maintenance", desc: "Log every service visit and track completion against your contracted frequency.", href: "activity.html#maintenance" },
      { icon: "phone", title: "Call-outs", desc: "Record faults, response times and coverage status. Spot recurring issues early.", href: "activity.html#callouts" },
      { icon: "fileCheck", title: "Audit reports", desc: "Import inspections, track defects by severity and monitor rectification status.", href: "activity.html#audit" },
      { icon: "trend", title: "CapEx forecast", desc: "Component-level replacement timelines and costs, validated against past repairs.", href: "enterprise.html#capex" },
      { icon: "coins", title: "Maintenance credits", desc: "Missed or short service visits tracked automatically as credits owed back to you.", href: "activity.html#maintenance" },
    ],
  },
];

const AUDIENCES = [
  { title: "Building managers", desc: "See what's needed for yourself, with independent visibility over every lift decision." },
  { title: "Strata committees", desc: "Make informed capital works decisions backed by data. Know your 5 and 10-year CapEx exposure in time to plan." },
  { title: "FM companies", desc: "Manage entire lift portfolios across properties from one platform. One contract. One invoice. Full picture." },
];

const STEPS = [
  { title: "Bring in your contracts", desc: "Upload agreements, invoices and audit reports. AI extracts fees, terms and escalation clauses automatically." },
  { title: "LPM checks the detail", desc: "Check every invoice against your contract, track every visit, and log and categorise every call-out." },
  { title: "Plan with confidence", desc: "See what's coming with component-level CapEx forecasts and decide with the same insight your contractor has." },
];

const CAPABILITIES = [
  { label: "Contract management", icon: "file" },
  { label: "AI invoice validation", icon: "receipt" },
  { label: "AI invoice audit", icon: "scale" },
  { label: "Maintenance tracking", icon: "wrench" },
  { label: "Call-out logging", icon: "phone" },
  { label: "CapEx forecasting", icon: "trend" },
  { label: "Audit & compliance", icon: "shield" },
  { label: "Tender analysis", icon: "clipboardList" },
  { label: "Multi-lift portfolios", icon: "layers" },
];

const GUARD_POINTS = [
  { icon: "receipt", title: "Invoice & fee validation", desc: "Every charge matched to your contract and escalation clause. Overcharges, double-billing and scope-creep flagged before you pay." },
  { icon: "scan", title: "Quote & repair benchmarking", desc: "Repair, renegotiation and modernisation quotes checked against scope and your agreement, so you always know what a fair price looks like." },
  { icon: "wrench", title: "Built-in maintenance credit tracker", desc: "Every missed or short service visit against your contracted frequency is tracked automatically as a credit owed back to you." },
];

/* ---------- hero product demo: the platform selling itself ---------- */
const DEMO_ROWS = [
  { t: "Monthly service fee", s: "Matches contracted rate", amt: "$1,240", v: "ok", val: 0 },
  { t: "CPI escalation", s: "Contract allows 3.1% · billed 4.8%", amt: "+$211", v: "flag", val: 211 },
  { t: "After-hours call-out", s: "Already covered by contract", amt: "$1,100", v: "flag", val: 1100 },
  { t: "Missed service visits", s: "2 of 6 contracted visits", amt: "$620 credit", v: "good", val: 620 },
];
const DEMO_MONTHS = ["June", "July", "August", "September"];
const DEMO_TOTAL = DEMO_ROWS.length * 2 + 4; /* beats: idle, scan/verdict per row, hold */
const SIDE_GROUPS = [
  { label: "Overview", items: [
    { icon: "gauge", label: "Dashboard", on: true },
    { icon: "building", label: "Buildings & lifts" },
    { icon: "sparkles", label: "Ask Lola" },
  ]},
  { label: "Contracts & pricing", items: [
    { icon: "file", label: "Contracts" },
    { icon: "shield", label: "Compliance" },
    { icon: "clipboard", label: "Quotes" },
  ]},
  { label: "Activity & planning", items: [
    { icon: "receipt", label: "Invoices" },
    { icon: "wrench", label: "Maintenance" },
    { icon: "trend", label: "CapEx" },
  ]},
];

function ProductDemo() {
  const [tick, setTick] = useState(MOTION_OK ? 0 : DEMO_TOTAL - 1);
  useEffect(() => {
    if (!MOTION_OK) return;
    const id = setInterval(() => setTick((t) => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const step = tick % DEMO_TOTAL;
  const month = DEMO_MONTHS[Math.floor(tick / DEMO_TOTAL) % DEMO_MONTHS.length];
  const status = (i) => (step < 2 * i + 1 ? "queued" : step === 2 * i + 1 ? "scan" : "done");
  const resolved = DEMO_ROWS.filter((_, i) => status(i) === "done");
  const found = resolved.filter((r) => r.val > 0);
  const foundSum = found.reduce((a, r) => a + r.val, 0);
  const allDone = resolved.length === DEMO_ROWS.length;
  const recovered = 41170 + foundSum;
  return (
    <div className="pd">
      <div className="pd__bar">
        <div className="pd__dots"><i></i><i></i><i></i></div>
        <span className="pd__url">liftportfoliomanagement.com.au · Dashboard / Tower A</span>
        <span className="pd__live"><i></i>Lola · live check</span>
      </div>
      <div className="pd__body">
        <div className="pd__side">
          {SIDE_GROUPS.map((g) => (
            <div className="pd__sgroup" key={g.label}>
              <span className="pd__slabel">{g.label}</span>
              {g.items.map((s) => (
                <span className={"pd__sitem" + (s.on ? " pd__sitem--on" : "")} key={s.label}>
                  <Icon name={s.icon} />{s.label}
                </span>
              ))}
            </div>
          ))}
        </div>
        <div className="pd__main">
          <div className="pd__kpis">
            <div className="pd__kpi"><span>Lifts managed</span><b>48</b></div>
            <div className="pd__kpi pd__kpi--hot"><span>Recovered YTD</span><b>${recovered.toLocaleString()}</b></div>
            <div className="pd__kpi"><span>Compliance</span><b>96%</b></div>
          </div>
          <div className="pd__cols">
            <div className="pd__feed">
              <div className="pd__head">
                <div className="pd__title"><b>{month} maintenance invoice</b><span>ELE-4471 · Tower A</span></div>
                <span className={"pd__chip" + (allDone ? " pd__chip--flag" : "")}>
                  {allDone ? found.length + " flagged" : "AI checking…"}
                </span>
              </div>
              <div className="pd__rows">
                {DEMO_ROWS.map((r, i) => {
                  const st = status(i);
                  return (
                    <div className={"pdrow pdrow--" + st} key={r.t}>
                      <span className={"lrow__dot lrow__dot--" + (st === "done" ? r.v : st === "scan" ? "accent" : "ok")}></span>
                      <div className="pdrow__main">
                        <div className="pdrow__t">{r.t}</div>
                        <div className="pdrow__s">{st === "scan" ? "Checking against contract…" : st === "done" ? r.s : "Queued"}</div>
                      </div>
                      {st === "done"
                        ? <span className={"ltag ltag--" + r.v}>{r.amt}</span>
                        : <span className="ltag ltag--ok">{st === "scan" ? "···" : "-"}</span>}
                    </div>
                  );
                })}
              </div>
              <div className={"pd__sum" + (allDone ? " pd__sum--on" : "")}>
                <span>{found.length} issues this invoice</span>
                <b>${foundSum.toLocaleString()} recoverable</b>
              </div>
            </div>
            <div className="pd__cx">
              <div className="pd__head"><div className="pd__title"><b>CapEx forecast</b><span>Component-level · 5yr</span></div></div>
              <div className="pd__bars">
                {[34, 48, 30, 86, 58].map((h, i) => (
                  <div className="pd__bcol" key={i}>
                    <div className={"pd__b" + (i === 3 ? " pd__b--flag" : "")} style={{ height: h + "%" }}></div>
                    <span>{"’" + (26 + i)}</span>
                  </div>
                ))}
              </div>
              <div className="pd__note"><span className="lrow__dot lrow__dot--flag"></span>Door operator due ’29 · plan now</div>
            </div>
          </div>
        </div>
      </div>
      <div className="pd__sheen"></div>
    </div>
  );
}

/* ============================================================
   Hero demo player: a scripted product walkthrough that does
   the job of a demo video: three chapters, each showing a real
   workflow with a VO-style caption speaking to the pain.
   ============================================================ */
const DP_TICK = 500; /* ms per beat tick */
const DP_SCENE_TICKS = 17; /* 8.5s per chapter */
const DP_SCENES = [
  {
    id: "invoice", label: "Catch the overcharge", crumb: "Invoices / June",
    captions: [
      "The invoice shows a 4.8% CPI uplift. Your contract allows 3.1%. Would you have caught it?",
      "LPM checks every line against your agreement. $3,081 recoverable this quarter alone.",
    ],
  },
  {
    id: "visits", label: "Credit missed visits", crumb: "Maintenance / Q2",
    captions: [
      "Six service visits contracted this quarter. Your lift got four. Easy to miss without tracking.",
      "Every missed or short visit is tracked automatically, as a credit owed back to you.",
    ],
  },
  {
    id: "capex", label: "See CapEx coming", crumb: "CapEx / Tower A",
    captions: [
      "The door operator is due in 2029. An estimated $48k your committee doesn't know about.",
      "LPM gives you four years' notice, validated against your repair history. No more blindsides.",
    ],
  },
];

function SceneInvoice({ beat }) {
  const rows = [
    { t: "Monthly service fee", s: "Matches contracted rate", amt: "$1,240", v: "ok" },
    { t: "CPI escalation", s: "Contract allows 3.1% · billed 4.8%", amt: "+$211", v: "flag" },
    { t: "After-hours call-out", s: "Already covered by contract", amt: "$1,100", v: "flag" },
    { t: "Door operator parts", s: "Capital works, not maintenance", amt: "$1,150", v: "flag" },
  ];
  return (
    <div className="dpscene">
      <div className="pd__head">
        <div className="pd__title"><b>June maintenance invoice</b><span>ELE-4471 · Tower A</span></div>
        <span className={"pd__chip" + (beat ? " pd__chip--flag" : "")}>{beat ? "3 charges flagged" : "AI checking…"}</span>
      </div>
      <div className="pd__rows">
        {rows.map((r, i) => (
          <div className="pdrow" key={r.t} style={{ animationDelay: 0.4 + i * 0.55 + "s" }}>
            <span className={"lrow__dot lrow__dot--" + r.v}></span>
            <div className="pdrow__main"><div className="pdrow__t">{r.t}</div><div className="pdrow__s">{r.s}</div></div>
            <span className={"ltag ltag--" + r.v}>{r.amt}</span>
          </div>
        ))}
      </div>
      <div className={"pd__sum" + (beat ? " pd__sum--on" : "")}>
        <span>3 issues · 1 missed-visit credit</span>
        <b>$3,081 recoverable</b>
      </div>
    </div>
  );
}

function SceneVisits({ beat }) {
  const rows = [
    { t: "February service visit", s: "Completed · 64 min on site", amt: "Done", v: "ok" },
    { t: "March service visit", s: "Completed · 58 min on site", amt: "Done", v: "ok" },
    { t: "April service visit", s: "No visit logged", amt: "Missed", v: "flag" },
    { t: "May service visit", s: "22 min on site · below scope", amt: "Short", v: "flag" },
  ];
  return (
    <div className="dpscene">
      <div className="pd__head">
        <div className="pd__title"><b>Service visits: Q2</b><span>Contracted · 6 visits per quarter</span></div>
        <span className={"pd__chip" + (beat ? " pd__chip--flag" : "")}>{beat ? "2 visits owed" : "Tracking…"}</span>
      </div>
      <div className="pd__rows">
        {rows.map((r, i) => (
          <div className="pdrow" key={r.t} style={{ animationDelay: 0.4 + i * 0.55 + "s" }}>
            <span className={"lrow__dot lrow__dot--" + r.v}></span>
            <div className="pdrow__main"><div className="pdrow__t">{r.t}</div><div className="pdrow__s">{r.s}</div></div>
            <span className={"ltag ltag--" + r.v}>{r.amt}</span>
          </div>
        ))}
      </div>
      <div className={"pd__sum" + (beat ? " pd__sum--on" : "")}>
        <span>Credit tracker · runs on its own</span>
        <b>$620 credit booked</b>
      </div>
    </div>
  );
}

function SceneCapex({ beat }) {
  const bars = [
    { yr: "’26", h: 30 }, { yr: "’27", h: 18 }, { yr: "’28", h: 42 },
    { yr: "’29", h: 88, flag: true }, { yr: "’30", h: 26 }, { yr: "’31", h: 52 },
  ];
  return (
    <div className="dpscene">
      <div className="pd__head">
        <div className="pd__title"><b>CapEx forecast: Tower A</b><span>Component-level · validated vs repair history</span></div>
        <span className="pd__chip">10-year view</span>
      </div>
      <div className="pd__bars dpx__bars">
        {bars.map((b, i) => (
          <div className="pd__bcol" key={b.yr}>
            <div className={"pd__b" + (b.flag ? " pd__b--flag" : "")} style={{ height: b.h + "%", animationDelay: 0.35 + i * 0.18 + "s" }}></div>
            <span>{b.yr}</span>
          </div>
        ))}
      </div>
      <div className={"pd__sum pd__sum--cap" + (beat ? " pd__sum--on pd__sum--warn" : "")}>
        <span>2029 · Door operator replacement</span>
        <b>est. $48k · 4 years’ notice</b>
      </div>
    </div>
  );
}

function DemoPlayer() {
  const [t, setT] = useState(0);
  const [paused, setPaused] = useState(!MOTION_OK);
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setT((x) => x + 1), DP_TICK);
    return () => clearInterval(id);
  }, [paused]);
  const scene = Math.floor(t / DP_SCENE_TICKS) % DP_SCENES.length;
  const beat = t % DP_SCENE_TICKS < DP_SCENE_TICKS / 2 ? 0 : 1;
  const S = DP_SCENES[scene];
  return (
    <div className="pd dp">
      <div className="pd__bar">
        <div className="pd__dots"><i></i><i></i><i></i></div>
        <span className="pd__url">liftportfoliomanagement.com.au · {S.crumb}</span>
        <span className="pd__live"><i></i>Product demo</span>
      </div>
      <div className="dp__stagearea" key={scene}>
        {scene === 0 && <SceneInvoice beat={beat} />}
        {scene === 1 && <SceneVisits beat={beat} />}
        {scene === 2 && <SceneCapex beat={beat} />}
      </div>
      <div className="dp__caption" key={"c" + scene + beat}>
        <span className="dp__vo">{S.captions[beat]}</span>
      </div>
      <div className="dp__chapters">
        {DP_SCENES.map((s, i) => (
          <button type="button" key={s.id} className={"dp__chap" + (i === scene ? " dp__chap--on" : "")}
            onClick={() => { setT(i * DP_SCENE_TICKS); }}>
            <span className="dp__chap-label">{i + 1}. {s.label}</span>
            <span className="dp__chap-bar">
              <i style={i === scene ? { animationDuration: DP_SCENE_TICKS * DP_TICK + "ms", animationPlayState: paused ? "paused" : "running" } : null}></i>
            </span>
          </button>
        ))}
        <button type="button" className="dp__pp" onClick={() => setPaused((p) => !p)} aria-label={paused ? "Play demo" : "Pause demo"}>
          <Icon name={paused ? "play" : "pause"} stroke={2} />
        </button>
      </div>
    </div>
  );
}

/* ---------- hero ---------- */
/* word-by-word entrance; `from` offsets the stagger across lines */
function Words({ text, from = 0 }) {
  return text.split(" ").map((w, i) => (
    <React.Fragment key={i}>
      <span className="hw" style={{ animationDelay: `${0.05 + (from + i) * 0.07}s` }}>{w}</span>{" "}
    </React.Fragment>
  ));
}

/* floating proof cards orbiting the dashboard at different parallax depths */
function HeroFloats() {
  return (
    <>
      <div className="float float--flag" aria-hidden="true">
        <div className="float__in">
          <span className="float__ico float__ico--flag"><Icon name="alert" /></span>
          <div>
            <div className="float__t">Overcharge flagged <span className="ltag ltag--flag">+$211</span></div>
            <div className="float__s">CPI billed 4.8%, contract caps at 3.1%</div>
          </div>
        </div>
      </div>
      <div className="float float--good" aria-hidden="true">
        <div className="float__in">
          <span className="float__ico float__ico--good"><Icon name="check" stroke={2.2} /></span>
          <div>
            <div className="float__t">Credit booked <span className="ltag ltag--good">$620</span></div>
            <div className="float__s">2 missed service visits this quarter</div>
          </div>
        </div>
      </div>
      <div className="float float--lola" aria-hidden="true">
        <div className="float__in float__in--col">
          <span className="float__lola"><AIMark size={13} /> Ask Lola <i className="float__live"></i></span>
          <span className="float__q">“Can they bill us for this controller?”</span>
          <span className="float__a">No. That's capital works, excluded from your maintenance fee. <b>Clause 7.3.</b></span>
        </div>
      </div>
    </>
  );
}

function HeroA() {
  useParallax(".hero"); // spotlight follows the cursor across the hero
  return (
    <section className="hero">
      <div className="wrap heroA">
        <div className="hero__pre rise"><Badge /></div>
        <h1 className="headline">
          <Words text="A complete view of your" />
          <span className="grad"><Words text="lift portfolio," from={5} /></span>
          <br />
          <Words text="in one platform." from={7} />
        </h1>
        {/* no 3D tilt here: transforms rasterize text and the film must stay crisp */}
        <div className="heroA__media glow-pad rise" style={{ animationDelay: ".55s" }}>
          <VideoFrame />
        </div>
        <p className="subcopy rise" style={{ animationDelay: ".7s" }}>
          LPM is the digital consultant that gives building managers, strata committees and FM companies
          the full picture: contracts, maintenance, invoices, call-outs and capital works.
        </p>
        <div className="rise" style={{ animationDelay: ".85s" }}>
          <Waitlist center variant="accent" />
        </div>
      </div>
    </section>
  );
}

function Strip() {
  return (
    <div className="strip">
      <div className="strip__rail">
        <div className="strip__track">
          {[...CAPABILITIES, ...CAPABILITIES].map((c, i) => (
            <span className="strip__item" key={i}>
              <span className="strip__ico"><Icon name={c.icon} /></span>
              {c.label}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- showcase: the animated dashboard in its own scene ---------- */
function Showcase() {
  useParallax(".showcase");
  return (
    <section className="section showcase" id="demo">
      <div className="wrap">
        <div className="section__head section__head--center">
          <span className="eyebrow">Inside the platform</span>
          <h2 className="section__title">This is LPM, working.</h2>
          <p className="section__sub">A live look at the dashboard: every invoice checked line-by-line, every missed visit flagged, every forecast validated, all in one place.</p>
        </div>
        <div className="glow-pad">
          <ScrollTilt max={12}>
            <div className="stage">
              <div className="stage__tilt"><ProductDemo /></div>
            </div>
          </ScrollTilt>
        </div>
      </div>
    </section>
  );
}

function Guard() {
  return (
    <section className="section" id="savings">
      <div className="wrap">
        <div className="guard__grid">
          <div className="guard__copy">
            <span className="eyebrow" style={{ fontSize: "13px" }}>Why LPM</span>
            <h2 className="section__title">Stop paying for things<br />you shouldn't.</h2>
            <p className="section__sub">Lift agreements are detailed, and checking every line by hand isn't realistic. LPM does it for you, so excess charges and missed-visit credits surface on their own.</p>
            <p className="guard__kicker">A platform that <span>pays for itself.</span></p>
            <div className="guard__points">
              {GUARD_POINTS.map((p) => (
                <div className="gpoint" key={p.title}>
                  <div className="gpoint__ico"><Icon name={p.icon} /></div>
                  <div>
                    <div className="gpoint__t">{p.title}</div>
                    <div className="gpoint__d">{p.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="glow-pad">
            <div className="ledger">
              <div className="ledger__top">
                <div className="ledger__title">
                  <b>June maintenance invoice</b>
                  <span>Contract ELE-4471 · Tower A</span>
                </div>
                <div className="ledger__chip">3 charges flagged</div>
              </div>
              <div className="ledger__sec ledger__sec--top">Invoice check</div>
              <div className="ledger__rows">
                <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">CPI escalation</div><div className="lrow__s">Contract allows 3.1% · billed 4.8%</div></div>
                  <span className="ltag ltag--flag">+$211</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">Already covered by contract</div></div>
                  <span className="ltag ltag--flag">$1,100</span>
                </div>
                <div className="lrow">
                  <span className="lrow__dot lrow__dot--flag"></span>
                  <div className="lrow__main"><div className="lrow__t">Door operator parts</div><div className="lrow__s">Capital works, not maintenance</div></div>
                  <span className="ltag ltag--flag">$1,150</span>
                </div>
              </div>
              <div className="ledger__sec ledger__sec--credit">Maintenance credits</div>
              <div className="ledger__rows">
                <div className="lrow">
                  <span className="lrow__dot lrow__dot--good"></span>
                  <div className="lrow__main"><div className="lrow__t">Missed service visits</div><div className="lrow__s">2 of 6 contracted visits this quarter</div></div>
                  <span className="ltag ltag--good">$620 credit</span>
                </div>
              </div>
              <div className="ledger__foot">
                <div>
                  <span>Recoverable this quarter</span>
                  <b><CountUp to={3081} prefix="$" /></b>
                  <small>across 4 line items · 1 contract</small>
                </div>
                <a className="btn btn--ghost" href="activity.html#invoices">How it works<span className="arr"><Icon name="arrow" /></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- flagged home feature: the free public invoice audit ---------- */
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 FreeAudit() {
  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">Audit 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 pay. 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 Features() {
  return (
    <section className="section" id="platform">
      <div className="wrap">
        <div className="section__head section__head--center">
          <span className="eyebrow">The platform</span>
          <h2 className="section__title">Everything in one place.</h2>
          <p className="section__sub">Lift information has been hard to access and harder to interpret. LPM gives you the same level of insight your contractor has, across contracts, day-to-day activity and long-term planning.</p>
        </div>
        {GROUPS.map((g) => (
          <div className="fgroup" key={g.label}>
            <div className="fgroup__head">
              <span className="fgroup__label">{g.label}</span>
              <span className="fgroup__rule"></span>
              <a className="fgroup__link" href={g.page}>Explore <Icon name="arrow" /></a>
            </div>
            <div className={"fgrid" + (g.items.length % 3 === 0 ? " fgrid--3" : "")}>
              {g.items.map((f) => (
                <a className="fcard" key={f.title} href={f.href}>
                  <span className="fcard__go"><Icon name="arrow" /></span>
                  <div className="fcard__ico"><Icon name={f.icon} /></div>
                  <h3 className="fcard__title">{f.title}</h3>
                  <p className="fcard__desc">{f.desc}</p>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">How it works</span>
          <h2 className="section__title">From paperwork to clarity.</h2>
        </div>
        <div className="steps">
          {STEPS.map((s, i) => (
            <div className="step" key={s.title}>
              <div className="step__n">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Audiences() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">Who it's for</span>
          <h2 className="section__title">Built for the people<br />who pay the bills.</h2>
        </div>
        <div className="aud">
          {AUDIENCES.map((a, i) => (
            <div className="aud__card" key={a.title}>
              <div className="aud__num">0{i + 1}</div>
              <h3 className="aud__title">{a.title}</h3>
              <p className="aud__desc">{a.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- soundbites: 3 punchy hooks that route to the deep pages ---------- */
const SOUNDBITES = [
  { icon: "receipt", title: "Catch overcharges", desc: "Every invoice line is checked against your contract and escalation cap, and overcharges are flagged before you pay.", href: "invoicing.html" },
  { icon: "wrench", title: "Credit missed visits", desc: "Missed service visits are tracked automatically, and credits are flagged for discussion.", href: "activity.html" },
  { icon: "trend", title: "Forecast CapEx", desc: "Component-level replacement costs highlighted years out, validated against your repair history. No more blindsides.", href: "enterprise.html" },
];

function Soundbites() {
  return (
    <section className="section" id="why">
      <div className="wrap">
        <div className="section__head section__head--center">
          <span className="eyebrow">Why LPM</span>
          <h2 className="section__title">Stop paying for things you shouldn't.</h2>
          <p className="section__sub">The same view your contractor has, across invoices, maintenance and capital works. Explore what LPM does:</p>
        </div>
        <div className="fgrid fgrid--3">
          {SOUNDBITES.map((s) => (
            <a className="fcard" key={s.title} href={s.href}>
              <span className="fcard__go"><Icon name="arrow" /></span>
              <div className="fcard__ico"><Icon name={s.icon} /></div>
              <h3 className="fcard__title">{s.title}</h3>
              <p className="fcard__desc">{s.desc}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- real people: human support is part of the product ---------- */
const SUPPORT = [
  { icon: "award", title: "Founder-led help", desc: "You reach someone who has actually priced and managed lift contracts, and knows where the value hides." },
  { icon: "mail", title: "A real reply, fast", desc: "Email our support team and hear back from a real person within one business day. Not a bot, not a queue." },
  { icon: "shield", title: "In your corner", desc: "We are here to help you get the most from every contract, and keep your relationship with your contractor working well." },
];

function Support() {
  return (
    <section className="section band" id="support">
      <div className="wrap">
        <div className="section__head section__head--center">
          <span className="eyebrow">Real people behind it</span>
          <h2 className="section__title">Software does the work.<br />Real people have your back.</h2>
          <p className="section__sub">LPM is built and run by people who have worked inside the lift industry. When you need a hand, you reach a person who understands your portfolio, not a ticket number.</p>
        </div>
        <div className="fgrid fgrid--3">
          {SUPPORT.map((s) => (
            <div className="fcard" key={s.title}>
              <div className="fcard__ico"><Icon name={s.icon} /></div>
              <h3 className="fcard__title">{s.title}</h3>
              <p className="fcard__desc">{s.desc}</p>
            </div>
          ))}
        </div>
        <div className="section__head section__head--center" style={{ marginTop: 28 }}>
          <a className="btn btn--accent" href="contact.html">Talk to a real person <span className="arr"><Icon name="arrow" /></span></a>
        </div>
      </div>
    </section>
  );
}

/* Structured data for search + AI answer engines. No pricing offers yet —
   pricing goes public when the waitlist comes down. Entity @ids are shared
   with the FAQ page so they resolve to one organisation/site. */
const homeSchema = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://liftportfoliomanagement.com.au/#organization",
      name: "Lift Portfolio Management",
      url: "https://liftportfoliomanagement.com.au/",
      logo: "https://liftportfoliomanagement.com.au/assets/favicon.svg",
      description:
        "Independent lift portfolio management platform for building managers, strata committees and facility management companies in Australia and New Zealand. Manage lift contracts, maintenance, invoices, call-outs, audit reports and capital works planning in one place.",
      areaServed: ["AU", "NZ"],
      knowsAbout: [
        "Lift maintenance management",
        "Elevator portfolio management",
        "Lift contract management",
        "Maintenance invoice validation",
        "Maintenance tendering",
        "Capital works forecasting",
      ],
    },
    {
      "@type": "WebSite",
      "@id": "https://liftportfoliomanagement.com.au/#website",
      url: "https://liftportfoliomanagement.com.au/",
      name: "LPM · Lift Portfolio Management",
      publisher: { "@id": "https://liftportfoliomanagement.com.au/#organization" },
    },
    {
      "@type": "SoftwareApplication",
      "@id": "https://liftportfoliomanagement.com.au/#software",
      name: "LPM · Lift Portfolio Management",
      url: "https://liftportfoliomanagement.com.au/",
      applicationCategory: "BusinessApplication",
      operatingSystem: "Web browser",
      creator: { "@id": "https://liftportfoliomanagement.com.au/#organization" },
      description:
        "Web-based platform for building managers, strata committees and FM companies to manage lift and elevator portfolios: contract management, AI invoice validation, maintenance tracking, call-out logging, audit report import, maintenance tendering and capital works forecasting.",
      featureList: [
        "Lift contract management with escalation tracking",
        "AI invoice validation against the contract",
        "Maintenance visit and call-out tracking",
        "Structured maintenance tendering and quote comparison",
        "Capital works and CapEx forecasting",
        "Lola, an AI assistant grounded in your documents",
      ],
    },
  ],
};

function App() {
  return (
    <PageShell current="">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(homeSchema) }}
      />
      <HeroA />
      <Strip />
      <Soundbites />
      <Showcase />
      <FreeAudit />
      <HowItWorks />
      <Audiences />
      <Support />
      <CTASection />
    </PageShell>
  );
}

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