/* ===================== Maintenance Tender page ===================== */
const { Icon, Verdict, PageShell, PageHero, DeepRow, CTASection } = window;

const TENDER_STEPS = [
  { t: "Build the scope", d: "Define what good looks like: visit frequency, response times, inclusions and the codes to meet." },
  { t: "Invite & collect", d: "Contractors submit quotes. LPM reads each one and extracts pricing, inclusions and terms." },
  { t: "AI compares", d: "Every tender normalised to your scope, then lined up side by side: price, cover and T&Cs." },
  { t: "Negotiate T&Cs", d: "AI flags weak terms and drafts the exact points to push back on before you commit." },
  { t: "Award", d: "Accept the winner, and generate the maintenance agreement from the negotiated terms: pricing, escalation and inclusions carried across." },
];

function FlowStepper() {
  return (
    <section className="section--tight">
      <div className="wrap">
        <div className="flow">
          {TENDER_STEPS.map((s, i) => (
            <div className="fstep" key={i}>
              <div className="fstep__line"></div>
              <div className="fstep__n">{String(i + 1).padStart(2, "0")}</div>
              <div className="fstep__t">{s.t}</div>
              <div className="fstep__d">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CompareGrid() {
  const Cell = ({ children, head, label, win, lose }) => (
    <div className={"cmp__cell" + (head ? " cmp__cell--head" : "") + (label ? " cmp__cell--label" : "")}>
      {win && <span className="cmp__win"><Icon name="check" stroke={2.4} /></span>}
      <span className={win ? "cmp__win" : lose ? "cmp__lose" : ""}>{children}</span>
    </div>
  );
  return (
    <div className="panel" style={{ padding: 0 }}>
      <div className="panel__top">
        <div className="panel__title"><b>Tender comparison: 4-lift contract</b><span>2 of 4 submissions · normalised to your scope</span></div>
        <div className="panel__chip panel__chip--accent">AI compared</div>
      </div>
      <div style={{ padding: 16 }}>
        <div className="cmp">
          <div className="cmp__row cmp__row--head">
            <Cell head>Criteria</Cell><Cell head>Apex Lifts</Cell><Cell head>Vertex ✓</Cell>
          </div>
          <div className="cmp__row">
            <Cell label>Annual price</Cell><Cell>$59,400</Cell><Cell win>$54,200</Cell>
          </div>
          <div className="cmp__row">
            <Cell label>Visits / year</Cell><Cell lose>4</Cell><Cell win>6</Cell>
          </div>
          <div className="cmp__row">
            <Cell label>Breakdown response</Cell><Cell lose>8 hrs</Cell><Cell win>4 hrs</Cell>
          </div>
          <div className="cmp__row">
            <Cell label>Minor parts</Cell><Cell lose>Excluded</Cell><Cell win>Incl. to $500</Cell>
          </div>
          <div className="cmp__row">
            <Cell label>Escalation</Cell><Cell lose>CPI + 1%</Cell><Cell win>CPI capped 3.5%</Cell>
          </div>
          <div className="cmp__row">
            <Cell label>Term</Cell><Cell lose>5-yr lock-in</Cell><Cell win>3 years</Cell>
          </div>
        </div>
      </div>
      <Verdict inPanel tag="Recommendation" title="Vertex: best value, not just the cheapest">
        Vertex wins on <strong>price, cover and terms</strong> once normalised to your scope.
      </Verdict>
    </div>
  );
}

function NegotiatePanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Tender T&amp;Cs: Apex Lifts</b><span>Terms reviewed by AI</span></div>
        <div className="panel__chip panel__chip--flag">3 to push</div>
      </div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Auto-renewal</div><div className="lrow__s">Rolls 5 years unless 90-day notice</div></div><span className="ltag ltag--flag">Soften</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Escalation</div><div className="lrow__s">CPI + 1%: uncapped</div></div><span className="ltag ltag--flag">Cap it</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 rate</div><div className="lrow__s">$280/hr: not disclosed upfront</div></div><span className="ltag ltag--flag">Disclose</span></div>
      <Verdict inPanel tag="Counter-points drafted" title="Walk in knowing exactly what to ask">
        LPM drafts the <strong>specific clauses to push back on</strong> and what to ask for instead: a CPI cap, a shorter notice window and a published call-out rate.
      </Verdict>
    </div>
  );
}

function AwardPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Award: Vertex Lift Services</b><span>4-lift maintenance contract</span></div>
        <div className="panel__chip panel__chip--good">Agreement created</div>
      </div>
      <div className="lrow"><span className="lrow__dot lrow__dot--good"></span><div className="lrow__main"><div className="lrow__t">New maintenance agreement</div><div className="lrow__s">ELE-5012 generated from tender</div></div><span className="ltag ltag--good">Live</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--good"></span><div className="lrow__main"><div className="lrow__t">Pricing &amp; escalation</div><div className="lrow__s">Locked exactly as tendered</div></div><span className="ltag ltag--good">Locked</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--ok"></span><div className="lrow__main"><div className="lrow__t">Start date</div><div className="lrow__s">1 Aug 2026 · invoices ready to audit</div></div><span className="ltag ltag--ok">Scheduled</span></div>
      <Verdict inPanel tag="Closed the loop" title="From tender to a live contract">
        The negotiated terms flow into a new agreement in your portfolio, so <strong>every invoice you audit is checked</strong> against the deal you actually negotiated.
      </Verdict>
    </div>
  );
}

function Page() {
  return (
    <PageShell current="">
      <PageHero
        icon="clipboardList"
        kicker="Maintenance Tender"
        crumb={<><a href="contracts.html">Contracts &amp; Pricing</a><span>/</span> Maintenance Tender</>}
        title={<>Structured tenders. <span className="soft">Comparable quotes. No surprises.</span></>}
        sub="Scope the contract, collect quotes, and let AI normalise every submission for a true like-for-like comparison, then negotiate the terms and award, all in one place."
        pills={["Scope", "Collect", "Compare", "Negotiate", "Award"]}
      />

      <FlowStepper />

      <section className="section band" style={{ paddingTop: 80 }} id="compare">
        <div className="wrap">
          <DeepRow
            kicker="AI comparison"
            title="A like-for-like comparison, automatically."
            desc="Every contractor quotes in a different shape, which makes real comparison hard. LPM reads each submission and re-states it against your scope, so you compare real value, and the strongest offer wins on substance, not formatting."
            points={[
              <><b>Normalised to your scope</b><span>: price, visits, response times, inclusions and exclusions lined up on the same basis.</span></>,
              <><b>Best value, flagged</b><span>: the recommendation weighs cover and terms, not just the headline price.</span></>,
              <><b>Fine print, surfaced</b><span>: exclusions and edge cases pulled up where you can weigh them properly.</span></>,
            ]}
            visual={<CompareGrid />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="negotiate">
        <div className="wrap">
          <DeepRow
            rev
            kicker="Negotiate T&amp;Cs"
            title="Negotiate from a position of knowledge."
            desc="The price is only half the deal. LPM reads the terms and conditions and tells you exactly which clauses to push back on, what to ask for instead, and explains in plain English what everything means."
            points={[
              <><b>Weak terms flagged</b><span>: auto-renewals, uncapped escalation and undisclosed rates surfaced before you sign.</span></>,
              <><b>Counter-points drafted</b><span>: the specific asks, written for you, ready to send.</span></>,
              <><b>Apples to apples</b><span>: compare the terms across tenders, not just the prices.</span></>,
            ]}
            visual={<NegotiatePanel />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="award">
        <div className="wrap">
          <DeepRow
            kicker="Award"
            title="Award, and turn the tender into a live agreement."
            desc="Pick the winner, and generate the maintenance contract from the negotiated terms: pricing, escalation and inclusions carried over exactly as agreed."
            points={[
              <><b>Submissions land in your dashboard, ready to compare</b><span>: structured and consistent, every time.</span></>,
              <><b>Terms carried over</b><span>: the deal you negotiated becomes the new agreement.</span></>,
              <><b>Invoices checked against it</b><span>: run an audit and every charge is matched to the new contract's terms.</span></>,
            ]}
            visual={<AwardPanel />}
          />
        </div>
      </section>

      <CTASection title="Tender with confidence and knowledge." sub="Join the waitlist to run your next maintenance tender with AI doing the comparison and the homework." />
    </PageShell>
  );
}

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