/* ============ Free Lift Savings Report · landing page for building & facility managers ============
   Framework: one promise, one visual proof, one CTA (the form), justification line,
   three objections, credibility below the fold, minimal footer. No nav, no video. */
const { useState } = React;
const { Icon, Mark, Verdict } = window;

const MONEY_REPORT_API = "https://app.liftportfoliomanagement.com.au/api/money-report";

const pageSchema = {
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "@id": "https://liftportfoliomanagement.com.au/lift-savings-report-building-managers.html#service",
  name: "LPM · Free Lift Savings Report",
  url: "https://liftportfoliomanagement.com.au/lift-savings-report-building-managers.html",
  provider: { "@id": "https://liftportfoliomanagement.com.au/#organization" },
  areaServed: [
    { "@type": "Country", name: "Australia" },
    { "@type": "AdministrativeArea", name: "South East Queensland" },
  ],
  description:
    "Free independent check of one building's lift maintenance contract and last three invoices for building and facility managers. Plain-English findings inside 3 days. No obligation, no commissions from lift companies.",
  offers: { "@type": "Offer", price: "0", priceCurrency: "AUD" },
};

/* ---------- visual proof: sample Lift Savings Report ---------- */
function ReportPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Lift Savings Report · sample</b><span>42 apartments · 2 lifts · SEQ</span></div>
        <div className="panel__chip panel__chip--flag">$4,300 found</div>
      </div>
      <div className="panel__sec">Three invoices, one contract</div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Annual escalation</div><div className="lrow__s">Applied 6.1%, contract caps increases at CPI</div></div><span className="ltag ltag--flag">Over cap</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, $760</div><div className="lrow__s">Billed as an extra, covered under clause 4.2</div></div><span className="ltag ltag--flag">Covered</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--good"></span><div className="lrow__main"><div className="lrow__t">Quarterly service visits</div><div className="lrow__s">Match the contract schedule and rate</div></div><span className="ltag ltag--good">Correct</span></div>
      <Verdict inPanel tag="Plain English" title="Two charges to query before paying">
        Each finding is quoted back to <strong>the exact clause</strong>, ready to send to the lift company in one email.
      </Verdict>
    </div>
  );
}

