/* ============ Free Lift Savings Report · landing page for body corporate 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.html#service",
  name: "LPM · Free Lift Savings Report",
  url: "https://liftportfoliomanagement.com.au/lift-savings-report.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 body corporate and strata 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="Body corporate or management company" value={f.company} onChange={set("company")} aria-label="Body corporate 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: "Getting answers takes time", desc: "Lift companies are busy, and a call back about an invoice or a contract question can take a while. In the meantime, the bill is usually just paid as issued." },
  { icon: "file", title: "Nobody reads the contract", desc: "Lift maintenance agreements are technical documents. Outside the industry, few people know what is covered, what escalates, and when the notice window closes. So the contract ends up managed by the lift company." },
  { icon: "receipt", title: "Invoices go through unchecked", desc: "Invoices arrive, get uploaded to a portal and approved, 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 table at your next committee meeting, 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 body corporate &amp; strata managers</span>
              <h1 className="lmr-h1">Lift savings you can hand straight to your committee.</h1>
              <p className="lmr-sub">
                The Lift Savings Report is a free, independent check of one building's lift contract and last three
                invoices, by a lift industry expert. We find what the building is being overcharged for, you table the
                findings, quoted to the exact clause, before being asked by the committee.
              </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>
          </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 />);