/* global React */
/* =========================================================================
   Shapewear That Doesn't Roll: A Fit Guide — Nelly
   Reuses the .fd magazine layout (jt-fathers-day.css) with the .fd-nelly
   accent, as "Nelly - The Shoe Rotation Rule.html" does. Shape is different
   on purpose: diagnostic — lede, dark mechanism chapter, detail plate,
   four faults, buying rules, checklist. No FAQ block, no closer band.

   TRANSLATION NOTE: every visible string lives in NSW_COPY. Translate values
   only; markup/classes/images/hrefs stay. `paras`, `faults` and `checks` are
   Nelly's copy verbatim — translate, don't rewrite.
   ========================================================================= */

const NSW_IMG = {
  hero: "/assets/nelly-shapewear-hero.jpg",
  grip: "/assets/nelly-shapewear-grip.jpg",
  bra: "/assets/nelly-bra-hero.jpg",
  shoes: "/assets/nelly-shoe-rotation-hero.jpg",
  women: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80",
};

const NSW_COPY = {
  kicker: "Fit · Foundations",
  titleTop: "Shapewear Rolls Because It Is Too Small.",
  titleBot: "That is the whole answer.",
  subtitle: "A fit guide for the garment nobody admits to owning, starting with the size you have been buying on purpose.",

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

  hero: {
    caption: "Flat, smoothed, unremarkable. The whole ambition of the category.",
    credit: "The Fashion Edition · Foundations",
  },

  deck: "I bought a size down for years. On purpose.",

  paras: [
    /* 0 */ "The logic seemed sound. The garment is meant to compress, compression is the product, so a smaller one compresses harder and works better. The four minutes it took to get into felt like proof I had chosen correctly.",
    /* 1 */ "What it actually did was roll. Every time. The hem at the thigh would creep up an inch, fold over on itself into a tight cord, and by mid-afternoon I was wearing something drawing a hard line across me instead of erasing one.",
    /* 2 */ "A fitter explained it to me in about eleven seconds, and she was not especially gentle about it.",
    /* 3 */ "Stretch fabric holds a shape by staying under even tension across a whole panel. Push it past what it was engineered for and the tension stops being even. The middle of a panel is anchored — it has fabric on both sides pulling back. The edge has fabric on one side only. So the edge is where the garment gives, and for a hem, giving means folding over.",

    /* 4 */ "Size to the largest circumference the garment has to cross, not to the number you think of as your size. For a bodysuit that is usually the hip. Charts tend to be organised around the waist because the waist is the number people prefer to look at, and a garment that clears your waist beautifully and has to fight its way over your hip will fail at the hip.",
    /* 5 */ "If you are between sizes, take the larger one. I know. Take it anyway.",

    /* 6 */ "Two hem constructions are common and they fail differently. A bonded or laser-cut edge is flat under clothes and rolls less, because there is no seam allowance to fold. It also costs more and it separates rather than frays, which is unrepairable when it goes.",
    /* 7 */ "A stitched elastic hem is more visible under a thin skirt and lasts longer. Neither one is the correct answer. Pick which failure you would rather have.",

    /* 8 */ "Weight is the other trade. A denser knit holds a line better and is hotter to wear. A light one disappears under a dress and does less. There is no version of this that is both, and every brand implying otherwise is describing a fabric that does not exist.",

    /* 9 */ "I own two now. Both a size up from where I started, both duller than the ones I used to buy, both of which stay exactly where I put them.",
    /* 10 */ "Nobody has ever complimented me on shapewear. That is roughly the point of it.",
  ],

  headings: {
    mech: "Why the silicone stops working",
    faults: "Four reasons it rolls, in the order they are likely",
    buy: "How to buy it, since the size chart will not help",
    checks: "Before you take the tag off",
  },

  mech: {
    a: "Most decent shapewear has a band of silicone on the inside of the hem, printed in dots or laid down as a strip. It is not glue and it is not clever. It is friction, and it works against skin.",
    b: "Which means two ordinary things switch it off. The first is a layer in between. Worn over tights, over a slip, over a tucked camisole, the silicone is gripping fabric that is itself free to slide, and a grip on a moving surface is decoration.",
    c: "The second is oil. Body lotion, body oil, sunscreen, the leave-on half of everything applied in summer. Silicone against a moisturised leg has no more hold than a smooth hem does, and you will feel it start to travel within the hour.",
    punch: "Grip is friction. Friction needs skin.",
  },

  grip: {
    caption: "Silicone dots printed along a bonded hem — the only part of the garment doing the staying-put.",
    credit: "Detail · Compression knit",
  },

  faults: [
    {
      lead: "The size is wrong, and it is wrong downward.",
      body: "This is most of them. A panel under more tension than it was designed for gives at its edge, and the edge is the hem. Going up a size feels like giving up. It is the fix.",
    },
    {
      lead: "There is something between the silicone and you.",
      body: "Tights, a slip, a long camisole tucked down. The band cannot grip a surface that is itself sliding. If you need tights, the shapewear goes on first and the tights go over the top.",
    },
    {
      lead: "The hem is sitting at the fullest part of your thigh.",
      body: "A hem crossing the widest point of anything is under the most tension and has the shortest distance to travel before it folds. Move it. A longer leg that finishes nearer the knee, or a shorter one that finishes high, will both outperform the one that stops exactly where you are widest.",
    },
    {
      lead: "The band is narrow.",
      body: "A wide bonded band spreads the load that a thin elastic hem concentrates into a quarter inch. Narrow edges roll first and roll hardest, whatever the size. When you are choosing between two that fit, choose the one with more hem.",
    },
  ],

  pull: "A roll is not a defect. It is the garment telling you the panel is carrying more than it was built for.",
  pullBy: "— Nelly",

  care: {
    kicker: "The category",
    body: "What I look for now is boring and short: a hem band at least an inch and a half deep, a bonded edge if the piece is going under something thin, and a size chart that gives hip measurements rather than dress sizes. Anything promising two dress sizes of change is selling compression that will roll by lunch.",
    linkLabel: "Shapewear bodysuits and slips",
    href: "/go/nelly-shapewear",
    disclosure: "Some links here are affiliate links — if you buy through one, HowTo: Fashion Edition earns a commission at no extra cost to you.",
  },

  checks: [
    "Can you sit all the way down in it without adjusting anything?",
    "Does the hem land above or below the fullest part of your thigh, rather than on it?",
    "Is there anything at all between the silicone and your skin?",
    "Can you get two fingers under the waist edge?",
    "After ten minutes of ordinary walking, has any edge moved?",
  ],

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

  related: {
    eyebrow: "More from Nelly",
    cards: [
      { kicker: "Fit", title: "Bra Fitting at Home", desc: "Two measurements, sister sizing, and the five-point check a fitter runs.", href: "/en/contributors/nelly/bra-fitting-at-home/", img: NSW_IMG.bra },
      { kicker: "Care", title: "The Shoe Rotation Rule", desc: "Three pairs, twenty-four hours to dry, and why the number is three.", href: "/en/contributors/nelly/the-shoe-rotation-rule/", img: NSW_IMG.shoes },
      { kicker: "The Handbook", title: "Women · Fit", desc: "Shirts, trousers, denim, outerwear, alterations — fit, assembled.", href: "/en/women/fit/", img: NSW_IMG.women },
    ],
  },
};