/* ---------- the single CTA: lead form ---------- */
function LeadForm() {
  const [f, setF] = useState({ name: "", email: "", phone: "", company: "", buildings: "" });
  const [state, setState] = useState("idle");
  const [errorMsg, setErrorMsg] = useState("");
  const set = (k) => (e) => { setF({ ...f, [k]: e.target.value }); if (state === "error") { setState("idle"); setErrorMsg(""); } };

  async function submit(e) {
    e.preventDefault();
    if (!f.name.trim()) { setErrorMsg("Please enter your name."); setState("error"); return; }
    if (!f.email.includes("@")) { setErrorMsg("Please enter a valid email address."); setState("error"); return; }
    if (!f.phone.trim()) { setErrorMsg("Please enter the best number to call you on."); setState("error"); return; }
    setState("loading");
    try {
      const res = await fetch(MONEY_REPORT_API, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: f.name.trim(), email: f.email.trim(), phone: f.phone.trim() || undefined,
          company: f.company.trim() || undefined, buildings: f.buildings || undefined,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok) { if (window.gtag) window.gtag("event", "money_report_submitted"); setState("success"); return; }
      setErrorMsg(data.error || "Something went wrong. Please try again.");
      setState("error");
    } catch {
      setErrorMsg("Couldn't reach the server. Please try again in a moment.");
      setState("error");
    }
  }

  if (state === "success") {
    return (
      <div className="lmr-form">
        <div className="wl__success" style={{ width: "100%" }}>
          <div className="wl__success-title">
            <span style={{ color: "var(--accent)", display: "inline-flex" }}><Icon name="check" stroke={2.2} /></span>
            Done. Gareth will call you within 30 minutes.
          </div>
          <p className="wl__success-sub">
            During business hours, Mon to Fri 8am to 6pm AEST, expect the call within 30 minutes; outside those hours
            you get the first call of the next business morning. Gareth will confirm which building to start with, then
            it is one email: the building's last three lift invoices and its maintenance contract. Findings inside 3 days.
          </p>
        </div>
      </div>
    );
  }

  return (
    <form className="lmr-form" onSubmit={submit}>
      <div className="lmr-form__head">
        <h2 className="lmr-form__title">Get your free Lift Savings Report</h2>
        <p className="lmr-form__sub">Takes about 60 seconds. Gareth will personally call you within 30 minutes, Mon to Fri 8am to 6pm AEST.</p>
      </div>
      <input className="wl__input" type="text" placeholder="Your name" value={f.name} onChange={set("name")} aria-label="Your name" />
      <input className="wl__input" type="email" placeholder="Work email" value={f.email} onChange={set("email")} aria-label="Work email" />
      <input className="wl__input" type="tel" placeholder="Best number to call you on" value={f.phone} onChange={set("phone")} aria-label="Best number to call you on" />
      <p className="lmr-form__hint">Needed so Gareth can call you about your report. Never added to a sales list.</p>
      <input className="wl__input" type="text" placeholder="Building or management company" value={f.company} onChange={set("company")} aria-label="Building or management company" />
      <select className="wl__input lmr-form__select" value={f.buildings} onChange={set("buildings")} aria-label="Buildings with lifts under your management">
        <option value="">Buildings with lifts you manage</option>
        <option value="1">1 building</option>
        <option value="2-5">2 to 5 buildings</option>
        <option value="6-20">6 to 20 buildings</option>
        <option value="20+">More than 20 buildings</option>
      </select>
      <button className="btn btn--accent lmr-form__btn" type="submit" disabled={state === "loading"}>
        {state === "loading" ? "Sending…" : <>Get my free report<span className="arr"><Icon name="arrow" /></span></>}
      </button>
      {state === "error"
        ? <p className="wl__err">{errorMsg}</p>
        : <p className="lmr-form__why">Why free? Because managers who see the value pass it on. No obligation, and the findings are yours to table either way.</p>}
      <p className="wl__note" style={{ marginTop: 6, fontSize: 12 }}>
        By requesting the report, you agree to our <a href="https://app.liftportfoliomanagement.com.au/privacy" style={{ color: "inherit", textDecoration: "underline" }}>Privacy Policy</a>.
      </p>
    </form>
  );
}

/* ---------- why bills go unchecked ---------- */
const PROBLEMS = [
  { icon: "phone", title: "You chase, then you wait", desc: "You log the call-out and field the residents while the technician is scheduled. A call back about an invoice or a contract question can take even longer, and the bill is usually just paid as issued." },
  { icon: "file", title: "The contract was not written for you", desc: "You inherited an agreement someone else signed. What is covered, what escalates and what counts as an extra sits buried in clauses nobody on site has time to decode. So the contract ends up managed by the lift company." },
  { icon: "receipt", title: "Invoices sail through", desc: "Invoices get approved upstream, often without anyone checking them against the contract first. A quick precheck before an invoice is uploaded catches covered work and over-cap escalations early, with no issues to unwind later, and gives you back the hours spent chasing them." },
];

const STEPS = [
  { n: "1", title: "Send the documents", desc: "One email: your last three lift invoices and the maintenance contract for one building. That is the ten minutes, and it is all we ever need from you." },
  { n: "2", title: "We check every line", desc: "A lift industry expert matches every charge to the contract: escalations, call-outs, coverage, visits delivered." },
  { n: "3", title: "Findings inside 3 days", desc: "A plain-English report with every flagged dollar quoted to the exact clause. Ready to hand to your committee or strata manager, and yours to take the credit for." },
];

