/* global React */
/* =========================================================================
   Thrift Flip Basics: 5 Fixes Worth Learning — Nelly
   Reuses the .nl magazine layout (nelly-article.css) with the .nl-nelly
   accent. Shape is a WORKBENCH: a buying spread with a shop checklist, a
   full-bleed duo plate, the five fixes run as a sticky-image diagnostic
   (.nl-diag), the tailor's three inside the dark band, and a veiled closer.

   TRANSLATION NOTE: every visible string lives in TF_COPY. Translate values
   only; markup/classes/images/hrefs stay.
   ========================================================================= */

const TF_IMG = {
  hero: "/assets/nelly-thrift-hero.jpg",
  hem: "/assets/nelly-thrift-hem.jpg",
  bench: "/assets/nelly-thrift-bench.jpg",
  closer: "/assets/nelly-thrift-closer.jpg",
  fabric: "/assets/nelly-fabric-hero.jpg",
  capsule: "/assets/nelly-capsule-care-hero.jpg",
};

const TF_COPY = {
  kicker: "Care · Alterations",
  titleTop: "A Thrift Flip Is Usually Just a Hem.",
  titleBot: "And four other fixes worth learning.",
  subtitle: "The five alterations that do the work — hem, side seams, buttons, open seams, shoulder pads — what to check before you hand over the money, and the three jobs that belong to a tailor.",

  byline: {
    by: "Words by",
    name: "Nelly",
    href: "/en/contributors/nelly/",
    avatar: "/assets/nelly.png",
    role: "Style Director",
    read: "6 min read",
  },

  hero: {
    caption: "Good wool, an intact lining, and four buttons the colour of a filing cabinet.",
    credit: "The Fashion Edition · Care",
  },

  deck: "I bought a navy jacket for less than the buttons I eventually put on it.",

  paras: [
    /* 0 */ "It hung in the wardrobe for most of a year looking like something that belonged to someone else, which it had. Good wool, an intact lining, a maker who had clearly cared about the inside of it. And two shoulder pads thick enough to sit on.",
    /* 1 */ "Nothing about it was broken. That is worth saying plainly, because it is true of most of what hangs on a secondhand rail. The garment is not damaged. It was cut for a different body in a different decade, and then priced as though that were a fault.",
    /* 2 */ "What it needed took one evening and no machine. The pads came out, the plastic buttons came off, six horn buttons went on. It has been in rotation for three winters and nobody has ever asked about it, which is the whole point of an alteration.",
    /* 3 */ "That is what a thrift flip actually is, most of the time. Not a refashion, not a crop top cut out of a men's shirt. Five small corrections that move a garment from almost to yours — and the judgement to know which jobs were never yours to begin with.",

    /* 4 */ "The flip is decided in the shop, before any of this. A jacket that fits everywhere except the buttons is worth an evening. A jacket that fits nowhere is a project you will not finish, and I have a shelf that proves it.",
    /* 5 */ "So I check three things now, in this order. The shoulders, because a shoulder seam sitting out past the joint cannot be moved without rebuilding the garment from the top down. The seam allowance, turned inside out under the shop lights, because a side seam with a finger's width of spare cloth can be taken in and a seam trimmed to a few threads cannot. And the fibre, because wool, cotton, linen and denim all forgive a needle in a way that coated synthetics and bonded seams do not.",

    /* 6 */ "Nothing on this list looks finished until it has been pressed, and pressing is not ironing. You set the iron down on a damp cloth, leave it there, lift it, and move. No sliding — sliding is what stretches a new hem into a wave and puts shine on wool.",
    /* 7 */ "Press at each stage rather than at the end. A pinned fold that has been pressed stays where you put it while you sew, which is most of what makes hand stitching look neat from the outside. The pressed version of a mediocre seam beats the unpressed version of a perfect one, every time.",

    /* 8 */ "Three jobs go to a tailor, and I hand them over without feeling I have lost an argument. Sleeve length on a jacket, because the buttonholes travel with it and the honest fix is up at the shoulder. Anything through the waistband of jeans, because the loops, the topstitching and the rivets are all in the way and the result always reads as re-cut. And the shoulders of a structured coat, because the shoulder is the seam the entire garment hangs from.",
    /* 9 */ "A tailor charges less to take in a jacket than most of these jackets cost. The reason to learn the five above is not to avoid paying anyone. It is so the money goes on the work that is genuinely hard, instead of on a hem.",

    /* 10 */ "The jacket still has somebody's initials inked inside the breast pocket. I left them there, partly because removing ink is not on the list and partly because I like knowing it had a life before me.",
    /* 11 */ "That is the honest appeal of all of this. You are not making something new. You are taking a garment that already worked for somebody and moving it about an inch, which is usually all it ever needed.",
  ],

  headings: {
    shop: "Buy the fixable thing",
    checks: "The rail test",
    fixes: "The five fixes, in the order they are worth learning",
    press: "The press is half of it",
    tailor: "The three I hand over",
  },

  shopNote: {
    lead: "Fibre decides almost everything downstream of the fitting room — ",
    linkLabel: "the fabric cheat sheet",
    linkHref: "/en/contributors/nelly/the-fabric-cheat-sheet/",
    tail: " is the same list, sorted for a wash rather than a needle.",
  },

  checks: [
    "The shoulder seam lands on the joint, not past it.",
    "A finger's width of seam allowance inside the side seams.",
    "A deep hem, if length is the thing that is wrong.",
    "Wool, cotton, linen or denim — not bonded, coated or heat-pleated.",
    "No smell. A smell is the one thing you cannot alter.",
  ],

  pull: "You are not rescuing a garment. You are finishing one that was cut for somebody else.",
  pullBy: "— Nelly",

  benchCap: "Horn buttons laid out along the lapel, seam ripper beside them. The whole kit fits in a biscuit tin.",

  fixes: [
    {
      n: "The hem",
      b: "Learn this one first, because length is what is wrong with most of it. Press the new fold, pin it, and work a blind stitch along the inside, catching a single thread of the face cloth every centimetre so the front stays clean. A machine hem is quicker and reads as a machine hem on anything with drape. The first pair of trousers takes most of an evening; the second takes an hour. Start with something dark and matte, where a wobble in the stitch line has nowhere to show.",
    },
    {
      n: "The side seams",
      b: "The most useful fix there is, because secondhand is mostly too big rather than too small. Turn the garment inside out, put it on, and pin a new line from the underarm down to the hem. Then take it off and check the two sides against each other flat, because they will not match and you will not notice while you are wearing it. Baste the new line by hand and live in it for ten minutes before you commit. Sew, then cut the old seam allowance away — never the other order.",
    },
    {
      n: "The buttons",
      b: "The cheapest change on this list and the one people notice without knowing why. Plastic buttons are most of what makes decent cloth look cheap, and a card of horn or corozo costs less than a sandwich. Replace the whole set rather than the one that cracked, match the new button to the existing buttonhole rather than the other way round, and leave a shank of thread as thick as the cloth underneath. Buttons sewn flat against heavy wool pull the front out of line.",
    },
    {
      n: "The open seam",
      b: "A split seam and a fallen hem are the same problem: one thread has broken and the rest has unzipped behind it. A ladder stitch closes both invisibly, because it runs inside the fold on each side and pulls the two edges together with nothing crossing the gap. It is the one stitch worth memorising properly. Ten minutes with a needle and the garment comes off the mending pile, which in my flat was where things went to be quietly given away.",
    },
    {
      n: "The shoulder pads",
      b: "On anything cut in the eighties or nineties, taking these out changes more than the other four combined. Unpick a few centimetres of lining at the armhole, find the pad, cut the tacking stitches holding it rather than the lining itself, and close the opening with a ladder stitch. Do it with the jacket on a hanger and the pads pushed flat first, so you can see the shoulder line you are about to commit to. This one does not come back if you are wrong.",
    },
  ],

  kit: {
    kicker: "The kit",
    lead: "You need almost nothing, and you need it in one box rather than across four trips: assorted needles, a seam ripper, a thimble that actually fits, small scissors you never let near paper, and thread in black, navy, grey and beige. If you are starting from nothing, ",
    linkLabel: "a basic sewing kit",
    href: "/go/nelly-sewing-kit",
    tail: " covers all of it for less than a single alteration, though the thread is the part you will replace first — the reels in these boxes are short and the colour range was decided by whoever packed it. Everything else in the tin outlasts the thread by years.",
    disclosure: "Some links here are affiliate links — if you buy through one, HowTo: Fashion Edition earns a commission at no extra cost to you.",
  },

  closer: "Five stitches and it stops being somebody else's.",

  sign: { name: "Nelly", role: "Style Director · The Fashion Edition", href: "/en/contributors/nelly/", avatar: "/assets/nelly.png" },

  related: {
    eyebrow: "More from Nelly",
    cards: [
      { kicker: "Care", title: "The Fabric Cheat Sheet", desc: "What survives your dryer — and why elastane decides for the whole garment.", href: "/en/contributors/nelly/the-fabric-cheat-sheet/", img: TF_IMG.fabric },
      { kicker: "Care", title: "Capsule Wardrobe Care", desc: "Thirty pieces, three years, and the hour a month that decides it.", href: "/en/contributors/nelly/capsule-wardrobe-care/", img: TF_IMG.capsule },
      { kicker: "The Handbook", title: "Women · Alterations", desc: "What a tailor changes, what it costs, and what to ask for at the counter.", href: "/en/women/fit/alterations/", img: TF_IMG.hem },
    ],
  },
};

