/* global React */
/* =========================================================================
   Pack Outfits That Don't Wrinkle — Nelly
   Reuses the .nl magazine layout (nelly-article.css) with the .nl-nelly
   accent. Shape is a VERDICT BOARD: two opposed tracks (roll / fold) set
   side by side under one rule, a third band for what should not be packed
   at all, an image-and-text plate for the cube method, and the packing
   order set inside the dark band as a bottom-to-top load stack.

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

const PK_IMG = {
  hero: "/assets/nelly-packing-hero.jpg",
  rolls: "/assets/nelly-packing-rolls.jpg",
  fabric: "/assets/nelly-fabric-hero.jpg",
  capsule: "/assets/nelly-capsule-care-hero.jpg",
  women: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80",
};

const PK_COPY = {
  kicker: "Care · Packing",
  titleTop: "The Suitcase Did Not Crease That Shirt.",
  titleBot: "The way you folded it did.",
  subtitle: "Fold or roll, decided by fibre — what pressure actually does to cloth, the one-outfit-per-cube method, and the twenty minutes on arrival that undo most of the damage.",

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

  hero: {
    caption: "Two hard folds, four soft rolls, and a sheet of tissue between the layers.",
    credit: "The Fashion Edition · Care",
  },

  deck: "I unpacked in Lisbon and everything looked slept in.",

  paras: [
    /* 0 */ "Not damaged. Slept in. The linen shirt had a fan of creases across the front where something heavy had sat on it for four hours, and the trousers had one hard line across the knee that no amount of shaking was going to talk out of them.",
    /* 1 */ "What annoyed me was that I had packed carefully. I had folded everything the way you fold things to put them in a drawer — which is a completely different problem — and then I had closed a lid on top of it.",
    /* 2 */ "A drawer is a low-pressure environment where nothing moves. A suitcase is a compression chamber that gets thrown down a chute. Folding for one and expecting the results of the other is the whole mistake, and I made it for about a decade.",
    /* 3 */ "So this is packing from the garment's side rather than the luggage side. Not which case, not how many compartments — what actually happens to cloth under pressure, and which folds survive it.",

    /* 4 */ "Three things set a crease: pressure, moisture and time. Any one of them alone is survivable. Together, over six hours in a hold, they push a fold into the fibre the way steam pushes a pleat into a skirt — which is more or less what is happening, at a lower temperature and over a longer afternoon.",
    /* 5 */ "That gives you the levers. Time you cannot do much about. Moisture you can: never pack anything even faintly damp, and do not leave the open case in the bathroom the night before. Pressure is the one you genuinely control, and you control it by deciding where the folds go and how many of them there are. Two soft curves arrive better than one hard edge, every time. That is the entire argument for rolling — and also the reason rolling is wrong for about half of what you own.",

    /* 6 */ "The thing that changed my unpacking was not a better fold. It was giving up on packing by category. Shirts with shirts, knits with knits, and then every morning you dismantle three tidy stacks to get dressed and repack them badly for the rest of the week.",
    /* 7 */ "Now each cube holds one complete outfit — the top, the bottom, the layer, and the small flat things that belong with it. Four days, four cubes. You lift one out, you get dressed, and the other three stay compressed and undisturbed. It costs a little space, because a cube holding one outfit is less efficient than a cube holding five identical t-shirts. It is worth it by the second morning.",

    /* 8 */ "Unpack immediately. That is most of it. A garment that comes out of the case within an hour of arriving recovers largely on its own; one that spends the night in there has had six more hours of pressure and time to set whatever it is holding.",
    /* 9 */ "Then hang everything on real hangers, in the order you will wear it, and give the two worst offenders ten minutes in a bathroom with the shower running hot and the door shut. Steam relaxes the fibre and the weight of the garment does the rest. Wool and viscose come back almost completely. Linen improves and does not resolve, which is linen being linen.",

    /* 10 */ "The Lisbon shirt was fine in the end. Two hours on a hanger by an open window and it looked like a shirt again.",
    /* 11 */ "Most of what packing anxiety is really about is not wanting to arrive somewhere and be handed evidence that you rushed. Put the folds where the fibre will forgive them and nothing you unpack reads as rushed at all.",
  ],

  headings: {
    physics: "A crease is a fold the fibre agreed to keep",
    board: "Roll it, fold it, or leave it at home",
    cube: "One outfit per cube, and nothing loose",
    load: "The load order, bottom to top",
    arrival: "The twenty minutes on the other end",
    faq: "Questions",
  },

  boardNote: {
    lead: "The decision is made by fibre, not by garment type, which means the label is the first place to look rather than the last.",
    linkLabel: "the fabric cheat sheet",
    linkHref: "/en/contributors/nelly/the-fabric-cheat-sheet/",
    tail: " covers what each fibre does when you put it under stress; this is the same list, sorted for a suitcase.",
  },

  tracks: [
    {
      k: "Roll it",
      intro: "Fibres that recover — anything with give, memory or a knit structure.",
      items: [
        { n: "Jersey and cotton knits", w: "T-shirts, sweatshirts, anything that stretches. Rolled tight, they arrive with a faint spiral that falls out on a hanger in ten minutes." },
        { n: "Merino and fine wool", w: "Wool has memory, which is why it forgives a roll and why it wants air on arrival rather than an iron." },
        { n: "Denim and heavy twill", w: "Too dense to take a meaningful crease. Roll it because it is the heaviest cloth in the case and rolls drop neatly into the gaps around shoes." },
        { n: "Technical and synthetic", w: "Nylon, polyester blends, most activewear. They do not hold a crease and they do not need protecting from anything." },
        { n: "Silk and fine viscose", w: "Counter-intuitive, but the enemy here is the edge, not the curve. Rolled loosely around a sheet of tissue, silk arrives clean. Folded, it keeps the line for days." },
      ],
    },
    {
      k: "Fold it",
      intro: "Cloth with structure already built into it — protect the shape, do not reshape it.",
      items: [
        { n: "Tailoring", w: "Turn one sleeve inside out at the shoulder and slide the other shoulder into it, so the jacket folds along seams that already exist. Then once at the waist. A canvassed chest bends in one direction only." },
        { n: "Cotton poplin shirts", w: "A shirt is engineered flat, so keep it flat, over tissue, near the top of the case. The collar is the part that shows, and the part a roll destroys first." },
        { n: "Pleated skirts and trousers", w: "Along the pleat, always. A pleat is a fold the fabric has already agreed to. A roll fights it, and the roll usually wins." },
        { n: "Linen", w: "Linen creases whatever you do. Fold it broadly — in half, then half again — and accept two soft lines instead of a dozen small sharp ones." },
        { n: "Beading and hardware", w: "Fold face-in around a soft core. Rolled, the hardware drags across whatever is underneath it for the length of the journey." },
      ],
    },
  ],

  neither: {
    c: "Neither",
    v: "A heavy wool coat, a properly canvassed suit and a long delicate dress do not belong in a suitcase at all. Wear the coat, hang the suit in a garment bag, and if the dress will not survive the journey then it is the wrong dress for the trip. That is a real answer rather than a dodge, and it is cheaper than the alterations.",
  },

  pull: "Packing is not a storage problem. It is a decision about where you are willing to put the folds.",
  pullBy: "— Nelly",

  cubePlate: {
    cap: "One outfit, rolled, in a cube of its own. The shirt stays flat and separate.",
  },

  load: [
    { n: "01", k: "The floor", v: "Shoes in bags, along the hinge edge, soles facing out. They are the heaviest objects in the case and the least damageable, so they go where the pressure is worst." },
    { n: "02", k: "Denim and knitwear", v: "Rolled, laid side by side like logs, filling the gaps the shoes leave. This layer's real job is to build a flat, even bed. A case with a lumpy middle creases the top layer against its own bumps." },
    { n: "03", k: "The cubes", v: "One outfit each, laid flat, zips alternating end to end so the layer stays level rather than ramping up on one side." },
    { n: "04", k: "Shirts and tailoring", v: "Flat, near the top, with a sheet of tissue paper inside every fold. Tissue is the cheapest thing in this article and the most effective — it stops fabric gripping fabric, which is what turns a soft fold into a set one." },
    { n: "05", k: "The lid", v: "Silk, scarves, anything flat and light, in the mesh pocket. Nothing structured, nothing heavy, and nothing you will need in the first ten minutes." },
  ],

  care: {
    kicker: "Packing it",
    body: "If you are going to buy anything for this, buy cubes and buy fewer, larger ones than you think — one per outfit, not one per category. The part nobody mentions is that compression is a trade: the second zip buys you volume and pays for it in creasing, which is precisely the pressure this whole piece is trying to control. I use the cubes constantly and the compression zip rarely, and only on the layer holding denim and knitwear, which does not care. A set of five will also always contain two you never use.",
    linkLabel: "Packing cubes",
    href: "/go/nelly-packing-cubes",
    disclosure: "Some links here are affiliate links — if you buy through one, HowTo: Fashion Edition earns a commission at no extra cost to you.",
  },

  arrivalNote: {
    lead: "None of this is separate from the rest of garment care. It is the same bargain as ",
    linkLabel: "keeping a small wardrobe alive",
    linkHref: "/en/contributors/nelly/capsule-wardrobe-care/",
    tail: " at home: fabric responds to air and time far more than it responds to effort.",
  },

  faq: [
    { q: "Is rolling actually better than folding?", a: "For anything knitted, stretchy or synthetic, yes — a roll spreads the bend around a curve instead of concentrating it on a line. For anything woven flat or built with structure, no. The useful question is never roll or fold in the abstract; it is where the pressure is going to land on this particular fabric." },
    { q: "Does tissue paper really make a difference?", a: "More than anything else you can put in a case. Fabric gripping fabric is what turns a soft fold into a set crease, and a sheet of tissue inside the fold keeps the two faces from binding. Any thin paper does it. The tissue that comes back from the dry cleaner is free and already the right size." },
    { q: "What do I do about linen?", a: "Accept it. Linen creases because the fibre is stiff and does not spring back, and no packing method changes that. Fold it in broad halves so you get two soft lines rather than twelve sharp ones, pack it near the top, and hang it in steam on arrival. It will look lived-in rather than pressed, which is what linen looks like by lunchtime anyway." },
    { q: "Do compression cubes wrinkle clothes?", a: "The cube itself does not — that is just organisation. The compression zip does, because compressing a cube is the same pressure that sets a crease, applied deliberately. Use it on denim and knitwear, which shrug it off, and leave it alone on anything woven." },
    { q: "How should a blazer travel?", a: "Sleeve inside out through the shoulder, the other shoulder nested into it, one fold at the waist, over tissue, flat and near the top of the case. Never rolled. The chest of a jacket is built with canvas and shape, and a roll bends it in a direction it was not made to bend." },
  ],

  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: PK_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: PK_IMG.capsule },
      { kicker: "The Handbook", title: "Women · Travel", desc: "What to wear on the way, and what survives the case at the other end.", href: "/en/women/wear/travel/", img: PK_IMG.women },
    ],
  },
};

