// Composed sections for mouhamadalem.com — Nextability-system redesign.

/* ───── Header ───── */
function Header({ wordmarkAccent, page = 'home' }) {
  // Track which nav target is "active": Lab page, or the Engagement section on home.
  // Engagement becomes active when the hash is #engagement OR when the section
  // scrolls into view on the home page.
  const [engagementActive, setEngagementActive] = React.useState(false);

  React.useEffect(() => {
    if (page !== 'home') {
      setEngagementActive(false);
      return;
    }

    const syncFromHash = () => {
      setEngagementActive(window.location.hash === '#engagement');
    };
    syncFromHash();
    window.addEventListener('hashchange', syncFromHash);

    // Scroll-spy: flip on when the Engagement section is meaningfully in view.
    const target = document.getElementById('engagement');
    let observer;
    if (target && 'IntersectionObserver' in window) {
      observer = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            if (entry.isIntersecting && entry.intersectionRatio > 0.25) {
              setEngagementActive(true);
            } else if (window.location.hash !== '#engagement') {
              setEngagementActive(false);
            }
          }
        },
        { threshold: [0, 0.25, 0.5] }
      );
      observer.observe(target);
    }

    return () => {
      window.removeEventListener('hashchange', syncFromHash);
      if (observer) observer.disconnect();
    };
  }, [page]);

  const labActive = page === 'lab';

  return (
    <header
      data-screen-label="01 Header"
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '28px 56px',
        borderBottom: '1px solid var(--rule)'
      }}>
      
      <a href="index.html" style={{ borderBottom: 0 }}>
        <Wordmark size={22} accentOn={wordmarkAccent} />
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        <a href={page === 'home' ? '#engagement' : 'index.html#engagement'} style={{ borderBottom: 0 }}>
          <Cap opacity={engagementActive ? 0.85 : (page === 'home' ? 0.85 : 0.55)}>
            {engagementActive && <Dot size={6} style={{ marginRight: 8, verticalAlign: 'middle' }} />}
            Engagement
          </Cap>
        </a>
        <a href="lab.html" style={{ borderBottom: 0 }}>
          <Cap opacity={labActive ? 0.85 : 0.55}>
            {labActive && <Dot size={6} style={{ marginRight: 8, verticalAlign: 'middle' }} />}
            Lab
          </Cap>
        </a>
        <Button href={page === 'home' ? '#contact' : 'index.html#contact'}>Get in touch <Arrow /></Button>
      </nav>
    </header>);

}

/* ───── Hero ───── */
function Hero({ showOrb, headlineAccent }) {
  // The headline. One italic phrase, one accent phrase.
  // headlineAccent controls which trailing phrase carries the accent.
  const accentPhrase = {
    'deliberate evolution':
    <>
        demand a <span style={{ color: 'var(--accent)' }}>deliberate evolution</span>{' '}
        of how work gets done.
      </>,

    'how work gets done':
    <>
        demand a deliberate evolution of{' '}
        <span style={{ color: 'var(--accent)' }}>how work gets done.</span>
      </>,

    'moments of inflection':
    <>
        demand a deliberate evolution of how work gets done.
      </>

  }[headlineAccent];

  const inflectionPhrase =
  headlineAccent === 'moments of inflection' ?
  <span style={{ color: 'var(--accent)' }}>moments of inflection</span> :

  <span style={{ fontStyle: 'italic', color: 'var(--mid)', fontWeight: 400 }}>
        moments of inflection
      </span>;


  return (
    <section
      id="top"
      data-screen-label="02 Hero"
      style={{
        position: 'relative',
        padding: '64px 56px 96px',
        overflow: 'hidden',
        minHeight: 520
      }}>
      
      {showOrb &&
      <div
        aria-hidden="true"
        style={{
          float: 'right',
          width: 440,
          height: 440,
          marginRight: -200,
          marginTop: -120,
          marginBottom: 16,
          marginLeft: 32,
          shapeOutside: 'circle(50%)',
          pointerEvents: 'none'
        }}>
        
          <Orb size={440} />
        </div>
      }
      <h1
        className="display reveal"
        style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 500,
          fontSize: 76,
          letterSpacing: '-0.04em',
          lineHeight: 1.02,
          marginTop: 0,
          marginBottom: 0,
          position: 'relative',
          zIndex: 1,
          textWrap: 'pretty'
        }}>
        
        I work with leaders at {inflectionPhrase} — when ambition, growth, or complexity {accentPhrase}
      </h1>

      <p
        style={{
          clear: 'right',
          maxWidth: 720,
          marginTop: 40,
          marginBottom: 0,
          fontFamily: 'var(--font-body)',

          lineHeight: 1.55,
          opacity: 0.82,
          position: 'relative',
          zIndex: 1,
          textWrap: 'pretty', fontSize: "22px"
        }}>
        
        I help leaders <span style={{ fontStyle: 'italic', color: "rgb(236, 226, 208)" }}>lead transformation from within</span> complex, boundary-spanning organizations — aligning systems, structures, and culture as they scale. My work focuses on designing and stewarding how decisions, money, data, and talent move through the system so that what's possible can actually take shape.
      </p>
      <div
        style={{
          clear: 'right',
          display: 'flex',
          alignItems: 'center',
          gap: 24,
          marginTop: 48,
          position: 'relative',
          zIndex: 1
        }}>
        
        <Button primary href="#engagement" style={{ fontSize: 16, letterSpacing: '0.16em', padding: '16px 24px' }}>See current engagement <Arrow size={16} /></Button>
        <Button href="lab.html" style={{ fontSize: 16, letterSpacing: '0.16em', padding: '16px 24px' }}>Visit the Nextability Lab <Arrow size={16} /></Button>
      </div>
    </section>);

}