function Page() {
  return (
    <div className="page">
      <div className="aurora" aria-hidden="true"><i></i><i></i><i></i></div>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(pageSchema) }} />

      {/* minimal header: brand + phone, no nav */}
      <header className="lmr-top">
        <div className="wrap lmr-top__row">
          <a className="brand" href="index.html"><Mark size={24} /><span className="brand__name">LPM</span></a>
          <a className="lmr-top__phone" href="tel:+61424614774"><Icon name="phone" stroke={1.8} />0424 614 774</a>
        </div>
      </header>

      <main>
        <section className="lmr-hero">
          <div className="wrap lmr-hero__grid">
            <div className="lmr-hero__copy">
              <span className="eyebrow">Free · For building &amp; facility managers</span>
              <h1 className="lmr-h1">Know your lifts better than the lift company.</h1>
              <p className="lmr-sub">
                The Lift Savings Report is a free, independent check of your building's lift contract and last three
                invoices, by a lift industry expert. We find what the building is being overcharged for, you hand the
                findings to your committee or strata manager, quoted to the exact clause.
              </p>
              <p className="gbar gbar--bold">
                <span className="gbar__tag">Our guarantee</span>
                If we do not find you <strong>twice our fee</strong> in savings, <strong>your next month is free.</strong>
              </p>
            </div>
            <div className="lmr-hero__proof"><ReportPanel /></div>
            <div className="lmr-hero__form"><LeadForm /></div>
          </div>
          <div className="wrap">
            <p className="hero-objections lmr-objections">
              <span>Ten minutes of your time</span>
              <span>We check the bills, not replace your contractor</span>
              <span>No commissions, from anyone</span>
            </p>
          </div>
        </section>

        <section className="section" id="why">
          <div className="wrap">
            <div className="section__head">
              <span className="eyebrow">Why this keeps happening</span>
              <h2 className="section__title">Three quiet problems<br />with lift maintenance.</h2>
            </div>
            <div className="fgrid fgrid--3">
              {PROBLEMS.map((p) => (
                <div className="fcard" key={p.title}>
                  <div className="fcard__ico"><Icon name={p.icon} /></div>
                  <h3 className="fcard__title">{p.title}</h3>
                  <p className="fcard__desc">{p.desc}</p>
                </div>
              ))}
            </div>
            <p className="gbar" style={{ maxWidth: 720, margin: "36px auto 0" }}>
              <span className="gbar__tag">Why now</span>
              From 29 March 2026, Queensland's work health and safety rules expressly extend to lifts in residential
              buildings as registrable high-risk plant. The building has to be able to show its lifts are maintained
              and safe to operate. An independent record of what the contract requires, and whether the invoices match
              it, is the simplest evidence of diligence there is.
            </p>
          </div>
        </section>

        <section className="section band" id="how">
          <div className="wrap">
            <div className="section__head">
              <span className="eyebrow">How it works</span>
              <h2 className="section__title">One email. Three days.</h2>
            </div>
            <div className="lmr-steps">
              {STEPS.map((s) => (
                <div className="lmr-step" key={s.n}>
                  <div className="fstep__n">{s.n}</div>
                  <h3 className="lmr-step__title">{s.title}</h3>
                  <p className="lmr-step__desc">{s.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="section" id="who">
          <div className="wrap">
            <div className="lmr-founder">
              <img className="lmr-founder__photo" src="assets/gareth-2026.png" alt="Gareth Evans, founder of LPM" />
              <div className="lmr-founder__body">
                <span className="eyebrow">Who checks your report</span>
                <h2 className="section__title" style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)" }}>Gareth Evans, founder.</h2>
                <p className="lmr-founder__desc">
                  18 years in the lift industry across sales, operations and state-level management, now working only
                  on the building owner's side of the table. LPM is independent by design: fixed fees, and no
                  commissions, referral fees or payments of any kind from lift companies.
                </p>
                <p className="lmr-founder__contact">
                  Questions first? Call <a href="tel:+61424614774">0424 614 774</a> or email{" "}
                  <a href="mailto:gareth@liftportfoliomanagement.com.au">gareth@liftportfoliomanagement.com.au</a>.
                </p>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* minimal footer: legal + independence line only */}
      <footer className="footer lmr-foot">
        <div className="wrap">
          <div className="lmr-foot__row">
            <a className="brand" href="index.html"><Mark size={22} /><span className="brand__name">LPM</span></a>
            <div className="lmr-foot__links">
              <a href="index.html">liftportfoliomanagement.com.au</a>
              <a href="https://app.liftportfoliomanagement.com.au/privacy">Privacy</a>
              <a href="https://app.liftportfoliomanagement.com.au/terms">Terms</a>
            </div>
          </div>
          <div className="footer__bottom">
            <span>© {new Date().getFullYear()} Lift Portfolio Management Pty Ltd · ABN 55 699 041 391</span>
            <span>LPM accepts no commissions, referral fees or payments of any kind from lift companies.</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

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