/* ===================== AI / impartial advisor page ===================== */
const { Icon, AIMark, Verdict, PageShell, PageHero, DeepRow, CTASection } = window;

const ABILITIES = [
  { icon: "file", title: "Contract analysis", desc: "Reads every agreement, extracts the terms that matter and flags the gaps that quietly cost you." },
  { icon: "scan", title: "Quote analysis", desc: "Breaks down repair, renegotiation, and modernisation quotes and benchmarks prices against the actual scope." },
  { icon: "swap", title: "Renegotiation", desc: "Drafts the exact clauses to push back on, with a fair-price target and the reasoning behind it." },
  { icon: "scale", title: "Code & upgrade checks", desc: "Validates proposed upgrades and quotes against current standards before you pay." },
  { icon: "receipt", title: "Invoice checking", desc: "Matches every invoice to your contract, escalation cap and inclusions. Overcharges flagged before you pay." },
  { icon: "trend", title: "CapEx validation", desc: "Forecasts capital works and validates each line against your repair history, so you never fund it twice." },
];

function Abilities() {
  return (
    <section className="section" style={{ paddingTop: 70 }} id="does">
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">What Lola does</span>
          <h2 className="section__title">She reads everything,<br />so you don't have to.</h2>
        </div>
        <div className="fgrid fgrid--3">
          {ABILITIES.map((a) => (
            <div className="fcard" key={a.title}>
              <div className="fcard__ico"><Icon name={a.icon} /></div>
              <h3 className="fcard__title">{a.title}</h3>
              <p className="fcard__desc">{a.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ImpartialPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Invoice review: March</b><span>Two lifts · same service month</span></div>
        <div className="panel__chip panel__chip--accent">Lola</div>
      </div>
      <div className="lrow"><span className="lrow__dot lrow__dot--good"></span><div className="lrow__main"><div className="lrow__t">Lift 2 · monthly service</div><div className="lrow__s">Matches contract exactly</div></div><span className="ltag ltag--good">Fair · pay it</span></div>
      <div className="lrow"><span className="lrow__dot lrow__dot--flag"></span><div className="lrow__main"><div className="lrow__t">Lift 5 · monthly service</div><div className="lrow__s">Billed 4.8% over the escalation cap</div></div><span className="ltag ltag--flag">Query · $390</span></div>
      <Verdict inPanel tag="Impartial by design" title="She also tells you when a charge is fair.">
        Lola isn't here to dispute everything. She confirms a correct charge just as readily as she flags a wrong one. <strong>That's what makes her advice something you can act on.</strong>
      </Verdict>
    </div>
  );
}

function GroundedPanel() {
  return (
    <div className="panel">
      <div className="panel__top">
        <div className="panel__title"><b>Ask Lola</b><span>Answers from your own contracts</span></div>
        <div className="panel__chip panel__chip--accent">Grounded</div>
      </div>
      <div style={{ padding: "18px 18px 6px" }}>
        <div style={{ display: "inline-block", maxWidth: "92%", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "12px 12px 12px 4px", padding: "11px 14px", fontSize: 13.5, color: "var(--text)" }}>
          Is the after-hours call-out on this invoice something we should be paying for?
        </div>
      </div>
      <Verdict inPanel tag="Answer" title="No. It's already covered">
        Your contract includes after-hours call-outs as part of the monthly fee. This charge <strong>duplicates cover you already pay for</strong> and should be removed.
        <div style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 11, color: "var(--faint)" }}>Source · ELE-4471 · Clause 6.4 (Inclusions)</div>
      </Verdict>
    </div>
  );
}

const READ_STEPS = [
  { t: "Ingest", d: "Drop in a PDF, Word doc or spreadsheet: any quote, invoice, contract or inspection report." },
  { t: "Extract", d: "Lola pulls out fees, terms, line items, dates and obligations into structured data." },
  { t: "Benchmark", d: "Each item is compared against your contract, your portfolio and market scope." },
  { t: "Advise", d: "You get a plain-English recommendation, and the exact source it's grounded in." },
];
function ReadFlow() {
  return (
    <section className="section band" style={{ paddingTop: 90 }}>
      <div className="wrap">
        <div className="section__head">
          <span className="eyebrow">How it works</span>
          <h2 className="section__title">How Lola reads any document.</h2>
        </div>
        <div className="flow" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {READ_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 Page() {
  return (
    <PageShell current="ai.html">
      <PageHero
        icon="sparkles"
        kicker="Meet Lola"
        crumb="Ask Lola"
        title={<>Meet Lola. The advisor <span className="soft">on your side.</span></>}
        sub="Lola reads the documents nobody has time to read: contracts, quotes, invoices and reports. She gives you impartial, factual advice, grounded in your data, never guessing."
        pills={["Reads any document", "Grounded in your contracts", "Impartial by design"]}
      />

      <Abilities />

      <section className="section band" style={{ paddingTop: 90 }} id="impartial">
        <div className="wrap">
          <DeepRow
            kicker="Impartial by design"
            title="On your side, which sometimes means agreeing."
            desc="A tool that flags everything is just noise. Lola weighs each charge, quote and term on its merits, telling you when something is fair as clearly as when it's not. Trustworthy advice cuts both ways."
            points={[
              <><b>Confirms what's correct</b><span>: a fair charge is marked fair, so you pay with confidence and move on.</span></>,
              <><b>Flags what isn't</b><span>: overcharges, scope-creep and weak terms surfaced with the dollar impact.</span></>,
              <><b>No stake in the outcome</b><span>: Lola doesn't sell maintenance or parts. Her only job is your interest.</span></>,
            ]}
            visual={<ImpartialPanel />}
          />
        </div>
      </section>

      <section className="section band" style={{ paddingTop: 90 }} id="grounded">
        <div className="wrap">
          <DeepRow
            rev
            kicker="Grounded, not guessing"
            title="Every answer points to the clause it came from."
            desc="Lola doesn't invent advice. Every recommendation is tied to your actual contracts and documents and shows you exactly where it came from, so you can trust it and act on it."
            points={[
              <><b>Cites the source</b><span>: each answer references the contract and clause behind it.</span></>,
              <><b>Reads your documents</b><span>: grounded in your portfolio, not generic industry assumptions.</span></>,
              <><b>Auditable</b><span>: follow any recommendation back to the evidence in one click.</span></>,
            ]}
            visual={<GroundedPanel />}
          />
        </div>
      </section>

      <ReadFlow />

      <CTASection title="Put Lola on every document." sub="Join the waitlist and let Lola read, check and advise on every contract, quote and invoice you handle." />
    </PageShell>
  );
}

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