// jsx/Work.jsx: the Selected work page. Namespace: wk- (never sv-/ch-/uc-/
// hp-: this page loads only Glyphs, TopNav, Work and Footer, so it never has
// another page's CSS on the document). Composition: TopNav -> hero -> four
// entries (console, recruitment, unplugged, operations) -> a closing band ->
// Footer. The homepage's SelectedWork rows and the Services page's inline
// "selected work" link already deep-link here (work.html#console/#recruitment/
// #unplugged/#operations).
//
// Each entry repeats one fixed rhythm: a tag pill, an H2, a four-row
// definition ledger (the problem / what we built / how it works / where it
// stands), a quiet related-service link, and one restrained mockup card.
// The mockup card reuses the dark scene-chrome idiom Tour.jsx and
// UseCases.jsx already established (a ZMark-on-dark id row, one optional
// living detail) rather than inventing new chrome, and it is illustrative
// UI, never a screenshot: none of these systems get a stock-photo stand-in.
//
// Honesty note (Luke's standing rule for this page): the recruitment and
// Unplugged Campers entries both carry a locked TODO comment below asking
// Luke to confirm client-naming and claim accuracy. That is not this
// session's call to make, so the copy ships as drafted and the TODOs stay
// in the code until he answers them.

// ── hero ─────────────────────────────────────────────────────────────────
function WkHero() {
  return (
    <header className="section wk-hero" id="top">
      <div className="shell">
        <p className="wk-kicker ch-rev">Selected work</p>
        <h1 className="wk-hero-title ch-rev">Real systems, in production<span className="wk-dot">.</span></h1>
        <p className="wk-hero-sub ch-rev">A small portfolio and an honest one. Everything below was built end to end in-house. No stock logos, no invented numbers.</p>
      </div>
    </header>
  );
}

// ── shared scene chrome: a small dark Console-style card. Echoes Tour.jsx's
// ChSceneHead/.ch-scene idiom and UseCases.jsx's UcScene under this page's
// own wk- classes, slimmed down since it sits beside a text ledger rather
// than carrying a whole chapter on its own. `live` is the one living detail
// design law allows a mockup: a status dot, shown only where the entry's
// own "Where it stands" copy actually claims the system runs live. ────────
function WkSceneHead({ label, live }) {
  return (
    <div className="wk-scene-head">
      <span className="wk-scene-id"><span className="wk-scene-mark"><ZMark onDark /></span> {label}</span>
      {live && <span className="wk-scene-live"><span className="wk-scene-dot" /> live</span>}
    </div>
  );
}
function WkScene({ ariaLabel, label, live, children }) {
  return (
    <div className="wk-scene" role="group" aria-label={ariaLabel}>
      <WkSceneHead label={label} live={live} />
      <div className="wk-scene-body">{children}</div>
    </div>
  );
}

// ── Console visual: a reply line plus one approval row. "Approve" is the
// one magenta touch in this card, echoing the primary-CTA convention rather
// than adding a second accent; "Edit" stays quiet. Both pills are static
// labels, not real controls, so both are hidden from assistive tech. ──────
function WkConsoleVisual() {
  return (
    <WkScene ariaLabel="An assistant reply noting three drafts are ready for approval, with one example approval row" label="Zarco" live>
      <p className="wk-chat-line">Three drafts ready for your approval.</p>
      <div className="wk-approval-row">
        <span className="wk-approval-text">Draft to Harborview: renewal terms</span>
        <span className="wk-approval-actions">
          <span className="wk-pill wk-pill-primary" aria-hidden="true">Approve</span>
          <span className="wk-pill" aria-hidden="true">Edit</span>
        </span>
      </div>
    </WkScene>
  );
}

// ── Recruitment visual: a ranked candidate list, initials only, scores as
// mono data. No live dot: the entry's own copy frames this as delivered
// bespoke software, not a system we monitor running day to day. ──────────
const WK_RANKED = [
  { name: "J. M.", score: "92" },
  { name: "A. K.", score: "87" },
  { name: "S. R.", score: "81" },
];
function WkRecruitmentVisual() {
  return (
    <WkScene ariaLabel="A ranked candidate list, three example candidates scored against a role, initials only" label="Ranking">
      <ol className="wk-rank-list">
        {WK_RANKED.map((r) => (
          <li key={r.name}>
            <span className="wk-rank-name">{r.name}</span>
            <span className="wk-rank-score">{r.score}</span>
          </li>
        ))}
      </ol>
    </WkScene>
  );
}

