// Admin · Help & Manual
// ---------------------------------------------------------------------------
// The studio onboarding manual, built in so it can't get lost. Renders inline
// (and themes light/dark with everything else) with a jump-to contents list,
// plus an "Open printable version" link to the standalone /manual.html for a
// clean print / save-as-PDF.
// ---------------------------------------------------------------------------

function ManualPill({ children, tone }) {
  const map = { sage: ["#eef2e3", "var(--sage-deep)"], rose: ["#f6e6ea", "var(--rose-deep)"], gold: ["#f6edd9", "var(--gold-deep)"] };
  const [bg, fg] = map[tone] || map.sage;
  return <span style={{ background: bg, color: fg, borderRadius: 999, padding: "1px 9px", fontSize: 12, fontWeight: 600, whiteSpace: "nowrap" }}>{children}</span>;
}

// Section list drives both the contents jump-links and the body.
const MANUAL_SECTIONS = [
  { id: "m-oriented", group: "Getting oriented", title: "The two sides of your site" },
  { id: "m-signin", title: "Signing in to the Studio" },
  { id: "m-theme", title: "Light & dark mode" },
  { id: "m-morning", group: "Running the studio", title: "A morning in the studio" },
  { id: "m-storefront", group: "What customers see", title: "The storefront, page by page" },
  { id: "m-tracking", title: "Accounts, order tracking & guest links" },
  { id: "m-today", group: "The dashboard", title: "Today (dashboard home)" },
  { id: "m-orders", title: "Customers & orders" },
  { id: "m-siteedits", title: "Site edits" },
  { id: "m-production", title: "Production floor" },
  { id: "m-scheduling", title: "Schedule & time clock" },
  { id: "m-settings", title: "Settings" },
  { id: "m-records", title: "Audit trail, error log & spam protection" },
  { id: "m-team", group: "People & help", title: "For your floor team" },
  { id: "m-trouble", title: "Troubleshooting & FAQ" },
  { id: "m-glossary", title: "Glossary" },
];

