// Employers page - adapted from the Nucleus Healthcare employers content.

const EMPLOYER_PARTNERS = [
  'Hospitals & Healthcare Systems',
  'Behavioral Health',
  'Immigration Law Firms',
  'Long-term Care',
  'Laboratories',
  'International Partners',
];

const EMPLOYER_SERVICES = [
  {
    title: 'Hiring at scale',
    kicker: 'Critical and clinical roles',
    body: 'We hire for critical healthcare positions quickly through a high-tech, high-touch approach that keeps the experience personal while delivering large outcomes.',
    tint: 'var(--atom-50)',
  },
  {
    title: 'International nurses',
    kicker: 'Global RN pathways',
    body: 'Build a dependable nurse pipeline with qualified international RNs who are supported through credentialing, licensing, immigration, and relocation.',
    tint: 'var(--scrubs-50)',
  },
  {
    title: 'Onboarding excellence',
    kicker: 'Faster speed-to-lead',
    body: 'Our streamlined method helps reduce hiring and onboarding time for new talent and hiring managers, so you can move when the right person is ready.',
    tint: 'var(--sunset-50)',
  },
  {
    title: 'Culture & retention',
    kicker: 'Mission-fit talent',
    body: 'We engage nurses, allied health, and healthcare operations professionals who align with your mission, values, and long-term workforce goals.',
    tint: 'var(--spark-50)',
  },
];

const EMPLOYER_TESTIMONIALS = [
  {
    quote: 'The Nucleus team has been a wonderful and positive impact on my department. I have onboarded several amazing employees in a very short amount of time through this company.',
    by: 'Hiring Manager',
    org: 'Supervisor, Pre-Analytical Laboratory',
  },
  {
    quote: 'The Nucleus team escalates issues to our senior leaders quickly, so we can fix them quickly and efficiently. We really appreciate that.',
    by: 'Client Leadership',
    org: 'Healthcare partner',
  },
  {
    quote: 'My one word to describe working with Nucleus Healthcare is exceptional.',
    by: 'Client Leadership',
    org: 'Healthcare partner',
  },
  {
    quote: 'They are proactive individuals who seamlessly function as an extension of one\'s team.',
    by: 'Senior Director',
    org: 'Recruitment partner',
  },
];

const EMPLOYER_IMAGES = [
  'assets/images/employers/employer-01.png',
  'assets/images/employers/employer-02.png',
  'assets/images/employers/employer-03.png',
  'assets/images/employers/employer-04.png',
  'assets/images/employers/employer-05.png',
  'assets/images/employers/employer-06.png',
];

const EmployersImageMosaic = ({ isMobile }) => (
  <div style={{
    display: 'grid',
    gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
    columnGap: isMobile ? 10 : 14,
    rowGap: isMobile ? 12 : 20,
  }}>
    {EMPLOYER_IMAGES.map((image, index) => (
      <div key={image} style={{
        height: isMobile ? 150 : 220,
        borderRadius: 12,
        overflow: 'hidden',
        background: 'var(--cream)',
        boxShadow: '0 16px 34px -28px rgba(0,25,75,0.5)',
      }}>
        <img
          src={image}
          alt=""
          aria-hidden="true"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
            display: 'block',
            transform: 'scale(1.62)',
          }}
        />
      </div>
    ))}
  </div>
);

const EmployerServiceCard = ({ service }) => (
  <article style={{
    background: '#fff',
    border: '1px solid var(--ink-200)',
    borderRadius: 12,
    padding: 24,
    minHeight: 244,
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    boxShadow: '0 10px 26px -22px rgba(0,25,75,0.24)',
  }}>
    <div style={{ width: 44, height: 6, borderRadius: 999, background: service.tint }} />
    <p style={{
      fontFamily: 'var(--font-ui)',
      fontSize: 11,
      letterSpacing: '0.1em',
      textTransform: 'uppercase',
      color: 'var(--accent-warm-deep)',
      fontWeight: 700,
      margin: 0,
    }}>
      {service.kicker}
    </p>
    <h3 style={{
      fontFamily: 'var(--font-display)',
      fontWeight: 700,
      fontSize: 24,
      color: 'var(--ink-900)',
      margin: 0,
      lineHeight: 1.18,
      letterSpacing: '-0.01em',
    }}>
      {service.title}
    </h3>
    <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.65, margin: 0 }}>
      {service.body}
    </p>
  </article>
);