// ── Unplugged Campers visual: a seven-day availability strip, a couple of
// days marked booked, dates as mono data. ─────────────────────────────────
const WK_CAL_DAYS = [
  { label: "Mon 12", booked: false },
  { label: "Tue 13", booked: false },
  { label: "Wed 14", booked: true },
  { label: "Thu 15", booked: false },
  { label: "Fri 16", booked: false },
  { label: "Sat 17", booked: true },
  { label: "Sun 18", booked: false },
];
function WkUnpluggedVisual() {
  return (
    <WkScene ariaLabel="An availability calendar strip, seven days, two shown as booked" label="Availability" live>
      <div className="wk-cal-strip">
        {WK_CAL_DAYS.map((d) => (
          <div className={"wk-cal-cell" + (d.booked ? " wk-cal-cell--booked" : "")} key={d.label}>
            <span className="wk-cal-date">{d.label}</span>
            <span className="wk-cal-state">{d.booked ? "Booked" : "Open"}</span>
          </div>
        ))}
      </div>
    </WkScene>
  );
}

// ── Operations visual: a three-stage pipeline summary, counts as mono data,
// deliberately generic (no real figures from our own books). ─────────────
const WK_PIPELINE = [
  { label: "Quotes open", count: "14" },
  { label: "Awaiting signature", count: "6" },
  { label: "Invoices overdue", count: "3" },
];
function WkOperationsVisual() {
  return (
    <WkScene ariaLabel="A generic pipeline summary, three stages with example counts" label="Pipeline" live>
      <ul className="wk-pipeline-list">
        {WK_PIPELINE.map((p) => (
          <li key={p.label}>
            <span className="wk-pipeline-label">{p.label}</span>
            <span className="wk-pipeline-count">{p.count}</span>
          </li>
        ))}
      </ul>
    </WkScene>
  );
}

// ── the four entries: one fixed rhythm, only the content and visual change.
// TODO comments sit directly on the two entries whose client-facing wording
// is not this session's call to finalise. ─────────────────────────────────
const WK_ENTRIES = [
  {
    id: "console",
    tag: "Platform",
    title: "The Zarco Console",
    problem: "AI that impresses in a demo and forgets your business the moment the tab closes. We wanted the opposite: one environment that accumulates context and does real work under human control.",
    built: "An AI operating environment. An executive assistant front door, specialist agents behind it, a company knowledge base with cited sources, projects that keep their history, integrations into CRM, email, calendar and finance tools, and an approvals Inbox so nothing consequential happens without a human.",
    how: "You talk to it in the Console, Slack or Teams. It plans, splits work across specialists, and queues anything that matters for approval.",
    stands: "Live, and not a concept. The same platform watches our own inbox, drafts our outbound and keeps our CRM current.",
    related: { label: "Console deployment", href: "services.html#console" },
    Visual: WkConsoleVisual,
  },
  {
    id: "recruitment",
    tag: "Bespoke software",
    title: "Recruitment AI suite",
    problem: "High volumes of CVs, screened by hand, inconsistently, with good candidates lost in the pile.",
    built: "CV ranking, candidate enrichment and outreach drafting, wired into the existing ATS rather than replacing it.",
    how: "Candidates are scored against the role with the reasoning attached, enriched from public sources, and outreach is drafted for a human to approve.",
    stands: "Delivered as bespoke software around an existing workflow.",
    // TODO: Luke to confirm client context wording and any observable outcome worth stating
    related: { label: "Bespoke AI software", href: "services.html#bespoke" },
    Visual: WkRecruitmentVisual,
  },
  {
    id: "unplugged",
    tag: "Web platform",
    title: "Unplugged Campers",
    problem: "A camper hire business that needed a brand, a site and real-time bookings, quickly.",
    built: "Brand, website, availability engine and checkout. Twelve days from first build to live.",
    how: "Availability is computed live against the fleet, and bookings land with the operators without a phone call.",
    stands: "Live and taking bookings.",
    // TODO: Luke to confirm ongoing permission to name the client and current claim accuracy
    related: { label: "Bespoke AI software", href: "services.html#bespoke" },
    Visual: WkUnpluggedVisual,
  },
  {
    id: "operations",
    tag: "Internal build",
    title: "Zarco operations stack",
    problem: "Off-the-shelf CRM and invoicing tools that agents could only poke at through the front door.",
    built: "Our own CRM and invoicing system, each with an agent-native interface, so the Console's agents can read state, log activity, raise quotes and chase invoices under approval.",
    how: "The same pattern we use to connect customer systems: the tool does its job, the agents work through a governed interface, and humans approve what matters.",
    stands: "Built for our own operations and run in production.",
    related: { label: "Knowledge and agent systems", href: "services.html#knowledge" },
    Visual: WkOperationsVisual,
  },
];

