/* global React */
/* =========================================================================
   What Your Dad Wore and Why It Still Works — Nelly · Father's Day 2026
   Reuses the .fd magazine layout (jt-fathers-day.css) with a Nelly accent
   and a bespoke "four principles" centerpiece.

   TRANSLATION NOTE: every visible string lives in NE_COPY (paras + principles
   + questions). Translate values only; markup/classes/images/hrefs stay.
   `paras` and `principles` are Nelly's essay verbatim — translate, don't rewrite.
   ========================================================================= */

const NE_IMG = {
  hero:   "/assets/nelly-fathers-day/closet.png",   // full-bleed hero
  jacket: "/assets/nelly-fathers-day/jacket.png",   // image+text row
  mirror: "/assets/fathers-day/mirror.png",         // shared closer image
  // related cards
  cotton: "/assets/nelly-collar-theory-full.png?v=3",
  women:  "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80",
};

const NE_COPY = {
  kicker: "Father's Day · The Fashion Edition",
  titleTop: "What Your Dad Wore",
  titleBot: "& why it still works.",
  subtitle: "The generation that dressed without thinking about it had something figured out.",

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

  hero: {
    caption: "Everything in his closet made sense together — and made sense with him.",
    credit: "The Fashion Edition · Father's Day 2026",
  },

  // Nelly's essay — verbatim, in order. Translate only; never rewrite.
  paras: [
    "I have been thinking about my father's closet.",
    "Not because it was remarkable — it wasn't, by any metric the current fashion conversation uses to evaluate a wardrobe. No carefully curated capsule. No investment pieces. No color theory applied consciously. Just clothes. The right clothes, worn the right way, for the right situations, without drama.",
    "What he had was coherence. Everything in his closet made sense together and made sense with him, which is harder to achieve than it sounds and rarer than it should be.",
    "His generation — and I suspect your father's generation, whatever decade that lands in — dressed with a clarity that got lost somewhere in the conversation about personal style. They wore what the occasion required. They maintained what they owned. They bought things that lasted and wore them until they did. They did not agonize over whether something was on-trend.",
    "The result, more often than not, was a man who looked right. Not fashionable in any particular season's definition. Right. Put-together. Appropriate. The kind of dressed that doesn't call attention to itself, which is the actual goal that most style advice misses entirely.",
    "Here is what that generation understood about clothes that I think is worth recovering:",
  ],

  principles: [
    { lead: "Fit is the whole conversation.", body: "My father's clothes fit him. Not perfectly — he wasn't going to a tailor for his work trousers — but they fit. They were the right size for his body at the time he bought them, and when his body changed, he bought new ones. There was no holding onto things that didn't fit because they used to, no aspiring to fit into something. Clothes that fit your body right now, today. That's it. That's most of what people mean when they say someone looks well-dressed." },
    { lead: "The occasion is real information.", body: "His church clothes were his church clothes. His work clothes were his work clothes. He wasn't importing one category into another. This is a rule that sounds old-fashioned until you watch someone show up underdressed to something that mattered and understand what it cost them in the room before they opened their mouth. Dressing for the occasion is not compliance. It is respect — for the event, for the people there, for your own presence in the room." },
    { lead: "Quality over quantity was not a concept he would have named.", body: "It was just how he bought things. He bought fewer things and they lasted longer. He didn't chase newness. He wore things out and replaced them when they were worn out. The economic logic of this is clear. The aesthetic result — a wardrobe with no visual noise, no impulse buys that don't go with anything — is underrated." },
    { lead: "He dressed like himself.", body: "This is the one I keep coming back to. He wasn't trying on identities with his clothes. He wasn't building a character. He knew who he was and he dressed accordingly, and that self-knowledge translated into a kind of ease that no amount of trend-following produces. You cannot buy the ease. You develop it by knowing yourself well enough to stop auditioning." },
  ],

  principlesEyebrow: "What the generation understood",
  jacketCaption: "Clothes that fit your body right now, today.",
  pull: "He knew who he was and he dressed accordingly.",

  closeLead: "Father's Day is a good moment to look at your own wardrobe with his eyes for a minute. Not to dress like him — different eras, different contexts, different bodies. But to ask the questions he implicitly answered every morning without thinking about them.",
  questions: [
    "Does this fit?",
    "Does this suit the occasion?",
    "Does this actually go with the rest of what I own?",
    "Does this look like me, or like someone I was hoping to be?",
  ],
  closer: "The answers will tell you more than any guide I could write.",

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

  related: {
    eyebrow: "More from Nelly",
    cards: [
      { kicker: "Field Note", title: "Cotton Suiting in Deep Heat", desc: "How to wear tailoring when the temperature refuses to cooperate.", href: "/en/contributors/nelly/cotton-suiting-in-deep-heat/", img: NE_IMG.cotton },
      { kicker: "The Handbook", title: "The Women Lane", desc: "Build, wear, style, fit, finish — the editorial wardrobe, assembled.", href: "/en/women/", img: NE_IMG.women },
      { kicker: "Father's Day", title: "How Your Father Dressed — by JT", desc: "JT's companion essay: clothes as presentation, not self-expression.", href: "/en/contributors/jt/how-your-father-dressed/", img: "/assets/fathers-day/wardrobe.png" },
    ],
  },
};