const tfpara = (i) => TF_COPY.paras[i];
function TFParas({ items }) { return items.map((i) => <p key={i}>{tfpara(i)}</p>); }

function TFTopper() {
  return (
    <div className="nl-shell">
      <div className="nl-topper">
        <div className="nl-crumb">
          <a href="/">How To: Fashion</a><span className="sep">/</span>
          <a href={TF_COPY.byline.href}>Nelly</a><span className="sep">/</span>
          <span className="here">Thrift Flip Basics</span>
        </div>
        <div className="nl-stamp">Care<span className="dot" />Alterations</div>
      </div>
    </div>
  );
}

function TFHead() {
  const b = TF_COPY.byline;
  return (
    <div className="nl-shell">
      <header className="nl-head">
        <div className="nl-kicker">{TF_COPY.kicker}</div>
        <h1 className="nl-h1">{TF_COPY.titleTop} <span className="it">{TF_COPY.titleBot}</span></h1>
        <p className="nl-sub">{TF_COPY.subtitle}</p>
        <div className="nl-byline">
          <span className="avatar" style={{ backgroundImage: `url(${b.avatar})` }} />
          <span className="who"><span className="by">{b.by}</span><br /><span className="name"><a href={b.href}>{b.name}</a></span></span>
          <span className="meta">{b.role}<br />{b.read}</span>
        </div>
      </header>
    </div>
  );
}

