// ContactScreen — Página de contato da SBL
function ContactScreen({ onNav }) {
  const { Button } = window.SBLImVeisDesignSystem_08a506;
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();
  const { useState, useEffect } = React;

  // ← Substitua pelo e-mail real da Sibelle para receber os formulários
  const CONTATO_EMAIL = 'contato@sblimoveislocacoes.com.br';

  const [type, setType] = useState('client');
  const [form, setForm] = useState({ name: '', email: '', phone: '', subject: '', message: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  useEffect(() => {
    const t = setTimeout(() => { if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 1.75 } }); }, 60);
    return () => clearTimeout(t);
  });

  const waLinks = {
    client: 'https://wa.me/558399585248?text=Ol%C3%A1%2C%20vim%20pelo%20site%20da%20SBL%20e%20gostaria%20de%20ver%20im%C3%B3veis%20dispon%C3%ADveis.',
    owner: 'https://wa.me/558399585248?text=Ol%C3%A1%2C%20vim%20pelo%20site%20da%20SBL%20e%20tenho%20um%20im%C3%B3vel%20para%20anunciar.',
  };

  const tabs = [
    { id: 'client', icon: 'user', label: 'Sou hóspede ou locatário', sublabel: 'Quero conhecer imóveis disponíveis' },
    { id: 'owner', icon: 'building-2', label: 'Tenho um imóvel', sublabel: 'Quero anunciar ou saber mais' },
  ];

  const subjectOpts = {
    client: ['Busco imóvel para temporada', 'Busco imóvel para alugar', 'Busco imóvel para comprar', 'Quero agendar uma visita', 'Tenho uma dúvida'],
    owner: ['Quero anunciar meu imóvel', 'Quero saber o valor do meu imóvel', 'Tenho imóvel para venda', 'Tenho imóvel para aluguel anual', 'Quero gestão de temporada'],
  };

  function validate() {
    const e = {};
    if (!form.name.trim()) e.name = t('Informe seu nome');
    if (!form.email.trim() || !/\S+@\S+\.\S+/.test(form.email)) e.email = t('E-mail inválido');
    if (!form.message.trim()) e.message = t('Escreva sua mensagem');
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!validate()) return;
    const typeLabel = type === 'client' ? 'Hóspede/Locatário' : 'Proprietário';
    const subj = encodeURIComponent(`[SBL] ${typeLabel}${form.subject ? ' — ' + form.subject : ' — contato pelo site'}`);
    const body = encodeURIComponent(
      `Tipo: ${typeLabel}\nNome: ${form.name}\nE-mail: ${form.email}\nTelefone: ${form.phone || '(não informado)'}\n\n${form.message}`
    );
    window.location.href = `mailto:${CONTATO_EMAIL}?subject=${subj}&body=${body}`;
    setSent(true);
  }

  function InputField({ label, value, onChange, type: t = 'text', placeholder, error, required }) {
    return (
      <div>
        <label style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 600, color: 'var(--text-body)', marginBottom: 6, letterSpacing: '0.03em' }}>
          {label}{required && <span style={{ color: 'var(--rose-500)', marginLeft: 3 }}>*</span>}
        </label>
        <input type={t} value={value} onChange={onChange} placeholder={placeholder} style={{ width: '100%', padding: '13px 16px', fontSize: 15, fontFamily: 'var(--font-body)', border: `1.5px solid ${error ? 'var(--rose-400)' : 'var(--border-default)'}`, borderRadius: 10, outline: 'none', background: 'var(--white)', color: 'var(--text-strong)', boxSizing: 'border-box' }} />
        {error && <span style={{ display: 'block', fontSize: 11.5, color: 'var(--rose-600)', marginTop: 4 }}>{error}</span>}
      </div>
    );
  }

  const channels = [
    {
      icon: 'phone', label: t('Ligar agora'), value: '(83) 9958-5248',
      sub: t('Seg–Sex 8h–18h · Sáb 8h–13h'),
      buttonLabel: t('Ligar'), color: 'var(--brown-700)', bg: 'var(--brown-100)',
      onClick: () => { window.location.href = 'tel:+558399585248'; },
    },
    {
      icon: 'message-circle', label: 'WhatsApp', value: '(83) 9958-5248',
      sub: t('Resposta rápida · Todos os dias'),
      buttonLabel: t('Enviar mensagem'), color: 'var(--green-700)', bg: 'var(--green-100)',
      onClick: () => { window.open(waLinks[type], '_blank'); },
    },
    {
      icon: 'mail', label: t('Formulário'), value: t('Resposta em até 24h'),
      sub: t('Mensagem detalhada por e-mail'),
      buttonLabel: t('Ir para o formulário'), color: 'var(--rose-700)', bg: 'var(--rose-100)',
      onClick: () => { document.getElementById('contact-form')?.scrollIntoView({ behavior: 'smooth' }); },
    },
  ];

  const inputSty = { width: '100%', padding: '13px 16px', fontSize: 15, fontFamily: 'var(--font-body)', border: '1.5px solid var(--border-default)', borderRadius: 10, outline: 'none', background: 'var(--white)', color: 'var(--text-strong)', boxSizing: 'border-box' };
  const labelSty = { display: 'block', fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 600, color: 'var(--text-body)', marginBottom: 6, letterSpacing: '0.03em' };

  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.55 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: isMobile ? '60px 20px 56px' : '88px 40px 80px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr auto', gap: isMobile ? 44 : 64, alignItems: 'center' }}>

            {/* Texto */}
            <div>
              <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 18 }}>{t('Contato')}</div>
              <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 34 : 54, color: 'var(--cream-50)', margin: '0 0 20px', lineHeight: 1.07 }}>
                {t('Estamos prontos')}<br />{t('para te atender')}
              </h1>
              <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: isMobile ? 17 : 21, color: 'var(--rose-100)', lineHeight: 1.55, margin: '0 0 36px', maxWidth: 520 }}>
                {t('Para alugar, comprar, anunciar ou tirar dúvidas — a Sibelle atende com atenção e sem enrolação.')}
              </p>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a href="tel:+558399585248" style={{ textDecoration: 'none' }}>
                  <Button variant="outline" size="md" iconLeft="phone">{t('Ligar agora')}</Button>
                </a>
                <a href={waLinks.client} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
                  <Button variant="accent" size="md" iconLeft="message-circle">WhatsApp</Button>
                </a>
              </div>
            </div>

            {/* Card Sibelle */}
            <div style={{ background: 'rgba(255,255,255,0.09)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', borderRadius: 22, padding: isMobile ? '24px 24px' : '32px 36px', border: '1px solid rgba(255,255,255,0.13)', minWidth: isMobile ? 'auto' : 300 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 24 }}>
                <div style={{ width: 68, height: 68, borderRadius: '50%', overflow: 'hidden', background: 'var(--gradient-rosegold)', flexShrink: 0, border: '2.5px solid rgba(255,255,255,0.25)' }}>
                  <img src="../../assets/team_rosto.jpg" alt="Sibelle Bernardes" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    onError={(e) => { e.target.style.display = 'none'; e.target.parentElement.innerHTML = '<span style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--font-body);font-size:24px;font-weight:700;color:var(--brown-900)">S</span>'; }} />
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--cream-50)', lineHeight: 1.2 }}>Sibelle Bernardes</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--rose-300)', marginTop: 4 }}>{t('Corretora de Imóveis')}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 700, color: 'var(--rose-300)' }}>CRECI/PB 16696</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {[
                  { icon: 'phone', text: '(83) 9958-5248', href: 'tel:+558399585248' },
                  { icon: 'map-pin', text: 'João Pessoa, Paraíba' },
                  { icon: 'clock', text: 'Seg–Sex 8h–18h · Sáb 8h–13h' },
                ].map((row, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <i data-lucide={row.icon} style={{ width: 15, height: 15, color: 'var(--rose-400)', flexShrink: 0 }}></i>
                    {row.href
                      ? <a href={row.href} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--cream-100)', fontWeight: 500, textDecoration: 'none' }}>{t(row.text)}</a>
                      : <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--brown-200)' }}>{t(row.text)}</span>
                    }
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── TIPO DE CONTATO ── */}
      <section style={{ background: 'var(--cream-50)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '36px 20px' : '52px 40px' }}>
          <div style={{ textAlign: 'center', marginBottom: 28 }}>
            <div className="sbl-eyebrow" style={{ marginBottom: 10 }}>{t('Como posso ajudar?')}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 26 : 34, color: 'var(--text-strong)', margin: 0 }}>
              {t('Me conte a sua situação')}
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 14, maxWidth: 700, margin: '0 auto', flexDirection: isMobile ? 'column' : 'row' }}>
            {tabs.map(tab => (
              <button key={tab.id} onClick={() => { setType(tab.id); setSent(false); setErrors({}); setForm({ name: '', email: '', phone: '', subject: '', message: '' }); }} style={{ flex: 1, padding: isMobile ? '18px 20px' : '22px 28px', borderRadius: 16, cursor: 'pointer', textAlign: 'left', border: `2.5px solid ${type === tab.id ? 'var(--color-primary)' : 'var(--border-subtle)'}`, background: type === tab.id ? 'rgba(196,99,92,0.06)' : 'var(--white)', transition: 'all 0.18s ease', display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 46, height: 46, borderRadius: 12, background: type === tab.id ? 'var(--rose-100)' : 'var(--cream-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: type === tab.id ? 'var(--rose-700)' : 'var(--text-muted)', flexShrink: 0, transition: 'all 0.18s ease' }}>
                  <i data-lucide={tab.icon} style={{ width: 20, height: 20 }}></i>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: isMobile ? 14.5 : 15, fontWeight: 700, color: type === tab.id ? 'var(--brown-800)' : 'var(--text-strong)', marginBottom: 3 }}>{t(tab.label)}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)' }}>{t(tab.sublabel)}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ── CANAIS DE CONTATO ── */}
      <section style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '48px 20px 52px' : '68px 40px 72px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 14 : 22 }}>
          {channels.map((ch, i) => (
            <div key={i} style={{ background: 'var(--white)', borderRadius: 18, padding: '28px 28px', border: '1px solid var(--border-subtle)', boxShadow: '0 1px 8px rgba(0,0,0,0.05)', display: 'flex', alignItems: isMobile ? 'center' : 'flex-start', gap: isMobile ? 18 : 0, flexDirection: isMobile ? 'row' : 'column' }}>
              <div style={{ width: 48, height: 48, borderRadius: 14, background: ch.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: ch.color, flexShrink: 0, marginBottom: isMobile ? 0 : 16 }}>
                <i data-lucide={ch.icon} style={{ width: 22, height: 22 }}></i>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? 16 : 19, fontWeight: 700, color: 'var(--text-strong)', marginBottom: 2 }}>{ch.label}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: isMobile ? 14 : 15, fontWeight: 600, color: 'var(--brown-700)', marginBottom: isMobile ? 0 : 2 }}>{ch.value}</div>
                {!isMobile && <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', marginBottom: 20 }}>{ch.sub}</div>}
                {!isMobile && (
                  <button onClick={ch.onClick} style={{ padding: '10px 18px', borderRadius: 9, background: ch.bg, color: ch.color, border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 7 }}>
                    <i data-lucide={ch.icon} style={{ width: 14, height: 14 }}></i>
                    {ch.buttonLabel}
                  </button>
                )}
              </div>
              {isMobile && (
                <button onClick={ch.onClick} style={{ width: 40, height: 40, borderRadius: 10, background: ch.bg, color: ch.color, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <i data-lucide="arrow-right" style={{ width: 17, height: 17 }}></i>
                </button>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* ── FORMULÁRIO ── */}
      <section id="contact-form" style={{ background: 'var(--cream-50)', padding: isMobile ? '52px 20px 68px' : '72px 40px 88px', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 44 }}>
            <div className="sbl-eyebrow" style={{ marginBottom: 12 }}>{t('Envie uma mensagem')}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 38, color: 'var(--text-strong)', margin: '0 0 14px' }}>{t('Fale com a Sibelle')}</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, color: 'var(--text-muted)', margin: 0 }}>
              {t('Preencha o formulário e sua mensagem chegará diretamente ao e-mail da Sibelle.')}
            </p>
          </div>

          {sent ? (
            <div style={{ textAlign: 'center', padding: '56px 24px', background: 'var(--white)', borderRadius: 20, border: '1px solid var(--border-subtle)' }}>
              <div style={{ width: 68, height: 68, borderRadius: '50%', background: 'var(--green-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px', color: 'var(--green-600)' }}>
                <i data-lucide="check" style={{ width: 30, height: 30 }}></i>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: 'var(--text-strong)', margin: '0 0 12px' }}>{t('Mensagem preparada!')}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-muted)', margin: '0 0 28px', lineHeight: 1.65, maxWidth: 420, marginLeft: 'auto', marginRight: 'auto' }}>
                {t('Seu cliente de e-mail foi aberto com a mensagem preenchida. Basta clicar em Enviar para que a Sibelle receba.')}
              </p>
              <button onClick={() => setSent(false)} style={{ background: 'none', border: '1.5px solid var(--border-default)', borderRadius: 10, padding: '11px 24px', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', fontWeight: 500 }}>
                {t('Enviar outra mensagem')}
              </button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ background: 'var(--white)', borderRadius: 22, padding: isMobile ? '28px 20px 32px' : '44px 48px', border: '1px solid var(--border-subtle)', boxShadow: '0 2px 20px rgba(0,0,0,0.06)', display: 'flex', flexDirection: 'column', gap: 22 }}>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
                <InputField label={t('Nome')} value={form.name} onChange={e => setForm(f => ({...f, name: e.target.value}))} placeholder={t('Seu nome completo')} error={errors.name} required />
                <InputField label={t('E-mail')} t="email" value={form.email} onChange={e => setForm(f => ({...f, email: e.target.value}))} placeholder="seu@email.com" error={errors.email} required />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
                <InputField label={t('Telefone / WhatsApp')} t="tel" value={form.phone} onChange={e => setForm(f => ({...f, phone: e.target.value}))} placeholder="(83) 99999-9999" />
                <div>
                  <label style={labelSty}>{t('Assunto')}</label>
                  <select value={form.subject} onChange={e => setForm(f => ({...f, subject: e.target.value}))} style={inputSty}>
                    <option value="">{t('Selecione o assunto...')}</option>
                    {subjectOpts[type].map(o => <option key={o} value={o}>{t(o)}</option>)}
                  </select>
                </div>
              </div>
              <div>
                <label style={labelSty}>{t('Mensagem')} <span style={{ color: 'var(--rose-500)' }}>*</span></label>
                <textarea value={form.message} onChange={e => setForm(f => ({...f, message: e.target.value}))} placeholder={t('Descreva o que está buscando ou sua situação...')} rows={5}
                  style={{ width: '100%', padding: '13px 16px', fontSize: 15, fontFamily: 'var(--font-body)', border: `1.5px solid ${errors.message ? 'var(--rose-400)' : 'var(--border-default)'}`, borderRadius: 10, outline: 'none', resize: 'vertical', background: 'var(--white)', color: 'var(--text-strong)', boxSizing: 'border-box', minHeight: 120 }} />
                {errors.message && <span style={{ display: 'block', fontSize: 11.5, color: 'var(--rose-600)', marginTop: 4 }}>{errors.message}</span>}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'stretch' : 'space-between', gap: 16, flexDirection: isMobile ? 'column' : 'row' }}>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', margin: 0 }}>
                  {t('* Campos obrigatórios')}
                </p>
                <button type="submit" style={{ padding: '15px 32px', background: 'var(--color-primary)', color: 'var(--cream-50)', border: 'none', borderRadius: 12, fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 9, width: isMobile ? '100%' : 'auto', justifyContent: 'center' }}>
                  <i data-lucide="send" style={{ width: 17, height: 17 }}></i>
                  {t('Enviar mensagem')}
                </button>
              </div>
            </form>
          )}
        </div>
      </section>

      {/* ── MAPA ── */}
      <section style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '52px 20px 72px' : '72px 40px 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr', gap: isMobile ? 36 : 56, alignItems: 'start' }}>

          {/* Mapa */}
          <div style={{ borderRadius: 20, overflow: 'hidden', boxShadow: '0 4px 28px rgba(0,0,0,0.1)', aspectRatio: isMobile ? '4/3' : '16/10' }}>
            <iframe
              title="SBL Imóveis — João Pessoa, PB"
              src="https://www.openstreetmap.org/export/embed.html?bbox=-35.2%2C-7.35%2C-34.7%2C-6.9&layer=mapnik&marker=-7.115%2C-34.865"
              style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
              loading="lazy"
            />
          </div>

          {/* Informações */}
          <div style={{ paddingTop: isMobile ? 0 : 4 }}>
            <div className="sbl-eyebrow" style={{ marginBottom: 14 }}>{t('Onde estamos')}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 26 : 32, color: 'var(--text-strong)', margin: '0 0 28px', lineHeight: 1.15 }}>
              João Pessoa,<br />Paraíba
            </h2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 36 }}>
              {[
                { icon: 'map-pin', title: 'Endereço', lines: ['Endereço completo em breve'], italic: true },
                { icon: 'phone', title: 'Telefone', lines: ['(83) 9958-5248'], href: 'tel:+558399585248' },
                { icon: 'clock', title: 'Atendimento', lines: ['Segunda a Sexta: 8h às 18h', 'Sábado: 8h às 13h'], extra: 'WhatsApp disponível todos os dias' },
                { icon: 'shield-check', title: 'Registro profissional', lines: ['Sibelle Bernardes'], badge: 'CRECI/PB 16696' },
              ].map((row, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                  <div style={{ width: 42, height: 42, borderRadius: 11, background: 'var(--rose-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rose-600)', flexShrink: 0, marginTop: 1 }}>
                    <i data-lucide={row.icon} style={{ width: 18, height: 18 }}></i>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13.5, color: 'var(--text-strong)', marginBottom: 3 }}>{t(row.title)}</div>
                    {row.lines.map((l, j) => (
                      row.href
                        ? <a key={j} href={row.href} style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--brown-600)', textDecoration: 'none', fontWeight: 600 }}>{t(l)}</a>
                        : <div key={j} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: row.italic ? 'var(--text-muted)' : 'var(--text-body)', fontStyle: row.italic ? 'italic' : 'normal' }}>{t(l)}</div>
                    ))}
                    {row.badge && <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 700, color: 'var(--rose-700)', marginTop: 2 }}>{row.badge}</div>}
                    {row.extra && <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--green-700)', marginTop: 4 }}>{t(row.extra)}</div>}
                  </div>
                </div>
              ))}
            </div>

            <a href={waLinks[type]} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', display: 'block' }}>
              <Button variant="accent" size="lg" iconLeft="message-circle" full={isMobile}>{t('Falar no WhatsApp agora')}</Button>
            </a>
          </div>
        </div>
      </section>

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