Progress Thread

import { ScrollProgressThread } from '@/components/ui/scroll-progress-thread'

import { ScrollProgressThread } from '@/components/ui/scroll-progress-thread'

export default function ScrollProgressThreadDemo() {
  return (
    <div className="py-12 sm:py-16">
      <ScrollProgressThread showLabels>
        <article className="space-y-10">
          <header className="space-y-4">
            <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
              Field notes · issue 12
            </p>
            <h1 className="text-3xl font-semibold tracking-tight text-balance text-foreground sm:text-4xl">
              How Meridian Labs cut close from nine days to three
            </h1>
            <p className="text-base leading-relaxed text-muted-foreground sm:text-lg">
              A walkthrough of the ledger rebuild that replaced weekend
              firefighting with a nightly exception board, written for
              controllers who still open the general ledger by hand.
            </p>
          </header>

          <section className="space-y-4">
            <h2 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
              The bottleneck was not the ERP
            </h2>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              Meridian ran NetSuite cleanly. What failed was the gap between
              warehouse receipts and AP: 2,400 lines a month arrived as PDFs,
              emails, and portal exports. Analysts spent four hours a day
              re-keying amounts that already existed somewhere in the stack.
            </p>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              We mapped every handoff for one full close. Eighteen of
              twenty-two delays sat outside the ERP, in shared drives, Slack
              threads, and a spreadsheet named “FINAL_v7_use_this.”
            </p>
          </section>

          <section className="space-y-4">
            <h2 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
              Instrument the reading path first
            </h2>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              Before any automation, the team installed a single exception
              board. Every unmatched line carried a status, owner, and age.
              Reading progress on the board became the stand-up, not a
              status meeting about status meetings.
            </p>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              Milestone dots in this demo mirror that idea: the thread
              measures real headings in the document, not an arbitrary
              scroll percentage. You always know where you are in the
              argument.
            </p>
          </section>

          <section className="space-y-4">
            <h2 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
              What shipped in thirty days
            </h2>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              Phase one extracted invoice fields against Meridian’s chart of
              accounts, not a generic template. Phase two wired dual-approval
              thresholds into the match engine. Phase three sealed nightly
              audit packs with source hashes for the external auditors.
            </p>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              Close dropped from nine calendar days to three. Exception age
              fell from 41 hours median to under six. The controller’s only
              remaining complaint: the board is almost too quiet.
            </p>
          </section>

          <section className="space-y-4">
            <h2 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
              What we would change next time
            </h2>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              Start with the reading instrument. Automation without a shared
              view of “what is still open” just moves the fire. Build the
              thread first, then fill it.
            </p>
          </section>
        </article>
      </ScrollProgressThread>
    </div>
  )
}