/* eslint-disable */
// Team — the "How a kitchen table became a community" page.
// Hero: kitchen-table headline + opening line.
// Body: full origin story.
// Then: two co-founders (linked) + founding members.

const founders = [
  {
    name: 'Sargun Kaur',
    href: 'https://www.linkedin.com/in/sargunkaur/',
    src: '../../assets/team/sargun-kaur.png',
    bio: 'Acquired founder (Byteboard). xGoogle.',
    quote: 'My In Between moment led me to marble carving in Italy, running my first half marathon, biking across New York, and launching a consumer AI app.',
  },
  {
    name: 'Alicia Lau',
    href: 'https://www.linkedin.com/in/alicialau/?skipRedirect=true',
    src: '../../assets/team/alicia-lau.jpg',
    bio: 'Angel investor. xKleiner Perkins.',
    quote: 'My In Between moment was going back to drama school at 30, performing in West End theatre, making horror films, and doing stand-up at 2am.',
  },
];

function Team({ onNavigate }) {
  return (
    <div data-screen-label="03 Team">
      {/* HERO */}
      <section className="page-pad" style={{ paddingTop: '64px', paddingBottom: '80px' }}>
        <p className="eyebrow">03 / Team</p>

        <h1 className="display-xl" style={{
          fontSize: 'clamp(48px, 9vw, 144px)',
          marginTop: '48px',
        }}>
          How a living&nbsp;room<br />
          became a <em className="accent">human research lab</em>.
        </h1>
      </section>

      {/* CO-FOUNDERS */}
      <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">¶ Team</p>
        </div>

        <div style={{ gridColumn: 'span 8', maxWidth: '52rem' }}>
          <div className="founder-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '64px',
          }}>
            {founders.map((f) => (
              <figure key={f.name} style={{ margin: 0 }}>
                <a href={f.href} target="_blank" rel="noopener noreferrer"
                  style={{ display: 'block', cursor: 'pointer' }}
                  onMouseEnter={(e) => { const i = e.currentTarget.querySelector('img'); if (i) i.style.transform = 'scale(1.015)'; }}
                  onMouseLeave={(e) => { const i = e.currentTarget.querySelector('img'); if (i) i.style.transform = 'scale(1)'; }}
                >
                  <div style={{
                    width: '100%',
                    aspectRatio: '1 / 1',
                    overflow: 'hidden',
                    background: 'oklch(0.93 0.018 80)',
                  }}>
                    <img src={f.src} alt={f.name}
                      style={{
                        width: '100%', height: '100%', objectFit: 'cover',
                        objectPosition: 'center top', display: 'block',
                        transition: 'transform 700ms cubic-bezier(0.16,1,0.3,1)',
                      }}
                    />
                  </div>
                </a>
                <figcaption style={{
                  marginTop: '24px',
                  display: 'flex', flexDirection: 'column', gap: '10px',
                }}>
                  <a href={f.href} target="_blank" rel="noopener noreferrer"
                    style={{
                      fontFamily: 'var(--font-display)',
                      fontWeight: 400,
                      fontSize: 'clamp(26px, 2.6vw, 34px)',
                      color: 'var(--fg)',
                      letterSpacing: '-0.015em',
                      lineHeight: 1.1,
                      textDecoration: 'none',
                      display: 'inline-block',
                      width: 'fit-content',
                      transition: 'color 320ms cubic-bezier(0.16,1,0.3,1)',
                    }}
                    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg)'}
                  >
                    {f.name}
                  </a>
                  <span style={{
                    fontFamily: 'var(--font-sans)',
                    fontWeight: 300,
                    fontSize: '15px',
                    color: 'oklch(0.22 0.02 60 / 0.75)',
                    lineHeight: 1.6,
                    display: 'block',
                    minHeight: '3.2em',
                  }}>
                    {f.bio}
                  </span>
                  <p className="display-italic" style={{
                    fontSize: '17px',
                    lineHeight: 1.4,
                    color: 'var(--fg)',
                    margin: '8px 0 0',
                    paddingTop: '16px',
                    borderTop: '1px solid var(--hairline)',
                  }}>
                    &ldquo;{f.quote}&rdquo;
                  </p>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* FOUNDING MEMBERS */}
      <section className="section-pad-sm" 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 early circle</p>
          <p className="display-italic" style={{
            fontSize: '18px', marginTop: '24px', maxWidth: '17rem', lineHeight: 1.25,
          }}>
            The people who showed up early &mdash; and stayed to figure it out together.
          </p>
        </div>

        <div style={{ gridColumn: 'span 8', maxWidth: '44rem', display: 'flex', flexDirection: 'column', gap: '28px' }}>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'clamp(22px, 2.4vw, 30px)',
            lineHeight: 1.2,
            letterSpacing: '-0.015em',
            color: 'var(--fg)',
            margin: 0,
          }}>
            Includes founders and operators{' '}
            <em className="accent">post&#8209;exit / IPO</em>, early engineers from
            OpenAI, Meta, Stripe, Figma, and more.
          </p>
          <p style={{
            fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: '17px', lineHeight: 1.65,
            color: 'oklch(0.22 0.02 60 / 0.8)',
            margin: 0,
          }}>
            Alongside AI researchers, scientists, and artists.
          </p>
        </div>
      </section>

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

window.Team = Team;