function TFHero() {
  return (
    <figure className="nl-figure nl-band hero nl-hero-wrap">
      <div className="img" style={{ backgroundImage: `url(${TF_IMG.hero})` }} />
      <figcaption className="nl-cap">
        <span>{TF_COPY.hero.caption}</span>
        <span className="accent">{TF_COPY.hero.credit}</span>
      </figcaption>
    </figure>
  );
}

function TFDeck() {
  return <div className="nl-shell"><section className="nl-deck"><p>{TF_COPY.deck}</p></section></div>;
}

function TFLead() {
  return (
    <div className="nl-shell">
      <section className="nl-block lead first">
        <div className="nl-2col nl-prose">
          <div className="c"><TFParas items={[0, 1]} /></div>
          <div className="c"><TFParas items={[2, 3]} /></div>
        </div>
      </section>
    </div>
  );
}

/* ---------------------------------------------- split spread: the buying
   half, image running off the left page edge, prose pulled onto the grid */
function TFShop() {
  const n = TF_COPY.shopNote;
  return (
    <section className="nl-spread">
      <div className="im">
        <div className="ph" style={{ backgroundImage: `url(${TF_IMG.hem})` }} />
        <div className="rcap">Blind-stitching a flannel cuff. Forty minutes, no machine.</div>
      </div>
      <div className="tx nl-prose">
        <h2 className="nl-prin-eyebrow">{TF_COPY.headings.shop}</h2>
        <TFParas items={[4, 5]} />
        <p>{n.lead}<a className="nl-xlink" href={n.linkHref}>{n.linkLabel}</a>{n.tail}</p>
      </div>
    </section>
  );
}

function TFChecks() {
  return (
    <div className="nl-shell">
      <section className="nl-block">
        <h2 className="nl-prin-eyebrow">{TF_COPY.headings.checks}</h2>
        <div className="nl-questions">
          <ul className="nl-q-list">
            {TF_COPY.checks.map((q, i) => <li key={i}>{q}</li>)}
          </ul>
        </div>
      </section>
    </div>
  );
}

