// jsx/Services.jsx: the Services page. Namespace: sv- (never ch-/hp-/uc-/la-:
// this page loads only Glyphs, TopNav, Services and Footer, so it never has
// another page's CSS on the document). Composition: TopNav -> hero -> six
// service areas in one fixed repeating rhythm (numbered kicker, title, the
// problem, a "what you get" hairline list, a quiet engagement line, a CTA)
// -> a closing band -> Footer. The homepage's four service cards already
// deep-link here (services.html#discovery/#automation/#bespoke/#console);
// this page adds two areas the homepage cards do not surface on their own
// (knowledge and agent systems, Local AI) so every real offer has a home.
//
// The six .sv-area sections are plain .section elements on purpose: the
// shared .section rule already draws a hairline under every section (see
// site.css), so the repeating divider between areas comes for free rather
// than being reinvented here, and none of the six carries a background
// tint: the rhythm is the design, so nothing about the six is allowed to
// look more or less important than the others.

const AREAS = [
  {
    id: "discovery",
    n: "01",
    title: "AI discovery and strategy",
    problem: "Most teams can name ten places AI might help and cannot say which one is worth doing first. Guessing is expensive.",
    gets: [
      "A map of your workflows and where the time actually goes.",
      "A shortlist of use cases ranked by value and feasibility.",
      "Data, integration and security requirements for each.",
      "An implementation roadmap with an indicative business case.",
    ],
    engagement: "Short and focused, measured in days. The roadmap is yours whoever builds it.",
  },
  {
    id: "automation",
    n: "02",
    title: "Workflow automation",
    problem: "The work that eats your team's week is rarely difficult. It is repetitive, spread across tools, and never anyone's job to fix.",
    gets: [
      "Recurring workflows designed, built and run across the tools you already use.",
      "CRM upkeep, meeting follow-up, recurring reports, document handling.",
      "Onboarding, account research, proposal drafts, collections chasing.",
      "Approvals built in: drafts queue for a human before anything sends.",
    ],
    engagement: "Scoped per workflow. Live in weeks, expanded as each one earns its keep.",
  },
  {
    id: "bespoke",
    n: "03",
    title: "Bespoke AI software",
    problem: "Sometimes the right tool does not exist, and bending a platform to fit costs more than building the thing properly.",
    gets: [
      "Internal tools, document-processing systems, operational dashboards.",
      "Portals and AI-native products.",
      "Standalone, or connected to the Console so it shares your knowledge base and approvals.",
      "Operational business systems, not brochure websites.",
    ],
    // Inline link case: "selected work" sits inside the engagement sentence
    // itself rather than as a separate quiet link, so engagement is an array
    // of segments here instead of a plain string (see SvEngagement below).
    engagement: [
      "Designed and built in-house. See the recruitment suite and booking platform in our ",
      { text: "selected work", href: "work.html" },
      ".",
    ],
  },
  {
    id: "knowledge",
    n: "04",
    title: "Knowledge and agent systems",
    problem: "Your business already knows the answer to most questions it gets asked. The knowledge is just scattered across inboxes, drives and heads.",
    gets: [
      "Assistants and specialist agents grounded in company information.",
      "Permissions decided by you, enforced by the system.",
      "Every answer cites its source, so trust does not depend on faith.",
    ],
    engagement: "Often the first thing a team feels day to day. Runs standalone or inside the Console.",
  },
  {
    id: "console",
    n: "05",
    title: "Console deployment",
    problem: "When you want the whole thing working together: agents, knowledge, projects, integrations and approvals in one managed environment.",
    gets: [
      "Your knowledge base built from your real documents and systems.",
      "Integrations connected, agents configured for your roles.",
      "Your AI policy written with you and enforced by the platform: who approves what, which systems agents may touch, what always needs a human.",
      "Training, then ongoing tuning as the system beds in.",
    ],
    engagement: "Pilot with your team in weeks, expand at the pace the results earn.",
    quietLink: { label: "Explore the Console", href: "console.html" },
  },
  {
    id: "local-ai",
    n: "06",
    title: "Local AI",
    problem: "Some firms cannot put their data in anyone's cloud. That should not lock them out of AI.",
    gets: [
      "Hardware and open-weight models supplied and configured.",
      "Installed on your premises, managed and updated by us.",
      "The same workflow mapping and approvals thinking, inside your walls.",
    ],
    engagement: "Every install is scoped individually.",
    quietLink: { label: "More on Local AI", href: "local-ai.html" },
  },
];

// ── hero ─────────────────────────────────────────────────────────────────
function SvHero() {
  return (
    <header className="section sv-hero" id="top">
      <div className="shell">
        <p className="chapter-mark ch-rev">Services</p>
        <h1 className="sv-hero-title ch-rev">Hands on, end to end<span className="sv-dot">.</span></h1>
        <p className="sv-hero-sub ch-rev">Zarco does the work: mapping it, building it, deploying it, improving it. And when AI is not the right answer, we say so and build the simpler thing instead.</p>
      </div>
    </header>
  );
}