// ── one entry: tag row, H2, four-row ledger, quiet related link, visual. ──
function WkEntry({ entry }) {
  const Visual = entry.Visual;
  return (
    <section className="section wk-entry" id={entry.id}>
      <div className="shell wk-entry-in">
        <div className="wk-entry-content ch-rev">
          <div className="wk-tag-row">
            <span className="wk-tag">{entry.tag}</span>
          </div>
          <h2 className="h2 wk-entry-title">{entry.title}</h2>
          <dl className="wk-ledger">
            <div className="wk-ledger-row">
              <dt className="wk-ledger-label">The problem</dt>
              <dd className="wk-ledger-body">{entry.problem}</dd>
            </div>
            <div className="wk-ledger-row">
              <dt className="wk-ledger-label">What we built</dt>
              <dd className="wk-ledger-body">{entry.built}</dd>
            </div>
            <div className="wk-ledger-row">
              <dt className="wk-ledger-label">How it works</dt>
              <dd className="wk-ledger-body">{entry.how}</dd>
            </div>
            <div className="wk-ledger-row">
              <dt className="wk-ledger-label">Where it stands</dt>
              <dd className="wk-ledger-body">{entry.stands}</dd>
            </div>
          </dl>
          <a className="btn-text wk-related-link" href={entry.related.href}>{entry.related.label}</a>
        </div>
        <div className="wk-entry-visual ch-rev">
          <Visual />
        </div>
      </div>
    </section>
  );
}

// ── closing band: same shape as Services.jsx's SvClosing / Console.jsx's
// ConsoleCta, so this page reads as the same product line. ───────────────
function WkClosing() {
  return (
    <section className="section wk-cta ch-rev">
      <div className="shell wk-cta-inner">
        <h2 className="h2 wk-cta-title">The next one is the point.</h2>
        <p className="wk-cta-sub">Tell us what is slowing your team down and we will show you what we would build.</p>
        <a className="btn btn-primary" href="index.html#contact">Discuss a project</a>
      </div>
    </section>
  );
}

function WorkPage() {
  React.useEffect(() => window.initRevealObserver(), []);
  return (
    <div className="site">
      <TopNav current="work" />
      <WkHero />
      {WK_ENTRIES.map((entry) => (<WkEntry key={entry.id} entry={entry} />))}
      <WkClosing />
      <Footer />
    </div>
  );
}

