// AirbnbScreen — por que o imóvel administrado pela SBL também fica no Airbnb.
// ────────────────────────────────────────────────────────────────────────────
// Página voltada ao PROPRIETÁRIO, não ao hóspede. Responde à objeção mais
// comum de quem nunca alugou por temporada: "e se estragarem meu apartamento?",
// "e se for um golpe?", "por que eu preciso de uma plataforma se você já aluga
// direto?".
//
// Postura do texto: a SBL aluga de forma independente e isso é dito logo no
// começo. A plataforma entra como canal complementar, não como substituto —
// coerente com a comparação de canais que já existe na HowItWorksScreen.
//
// Cuidado factual mantido aqui de propósito: o AirCover tem duas naturezas
// diferentes. A responsabilidade civil é seguro; a proteção contra danos é um
// programa de ressarcimento do próprio Airbnb, com regras e exclusões. Vender
// "seguro de 3 milhões" sem essa distinção cria proprietário que se sente
// enganado no primeiro sinistro — que é o pior momento possível.
//
// A SBL não tem vínculo oficial com a plataforma, e a página diz isso.
// ────────────────────────────────────────────────────────────────────────────

const _AIRCOVER = [
  {
    icon: 'shield-check',
    titulo: 'Proteção contra danos',
    valor: 'até US$ 3 milhões',
    desc: 'Ressarcimento por danos ao imóvel e aos bens causados por hóspedes, incluindo mobília, eletrodomésticos e itens de valor.',
    natureza: 'programa de ressarcimento do Airbnb',
  },
  {
    icon: 'umbrella',
    titulo: 'Responsabilidade civil',
    valor: 'até US$ 1 milhão',
    desc: 'Cobre o caso de um hóspede se machucar dentro do imóvel ou ter os pertences dele danificados durante a estadia.',
    natureza: 'apólice de seguro contratada pela plataforma',
  },
  {
    icon: 'user-check',
    titulo: 'Verificação de identidade',
    valor: 'em toda reserva',
    desc: 'A plataforma confere a identidade do hóspede antes da reserva e aplica triagem de perfil de risco em estadias curtas.',
    natureza: 'checagem automática da plataforma',
  },
  {
    icon: 'phone-call',
    titulo: 'Linha de segurança 24h',
    valor: 'atendimento direto',
    desc: 'Canal de emergência disponível a qualquer hora, em português, para ocorrências durante a estadia.',
    natureza: 'suporte da plataforma',
  },
];

const _NAO_FAZ = [
  { icon: 'camera', t: 'Fotografar o imóvel', d: 'A qualidade das fotos decide quantas pessoas clicam no seu anúncio. A plataforma não produz nenhuma.' },
  { icon: 'tag', t: 'Precificar a temporada', d: 'Diária fixa o ano inteiro perde dinheiro no Réveillon e fica vazia em maio. O ajuste é trabalho humano.' },
  { icon: 'message-square', t: 'Responder o hóspede', d: 'Tempo de resposta afeta a posição do anúncio na busca. Quem responde é você — ou quem administra.' },
  { icon: 'key-round', t: 'Fazer o check-in', d: 'Receber, entregar chave, orientar sobre o prédio e a cidade. Nada disso é da plataforma.' },
  { icon: 'sparkles', t: 'Limpar entre estadias', d: 'Limpeza e enxoval no padrão a cada saída, com equipe própria e prazo entre uma reserva e outra.' },
  { icon: 'calendar-sync', t: 'Sincronizar calendários', d: 'Anunciar em vários canais sem sincronização profissional gera reserva duplicada e cancelamento.' },
];

