/* global React */
/* =========================================================================
   The August Wedding-Guest Formula — Nelly
   Reuses the .fd magazine layout (jt-fathers-day.css) with the .fd-nelly
   accent. Shape is a FORMULA: a dress-code ladder set as translated rungs,
   an image-and-text plate for the bag, and the failure points set inside the
   dark band as a four-cell clock rather than a numbered sequence.

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

const WGF_IMG = {
  hero: "/assets/nelly-wedding-hero.jpg",
  kit: "/assets/nelly-wedding-kit.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 WGF_COPY = {
  kicker: "Seasonal · Weddings",
  titleTop: "It Is Ninety-Four Degrees",
  titleBot: "and the ceremony is on grass.",
  subtitle: "An August wedding-guest formula — what the forecast actually decides, a dress-code ladder translated for heat, and the six things that go in the bag.",

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

  hero: {
    caption: "Sage linen, a flat sandal, a bag that will hold a fan.",
    credit: "The Fashion Edition · Seasonal",
  },

  deck: "The dress was silk. The ceremony was at four.",

  paras: [
    /* 0 */ "It is still a lovely dress. It hangs in a bag at the back of the wardrobe and I cannot look at it without remembering forty minutes on a folding chair in direct sun, with my back stuck to the seat and a fixed expression on my face.",
    /* 1 */ "Nothing was wrong with the dress. What was wrong was that I chose it in May, in a shop, in air conditioning, and asked it one question — does this look right — when there were three.",
    /* 2 */ "Does it look right. Does it survive six hours. And can I get out of a car in it without a small private rearranging manoeuvre on the pavement. An August wedding asks all three. The invitation only mentions the first.",
    /* 3 */ "So: a formula, which is not a look. It is an order of operations. Fabric decides, then colour, then shoe, then bag — and by the time you arrive at the dress, most of the choosing has already been done for you.",

    /* 4 */ "Black tie, cocktail, garden party, festive. The words on the card describe formality, which is fixed, and say nothing at all about the two variables that will actually run your afternoon: the temperature and the ground.",
    /* 5 */ "A cocktail dress on a ballroom floor and a cocktail dress on a lawn at five o'clock are different garments with the same name. Read the card, then read the forecast and the venue, in that order and with equal seriousness. If the ceremony is outdoors and it is above the mid-eighties, fabric stops being a preference and becomes the first decision.",

    /* 6 */ "A small bag at a wedding is a real constraint, and the temptation is to treat it as decoration and carry nothing at all. Then you spend the reception borrowing things from strangers. Six items fit in a clutch the size of a paperback, and five of them exist because of heat.",
    /* 7 */ "Blister plasters, because new shoes and swollen feet arrive on the same afternoon. An anti-chafe balm, which is the most useful thing on this list and the one nobody admits to owning. Blotting papers. Two safety pins. A folded fan, carried without embarrassment. And a flat pouch for the earrings you will take off at some point, which is the item that stops you losing them.",

    /* 8 */ "I did wear the silk dress again. Once, in October, indoors, and it was perfect. It was always going to be perfect in October.",
    /* 9 */ "The formula is really just an admission that a dress has a season, and that August is a short one.",
  ],

  headings: {
    brief: "The invitation is not the brief. The forecast is.",
    ladder: "The dress-code ladder, translated for heat",
    bag: "What actually goes in the bag",
    clock: "Where an August outfit fails, hour by hour",
    faq: "Questions",
  },

  ladder: [
    {
      code: "Black tie",
      t: "Long, in something that moves air.",
      note: "Heavy satin and thick silk crepe read correct and hold heat against you all evening. A fine wool crepe or a matte silk georgette reads just as formal and behaves far better in a marquee. Long is not the problem. Dense is.",
    },
    {
      code: "Cocktail",
      t: "Midi, in a linen blend, cotton poplin or crepe de chine.",
      note: "The most abused word on any invitation. In August it means a dress you could stand up in for two hours, which quietly rules out most of the structured, fully lined, strapless things the word conjures. If it is lined edge to edge, it is a November cocktail dress.",
    },
    {
      code: "Garden party",
      t: "The level people overdress.",
      note: "A good linen or cotton dress, a real shoe and a proper bag is the entire assignment. The failure here is nearly always a fabric that photographs beautifully and creases into a road map the moment you sit down in a car.",
    },
    {
      code: "Nothing specified",
      t: "Assume one level above what you were going to do.",
      note: "One level, not two. Nobody has ever been uncomfortable being slightly the smartest person at an outdoor wedding, and a great many people have spent an afternoon quietly aware that they were the most casual.",
    },
  ],

  pull: "Fabric is not a detail of the outfit. In August it is the outfit, and the dress is whatever it happens to be cut into.",
  pullBy: "— Nelly",

  kitPlate: {
    cap: "Six things, a clutch the size of a paperback. Five of them are for heat.",
  },

  clock: [
    {
      t: "4 pm",
      k: "The ceremony",
      v: "Direct sun, on a chair with a solid back. This is where dense fabric and full lining fail, and where you find out whether your dress touches your back.",
    },
    {
      t: "6 pm",
      k: "The photographs",
      v: "Standing, arms out, shoulder to shoulder. Whatever creased on the drive is now the permanent record. Pure linen creases hard; a linen blend with a little viscose or lyocell in it creases far less and still breathes.",
    },
    {
      t: "8 pm",
      k: "Dinner",
      v: "The temperature outside drops and the room does not. Anything you brought to cover your shoulders will now be carried for four hours, so it needs to fold down to nothing or not come at all.",
    },
    {
      t: "10 pm",
      k: "Dancing",
      v: "Straps, heels and hems. The shoe you chose at four in the afternoon is now the only decision that matters — which is the argument for a block heel, and against anything you have not already walked in.",
    },
  ],

  care: {
    kicker: "Shopping it",
    body: "If the date is three weeks out, the useful filters are fibre and lining rather than silhouette. Look for a composition that is mostly linen, cotton, viscose or a crepe with a little stretch. Check whether the lining runs the full length or only through the bodice, because a full polyester lining quietly undoes everything the outer fabric was doing. And buy somewhere that will take it back, because a summer dress that photographs beautifully in a studio and clings in real air is a common outcome and an unpredictable one.",
    linkLabel: "Wedding-guest dresses",
    href: "/go/nelly-wedding-guest-dress",
    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: "Can you wear black to a summer wedding?", a: "Yes, and it has been unremarkable for years. The real objection is heat rather than etiquette: black absorbs sun and shows salt marks. That is an argument against it for a midday ceremony outdoors, and no argument at all against an evening reception inside." },
    { q: "Is linen too casual for a wedding?", a: "Pure linen creases hard, and creasing is what people are actually reacting to when they say casual. A linen blend with viscose or lyocell keeps the hand and loses most of the creasing, and in a good colour with a proper shoe it reads as formal as anything else in the room." },
    { q: "What about white, cream and pale blush?", a: "Still worth avoiding unless the couple has said otherwise. Not because anyone will mistake you for the bride, but because photographs flatten colour, and a pale dress at the wrong end of a group shot causes a small amount of thinking that nobody needs on the day." },
    { q: "How do I know whether a dress will be hot before I own it?", a: "Two things on the product page: the composition, and whether it is fully lined. Anything largely polyester, or fully lined in it, will hold heat regardless of how light it looks on the model. Weave and weight matter as well, but composition tells you most of it." },
  ],

  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: WGF_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: WGF_IMG.capsule },
      { kicker: "The Handbook", title: "Women · Summer", desc: "Heat, fabric, colour and the shoes that survive a lawn.", href: "/en/women/seasonal/summer/", img: WGF_IMG.women },
    ],
  },
};