const workCss = `
/* ── hero: matching the sitewide hero register (Console.jsx's cp-h1,
   Services.jsx's sv-hero-title) so this page opens at the same weight as
   every other page's front door. Kicker is its own ink-60 class, never the
   sitewide .chapter-mark (that one sits at ink-40, which fails AA for text
   this small). ── */
.wk-hero { padding-top: clamp(72px, 11vh, 128px); padding-bottom: clamp(40px, 6vh, 64px); border-bottom: none; }
.wk-kicker { font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--ink-60); margin: 0; }
.wk-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;
}
.wk-dot { color: var(--magenta); }
.wk-hero-sub { margin-top: clamp(20px, 3vw, 28px); max-width: 56ch; color: var(--ink-60); font-size: 18px; line-height: 1.55; }

/* ── the four entries: one fixed rhythm. The hairline between entries is
   the plain .section rule's own border-bottom (see site.css), so the
   repeating divider comes for free rather than being reinvented here. ── */
.wk-entry { padding-top: clamp(64px, 9vh, 104px); padding-bottom: clamp(64px, 9vh, 104px); }
.wk-entry-in {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.wk-tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wk-tag {
  font-size: 13px; color: var(--ink-60); border: 1px solid var(--ink-20);
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.wk-entry-title { margin-top: 14px; max-width: 22ch; }

/* Definition-style ledger: dt/dd pairs, each wrapped in its own row div (the
   HTML5 dl content model allows one or more divs each holding a dt+dd
   group). Label column is a fixed width so all four rows line up; the
   label itself sits at ink-60, not the sitewide ink-40 chapter-mark. */
.wk-ledger { margin: clamp(28px, 4vh, 40px) 0 0; }
.wk-ledger-row {
  display: grid; grid-template-columns: 168px 1fr; gap: 24px;
  padding: 20px 0; border-top: 1px solid var(--ink-10);
}
.wk-ledger-row:last-child { border-bottom: 1px solid var(--ink-10); }
.wk-ledger-label { margin: 0; padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-60); }
.wk-ledger-body { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--ink-80); }

.wk-related-link { margin-top: 24px; display: inline-flex; color: var(--ink-60); }
.wk-related-link:hover { color: var(--magenta); text-decoration-color: var(--magenta); }

/* ── mockup card: the dark scene-chrome idiom already established in
   Tour.jsx (.ch-scene) and UseCases.jsx (.uc-scene), redrawn under this
   page's own wk- classes since this page loads neither of those files. ── */
.wk-scene {
  background: var(--panel); border-radius: 20px;
  border: 1px solid var(--panel-line);
  box-shadow: 0 32px 70px -34px rgba(14, 14, 14, .45);
  overflow: hidden;
}
.wk-scene-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--panel-line); }
.wk-scene-id { display: flex; align-items: center; gap: 9px; color: var(--panel-ink); font-size: 14px; font-weight: 500; }
.wk-scene-mark { display: inline-flex; }
.wk-scene-live { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--panel-ink-60); white-space: nowrap; }
.wk-scene-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--panel-ok); flex: none; }
.wk-scene-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }

/* Console: chat line + approval row. Approve is this card's one magenta
   touch (mirrors the primary-CTA convention); Edit stays quiet. */
.wk-chat-line {
  margin: 0; max-width: 92%; padding: 11px 15px; font-size: 14px; line-height: 1.55;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--panel-line);
  color: var(--panel-ink); border-radius: 4px 14px 14px 14px;
}
.wk-approval-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--panel-line);
  border-radius: 12px; padding: 12px 14px;
}
.wk-approval-text { font-size: 13.5px; color: var(--panel-ink); }
.wk-approval-actions { display: flex; gap: 8px; flex: none; }
.wk-pill { font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--panel-line); color: var(--panel-ink-60); }
.wk-pill-primary { background: var(--magenta); border-color: var(--magenta); color: #fff; }

/* Recruitment: ranked list, scores as mono data. */
.wk-rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wk-rank-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--panel-line); border-radius: 10px; }
.wk-rank-name { font-size: 14px; color: var(--panel-ink); font-weight: 500; }
.wk-rank-score { font-family: var(--font-mono); font-size: 13px; color: var(--panel-ink-60); }

/* Unplugged: seven-day availability strip, dates as mono data. */
.wk-cal-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-cal-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--panel-line); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.wk-cal-cell--booked { background: rgba(255, 255, 255, .09); }
.wk-cal-date { font-family: var(--font-mono); font-size: 11px; color: var(--panel-ink-60); }
.wk-cal-state { font-size: 10px; color: var(--panel-ink-60); }

/* Operations: pipeline summary, counts as mono data. */
.wk-pipeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wk-pipeline-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--panel-line); border-radius: 10px; }
.wk-pipeline-label { font-size: 13.5px; color: var(--panel-ink-60); }
.wk-pipeline-count { font-family: var(--font-mono); font-size: 15px; color: var(--panel-ink); font-weight: 500; }

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

@media (max-width: 900px) {
  .wk-entry-in { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .wk-hero-title { max-width: none; }
  .wk-entry-title { max-width: none; }
  .wk-ledger-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .wk-cal-strip { gap: 4px; }
  .wk-cal-cell { padding: 8px 2px; }
  .wk-cal-date { font-size: 10px; }
  .wk-cal-state { font-size: 9px; }
}
`;

window.WorkPage = WorkPage;
window.workCss = workCss;