const nepara = (i) => NE_COPY.paras[i];

function NEParas({ items }) {
  return items.map((i) => <p key={i}>{nepara(i)}</p>);
}

/* ---------------------------------------------------------------- TOPPER */
function NEFDTopper() {
  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={NE_COPY.byline.href}>Nelly</a>
          <span className="sep">/</span>
          <span className="here">{NE_COPY.titleTop}</span>
        </div>
        <div className="fd-stamp">The HowTo Network<span className="dot" />Father's Day 2026</div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ HEAD */
function NEFDHead() {
  const b = NE_COPY.byline;
  return (
    <div className="fd-shell">
      <header className="fd-head">
        <div className="fd-kicker">{NE_COPY.kicker}</div>
        <h1 className="fd-h1">
          {NE_COPY.titleTop} <span className="it">{NE_COPY.titleBot}</span>
        </h1>
        <p className="fd-sub">{NE_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>
  );
}

/* --------------------------------------------------------- full-bleed hero */
function NEFDHero() {
  return (
    <figure className="fd-figure fd-band hero fd-hero-wrap">
      <div className="img" style={{ backgroundImage: `url(${NE_IMG.hero})`, backgroundSize: "114%", backgroundPosition: "64% 42%" }} />
      <figcaption className="fd-cap">
        <span>{NE_COPY.hero.caption}</span>
        <span className="accent">{NE_COPY.hero.credit}</span>
      </figcaption>
    </figure>
  );
}

function NEFDDeck() {
  return <div className="fd-shell"><section className="fd-deck"><p>{nepara(0)}</p></section></div>;
}

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

function NEFDRow() {
  return (
    <div className="fd-shell">
      <section className="fd-row fd-2col rev">
        <figure className="im fd-figure">
          <div className="ph" style={{ backgroundImage: `url(${NE_IMG.jacket})` }} />
          <figcaption className="rcap">{NE_COPY.jacketCaption}</figcaption>
        </figure>
        <div className="tx fd-prose"><NEParas items={[3, 4]} /></div>
      </section>
    </div>
  );
}

/* ---------------------------------------------- four principles centerpiece */
function NEPrinciples() {
  return (
    <div className="fd-shell">
      <section className="fd-principles">
        <p className="fd-prin-intro">{nepara(5)}</p>
        <div className="fd-prin-eyebrow">{NE_COPY.principlesEyebrow}</div>
        <ol className="fd-prin-list">
          {NE_COPY.principles.map((p, i) => (
            <li className="fd-prin" key={i}>
              <span className="pn">{String(i + 1).padStart(2, "0")}</span>
              <div className="pc">
                <h3 className="ph">{p.lead}</h3>
                <p className="pb">{p.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>
    </div>
  );
}

function NEFDPull() {
  return (
    <div className="fd-shell">
      <section className="fd-pull line"><blockquote>{NE_COPY.pull}</blockquote></section>
    </div>
  );
}

/* ----------------------------------------------- the four questions block */
function NEQuestions() {
  return (
    <div className="fd-shell">
      <section className="fd-questions">
        <p className="fd-q-lead fd-prose">{NE_COPY.closeLead}</p>
        <ul className="fd-q-list">
          {NE_COPY.questions.map((q, i) => <li key={i}>{q}</li>)}
        </ul>
      </section>
    </div>
  );
}

/* -------------------------------------------------- full-bleed closer */
function NEFDCloser() {
  return (
    <section className="fd-closer">
      <div className="img" style={{ backgroundImage: `url(${NE_IMG.mirror})` }} />
      <div className="veil">
        <div className="inner"><p className="final">{NE_COPY.closer}</p></div>
      </div>
    </section>
  );
}

function NEFDSign() {
  const s = NE_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 NEFDRelated() {
  return (
    <div className="fd-shell">
      <section className="fd-related">
        <div className="ey">{NE_COPY.related.eyebrow}</div>
        <div className="fd-cards">
          {NE_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>
  );
}