/* eslint-disable */
// Home — Hero + Marquee + Origin + Philosophy + Who-we-look-for + Community tile.
// Pivoted: hero italic lead is now the brand tagline; community tile is the
// only outbound route. Source: src/routes/index.tsx

function Home({ onNavigate, onApply }) {
  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <section style={{
        position: 'relative',
        padding: '64px 64px 96px',
        minHeight: '90vh',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }} className="page-pad">
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: '12px 32px',
          fontSize: '12px', textTransform: 'uppercase',
          letterSpacing: '0.22em', color: 'var(--fg-muted)',
        }}>
          <span>The research lab for nonlinear human development</span>
          <span>Est. 2026</span>
        </div>

        <div style={{ marginTop: '40px' }}>
          <h1 className="display-xl" style={{
            margin: 0,
            fontSize: 'clamp(44px, 7vw, 116px)',
            color: 'var(--fg)',
            maxWidth: '16ch',
          }}>
            Building infrastructure for the <em className="accent">future of work and meaning</em>.
          </h1>
        </div>

        <div style={{
          marginTop: '40px',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: '32px',
          alignItems: 'end',
        }}>
          <p className="display-italic" style={{
            fontSize: 'clamp(20px, 2.2vw, 28px)',
            lineHeight: 1.25,
            maxWidth: '34rem',
            margin: 0,
          }}>
            A new work order.
          </p>
          <a className="ulink" onClick={() => onNavigate('/community')}>
            Stop by <span className="arrow">→</span>
          </a>
        </div>
      </section>

      <Marquee />

      {/* THE MOMENT */}
      <section className="section-pad" style={{
        borderTop: '1px solid var(--hairline)',
        display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '32px', alignItems: 'start',
      }}>
        <div style={{ gridColumn: 'span 4' }}>
          <p className="eyebrow">¶ The moment</p>
        </div>
        <div style={{ gridColumn: 'span 8', display: 'flex', flexDirection: 'column', gap: '28px', maxWidth: '44rem' }}>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(30px, 3.8vw, 50px)',
            lineHeight: 1.08, margin: 0, color: 'var(--fg)',
            letterSpacing: '-0.02em',
          }}>
            We are living through a new industrial revolution &mdash; and for the first time,
            it&rsquo;s happening to the{' '}<em className="accent">smartest and most ambitious people</em>{' '}in the world.
          </p>
          <p style={{ fontSize: '17px', lineHeight: 1.65, color: 'oklch(0.22 0.02 60 / 0.8)', margin: 0 }}>
            Two forces are arriving at once: a technological leap and a labor&#8209;market shift.
            AI is automating execution faster than society can redesign meaning, status, and human
            development around it.
          </p>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="section-pad" style={{
        borderTop: '1px solid var(--hairline)',
        display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '32px', alignItems: 'start',
      }}>
        <div style={{ gridColumn: 'span 4' }}>
          <p className="eyebrow">¶ Manifesto</p>
        </div>

        <div style={{ gridColumn: 'span 8', display: 'flex', flexDirection: 'column', gap: '56px', maxWidth: '44rem' }}>
          {/* THREE TENETS */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: '20px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: '28px', color: 'var(--accent)', letterSpacing: '-0.02em', lineHeight: 1 }}>I.</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <p style={{
                  fontFamily: 'var(--font-display)', fontWeight: 400,
                  fontSize: 'clamp(22px, 2.2vw, 28px)',
                  lineHeight: 1.2, margin: 0, color: 'var(--fg)',
                  letterSpacing: '-0.015em',
                }}>
                  Work is about to fundamentally change.
                </p>
                <p style={{ fontSize: '16px', lineHeight: 1.65, color: 'oklch(0.22 0.02 60 / 0.8)', margin: 0 }}>
                  It won&rsquo;t be evenly distributed. A few will compound; many will be displaced;
                  most will need a new map &mdash; portfolio careers, fellowships, shapes we don&rsquo;t
                  yet have names for. The category &ldquo;job&rdquo; itself is loosening.
                </p>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: '20px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: '28px', color: 'var(--accent)', letterSpacing: '-0.02em', lineHeight: 1 }}>II.</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <p style={{
                  fontFamily: 'var(--font-display)', fontWeight: 400,
                  fontSize: 'clamp(22px, 2.2vw, 28px)',
                  lineHeight: 1.2, margin: 0, color: 'var(--fg)',
                  letterSpacing: '-0.015em',
                }}>
                  Founders are inherently artists &mdash; and{' '}
                  <em className="accent">more so</em>{' '}now.
                </p>
                <p style={{ fontSize: '16px', lineHeight: 1.65, color: 'oklch(0.22 0.02 60 / 0.8)', margin: 0 }}>
                  At the core of every generational company is someone chasing a private vision
                  before anyone else can see it. When building gets cheap, taste, conviction, and the
                  courage to stay illegible become the only edge that compounds.
                </p>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: '20px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: '28px', color: 'var(--accent)', letterSpacing: '-0.02em', lineHeight: 1 }}>III.</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <p style={{
                  fontFamily: 'var(--font-display)', fontWeight: 400,
                  fontSize: 'clamp(22px, 2.2vw, 28px)',
                  lineHeight: 1.2, margin: 0, color: 'var(--fg)',
                  letterSpacing: '-0.015em',
                }}>
                  There is no infrastructure for this transition. We&rsquo;re building it.
                </p>
                <p style={{ fontSize: '16px', lineHeight: 1.65, color: 'oklch(0.22 0.02 60 / 0.8)', margin: 0 }}>
                  Universities won&rsquo;t catch this; companies can&rsquo;t. The institutions built for
                  the last chapter aren&rsquo;t built for this one. Someone has to be the first place the
                  next class of people lands. We intend to be it &mdash; quietly, methodically, at scale.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter onNavigate={onNavigate} />
    </div>
  );
}

window.Home = Home;