function AirbnbScreen({ onNav, seo }) {
  const { Button } = window.SBLImVeisDesignSystem_08a506;
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();

  const wa = 'https://wa.me/558399585248?text=' + encodeURIComponent(
    'Olá! Tenho um imóvel em João Pessoa e gostaria de entender como funciona a administração com anúncio no Airbnb.'
  );

  return (
    <div>
      {/* HERO */}
      <section style={{ background: 'var(--brown-900)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', padding: isMobile ? '52px 20px 46px' : '76px 40px 66px' }}>
          <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 16 }}>
            {t('Para proprietários · Canais de reserva')}
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 31 : 46, lineHeight: 1.08, color: 'var(--cream-50)', margin: '0 0 20px', maxWidth: 780 }}>
            {seo ? seo.h1 : 'Airbnb: proteção e alcance para o seu imóvel em João Pessoa'}
          </h1>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: isMobile ? 17 : 20, lineHeight: 1.55, color: 'var(--rose-100)', margin: 0, maxWidth: 660 }}>
            {seo ? seo.intro : ''}
          </p>
        </div>
      </section>

      {/* AIRCOVER */}
      <section style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '48px 20px 8px' : '72px 40px 12px' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
          <div className="sbl-eyebrow" style={{ marginBottom: 12 }}>{t('AirCover para Anfitriões')}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 38, color: 'var(--text-strong)', margin: '0 0 14px' }}>
            {t('O que está coberto quando a reserva vem da plataforma')}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', margin: 0, lineHeight: 1.65 }}>
            {t('Incluído em toda reserva feita pelo Airbnb, sem custo adicional para o proprietário.')}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 18 }}>
          {_AIRCOVER.map((c) => (
            <div key={c.titulo} style={{
              background: 'var(--surface-card)', border: '1px solid var(--border-subtle)',
              borderRadius: 'var(--radius-xl)', padding: '26px 24px 22px',
              display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-xs)',
            }}>
              <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--rose-100)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rose-700)', marginBottom: 18 }}>
                <i data-lucide={c.icon} style={{ width: 22, height: 22 }}></i>
              </span>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--text-strong)', marginBottom: 4 }}>{t(c.titulo)}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, color: 'var(--rose-700)', marginBottom: 12 }}>{t(c.valor)}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 16px', flex: 1 }}>{t(c.desc)}</p>
              <div style={{ paddingTop: 12, borderTop: '1px solid var(--border-subtle)', fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>
                {t(c.natureza)}
              </div>
            </div>
          ))}
        </div>

        {/* A ressalva que quase ninguém escreve. Está aqui porque um
            proprietário que descobre isso só no primeiro sinistro deixa de
            confiar na administradora — e com razão. */}
        <div style={{ marginTop: 22, background: 'var(--color-bg-alt)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: isMobile ? '18px 20px' : '22px 26px', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
          <span style={{ color: 'var(--color-warning)', flexShrink: 0, marginTop: 2 }}>
            <i data-lucide="info" style={{ width: 20, height: 20 }}></i>
          </span>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.7, color: 'var(--text-body)', margin: 0 }}>
            <strong style={{ color: 'var(--text-strong)' }}>{t('Uma distinção importante:')}</strong>{' '}
            {t('a proteção contra danos não é uma apólice de seguro — é um programa de ressarcimento do próprio Airbnb, com prazos, regras e exclusões definidos por ele. A responsabilidade civil, essa sim, é seguro. Nenhuma das duas substitui o seguro residencial do imóvel, que continua recomendado. Coberturas, valores e condições são definidos pela plataforma e podem mudar.')}
          </p>
        </div>
      </section>

      {/* TEXTO PRINCIPAL — vem de seo/paginas.json, a mesma fonte que gera a
          versão estática lida pelo Google. */}
      {seo && (
        <section style={{ maxWidth: 820, margin: '0 auto', padding: isMobile ? '44px 20px 8px' : '64px 40px 12px' }}>
          {(seo.secoes || []).map((s) => (
            <div key={s.h2} style={{ marginBottom: 42 }}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 25 : 31, lineHeight: 1.2, color: 'var(--text-strong)', margin: '0 0 16px' }}>
                {t(s.h2)}
              </h2>
              {(s.p || []).map((p, i) => (
                <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.75, color: 'var(--text-body)', margin: '0 0 15px' }}>{t(p)}</p>
              ))}
            </div>
          ))}
        </section>
      )}

      {/* O QUE A PLATAFORMA NÃO FAZ — é o argumento de conversão da página. */}
      <section style={{ background: 'var(--color-bg-alt)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '48px 20px' : '72px 40px' }}>
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
            <div className="sbl-eyebrow" style={{ marginBottom: 12 }}>{t('Onde entra a SBL')}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 38, color: 'var(--text-strong)', margin: '0 0 14px' }}>
              {t('Seis coisas que a plataforma não faz por você')}
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', margin: 0, lineHeight: 1.65 }}>
              {t('Estar anunciado não é o mesmo que ter resultado. É essa parte que assumimos.')}
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 16 }}>
            {_NAO_FAZ.map((f) => (
              <div key={f.t} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '22px 24px', display: 'flex', gap: 15 }}>
                <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--brown-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rose-300)', flexShrink: 0 }}>
                  <i data-lucide={f.icon} style={{ width: 19, height: 19 }}></i>
                </span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-strong)', marginBottom: 5 }}>{t(f.t)}</div>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{t(f.d)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      {seo && seo.faq && seo.faq.length > 0 && (
        <section style={{ maxWidth: 820, margin: '0 auto', padding: isMobile ? '48px 20px' : '68px 40px' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 25 : 31, color: 'var(--text-strong)', margin: '0 0 22px' }}>
            {t('Perguntas frequentes')}
          </h2>
          <window.FaqLista itens={seo.faq} />
        </section>
      )}

      {/* CTA */}
      <section style={{ background: 'var(--brown-700)' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: isMobile ? '48px 20px' : '68px 40px', textAlign: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 27 : 36, color: 'var(--cream-50)', margin: '0 0 14px', lineHeight: 1.15 }}>
            {t('Quanto o seu imóvel renderia com essa estrutura?')}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--brown-100)', lineHeight: 1.7, margin: '0 0 28px', maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>
            {t('O simulador dá uma estimativa em trinta segundos, sem pedir nenhum dado seu. Se fizer sentido, a avaliação presencial é gratuita.')}
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="accent" size={isMobile ? 'md' : 'lg'} iconLeft="calculator" onClick={() => onNav('simulador')} full={isMobile}>
              {t('Simular renda do meu imóvel')}
            </Button>
            <a href={wa} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', width: isMobile ? '100%' : 'auto' }}>
              <Button variant="ghost" size={isMobile ? 'md' : 'lg'} style={{ color: 'var(--rose-100)', borderColor: 'var(--brown-500)' }} full={isMobile}>
                {t('Falar no WhatsApp')}
              </Button>
            </a>
          </div>

          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--brown-200)', lineHeight: 1.6, margin: '34px auto 0', maxWidth: 640 }}>
            {t('A SBL Imóveis e Locações administra anúncios de proprietários na plataforma e não possui vínculo comercial, parceria oficial nem representação do Airbnb. Airbnb é marca de seus respectivos titulares. As coberturas e condições citadas são definidas pela plataforma e podem ser alteradas por ela.')}
          </p>
        </div>
      </section>
    </div>
  );
}
window.AirbnbScreen = AirbnbScreen;