// AnnounceScreen — Seleção do tipo de anúncio.
function AnnounceScreen({ onSelect }) {
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();
  const options = [
    {
      id: 'sale',
      icon: 'trending-up',
      title: 'Gostaria de vender meu imóvel',
      desc: 'Avaliação gratuita, divulgação qualificada e gestão completa da negociação até a assinatura.',
    },
    {
      id: 'rent',
      icon: 'key',
      title: 'Gostaria de alugar meu imóvel',
      desc: 'Locatários verificados, contrato seguro e administração da locação anual sem preocupação.',
    },
    {
      id: 'season',
      icon: 'sun',
      title: 'Gostaria de rentabilizar meu imóvel com locação de temporada',
      desc: 'Maximize a renda do seu imóvel com gestão completa de reservas de temporada em João Pessoa.',
    },
  ];

  return (
    <section style={{ minHeight: '82vh', background: 'var(--color-bg)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: isMobile ? '60px 20px' : '80px 40px' }}>
      <div style={{ textAlign: 'center', marginBottom: 52 }}>
        <div className="sbl-eyebrow" style={{ marginBottom: 16 }}>{t('Anuncie com a SBL')}</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 30 : 44, color: 'var(--text-strong)', margin: '0 0 18px', lineHeight: 1.1 }}>
          {t('O que você gostaria de anunciar?')}
        </h1>
        <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 20, color: 'var(--text-muted)', margin: 0, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
          {t('Escolha a opção que melhor descreve o seu objetivo e nossa equipe cuida do resto.')}
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 24, maxWidth: 1020, width: '100%' }}>
        {options.map((opt) => (
          <div
            key={opt.id}
            onClick={() => onSelect && onSelect(opt.id)}
            style={{
              background: 'var(--surface-card)',
              border: '1px solid var(--border-subtle)',
              borderRadius: 'var(--radius-xl)',
              padding: '40px 32px',
              cursor: 'pointer',
              transition: 'box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.boxShadow = 'var(--shadow-lg)';
              e.currentTarget.style.transform = 'translateY(-4px)';
              e.currentTarget.style.borderColor = 'var(--border-accent)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.boxShadow = '';
              e.currentTarget.style.transform = '';
              e.currentTarget.style.borderColor = 'var(--border-subtle)';
            }}
          >
            <div style={{ width: 54, height: 54, borderRadius: 'var(--radius-lg)', background: 'var(--surface-accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
              <i data-lucide={opt.icon} style={{ width: 26, height: 26, color: 'var(--color-primary)' }}></i>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 21, color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 1.25 }}>
              {t(opt.title)}
            </h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', margin: '0 0 30px', lineHeight: 1.65 }}>
              {t(opt.desc)}
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 600, color: 'var(--color-primary)' }}>
              {t('Começar')} <i data-lucide="arrow-right" style={{ width: 15, height: 15 }}></i>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.AnnounceScreen = AnnounceScreen;