const nswpara = (i) => NSW_COPY.paras[i];
function NSWParas({ items }) { return items.map((i) => <p key={i}>{nswpara(i)}</p>); }

function NSWTopper() {
  return (
    <div className="fd-shell">
      <div className="fd-topper">
        <div className="fd-crumb">
          <a href="/">How To: Fashion</a><span className="sep">/</span>
          <a href={NSW_COPY.byline.href}>Nelly</a><span className="sep">/</span>
          <span className="here">Shapewear That Doesn't Roll</span>
        </div>
        <div className="fd-stamp">Fit<span className="dot" />Foundations</div>
      </div>
    </div>
  );
}

function NSWHead() {
  const b = NSW_COPY.byline;
  return (
    <div className="fd-shell">
      <header className="fd-head">
        <div className="fd-kicker">{NSW_COPY.kicker}</div>
        <h1 className="fd-h1">{NSW_COPY.titleTop} <span className="it">{NSW_COPY.titleBot}</span></h1>
        <p className="fd-sub">{NSW_COPY.subtitle}</p>
        <div className="fd-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 NSWHero() {
  return (
    <figure className="fd-figure fd-band hero fd-hero-wrap">
      <div className="img" style={{ backgroundImage: `url(${NSW_IMG.hero})` }} />
      <figcaption className="fd-cap">
        <span>{NSW_COPY.hero.caption}</span>
        <span className="accent">{NSW_COPY.hero.credit}</span>
      </figcaption>
    </figure>
  );
}

function NSWDeck() {
  return <div className="fd-shell"><section className="fd-deck"><p>{NSW_COPY.deck}</p></section></div>;
}

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

/* --------------------------------------------------- mechanism (dark) */
function NSWMech() {
  const m = NSW_COPY.mech;
  return (
    <section className="fd-dark">
      <div className="inner">
        <h2 className="eyebrow">{NSW_COPY.headings.mech}</h2>
        <div className="fd-2col">
          <div className="c"><p>{m.a}</p><p>{m.b}</p></div>
          <div className="c"><p>{m.c}</p></div>
        </div>
        <p className="punch">{m.punch}</p>
      </div>
    </section>
  );
}

/* ------------------------------------------------------- detail plate */
function NSWGrip() {
  return (
    <figure className="fd-figure fd-band wide fd-band-sec">
      <div className="img" style={{ backgroundImage: `url(${NSW_IMG.grip})` }} />
      <figcaption className="fd-cap">
        <span>{NSW_COPY.grip.caption}</span>
        <span className="accent">{NSW_COPY.grip.credit}</span>
      </figcaption>
    </figure>
  );
}

/* ------------------------------------------------------------ faults */
function NSWFaults() {
  return (
    <div className="fd-shell">
      <section className="fd-principles">
        <h2 className="fd-prin-eyebrow">{NSW_COPY.headings.faults}</h2>
        <ol className="fd-prin-list">
          {NSW_COPY.faults.map((f, i) => (
            <li className="fd-prin" key={i}>
              <span className="pn">{String(i + 1).padStart(2, "0")}</span>
              <div className="pc"><h3 className="ph">{f.lead}</h3><p className="pb">{f.body}</p></div>
            </li>
          ))}
        </ol>
      </section>
    </div>
  );
}

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

function NSWBuy() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{NSW_COPY.headings.buy}</h2>
        <div className="fd-2col fd-prose">
          <div className="c"><NSWParas items={[4, 5, 8]} /></div>
          <div className="c"><NSWParas items={[6, 7]} /></div>
        </div>
      </section>
    </div>
  );
}

/* --------------------------------------------------------- affiliate */
function NSWShop() {
  const c = NSW_COPY.care;
  return (
    <div className="fd-shell">
      <section className="fd-affil">
        <div className="ak">{c.kicker}</div>
        <p className="ab">{c.body}</p>
        <div><a className="al" href={c.href} rel="sponsored nofollow">{c.linkLabel}</a></div>
        <p className="ad">{c.disclosure}</p>
      </section>
    </div>
  );
}

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

function NSWClose() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <div className="fd-2col fd-prose">
          <div className="c"><NSWParas items={[9]} /></div>
          <div className="c"><NSWParas items={[10]} /></div>
        </div>
      </section>
    </div>
  );
}

function NSWSign() {
  const s = NSW_COPY.sign;
  return (
    <div className="fd-shell">
      <div className="fd-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 NSWRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{NSW_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {NSW_COPY.related.cards.map((c) => (
            <a key={c.href} className="fd-card" href={c.href}>
              <div className="ci" style={{ backgroundImage: `url(${c.img})` }} />
              <div className="ck">{c.kicker}</div>
              <div className="ct">{c.title}</div>
              <div className="cd">{c.desc}</div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}