/* ============================================================
   Shared layout for the /guides articles. Loaded after shared.jsx
   and before each guide's content script. Exposes GuideLayout and
   GUIDES (the index of all guides, used for cross-linking).
   ============================================================ */
const { Icon, PageShell, PageHero } = window;

/* Every guide, in calendar order. Slug doubles as the filename. */
const GUIDES = [
  { href: "how-to-read-a-lift-invoice.html", title: "The way to read a lift invoice", blurb: "Five points to check before any lift invoice is approved, and none of them need lift expertise." },
  { href: "lift-call-out-charges-explained.html", title: "The call-out charge that was already included", blurb: "The distinction that settles most call-out disputes, and the one polite question worth asking." },
  { href: "committee-lift-report-template.html", title: "What your committee needs to be shown about the lifts", blurb: "The one-page lift summary that answers committee questions before they are asked. Free template included." },
  { href: "managing-lifts-small-buildings.html", title: "The two-lift problem", blurb: "Good lift oversight for the average building is four habits, not a department." },
  { href: "switching-lift-maintenance-contractors.html", title: "Changing lift contractors without any trouble", blurb: "The notice window, the records and the baseline: three things that make a switch orderly." },
  { href: "how-to-choose-a-lift-consultant.html", title: "How to check a lift consultant (including us)", blurb: "Five questions to put to anyone offering independent lift advice, with our own answers underneath each one." },
  { href: "comprehensive-lift-contract-exclusions.html", title: "The aspects not included in “comprehensive”", blurb: "The coverage is in the exclusions at the back of the contract, and they are worth reading twice." },
  { href: "lift-maintenance-records-ownership.html", title: "Your lift records are the property of the building", blurb: "The service history, dockets and callback log describe your asset, and you have the right to see them." },
  { href: "qld-lift-registration-compliance.html", title: "The three lift documents every QLD committee should hold", blurb: "Registration, safe-to-operate evidence and maintenance records: what to keep on file and why." },
  { href: "lift-replacement-sinking-fund.html", title: "The sinking fund and the lift", blurb: "Lift replacement timing is usually decided by the control system, not the machinery. Plan for that." },
  { href: "who-is-managing-your-lift-contract.html", title: "Who is actually managing your building's lift contract?", blurb: "One account manager, hundreds of buildings. Where your building sits on the list, and one question that tells you." },
];

/* Small CTA card at the end of each article. Defaults to the free
   Lift Savings Report; guides can override for their own hook. */
function GuideCTA({ title, body, actionHref, actionLabel }) {
  return (
    <div style={{
      marginTop: 44, padding: "26px 28px", borderRadius: 14,
      border: "1px solid var(--border)", background: "var(--panel, rgba(255,255,255,0.03))",
    }}>
      <div style={{ fontSize: 18, fontWeight: 600, color: "var(--text)", letterSpacing: "-0.01em" }}>
        {title || "Want this checked for you, free?"}
      </div>
      <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--muted)", marginTop: 8, marginBottom: 16 }}>
        {body || "The Lift Savings Report puts independent eyes on one building's lift contract and last three invoices, free. Findings within three business days, every flagged dollar quoted to the exact clause."}
      </p>
      <a className="btn btn--accent" href={actionHref || "lift-savings-report.html"}>
        {actionLabel || "Get the free Lift Savings Report"} <span className="arr"><Icon name="arrow" /></span>
      </a>
    </div>
  );
}

/* Cross-links to two related guides, keeps readers (and crawlers) moving. */
function GuideMore({ current }) {
  const others = GUIDES.filter((g) => g.href !== current);
  const idx = GUIDES.findIndex((g) => g.href === current);
  const picks = [others[idx % others.length], others[(idx + 4) % others.length]];
  return (
    <div style={{ marginTop: 40, borderTop: "1px solid var(--border)", paddingTop: 26 }}>
      <div style={{ fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 14 }}>Keep reading</div>
      <div style={{ display: "grid", gap: 12 }}>
        {picks.map((g) => (
          <a key={g.href} href={g.href} style={{ color: "var(--text)", textDecoration: "none", fontSize: 16, fontWeight: 600 }}>
            {g.title} <span style={{ color: "var(--accent)" }}>&rarr;</span>
          </a>
        ))}
      </div>
      <p style={{ marginTop: 16, fontSize: 14 }}>
        <a href="guides.html" style={{ color: "var(--muted)" }}>All guides</a>
      </p>
    </div>
  );
}

/* sections: [{ h: "heading" | null, ps: ["para", ...] }]
   Strings support **bold** spans only, nothing else. */
function rich(text) {
  const parts = String(text).split("**");
  return parts.map((p, i) => (i % 2 === 1 ? <strong key={i} style={{ color: "var(--text)", fontWeight: 600 }}>{p}</strong> : p));
}

function GuideLayout({ slug, kicker, title, sub, sections, cta, datePublished }) {
  const canonical = "https://liftportfoliomanagement.com.au/" + slug;
  const schema = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: typeof title === "string" ? title : sub,
    description: sub,
    url: canonical,
    datePublished: datePublished || "2026-08-08",
    inLanguage: "en-AU",
    author: { "@type": "Person", name: "Gareth Evans", jobTitle: "Founder, LPM Lift Consultants" },
    publisher: { "@type": "Organization", "@id": "https://liftportfoliomanagement.com.au/#organization", name: "LPM Lift Consultants", url: "https://liftportfoliomanagement.com.au/" },
  };
  return (
    <PageShell current="">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />
      <PageHero
        icon="book"
        kicker={kicker || "Guides"}
        crumb={<span><a href="guides.html">Guides</a></span>}
        title={title}
        sub={sub}
        primary={<a className="btn btn--ghost" href="guides.html">All guides</a>}
      />
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <article style={{ maxWidth: 760, margin: "0 auto" }}>
            {sections.map((s, i) => (
              <div key={i} style={{ marginTop: i === 0 ? 0 : 34 }}>
                {s.h && (
                  <h2 style={{ fontSize: 22, fontWeight: 600, color: "var(--text)", letterSpacing: "-0.01em", lineHeight: 1.3, margin: 0 }}>
                    {s.h}
                  </h2>
                )}
                {s.ps.map((p, j) => (
                  <p key={j} style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--muted)", marginTop: j === 0 && s.h ? 12 : 16, marginBottom: 0 }}>
                    {rich(p)}
                  </p>
                ))}
              </div>
            ))}
            <GuideCTA {...(cta || {})} />
            <GuideMore current={slug} />
          </article>
        </div>
      </section>
    </PageShell>
  );
}

Object.assign(window, { GUIDES, GuideLayout, GuideCTA, GuideMore });