/* global React */
/* =========================================================================
   Jeans by Body Type: A Fitting-Room Field Guide — Nelly
   Reuses the .fd magazine layout (jt-fathers-day.css) with the .fd-nelly
   accent. Shape is a FIELD GUIDE: an image-and-text plate, three measured
   cases in a grid, and the fitting-room sequence set inside the dark band
   rather than as a light numbered plate.

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

const JBF_IMG = {
  hero: "/assets/nelly-jeans-hero.jpg",
  rise: "/assets/nelly-jeans-rise.jpg",
  fabric: "/assets/nelly-fabric-hero.jpg",
  shapewear: "/assets/nelly-shapewear-hero.jpg",
  women: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80",
};

const JBF_COPY = {
  kicker: "Fit · Denim",
  titleTop: "There Are No Body Types.",
  titleBot: "There are three measurements.",
  subtitle: "A fitting-room field guide to denim — what the shape charts are actually measuring, and the sequence that settles it in four minutes.",

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

  hero: {
    caption: "Three washes, one cut. The wash is the easy decision.",
    credit: "The Fashion Edition · Denim",
  },

  deck: "I have never met a pear.",

  paras: [
    /* 0 */ "I have met a great many people whose hip measurement is nine inches larger than their waist, which is a fact, and which the industry insists on calling a fruit.",
    /* 1 */ "The shape charts are not useless, exactly. They are a compression of real information into a cartoon. Somebody measured a lot of bodies, found clusters, drew a diagram, and the diagram is now the thing being sold to you instead of the measurements underneath it.",
    /* 2 */ "The problem is that the cartoon does not survive contact with a fitting room. You cannot ask a pair of jeans whether they are cut for a pear. You can ask whether the back waistband gapes when the hip fits, which is the same question with an answer attached.",
    /* 3 */ "So: three numbers, one plate, and a sequence to run in the cubicle. It takes about four minutes and it is more useful than any chart I have been handed in twenty years of shopping.",

    /* 4 */ "Rise is the distance from the crotch seam to the top of the waistband, and it is a garment measurement, not a body one. This is why high-rise means one thing on the model and another on you: the same eleven inches sits at the natural waist on a long torso and somewhere under the ribs on a short one.",
    /* 5 */ "Measure your own. From the crotch to where you actually want the band to sit, sitting down rather than standing, because sitting is where a short rise announces itself. Then compare that number to the product description instead of the word.",

    /* 6 */ "A tailor can take in a waistband at the centre back, shorten a hem, and taper a leg below the knee. Those three alterations cover most of what is wrong with most jeans, and together they usually cost less than the difference between a mid-price pair and a good one.",
    /* 7 */ "A tailor cannot change the rise, cannot let out a thigh that has no seam allowance, and cannot add fabric that was never cut. If the jeans are wrong above the crotch seam, they are wrong. Put them back.",

    /* 8 */ "I own three pairs. One rigid, one with a little stretch, one that is frankly too big and is the pair I reach for on a Sunday.",
    /* 9 */ "None of them are cut for a fruit.",
  ],

  headings: {
    chart: "What the shape charts are actually measuring",
    rise: "Rise is a garment measurement",
    three: "The three numbers",
    seq: "The fitting-room sequence",
    tailor: "What a tailor can and cannot fix",
    faq: "Questions",
  },

  chart: {
    a: "Nearly every shape chart is a way of describing one number without saying it: the difference between your waist and your hip. A small difference and the garment needs a straighter line through the body. A large one and it needs curve, or it will fit the hip and stand away from the back waist.",
    b: "That is the gape everyone recognises and almost nobody names. It is not a flaw in you and it is not a flaw in the jeans. It is a straight waistband on a curved back, and the fix is a contoured band, a higher rise, or twenty minutes of a tailor's time.",
  },

  risePlate: {
    cap: "Same waist. Several inches of difference between the crotch seam and the band.",
  },

  three: [
    {
      n: "01",
      k: "Hip minus waist",
      v: "Measure both at the fullest and narrowest points and subtract. Under about six inches and straight-cut waistbands will generally sit flat on you. Above that and you want a contoured band or a higher rise, because a straight band has to bridge a curve it was not cut for.",
    },
    {
      n: "02",
      k: "Your rise, sitting",
      v: "Crotch to where you want the band, measured seated. Compare it against the front rise figure in the product description, not the words low, mid or high — those describe the model's torso, not yours.",
    },
    {
      n: "03",
      k: "Thigh at the fullest point",
      v: "The number that actually decides the pair. Denim fails at the thigh and complains at the waist: if the thigh is tight, the front rise pulls, the pocket bags gape, and whiskers form within a week whether you like them or not.",
    },
  ],

  pull: "Jeans do not fail at the waist. They fail at the thigh and complain at the waist.",
  pullBy: "— Nelly",

  seq: [
    { lead: "Sit down first.", body: "Before the mirror, before the turn. Half of what is wrong with a pair of jeans is invisible standing up and obvious the moment you fold at the hip." },
    { lead: "Check the back waistband with a hand, not a mirror.", body: "Two fingers flat, palm against your back. If your whole hand fits in the gap, the band is straight and your back is not, and no amount of standing differently will change it." },
    { lead: "Look at the front rise for pulling lines.", body: "Diagonal creases radiating out from the crotch seam mean the thigh is tight, not the waist. Sizing up will fix the lines and give you a waistband you now have to take in — which is the correct order of operations." },
    { lead: "Squat once, all the way down.", body: "If the back slides down and the waistband leaves you, the rise is short for your torso. That never improves with wear. It only becomes something you stop noticing while it keeps happening." },
    { lead: "Try the sizes either side, whatever the tag says.", body: "Denim sizing is not a standard and never has been. The number on the tag is a brand's opinion of a number, and treating it as information costs people the pair that would have fitted." },
    { lead: "Walk to the end of the shop and back.", body: "Cotton denim relaxes as it warms. A pair that is perfect standing still in a cubicle is usually half a size looser by the time you are home, and stretch denim more so." },
  ],

  care: {
    kicker: "Shopping it",
    body: "The filters that matter are not the ones on the site. Look for a front rise measurement in the description, an elastane percentage — anything above about two per cent will relax noticeably by the end of a day — and a returns policy generous enough that you can order the size either side and send one back. Buying denim online without ordering two sizes is optimism, not thrift.",
    linkLabel: "Women's jeans",
    href: "/go/nelly-jeans-fit",
    disclosure: "Some links here are affiliate links — if you buy through one, HowTo: Fashion Edition earns a commission at no extra cost to you.",
  },

  faq: [
    { q: "What does rise actually mean on a pair of jeans?", a: "It is the distance from the crotch seam to the top of the waistband, measured on the garment. Low, mid and high describe where that lands on a fit model's torso, so the number in the description is the only part that transfers to you." },
    { q: "Why does my waistband gape at the back when the hip fits?", a: "A straight waistband is bridging a curve. The larger the difference between your waist and hip, the more it stands away. A contoured waistband, a higher rise, or taking in the centre back seam all solve it; buying a smaller size does not, it just moves the problem to the thigh." },
    { q: "Should I size up or down in stretch denim?", a: "Buy the size that fits the thigh standing still, and expect the waist to relax over a day. Anything above roughly two per cent elastane will loosen with body heat, which is why the pair that felt right in the shop feels roomy by evening." },
    { q: "Do rigid jeans stretch out?", a: "Cotton denim gives a little at the knee and seat with wear and returns most of the way after a wash. It does not gain a size. If a rigid pair is tight in the thigh in the fitting room, it will be tight in the thigh for its whole life." },
  ],

  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: JBF_IMG.fabric },
      { kicker: "Fit", title: "Shapewear That Doesn't Roll", desc: "Why it rolls, what the silicone is doing, and how to size it.", href: "/en/contributors/nelly/shapewear-that-doesnt-roll/", img: JBF_IMG.shapewear },
      { kicker: "The Handbook", title: "Women · Fit", desc: "Shirts, trousers, denim, outerwear, alterations — fit, assembled.", href: "/en/women/fit/", img: JBF_IMG.women },
    ],
  },
};

