// ConteudoScreen — tela genérica para páginas de conteúdo editorial.
// ────────────────────────────────────────────────────────────────────────────
// Lê a página inteira de seo/paginas.json (h1, intro, seções, FAQ e links
// internos) e a renderiza com o design system. Assim, criar uma página nova de
// SEO passa a ser só acrescentar um objeto no JSON e rodar o gerador — sem
// escrever um componente novo a cada vez.
//
// Usada hoje por /onde-ficar-em-joao-pessoa/ e disponível para as próximas
// páginas de conteúdo do funil de temporada.
// ────────────────────────────────────────────────────────────────────────────

// Acordeão de perguntas frequentes. Além de organizar a leitura, é o bloco que
// o Google costuma usar para montar resultado em destaque em buscas locais —
// por isso a resposta fica sempre no HTML, mesmo com o item fechado.
function FaqLista({ itens }) {
  const { t } = window.useLang();
  const [aberto, setAberto] = React.useState(0);
  if (!itens || itens.length === 0) return null;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {itens.map((item, i) => {
        const on = aberto === i;
        return (
          <div key={item.q} style={{
            border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)',
            background: 'var(--surface-card)', overflow: 'hidden',
            borderColor: on ? 'var(--border-accent)' : 'var(--border-subtle)',
            transition: 'border-color var(--dur-base) var(--ease-out)',
          }}>
            <button
              onClick={() => setAberto(on ? -1 : i)}
              aria-expanded={on}
              style={{
                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 16, padding: '20px 24px', background: 'none', border: 'none', cursor: 'pointer',
                textAlign: 'left', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17.5,
                color: 'var(--text-strong)', lineHeight: 1.35,
              }}
            >
              <span>{t(item.q)}</span>
              <span style={{ flexShrink: 0, display: 'flex', color: 'var(--brown-500)', transition: 'transform 0.2s', transform: on ? 'rotate(180deg)' : 'none' }}>
                <i data-lucide="chevron-down" style={{ width: 20, height: 20 }}></i>
              </span>
            </button>
            <div style={{ display: on ? 'block' : 'none', padding: '0 24px 22px' }}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.7, color: 'var(--text-body)', margin: 0 }}>
                {t(item.r)}
              </p>
            </div>
          </div>
        );
      })}
    </div>
  );
}
window.FaqLista = FaqLista;

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

  if (!seo) return null;
  const bairros = (window.SBLRotas && window.SBLRotas.bairros) || [];

  return (
    <div>
      {/* Cabeçalho editorial */}
      <section style={{ background: 'var(--brown-900)', position: 'relative' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', padding: isMobile ? '54px 20px 48px' : '76px 40px 68px' }}>
          <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 16 }}>
            {t('Guia SBL · João Pessoa')}
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 46, lineHeight: 1.08, color: 'var(--cream-50)', margin: '0 0 20px' }}>
            {t(seo.h1)}
          </h1>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: isMobile ? 17 : 21, lineHeight: 1.55, color: 'var(--rose-100)', margin: 0 }}>
            {t(seo.intro)}
          </p>
        </div>
      </section>

      {/* Corpo */}
      <section style={{ maxWidth: 820, margin: '0 auto', padding: isMobile ? '48px 20px' : '68px 40px' }}>
        {(seo.secoes || []).map((s) => (
          <div key={s.h2} style={{ marginBottom: 44 }}>
            <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((texto, i) => (
              <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.75, color: 'var(--text-body)', margin: '0 0 16px' }}>
                {t(texto)}
              </p>
            ))}
          </div>
        ))}

        {/* Atalhos por bairro — cada um leva a uma página própria, que é o que
            dá ao Google um alvo específico para "temporada em {bairro}". */}
        {bairros.length > 0 && (
          <div style={{ marginBottom: 48 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 25 : 31, color: 'var(--text-strong)', margin: '0 0 20px' }}>
              {t('Veja os imóveis de cada bairro')}
            </h2>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 14 }}>
              {bairros.map((b) => (
                <a
                  key={b.slug}
                  href={`/temporada/${b.slug}/`}
                  style={{
                    display: 'block', padding: '18px 20px', borderRadius: 'var(--radius-lg)',
                    border: '1px solid var(--border-subtle)', background: 'var(--surface-card)',
                    textDecoration: 'none', transition: 'border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--border-accent)'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.boxShadow = 'none'; }}
                >
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--text-strong)', marginBottom: 5 }}>
                    {b.nome}
                  </div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>
                    {t(b.perfil)}
                  </div>
                </a>
              ))}
            </div>
          </div>
        )}

        {seo.faq && seo.faq.length > 0 && (
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 25 : 31, color: 'var(--text-strong)', margin: '0 0 22px' }}>
              {t('Perguntas frequentes')}
            </h2>
            <FaqLista itens={seo.faq} />
          </div>
        )}
      </section>

      {/* Chamada final */}
      <section style={{ background: 'var(--brown-700)' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', padding: isMobile ? '48px 20px' : '64px 40px', textAlign: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 26 : 34, color: 'var(--cream-50)', margin: '0 0 14px', lineHeight: 1.15 }}>
            {t('Pronto para escolher o seu imóvel?')}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--brown-100)', lineHeight: 1.65, margin: '0 0 26px' }}>
            {t('Veja os apartamentos e casas de temporada administrados pela SBL e fale direto com a nossa equipe em João Pessoa.')}
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="accent" size="lg" iconRight="arrow-right" onClick={() => onNav('listings', { kind: 'season' })}>
              {t('Ver imóveis por temporada')}
            </Button>
            <Button variant="ghost" size="lg" style={{ color: 'var(--rose-100)', borderColor: 'var(--brown-500)' }} onClick={() => onNav('contact')}>
              {t('Falar com a SBL')}
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.ConteudoScreen = ConteudoScreen;