// AboutScreen — Página Sobre Nós da SBL.
function AboutScreen({ onAnnounce, onNav }) {
  const { Button, Stat } = window.SBLImVeisDesignSystem_08a506;
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();

  const values = [
    {
      icon: 'heart-handshake',
      title: 'Atendimento humanizado',
      desc: 'Cada cliente carrega uma história e uma expectativa única. Sibelle ouve antes de recomendar — e só indica o imóvel quando tem certeza de que ele encaixa na vida de quem está buscando.',
    },
    {
      icon: 'map-pin',
      title: 'Conhecimento profundo de João Pessoa',
      desc: 'De Cabo Branco ao Bessa, do Altiplano a Tambaú, ela conhece cada bairro, cada rua e o potencial real de cada imóvel — para que você tome a melhor decisão com segurança.',
    },
    {
      icon: 'shield-check',
      title: 'Transparência do início ao fim',
      desc: 'Nada de letras miúdas ou surpresas no caminho. Cada etapa — visita, proposta, contrato — é conduzida com clareza e honestidade, do primeiro contato à entrega das chaves.',
    },
  ];

  return (
    <div style={{ background: 'var(--color-bg)' }}>

      {/* HERO */}
      <section style={{ background: 'var(--brown-900)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'var(--gradient-brown)', opacity: 0.6 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: isMobile ? '64px 20px 56px' : '88px 40px 80px' }}>
          <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 18 }}>{t('Sobre nós')}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 52, color: 'var(--cream-50)', margin: '0 0 20px', lineHeight: 1.07, maxWidth: 680 }}>
            {t('Mais do que uma corretora — uma parceira na sua jornada imobiliária')}
          </h1>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 21, color: 'var(--rose-100)', lineHeight: 1.55, margin: 0, maxWidth: 600 }}>
            {t('A SBL nasceu da convicção de que encontrar o imóvel certo muda a vida das pessoas. E que isso só acontece com dedicação real.')}
          </p>
        </div>
      </section>

      {/* HISTÓRIA — imagem + texto */}
      <section style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '60px 20px' : '96px 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.1fr', gap: isMobile ? 40 : 72, alignItems: 'center' }}>

          {/* Texto */}
          <div style={{ order: isMobile ? 2 : 1 }}>
            <div className="sbl-eyebrow" style={{ marginBottom: 18 }}>{t('A história por trás da SBL')}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, color: 'var(--text-strong)', margin: '0 0 28px', lineHeight: 1.12 }}>
              {t('Uma mulher que transforma buscas em lares')}
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', lineHeight: 1.8, margin: '0 0 20px' }}>
              {t('Sibelle Bernardes construiu sua trajetória no mercado imobiliário de João Pessoa com determinação, sensibilidade e um cuidado genuíno por cada pessoa que passa pela sua porta. Para ela, um imóvel nunca é apenas quatro paredes — é onde a vida acontece.')}
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', lineHeight: 1.8, margin: '0 0 20px' }}>
              {t('Seja o hóspede que busca uma semana tranquila à beira-mar de Cabo Branco, o profissional que precisa de um apartamento confortável para morar com contrato anual em Tambaú, ou a família que finalmente vai realizar o sonho da casa própria — Sibelle trata cada caso com a mesma atenção e comprometimento que dedicaria à própria família.')}
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-body)', lineHeight: 1.8, margin: '0 0 32px' }}>
              {t('Ela não entrega imóveis. Ela entrega soluções para a vida das pessoas — e continua presente muito depois do contrato assinado.')}
            </p>

            <blockquote style={{
              borderLeft: '3px solid var(--color-accent)',
              paddingLeft: 24,
              margin: '0 0 40px',
            }}>
              <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 20, color: 'var(--brown-600)', lineHeight: 1.55, margin: '0 0 10px' }}>
                {t('"Eu só indico o imóvel quando tenho certeza de que ele é certo para aquela pessoa — não para fechar negócio, mas para mudar uma vida."')}
              </p>
              <cite style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', fontStyle: 'normal', letterSpacing: '0.04em' }}>
                {t('— Sibelle Bernardes · CRECI/PB 16696')}
              </cite>
            </blockquote>

            <div style={{ display: 'flex', gap: 40 }}>
              <Stat value={t('+8 anos')} label={t('No mercado de João Pessoa')} align="left" />
              <Stat value={t('3 frentes')} label={t('Temporada, aluguel e venda')} align="left" />
            </div>
          </div>

          {/* Imagem */}
          <div style={{ position: 'relative', padding: '5%', order: isMobile ? 1 : 2 }}>
            {/* Moldura: cobre o padding, envolvendo a imagem por completo */}
            <div style={{
              position: 'absolute',
              inset: 0,
              border: '2px solid var(--border-accent)',
              borderRadius: 'var(--radius-xl)',
              zIndex: 0,
              pointerEvents: 'none',
            }} />
            <img
              src="../../assets/team_modelo.png"
              alt="Sibelle Bernardes"
              style={{
                position: 'relative',
                width: '100%',
                borderRadius: 'var(--radius-lg)',
                display: 'block',
                zIndex: 1,
                objectFit: 'cover',
              }}
            />
            {/* Badge flutuante */}
            <div style={{
              position: 'absolute',
              bottom: 0, left: -8,
              background: 'var(--surface-card)',
              borderRadius: 'var(--radius-lg)',
              padding: '16px 22px',
              boxShadow: 'var(--shadow-lg)',
              zIndex: 2,
              display: 'flex',
              alignItems: 'center',
              gap: 14,
            }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--surface-accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <i data-lucide="award" style={{ width: 22, height: 22, color: 'var(--color-primary)' }}></i>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14, color: 'var(--text-strong)' }}>Sibelle Bernardes</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>{t('Corretora · CRECI/PB 16696')}</div>
              </div>
            </div>
          </div>

        </div>
      </section>

      {/* VALORES */}
      <section style={{ background: 'var(--color-bg-alt)', padding: isMobile ? '60px 0' : '80px 0' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div className="sbl-eyebrow" style={{ marginBottom: 14 }}>{t('O que nos guia')}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, color: 'var(--text-strong)', margin: 0 }}>
              {t('Valores que estão em cada atendimento')}
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 24 }}>
            {values.map((v) => (
              <div key={v.title} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '36px 30px' }}>
                <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-lg)', background: 'var(--surface-accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}>
                  <i data-lucide={v.icon} style={{ width: 26, height: 26, color: 'var(--color-primary)' }}></i>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 1.3 }}>{t(v.title)}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--text-muted)', margin: 0, lineHeight: 1.7 }}>{t(v.desc)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--brown-900)', padding: isMobile ? '60px 20px' : '80px 40px', textAlign: 'center' }}>
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
          <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 16 }}>{t('Vamos conversar?')}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, color: 'var(--cream-50)', margin: '0 0 18px', lineHeight: 1.1 }}>
            {t('Encontre o imóvel certo com quem realmente entende')}
          </h2>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 19, color: 'var(--rose-100)', lineHeight: 1.55, margin: '0 0 36px' }}>
            {t('Para alugar, comprar ou colocar seu imóvel para render — a Sibelle está pronta para ajudar.')}
          </p>
          <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 14, justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}>
            <a href="https://wa.me/558399585248?text=Ol%C3%A1%2C%20vim%20pelo%20site%20da%20SBL%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', width: isMobile ? '100%' : 'auto' }}>
              <Button variant="accent" size="lg" iconLeft="message-circle" full={isMobile}>{t('Falar no WhatsApp')}</Button>
            </a>
            <Button variant="ghost" size="lg" style={{ color: 'var(--rose-100)', borderColor: 'var(--brown-500)', width: isMobile ? '100%' : 'auto' }} onClick={() => onNav && onNav('listings')}>{t('Ver imóveis disponíveis')}</Button>
          </div>
        </div>
      </section>

    </div>
  );
}
window.AboutScreen = AboutScreen;