/* ===================== About page ===================== */
const { Icon, PageShell, PageHero, HOME } = window;

const VALUES = [
  { icon: "scale", title: "Impartial, always", desc: "We don't sell maintenance, parts or installations. We have no stake in the work we review, so our advice answers to you, and only you." },
  { icon: "search", title: "Transparent by default", desc: "Every flag, benchmark and recommendation shows its working and cites the clause or figure behind it. No black boxes." },
  { icon: "shield", title: "On the owner's side", desc: "Built for the people who own and run buildings: managers, committees and FM teams. We work for you, so the information is always in your interest." },
];

function Belief() {
  return (
    <section className="belief band">
      <div className="wrap">
        <p className="belief__q">
          Lift contracts, invoices, and capital plans contain a lot of detail, and it hasn't
          always been easy to access or understand them. <em>LPM exists to change that:</em> clear,
          impartial information that makes it simple to improve efficiency, reduce costs and
          stay compliant.
        </p>
        <div className="belief__by">What we believe</div>
      </div>
    </section>
  );
}

function Founder() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">Experience</span>
          <h2 className="section__title">Built on two decades<br />inside the industry.</h2>
          <p className="section__sub">LPM was built by people who have spent nearly twenty years in the lift industry, across sales, installation, service operations and state-level management.</p>
        </div>

        <div className="fgrid fgrid--3" style={{ alignItems: "stretch" }}>
          <div className="fcard">
            <div className="fcard__ico"><Icon name="file" /></div>
            <h3 className="fcard__title">We've written the contracts</h3>
            <p className="fcard__desc">How agreements are structured, how fees escalate, and where the details matter, and that knowledge is built into every check LPM runs.</p>
          </div>
          <div className="fcard">
            <div className="fcard__ico"><Icon name="wrench" /></div>
            <h3 className="fcard__title">We've run the service teams</h3>
            <p className="fcard__desc">Years managing maintenance operations mean LPM knows what a fair scope is, what a complete service visit looks like, and what reasonable response times look like.</p>
          </div>
          <div className="fcard">
            <div className="fcard__ico"><Icon name="trend" /></div>
            <h3 className="fcard__title">We've priced the capital works</h3>
            <p className="fcard__desc">From modernisations to full replacements, and LPM's forecasts are grounded in how this equipment really ages and what it really costs.</p>
          </div>
        </div>
        <p className="section__sub" style={{ marginTop: 32, maxWidth: 720 }}>
          That experience is what the platform packages: information that used to be hard to
          access and harder to interpret, made clear. Better efficiency, lower costs, stronger
          compliance, and decisions made with the full picture in mind.
        </p>
      </div>
    </section>
  );
}

function WhyDigital() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">On your side</span>
          <h2 className="section__title">A different kind of oversight.</h2>
          <p className="section__sub">You are across plumbing, fire, security and a dozen other contracts. LPM ensures lifts do not add to that load, staying across renewals, compliance and the day-to-day and giving you clear guidance whenever a decision lands on your desk.</p>
        </div>
        <div className="fgrid fgrid--3" style={{ alignItems: "stretch" }}>
          <div className="fcard">
            <div className="fcard__ico"><Icon name="gauge" /></div>
            <h3 className="fcard__title">Caught early, most issues are a conversation</h3>
            <p className="fcard__desc">Catching things early means problems surface when they are still minor. A missed visit is resolved this week, not disputed at renewal. When you are consistently across the detail, the contractor relationship stays professional and productive on both sides.</p>
          </div>
          <div className="fcard">
            <div className="fcard__ico"><Icon name="search" /></div>
            <h3 className="fcard__title">Plain English, at every step</h3>
            <p className="fcard__desc">Lift contracts are written for the industry. LPM translates them for the people who pay for them. Every clause, charge and obligation is explained clearly so you always know where you stand, without needing to become an expert first.</p>
          </div>
          <div className="fcard">
            <div className="fcard__ico"><Icon name="layers" /></div>
            <h3 className="fcard__title">Lifts are one of a dozen things you manage</h3>
            <p className="fcard__desc">LPM checks every invoice, visit and obligation against your agreement and flags what needs your attention, so lifts are never the contract that catches you out.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Values() {
  return (
    <section className="section band">
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">What we stand for</span>
          <h2 className="section__title">Three things we won't compromise on.</h2>
        </div>
        <div className="fgrid fgrid--3">
          {VALUES.map((v) => (
            <div className="fcard" key={v.title}>
              <div className="fcard__ico"><Icon name={v.icon} /></div>
              <h3 className="fcard__title">{v.title}</h3>
              <p className="fcard__desc">{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="section" id="contact" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="contact">
          <div className="contact__l">
            <span className="eyebrow">Get in touch</span>
            <h2 className="section__title" style={{ marginTop: 14 }}>Want to talk it through?</h2>
            <p className="section__sub">Whether you manage one building or a national portfolio, we'd like to hear what would make your lifts easier to manage. We read every message.</p>
          </div>
          <div className="contact__methods">
            <a className="cmethod" href="mailto:contact@liftportfoliomanagement.com.au">
              <span className="cmethod__ico"><Icon name="receipt" /></span>
              <span><span className="cmethod__k">Email</span><span className="cmethod__v">contact@liftportfoliomanagement.com.au</span></span>
            </a>
            <a className="cmethod" href={HOME + "#waitlist"}>
              <span className="cmethod__ico"><Icon name="sparkles" /></span>
              <span><span className="cmethod__k">Early access</span><span className="cmethod__v">Join the waitlist</span></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Page() {
  return (
    <PageShell current="about.html">
      <PageHero
        icon="building"
        kicker="About LPM"
        crumb="About"
        title={<>Independent advice for <span className="soft">every lift decision.</span></>}
        sub="LPM is a lift portfolio platform built on a simple conviction: the people who own and run buildings deserve clear, impartial information. We make the detail easy to access and understand, so every decision is an informed one."
        pills={["Independent", "Impartial by design", "AU & NZ"]}
        actions={<a className="btn btn--ghost" href="#contact">Get in touch</a>}
      />
      <Belief />
      <Founder />
      <WhyDigital />
      <Values />
      <Contact />
    </PageShell>
  );
}

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