// Em — contributor profile app. Real facts only, drawn from emeverything.com.
// No fabricated followers, article index, testimonials, or years of experience.
// No portrait: an honest plate stands in until Em provides a real photo.
// Loaded as an EXTERNAL babel script (like nelly-app.jsx) so the static page's
// only <h1> lives in the hidden data-prerender block — middleware keeps it for
// crawlers instead of stripping it as an "outside h1".

const EM = {
  name: 'Em',
  role: 'Stylist',
  lane: 'Hair',
  tagline: 'Look Sharp. Feel Fresh.',
  site: 'emeverything.com',
  siteUrl: 'https://emeverything.com',
  intro: 'A stylist with an eye for detail and a love for making people look and feel incredible.',
};

function SiteGlyph() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <circle cx="12" cy="12" r="9" /><line x1="3" y1="12" x2="21" y2="12" />
      <path d="M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
    </svg>
  );
}

function EmCover() {
  return (
    <section className="np-cover reveal">
      <div className="np-cover-grid">
        <div className="np-cover-left">
          <div className="np-meta">
            <span>New to the masthead</span>
            <span className="np-bar" />
            <span>The Contributor's Page</span>
          </div>
          <h1 className="np-logotype">{EM.name}<span className="np-dot">.</span></h1>
          <div className="np-role">{EM.role} · {EM.lane}</div>
          <p className="np-manifesto">{EM.tagline}</p>
          <p className="np-intro">{EM.intro}</p>
          <div className="np-cover-foot">
            <a className="np-ig-pill" href={EM.siteUrl} target="_blank" rel="noopener">
              <SiteGlyph />
              <span>{EM.site}</span>
              <span className="np-ig-count">Her studio</span>
            </a>
            <span className="np-cadence">Contributing stylist · Hair desk</span>
          </div>
        </div>
        <div className="np-cover-right">
          <div className="np-portrait">
            <img src="/contributors/em.png" alt="Portrait of Em, Contributing Stylist" />
            <span className="np-portrait-tag">Illustrated portrait</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function EmIntro() {
  return (
    <section className="np-letter reveal">
      <div className="np-letter-head">
        <div className="np-letter-date">New to the masthead · 2026 · From the desk</div>
        <h2>Meet Em.</h2>
      </div>
      <div className="np-letter-body">
        <div className="np-letter-col">
          <p className="has-drop">
            <span className="np-drop">E</span>
            m is a passionate stylist with an eye for detail and a love for making people look and feel incredible. She is the first working stylist to sign her name to our Hair desk.
          </p>
          <p>Every cut, trim, and style is crafted with precision and care. She brings skill, warmth, and creativity to every single chair.</p>
          <p>She keeps her own studio at <a href="https://emeverything.com" target="_blank" rel="noopener" style={{ color: 'inherit', textDecorationThickness: '1px', textUnderlineOffset: '3px' }}>emeverything.com</a>. This is her first desk with us — her how-to's for hair are on the way, written with her and published only with her approval.</p>
        </div>
        <aside className="np-letter-side">
          <blockquote className="np-pull">"{EM.tagline}"</blockquote>
          <div className="np-margin">Haircuts · Beard trims · Styling — Em</div>
        </aside>
      </div>
    </section>
  );
}

function EmCovers() {
  return (
    <section className="np-index reveal emp-covers">
      <div className="np-section-head">
        <span className="np-num">II.</span>
        <div>
          <div className="np-eyebrow">The Chair</div>
          <h2>What Em <em>covers.</em></h2>
        </div>
      </div>
      <div className="emp-covers-grid">
        <div className="emp-cov">
          <h4>Haircuts</h4>
          <p>Cut with an eye for detail — shape, precision, and a finish that holds.</p>
        </div>
        <div className="emp-cov">
          <h4>Beard Trims</h4>
          <p>Lines cleaned up and shape brought back. Look sharp, feel fresh.</p>
        </div>
        <div className="emp-cov">
          <h4>Styling</h4>
          <p>Everyday styling done with skill, warmth, and a little creativity.</p>
        </div>
      </div>
    </section>
  );
}

function EmColumn() {
  return (
    <section className="np-latest reveal">
      <div className="np-section-head">
        <span className="np-num">III.</span>
        <div>
          <div className="np-eyebrow">The Column</div>
          <h2>From Em's <em>desk.</em></h2>
        </div>
      </div>
      <div className="emp-empty">
        <h3>Em's first pieces are coming.</h3>
        <p>Her how-to's for hair are written together and published only with her approval. Nothing here yet — check back soon, or find her in her own chair.</p>
        <a className="emp-site-cta" href="https://emeverything.com" target="_blank" rel="noopener">
          <SiteGlyph /> Visit emeverything.com
        </a>
      </div>
    </section>
  );
}

function EmApp() {
  React.useEffect(() => {
    document.body.classList.add('np-page', 'fp-playfair-dmsans');
    return () => document.body.classList.remove('np-page', 'fp-playfair-dmsans');
  }, []);

  React.useEffect(() => {
    const reveal = (el) => el.classList.add('in');
    if (!('IntersectionObserver' in window)) {
      document.querySelectorAll('.reveal').forEach(reveal);
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });
    }, { threshold: 0, rootMargin: '0px 0px 200px 0px' });
    document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
    const safety = setTimeout(() => document.querySelectorAll('.reveal:not(.in)').forEach(reveal), 1500);
    return () => { clearTimeout(safety); io.disconnect(); };
  }, []);

  return (
    <>
      <Header onDark={false} />
      <nav className="crumb" aria-label="Breadcrumb">
        <a href="/en/">Home</a>
        <span className="sl">/</span>
        <a href="/en/contributors/">Contributors</a>
        <span className="sl">/</span>
        <span className="cur">Em</span>
      </nav>
      <div className="np-shell">
        <EmCover />
        <EmIntro />
        <EmCovers />
        <EmColumn />
      </div>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<EmApp />);