// Nelly · /en/nelly/ — section components

function NellyTopbar() {
  const NAV = [
    { label: "Skin", href: "/skin/en/" },
    { label: "Makeup", href: "/makeup/en/" },
    { label: "Hair", href: "/hair/en/" },
    { label: "Body", href: "/body/en/" },
    { label: "Fragrance", href: "/fragrance/en/" },
  ];
  return (
    <header className="np-topbar">
      <div className="np-topbar-inner">
        <a href="/" className="np-brand">HowTo Beauty <em>Edition</em></a>
        <nav className="np-topnav" aria-label="Primary">
          {NAV.map((n) => (
            <a key={n.label} href={n.href}>{n.label}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

function NellyCrumb() {
  return (
    <nav className="np-crumb" aria-label="Breadcrumb">
      <a href="/">Home</a>
      <span className="sl">/</span>
      <a href="/en/">Edition</a>
      <span className="sl">/</span>
      <span className="cur">Nelly</span>
    </nav>
  );
}

function NellyCover() {
  return (
    <section className="np-cover reveal" data-screen-label="Cover">
      <div className="np-cover-meta">
        <span className="np-bar" />
        <span>{NELLY.issue}</span>
        <span className="dim">·</span>
        <span className="dim">The Contributor's Page</span>
      </div>
      <h1 className="np-cover-name">{NELLY.name}</h1>
      <div className="np-cover-role">{NELLY.role}</div>
      <hr className="np-cover-rule" />
      <div className="np-cover-foot">
        <div className="np-cover-tag">
          {NELLY.cadence}
        </div>
        <div className="np-cover-portrait">
          <img src={NELLY.portrait} alt={`Portrait of ${NELLY.name}`} />
        </div>
      </div>
    </section>
  );
}

function NellyLetter() {
  const L = NELLY_LETTER;
  return (
    <section className="np-letter reveal" aria-labelledby="np-letter-h">
      <aside className="np-letter-side">
        <strong>From the desk</strong>
        {L.marginNote}
      </aside>

      <div className="np-letter-col">
        <div className="np-section-head" style={{ margin: "0 0 36px", borderBottom: 0, paddingBottom: 0 }}>
          <span className="np-num">II.</span>
          <div>
            <div className="np-eyebrow">{L.date}</div>
            <h2 id="np-letter-h">A short letter on <em>working with what you have.</em></h2>
          </div>
        </div>

        {L.body.map((p, i) => (
          <p key={i} className={i === 0 ? "has-drop" : ""}>
            {i === 0 && <span className="np-drop">{L.drop}</span>}
            {i === 0 ? p.slice(1) : p}
          </p>
        ))}
        <div className="np-signature">
          <div className="np-sig-line">{NELLY.signature}</div>
          <div className="np-sig-mark">{NELLY.signoff}</div>
        </div>
      </div>

      <aside className="np-letter-side-r">
        <strong>"{L.pull}"</strong>
        {L.pullAttrib}
      </aside>
    </section>
  );
}

function NellySeriesIndex() {
  return (
    <section className="np-index reveal" aria-labelledby="np-index-h">
      <div className="np-section-head">
        <span className="np-num">III.</span>
        <div>
          <div className="np-eyebrow">The Index · Series & Columns</div>
          <h2 id="np-index-h">What I <em>cover.</em></h2>
        </div>
      </div>

      <div className="np-index-grid">
        {NELLY_SERIES.map((s, i) => (
          <a key={s.slug} href={`/en/nelly/${s.slug}/`} className="np-series">
            <div className="np-series-num">{s.n}</div>
            <div className="np-series-slug">/ {s.slug}</div>
            <h3>{s.name}</h3>
            <p className="np-series-deck">{s.deck}</p>
            <div className="np-series-foot">
              <span className="np-series-tag">{s.tag}</span>
              <span className="np-series-arrow" aria-hidden>→</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function NellyLatest() {
  return (
    <section className="np-latest reveal" aria-labelledby="np-latest-h">
      <div className="np-section-head">
        <span className="np-num">IV.</span>
        <div>
          <div className="np-eyebrow">Latest from Nelly</div>
          <h2 id="np-latest-h">From the <em>desk,</em> this month.</h2>
        </div>
      </div>
      <div className="np-latest-grid">
        {NELLY_LATEST.map((p) => (
          <a key={p.slug} className="np-latest-card" href={`/en/nelly/${p.slug}/`}>
            <div className="np-latest-img">
              <img src={p.img} alt="" />
              <span className="np-latest-kick">{p.kick}</span>
            </div>
            <h4>{p.title}</h4>
            <div className="np-latest-meta">{p.date} · {p.read}</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function NellyIGStrip() {
  return (
    <section className="np-ig reveal" aria-labelledby="np-ig-h">
      <div className="np-ig-inner">
        <div className="np-ig-head">
          <div>
            <div className="np-ig-eyebrow">V. · On Instagram</div>
            <h2 id="np-ig-h"><em>Find me</em> between posts.</h2>
            <span className="np-ig-handle">{NELLY.ig}</span>
          </div>
          <a className="np-ig-cta" href={NELLY.igUrl} target="_blank" rel="noopener noreferrer">
            Follow on Instagram <span aria-hidden>→</span>
          </a>
        </div>
        <div className="np-ig-grid-wrap">
          <div className="np-ig-grid">
            {NELLY_IG_FEED.map((p, i) => (
              <a key={i} className="np-ig-tile" href={NELLY.igUrl} target="_blank" rel="noopener noreferrer">
                <img src={p.img} alt="" />
                <div className="np-ig-overlay">
                  <div className="np-ig-cap">{p.caption}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function NellyUnedit() {
  const U = NELLY_UNEDIT_QUOTE;
  return (
    <section className="np-unedit-wrap reveal" aria-labelledby="np-unedit-h">
      <div className="np-section-head">
        <span className="np-num">VI.</span>
        <div>
          <div className="np-eyebrow">The Closing Page</div>
          <h2 id="np-unedit-h">Unedited.</h2>
        </div>
      </div>
      <div className="np-unedit">
        <div>
          <div className="np-unedit-eyebrow">{U.label} · From the desk</div>
          <p className="np-unedit-label">In her own <em>hand.</em></p>
          <div className="np-unedit-meta">No edits. No second drafts. The way she sent it.</div>
        </div>
        <div>
          <blockquote className="np-unedit-quote">{U.text}</blockquote>
          <div className="np-unedit-attrib">— {U.attrib}</div>
        </div>
      </div>
    </section>
  );
}

function NellyFooter() {
  return (
    <footer className="np-foot">
      <div className="np-foot-inner">
        <div className="np-foot-grid">
          <div>
            <h5>HowTo Beauty Edition</h5>
            <p className="colophon">A global community beauty platform — diverse techniques, plain language, edited to the standard of a print magazine.</p>
          </div>
          <div>
            <h5>The HowTo Network</h5>
            <ul>
              <li><a href="https://thehowtonetwork.com">Network</a></li>
              <li><a href="https://howtohomeedition.com">Home</a></li>
              <li><a href="https://howtofoodedition.com">Food</a></li>
              <li><a href="https://howtotraveledition.com">Travel</a></li>
              <li><a href="https://howtotechedition.com">Tech</a></li>
              <li><a href="https://howtofamilyedition.com">Family</a></li>
            </ul>
          </div>
          <div>
            <h5>From Nelly's desk</h5>
            <ul>
              <li><a href="/en/nelly/the-second-cleanse/">The Second Cleanse</a></li>
              <li><a href="/en/nelly/wardrobe-schematic/">Wardrobe Schematic</a></li>
              <li><a href="/en/nelly/skin-first/">Skin First</a></li>
              <li><a href={NELLY.igUrl}>Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="np-foot-bottom">
          <span>© 2026 HowTo Beauty Edition</span>
          <span>Edited from the desk · {NELLY.issue}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  NellyTopbar, NellyCrumb, NellyCover, NellyLetter,
  NellySeriesIndex, NellyLatest, NellyIGStrip, NellyUnedit, NellyFooter,
});