/* ───── Engagement — Pulitzer Center, featured on deep surface ───── */
function Engagement() {
  return (
    <section
      id="engagement"
      data-screen-label="04 Engagement"
      style={{
        background: 'var(--field-deep)',

        position: 'relative', padding: "100px 56px"
      }}>
      
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32 }}>
            <Dot size={10} pulse />
            <Cap opacity={0.85}>Active</Cap>
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 60, letterSpacing: '-0.04em', lineHeight: 1.0, margin: 0, textWrap: 'balance' }}>
            <a
              href="https://pulitzercenter.org/"
              target="_blank"
              rel="noreferrer"
              style={{ borderBottom: '1px solid var(--rule)', color: 'inherit' }}>
              
              Pulitzer Center<span style={{ color: 'var(--accent)' }}>.</span>
            </a>
          </h2>
          <p className="italic" style={{ marginTop: 32, fontSize: 24, lineHeight: 1.3, maxWidth: 460 }}>
            An institution with a long history of advancing breakthrough journalism — grounded in rigorous standards and a principled pursuit of truth.
          </p>
          <div style={{ marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--rule)', maxWidth: 460 }}>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.35, margin: 0 }}>
              Currently focused on this role. <span style={{ color: 'var(--mid)', fontStyle: 'italic' }}>Not taking on additional advisory or consulting work.</span>
            </p>
          </div>
        </div>

        <div style={{ paddingTop: 12 }}>
          <p style={{ lineHeight: 1.6, margin: '0 0 24px', opacity: 0.85, fontSize: "20px" }}>
            I joined in June 2021 at a moment of strength and possibility — brought in to redesign how the organization operates as its ambition for global impact continued to grow.
          </p>
          <p style={{ lineHeight: 1.6, margin: '0 0 24px', opacity: 0.85, fontSize: "20px" }}>
            The work aligns governance, financial strategy, and organizational structure so innovation can scale without compromising the values that define the mission.
          </p>
          <p style={{ lineHeight: 1.6, margin: '0', opacity: 0.85, fontSize: "20px" }}>
            Today, the organization is energized by what lies ahead and intentional about building the systems required to meet that future with confidence.
          </p>
        </div>
      </div>
    </section>);

}

/* ───── Status — merged into Engagement; section retained as no-op stub
        to keep prior anchor links from 404'ing during the rollout. ───── */
function Status() {
  return null;
}

/* ───── Footer ───── */
function Footer({ wordmarkAccent }) {
  return (
    <footer
      id="contact"
      data-screen-label="06 Footer"
      style={{
        padding: '80px 56px 56px',
        borderTop: '1px solid var(--rule)',
        display: 'grid',
        gridTemplateColumns: '1.2fr 1fr 1fr',
        gap: 56,
        alignItems: 'flex-start'
      }}>
      
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
          <Stamp size={44} glyph="m" />
          <Wordmark size={24} accentOn={wordmarkAccent} />
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.6, opacity: 0.55, maxWidth: 320, margin: 0 }}>
          This site exists as a point of reference — the work itself lives elsewhere, quietly, inside the institution it serves.
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Cap>Index</Cap>
        <a href="index.html#engagement" style={{ borderBottom: 0, fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '-0.02em' }}>Engagement</a>
        <a href="lab.html" style={{ borderBottom: 0, fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '-0.02em' }}>Lab</a>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
        <Cap>Contact</Cap>
        <a
          href="mailto:hello@nextability.com"
          style={{
            fontFamily: 'var(--font-display)',
            fontSize: 22,
            letterSpacing: '-0.02em',
            borderBottom: '1px solid var(--rule)',
            paddingBottom: 4
          }}>
          
          hello@nextability.com
        </a>
        <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
          <Dot size={6} pulse />
          <Cap>Live · 17.05.2024</Cap>
        </div>

        {/* Quiet "elsewhere" reference — a footnote, not a CTA. */}
        <a
          href="https://www.linkedin.com/in/moalem/"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            marginTop: 14,
            borderBottom: 0,
            opacity: 0.55,
            transition: 'opacity 200ms ease'
          }}
          onMouseEnter={(e) => { e.currentTarget.style.opacity = 1; }}
          onMouseLeave={(e) => { e.currentTarget.style.opacity = 0.55; }}>
          <Cap>Elsewhere · LinkedIn ↗</Cap>
        </a>
      </div>
    </footer>);

}

Object.assign(window, { Header, Hero, Engagement, Footer });