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

/* Contact details ------------------------------------------------------
   MEETING_URL is the live Calendly scheduling link.                    */
const MEETING_URL = "https://calendly.com/gareth-liftportfoliomanagement/30min";
const EMAIL = "contact@liftportfoliomanagement.com.au";

const METHODS = [
  {
    icon: "calendar", k: "Book a meeting", v: "Find a time that suits you",
    href: MEETING_URL, external: true,
  },
  {
    icon: "mail", k: "Email", v: EMAIL,
    href: "mailto:" + EMAIL,
  },
];

const NEXT = [
  { icon: "calendar", title: "Pick a time", desc: "Grab a slot that works for you. No forms to fill in, no obligation, just a conversation." },
  { icon: "search", title: "We learn your portfolio", desc: "Tell us what you manage and where lifts cause you the most friction. We'll show how LPM fits." },
  { icon: "sparkles", title: "See it on your own data", desc: "Bring a contract or a few invoices and we'll walk through exactly what LPM surfaces." },
];

function Methods() {
  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 }}>Talk to a real person.</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. You reach real people who have worked in the lift industry, not a call centre. Book a time below, or email us directly and a person replies within one business day.</p>
            <p className="section__sub" style={{ marginTop: 12, fontSize: "14px", opacity: 0.85 }}>Already using LPM? Reach our support team at <a href="mailto:support@liftportfoliomanagement.com.au" style={{ color: "var(--accent)" }}>support@liftportfoliomanagement.com.au</a> and hear back within one business day.</p>
          </div>
          <div className="contact__methods">
            {METHODS.map((m) => (
              <a className="cmethod" key={m.k} href={m.href}
                {...(m.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>
                <span className="cmethod__ico"><Icon name={m.icon} /></span>
                <span><span className="cmethod__k">{m.k}</span><span className="cmethod__v">{m.v}</span></span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatNext() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">What happens next</span>
          <h2 className="section__title">A 20-minute walkthrough,<br />on your schedule.</h2>
        </div>
        <div className="steps">
          {NEXT.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 Page() {
  return (
    <PageShell current="contact.html">
      <PageHero
        icon="mail"
        kicker="Contact"
        crumb="Contact"
        title={<>Let's make your lifts <span className="soft">easier to manage.</span></>}
        sub="Have a question or want to see LPM on your own contracts and invoices? Book a time with the team or reach us directly. We're based in AU & NZ, and a real person replies within one business day."
        pills={["AU & NZ", "Replies within one business day", "Real people, no call centre"]}
        actions={<a className="btn btn--ghost" href={MEETING_URL} target="_blank" rel="noopener noreferrer">Book a meeting <span className="arr"><Icon name="arrow" /></span></a>}
      />
      <Methods />
      <WhatNext />
    </PageShell>
  );
}

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