/**
 * TrendApp — Welcome (tela de entrada de marca antes do Login)
 *
 * Foto full-bleed de textura orgânica (células vegetais) + overlay dark
 * verde para legibilidade. Alinha-se ao universo TrendScience.
 */

function WelcomeScreen() {
  const { go } = useRouter();

  return (
    <div className="page" style={{ background: '#040805' }}>
      {/* Foto de fundo */}
      <div
        data-slot="welcome-hero-placeholder"
        aria-hidden="true"
        style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url(/static/trendapp/assets/welcome-hero.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center center',
          backgroundRepeat: 'no-repeat',
        }}
      />

      {/* Overlay dark verde-preto */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background:
          'linear-gradient(180deg,' +
          ' rgba(8, 20, 12, 0.30) 0%,' +
          ' rgba(8, 20, 12, 0.32) 22%,' +
          ' rgba(6, 14, 9, 0.72) 55%,' +
          ' rgba(4, 10, 6, 0.94) 82%,' +
          ' rgba(4, 8, 5, 0.98) 100%)',
      }} />

      {/* Vinheta lateral cinematográfica */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.45) 100%)',
        pointerEvents: 'none',
      }} />

      <div
        style={{
          position: 'relative', zIndex: 1,
          flex: 1, display: 'flex', flexDirection: 'column',
          padding: 'calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom))',
          color: '#F5F7F7',
        }}
      >
        <div style={{ color: '#F5F7F7' }}>
          <TrendAppLogo height={26} />
        </div>

        <div style={{ flex: 1 }} />

        <div>
          <h1 style={{
            fontSize: 34, fontWeight: 300,
            letterSpacing: '-0.03em', lineHeight: 1.15,
            color: '#F5F7F7', maxWidth: 340, marginBottom: 28,
          }}>
            Olá, seja bem-vindo<br />
            <span style={{ fontWeight: 400 }}>ao cockpit do representante.</span>
          </h1>

          <button
            onClick={() => go('/login')}
            style={{
              width: '100%',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '18px 26px',
              borderRadius: 999,
              background: '#F5F7F7',
              color: '#0A0A0A',
              fontSize: 15, fontWeight: 500,
              letterSpacing: '-0.01em',
              minHeight: 58,
              boxShadow: '0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)',
              transition: 'transform 200ms cubic-bezier(.22,.61,.36,1)',
            }}
            onMouseDown={e => { e.currentTarget.style.transform = 'scale(0.985)'; }}
            onMouseUp={e => { e.currentTarget.style.transform = 'scale(1)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
          >
            <span>Acessar</span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 32, height: 32, borderRadius: 999,
              background: '#0A0A0A', color: '#F5F7F7',
            }}>
              <Icon name="arrow-right" size={15} strokeWidth={1.75} />
            </span>
          </button>

          <div style={{
            textAlign: 'center', marginTop: 18,
            fontSize: 11.5, fontWeight: 400, letterSpacing: '0.02em',
            color: 'rgba(245,247,247,0.45)',
          }}>
            Área exclusiva para representantes comerciais
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WelcomeScreen });