// OwnerScreen — "Anuncie seu imóvel": owner capture landing + lead form.
function OwnerScreen() {
  const { Button, Input, Select, Stat, Badge } = window.SBLImVeisDesignSystem_08a506;
  const { isMobile } = window.useResponsive();
  const { t } = window.useLang();
  const steps = [
    { n: '01', icon: 'clipboard-list', t: 'Você cadastra', d: 'Conte sobre o imóvel em 2 minutos pelo formulário ao lado.' },
    { n: '02', icon: 'camera', t: 'Nós produzimos', d: 'Fotos, tour virtual e anúncio profissional por nossa equipe.' },
    { n: '03', icon: 'users', t: 'Divulgamos', d: 'Seu imóvel nos canais da SBL e para nossa base de clientes.' },
    { n: '04', icon: 'key', t: 'Você recebe', d: 'Hóspedes verificados, gestão de reservas e repasse garantido.' },
  ];
  return (
    <div>
      {/* Hero */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--brown-900)' }}>
        <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1600&q=80" alt=""
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.22 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: isMobile ? '48px 20px' : '70px 40px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 460px', gap: isMobile ? 36 : 56, alignItems: 'center' }}>
          <div>
            <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 18 }}>{t('Para proprietários')}</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 34 : 52, color: 'var(--cream-50)', margin: '0 0 18px', lineHeight: 1.08 }}>
              {t('Seu imóvel rendendo mais, sem dor de cabeça')}
            </h1>
            <p style={{ fontFamily: 'var(--font-editorial)', fontSize: 21, fontStyle: 'italic', color: 'var(--rose-100)', lineHeight: 1.5, margin: '0 0 28px', maxWidth: 520 }}>
              {t('A SBL cuida da divulgação, das reservas e dos hóspedes da sua locação por temporada em João Pessoa — você só acompanha os resultados.')}
            </p>
            <div style={{ display: 'flex', gap: 40 }}>
              <Stat value="+R$ 8 mil" label={t('Renda média / mês')} align="left" onDark />
              <Stat value="92%" label={t('Taxa de ocupação')} align="left" onDark />
              <Stat value="24h" label={t('Para publicar')} align="left" onDark />
            </div>
          </div>

          {/* Lead form */}
          <div style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-xl)', padding: 30, boxShadow: 'var(--shadow-xl)' }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--text-strong)', margin: '0 0 6px' }}>{t('Anuncie em 2 minutos')}</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', margin: '0 0 22px' }}>{t('Sem custo para cadastrar. Nossa equipe entra em contato.')}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Input label={t('Nome completo')} icon="user" placeholder={t('Seu nome')} />
              <Input label={t('WhatsApp')} icon="phone" placeholder="(83) 9 0000-0000" />
              <Select label={t('Tipo de imóvel')} icon="home" placeholder={t('Selecione')} options={[t('Apartamento'), t('Casa'), t('Cobertura'), t('Flat')]} />
              <Select label={t('Finalidade')} icon="key" placeholder={t('Selecione')} options={[t('Temporada'), t('Aluguel anual'), t('Venda')]} />
              <Button variant="primary" size="lg" full iconRight="arrow-right">{t('Quero anunciar')}</Button>
            </div>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '60px 20px' : '88px 40px' }}>
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 52px' }}>
          <div className="sbl-eyebrow" style={{ marginBottom: 12 }}>{t('Como funciona')}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, color: 'var(--text-strong)', margin: 0 }}>{t('Quatro passos simples')}</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 24 }}>
          {steps.map((s) => (
            <div key={s.n} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '30px 26px', position: 'relative' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, color: 'var(--rose-200)', position: 'absolute', top: 18, right: 22 }}>{s.n}</span>
              <span style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--brown-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rose-300)', marginBottom: 22 }}>
                <i data-lucide={s.icon} style={{ width: 24, height: 24 }}></i>
              </span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--text-strong)', margin: '0 0 8px' }}>{t(s.t)}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', lineHeight: 1.6, margin: 0 }}>{t(s.d)}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
window.OwnerScreen = OwnerScreen;