// About page — company story, values, and expandable leadership grid.

const ABOUT_TEAM = [
  {
    name: 'Lynn Bruder',
    role: 'Chief Executive Officer',
    image: 'assets/images/about/lynn-bruder.jpg',
    linkedin: 'https://www.linkedin.com/in/lynnbruder/',
    bio: 'Lynn is a strategic business professional with a proven track record in building, managing, and operating successful companies. She collaborates with owners, investors, and operational teams to identify opportunities, streamline processes, and drive robust business initiatives.',
  },
  {
    name: 'Steve Paolucci',
    role: 'Chief Technology Officer',
    image: 'assets/images/about/steve-paolucci.jpg',
    linkedin: 'https://www.linkedin.com/in/steven-paolucci/',
    bio: 'Steve is an accomplished Chief Technology Officer and co-founder with a track record of building healthcare and staffing technology platforms, including onboarding systems, automated scheduling, and AI-integrated interview tools.',
  },
  {
    name: 'Byron Solvason',
    role: 'Chief Financial Officer',
    image: 'assets/images/about/byron-solvason.png',
    linkedin: null,
    bio: 'Byron is the financial compass at Nucleus Healthcare. His focus on transparency, trust, teamwork, and results helps keep the organization agile and positioned for sustainable growth.',
  },
  {
    name: 'Matt Butler',
    role: 'Director, Business Development',
    image: 'assets/images/about/matt-butler.png',
    linkedin: 'https://www.linkedin.com/in/mattclarkbutler/',
    bio: 'Matt excels at identifying growth opportunities, mentoring high-performing teams, and fostering long-term partnerships. He helps align client goals with organizational success.',
  },
];

const ABOUT_VALUES = [
  { title: 'We wow our clients.', body: 'Listening and going above and beyond is our baseline.', tint: 'var(--atom-50)' },
  { title: 'We deliver results.', body: 'Patient lives depend on it.', tint: 'var(--scrubs-50)' },
  { title: 'We are committed.', body: 'Commitment is the spirit of our work.', tint: 'var(--proton-light)' },
  { title: 'We are precise.', body: 'Details matter for quality outcomes.', tint: 'var(--sunset-50)' },
  { title: 'We are change agents.', body: 'Impact starts on day one.', tint: 'var(--spark-50)' },
  { title: 'We are one team.', body: 'Everyone has a voice at our table.', tint: 'var(--atom-50)' },
  { title: 'We are fueled by passion and purpose.', body: 'And have fun while doing it.', tint: 'var(--proton-light)' },
];