// ── one service area's engagement line. Usually a single quiet sentence;
// the bespoke area instead passes an array of string/link segments so
// "selected work" can sit inline without every other area paying for that
// flexibility in its own markup. ──────────────────────────────────────────
function SvEngagement({ engagement }) {
  if (typeof engagement === "string") return <p className="sv-engagement">{engagement}</p>;
  return (
    <p className="sv-engagement">
      {engagement.map((seg, i) =>
        typeof seg === "string" ? (
          <React.Fragment key={i}>{seg}</React.Fragment>
        ) : (
          <a key={i} className="sv-inline-link" href={seg.href}>{seg.text}</a>
        )
      )}
    </p>
  );
}

// ── one service area: the fixed rhythm repeated six times. Only the
// content changes between calls, never the shape. ────────────────────────
function SvArea({ area }) {
  return (
    <section className="section sv-area" id={area.id}>
      <div className="shell sv-area-inner">
        <p className="chapter-mark">{area.n}</p>
        <h2 className="h2 sv-title">{area.title}</h2>
        <p className="sv-problem">{area.problem}</p>
        <div className="sv-detail-grid ch-rev">
          <div className="sv-gets">
            <p className="eyebrow sv-gets-label">What you get</p>
            <ul className="sv-gets-list" role="list">
              {area.gets.map((g) => (<li className="sv-gets-row" key={g}>{g}</li>))}
            </ul>
          </div>
          <div className="sv-engagement-col">
            <SvEngagement engagement={area.engagement} />
            <div className="sv-cta-row">
              <a className="btn-text" href="index.html#contact">Discuss a project</a>
              {area.quietLink && (
                <a className="btn-text sv-quiet-link" href={area.quietLink.href}>{area.quietLink.label}</a>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── closing band: same shape as Console.jsx's ConsoleCta (quiet paper band,
// one primary button), so the two pages read as the same product line. ──
function SvClosing() {
  return (
    <section className="section sv-cta ch-rev">
      <div className="shell sv-cta-inner">
        <h2 className="h2 sv-cta-title">Not sure which of these you need?</h2>
        <p className="sv-cta-sub">That is normal. Tell us the problem and we will tell you the shape of the answer.</p>
        <a className="btn btn-primary" href="index.html#contact">Discuss a project</a>
      </div>
    </section>
  );
}

function ServicesPage() {
  React.useEffect(() => window.initRevealObserver(), []);
  return (
    <div className="site">
      <TopNav current="services" />
      <SvHero />
      {AREAS.map((area) => (<SvArea key={area.id} area={area} />))}
      <SvClosing />
      <Footer />
    </div>
  );
}

const servicesCss = `
/* ── hero: matching the sitewide hero register (Console.jsx's cp-h1) so
   this page opens at the same weight as every other page's front door ── */
.sv-hero { padding-top: clamp(72px, 11vh, 128px); padding-bottom: clamp(40px, 6vh, 64px); border-bottom: none; }
.sv-hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(52px, 7.4vw, 96px); line-height: .98; letter-spacing: -.03em;
  margin: 18px 0 0; max-width: 15ch;
}
.sv-dot { color: var(--magenta); }
.sv-hero-sub { margin-top: clamp(20px, 3vw, 28px); max-width: 56ch; color: var(--ink-60); font-size: 18px; line-height: 1.55; }

/* ── the six areas: one fixed rhythm. The hairline between areas is the
   plain .section rule's own border-bottom, not a rule added here. ── */
.sv-area { padding-top: clamp(64px, 9vh, 104px); padding-bottom: clamp(64px, 9vh, 104px); }
.sv-title { margin-top: 14px; max-width: 20ch; }
.sv-problem { margin-top: clamp(18px, 2.6vw, 26px); max-width: 58ch; color: var(--ink-60); font-size: 18px; line-height: 1.55; }

.sv-detail-grid {
  margin-top: clamp(36px, 5vh, 52px);
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.sv-gets-label { margin: 0 0 16px; }
.sv-gets-list { list-style: none; margin: 0; padding: 0; }
.sv-gets-row { padding: 15px 0; border-top: 1px solid var(--ink-10); font-size: 16px; line-height: 1.55; color: var(--ink-80); max-width: 56ch; }
.sv-gets-row:last-child { border-bottom: 1px solid var(--ink-10); }

.sv-engagement-col { display: flex; flex-direction: column; gap: 22px; }
.sv-engagement { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-60); max-width: 42ch; }
.sv-inline-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sv-inline-link:hover { color: var(--magenta); text-decoration-color: var(--magenta); }
.sv-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.sv-quiet-link { color: var(--ink-60); }
.sv-quiet-link:hover { color: var(--magenta); }

/* ── closing band: same shape as Console.jsx's cp-cta ── */
.sv-cta { background: var(--ink-04); border-bottom: none; text-align: center; padding-top: clamp(72px, 10vh, 116px); padding-bottom: clamp(72px, 10vh, 116px); }
.sv-cta-inner { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sv-cta-title { margin: 0; }
.sv-cta-sub { margin: 0; max-width: 50ch; color: var(--ink-60); font-size: 17px; line-height: 1.55; }

@media (max-width: 900px) {
  .sv-detail-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .sv-hero-title { max-width: none; }
  .sv-title { max-width: none; }
}
`;

window.ServicesPage = ServicesPage;
window.servicesCss = servicesCss;