const jbfpara = (i) => JBF_COPY.paras[i];
function JBFParas({ items }) { return items.map((i) => <p key={i}>{jbfpara(i)}</p>); }

function JBFTopper() {
  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={JBF_COPY.byline.href}>Nelly</a><span className="sep">/</span>
          <span className="here">Jeans by Body Type</span>
        </div>
        <div className="fd-stamp">Fit<span className="dot" />Denim</div>
      </div>
    </div>
  );
}

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

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

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

function JBFChart() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{JBF_COPY.headings.chart}</h2>
        <div className="fd-2col fd-prose">
          <div className="c"><p>{JBF_COPY.chart.a}</p></div>
          <div className="c"><p>{JBF_COPY.chart.b}</p></div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------------------------------- image + text plate */
function JBFRise() {
  const r = JBF_COPY.risePlate;
  return (
    <div className="fd-shell">
      <section className="fd-row fd-2col">
        <div className="im">
          <div className="ph" style={{ backgroundImage: `url(${JBF_IMG.rise})` }} />
          <div className="rcap">{r.cap}</div>
        </div>
        <div className="tx fd-prose">
          <h2 className="fd-prin-eyebrow">{JBF_COPY.headings.rise}</h2>
          <JBFParas items={[4, 5]} />
        </div>
      </section>
    </div>
  );
}

/* ------------------------------------------------- the three numbers */
function JBFThree() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{JBF_COPY.headings.three}</h2>
        <div className="jb-grid">
          {JBF_COPY.three.map((t) => (
            <article className="jb-card" key={t.n}>
              <div className="n">{t.n}</div>
              <h3 className="k">{t.k}</h3>
              <p className="v">{t.v}</p>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}

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

/* ------------------------------- the sequence, set inside the dark band */
function JBFSeq() {
  return (
    <section className="fd-dark">
      <div className="inner">
        <h2 className="eyebrow">{JBF_COPY.headings.seq}</h2>
        <ol className="jb-seq">
          {JBF_COPY.seq.map((s, i) => (
            <li key={i}>
              <span className="n">{String(i + 1).padStart(2, "0")}</span>
              <span className="b"><strong>{s.lead}</strong> {s.body}</span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function JBFShop() {
  const c = JBF_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 JBFTailor() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{JBF_COPY.headings.tailor}</h2>
        <div className="fd-2col fd-prose">
          <div className="c"><JBFParas items={[6]} /></div>
          <div className="c"><JBFParas items={[7]} /></div>
        </div>
      </section>
    </div>
  );
}

function JBFFaq() {
  return (
    <div className="fd-shell">
      <section className="fd-principles">
        <h2 className="fd-prin-eyebrow">{JBF_COPY.headings.faq}</h2>
        <ol className="fd-prin-list">
          {JBF_COPY.faq.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.q}</h3><p className="pb">{f.a}</p></div>
            </li>
          ))}
        </ol>
      </section>
    </div>
  );
}

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

function JBFSign() {
  const s = JBF_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 JBFRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{JBF_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {JBF_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>
  );
}