// Nelly profile — components

function NellyCover() {
  return (
    <section className="np-cover reveal" data-screen-label="Nelly Cover">
      <div className="np-cover-grid">
        <div className="np-cover-left">
          <div className="np-meta">
            <span>{NELLY_PROFILE.issue}</span>
            <span className="np-bar" />
            <span>The Contributor's Page</span>
          </div>
          <h1 className="np-logotype">{NELLY_PROFILE.name}<span className="np-dot">.</span></h1>
          <div className="np-role">{NELLY_PROFILE.role}</div>
          <p className="np-manifesto">{NELLY_PROFILE.manifesto}</p>
          <p className="np-intro">{NELLY_PROFILE.intro}</p>
          <div className="np-cover-foot">
            <a className="np-ig-pill" href="https://instagram.com/legacybynelly" target="_blank" rel="noopener" aria-label="Instagram">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
              <span>{NELLY_PROFILE.ig}</span>
              <span className="np-ig-count">{NELLY_PROFILE.igFollowers} followers</span>
            </a>
            <span className="np-cadence">{NELLY_PROFILE.cadence}</span>
          </div>
        </div>
        <div className="np-cover-right">
          <div className="np-portrait">
            <img src="/redesign/assets/nelly.png" alt={`Portrait of ${NELLY_PROFILE.name}`} />
            <span className="np-portrait-tag">Photographed at the desk · 04/26</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function NellyLetter() {
  const L = NELLY_LETTER;
  return (
    <section className="np-letter reveal">
      <div className="np-letter-head">
        <div className="np-letter-date">{L.date}</div>
        <h2>{L.title}</h2>
      </div>
      <div className="np-letter-body">
        <div className="np-letter-col">
          {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_PROFILE.signature}</div>
            <div className="np-sig-mark">{NELLY_PROFILE.signoff}</div>
          </div>
        </div>
        <aside className="np-letter-side">
          <blockquote className="np-pull">"{L.pull}"</blockquote>
          <div className="np-margin">{L.margin}</div>
        </aside>
      </div>
    </section>
  );
}

function NellyIndex() {
  return (
    <section className="np-index reveal">
      <div className="np-section-head">
        <span className="np-num">II.</span>
        <div>
          <div className="np-eyebrow">The Index</div>
          <h2>What I <em>cover.</em></h2>
        </div>
      </div>

      <div className="np-spreads">
        {NELLY_INDEX.map((c, i) => (
          <article key={c.h} id={`np-${c.h.toLowerCase()}`} className={`np-spread ${i % 2 === 1 ? "flip" : ""}`}>
            <div className="np-spread-media">
              <img src={c.img} alt="" />
              <span className="np-figtag">Fig. {c.n}</span>
              <span className="np-figcap">{c.figcap}</span>
            </div>
            <div className="np-spread-copy">
              <div className="np-spread-eyebrow">{c.tag} · {c.pieces.length} pieces</div>
              <div className="np-spread-chn">{c.n}</div>
              <h3>{c.h}<em>.</em></h3>
              <p className="np-spread-deck">{c.deck}</p>
              <p className="np-spread-body">{c.body}</p>
              <blockquote className="np-spread-pull">
                {c.pull}
                <br />
                <span className="np-spread-by">— Nelly</span>
              </blockquote>

              <div className="np-piece-list">
                <div className="np-piece-h">
                  <span>From this chapter</span>
                  <span>Latest first</span>
                </div>
                {c.pieces.map((p, j) => (
                  <a key={j} href={p.href || "#"} className="np-piece">
                    <span className="np-pn">{String(j + 1).padStart(2, "0")}</span>
                    <span className="np-pt">{p.t}</span>
                    <span className="np-pm">{p.time} · {p.date}</span>
                    <span className="np-parr" aria-hidden>→</span>
                  </a>
                ))}
              </div>

              <a href="#" className="np-spread-more">
                Read everything from {c.h.toLowerCase()} <span aria-hidden>→</span>
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function NellyLatest() {
  return (
    <section className="np-latest reveal">
      <div className="np-section-head">
        <span className="np-num">III.</span>
        <div>
          <div className="np-eyebrow">The Latest</div>
          <h2>From the <em>desk,</em> this month.</h2>
        </div>
      </div>
      <div className="np-latest-grid">
        {NELLY_LATEST.map((p, i) => (
          <a key={i} className={`np-latest-card ${i === 0 ? "feat" : ""}`} href={p.href || "#"}>
            <div className="np-latest-img">
              <img src={p.img} alt="" />
              <span className="np-latest-kick">{p.kick}</span>
            </div>
            <h4>{p.t}</h4>
            <div className="np-latest-meta">{p.date} · {p.time} read</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function NellyIG() {
  return (
    <section className="np-ig reveal">
      <div className="np-ig-inner">
        <div className="np-ig-head">
          <div>
            <div className="np-ig-eyebrow">On Instagram</div>
            <h2><span className="np-ig-handle">{NELLY_PROFILE.ig}</span></h2>
            <p className="np-ig-deck">"The page where I'm allowed to be wrong out loud." — {NELLY_PROFILE.signoff}</p>
          </div>
          <a className="np-ig-cta" href="https://instagram.com/legacybynelly" target="_blank" rel="noopener">Follow on Instagram <span aria-hidden>→</span></a>
        </div>
        <div className="np-ig-grid">
          {NELLY_IG.map((p, i) => (
            <a key={i} className="np-ig-tile" href="#">
              <div className="np-ig-img">
                <img src={p.img} alt="" />
                <div className="np-ig-overlay">
                  <div className="np-ig-stats">
                    <span>♡ {p.likes}</span>
                    <span>◯ {p.comments}</span>
                  </div>
                  <div className="np-ig-cap">{p.caption}</div>
                </div>
              </div>
              <div className="np-ig-day">{p.days} ago</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function NellyUnedit() {
  const U = NELLY_UNEDIT;
  return (
    <section className="np-unedit reveal">
      <div className="np-section-head">
        <span className="np-num">V.</span>
        <div>
          <div className="np-eyebrow">The Unedit</div>
          <h2>What I'm wearing, using & <em>reading.</em></h2>
          <div className="np-unedit-date">{U.date}</div>
        </div>
      </div>
      <p className="np-unedit-intro">{U.intro}</p>
      <div className="np-unedit-grid">
        {U.cols.map((c) => (
          <div key={c.h} className="np-unedit-col">
            <h4>{c.h}</h4>
            <ul>
              {c.items.map((it, i) => (
                <li key={i}>
                  <span className="np-u-t">{it.t}</span>
                  <span className="np-u-n">{it.note}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { NellyCover, NellyLetter, NellyIndex, NellyLatest, NellyIG, NellyUnedit });