// jsx/UseCases.jsx: the six-role use-cases page. Namespace: uc- (never
// ch-/hp-: this page loads only TopNav, Glyphs, UseCases, Closing and
// Footer, so it never has Tour.jsx's or App.jsx's CSS on the document -
// every uc- rule below is a fresh, self-contained echo of the tour's dark
// scene idiom, not a shared import). Composition: TopNav → hero → six role
// sections (founder, sales, ops, finance, marketing, success) → a quiet
// cross-link strip → Closing (also supplies the #contact anchor the role
// CTAs point at) → Footer.

// ── small glyphs, redrawn locally rather than reaching into Tour.jsx ───────
function UcTickGlyph() {
  return (
    <svg className="uc-tick-glyph" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 8.5l3 3 7-7" fill="none" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function UcArrowGlyph() {
  return (
    <svg className="uc-arrow-glyph" viewBox="0 0 12 12" aria-hidden="true">
      <path d="M3.5 2.2l4 3.8-4 3.8" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function UcFlagGlyph() {
  return (
    <svg viewBox="0 0 14 14" aria-hidden="true">
      <path d="M3 1.5v11" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" fill="none" />
      <path d="M3 2.2c1.6-.9 3-.9 4.6 0s3 .9 4.4 0v5c-1.4.9-2.8.9-4.4 0s-3-.9-4.6 0z" fill="currentColor" opacity=".85" />
    </svg>
  );
}

// ── shared scene chrome: a small dark Console card. Echoes Tour.jsx's
// ChSceneHead/.ch-scene idiom under this page's own uc- classes. ──────────
function UcSceneHead({ label, right }) {
  return (
    <div className="uc-scene-head">
      <span className="uc-scene-id"><span className="uc-scene-mark"><ZMark onDark /></span> {label}</span>
      {right}
    </div>
  );
}
function UcScene({ ariaLabel, label, right, children }) {
  return (
    <div className="uc-scene" role="group" aria-label={ariaLabel}>
      <UcSceneHead label={label} right={right} />
      <div className="uc-scene-body">{children}</div>
    </div>
  );
}

// ── Founder: a morning brief card ───────────────────────────────────────
const UC_FOUNDER_BRIEF = [
  { tone: "warn", text: "Harborview renewal: two licences still unassigned." },
  { tone: "warn", text: "Meridian pilot: renewal conversation due this week." },
  { tone: "ok", text: "Fenwick invoice signed. Nothing needed from you." },
];
function UcFounderScene() {
  return (
    <UcScene
      ariaLabel="A morning brief: three things need you, eleven more resolved overnight"
      label="Zarco"
      right={<span className="uc-scene-right">3 need you</span>}
    >
      <ul className="uc-brief-list">
        {UC_FOUNDER_BRIEF.map((b) => (
          <li key={b.text}><span className={"uc-brief-dot uc-brief-dot--" + b.tone} />{b.text}</li>
        ))}
      </ul>
      <div className="uc-scene-foot">11 more resolved overnight.</div>
    </UcScene>
  );
}

// ── Sales: research, draft, queue for approval ──────────────────────────
function UcSalesScene() {
  return (
    <React.Fragment>
      <UcScene
        ariaLabel="Zarco researching a prospect, drafting outreach, then queuing it for your approval"
        label="Zarco"
        right={<span className="uc-scene-right">drafting</span>}
      >
        <div className="uc-flow">
          <span className="uc-chip">Researching Fenwick Ltd</span>
          <UcArrowGlyph />
          <span className="uc-chip">Drafting outreach in your voice</span>
          <UcArrowGlyph />
          <span className="uc-chip uc-chip--live">Queued for your approval</span>
        </div>
      </UcScene>
      <p className="uc-scene-note">Drafts only. Nothing sends itself.</p>
    </React.Fragment>
  );
}

// ── Operations: a routine run log ───────────────────────────────────────
const UC_OPS_RUNS = [
  { label: "Inbox triage", detail: "14 items sorted into actions." },
  { label: "Meeting prep pack", detail: "Ready before the Thursday board call." },
  { label: "Document chase", detail: "Third polite nudge sent to Fenwick." },
];
function UcOpsScene() {
  return (
    <UcScene
      ariaLabel="A weekly routine run log, three runs completed"
      label="Routine"
      right={<span className="uc-scene-right">This week</span>}
    >
      <ul className="uc-log-list">
        {UC_OPS_RUNS.map((r) => (
          <li className="uc-log-row" key={r.label}>
            <UcTickGlyph />
            <div>
              <p className="uc-log-title">{r.label}</p>
              <p className="uc-log-detail">{r.detail}</p>
            </div>
          </li>
        ))}
      </ul>
      <div className="uc-scene-foot">Priya · Operations owns this routine.</div>
    </UcScene>
  );
}

// ── Finance: a collections queue with one held item and its reason ──────
const UC_FINANCE_COLLECTIONS = [
  { name: "Fenwick Ltd", amount: "£4,200", status: "Reminder sent" },
  { name: "Turnkey Logistics", amount: "£1,850", status: "Second reminder due" },
];
function UcFinanceScene() {
  return (
    <UcScene
      ariaLabel="A collections queue: two accounts being chased, one held back with its reason"
      label="Collections"
      right={<span className="uc-scene-right">£12,050 chasing</span>}
    >
      <ul className="uc-coll-list">
        {UC_FINANCE_COLLECTIONS.map((c) => (
          <li className="uc-coll-row" key={c.name}>
            <span className="uc-coll-name">{c.name}</span>
            <span className="uc-coll-amount">{c.amount}</span>
            <span className="uc-coll-status">{c.status}</span>
          </li>
        ))}
      </ul>
      <div className="uc-held">
        <span className="uc-held-dot" />
        <div>
          <p className="uc-held-title">Harborview · £6,000 · held</p>
          <p className="uc-held-reason">Mid-renewal. Chasing now would risk the deal.</p>
        </div>
      </div>
    </UcScene>
  );
}

// ── Marketing: a draft with its knowledge-base sources ──────────────────
function UcMarketingScene() {
  return (
    <UcScene
      ariaLabel="A marketing draft with the knowledge base sources behind it"
      label="Zarco"
      right={<span className="uc-scene-right">drafting</span>}
    >
      <div className="uc-draft">
        <p>Three ways Meridian's operations team cut manual review time this quarter, with the numbers to back it up.</p>
      </div>
      <div className="uc-sources">
        <span className="uc-source-chip">brand tone guide</span>
        <span className="uc-source-chip">Harborview renewal notes</span>
        <span className="uc-source-chip">product one-pager</span>
      </div>
    </UcScene>
  );
}

// ── Customer success: a quiet-account signal ─────────────────────────────
function UcSuccessScene() {
  return (
    <UcScene ariaLabel="A quiet-account signal: Harborview, silent for nine days" label="Signal">
      <div className="uc-signal">
        <span className="uc-signal-dot" />
        <div>
          <p className="uc-signal-name">Harborview</p>
          <p className="uc-signal-text">Quiet 9 days. Renewal conversation now overdue.</p>
        </div>
      </div>
      <div className="uc-scene-foot uc-signal-foot"><UcFlagGlyph /> Sent to your Inbox.</div>
    </UcScene>
  );
}

// ── the six roles: data drives both the copy column and the scene ───────
// `jobs` deliberately varies 3-4 items by role: a padded fourth line would be
// filler on marketing/success, and cutting founder/sales/ops/finance to three
// would drop a real job. Length differs on purpose, not by oversight.
const UC_ROLES = [
  {
    id: "founder",
    kicker: "Founder / MD",
    headline: "The whole business, briefed.",
    jobs: [
      "A morning brief of what changed and what needs you.",
      "Delegate anything in plain English.",
      "Chases what is slipping before it slips.",
      "The Nebula view of the whole company.",
    ],
    Scene: UcFounderScene,
  },
  {
    id: "sales",
    kicker: "Sales",
    headline: "The follow-up never slips again.",
    jobs: [
      "Research a prospect and draft outreach in your voice.",
      "Log calls and next steps to the CRM.",
      "Pipeline reviews that cite their sources.",
      "Renewal chasing that starts itself.",
    ],
    Scene: UcSalesScene,
  },
  {
    id: "ops",
    kicker: "Operations / admin",
    headline: "The routine work runs itself.",
    jobs: [
      "Routines for the weekly grind, each with an accountable owner.",
      "Inbox triage, sorted into actions.",
      "Meeting prep packs, ready before you sit down.",
      "Chasing documents and replies politely, forever.",
    ],
    Scene: UcOpsScene,
  },
  {
    id: "finance",
    kicker: "Finance",
    headline: "Cash in, numbers straight.",
    jobs: [
      "Collections chasing with judgement: it knows who is mid-renewal.",
      "Invoice runs prepared and ready for approval.",
      "Month-end summaries with their sources.",
      "Spend watch, so nothing drifts unnoticed.",
    ],
    Scene: UcFinanceScene,
  },
  {
    id: "marketing",
    kicker: "Marketing",
    headline: "Content that knows the company.",
    jobs: [
      "Drafts grounded in the knowledge base, not generic AI copy.",
      "Campaign follow-through, so nothing launches and gets forgotten.",
      "Repurposing what already worked.",
    ],
    Scene: UcMarketingScene,
  },
  {
    id: "success",
    kicker: "Customer success",
    headline: "Know before the customer tells you.",
    jobs: [
      "Renewal signals and quiet-account flags.",
      "Account health summaries, kept current.",
      "QBR prep pulled from real history.",
    ],
    Scene: UcSuccessScene,
  },
];

function UcRole({ role, n }) {
  const Scene = role.Scene;
  return (
    <section className={"section uc-role" + (n % 2 === 0 ? " tinted" : "")} id={role.id}>
      <div className="shell uc-role-grid">
        <div className="uc-role-copy">
          <p className="chapter-mark">{String(n).padStart(2, "0")} · {role.kicker}</p>
          <h2 className="h2 uc-role-headline">{role.headline}</h2>
          <ul className="uc-jobs">
            {role.jobs.map((j) => (<li className="uc-job-row" key={j}>{j}</li>))}
          </ul>
          <a className="btn-text uc-role-cta" href="index.html#contact">Discuss a project</a>
        </div>
        <div className="uc-role-scene">
          <Scene />
        </div>
      </div>
    </section>
  );
}

// ── hero ─────────────────────────────────────────────────────────────────
function UcHero() {
  return (
    <section className="section uc-hero" id="top">
      <div className="shell">
        <p className="chapter-mark">Zarco / Use cases</p>
        <h1 className="display uc-hero-title">What would it actually do for us?</h1>
        <p className="lede uc-hero-lede">Six roles, real work. Every example below runs through the same assistant, the same memory and the same approvals, configured for your business by Zarco.</p>
      </div>
    </section>
  );
}

// ── quiet cross-link strip before Closing ────────────────────────────────
const UC_CROSSLINKS = [
  { label: "How approvals work", href: "console.html#inbox" },
  { label: "How it learns your business", href: "console.html#memory" },
  { label: "How projects run", href: "console.html#projects" },
];
function UcCrosslinks() {
  return (
    <section className="uc-crosslinks">
      <div className="shell uc-crosslinks-inner">
        <p className="uc-crosslinks-lead">All of this is one product.</p>
        <nav className="uc-crosslinks-nav" aria-label="More about how Zarco works">
          {UC_CROSSLINKS.map((l) => (
            <a key={l.href} className="btn-text uc-crosslink" href={l.href}>{l.label}</a>
          ))}
        </nav>
      </div>
    </section>
  );
}

function UseCases() {
  return (
    <React.Fragment>
      <UcHero />
      {UC_ROLES.map((role, i) => (<UcRole key={role.id} role={role} n={i + 1} />))}
      <UcCrosslinks />
    </React.Fragment>
  );
}

function UseCasesPage() {
  return (
    <div className="site">
      <TopNav current="usecases" />
      <UseCases />
      <Closing />
      <Footer />
    </div>
  );
}

const useCasesCss = `
/* ── hero ── */
.uc-hero { padding-top: clamp(72px, 11vh, 128px); padding-bottom: clamp(40px, 6vh, 64px); }
.uc-hero-title { margin-top: 18px; max-width: 15ch; }
.uc-hero-lede { margin-top: clamp(20px, 3vw, 28px); max-width: 620px; }

/* ── role section rhythm: the same shape six times so the page scans ── */
.uc-role { padding-top: clamp(64px, 8vh, 96px); padding-bottom: clamp(64px, 8vh, 96px); }
.uc-role-grid {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.uc-role-copy { min-width: 0; }
.uc-role-headline { margin-top: 14px; }
.uc-jobs { list-style: none; margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; }
.uc-job-row { padding: 14px 0; border-top: 1px solid var(--ink-10); font-size: 16px; line-height: 1.5; color: var(--ink-80); }
.uc-job-row:last-child { border-bottom: 1px solid var(--ink-10); }
.uc-role-cta { margin-top: clamp(28px, 4vh, 36px); }
.uc-role-scene { min-width: 0; }

/* ── scene chrome: a small dark Console card, echoing the tour ── */
.uc-scene {
  background: var(--panel); border-radius: 20px; overflow: hidden;
  border: 1px solid var(--panel-line); box-shadow: 0 32px 70px -34px rgba(14,14,14,.45);
  max-width: 540px;
}
.uc-scene-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--panel-line); }
.uc-scene-id { display: flex; align-items: center; gap: 9px; color: var(--panel-ink); font-size: 14px; font-weight: 500; }
.uc-scene-mark { width: 20px; height: 20px; border-radius: 6px; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; padding: 3px; flex: none; }
.uc-scene-mark svg { width: 100%; height: 100%; }
.uc-scene-right { font-size: 12px; color: var(--panel-ink-60); white-space: nowrap; }
.uc-scene-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 16px; min-height: 132px; }
.uc-scene-foot { padding-top: 12px; border-top: 1px solid var(--panel-line); font-size: 12px; color: var(--panel-ink-40); }
.uc-scene-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-40); }

/* ── founder: morning brief ── */
.uc-brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.uc-brief-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--panel-ink); }
.uc-brief-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--panel-ink-40); }
.uc-brief-dot--ok { background: var(--panel-ok); }
.uc-brief-dot--warn { background: var(--panel-warn); }

/* ── sales: research, draft, queue ── */
.uc-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.uc-chip { display: inline-flex; align-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--panel-line); color: var(--panel-ink-60); font-size: 12px; border-radius: 999px; padding: 7px 13px; }
.uc-chip--live { background: var(--magenta); border-color: var(--magenta); color: #fff; font-weight: 500; }
.uc-arrow-glyph { width: 11px; height: 11px; color: var(--panel-ink-40); flex: none; }

/* ── operations: routine log ── */
.uc-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.uc-log-row { display: flex; align-items: flex-start; gap: 11px; }
.uc-tick-glyph { width: 14px; height: 14px; margin-top: 3px; flex: none; stroke: var(--panel-ok); }
.uc-log-title { margin: 0; font-size: 14px; font-weight: 500; color: var(--panel-ink); }
.uc-log-detail { margin: 2px 0 0; font-size: 12.5px; color: var(--panel-ink-60); }

/* ── finance: collections queue + one held item ── */
.uc-coll-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.uc-coll-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 11px; border-bottom: 1px solid var(--panel-line); font-size: 12.5px; }
.uc-coll-name { color: var(--panel-ink); font-weight: 500; }
.uc-coll-amount { font-family: var(--font-mono); color: var(--panel-ink-60); }
.uc-coll-status { color: var(--panel-ink-40); }
.uc-held { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px dashed var(--panel-line); background: rgba(255,0,102,.06); }
.uc-held-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--magenta); }
.uc-held-title { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--panel-ink); }
.uc-held-reason { margin: 3px 0 0; font-size: 12.5px; color: var(--panel-ink-60); }

/* ── marketing: draft + knowledge-base sources ── */
.uc-draft { background: rgba(255,255,255,.07); border: 1px solid var(--panel-line); border-radius: 14px; padding: 13px 15px; }
.uc-draft p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--panel-ink); }
.uc-sources { display: flex; flex-wrap: wrap; gap: 7px; }
.uc-source-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .01em; display: inline-flex; align-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--panel-line); color: var(--panel-ink-60); border-radius: 999px; padding: 5px 12px; }

/* ── customer success: quiet-account signal ── */
.uc-signal { display: flex; align-items: flex-start; gap: 12px; }
.uc-signal-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--magenta); box-shadow: 0 0 12px rgba(255,0,102,.55); animation: uc-signal-pulse 2.6s ease-in-out infinite; }
@keyframes uc-signal-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(255,0,102,.55); } 50% { box-shadow: 0 0 20px rgba(255,0,102,.85); } }
.uc-signal-name { margin: 0; font-size: 15px; font-weight: 500; color: var(--panel-ink); }
.uc-signal-text { margin: 3px 0 0; font-size: 13px; color: var(--panel-ink-60); line-height: 1.4; }
.uc-signal-foot { display: flex; align-items: center; gap: 7px; }
.uc-signal-foot svg { width: 12px; height: 12px; flex: none; }

/* ── quiet cross-link strip ── */
.uc-crosslinks { padding-top: clamp(64px, 9vh, 96px); padding-bottom: clamp(72px, 10vh, 112px); text-align: center; }
.uc-crosslinks-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.uc-crosslinks-lead { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -.02em; color: var(--ink); }
.uc-crosslinks-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }

@media (max-width: 900px) {
  .uc-role-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .uc-hero-title { max-width: none; }
  .uc-scene { border-radius: 18px; }
  .uc-scene-body { padding: 16px 16px 18px; }
  .uc-flow { flex-direction: column; align-items: flex-start; }
  .uc-arrow-glyph { transform: rotate(90deg); }
  .uc-coll-row { align-items: flex-start; }
}
`;

window.UseCasesPage = UseCasesPage;
window.useCasesCss = useCasesCss;