import Link from "next/link";
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker } from "@/components/site";

export const metadata = {
  title: "Getting started",
  description: "Five steps from opening the demo to issuing at the counter, with an honest time estimate against each one. The same five whether the shelf is a linen room or a store cupboard.",
  alternates: { canonical: "/getting-started" },
};

const STEPS = [
  { n: "1", t: "Open the demo and have a look", b: "Everything works on demonstration data. Issue a set, receive a box, run a report. Nothing you do here touches a real record.", time: "20 minutes" },
  { n: "2", t: "Load the catalogue", b: "Garments, sizes, unit costs and supplier codes. This is the one piece worth doing carefully, because every report values from it.", time: "An hour" },
  { n: "3", t: "Load the staff list", b: "Name your staff groups in Settings and choose each one’s route first, then load the list: name, department, cost centre and group. Sizes fill in as people are issued, so don’t hold up the start waiting for them.", time: "An hour" },
  { n: "4", t: "Count what’s on the shelf", b: "Run a stocktake as your opening balance. From that point on-hand is live and reorder flags start working.", time: "An afternoon" },
  { n: "5", t: "Start issuing", b: "That’s it. The first replenishment order builds itself from the first day’s movement.", time: "Same day" },
];

const READY = [
  "The garment list with sizes and current unit costs",
  "Supplier names, codes and order contacts",
  "The staff list with departments and cost centres",
  "Your GL account for uniform spend",
  "Whoever signs off entitlements for each team",
];

export default function GettingStarted() {
  return (
    <>
      <SiteNav />
      <PageHead
        kicker="Getting started"
        title="Issuing by the end of the first afternoon."
        lede="There’s no implementation project. Five steps, done in the order below, and the counter is live."
      />

      <Band pad="0 40px 0">
        {STEPS.map((s) => (
          <div key={s.n} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "120px 1fr 180px", gap: 32, padding: "34px 0", borderBottom: "1px solid var(--color-divider)", alignItems: "start" }}>
            <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 56, lineHeight: 0.9, color: "var(--color-accent)" }}>{s.n}</div>
            <div>
              <h2 style={{ ...h3, fontSize: "clamp(19px,2vw,25px)", margin: 0 }}>{s.t}</h2>
              <p style={{ ...body, fontSize: 15.5, margin: "10px 0 0", maxWidth: "56ch" }}>{s.b}</p>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ ...kicker, color: "var(--color-neutral-700)", fontSize: 11 }}>About</div>
              <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 18, marginTop: 4 }}>{s.time}</div>
            </div>
          </div>
        ))}
        <div style={{ height: 22 }} />
      </Band>

      <Band tone="surface">
        <h2 style={h2}>What to have ready.</h2>
        <p style={{ ...body, marginTop: 14, maxWidth: "56ch" }}>None of it is hard to find. Most linen rooms and store cupboards already have all five in a workbook somewhere.</p>
        <div style={{ marginTop: 26 }}>
          {READY.map((r) => (
            <div key={r} style={{ display: "flex", gap: 16, padding: "13px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 16 }}>
              <span style={{ width: 8, height: 8, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{r}
            </div>
          ))}
        </div>
      </Band>

      <Band>
        <div style={{ border: "2px solid var(--color-text)", padding: "28px 32px 32px" }}>
          <div style={kicker}>One thing first</div>
          <h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)", marginTop: 10 }}>Talk to information security before real staff data goes in.</h2>
          <p style={{ ...body, marginTop: 14, maxWidth: "58ch" }}>Try the demo with demonstration data as long as you like. The moment you want your own staff list in it, hosting, backup and retention should be agreed with your facility.</p>
          <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
            <Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="getting-started" className="btn btn-primary">Open the working demo</Link>
            <Link href="/security" className="btn btn-secondary">Security &amp; data</Link>
          </div>
        </div>
      </Band>

      <CtaBand />
    </>
  );
}