// WorkWithUsScreen — Página Trabalhe Conosco da SBL.
function WorkWithUsScreen({ onNav }) {
  const { Button } = window.SBLImVeisDesignSystem_08a506;
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();

  const WA_BASE = 'https://wa.me/558399585248?text=';

  const opportunities = [
    {
      icon: 'sparkles',
      title: 'Diaristas para imóveis de temporada',
      desc: 'Estamos sempre em busca de diaristas comprometidas para realizar limpezas nos imóveis que administramos. Se você tem experiência com limpeza residencial e boa disponibilidade de horário, queremos conhecer você.',
      cta: 'Conversar pelo WhatsApp',
      href: WA_BASE + encodeURIComponent('Olá, vim pelo site da SBL e tenho interesse na vaga de diarista para limpeza de imóveis de temporada. Gostaria de contar mais sobre minha experiência e disponibilidade.'),
      accent: true,
    },
    {
      icon: 'handshake',
      title: 'Corretor parceiro',
      desc: 'Você é corretor e quer ampliar seu portfólio? Tem um imóvel para anunciar? Ou possui um cliente que pode ter interesse em algum dos nossos imóveis? Vamos construir uma parceria que gera resultado para os dois lados.',
      cta: 'Propor parceria',
      href: WA_BASE + encodeURIComponent('Olá, vim pelo site da SBL e gostaria de conversar sobre uma parceria como corretor.'),
      accent: false,
    },
    {
      icon: 'wrench',
      title: 'Prestadores de serviço',
      desc: 'Precisamos sempre de profissionais de confiança: pedreiros, maridos de aluguel, eletricistas, encanadores, pintores e outros. Se você trabalha com qualidade e seriedade, venha fazer parte da nossa rede de parceiros.',
      cta: 'Entrar em contato',
      href: WA_BASE + encodeURIComponent('Olá, vim pelo site da SBL e tenho interesse em ser um prestador de serviços parceiro.'),
      accent: false,
    },
  ];

  return (
    <div style={{ background: 'var(--color-bg)' }}>

      {/* HERO */}
      <section style={{ background: 'var(--brown-900)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-brown)', opacity: 0.5 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: isMobile ? '64px 20px 56px' : '88px 40px 80px' }}>
          <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 18 }}>{t('Oportunidades')}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 34 : 54, color: 'var(--cream-50)', margin: '0 0 20px', lineHeight: 1.07, maxWidth: 680 }}>
            {t('Trabalhe conosco')}
          </h1>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: isMobile ? 17 : 21, color: 'var(--rose-100)', lineHeight: 1.55, margin: '0 0 28px', maxWidth: 580 }}>
            {t('Deseja fazer parte da equipe SBL? Chame pelo WhatsApp ou envie seu currículo diretamente para o nosso e-mail.')}
          </p>
          <a
            href="mailto:sibelle@sblimoveis.com"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)',
              borderRadius: 'var(--radius-pill)', padding: '12px 22px',
              fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 600,
              color: 'var(--cream-50)', textDecoration: 'none',
              backdropFilter: 'blur(8px)',
              transition: 'background 0.2s ease',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.18)'}
            onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
          >
            <i data-lucide="mail" style={{ width: 17, height: 17 }}></i>
            sibelle@sblimoveis.com
          </a>
        </div>
      </section>

      {/* OPORTUNIDADES */}
      <section style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '60px 20px 72px' : '88px 40px 96px' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 56 }}>
          <div className="sbl-eyebrow" style={{ marginBottom: 14 }}>{t('Vagas e parcerias')}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 30 : 40, color: 'var(--text-strong)', margin: '0 0 14px' }}>
            {t('Como você pode fazer parte')}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', margin: '0 auto', maxWidth: 520, lineHeight: 1.6 }}>
            {t('Escolha abaixo o perfil que mais combina com você e entre em contato diretamente.')}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr' : 'repeat(3, 1fr)', gap: 26 }}>
          {opportunities.map((op) => (
            <div
              key={op.title}
              style={{
                background: op.accent ? 'var(--brown-800)' : 'var(--surface-card)',
                border: op.accent ? '1px solid var(--brown-600)' : '1px solid var(--border-subtle)',
                borderRadius: 'var(--radius-xl)',
                padding: isMobile ? '32px 24px' : '40px 32px',
                display: 'flex', flexDirection: 'column', gap: 0,
              }}
            >
              <div style={{
                width: 56, height: 56, borderRadius: 'var(--radius-lg)',
                background: op.accent ? 'rgba(201,161,137,0.2)' : 'var(--surface-accent-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
              }}>
                <i data-lucide={op.icon} style={{ width: 28, height: 28, color: op.accent ? 'var(--rose-300)' : 'var(--color-primary)' }}></i>
              </div>

              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
                color: op.accent ? 'var(--cream-50)' : 'var(--text-strong)',
                margin: '0 0 14px', lineHeight: 1.25,
              }}>
                {t(op.title)}
              </h3>

              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7,
                color: op.accent ? 'var(--brown-100)' : 'var(--text-body)',
                margin: '0 0 32px', flex: 1,
              }}>
                {t(op.desc)}
              </p>

              <a
                href={op.href}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: 'none' }}
              >
                <Button
                  variant={op.accent ? 'accent' : 'outline'}
                  size="md"
                  iconLeft="message-circle"
                  full
                >
                  {t(op.cta)}
                </Button>
              </a>
            </div>
          ))}
        </div>
      </section>

      {/* CTA GERAL */}
      <section style={{ background: 'var(--color-bg-alt)', padding: isMobile ? '56px 20px' : '72px 40px', textAlign: 'center' }}>
        <div style={{ maxWidth: 560, margin: '0 auto' }}>
          <div className="sbl-eyebrow" style={{ marginBottom: 14 }}>{t('Outra oportunidade?')}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 26 : 34, color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 1.2 }}>
            {t('Não encontrou o que procura?')}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-body)', lineHeight: 1.7, margin: '0 0 30px' }}>
            {t('Se você tem um perfil diferente e acredita que pode somar à equipe SBL, entre em contato de qualquer forma. Estamos abertos a conversar.')}
          </p>
          <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 12, justifyContent: 'center', alignItems: 'center' }}>
            <a
              href={WA_BASE + encodeURIComponent('Olá, vim pelo site da SBL e gostaria de conversar sobre uma oportunidade de trabalho ou parceria.')}
              target="_blank"
              rel="noopener noreferrer"
              style={{ textDecoration: 'none', width: isMobile ? '100%' : 'auto' }}
            >
              <Button variant="primary" size="lg" iconLeft="message-circle" full={isMobile}>{t('Falar pelo WhatsApp')}</Button>
            </a>
            <a href="mailto:sibelle@sblimoveis.com" style={{ textDecoration: 'none', width: isMobile ? '100%' : 'auto' }}>
              <Button variant="outline" size="lg" iconLeft="mail" full={isMobile}>{t('Enviar currículo por e-mail')}</Button>
            </a>
          </div>
        </div>
      </section>

    </div>
  );
}
window.WorkWithUsScreen = WorkWithUsScreen;