// jsx/LocalAi.jsx: the Local AI page: on-premises AI for firms whose data
// cannot leave the building. Namespace: la- (never uc-/ch-/hp-: this page
// loads only TopNav, Glyphs, LocalAi, Closing and Footer, so it never has
// another page's CSS on the document: every la- rule below is a fresh,
// self-contained set of rules, not a shared import).
//
// This is deliberately the most sober page on the site: no Console mockup,
// no dark interlude, no scene chrome. Every other page proves its claims
// with a styled product mockup; this one proves itself by having nothing to
// hide behind: generous white space, plain hairline lists, one bordered
// statement. Composition: TopNav → hero → who this is for → what we do →
// what you get → the honest trade-off (the page's one quiet signature
// moment) → Closing (also supplies the #contact anchor) → Footer.

// ── hero ─────────────────────────────────────────────────────────────────
function LaHero() {
  return (
    <section className="section la-hero" id="top">
      <div className="shell">
        <p className="chapter-mark">Zarco / Local AI</p>
        <h1 className="display la-hero-title">AI that never leaves the building.</h1>
        <p className="lede la-hero-lede">Some businesses cannot put their data in anyone's cloud. For them we install and manage AI on your premises: your hardware, open-weight models, your walls.</p>
      </div>
    </section>
  );
}

// ── who this is for: a quiet index of sectors, not a badge row ─────────
const LA_SECTORS = ["Legal", "Healthcare", "Regulated finance", "Defence-adjacent"];
function LaWho() {
  return (
    <section className="section la-row" id="who">
      <div className="shell la-row-grid">
        <div className="la-row-label">
          <h2 className="chapter-mark la-row-h2">Who this is for</h2>
          <p className="la-row-note">A non-exhaustive list of the sectors where data cannot leave the building.</p>
        </div>
        <div className="la-row-body">
          <ul className="la-index" role="list">
            {LA_SECTORS.map((s) => (<li className="la-index-row" key={s}>{s}</li>))}
          </ul>
          <p className="la-row-foot">And anyone else whose client agreements or regulator rule out sending data outside the building.</p>
        </div>
      </div>
    </section>
  );
}

// ── what we do: a genuine four-step process, numbered because order is
// real information here (each step depends on the one before it) ───────
const LA_STEPS = [
  { n: "01", text: "We scope the hardware your models will run on, and supply or spec it." },
  { n: "02", text: "We install and tune open-weight models for the work you need done." },
  { n: "03", text: "We connect them to your systems, inside your network. Nothing routed out." },
  { n: "04", text: "We manage, monitor and update it, on site or over your VPN." },
];
function LaWhat() {
  return (
    <section className="section tinted la-row" id="what-we-do">
      <div className="shell la-row-grid">
        <div className="la-row-label">
          <h2 className="chapter-mark la-row-h2">What we do</h2>
        </div>
        <div className="la-row-body">
          <ol className="la-steps" role="list">
            {LA_STEPS.map((s) => (
              <li className="la-step-row" key={s.n}>
                <span className="la-step-n" aria-hidden="true">{s.n}</span>
                <span className="la-step-text">{s.text}</span>
              </li>
            ))}
          </ol>
          <p className="la-what-close">Local AI is a Zarco service like any other: the same workflow mapping, the same approvals thinking. The deployment just never leaves your building.</p>
          <a className="btn-text la-what-link" href="services.html">All services</a>
        </div>
      </div>
    </section>
  );
}

