/* eslint-disable */
// Research — Human Research Lab

function Research({ onNavigate, onApply }) {
  return (
    <div className="page-pad">
      {/* Hero */}
      <section style={{
        paddingTop: '80px',
        paddingBottom: '80px',
        borderBottom: '1px solid var(--hairline)'
      }}>
        <p className="eyebrow">03 / Human Research Lab</p>
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(48px, 8vw, 96px)',
          fontWeight: 300,
          lineHeight: 1.05,
          letterSpacing: '-0.03em',
          marginTop: '48px',
          marginBottom: '40px',
          maxWidth: '900px'
        }}>
          What does work mean<br />in the <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>AI era</em>?
        </h1>
        <p style={{
          maxWidth: '640px',
          color: 'var(--ink-muted)',
          fontSize: '20px',
          lineHeight: 1.65,
          fontWeight: 300
        }}>
          A study we&rsquo;re writing with the people living it &mdash; how identity, meaning, and purpose change as the old career map dissolves.
        </p>
      </section>

      {/* Early Findings */}
      <section style={{
        padding: '120px 0',
        borderBottom: '1px solid var(--hairline)'
      }}>
        <p className="eyebrow" style={{ marginBottom: '32px', opacity: 0.6 }}>First Research Findings — 2026</p>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(32px, 4.5vw, 54px)',
          fontWeight: 300,
          lineHeight: 1.15,
          letterSpacing: '-0.02em',
          marginBottom: '48px',
          maxWidth: '900px'
        }}>
          What we're learning
        </h2>

        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '32px',
          maxWidth: '900px'
        }}>
          <p style={{
            fontSize: '18px',
            lineHeight: 1.7,
            color: 'var(--ink)',
            fontWeight: 300
          }}>
            Over the past six months, we brought together a founding cohort of people who had already won by every conventional measure &mdash; founders who&rsquo;d sold their companies, operators at post-IPO startups, executives decades into the top of their field. Not as subjects, but as co-authors.
          </p>

          <p style={{
            fontSize: '18px',
            lineHeight: 1.7,
            color: 'var(--ink)',
            fontWeight: 300
          }}>
            <strong style={{ fontWeight: 400 }}>When work is stripped away from people who don't need to worry about money, it doesn't produce freedom—it produces something that looks a lot like depression.</strong> Existential stress was acute and near-universal. This isn't personal failing; it's a structural condition: the first generation whose identity was so thoroughly organized around professional achievement that losing the game—even by winning it—leaves nothing behind.
          </p>

          <div style={{
            background: 'var(--paper-soft)',
            padding: '40px',
            border: '1px solid var(--hairline)',
            marginTop: '24px'
          }}>
            <h3 style={{
              fontFamily: 'var(--font-display)',
              fontSize: '20px',
              fontWeight: 400,
              marginBottom: '24px',
              letterSpacing: '-0.01em'
            }}>
              What people reached for:
            </h3>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
              <p style={{ fontSize: '16px', lineHeight: 1.7, color: 'var(--ink)', fontWeight: 300, margin: 0 }}>
                <strong style={{ fontWeight: 400 }}>The arts as primary meaning-making.</strong> Ceramics, painting, theatre, writing &mdash; not as hobbies, but as serious creative practice. Consistent across wildly different backgrounds.
              </p>

              <p style={{ fontSize: '16px', lineHeight: 1.7, color: 'var(--ink)', fontWeight: 300, margin: 0 }}>
                <strong style={{ fontWeight: 400 }}>Proximity to frontier AI labs.</strong> Being inside the most important technological transition of their lifetime was itself a source of meaning. Adjacency to consequence mattered as much as the work.
              </p>

              <p style={{ fontSize: '16px', lineHeight: 1.7, color: 'var(--ink)', fontWeight: 300, margin: 0 }}>
                <strong style={{ fontWeight: 400 }}>Building from personal obsession.</strong> Voice tools, therapy platforms, juice brands, clothing lines &mdash; projects unified by instinct, not market logic. Historically where the most interesting companies start.
              </p>

              <p style={{ fontSize: '16px', lineHeight: 1.7, color: 'var(--ink)', fontWeight: 300, margin: 0 }}>
                <strong style={{ fontWeight: 400 }}>Anxiety about basic needs &mdash; even among the wealthy.</strong> Insurance and security surfaced as shared concerns. When employment stops delivering healthcare and safety nets, the anxiety doesn&rsquo;t vanish just because you can pay out of pocket.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* The Reinvention Arc */}
      <section style={{
        padding: '120px 0',
        borderBottom: '1px solid var(--hairline)'
      }}>
        <p className="eyebrow" style={{ marginBottom: '32px', opacity: 0.6 }}>The Reinvention Arc</p>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(32px, 4.5vw, 54px)',
          fontWeight: 300,
          lineHeight: 1.15,
          letterSpacing: '-0.02em',
          marginBottom: '24px',
          maxWidth: '900px'
        }}>
          A pattern in how people rebuild
        </h2>
        <p style={{
          fontSize: '18px',
          lineHeight: 1.7,
          color: 'var(--ink-muted)',
          fontWeight: 300,
          maxWidth: '680px',
          marginBottom: '64px'
        }}>
          Across cohorts, reinvention moved through five recognizable stages &mdash; rarely linear, but consistent in shape.
        </p>

        <ol style={{
          listStyle: 'none', margin: 0, padding: 0,
          maxWidth: '900px',
          borderTop: '1px solid var(--hairline)'
        }}>
          {[
            ['01', 'Decompression', 'Separation from previous identity.'],
            ['02', 'Exploration', 'Creative recovery and dense peer exposure.'],
            ['03', 'Experimentation', 'Obsession discovery.'],
            ['04', 'Incubation', 'Venture and project formation.'],
            ['05', 'Emergence', 'Long-term network integration.'],
          ].map(([num, title, desc]) => (
            <li key={num} style={{
              display: 'grid',
              gridTemplateColumns: '72px 1fr',
              gap: '24px',
              alignItems: 'baseline',
              padding: '32px 0',
              borderBottom: '1px solid var(--hairline)'
            }}>
              <span style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 300,
                fontSize: '20px',
                color: 'var(--accent)',
                letterSpacing: '0.02em'
              }}>{num}</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <h3 style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 'clamp(22px, 2.4vw, 30px)',
                  fontWeight: 400,
                  lineHeight: 1.15,
                  letterSpacing: '-0.015em',
                  margin: 0
                }}>{title}</h3>
                <p style={{
                  fontSize: '16px',
                  lineHeight: 1.65,
                  color: 'var(--ink-muted)',
                  fontWeight: 300,
                  margin: 0
                }}>{desc}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>

      {/* Participate CTA */}
      <SiteFooter onNavigate={onNavigate} />
    </div>
  );
}

window.Research = Research;
