/**
 * "How It Works" section on the Ship For Me page — five-step pipeline in a
 * bento grid (3 cards on row 1, 2 wider cards on row 2).
 *
 * Built from a screenshot only (Figma access unavailable), with one partial
 * exception: a follow-up screenshot had Figma's inspector open on the
 * active "Create request" card and its neighbour — both read **330px tall**
 * (457 wide for the active card vs 405 for a plain one). That width
 * difference is almost certainly just where the selection box happened to
 * land rather than a deliberate asymmetry, so this build uses one flexible
 * bento grid instead — 3 equal columns on row 1, 2 equal columns on row 2 —
 * rather than reproducing two slightly different fixed widths.
 *
 * The active-card treatment — background blur plus a couple of inner/drop
 * shadows on the frame — is approximated in CSS with `backdrop-blur` +
 * `shadow` rather than a literal filter-for-filter port, which isn't
 * directly expressible outside Figma. Per the client's instruction, that
 * treatment is now **card 1's default look** and also what cards 2–5
 * switch to on `:hover`.
 *
 * Colours were pinned down in two passes: first the inspector's flattened
 * "Selection colors" panel on the whole active-card group (checked against
 * both the active card and a plain one — same six swatches on both), then
 * two follow-up passes with the inspector opened layer-by-layer, once on a
 * rest-state card ("Confirm cost") and once on the hovered/active one
 * ("Create request"). The layer-by-layer reads superseded a couple of
 * things the flattened swatch list got wrong:
 *   - `#00AAFF` — the grid's border/divider lines (all cards, not just
 *     active), matching the same colour already used for the Low MOQ rail
 *     border elsewhere on the site.
 *   - `#0652E0` — already `--brand`; the header icon, and one of the hover
 *     wash's deep-blue stops.
 *   - `#D2EAFF` / `#EEFC72` — **not** a flat low-opacity wash on every card
 *     as first guessed; they only actually show up in the *hover* wash
 *     (pale blue / pale yellow-green, toward `#00AAFF` → `#0652E0` deep
 *     blue at the text corner). Stop positions/opacities for that wash are
 *     still an approximation — the swatch list has no per-stop data — but
 *     the four colours themselves are confirmed, not guessed.
 *   - The two `FFFFFF` entries are the plain white/transparent ends of the
 *     rest-state base fill and the glass-icon circle.
 *   - `#FBF9FA` → `#2686ED` (51% opacity, linear) turned out to belong to
 *     neither wash — it's the big numeral's **own** fill, confirmed static
 *     across both rest and hover on its own node (W 161, "Linear" fill),
 *     so it does not cross-fade or otherwise change on `:hover`.
 *   - Title fill: `#838383` at rest → `#141B34` (dark navy, **not** white)
 *     on hover.
 *   - Body fill: `#B3B3B3` at rest → `#FFFFFF` at full opacity (**not**
 *     `/80`) on hover.
 *
 * The small circular icon on card 1 (bottom-left) was illegible at the
 * available resolution — rendered as a generic arrow rather than guessed at
 * a specific glyph. Revisit once Figma is reachable.
 */

export const howItWorksIntro = {
  title: "How It Works",
  // The screenshot's copy ran "tracked  Every" with a bare double space and
  // no connector into "pipeline you can see" — read as a missing period and
  // a missing dash respectively, reconstructed here for legibility.
  subtitle:
    "Five steps, fully tracked. Every shipment moves through the same transparent pipeline — you can see exactly where it is at each stage.",
};

export const howItWorksSteps = [
  {
    number: "1",
    title: "Create request",
    body: "Add product links or supplier details",
  },
  {
    number: "2",
    title: "Confirm cost",
    body: "See exact quote, no hidden fees",
  },
  {
    number: "3",
    title: "China warehouse",
    body: "Product received and inspected",
  },
  {
    number: "4",
    title: "Customs and transit",
    body: "Duties handled, live tracking on",
  },
  {
    number: "5",
    title: "Doorstep delivery",
    body: "Delivered anywhere in Bangladesh",
  },
] as const;