/* global React */
/* =========================================================================
   Bra Fitting at Home: Measure Like a Fitter — Nelly
   Reuses the .fd magazine layout (jt-fathers-day.css) with the .fd-nelly
   accent. Shape is INSTRUCTIONAL: two measurement panels carrying their own
   method, a dark sister-sizing chapter, a lettered five-point check, and the
   only full-bleed closer band in her current run. No pull quote, no FAQ.

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

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

const BFH_COPY = {
  kicker: "Fit · Foundations",
  titleTop: "I Wore the Wrong Band Size for Six Years.",
  titleBot: "The cup was never the problem.",
  subtitle: "Two measurements, sister sizing, and the five-point check a fitter runs in about thirty seconds.",

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

  hero: {
    caption: "A soft tape and a mirror. That is the entire equipment list.",
    credit: "The Fashion Edition · Foundations",
  },

  deck: "Nobody had ever measured me. I had simply been told a size once, in a shop, at seventeen.",

  paras: [
    /* 0 */ "And then I bought that size for years, in every brand, adjusting the straps tighter and tighter as the day went on and concluding that this was what wearing a bra was.",
    /* 1 */ "What was actually happening is that the band was too loose, so it rode up my back, so the straps had to take the weight instead, so they dug in. Every symptom I had was downstream of one number, and it was not the letter.",
    /* 2 */ "The band does most of the work. The straps stabilise. If the straps are carrying, the band has already failed, and no amount of tightening them fixes what is happening behind you.",
    /* 3 */ "So here is what a fitter actually does, which is less mystical than it looks: two measurements, one subtraction, and then a check that has nothing to do with numbers at all.",

    /* 4 */ "That difference in inches is your starting cup: one inch is roughly an A, two a B, three a C, and so on up. Starting is doing a lot of work in that sentence. Cup volume is not standardised between brands, and the same nominal size can differ noticeably between two labels on the same rail.",
    /* 5 */ "So treat the result as a hypothesis that is almost certainly closer than what you are currently wearing, and then test it against the five points below. The check outranks the arithmetic every time.",

    /* 6 */ "I did eventually go to a proper fitter, and she moved me two band sizes and two cup letters from where I had been, which sounds dramatic and was really just the same volume expressed correctly.",
    /* 7 */ "A bra that fits is not a revelation. It is simply not something you think about at four in the afternoon.",
  ],

  headings: {
    two: "The two measurements",
    what: "What the numbers give you, and what they don't",
    sister: "Sister sizing, which is the part nobody explains",
    check: "The five-point check",
  },

  two: [
    {
      tag: "Measurement one",
      k: "Underbust",
      m: "Snug, level, on the exhale.",
      v: "Run the tape directly under the bust, pull it firm — firmer than feels polite — and keep it level all the way round. Check the back in a mirror, because a tape that has drifted upward at the back is the single most common reason a home measurement comes out wrong. Breathe out and read it.",
    },
    {
      tag: "Measurement two",
      k: "Bust",
      m: "Loose, standing, over nothing padded.",
      v: "Across the fullest part, standing upright, with the tape resting rather than pulling. Wear an unpadded bra or none at all; a moulded cup adds volume that is not yours and will send you a cup size up. Subtract the first number from this one.",
    },
  ],

  sister: {
    a: "If the band is right and the cup is not, or the cup is right and the band is not, you do not need a different size in the ordinary sense. You need the same volume expressed differently, which is what sister sizing is.",
    b: "Go down a band size and go up a cup letter to keep roughly the same cup volume. Go up a band and down a letter for the same reason. A 34C, a 32D and a 36B are approximately the same cup on three different bands.",
    c: "This is why the letter alone means nothing. A D cup on a 30 band and a D cup on a 40 band are not remotely the same garment, and the number of conversations that go wrong on this point is remarkable.",
    punch: "The letter is a ratio, not a volume.",
  },

  check: [
    { l: "A", lead: "The band is level, front to back.", body: "It should sit at the same height all the way round. If it rides up behind you, it is too big, whatever the tape said." },
    { l: "B", lead: "Fasten it on the loosest hook.", body: "Elastic relaxes with wear. A bra that only fits on the tightest hook when new has a few months in it and then nothing." },
    { l: "C", lead: "Two fingers under the band. No more.", body: "Flat, at the back. If your whole hand slides under, go down a band size and up a cup letter." },
    { l: "D", lead: "The centre panel lies flat on the sternum.", body: "If it stands away from the body, the cup is too small — the volume is pushing the wire outward. This holds whether the bra is wired or not." },
    { l: "E", lead: "Loosen the straps and see if it still holds.", body: "It should, near enough. Straps are for stability and shape. If everything drops the moment you loosen them, the band is not doing its job." },
  ],

  care: {
    kicker: "What you need",
    body: "A soft cloth tape, and a mirror you can see your own back in. That is genuinely it — a builder's tape will not sit flat against a curve and a piece of string measured against a ruler will be a half inch out in the direction you were hoping for. If you are ordering to test a size at home, order two and send one back rather than talking yourself into the one that arrived.",
    linkLabel: "Soft measuring tapes",
    href: "/go/nelly-bra-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.",
  },

  closer: "Two measurements. One of them is the one that matters.",

  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: "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: BFH_IMG.shapewear },
      { kicker: "Care", title: "The Fabric Cheat Sheet", desc: "What survives your dryer — including the answer for bras.", href: "/en/contributors/nelly/the-fabric-cheat-sheet/", img: BFH_IMG.fabric },
      { kicker: "The Handbook", title: "Women · Build", desc: "Basics, outerwear, footwear, accessories — the wardrobe, assembled.", href: "/en/women/build/", img: BFH_IMG.women },
    ],
  },
};