/* ---- full-bleed duo plate: the table, then the stitch, read as one image */
function TFPlate() {
  return (
    <section className="nl-plate duo" aria-hidden="true">
      <div className="img nl-crop-b" style={{ backgroundImage: `url(${TF_IMG.hero})` }} />
      <div className="img nl-crop-in" style={{ backgroundImage: `url(${TF_IMG.hem})` }} />
    </section>
  );
}

function TFPull() {
  return (
    <div className="nl-shell">
      <section className="nl-pull line">
        <blockquote>{TF_COPY.pull}</blockquote>
        <div className="nl-look-eyebrow">{TF_COPY.pullBy}</div>
      </section>
    </div>
  );
}

/* ------- the five fixes, run against a sticky plate of the working bench */
function TFFixes() {
  return (
    <div className="nl-shell">
      <section className="nl-diag">
        <div className="im">
          <div className="ph" style={{ backgroundImage: `url(${TF_IMG.bench})` }} />
          <div className="rcap">{TF_COPY.benchCap}</div>
        </div>
        <div className="li">
          <h2 className="nl-prin-eyebrow">{TF_COPY.headings.fixes}</h2>
          <ol className="nl-prin-list">
            {TF_COPY.fixes.map((f, i) => (
              <li className="nl-prin" key={f.n}>
                <span className="pn">{String(i + 1).padStart(2, "0")}</span>
                <div className="pc"><h3 className="ph">{f.n}</h3><p className="pb">{f.b}</p></div>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </div>
  );
}

function TFPress() {
  return (
    <div className="nl-shell">
      <section className="nl-block air">
        <h2 className="nl-prin-eyebrow">{TF_COPY.headings.press}</h2>
        <div className="nl-2col nl-prose">
          <div className="c"><TFParas items={[6]} /></div>
          <div className="c"><TFParas items={[7]} /></div>
        </div>
      </section>
    </div>
  );
}

function TFTailor() {
  return (
    <section className="nl-dark">
      <div className="inner">
        <h2 className="eyebrow">{TF_COPY.headings.tailor}</h2>
        <div className="nl-2col">
          <div className="c"><p>{tfpara(8)}</p></div>
          <div className="c"><p>{tfpara(9)}</p></div>
        </div>
      </div>
    </section>
  );
}

function TFKit() {
  const k = TF_COPY.kit;
  return (
    <div className="nl-shell">
      <section className="nl-affil">
        <div className="ak">{k.kicker}</div>
        <p className="ab">
          {k.lead}<a href={k.href} rel="sponsored nofollow">{k.linkLabel}</a>{k.tail}
        </p>
        <p className="ad">{k.disclosure}</p>
      </section>
    </div>
  );
}

function TFClose() {
  return (
    <div className="nl-shell">
      <section className="nl-block">
        <div className="nl-2col nl-prose">
          <div className="c"><TFParas items={[10]} /></div>
          <div className="c"><TFParas items={[11]} /></div>
        </div>
      </section>
    </div>
  );
}

function TFCloser() {
  return (
    <section className="nl-closer">
      <div className="img" style={{ backgroundImage: `url(${TF_IMG.closer})`, backgroundPosition: "center 42%" }} />
      <div className="veil"><div className="inner"><p className="final">{TF_COPY.closer}</p></div></div>
    </section>
  );
}

function TFSign() {
  const s = TF_COPY.sign;
  return (
    <div className="nl-shell">
      <div className="nl-sign">
        <span className="avatar" style={{ backgroundImage: `url(${s.avatar})` }} />
        <span className="txt"><span className="n">{s.name}</span><br /><span className="r">{s.role}</span></span>
      </div>
    </div>
  );
}

function TFRelated() {
  return (
    <div className="nl-shell">
      <section className="nl-related">
        <div className="ey">{TF_COPY.related.eyebrow}</div>
        {/* the reading path: large typographic rows, never a card grid */}
        <div className="nl-path">
          {TF_COPY.related.cards.map((c) => (
            <a key={c.href} className="nl-card" href={c.href}>
              <div className="ci" style={{ backgroundImage: `url(${c.img})` }} />
              <div className="tw">
                <div className="ck">{c.kicker}</div>
                <div className="ct">{c.title}</div>
                <div className="cd">{c.desc}</div>
              </div>
              <span className="go" aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}