const AboutTeamCard = ({ person }) => {
  const [open, setOpen] = React.useState(false);

  return (
    <article style={{
      background: '#fff',
      borderRadius: 12,
      overflow: 'hidden',
      border: '1px solid var(--ink-200)',
      boxShadow: '0 1px 0 var(--ink-200), 0 12px 28px -20px rgba(0,25,75,0.25)',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <div style={{ aspectRatio: '1/1', background: `url('${person.image}') center / cover no-repeat` }} />
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--ink-900)', margin: 0, letterSpacing: '-0.01em' }}>
              {person.name}
            </h3>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-600)', margin: '4px 0 0', lineHeight: 1.4 }}>
              {person.role}
            </p>
          </div>
          {person.linkedin && (
            <a href={person.linkedin} target="_blank" rel="noreferrer" aria-label={`${person.name} on LinkedIn`} style={{
              width: 34,
              height: 34,
              borderRadius: '50%',
              background: 'var(--stability-50)',
              color: '#fff',
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              textDecoration: 'none',
              flexShrink: 0,
            }}>
              in
            </a>
          )}
        </div>
        <p style={{
          fontFamily: 'var(--font-ui)',
          fontSize: 13,
          color: 'var(--ink-700)',
          lineHeight: 1.6,
          margin: 0,
          display: open ? 'block' : '-webkit-box',
          WebkitLineClamp: open ? 'unset' : 3,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}>
          {person.bio}
        </p>
        <button onClick={() => setOpen(o => !o)} style={{
          marginTop: 'auto',
          alignSelf: 'flex-start',
          background: 'transparent',
          border: 0,
          color: 'var(--proton-deep)',
          padding: 0,
          cursor: 'pointer',
          fontFamily: 'var(--font-sans)',
          fontWeight: 700,
          fontSize: 13,
        }}>
          {open ? 'Show less' : `Learn more about ${person.name.split(' ')[0]}`}
        </button>
      </div>
    </article>
  );
};

const AboutPage = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const heroPad = isMobile ? '100px 20px 44px' : '150px 60px 64px';
  const twoCol = isMobile ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1.1fr)';
  const teamCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';
  const valueCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';

  return (
    <>
      <section style={{ background: 'var(--warm-band)', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: heroPad, display: 'grid', gridTemplateColumns: twoCol, gap: isMobile ? 32 : 48, alignItems: 'center' }}>
          <div style={{ textAlign: isMobile ? 'center' : 'left' }}>
            <Eyebrow color="var(--accent-warm-deep)">About Nucleus</Eyebrow>
            <h1 style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: isMobile ? 32 : 56,
              letterSpacing: '-0.02em',
              color: 'var(--ink-900)',
              margin: '14px 0 18px',
              lineHeight: 1.15,
              textWrap: 'balance',
            }}>
              Empowering the people who power healthcare.
            </h1>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 15 : 18, color: 'var(--ink-700)', lineHeight: 1.65, margin: 0 }}>
              Nucleus Healthcare brings white glove service and modern workforce technology together for healthcare and life sciences organizations.
            </p>
          </div>
          <div style={{
            minHeight: isMobile ? 220 : 360,
            borderRadius: 12,
            background: "url('assets/images/about/about-hero.jpg') center / cover no-repeat",
            boxShadow: '0 20px 48px -32px rgba(0,25,75,0.45)',
          }} />
        </div>
      </section>

      <section style={{ background: '#fff', padding: isMobile ? '48px 20px' : '72px 80px' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 18 }}>
          {[
            ['Mission', 'Empower the people who power healthcare.'],
            ['Vision', 'Redefine the way healthcare does business.'],
          ].map(([title, body]) => (
            <div key={title} style={{ background: 'var(--cream)', borderRadius: 12, padding: isMobile ? 24 : 32, border: '1px solid var(--ink-200)' }}>
              <Eyebrow color="var(--proton-deep)">{title}</Eyebrow>
              <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 24 : 32, lineHeight: 1.2, color: 'var(--ink-900)', margin: '12px 0 0', textWrap: 'balance' }}>
                {body}
              </p>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--stability-50)', color: '#fff', padding: isMobile ? '56px 20px' : '80px 80px' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.35fr 0.65fr', gap: isMobile ? 24 : 52 }}>
          <div>
            <Eyebrow color="var(--sunset-50)">Who we are</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 42, margin: '14px 0 0', lineHeight: 1.15, letterSpacing: '-0.02em' }}>
              Trusted workforce partner. Built for healthcare.
            </h2>
          </div>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 15 : 17, lineHeight: 1.75, color: 'rgba(255,255,255,0.88)', display: 'flex', flexDirection: 'column', gap: 18 }}>
            <p style={{ margin: 0 }}>Since 2017, Nucleus Healthcare has been empowering the healthcare workforce with advanced human capital management solutions. As a WBENC-certified woman-owned business, Nucleus is committed to providing exceptional experiences for candidates, partners, and team members while supporting women in healthcare.</p>
            <p style={{ margin: 0 }}>With over 10,000 successful healthcare and life sciences placements, Nucleus is a trusted partner for permanent, contract-to-perm, and contract staffing solutions across all levels and roles.</p>
            <p style={{ margin: 0 }}>Through education, training, and career pathing, Nucleus is helping develop the next generation of workers for healthcare, behavioral health, healthcare for education, and life sciences.</p>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--cream)', padding: isMobile ? '56px 20px' : '84px 80px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: isMobile ? 32 : 44 }}>
            <Eyebrow color="var(--accent-warm-deep)">Meet our leadership team</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 42, color: 'var(--ink-900)', margin: '14px auto 0', lineHeight: 1.2, letterSpacing: '-0.02em', maxWidth: 760 }}>
              Operators, builders, and healthcare workforce experts.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: teamCols, gap: 20 }}>
            {ABOUT_TEAM.map(person => <AboutTeamCard key={person.name} person={person} />)}
          </div>
        </div>
      </section>

      <section style={{ background: '#fff', padding: isMobile ? '56px 20px 72px' : '84px 80px 100px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: isMobile ? 30 : 42 }}>
            <Eyebrow color="var(--proton-deep)">The values that guide us</Eyebrow>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: valueCols, gap: 16 }}>
            {ABOUT_VALUES.map(value => (
              <div key={value.title} style={{ background: '#fff', border: '1px solid var(--ink-200)', borderRadius: 12, padding: 22, boxShadow: '0 8px 24px -20px rgba(0,25,75,0.2)' }}>
                <div style={{ width: 12, height: 12, borderRadius: '50%', background: value.tint, marginBottom: 16 }} />
                <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 17, color: 'var(--ink-900)', margin: '0 0 8px', lineHeight: 1.3 }}>
                  {value.title}
                </h3>
                <p style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.6, margin: 0 }}>
                  {value.body}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

window.AboutPage = AboutPage;