// ── what you get: three outcomes with no order between them, so no
// numerals here (numbering the last section but not this one would be
// noise; these three aren't a sequence, they're just true at once) ─────
const LA_GETS = [
  "Private AI, set up the same workflow-first way we set up Zarco itself.",
  "Nothing is sent out. Not for training, not for logging.",
  "A straight answer on what local models can and cannot do, before you commit to anything.",
];
function LaGet() {
  return (
    <section className="section la-row" id="what-you-get">
      <div className="shell la-row-grid">
        <div className="la-row-label">
          <h2 className="chapter-mark la-row-h2">What you get</h2>
        </div>
        <div className="la-row-body">
          <ul className="la-gets" role="list">
            {LA_GETS.map((g) => (<li className="la-get-row" key={g}>{g}</li>))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ── the honest trade-off: the page's one quiet signature moment. A plain
// bordered card in daylight, not a dark panel: dark interludes elsewhere
// on the site stage capability; this moment is about candour, and staging
// it would undercut the point. The small magenta rule, standing in for
// "the line", is the one accent this view spends. ───────────────────────
function LaHonest() {
  return (
    <section className="section la-honest-section">
      <div className="shell">
        <div className="la-honest">
          <span className="la-honest-rule" aria-hidden="true" />
          <p className="la-honest-text">Local models trade some capability for total custody. We will tell you plainly where the line is for your use case before you spend a pound.</p>
        </div>
      </div>
    </section>
  );
}

function LocalAi() {
  return (
    <React.Fragment>
      <LaHero />
      <LaWho />
      <LaWhat />
      <LaGet />
      <LaHonest />
    </React.Fragment>
  );
}

function LocalAiPage() {
  return (
    <div className="site">
      <TopNav current="local-ai" />
      <LocalAi />
      <Closing />
      <Footer />
    </div>
  );
}

const localAiCss = `
/* ── hero: the widest margins on the page ── */
.la-hero { padding-top: clamp(88px, 13vh, 152px); padding-bottom: clamp(56px, 8vh, 88px); }
.la-hero-title { margin-top: 20px; max-width: 17ch; }
.la-hero-lede { margin-top: clamp(22px, 3vw, 30px); max-width: 620px; }

/* ── shared row rhythm: a narrow label column beside the content, the
   same shape three times so the page reads as one system ── */
.la-row { padding-top: clamp(56px, 8vh, 88px); padding-bottom: clamp(56px, 8vh, 88px); }
.la-row-grid {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.la-row-label { min-width: 0; }
.la-row-h2 { margin: 0; }
.la-row-note { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-60); max-width: 30ch; }
.la-row-body { min-width: 0; }

/* ── who this is for: an index, not a badge row ── */
.la-index { list-style: none; margin: 0; padding: 0; }
.la-index-row {
  padding: 16px 0; border-top: 1px solid var(--ink-10);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -0.01em; line-height: 1.15;
  color: var(--ink);
}
.la-index-row:last-child { border-bottom: 1px solid var(--ink-10); }
.la-row-foot { margin-top: 24px; font-size: 15px; line-height: 1.55; color: var(--ink-60); max-width: 52ch; }

/* ── what we do: a numbered ledger (a real sequence, so numerals earn
   their place here) ── */
.la-steps { list-style: none; margin: 0; padding: 0; }
.la-step-row { display: flex; align-items: baseline; gap: 22px; padding: 18px 0; border-top: 1px solid var(--ink-10); }
.la-step-row:last-child { border-bottom: 1px solid var(--ink-10); }
.la-step-n { font-family: var(--font-display); font-weight: 300; font-size: 15px; color: var(--ink-40); flex: none; width: 24px; }
.la-step-text { font-size: 16px; line-height: 1.55; color: var(--ink-80); max-width: 58ch; }
.la-what-close { margin: clamp(28px, 4vh, 36px) 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-60); max-width: 58ch; }
.la-what-link { margin-top: 14px; display: inline-block; }

/* ── what you get: plain rows, no numerals, no marker ── */
.la-gets { list-style: none; margin: 0; padding: 0; }
.la-get-row { padding: 16px 0; border-top: 1px solid var(--ink-10); font-size: 16px; line-height: 1.55; color: var(--ink-80); max-width: 60ch; }
.la-get-row:last-child { border-bottom: 1px solid var(--ink-10); }

/* ── the honest trade-off: isolated, generously padded, its own rhythm ── */
.la-honest-section { padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(96px, 14vh, 152px); }
.la-honest {
  max-width: 720px; margin: 0 auto; text-align: center;
  border: 1px solid var(--ink-20); border-radius: 24px;
  background: var(--paper-pure);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 6vw, 72px);
}
.la-honest-rule { display: inline-block; width: 40px; height: 3px; border-radius: 2px; background: var(--magenta); margin-bottom: 28px; }
.la-honest-text {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(21px, 2.6vw, 29px); line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink); text-wrap: pretty;
}

@media (max-width: 860px) {
  .la-row-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .la-hero-title { max-width: none; }
  .la-step-row { gap: 16px; }
  .la-honest { border-radius: 18px; }
}
`;

window.LocalAiPage = LocalAiPage;
window.localAiCss = localAiCss;