/* ============================================================
   sections-2.jsx — Timeline INSS, Calculadora, Sobre, Depoimentos,
                    FAQ, Blog, Contato
   ============================================================ */

/* ---------- CALCULADORA PREVIDENCIÁRIA ---------- */
function Calculadora() {
  const [genero, setGenero] = React.useState('homem');
  const [idade, setIdade] = React.useState(58);
  const [tempo, setTempo] = React.useState(28);

  // Targets (post-reforma, regra atual simplificada — esta é só uma simulação ilustrativa)
  const reqIdade   = genero === 'homem' ? 65 : 62;
  const reqTempo   = genero === 'homem' ? 35 : 30;
  const reqPontos  = genero === 'homem' ? 103 : 93;
  const pontosVoce = idade + tempo;

  const pIdade   = Math.min(100, (idade / reqIdade) * 100);
  const pTempo   = Math.min(100, (tempo / reqTempo) * 100);
  const pPontos  = Math.min(100, (pontosVoce / reqPontos) * 100);
  const overall  = Math.round((pIdade * 0.35 + pTempo * 0.35 + pPontos * 0.3));

  let verdict, sub;
  if (overall >= 100) {
    verdict = 'Você já pode requerer sua aposentadoria';
    sub = 'Com base nos dados informados, todos os requisitos foram cumpridos. Recomendamos análise técnica do seu CNIS para escolher a regra mais vantajosa.';
  } else if (overall >= 75) {
    verdict = 'Você está perto da aposentadoria';
    sub = 'Faltam poucos pontos para alcançar uma das regras de transição. Um planejamento previdenciário agora pode antecipar sua aposentadoria.';
  } else if (overall >= 45) {
    verdict = 'Há caminho — mas precisa de estratégia';
    sub = 'Você ainda está construindo o tempo necessário. Existem alternativas: contribuição em dia, recuperação de períodos, atividade especial.';
  } else {
    verdict = 'Construa o caminho do jeito certo';
    sub = 'Cedo ainda? É a hora ideal para começar um planejamento previdenciário e evitar contribuições mal-feitas que custam caro lá na frente.';
  }

  const pctR = (v, max) => ({ '--p': Math.min(100, (v / max) * 100) + '%' });

  return (
    <section id="calculadora" className="section-pad calc-block">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow on-navy">Simulador previdenciário</div>
          <h2 className="sec-h sec-h-on-navy">
            <b>Quanto falta</b> para sua aposentadoria?
          </h2>
          <p className="sec-lede on-navy">
            Faça uma simulação rápida com base na regra atual pós-reforma. Em seguida agendamos uma
            análise gratuita do seu CNIS para checar todas as possibilidades.
          </p>
        </div>

        <div className="reveal" style={{ marginBottom: 32, padding: '14px 20px', borderLeft: '3px solid var(--td-amber)', background: 'rgba(241,163,79,0.08)', borderRadius: '0 8px 8px 0', fontSize: 13.5, color: 'rgba(251,250,247,0.75)', lineHeight: 1.6 }}>
          * Esta simulação é educativa e usa a regra atual pós-reforma (EC 103/2019). Existem regras de transição e situações específicas que só uma análise técnica do seu CNIS consegue avaliar com precisão.
        </div>

        <div className="calc-grid">
          <div className="calc-panel reveal">
            <div className="calc-field">
              <label>Você é</label>
              <div className="calc-select">
                <button className={genero === 'homem' ? 'active' : ''} onClick={() => setGenero('homem')}>Homem</button>
                <button className={genero === 'mulher' ? 'active' : ''} onClick={() => setGenero('mulher')}>Mulher</button>
              </div>
            </div>

            <div className="calc-field">
              <label>Sua idade hoje</label>
              <div className="val">{idade} <span style={{ fontSize: 14, color: 'rgba(251,250,247,0.6)', letterSpacing: '0.04em', fontWeight: 400 }}>anos</span></div>
              <input
                type="range"
                min="18" max="80"
                value={idade}
                onChange={(e) => setIdade(parseInt(e.target.value))}
                style={pctR(idade - 18, 80 - 18)}
              />
            </div>

            <div className="calc-field">
              <label>Tempo de contribuição</label>
              <div className="val">{tempo} <span style={{ fontSize: 14, color: 'rgba(251,250,247,0.6)', letterSpacing: '0.04em', fontWeight: 400 }}>anos</span></div>
              <input
                type="range"
                min="0" max="45"
                value={tempo}
                onChange={(e) => setTempo(parseInt(e.target.value))}
                style={pctR(tempo, 45)}
              />
            </div>

            <div style={{ display: 'flex', gap: 16, marginTop: 24, paddingTop: 24, borderTop: '1px solid rgba(241,163,79,0.18)' }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--td-amber)', fontWeight: 600, textTransform: 'uppercase', marginBottom: 6 }}>Pontos hoje</div>
                <div style={{ fontFamily: 'var(--td-font-display)', fontSize: 28, fontWeight: 600 }}>{pontosVoce}<span style={{ fontSize: 14, color: 'rgba(251,250,247,0.5)', marginLeft: 6 }}>/ {reqPontos}</span></div>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--td-amber)', fontWeight: 600, textTransform: 'uppercase', marginBottom: 6 }}>Idade mín.</div>
                <div style={{ fontFamily: 'var(--td-font-display)', fontSize: 28, fontWeight: 600 }}>{reqIdade}</div>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--td-amber)', fontWeight: 600, textTransform: 'uppercase', marginBottom: 6 }}>Tempo mín.</div>
                <div style={{ fontFamily: 'var(--td-font-display)', fontSize: 28, fontWeight: 600 }}>{reqTempo}</div>
              </div>
            </div>
          </div>

          <div className="calc-result reveal">
            <div className="verdict">
              <div className="verdict-eyebrow">Diagnóstico</div>
              <h3>{verdict}</h3>
              <p className="detail">{sub}</p>

              <div>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--td-navy)', fontWeight: 600, marginBottom: 8 }}>Progresso geral</div>
                <div className="meter">
                  <div className="meter-fill" style={{ width: overall + '%' }}></div>
                </div>
                <div className="meter-row">
                  <span>0%</span>
                  <strong style={{ color: 'var(--td-navy)' }}>{overall}%</strong>
                  <span>100%</span>
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
                {[
                  ['Idade', pIdade],
                  ['Tempo de contribuição', pTempo],
                  ['Pontos', pPontos],
                ].map(([lbl, v]) => (
                  <div key={lbl}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--td-mute)', marginBottom: 4, letterSpacing: '0.04em' }}>
                      <span>{lbl}</span>
                      <strong style={{ color: 'var(--td-navy)' }}>{Math.round(v)}%</strong>
                    </div>
                    <div className="meter" style={{ height: 4 }}>
                      <div className="meter-fill" style={{ width: v + '%' }}></div>
                    </div>
                  </div>
                ))}
              </div>

              <a className="btn btn-light" style={{ width: '100%', justifyContent: 'center' }} href={waMsg(`Olá! Fiz a simulação no site (${overall}% de progresso) e quero a análise gratuita.`)} target="_blank" rel="noopener">
                {Icon.whatsapp}<span>Quero a análise completa</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- SOBRE Dr. Diego + Business Card animado ---------- */