const bfhpara = (i) => BFH_COPY.paras[i];
function BFHParas({ items }) { return items.map((i) => <p key={i}>{bfhpara(i)}</p>); }

function BFHTopper() {
  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={BFH_COPY.byline.href}>Nelly</a><span className="sep">/</span>
          <span className="here">Bra Fitting at Home</span>
        </div>
        <div className="fd-stamp">Fit<span className="dot" />Foundations</div>
      </div>
    </div>
  );
}

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

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

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

/* ------------------------------- two measurement panels, method included */
function BFHTwo() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{BFH_COPY.headings.two}</h2>
        <div className="bf-two">
          {BFH_COPY.two.map((t) => (
            <article className="bf-panel" key={t.k}>
              <div className="tag">{t.tag}</div>
              <h3 className="k">{t.k}</h3>
              <div className="m">{t.m}</div>
              <p className="v">{t.v}</p>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}

function BFHWhat() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{BFH_COPY.headings.what}</h2>
        <div className="fd-2col fd-prose">
          <div className="c"><BFHParas items={[4]} /></div>
          <div className="c"><BFHParas items={[5]} /></div>
        </div>
      </section>
    </div>
  );
}

function BFHSister() {
  const s = BFH_COPY.sister;
  return (
    <section className="fd-dark">
      <div className="inner">
        <h2 className="eyebrow">{BFH_COPY.headings.sister}</h2>
        <div className="fd-2col">
          <div className="c"><p>{s.a}</p><p>{s.b}</p></div>
          <div className="c"><p>{s.c}</p></div>
        </div>
        <p className="punch">{s.punch}</p>
      </div>
    </section>
  );
}

function BFHCheck() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{BFH_COPY.headings.check}</h2>
        <ol className="bf-check">
          {BFH_COPY.check.map((c) => (
            <li key={c.l}>
              <span className="l">{c.l}</span>
              <span className="b"><strong>{c.lead}</strong> {c.body}</span>
            </li>
          ))}
        </ol>
      </section>
    </div>
  );
}

function BFHShop() {
  const c = BFH_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 BFHClose() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <div className="fd-2col fd-prose">
          <div className="c"><BFHParas items={[6]} /></div>
          <div className="c"><BFHParas items={[7]} /></div>
        </div>
      </section>
    </div>
  );
}

function BFHCloser() {
  return (
    <section className="fd-closer">
      <div className="img" style={{ backgroundImage: `url(${BFH_IMG.hero})`, backgroundPosition: "center 55%" }} />
      <div className="veil"><div className="inner"><p className="final">{BFH_COPY.closer}</p></div></div>
    </section>
  );
}

function BFHSign() {
  const s = BFH_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 BFHRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{BFH_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {BFH_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>
  );
}