/* ===================== Guides index ===================== */
const { Icon, PageShell, PageHero, CTASection, GUIDES } = window;

const listSchema = {
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  name: "Lift guides for committees and building managers",
  url: "https://liftportfoliomanagement.com.au/guides.html",
  inLanguage: "en-AU",
  hasPart: GUIDES.map((g) => ({
    "@type": "Article",
    headline: g.title,
    url: "https://liftportfoliomanagement.com.au/" + g.href,
  })),
};

function GuideList() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          {GUIDES.map((g, i) => (
            <a
              key={g.href}
              href={g.href}
              style={{
                display: "block",
                padding: "26px 0",
                borderTop: i === 0 ? "none" : "1px solid var(--border)",
                textDecoration: "none",
              }}
            >
              <h2 style={{ fontSize: 20, fontWeight: 600, color: "var(--text)", letterSpacing: "-0.01em", lineHeight: 1.35, margin: 0 }}>
                {g.title} <span style={{ color: "var(--accent)" }}>&rarr;</span>
              </h2>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--muted)", marginTop: 8, marginBottom: 0 }}>
                {g.blurb}
              </p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Page() {
  return (
    <PageShell current="">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(listSchema) }} />
      <PageHero
        icon="book"
        kicker="Guides"
        crumb="Guides"
        title={<>Lift oversight, <span className="soft">explained plainly.</span></>}
        sub="Practical guides for strata committees, building managers and FM teams: invoices, call-out charges, contracts, records, compliance and budgeting. No jargon, no scare tactics, written from the building's side of the table."
      />
      <GuideList />
      <CTASection />
    </PageShell>
  );
}

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