function Sobre() {
  return (
    <section id="sobre" className="section-pad paper-tex">
      <div className="container">
        <div className="sobre-grid">
          <div className="reveal sobre-portrait-wrap">
            <image-slot
              id="sobre-portrait"
              shape="rounded"
              radius="12"
              fit="cover"
              src="assets/dr-diego.jpeg"
              placeholder="Foto do Dr. Diego (retrato 3:4)"
            ></image-slot>
            <div className="sobre-portrait-frame"></div>
            <div className="sobre-portrait-cite">
              <div className="quote">"Cada caso previdenciário pede análise técnica <em>e</em> atendimento personalizado. Não há um sem o outro."</div>
              <div className="who">Dr. Diego Todescatto</div>
            </div>
          </div>
          <div className="reveal sobre-text reveal-delay-1">
            <div className="eyebrow">Sobre o escritório</div>
            <h2 className="sec-h">Direito previdenciário <b>técnico e ético.</b></h2>
            <p>
              Somos especialistas em Direito Previdenciário, com mais de 7 anos de atuação dedicados
              a defender os direitos de segurados e servidores públicos. Atuamos de forma técnica e estratégica —
              orientação clara, precisa e eficaz para garantir o que a lei lhe assegura.
            </p>
            <p>
              Nosso compromisso é acompanhar você em todas as etapas, do planejamento à concessão do
              benefício, analisando cada detalhe do caso. Trabalhamos para simplificar processos,
              reduzir erros e aumentar suas chances de aprovação — sempre com ética, transparência
              e responsabilidade.
            </p>
            <div className="sobre-signature">
              <div className="name">{BRAND.lawyer}</div>
              <div className="oab">Advogado · {BRAND.oab}</div>
              <a className="btn btn-primary" href="sobre.html" style={{ marginTop: 24 }}>
                Conhecer melhor o Dr. Diego {Icon.arrow}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BusinessCardStack() {
  return (
    <div className="card-stack" aria-hidden="true">
      <div className="bcard back">
        <div style={{ background: '#010A2C', padding: '32px 18px', minHeight: 380, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
          <img src="assets/mark-orange-transparent.png" alt="" style={{ height: 80, opacity: 0.95 }} />
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '0.18em', color: '#FBFAF7' }}>TODESCATTO</div>
          <div style={{ fontSize: 9, letterSpacing: '0.22em', color: '#F1A34F', fontWeight: 600 }}>ADVOCACIA PREVIDENCIÁRIA</div>
          <div style={{ height: 1, width: 60, background: '#F1A34F', margin: '4px 0' }}></div>
          <div style={{ fontSize: 9.5, color: 'rgba(251,250,247,0.7)', textAlign: 'center', letterSpacing: '0.06em' }}>FLORIANÓPOLIS · SC<br/>OAB/SC 58.998</div>
        </div>
      </div>

      <div className="bcard front">
        <div className="top">
          <img src="assets/logo-color-light.png" alt="Todescatto"/>
          <div className="lawyer">DIEGO EDUARDO TODESCATTO</div>
          <div className="oab">OAB/SC 58.998</div>
        </div>
        <svg viewBox="0 0 280 28" width="100%" height="28" preserveAspectRatio="none" style={{ display: 'block' }}>
          <path d="M0 0 L280 0 L280 12 Q140 32 0 12 Z" fill="#F1A34F"/>
          <path d="M0 12 Q140 32 280 12 L280 28 L0 28 Z" fill="#010A2C"/>
        </svg>
        <div className="bottom">
          <div className="pill">
            <div className="ico">{Icon.whatsapp}</div>
            <div className="lbl">WhatsApp</div>
          </div>
          <div className="pill">
            <div className="ico">{Icon.mail}</div>
            <div className="lbl">E-mail</div>
          </div>
          <div className="pill">
            <div className="ico">{Icon.pin}</div>
            <div className="lbl">Endereço</div>
          </div>
          <div className="pill">
            <div className="ico">{Icon.globe}</div>
            <div className="lbl">Site</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- DEPOIMENTOS ---------- */
const DEPOIMENTOS = [
  { ini: 'RS', name: 'Rosemari Secco',          text: 'Excelente atendimento. Agradeço pela rapidez e eficiência em resolver situações e processos do INSS.' },
  { ini: 'JA', name: 'Jaqueline Almeida',       text: 'Excelente advogado, me ajudou bastante na minha aposentadoria. Recomendo de olhos fechados.' },
  { ini: 'CB', name: 'Caroline Beatriz Streit', text: 'Sanou todas as minhas dúvidas! Super recomendo. Atendimento atencioso e técnico.' },
  { ini: 'SM', name: 'Sandra Moreira',          text: 'Se não fosse o Dr. Diego, não teria nem entrado com o processo. Entramos e ganhamos a causa.' },
  { ini: 'DN', name: 'Danilo Nardino',          text: 'Profissional competente e atencioso. Explicou cada etapa com calma e clareza.' },
  { ini: 'RT', name: 'Rosangela Fracasso',      text: 'Muito bem atendida. Confiança total no escritório, atendimento humanizado do começo ao fim.' },
];
function Depoimentos() {
  return (
    <section id="depoimentos" className="section-pad depo-block">
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Depoimentos</div>
          <h2 className="sec-h">Experiência <b>dedicada a você</b></h2>
          <p className="sec-lede center">
            46 clientes nos avaliaram com 5 estrelas no Google. Veja o que dizem sobre o nosso atendimento.
          </p>
        </div>

        <div className="depo-grid">
          {DEPOIMENTOS.map((d, i) => (
            <article key={i} className="depo-card reveal" style={{ transitionDelay: `${(i % 3) * 80}ms` }}>
              <div className="head">
                <div className="who">
                  <div className="avatar">{d.ini}</div>
                  <div>
                    <div className="name">{d.name}</div>
                    <div className="verif"><span className="ck">{Icon.check}</span><span>Verificada</span></div>
                  </div>
                </div>
                <div className="google" title="Google Review">G</div>
              </div>
              <div className="stars">★★★★★</div>
              <p className="quote">"{d.text}"</p>
            </article>
          ))}
        </div>

        <div className="google-badge reveal">
          <div className="gicon">G</div>
          <div style={{ flex: 1 }}>
            <div className="num">5,0 <span style={{ color: 'var(--td-amber)', letterSpacing: 2, fontSize: 22 }}>★★★★★</span></div>
            <div className="small">Avaliação <strong style={{ color: 'var(--td-navy)' }}>5 estrelas</strong> com base em <strong style={{ color: 'var(--td-navy)' }}>46 avaliações</strong> verificadas no Google.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const FAQ = [
  { q: 'Quanto custa para entrar com um processo previdenciário?',
    a: 'Após a análise inicial do caso, será apresentada proposta de honorários conforme a complexidade da demanda e as particularidades da situação.' },
  { q: 'Preciso pedir o benefício no INSS antes de acionar a Justiça?',
    a: 'Sim — em regra, é necessário o requerimento administrativo prévio no INSS. Esse é justamente um dos serviços que prestamos: organizar a documentação, protocolar e acompanhar o pedido. Só depois de uma negativa, indeferimento ou demora desproporcional é que ajuizamos a ação.' },
  { q: 'Posso ser atendido se moro em outra cidade ou em outro estado?',
    a: 'Sim. O atendimento é integralmente online (WhatsApp, e-mail, videochamada) e o escritório está autorizado a atuar em todo o território nacional. Nossos clientes estão em todo o estado de Santa Catarina e em outras regiões do Brasil.' },
  { q: 'Tive o benefício negado pelo INSS. Ainda tenho chance?',
    a: 'Sim. Mais de 60% das negativas do INSS são revistas quando o caso é levado ao poder judiciário com provas e fundamentação correta. Para isso é necessário analisar todo o processo administrativo que, devidamente instruído, permite obter o pagamento desde a entrada do requerimento.' },
];

function FAQSection() {
  return (
    <section id="faq" className="section-pad" style={{ background: 'var(--td-paper)' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Dúvidas frequentes</div>
          <h2 className="sec-h">As perguntas que <b>todo cliente faz primeiro</b></h2>
          <p className="sec-lede center">
            Reunimos as dúvidas mais comuns para você se sentir seguro antes mesmo da primeira conversa.
          </p>
        </div>

        <div className="faq-list">
          {FAQ.map((item, i) => (
            <details key={i} className="faq-item reveal" style={{ transitionDelay: `${i * 40}ms` }}>
              <summary>
                <span>{item.q}</span>
                <span className="ico"></span>
              </summary>
              <p className="answer">{item.a}</p>
            </details>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }} className="reveal">
          <p style={{ color: 'var(--td-mute)', marginBottom: 16 }}>
            Sua dúvida não está aqui? Pergunte direto pelo WhatsApp.
          </p>
          <a className="btn btn-primary" href={waMsg('Olá! Tenho uma dúvida sobre direito previdenciário.')} target="_blank" rel="noopener">
            {Icon.whatsapp}<span>Tirar minha dúvida</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- BLOG / Conteúdo ---------- */
const POSTS = [
  {
    cat: 'Reforma',
    title: 'Regras de transição após a Reforma de 2019: qual escolher?',
    meta: '8 min de leitura · Atualizado em 2026',
    thumb: (
      <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="200" fill="#010A2C"/>
        <g transform="translate(60 60)">
          <rect x="0" y="0" width="200" height="80" rx="3" fill="#FBFAF7" opacity="0.95"/>
          <rect x="14" y="14" width="80" height="6" rx="2" fill="#010A2C"/>
          <rect x="14" y="28" width="160" height="3" rx="1.5" fill="#010A2C" opacity="0.4"/>
          <rect x="14" y="36" width="140" height="3" rx="1.5" fill="#010A2C" opacity="0.4"/>
          <rect x="14" y="44" width="120" height="3" rx="1.5" fill="#010A2C" opacity="0.4"/>
          <rect x="14" y="58" width="50" height="14" rx="2" fill="#F1A34F"/>
          <text x="39" y="68" textAnchor="middle" fill="#010A2C" fontSize="8" fontWeight="700">REFORMA</text>
        </g>
        <g transform="translate(220 50) rotate(8)">
          <rect x="-30" y="-12" width="60" height="24" rx="3" fill="none" stroke="#F1A34F" strokeWidth="2"/>
          <text x="0" y="4" textAnchor="middle" fontFamily="Saira" fontSize="10" fontWeight="800" fill="#F1A34F" letterSpacing="2">EC 103</text>
        </g>
      </svg>
    ),
  },
  {
    cat: 'BPC / LOAS',
    title: 'BPC para idoso: quem tem direito e como pedir em 2026',
    meta: '6 min de leitura · Atualizado em 2026',
    thumb: (
      <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="200" fill="#F5F3ED"/>
        <circle cx="100" cy="100" r="44" fill="#F1A34F" opacity="0.2"/>
        <circle cx="100" cy="100" r="34" fill="none" stroke="#010A2C" strokeWidth="2"/>
        <path d="M84 100 L96 112 L120 88" fill="none" stroke="#010A2C" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
        <g transform="translate(170 60)">
          <rect x="0" y="0" width="120" height="80" rx="2" fill="#FBFAF7" stroke="#E3E1DA"/>
          <rect x="10" y="12" width="60" height="5" rx="2" fill="#010A2C"/>
          <rect x="10" y="24" width="100" height="3" rx="1.5" fill="#010A2C" opacity="0.3"/>
          <rect x="10" y="32" width="100" height="3" rx="1.5" fill="#010A2C" opacity="0.3"/>
          <rect x="10" y="40" width="80" height="3" rx="1.5" fill="#010A2C" opacity="0.3"/>
          <rect x="10" y="55" width="38" height="14" rx="2" fill="#010A2C"/>
          <text x="29" y="65" textAnchor="middle" fill="#F1A34F" fontSize="7" fontWeight="700">BPC/LOAS</text>
        </g>
      </svg>
    ),
  },
  {
    cat: 'Auxílio-doença',
    title: 'Atestmed: como o INSS analisa atestados sem perícia presencial',
    meta: '5 min de leitura · Atualizado em 2026',
    thumb: (
      <svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice">
        <rect width="320" height="200" fill="#010A2C"/>
        <g transform="translate(70 40)">
          <rect x="0" y="0" width="180" height="120" rx="6" fill="#FBFAF7"/>
          <rect x="0" y="0" width="180" height="22" rx="6" fill="#F1A34F"/>
          <rect x="0" y="16" width="180" height="6" fill="#F1A34F"/>
          <text x="14" y="16" fill="#010A2C" fontFamily="Saira" fontSize="11" fontWeight="700" letterSpacing="1">ATESTADO MÉDICO</text>
          <rect x="14" y="36" width="100" height="4" rx="2" fill="#010A2C" opacity="0.5"/>
          <rect x="14" y="46" width="150" height="3" rx="1.5" fill="#010A2C" opacity="0.3"/>
          <rect x="14" y="54" width="140" height="3" rx="1.5" fill="#010A2C" opacity="0.3"/>
          <rect x="14" y="62" width="120" height="3" rx="1.5" fill="#010A2C" opacity="0.3"/>
          <path d="M14 100 Q40 78 60 92 Q80 106 100 88" fill="none" stroke="#010A2C" strokeWidth="2"/>
          <text x="120" y="108" fontFamily="Saira" fontSize="9" fill="#010A2C" opacity="0.6">CRM ___</text>
        </g>
      </svg>
    ),
  },
];

function Blog() {
  return (
    <section id="blog" className="section-pad" style={{ background: 'var(--td-paper-2)' }}>
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
          <div style={{ maxWidth: 600 }}>
            <div className="eyebrow">Conteúdo</div>
            <h2 className="sec-h" style={{ marginBottom: 12 }}>
              Conteúdo para <b>entender seu direito</b>
            </h2>
            <p style={{ color: 'var(--td-mute)', fontSize: 16, lineHeight: 1.6, margin: 0 }}>
              Sem juridiquês. Artigos explicando as principais dúvidas e mudanças do INSS.
            </p>
          </div>
          <a href="#" className="btn btn-ghost" style={{ color: 'var(--td-amber-700)', borderColor: 'var(--td-amber)' }}>
            Ver todos os artigos {Icon.arrow}
          </a>
        </div>

        <div className="blog-grid">
          {POSTS.map((p, i) => (
            <a key={i} className="post-card reveal" style={{ transitionDelay: `${i * 80}ms` }} href="#">
              <div className="thumb">{p.thumb}</div>
              <div className="body">
                <div className="cat">{p.cat}</div>
                <h3>{p.title}</h3>
                <div className="meta">{p.meta}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CONTATO + MAPA ---------- */
function Contato({ heading = true } = {}) {
  return (
    <section id="contato" className="section-pad contato-block">
      <div className="container">
        {heading && (
          <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
            <div className="eyebrow on-navy">Contato</div>
            <h2 className="sec-h sec-h-on-navy">
              Pronto para <b>resolver seu caso?</b>
            </h2>
            <p className="sec-lede on-navy">
              O atendimento começa por uma conversa. Sem compromisso, sem promessa, sem juridiquês —
              só o diagnóstico honesto do seu caso.
            </p>
          </div>
        )}

        <div className="contato-grid">
          <ul className="contact-list reveal">
            <li>
              <a className="ico" href={waMsg()} target="_blank" rel="noopener" style={{ textDecoration: 'none', display: 'flex' }}>{Icon.whatsapp}</a>
              <div style={{ flex: 1 }}>
                <div className="lbl">WhatsApp</div>
                <a href={waMsg()} target="_blank" rel="noopener" style={{ textDecoration: 'none', color: 'var(--td-paper)' }} className="val">{BRAND.phoneDisplay}</a>
              </div>
            </li>
            <li>
              <div className="ico">{Icon.mail}</div>
              <div style={{ flex: 1 }}>
                <div className="lbl">E-mail</div>
                <a href={`mailto:${BRAND.email}`} className="val" style={{ textDecoration: 'none', color: 'var(--td-paper)' }}>{BRAND.email}</a>
              </div>
            </li>
            <li>
              <div className="ico">{Icon.pin}</div>
              <div style={{ flex: 1 }}>
                <div className="lbl">Endereço</div>
                <div className="val">{BRAND.address}</div>
              </div>
            </li>
            <li>
              <div className="ico">{Icon.clock}</div>
              <div style={{ flex: 1 }}>
                <div className="lbl">Atendimento</div>
                <div className="val">Segunda a sexta, 9h às 18h<br/><span style={{ fontSize: 12, color: 'rgba(251,250,247,0.55)' }}>WhatsApp respondido em até 2h em horário comercial</span></div>
              </div>
            </li>

            <li style={{ background: 'var(--td-amber)', borderColor: 'var(--td-amber)' }}>
              <div className="ico" style={{ background: 'var(--td-navy)', color: 'var(--td-amber)' }}>{Icon.whatsapp}</div>
              <div style={{ flex: 1 }}>
                <div className="lbl" style={{ color: 'var(--td-navy)' }}>Comece agora</div>
                <a href={waMsg()} target="_blank" rel="noopener" className="val" style={{ color: 'var(--td-navy)', fontWeight: 700, textDecoration: 'none' }}>
                  Falar com o escritório pelo WhatsApp →
                </a>
              </div>
            </li>
          </ul>

          <div className="map-wrap reveal reveal-delay-1">
            <image-slot
              id="contato-office"
              shape="rect"
              fit="cover"
              placeholder="Foto do escritório / fachada"
              style={{ width: '100%', aspectRatio: '16/9', display: 'block' }}
            ></image-slot>
            <iframe
              title="Localização do escritório"
              src="https://www.google.com/maps?q=Rua+Saldanha+Marinho,+374,+Florian%C3%B3polis,+SC&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen=""
              style={{ minHeight: 220 }}
            />
            <div className="map-foot">
              <span style={{ color: 'rgba(251,250,247,0.7)' }}>Comercial Zigurate · Sala 608</span>
              <a href="https://maps.app.goo.gl/3cb9a9270xb8b577076f5262ba" target="_blank" rel="noopener">
                Abrir no Maps {Icon.ext}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- OFFICE STRIP (full-bleed image break) ---------- */
function OfficeStrip() {
  return (
    <section className="office-strip" aria-hidden="false">
      <image-slot
        id="office-strip"
        shape="rect"
        fit="cover"
        placeholder="Foto do escritório / atendimento (panorâmica)"
      ></image-slot>
      <div className="office-strip-overlay"></div>
      <div className="container office-strip-content">
        <div className="reveal">
          <div className="eyebrow on-navy">No coração de Florianópolis</div>
          <h2 className="sec-h sec-h-on-navy" style={{ maxWidth: 720 }}>
            O processo previdenciário está cada vez mais complexo.
          </h2>
          <p className="sec-lede on-navy" style={{ maxWidth: 620 }}>
            Aqui no escritório prezamos pela qualidade técnica do serviço prestado, para isso
            realizamos uma análise completa e personalizada para o seu caso.
          </p>
          <a className="btn btn-primary" href={waMsg('Olá! Gostaria de agendar uma conversa.')} target="_blank" rel="noopener">
            {Icon.whatsapp}<span>Agendar uma conversa</span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Calculadora, Sobre, BusinessCardStack, Depoimentos, FAQSection, Blog, Contato, OfficeStrip });