function AdminManual() {
  const jump = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); };
  const eyebrow = { fontVariant: "small-caps", letterSpacing: ".1em", fontSize: 12, color: "var(--sage-deep)" };
  const h4 = { color: "var(--rose-deep)", margin: "16px 0 2px", fontSize: 18 };

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 6, flexWrap: "wrap", gap: 10 }}>
        <div>
          <h2 style={{ margin: 0 }}>Help &amp; Manual</h2>
          <div style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 4 }}>Everything about running the site and studio, in one place. Nothing here is permanent until you save, so it's safe to explore.</div>
        </div>
        <a className="btn btn-small" href="manual.html" target="_blank" rel="noopener">Open printable version ↗</a>
      </div>

      {/* Contents */}
      <div className="stitched stitched-sage" style={{ padding: 16, margin: "14px 0 22px" }}>
        <div style={eyebrow}>Jump to</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "2px 18px", marginTop: 6 }}>
          {MANUAL_SECTIONS.map(s => (
            <React.Fragment key={s.id}>
              {s.group && <div style={{ ...eyebrow, gridColumn: "1 / -1", marginTop: 8 }}>{s.group}</div>}
              <button onClick={() => jump(s.id)} style={{ background: "none", border: "none", textAlign: "left", padding: "4px 0", color: "var(--rose-deep)", cursor: "pointer", fontFamily: "inherit", fontSize: 15 }}>{s.title}</button>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ---------------- Body ---------------- */}
      <div style={{ maxWidth: 760 }}>

        <section id="m-oriented">
          <h3>The two sides of your site</h3>
          <p>Your site is two things sharing one address. The <b>storefront</b> is what the public sees — home, shop, blanks, live quote, design uploader, journal, contact — open to everyone, no login. The <b>Studio dashboard</b> is your private back office for orders, customers, invoices, inventory, the production floor, and every setting that powers the storefront. Anything a customer does out front lands somewhere in here for you to act on.</p>
        </section>

        <section id="m-signin">
          <h3>Signing in to the Studio</h3>
          <p>Go to your site and add <code>#/admin</code> to the address (e.g. <code>yoursite.com/#/admin</code>), enter your studio passcode, and you'll land on this dashboard. You stay signed in on that device until you sign out. The sign-in page also has a <b>Floor team sign-in</b> link for your operators.</p>
          <div style={{ background: "#f7eaec", borderLeft: "3px solid var(--rose)", borderRadius: "0 10px 10px 0", padding: "10px 16px", margin: "12px 0" }}>
            <b style={{ color: "var(--rose-deep)" }}>Keep it private.</b> Anyone with the passcode can see customer details and change the site. Don't write it where others can find it, and sign out on shared computers.
          </div>
        </section>

        <section id="m-theme">
          <h3>Light &amp; dark mode</h3>
          <p>The sun / moon button in the top navigation switches the whole site — storefront and dashboard — between light and dark. Your choice is remembered on that device, and new visitors get whatever matches their phone or computer.</p>
        </section>

        <section id="m-morning">
          <h3>A morning in the studio</h3>
          <div className="stitched" style={{ padding: "10px 18px", margin: "12px 0" }}>
            <ol style={{ margin: "8px 0" }}>
              <li><b>Start on Today.</b> Your dashboard home shows what's due today, what's new, what's awaiting approval, and which proofs still need sending — tap a tile to jump straight to it.</li>
              <li><b>Maintenance first.</b> In <b>Production floor → Maintenance</b>, do each machine's daily upkeep and tap <b>Log daily</b>.</li>
              <li><b>Check what's new.</b> Look at <b>Customer uploads</b>, <b>Shop orders</b>, and <b>Messages</b> — badges mean new.</li>
              <li><b>Pull orders onto the floor.</b> In <b>Production plan</b>, tap <b>Pull in orders</b>, flag <ManualPill tone="rose">rush</ManualPill> jobs, and fill in stitch counts/colours.</li>
              <li><b>Build the plan.</b> Tap <b>Generate plan</b>, review, and <b>Save plan</b> — the calendar and floor board update.</li>
              <li><b>Work the floor.</b> On <b>Shop floor</b>, press <b>Start</b> when a machine begins and <b>Finish</b> when done.</li>
              <li><b>Advance &amp; bill.</b> Move orders through the stages so customers see progress, and send invoices when appropriate.</li>
            </ol>
          </div>
        </section>

        <section id="m-storefront">
          <h3>The storefront, page by page</h3>
          <h4 style={h4}>Home</h4><p>Your welcome page; wording and imagery are editable from <b>Site edits → Edit pages</b>.</p>
          <h4 style={h4}>Shop &amp; Examples</h4><p>Your decorated work and any ready-made items (in-stock items show <b>Add to cart</b>).</p>
          <h4 style={h4}>Shop blanks</h4><p>Blank garments to be decorated, fed from your SanMar catalog.</p>
          <h4 style={h4}>Get a quote</h4><p>A live estimator using the rates in <b>Settings → Pricing</b>. Every estimate is a clearly-labelled ballpark — you confirm the real price.</p>
          <h4 style={h4}>Upload a design</h4><p>How custom jobs begin — it creates a <b>Customer upload</b> and starts the 5-stage tracker.</p>
          <h4 style={h4}>Journal</h4><p>Your blog; only published posts appear (written in <b>Site edits → Journal / blog</b>).</p>
          <h4 style={h4}>Cart &amp; checkout</h4><p>For in-stock items. Checkout <b>reserves stock</b>, emails you, and gives a reference like <code>S-4F2A</code>. These arrive in <b>Shop orders</b>. Customers can enter a <b>discount code</b> at checkout — a valid Win-Back code takes its percentage off automatically and shows the new total. The code is checked against the email it was sent to, can only be used once, and is marked redeemed the moment the order is placed.</p>
          <h4 style={h4}>About &amp; Contact</h4><p>Your story and how to reach you; Contact messages land in <b>Messages</b>.</p>
        </section>

        <section id="m-tracking">
          <h3>Accounts, order tracking &amp; guest links</h3>
          <p>Customers can create an account to follow orders and print invoices/receipts (invoices match by email, so they can exist before someone registers). Every custom order moves through five stages the customer can watch:</p>
          <p style={{ color: "var(--ink-2)" }}>1 · Order Placed → 2 · Design &amp; Digitizing → 3 · On the Hoop – Stitching → 4 · QC &amp; Finishing → 5 · Order Finished.</p>
          <p>For customers who don't want an account, a <b>guest tracking link</b> (from <b>Production floor → Tracking links</b>) shows their order's stage and receipts. It stays live while the order is in progress and for <b>30 days after it's finished</b>.</p>
          <p>Business accounts can also save <b>multiple shipping locations</b> in their dashboard — one per store, with a default — so an order can go to the right location. You can view and manage the same locations from the Customers tab.</p>
        </section>

        <section id="m-today">
          <h3>Dashboard · Today (your home screen)</h3>
          <p>When you sign in you land on <b>Today</b> — a snapshot of what needs you right now, built from your live orders and refreshed on its own. It shows counts for <b>due today</b>, <b>new today</b>, <b>awaiting your approval</b>, <b>proofs to send</b>, <b>rush in progress</b>, <b>open orders</b> and <b>shop orders pending</b>, with a list of everything due today and a "needs your attention" note for approvals and proofs. Tap any tile to jump straight to that work. It's meant to be the first thing you look at each morning.</p>
        </section>

        <section id="m-orders">
          <h3>Dashboard · Customers &amp; orders</h3>
          <h4 style={h4}>Customer uploads</h4><p>Every custom design job. Open one to see the artwork, advance the five stages, and add notes. The badge counts new ones.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>When you send a proof to the customer you can attach a <b>stitch count</b> and the <b>thread colours</b> the logo will be sewn in — the customer sees both right beside the mockup on their approval screen. And any embroidery file in the order (<span className="mono">.dst .exp .pes .pec</span>) has a <b>Quick look</b> button: it reads the file and shows the design drawn from its own stitches, plus stitch count, size, colour changes, density and run time — no need to open digitizing software. The order's thread colours show there too.</p>
          <h4 style={h4}>Shop orders</h4><p>In-stock purchases from the cart (stock already reserved at checkout). Work through and invoice them.</p>
          <h4 style={h4}>Customers</h4><p>Your customer accounts — contact details and history. Expand a customer to see and manage their <b>shipping locations</b>: a business with several stores can keep a ship-to address for each, with one set as the default. You and the customer manage the same list, so it stays in sync.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>Expanding a customer also shows their <b>saved logos &amp; designs</b> — so you can view a logo and its details straight from here without hunting for the order they came from. Image logos preview inline; embroidery files get the same <b>Quick look</b> as the order view (stitch count, size, colour changes, a preview, and the <b>thread colours</b> from the most recent order that used the design). Every file has a download too.</p>
          <h4 style={h4}>Customer Win-Back</h4><p>A prompt to re-engage customers you haven't heard from in a while — it mails them a postcard with a personal discount <b>code</b>. When they come back, that code now works right in the <b>cart</b>: they type it at checkout, the discount comes off automatically, and it's marked redeemed so it can't be used twice. Shop orders show the code, the amount off, and the total to invoice (and "Copy for invoice" includes them).</p>
          <h4 style={h4}>Invoices</h4><p>View invoices and receipts; a paid invoice shows as a receipt with a paid stamp. When you build an invoice, a <b>Ship to</b> picker lets you choose the main address or any of that customer's saved locations (their default is pre-selected) — the chosen address is stamped onto the invoice and appears on the receipt the customer sees.</p>
          <h4 style={h4}>Sales</h4><p>Revenue this month/year, sales tax collected, outstanding invoices, period breakdowns, and a 12-month chart — all from paid invoices.</p>
          <h4 style={h4}>Labels &amp; Scan</h4><p>Print labels and scan to pull up the matching order quickly.</p>
          <h4 style={h4}>Messages</h4><p>Notes from the Contact page; the badge counts unread.</p>
        </section>

        <section id="m-siteedits">
          <h3>Dashboard · Site edits</h3>
          <p style={{ color: "var(--ink-3)", fontSize: 15 }}>Everything here changes what the public sees (except Vendors, which is private).</p>
          <h4 style={h4}>Shop items / Add new item</h4><p>The products and examples on your Shop page — description, price, image, and whether each shows in the store. A ready-to-buy item has an <b>In stock now</b> field: enter how many you have ready to ship and it appears in the shop's "In stock now" list <i>and</i> on your Inventory page automatically — so you only enter it once, here. Leave it blank to keep the item as a made-to-order/catalog piece; set it to 0 to mark it out of stock.</p>
          <h4 style={h4}>Inventory</h4><p>In-house stock of blanks and consumables — quantity, cost, sale price, private notes. <ManualPill tone="gold">low</ManualPill> / <ManualPill tone="rose">out</ManualPill> badges help you reorder; total stock value is summed at the top. Rows with a <ManualPill tone="gold">shop item</ManualPill> badge came from a Shop item's "In stock now" — their stock is managed on the <b>Shop items</b> page, so you won't edit them here.</p>
          <h4 style={h4}>Vendors</h4><p>A private supplier contact sheet — rep, phone, portal, your account number, what you buy, notes. <b>Import CSV</b> brings in a whole list at once (it matches common column names, and re-importing the same file updates rather than duplicates); <b>Export CSV</b> downloads the sheet.</p>
          <h4 style={h4}>SanMar Catalog</h4><p>Manage the imported SanMar blanks that feed the Shop blanks page, with fresh stock and sale pricing.</p>
          <h4 style={h4}>Journal / blog</h4><p>Write, edit and publish posts. Drafts stay private (the badge counts them).</p>
          <h4 style={h4}>Edit pages</h4><p>Change the words on Home, About and other pages without touching code.</p>
          <h4 style={h4}>Artwork studio</h4><p>Prep a logo entirely in your browser — lift it off its background, enlarge it, and trace it to a clean SVG for digitizing. The preview updates <b>live</b> as you drag the Tolerance and Soft-edge sliders, so you can dial it in by eye; "Show original" compares before/after, and Apply commits the result so you can download or trace it.</p>
          <h4 style={h4}>FAQ</h4><p>Add and edit the questions and answers customers see.</p>
        </section>

        <section id="m-production">
          <h3>Dashboard · Production floor</h3>
          <p>The heart of running the shop — turning orders into a real plan, watching the work, and keeping equipment healthy. The six screens are meant to be used roughly in order.</p>

          <h4 style={h4}>Production plan</h4>
          <p>Where the day gets built. Add each <b>machine</b> once (type, speed, heads, efficiency, daily hours). Build your <b>work queue</b> — <b>Pull in orders</b> or add a manual job, set quantity, stitch count, colours and a deadline, and tick <ManualPill tone="rose">rush</ManualPill> to jump the line. Stitch count and colours are editable right in the list — fill them in after digitising, since that's what makes the estimate accurate. Then <b>Generate plan</b> and <b>Save plan</b>.</p>
          <div className="stitched stitched-sage" style={{ padding: "10px 18px", margin: "10px 0" }}>
            <div style={eyebrow}>How the time estimate works</div>
            <p style={{ marginTop: 6 }}>Run time is figured the way an industrial engineer would — stitches ÷ the machine's real speed (rated, adjusted for efficiency), plus colour-change time, hands-on hooping/handling, and one-time setup (screen-print/DTF use impressions-per-hour with screen-burn setup). The planner then <b>assigns each job to the machine that finishes it soonest</b>, <b>sequences embroidery jobs to minimise thread changes</b>, and <b>packs work into your available hours</b> with rush jobs first.</p>
          </div>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>The standard time allowances are sensible starting points; once you've timed a few real jobs they can be tuned to your machines — just ask.</p>

          <h4 style={h4}>Production calendar</h4>
          <p>A week grid — one row per machine, one column per day — showing scheduled run-hours with a bar against each machine's capacity. A bar turns rose when a day is overbooked. It reads the last <b>saved</b> plan, so regenerate after big queue changes.</p>

          <h4 style={h4}>Shop floor</h4>
          <p>The live board, one card per machine, refreshing on its own. Press <b>Start</b> when a machine begins a job (pick the operation), <b>Pause</b> if you stop partway, <b>Finish job</b> when done. This captures the real start/stop times.</p>

          <h4 style={h4}>Maintenance</h4>
          <p>Keeps machines on schedule and reminds you what's due. Each machine shows Daily / Weekly / Monthly / Yearly cards, colour-coded <ManualPill>up to date</ManualPill> <ManualPill tone="gold">due soon</ManualPill> <ManualPill tone="rose">overdue</ManualPill>. Tap <b>Log daily</b> (etc.) to record it — a checklist, a date you can backdate, and a note. The menu shows a <ManualPill tone="gold">due</ManualPill> badge; <b>View log</b> shows the history.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>The checklist follows each machine's <b>Type</b> — an embroidery head, a DTF printer and a screen-print press need very different upkeep. Each machine card has a <b>Type</b> dropdown; if a DTF printer was added on the default (Embroidery) type and is showing needle-and-hook tasks, switch it to <b>DTF printer</b> and its Daily/Weekly/Monthly/Yearly checklist (environment, shake the white ink, nozzle check, wiper &amp; caps, and so on) appears. The "View full schedule" button lets you preview any type's checklist.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}><b>Embroidery — Daily:</b> brush lint, one drop of oil on the hook raceway, check the needle. <b>Weekly:</b> deep-clean tension disks &amp; bobbin, lubricate moving parts, tighten loosened screws. <b>Monthly:</b> dust under the needle plate, floss the tension disks, back up designs &amp; settings. <b>Yearly:</b> professional tune &amp; re-time.</p>

          <h4 style={h4}>Floor team</h4>
          <p>Add each person with a name, username and PIN, pick a role, and fine-tune permissions with the checkboxes. This attributes start/stop times to a person. The screen shows the exact web address your operators use to clock in.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>Each person also has a <b>Pay</b> section: choose <b>Hourly</b> and enter their rate, or <b>Salaried</b> and enter their annual salary (the site works out the hourly cost as salary ÷ 2,080 hours). Either way you get a <b>labour cost per hour</b> with a <b>Copy for calculator</b> button — paste it straight into your job-cost calculator on the Pricing page. The same figure drives the labour totals on the Time clock, and it's admin-only — your team never see each other's pay.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>Operators sign in at <span className="mono" style={{ color: "var(--sage-deep)" }}>yoursite/#/floor</span> with their own username and PIN — separate from your studio passcode — and get the live floor board scoped to what you've allowed them. You, signed in as owner, can do everything.</p>

          <h4 style={h4}>Tracking links</h4>
          <p>Search an order, tap <b>Create link</b>, and copy it to send (shown only once). The customer sees the order's stage and printable receipts; the link stays live in progress and for 30 days after finishing. You can see when a link was last opened and <b>Revoke</b> any link instantly.</p>
        </section>

        <section id="m-scheduling">
          <h3>Dashboard · Schedule &amp; time clock</h3>
          <p>Two screens under <b>Production floor</b> plan your team's week and track their hours.</p>

          <h4 style={h4}>Schedule</h4>
          <p>A weekly grid — one row per person, one column per day. Add a shift with a start and end time, an optional machine/station and a note. <b>Copy last week</b> rolls the previous week's shifts forward so you're not rebuilding from scratch. Your team see their own week on their floor screen.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>This screen also holds the <b>time-off &amp; overtime requests</b> your team submit. Each one shows the dates, hours and reason; <b>Approve</b> or <b>Deny</b> with an optional note, and the person sees the decision on their floor screen.</p>

          <h4 style={h4}>Time clock</h4>
          <p>Your team clock in, take breaks and clock out from their own floor screen; their hours land here. The top shows <b>who's on the clock right now</b> with today's paid hours. Below that are the <b>correction tools</b> — if someone forgot to clock in or out, or a break was mis-recorded, you can fix the times, add a shift they missed, or edit/remove a break. Every correction is written to the <b>audit trail</b> (who changed whose time, and to what), so the record stays honest.</p>
        </section>

        <section id="m-settings">
          <h3>Dashboard · Settings</h3>
          <h4 style={h4}>Settings</h4><p>General studio and site settings.</p>
          <h4 style={h4}>Pricing</h4><p>The rates behind the live quote — garments, embroidery by stitch count, bulk discounts, digitizing, sales. Turn on a sale and the quote updates for customers automatically.</p>
          <p style={{ fontSize: 15, color: "var(--ink-2)" }}>There's also a <b>Sew-out policy</b> setting: the first sew-out is free, and you set the price for each additional sew-out after a change. That notice shows on the <b>Get a quote</b> page and is included in the <b>proof email</b> (so a customer who skimmed the quote page still sees it). Set the price to 0 to hide it, or write your own wording.</p>
          <h4 style={h4}>Announcement</h4><p>A banner across the top of the storefront — closure, promo, turnaround notice. Toggle it on and set the text, link and colours.</p>
        </section>

        <section id="m-records">
          <h3>Dashboard · Audit trail, error log &amp; spam protection</h3>
          <p>Three quiet features keep the studio accountable and safe. You'll find the first two under <b>Settings</b>.</p>
          <h4 style={h4}>Audit trail</h4><p>An append-only record of who changed what — invoices adjusted or deleted, customers edited or removed, proofs sent, prices and settings changed, staff added or their permissions changed, time-clock corrections, and more. You can search and filter by action or person, and <b>Export CSV</b>. It can't be edited or deleted from anywhere in the app, and each entry is sealed to the one before it, so <b>Verify integrity</b> can prove nothing was tampered with.</p>
          <h4 style={h4}>Error log</h4><p>Recent hiccups — both server errors and browser crashes — newest first, so if something misbehaves you (or whoever helps with the site) can see exactly what and where. Click a row for the full detail; <b>Clear log</b> empties it.</p>
          <h4 style={h4}>Spam &amp; scanner protection</h4><p>Working in the background: your public forms (contact, sign-up, order upload) carry a hidden trap that silently drops bot submissions, so junk never reaches your inbox or customer list. And automated attackers probing for common weak spots are logged (tagged <ManualPill tone="rose">scanner</ManualPill> in the error log) and turned away. Nothing for you to manage — it just runs.</p>
        </section>

        <section id="m-team">
          <h3>For your floor team</h3>
          <div className="stitched" style={{ padding: "10px 18px", margin: "12px 0" }}>
            <div style={eyebrow}>Signing in</div>
            <p style={{ marginTop: 6 }}>Go to <b>yoursite/#/floor</b> (there's also a "Floor team sign-in" link on the studio login page) and sign in with the username and PIN Joy set up for you. Your start/stop times are recorded under your name.</p>
            <div style={{ ...eyebrow, marginTop: 12 }}>Your clock</div>
            <p style={{ marginTop: 6 }}>At the top of your floor screen is <b>My clock</b>. Tap <b>Clock in</b> when you start the day, <b>Take a break</b> or <b>Lunch</b> when you step away (and <b>End</b> it when you're back), and <b>Clock out</b> when you leave. It shows your paid hours so far and today's record. If you ever forget to clock in or out, just tell Joy — she can correct it.</p>
            <div style={{ ...eyebrow, marginTop: 12 }}>Your week &amp; time off</div>
            <p style={{ marginTop: 6 }}><b>My week</b> shows the shifts you're scheduled for. Use <b>Request time off / overtime</b> to send Joy a request with the dates and a reason; you'll see it go from pending to approved or denied, and can withdraw a pending one.</p>
            <div style={{ ...eyebrow, marginTop: 12 }}>Daily, before the first project</div>
            <p style={{ marginTop: 6 }}>Brush out the lint, one drop of oil on the hook raceway, check the needle (replace if bent or dull). Then open <b>Maintenance</b> and tap <b>Log daily</b>.</p>
            <div style={{ ...eyebrow, marginTop: 12 }}>Running a job</div>
            <p style={{ marginTop: 6 }}>On <b>Shop floor</b>, find the machine, pick the operation, press <b>Start</b>. <b>Pause</b> if you step away; <b>Finish job</b> when done.</p>
            <div style={{ ...eyebrow, marginTop: 12 }}>Rush &amp; trouble</div>
            <p style={{ marginTop: 6 }}>Work the board top to bottom — <ManualPill tone="rose">RUSH</ManualPill> jobs are already first. If a machine skips, breaks thread repeatedly, or makes a new noise, note it in maintenance and tell Joy before pushing it.</p>
          </div>
        </section>

        <section id="m-trouble">
          <h3>Troubleshooting &amp; FAQ</h3>
          <h4 style={h4}>A production screen says "Available on the live site."</h4><p>Those tools run on the live studio database, so they only appear on the deployed site, not a local preview.</p>
          <h4 style={h4}>A job's time estimate looks like almost nothing.</h4><p>It's missing stitch count or colours — fill them in on the Production plan queue, then Generate plan again.</p>
          <h4 style={h4}>The calendar doesn't match a change I made.</h4><p>It reads the last saved plan; regenerate and save after changing the queue.</p>
          <h4 style={h4}>A DTF printer is showing embroidery maintenance tasks.</h4><p>Its <b>Type</b> is still set to Embroidery. On the Maintenance screen, open that machine and switch Type to <b>DTF printer</b> — the correct checklist appears right away.</p>
          <h4 style={h4}>I set a Shop item's stock but it isn't in the shop.</h4><p>"In stock now" only sells a <b>ready-to-buy</b> item that has a <b>price</b>, and <b>0</b> means out of stock. Give it a price, set a number of 1 or more, and it'll show in the shop's "In stock now" list.</p>
          <h4 style={h4}>Someone's clocked hours look wrong.</h4><p>Open <b>Production floor → Time clock</b> and use the correction tools to fix the clock-in/out or a break, or add a shift they forgot to clock. Every change is logged in the audit trail.</p>
          <h4 style={h4}>A customer says their tracking link stopped working.</h4><p>Links expire 30 days after an order is finished (or if revoked). Create a fresh one from Tracking links.</p>
          <h4 style={h4}>I changed the storefront and don't see it.</h4><p>Refresh the page; a hard refresh clears anything cached.</p>
        </section>

        <section id="m-glossary">
          <h3>Glossary</h3>
          <div style={{ fontSize: 16 }}>
            <p><b>Blank</b> — an undecorated garment you embroider or print. &nbsp; <b>Upload</b> — a custom job from "Upload a design." &nbsp; <b>Shop order</b> — an in-stock purchase via the cart.</p>
            <p><b>Stitch count</b> — total stitches in a design; the main driver of embroidery time and price. &nbsp; <b>SPM / IPH</b> — stitches-per-minute / impressions-per-hour. &nbsp; <b>Setup</b> — one-time prep per job. &nbsp; <b>Run-hours</b> — machine time a job takes.</p>
            <p><b>Rush</b> — a job flagged to jump the queue. &nbsp; <b>Guest link</b> — a no-account URL for tracking and receipts. &nbsp; <b>Receipt vs. invoice</b> — an invoice becomes a receipt once marked paid.</p>
          </div>
        </section>

        <div style={{ textAlign: "center", color: "var(--ink-3)", padding: "30px 0 10px" }}>
          <div className="script" style={{ fontSize: 28, color: "var(--rose-deep)" }}>Hazelbelle</div>
          <div style={{ fontSize: 14 }}>Studio Onboarding Manual</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminManual });
