/* eslint-disable */
// WhatYouGet — "The residency": four numbered pillars + Applications badge on the left rail.

const benefits = [
  ['Funding',  'We back what emerges \u2014 cohort-based programs for the world\u2019s most capable people.'],
  ['Research', 'A first-of-its-kind study of how identity, meaning, and creativity change with AI \u2014 co-authored with the people living it.'],
  ['Space',    'Test kitchen, library, art studio, cowork. The environment is part of the thesis.'],
  ['Network',  'Curious, ambitious people figuring out the future of work \u2014 with warm introductions when you\u2019re ready.'],
];

function WhatYouGet({ onApply }) {
  return (
    <section className="section-pad what-you-get-section" style={{
      borderTop: '1px solid var(--hairline)',
      display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '40px 32px',
      alignItems: 'start',
    }}>
      <div style={{ gridColumn: 'span 4', display: 'flex', flexDirection: 'column', gap: '28px' }}>
        <div>
          <p className="eyebrow">¶ The residency</p>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(36px, 4.6vw, 64px)',
            lineHeight: 1.0, marginTop: '24px',
            color: 'var(--fg)', letterSpacing: '-0.025em',
          }}>
            What&rsquo;s<br />included.
          </h2>
        </div>
        <p style={{
          fontFamily: 'var(--font-sans)', fontWeight: 300,
          fontSize: '15px', lineHeight: 1.6, color: 'var(--fg-muted)',
          margin: 0, maxWidth: '20rem',
        }}>
          A funded residency for people building through the transition &mdash; four things, in one place.
        </p>
        <div className="btn-fill hide-mobile" style={{
          cursor: 'not-allowed',
          fontSize: '12px',
          padding: '18px 20px',
          width: 'auto',
          opacity: 0.6,
          whiteSpace: 'nowrap'
        }}>
          <span>Applications Opening Soon</span>
        </div>
      </div>

      <ul style={{
        gridColumn: '5 / span 8',
        listStyle: 'none', margin: 0, padding: 0,
        borderTop: '1px solid var(--fg)',
      }}>
        {benefits.map(([t, d], i) => (
          <li key={t} className="benefit-item" style={{
            padding: '32px 0',
            borderBottom: '1px solid var(--hairline)',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: '16px' }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: '14px', color: 'var(--accent)', letterSpacing: '0.04em',
                lineHeight: 1,
              }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <p style={{
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 'clamp(22px, 2.1vw, 28px)',
                color: 'var(--fg)', margin: 0, letterSpacing: '-0.015em',
                lineHeight: 1.05,
              }}>
                {t}
              </p>
            </div>
            <p style={{
              fontFamily: 'var(--font-sans)', fontWeight: 300,
              fontSize: '15px', lineHeight: 1.6,
              color: 'var(--fg-muted)', margin: 0,
            }}>
              {d}
            </p>
          </li>
        ))}
      </ul>
    </section>
  );
}

window.WhatYouGet = WhatYouGet;