const pkpara = (i) => PK_COPY.paras[i];
function PKParas({ items }) { return items.map((i) => <p key={i}>{pkpara(i)}</p>); }

function PKTopper() {
  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={PK_COPY.byline.href}>Nelly</a><span className="sep">/</span>
          <span className="here">Pack Outfits That Don't Wrinkle</span>
        </div>
        <div className="nl-stamp">Care<span className="dot" />Packing</div>
      </div>
    </div>
  );
}

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

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

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

function PKPhysics() {
  return (
    <div className="nl-shell">
      <section className="nl-block">
        <h2 className="nl-prin-eyebrow">{PK_COPY.headings.physics}</h2>
        <div className="nl-2col nl-prose">
          <div className="c"><PKParas items={[4]} /></div>
          <div className="c"><PKParas items={[5]} /></div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------------------------- the verdict board, two tracks */
function PKBoard() {
  const n = PK_COPY.boardNote;
  return (
    <div className="nl-shell">
      <section className="nl-block">
        <h2 className="nl-prin-eyebrow">{PK_COPY.headings.board}</h2>
        <p className="pk-note">
          {n.lead} <a className="pk-xlink" href={n.linkHref}>{n.linkLabel}</a>{n.tail}
        </p>
        <div className="pk-board">
          {PK_COPY.tracks.map((t) => (
            <div className="pk-track" key={t.k}>
              <div className="vh">{t.k}</div>
              <p className="vi">{t.intro}</p>
              {t.items.map((it) => (
                <article className="pk-entry" key={it.n}>
                  <h3 className="n">{it.n}</h3>
                  <p className="w">{it.w}</p>
                </article>
              ))}
            </div>
          ))}
        </div>
        <div className="pk-neither">
          <div className="c">{PK_COPY.neither.c}</div>
          <p className="v">{PK_COPY.neither.v}</p>
        </div>
      </section>
    </div>
  );
}

/* --------------------------------------------------------- image spread
   Two crops of the same case, read as one plate: the packed lid, then the
   rolls close enough to count the layers. Contract: the page needs image
   spreads, and a re-crop is a legitimate second picture. No words here by
   design — the plate carries the mood, not a caption. */
function PKPlate() {
  return (
    <section className="nl-plate duo" aria-hidden="true">
      <div className="img nl-crop-b" style={{ backgroundImage: `url(${PK_IMG.hero})` }} />
      <div className="img b nl-crop-in" style={{ backgroundImage: `url(${PK_IMG.rolls})` }} />
    </section>
  );
}

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

/* ------------------------------------------------- split spread: the image
   runs off the page edge, the prose is pulled back onto the shell grid */
function PKCube() {
  const k = PK_COPY.cubePlate;
  return (
    <section className="nl-spread rev">
      <div className="im">
        <div className="ph" style={{ backgroundImage: `url(${PK_IMG.rolls})` }} />
        <div className="rcap">{k.cap}</div>
      </div>
      <div className="tx nl-prose">
        <h2 className="nl-prin-eyebrow">{PK_COPY.headings.cube}</h2>
        <PKParas items={[6, 7]} />
      </div>
    </section>
  );
}

/* ------------------------ the load order, stacked inside the dark band */
function PKLoad() {
  return (
    <section className="nl-dark">
      <div className="inner">
        <h2 className="eyebrow">{PK_COPY.headings.load}</h2>
        <div className="pk-load">
          {PK_COPY.load.map((l) => (
            <article className="pk-layer" key={l.n}>
              <div className="n">{l.n}</div>
              <div className="d">
                <h3 className="k">{l.k}</h3>
                <p className="v">{l.v}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function PKArrival() {
  const n = PK_COPY.arrivalNote;
  return (
    <div className="nl-shell">
      <section className="nl-block">
        <h2 className="nl-prin-eyebrow">{PK_COPY.headings.arrival}</h2>
        <div className="nl-2col nl-prose">
          <div className="c"><PKParas items={[8]} /></div>
          <div className="c">
            <PKParas items={[9]} />
            <p>{n.lead}<a className="pk-xlink" href={n.linkHref}>{n.linkLabel}</a>{n.tail}</p>
          </div>
        </div>
      </section>
    </div>
  );
}

function PKShop() {
  const c = PK_COPY.care;
  return (
    <div className="nl-shell">
      <section className="nl-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 PKFaq() {
  return (
    <div className="nl-shell">
      <section className="nl-principles nl-atlas">
        <h2 className="nl-prin-eyebrow">{PK_COPY.headings.faq}</h2>
        <ol className="nl-prin-list">
          {PK_COPY.faq.map((f, i) => (
            <li className="nl-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 PKClose() {
  return (
    <div className="nl-shell">
      <section className="nl-block">
        <div className="nl-2col nl-prose">
          <div className="c"><PKParas items={[10]} /></div>
          <div className="c"><PKParas items={[11]} /></div>
        </div>
      </section>
    </div>
  );
}

function PKSign() {
  const s = PK_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 PKRelated() {
  return (
    <div className="nl-shell">
      <section className="nl-related">
        <div className="ey">{PK_COPY.related.eyebrow}</div>
        {/* the reading path: large typographic rows, never a card grid */}
        <div className="nl-path">
          {PK_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>
  );
}