const EmployerTestimonialCard = ({ item }) => (
  <article style={{
    background: '#fff',
    border: '1px solid rgba(255,255,255,0.18)',
    borderRadius: 12,
    padding: 24,
    minHeight: 230,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>
    <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15, color: 'var(--ink-800)', lineHeight: 1.65, margin: 0 }}>
      "{item.quote}"
    </p>
    <div style={{ marginTop: 20 }}>
      <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 14, color: 'var(--ink-900)', margin: 0 }}>
        {item.by}
      </p>
      <p style={{ fontFamily: 'var(--font-ui)', fontSize: 12, color: 'var(--ink-600)', margin: '4px 0 0' }}>
        {item.org}
      </p>
    </div>
  </article>
);

const EmployersPage = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const heroPad = isMobile ? '100px 20px 46px' : '150px 60px 72px';
  const heroGrid = isMobile ? '1fr' : 'minmax(0, 0.88fr) minmax(0, 1.12fr)';
  const partnerCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';
  const serviceCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';
  const testimonialCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';

  return (
    <>
      <section style={{ background: 'var(--warm-band)', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1220, margin: '0 auto', padding: heroPad, display: 'grid', gridTemplateColumns: heroGrid, gap: isMobile ? 34 : 50, alignItems: 'center' }}>
          <div style={{ textAlign: isMobile ? 'center' : 'left' }}>
            <Eyebrow color="var(--accent-warm-deep)">For employers</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.12,
              textWrap: 'balance',
            }}>
              Your trusted healthcare workforce partner.
            </h1>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 15 : 18, color: 'var(--ink-700)', lineHeight: 1.65, margin: 0, maxWidth: 620 }}>
              Nucleus delivers permanent, contract-to-perm, and contract staffing solutions for healthcare teams that need great people and a partner who can move quickly.
            </p>
            <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 12, marginTop: 28, justifyContent: isMobile ? 'center' : 'flex-start' }}>
              <a href="mailto:sales@nucleushealthcare.com" style={{
                background: 'var(--cta-primary-bg)',
                color: 'var(--cta-primary-fg)',
                padding: '14px 26px',
                borderRadius: 1000,
                fontFamily: 'var(--font-sans)',
                fontWeight: 700,
                fontSize: 15,
                textDecoration: 'none',
                textAlign: 'center',
              }}>
                Email our team
              </a>
              <a href="#employer-services" style={{
                background: '#fff',
                color: 'var(--stability-50)',
                padding: '14px 26px',
                borderRadius: 1000,
                border: '1px solid var(--ink-200)',
                fontFamily: 'var(--font-sans)',
                fontWeight: 700,
                fontSize: 15,
                textDecoration: 'none',
                textAlign: 'center',
              }}>
                See solutions
              </a>
            </div>
          </div>
          <div>
            <div style={{
              minHeight: isMobile ? 210 : 300,
              borderRadius: 12,
              background: "url('assets/images/employers/team1.png') center / cover no-repeat",
              boxShadow: '0 22px 48px -34px rgba(0,25,75,0.5)',
              marginBottom: isMobile ? 12 : 16,
            }} />
            <EmployersImageMosaic isMobile={isMobile} />
          </div>
        </div>
      </section>

      <section style={{ background: '#fff', padding: isMobile ? '48px 20px' : '72px 80px' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 28 }}>
            <Eyebrow color="var(--proton-deep)">We partner with</Eyebrow>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: partnerCols, gap: 14 }}>
            {EMPLOYER_PARTNERS.map((partner) => (
              <div key={partner} style={{
                border: '1px solid var(--ink-200)',
                borderRadius: 12,
                padding: '18px 20px',
                background: 'var(--cream)',
                fontFamily: 'var(--font-sans)',
                fontWeight: 700,
                fontSize: 16,
                color: 'var(--ink-900)',
                textAlign: 'center',
              }}>
                {partner}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--stability-50)', color: '#fff', padding: isMobile ? '50px 20px' : '68px 80px' }}>
        <div style={{ maxWidth: 1220, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.62fr 1.38fr', gap: isMobile ? 28 : 44, alignItems: 'center' }}>
          <div>
            <Eyebrow color="var(--sunset-50)">Real people. Real results.</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 42, margin: '14px 0 0', lineHeight: 1.15, letterSpacing: '-0.02em' }}>
              Experts backed by proven results.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.92fr 1.08fr 1.18fr', gap: 18 }}>
            {[
              ['10,000+', 'hires in 4 years'],
              ['Permanent', 'contract-to-perm and contract staffing'],
              ['White glove', 'service with modern recruiting technology'],
            ].map(([stat, label]) => (
              <div key={stat} style={{ borderLeft: '2px solid var(--sunset-50)', paddingLeft: 18 }}>
                <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 38, margin: 0, letterSpacing: '-0.02em', whiteSpace: isMobile ? 'normal' : 'nowrap' }}>{stat}</p>
                <p style={{ fontFamily: 'var(--font-ui)', fontSize: 13, lineHeight: 1.5, margin: '6px 0 0', color: 'rgba(255,255,255,0.82)' }}>{label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="employer-services" style={{ background: 'var(--cream)', padding: isMobile ? '56px 20px' : '84px 80px' }}>
        <div style={{ maxWidth: 1220, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto 36px' }}>
            <Eyebrow color="var(--accent-warm-deep)">Healthcare recruiting and staffing</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 42, color: 'var(--ink-900)', margin: '14px 0 0', lineHeight: 1.18, letterSpacing: '-0.02em', textWrap: 'balance' }}>
              Built for hiring managers who need momentum.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: serviceCols, gap: 18 }}>
            {EMPLOYER_SERVICES.map((service) => <EmployerServiceCard key={service.title} service={service} />)}
          </div>
        </div>
      </section>

      <section style={{ background: '#fff', padding: isMobile ? '56px 20px' : '84px 80px' }}>
        <div style={{ maxWidth: 1220, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.42fr 0.58fr', gap: isMobile ? 28 : 44, alignItems: 'start', marginBottom: 28 }}>
            <div>
              <Eyebrow color="var(--proton-deep)">Client feedback</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 42, color: 'var(--ink-900)', margin: '14px 0 0', lineHeight: 1.18, letterSpacing: '-0.02em' }}>
                What clients and hiring managers are saying.
              </h2>
            </div>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 15 : 17, color: 'var(--ink-700)', lineHeight: 1.7, margin: 0 }}>
              Nucleus functions as an extension of your team, staying responsive, organized, and focused on the people who will thrive in your organization.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: testimonialCols, gap: 16 }}>
            {EMPLOYER_TESTIMONIALS.map((item) => <EmployerTestimonialCard key={item.quote} item={item} />)}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--warm-band)', padding: isMobile ? '54px 20px 70px' : '76px 80px 92px', textAlign: 'center' }}>
        <div style={{ maxWidth: 780, margin: '0 auto' }}>
          <Eyebrow color="var(--accent-warm-deep)">Partner with Nucleus</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 42, color: 'var(--ink-900)', margin: '14px 0 16px', lineHeight: 1.18, letterSpacing: '-0.02em', textWrap: 'balance' }}>
            Hit your healthcare staffing goals with a partner built for speed and fit.
          </h2>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 15 : 17, color: 'var(--ink-700)', lineHeight: 1.65, margin: '0 auto 28px', maxWidth: 640 }}>
            Tell us what roles you need to fill and where hiring pressure is highest. We will help you map the right path forward.
          </p>
          <a href="mailto:sales@nucleushealthcare.com" style={{
            display: 'inline-flex',
            justifyContent: 'center',
            background: 'var(--cta-primary-bg)',
            color: 'var(--cta-primary-fg)',
            padding: '14px 28px',
            borderRadius: 1000,
            fontFamily: 'var(--font-sans)',
            fontWeight: 700,
            fontSize: 15,
            textDecoration: 'none',
            width: isMobile ? '100%' : 'auto',
          }}>
            Contact sales@nucleushealthcare.com
          </a>
        </div>
      </section>
    </>
  );
};

window.EmployersPage = EmployersPage;