/* eslint-disable */
// Community page — tightened flow.
// Order: hero → hero photo → WhatYouGet (with inline Apply CTA) → Calendar → Apply form → Footer.

function Community({ onNavigate, onApply }) {
  return (
    <div data-screen-label="02 Community and Residency">
      {/* HERO */}
      <section className="page-pad" style={{ paddingTop: '80px', paddingBottom: '112px' }}>
        <p className="eyebrow">02 / Community and Residency</p>

        <h1 className="display-xl" style={{
          fontSize: 'clamp(56px, 10vw, 168px)',
          marginTop: '56px',
        }}>
          Stop by.<br />
          Stay <em className="accent">a&nbsp;while</em>.
        </h1>

        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '48px', marginTop: '48px', flexWrap: 'wrap' }}>
          <p className="display-italic" style={{
            fontSize: 'clamp(20px, 2.2vw, 28px)',
            maxWidth: '40rem',
            lineHeight: 1.25,
            flex: '1 1 auto',
            margin: 0,
          }}>
            A room for people working out what comes next &mdash; after the exits, the IPOs,
            the pivots that no longer answer the question they used to.
          </p>

          <a
            href="https://tally.so/r/PdkYb0"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-block',
              fontFamily: 'var(--font-sans)',
              fontSize: '14px',
              fontWeight: 500,
              textTransform: 'uppercase',
              letterSpacing: '0.24em',
              padding: '22px 48px',
              border: '2px solid var(--fg)',
              color: 'var(--fg)',
              textDecoration: 'none',
              transition: 'all 320ms',
              cursor: 'pointer',
              textAlign: 'center',
              whiteSpace: 'nowrap',
              flexShrink: 0,
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = 'var(--fg)';
              e.currentTarget.style.color = 'var(--bg)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = 'transparent';
              e.currentTarget.style.color = 'var(--fg)';
            }}
          >
            Apply
          </a>
        </div>
      </section>

      {/* HERO PHOTO */}
      <figure style={{ margin: 0, borderTop: '1px solid var(--hairline)' }}>
        <img src="../../assets/imagery/group-crowns.jpg"
          alt="Members of the In Between community at a Brooklyn ice cream shop, wearing paper crowns."
          style={{ width: '100%', height: 'clamp(420px, 72vh, 720px)', objectFit: 'cover', display: 'block' }}
        />
        <figcaption style={{
          padding: '12px 64px',
          fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.22em',
          color: 'var(--fg-muted)',
          display: 'flex', justifyContent: 'space-between',
          borderBottom: '1px solid var(--hairline)',
        }}>
          <span>Project launch night</span>
          <span>2026</span>
        </figcaption>
      </figure>

      {/* THE MODEL — Xerox PARC thesis */}
      <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 model</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(28px, 3.4vw, 44px)',
            lineHeight: 1.1, margin: 0, color: 'var(--fg)',
            letterSpacing: '-0.02em',
          }}>
            Brilliant people, unstructured time, and proximity to a{' '}
            <em className="accent">massive technological shift.</em>
          </p>
          <p style={{ fontSize: '17px', lineHeight: 1.65, color: 'oklch(0.22 0.02 60 / 0.8)', margin: 0 }}>
            Xerox PARC proved that dense networks of exceptional people around a technological
            discontinuity generate outsized innovation. We apply that model to the AI era &mdash;
            founders and operators post&#8209;exit, early engineers from the labs that defined the
            last decade, and the researchers, scientists, and artists who will define the next.
          </p>
        </div>
      </section>

      {/* THE ARC — Two stages */}
      <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 arc</p>
        </div>
        <div style={{ gridColumn: 'span 8', display: 'flex', flexDirection: 'column', gap: '48px', maxWidth: '44rem' }}>
          {/* Stage 1 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: '16px' }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 300,
                fontSize: '20px', color: 'var(--accent)', letterSpacing: '-0.01em',
              }}>
                Stage 1
              </span>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 'clamp(24px, 2.4vw, 32px)',
                lineHeight: 1.1, margin: 0, color: 'var(--fg)',
                letterSpacing: '-0.02em',
              }}>
                Decompression & Exploration
              </h3>
            </div>
            <p style={{ fontSize: '16px', lineHeight: 1.65, color: 'oklch(0.22 0.02 60 / 0.8)', margin: 0 }}>
              After the exit, the IPO, the pivot. Cook breakfast in the morning. Take long walks
              without your phone. Travel, eat, make art. Let something obsess you naturally.
              The painting looks ugly for a long time before it doesn&rsquo;t.
            </p>
            <p style={{
              fontSize: '14px', fontWeight: 400, letterSpacing: '0.02em',
              color: 'var(--fg)', margin: 0,
            }}>
              &rarr; <em className="accent">Community</em> is for this.
            </p>
          </div>

          {/* Stage 2 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: '16px' }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 300,
                fontSize: '20px', color: 'var(--accent)', letterSpacing: '-0.01em',
              }}>
                Stage 2
              </span>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 'clamp(24px, 2.4vw, 32px)',
                lineHeight: 1.1, margin: 0, color: 'var(--fg)',
                letterSpacing: '-0.02em',
              }}>
                Incubation & Building
              </h3>
            </div>
            <p style={{ fontSize: '16px', lineHeight: 1.65, color: 'oklch(0.22 0.02 60 / 0.8)', margin: 0 }}>
              The thing you&rsquo;re obsessed with becomes the thing you build. You have a project,
              a question, a thesis. You need time, space, funding, and a tight circle of people
              who get it.
            </p>
            <p style={{
              fontSize: '14px', fontWeight: 400, letterSpacing: '0.02em',
              color: 'var(--fg)', margin: 0,
            }}>
              &rarr; <em className="accent">Residency</em> is for this.
            </p>
          </div>
        </div>
      </section>

      {/* PHOTO BAND — quiet strip between value and calendar. */}
      <section className="photo-band" style={{
        borderTop: '1px solid var(--hairline)',
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
      }}>
        {[
          ['dinner-group.png',       'In Between community members gathered around a dinner table.'],
          ['kitchen-table.jpg',      'Six friends gathered around a coffee table on a sunlit afternoon.'],
          ['cowork-session.png',     'Members collaborating at a coworking session.'],
          ['watercolor.jpg',         'Watercolor sets and hand-painted cards on a table.'],
          ['bookstore-talk.jpg',     'A talk in a candlelit bookstore in Brooklyn.'],
        ].map(([file, alt]) => (
          <img key={file} src={`../../assets/imagery/${file}`} alt={alt}
            style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block' }}
          />
        ))}
      </section>

      {/* WHAT WE'VE ALREADY BUILT */}
      <section className="section-pad events-section" style={{
        borderTop: '1px solid var(--hairline)',
        display: 'grid',
        gridTemplateColumns: 'repeat(12, 1fr)',
        gap: '40px 32px',
        alignItems: 'start',
      }}>
        <div className="events-header" style={{ gridColumn: 'span 4' }}>
          <p className="eyebrow">¶ Events</p>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(32px, 4vw, 56px)',
            lineHeight: 1.0, marginTop: '24px',
            color: 'var(--fg)', letterSpacing: '-0.025em',
          }}>
            What we&rsquo;ve<br />done so far.
          </h2>
        </div>

        <ul className="built-list" style={{
          gridColumn: '5 / span 8',
          minWidth: 0,
          listStyle: 'none', margin: 0, padding: 0,
          borderTop: '1px solid var(--hairline)',
        }}>
          {[
            'Morning writing sessions (Artist’s Way)',
            'Founder meetups',
            'Artist critiques',
            'AI lab visits',
            'Peer masterminds',
            'Researcher-led workshops',
            'Demo nights',
            'Therapy, coaching & reflection',
            'Studio time',
            'Interdisciplinary dinners',
          ].map((item) => (
            <li key={item} style={{
              padding: '20px 0',
              borderBottom: '1px solid var(--hairline)',
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 'clamp(18px, 1.8vw, 24px)',
              color: 'var(--fg)', letterSpacing: '-0.015em', lineHeight: 1.2,
            }}>
              {item}
            </li>
          ))}
        </ul>
      </section>

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

window.Community = Community;