const wgfpara = (i) => WGF_COPY.paras[i];
function WGFParas({ items }) { return items.map((i) => <p key={i}>{wgfpara(i)}</p>); }

function WGFTopper() {
  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={WGF_COPY.byline.href}>Nelly</a><span className="sep">/</span>
          <span className="here">The August Wedding-Guest Formula</span>
        </div>
        <div className="fd-stamp">Seasonal<span className="dot" />Weddings</div>
      </div>
    </div>
  );
}

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

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

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

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

/* ------------------------------------------------- the dress-code ladder */
function WGFLadder() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <h2 className="fd-prin-eyebrow">{WGF_COPY.headings.ladder}</h2>
        <div className="wg-ladder">
          {WGF_COPY.ladder.map((r) => (
            <article className="wg-rung" key={r.code}>
              <div className="c">{r.code}</div>
              <div className="d">
                <h3 className="t">{r.t}</h3>
                <p className="v">{r.note}</p>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}

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

/* ------------------------------------------------- image + text plate */
function WGFBag() {
  const k = WGF_COPY.kitPlate;
  return (
    <div className="fd-shell">
      <section className="fd-row fd-2col rev">
        <div className="im">
          <div className="ph" style={{ backgroundImage: `url(${WGF_IMG.kit})` }} />
          <div className="rcap">{k.cap}</div>
        </div>
        <div className="tx fd-prose">
          <h2 className="fd-prin-eyebrow">{WGF_COPY.headings.bag}</h2>
          <WGFParas items={[6, 7]} />
        </div>
      </section>
    </div>
  );
}

/* ------------------------------- the clock, set inside the dark band */
function WGFClock() {
  return (
    <section className="fd-dark">
      <div className="inner">
        <h2 className="eyebrow">{WGF_COPY.headings.clock}</h2>
        <div className="wg-clock">
          {WGF_COPY.clock.map((c) => (
            <article className="wg-hour" key={c.t}>
              <div className="t">{c.t}</div>
              <h3 className="k">{c.k}</h3>
              <p className="v">{c.v}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function WGFShop() {
  const c = WGF_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 WGFFaq() {
  return (
    <div className="fd-shell">
      <section className="fd-principles">
        <h2 className="fd-prin-eyebrow">{WGF_COPY.headings.faq}</h2>
        <ol className="fd-prin-list">
          {WGF_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 WGFClose() {
  return (
    <div className="fd-shell">
      <section className="fd-block">
        <div className="fd-2col fd-prose">
          <div className="c"><WGFParas items={[8]} /></div>
          <div className="c"><WGFParas items={[9]} /></div>
        </div>
      </section>
    </div>
  );
}

function WGFSign() {
  const s = WGF_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 WGFRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{WGF_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {WGF_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>
  );
}