/* ============================================================
   sections-1.jsx — Hero, Stats, Áreas, Diferenciais, ComoFunciona
   ============================================================ */

/* ---------- HERO with animated SVG scene ---------- */
function HeroScene() {
  // Composition: balança da justiça centered, papers stacking and a stamp slamming down.
  // Driven by CSS keyframes set inline below.
  return (
    <div className="hero-stage" aria-hidden="true">
      <style>{`
        .hs-svg { width: 100%; height: 100%; overflow: visible; }
        @keyframes hsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        @keyframes hsSway-l { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
        @keyframes hsSway-r { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
        @keyframes hsPan { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } }
        @keyframes hsBeam { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
        @keyframes hsStamp {
          0%, 70%, 100% { transform: translate(0, 0) rotate(-12deg); opacity: 1; }
          78% { transform: translate(0, 28px) rotate(-8deg); opacity: 1; }
          82% { transform: translate(0, 24px) rotate(-8deg); opacity: 1; }
        }
        @keyframes hsRing {
          0%, 60% { transform: scale(0.6); opacity: 0; }
          80% { transform: scale(1.4); opacity: 0.5; }
          100% { transform: scale(1.9); opacity: 0; }
        }
        @keyframes hsPaperIn {
          0% { opacity: 0; transform: translate(0, 20px); }
          100% { opacity: 1; transform: translate(0, 0); }
        }
        @keyframes hsStampInk {
          0%, 78% { opacity: 0; }
          82% { opacity: 1; }
          100% { opacity: 1; }
        }
        .hs-beam { animation: hsBeam 5s ease-in-out infinite; transform-origin: 270px 200px; }
        .hs-pan-l { animation: hsSway-l 5s ease-in-out infinite; transform-origin: 110px 250px; }
        .hs-pan-r { animation: hsSway-r 5s ease-in-out infinite; transform-origin: 430px 250px; }
        .hs-papers { animation: hsFloat 6s ease-in-out infinite; }
        .hs-paper-2 { animation: hsPaperIn 800ms 400ms cubic-bezier(0.22,0.61,0.36,1) both, hsFloat 6.5s 1.2s ease-in-out infinite; }
        .hs-paper-3 { animation: hsPaperIn 800ms 800ms cubic-bezier(0.22,0.61,0.36,1) both, hsFloat 7s 1.6s ease-in-out infinite; }
        .hs-stamp { animation: hsStamp 4s 1.5s cubic-bezier(0.22,0.61,0.36,1) infinite; transform-origin: center; }
        .hs-stamp-ring { animation: hsRing 4s 1.5s cubic-bezier(0.22,0.61,0.36,1) infinite; transform-origin: center; }
        .hs-stamp-ink { animation: hsStampInk 4s 1.5s linear infinite; }
      `}</style>
      <svg viewBox="0 0 540 540" className="hs-svg">
        {/* Subtle bg radial */}
        <defs>
          <radialGradient id="hsGlow" cx="50%" cy="42%" r="55%">
            <stop offset="0%" stopColor="#F1A34F" stopOpacity="0.18"/>
            <stop offset="60%" stopColor="#F1A34F" stopOpacity="0.04"/>
            <stop offset="100%" stopColor="#F1A34F" stopOpacity="0"/>
          </radialGradient>
          <pattern id="hsPaperLines" width="6" height="6" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="6" stroke="#010A2C" strokeOpacity="0.08" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <circle cx="270" cy="240" r="240" fill="url(#hsGlow)"/>

        {/* Stack of papers behind */}
        <g className="hs-papers" transform="translate(80 340)">
          <g className="hs-paper-3" transform="translate(0 0) rotate(-6 190 80)">
            <rect x="0" y="0" width="380" height="180" rx="4" fill="#FBFAF7" stroke="#E3E1DA"/>
            <rect x="0" y="0" width="380" height="180" rx="4" fill="url(#hsPaperLines)"/>
            <rect x="20" y="22" width="180" height="8" rx="2" fill="#010A2C" opacity="0.55"/>
            <rect x="20" y="40" width="240" height="4" rx="2" fill="#010A2C" opacity="0.18"/>
            <rect x="20" y="50" width="220" height="4" rx="2" fill="#010A2C" opacity="0.18"/>
            <rect x="20" y="60" width="150" height="4" rx="2" fill="#010A2C" opacity="0.18"/>
            <rect x="20" y="80" width="80" height="20" rx="3" fill="#F1A34F" opacity="0.9"/>
            <text x="60" y="94" textAnchor="middle" fontFamily="Montserrat" fontSize="9" fontWeight="700" fill="#010A2C" letterSpacing="1">INSS</text>
            <rect x="20" y="120" width="200" height="3" rx="1.5" fill="#010A2C" opacity="0.18"/>
            <rect x="20" y="128" width="240" height="3" rx="1.5" fill="#010A2C" opacity="0.18"/>
            <rect x="20" y="136" width="160" height="3" rx="1.5" fill="#010A2C" opacity="0.18"/>
            <rect x="20" y="144" width="200" height="3" rx="1.5" fill="#010A2C" opacity="0.18"/>
          </g>
          <g className="hs-paper-2" transform="translate(20 -16) rotate(2 190 80)">
            <rect x="0" y="0" width="380" height="190" rx="4" fill="#FBFAF7" stroke="#E3E1DA"/>
            <rect x="0" y="0" width="380" height="190" rx="4" fill="url(#hsPaperLines)"/>
            <rect x="20" y="22" width="220" height="8" rx="2" fill="#010A2C" opacity="0.7"/>
            <rect x="20" y="40" width="280" height="4" rx="2" fill="#010A2C" opacity="0.2"/>
            <rect x="20" y="50" width="260" height="4" rx="2" fill="#010A2C" opacity="0.2"/>
            <rect x="20" y="60" width="180" height="4" rx="2" fill="#010A2C" opacity="0.2"/>
            <rect x="20" y="100" width="340" height="3" rx="1.5" fill="#010A2C" opacity="0.16"/>
            <rect x="20" y="108" width="320" height="3" rx="1.5" fill="#010A2C" opacity="0.16"/>
            <rect x="20" y="116" width="280" height="3" rx="1.5" fill="#010A2C" opacity="0.16"/>
            <rect x="20" y="124" width="340" height="3" rx="1.5" fill="#010A2C" opacity="0.16"/>
            <rect x="20" y="132" width="300" height="3" rx="1.5" fill="#010A2C" opacity="0.16"/>

            {/* Signature line */}
            <line x1="20" y1="170" x2="180" y2="170" stroke="#010A2C" strokeOpacity="0.6"/>
            <text x="20" y="184" fontFamily="Montserrat" fontSize="7" fontWeight="600" fill="#010A2C" opacity="0.5" letterSpacing="1">ADVOGADO</text>
          </g>

          {/* DEFERIDO stamp */}
          <g className="hs-stamp" transform="translate(260 32)">
            <circle className="hs-stamp-ring" cx="0" cy="0" r="40" fill="none" stroke="#F1A34F" strokeWidth="2" opacity="0"/>
            <g className="hs-stamp-ink">
              <rect x="-46" y="-22" width="92" height="44" rx="3" fill="none" stroke="#F1A34F" strokeWidth="2.5"/>
              <rect x="-42" y="-18" width="84" height="36" rx="2" fill="none" stroke="#F1A34F" strokeWidth="0.7" opacity="0.6"/>
              <text x="0" y="6" textAnchor="middle" fontFamily="Saira, Montserrat" fontSize="16" fontWeight="800" fill="#F1A34F" letterSpacing="2">DEFERIDO</text>
            </g>
          </g>
        </g>

        {/* Balança da justiça */}
        <g className="hs-beam" transform="translate(0 0)">
          {/* center column */}
          <rect x="266" y="60" width="8" height="240" rx="2" fill="#F1A34F"/>
          {/* base */}
          <rect x="240" y="298" width="60" height="8" rx="2" fill="#F1A34F"/>
          <rect x="220" y="304" width="100" height="6" rx="3" fill="#F1A34F" opacity="0.7"/>
          {/* top finial */}
          <circle cx="270" cy="56" r="8" fill="#F1A34F"/>
          {/* horizontal beam */}
          <rect x="100" y="96" width="340" height="6" rx="3" fill="#F1A34F"/>
          {/* Strings to pans */}
          <line x1="110" y1="100" x2="110" y2="200" stroke="#F1A34F" strokeWidth="1.5"/>
          <line x1="430" y1="100" x2="430" y2="200" stroke="#F1A34F" strokeWidth="1.5"/>
        </g>

        {/* Left pan */}
        <g className="hs-pan-l">
          <path d="M70 210 Q110 250 150 210" fill="none" stroke="#F1A34F" strokeWidth="3"/>
          <line x1="110" y1="200" x2="110" y2="210" stroke="#F1A34F" strokeWidth="2"/>
          <rect x="90" y="195" width="40" height="6" rx="2" fill="#F1A34F"/>
          {/* document icon in pan */}
          <rect x="98" y="172" width="24" height="22" rx="2" fill="#FBFAF7" stroke="#010A2C" strokeWidth="0.6"/>
          <line x1="102" y1="180" x2="118" y2="180" stroke="#010A2C" strokeWidth="0.8"/>
          <line x1="102" y1="184" x2="118" y2="184" stroke="#010A2C" strokeWidth="0.8"/>
          <line x1="102" y1="188" x2="114" y2="188" stroke="#010A2C" strokeWidth="0.8"/>
        </g>

        {/* Right pan */}
        <g className="hs-pan-r">
          <path d="M390 210 Q430 250 470 210" fill="none" stroke="#F1A34F" strokeWidth="3"/>
          <line x1="430" y1="200" x2="430" y2="210" stroke="#F1A34F" strokeWidth="2"/>
          <rect x="410" y="195" width="40" height="6" rx="2" fill="#F1A34F"/>
          {/* coin icon in pan */}
          <circle cx="430" cy="184" r="13" fill="#FBFAF7" stroke="#010A2C" strokeWidth="0.6"/>
          <text x="430" y="189" textAnchor="middle" fontFamily="Saira" fontSize="13" fontWeight="700" fill="#010A2C">R$</text>
        </g>

        {/* Frame ticks */}
        <g opacity="0.4">
          <line x1="40" y1="20" x2="40" y2="40" stroke="#F1A34F" strokeWidth="1.5"/>
          <line x1="20" y1="40" x2="40" y2="40" stroke="#F1A34F" strokeWidth="1.5"/>
          <line x1="500" y1="500" x2="500" y2="520" stroke="#F1A34F" strokeWidth="1.5"/>
          <line x1="500" y1="520" x2="520" y2="520" stroke="#F1A34F" strokeWidth="1.5"/>
        </g>
      </svg>
    </div>
  );
}

/* Stamp badge: a circular DEFERIDO stamp overlay for hero corner */
function HeroStampBadge() {
  return (
    <div className="hero-stamp-badge" aria-hidden="true">
      <svg viewBox="0 0 140 140" width="140" height="140">
        <defs>
          <path id="stampPath" d="M 70,70 m -50,0 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0"/>
        </defs>
        <circle cx="70" cy="70" r="62" fill="none" stroke="#F1A34F" strokeWidth="2"/>
        <circle cx="70" cy="70" r="56" fill="none" stroke="#F1A34F" strokeWidth="1" strokeDasharray="2 3" opacity="0.5"/>
        <text fontSize="9" fontFamily="Saira, Montserrat" fontWeight="700" fill="#F1A34F" letterSpacing="3">
          <textPath href="#stampPath" startOffset="0">· BENEFÍCIO · CONCEDIDO · DEFERIDO · INSS </textPath>
        </text>
        <text x="70" y="64" textAnchor="middle" fontFamily="Saira, Montserrat" fontSize="13" fontWeight="800" fill="#F1A34F" letterSpacing="2">DEFERIDO</text>
        <line x1="40" y1="74" x2="100" y2="74" stroke="#F1A34F" strokeWidth="1.2"/>
        <text x="70" y="88" textAnchor="middle" fontFamily="Saira, Montserrat" fontSize="8" fontWeight="600" fill="#F1A34F" letterSpacing="2">2026 · OAB/SC</text>
      </svg>
    </div>
  );
}

function Hero() {
  return (
    <section id="hero" className="hero">
      <image-slot
        id="hero-bg"
        class="hero-bg"
        shape="rect"
        fit="cover"
        src="assets/hero-home.jpg"
        placeholder="Imagem de fundo do hero (direito/justiça/aposentadoria)"
      ></image-slot>
      <div className="hero-bg-overlay"></div>
      <div className="container">
        <div className="hero-grid">
          <div className="reveal in">
            <div className="hero-eyebrow">Atendimento Previdenciário · Florianópolis/SC</div>
            <h1>
              Transformando conhecimento previdenciário em defesa de direitos.
            </h1>
            <p className="hero-sub">
              Atuamos em aposentadorias, planejamento previdenciário, benefícios por incapacidade,
              revisões, pensão por morte, auxílio-acidente e BPC — do pedido administrativo à ação judicial.
            </p>
            <div className="hero-actions">
              <a className="btn btn-primary" href={waMsg()} target="_blank" rel="noopener">
                {Icon.whatsapp}
                <span>Contato com o escritório</span>
              </a>
              <a className="btn btn-ghost" href="#calculadora">
                Simular meu caso
                {Icon.arrow}
              </a>
            </div>
            <div className="hero-trust">
              <div className="pill">{Icon.award}<span>+7 anos de atuação exclusiva</span></div>
              <div className="pill">{Icon.shield}<span>OAB/SC 58.998</span></div>
              <div className="pill">{Icon.check}<span>5,0 ★ no Google · 46 clientes</span></div>
            </div>
          </div>
        </div>
      </div>
      <div className="scroll-cue">
        <span>Role para conhecer</span>
        <div className="line"></div>
      </div>
    </section>
  );
}

/* ---------- Stats bar (counters) ---------- */
function StatCard({ target, label, suffix = '', prefix = '', decimals = 0 }) {
  const ref = React.useRef();
  const v = useCounter(ref, target, { decimals });
  return (
    <div className="stat-card" ref={ref}>
      <div className="stat-num">
        {prefix}{v}{suffix && <small>{suffix}</small>}
      </div>
      <div className="stat-label">{label}</div>
    </div>
  );
}
function Stats() {
  return (
    <section className="stats-bar">
      <div className="container">
        <div className="stats-grid">
          <StatCard target={7} suffix="+ anos" label="Atuação no Previdenciário"/>
          <StatCard target={1500} suffix="+" label="Casos analisados"/>
          <StatCard target={5} suffix=",0 ★" label="Avaliação Google Reviews"/>
          <StatCard target={100} suffix="% SC" label="Atendimento em todo o estado"/>
        </div>
      </div>
    </section>
  );
}

/* ---------- ÁREAS DE ATUAÇÃO ---------- */

/* Each area card has a distinct SVG illustration with subtle hover animation */
const AREAS = [
  {
    id: 'aposentadoria',
    title: 'Aposentadorias',
    sub: 'Idade · Tempo de contribuição · Rural · Especial',
    desc: 'Análise completa para identificar e solicitar o melhor tipo de aposentadoria conforme seu histórico e categoria profissional.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="28" cy="28" r="22"/>
        <polyline className="illu-anim-1" points="28 14 28 28 38 34"/>
        <circle cx="28" cy="28" r="2" fill="currentColor" stroke="none" className="illu-pulse"/>
      </svg>
    ),
  },
  {
    id: 'invalidez',
    title: 'Aposentadoria por Incapacidade Permanente',
    sub: 'Incapacidade permanente para o trabalho',
    desc: 'Suporte jurídico completo para segurados permanentemente incapacitados de exercer sua atividade.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M28 8 L48 28 L28 48 L8 28 Z"/>
        <path className="illu-anim-1" d="M20 28 L26 34 L36 22"/>
        <circle cx="28" cy="14" r="2" fill="currentColor" stroke="none" className="illu-pulse"/>
      </svg>
    ),
  },
  {
    id: 'auxilio',
    title: 'Auxílio por Incapacidade Temporária',
    sub: 'Antigo auxílio-doença',
    desc: 'Assistência para quem precisa se afastar do trabalho por doença ou lesão temporária.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="10" y="14" width="36" height="32" rx="3"/>
        <path className="illu-anim-1" d="M28 24 V36 M22 30 H34"/>
        <line x1="14" y1="14" x2="14" y2="10"/>
        <line x1="42" y1="14" x2="42" y2="10"/>
      </svg>
    ),
  },
  {
    id: 'acidente',
    title: 'Auxílio-Acidente',
    sub: 'Redução permanente (ainda que mínima) da capacidade laboral',
    desc: 'Orientação para segurados que sofreram redução permanente (ainda que mínima) da capacidade laboral após acidente.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M8 40 L20 24 L28 32 L48 12"/>
        <polyline points="48 22 48 12 38 12"/>
        <circle className="illu-pulse" cx="20" cy="24" r="2" fill="currentColor" stroke="none"/>
      </svg>
    ),
  },
  {
    id: 'reclusao',
    title: 'Auxílio-Reclusão',
    sub: 'Dependentes do segurado',
    desc: 'Atendimento para dependentes que têm direito ao benefício mesmo com renda familiar limitada.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="12" y="16" width="32" height="32" rx="2"/>
        <line x1="20" y1="16" x2="20" y2="48"/>
        <line x1="28" y1="16" x2="28" y2="48"/>
        <line x1="36" y1="16" x2="36" y2="48"/>
        <circle className="illu-pulse" cx="28" cy="10" r="3" fill="currentColor" stroke="none"/>
      </svg>
    ),
  },
  {
    id: 'maternidade',
    title: 'Salário-Maternidade',
    sub: 'Gestantes, adotantes, guarda judicial',
    desc: 'Solicitação do benefício para gestantes, adotantes ou famílias em situação legal.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="28" cy="18" r="6"/>
        <path d="M16 48 C16 36 22 30 28 30 C34 30 40 36 40 48"/>
        <path className="illu-anim-2" d="M28 30 C24 36 24 42 28 46 C32 42 32 36 28 30 Z" fill="currentColor" stroke="none" opacity="0.18"/>
      </svg>
    ),
  },
  {
    id: 'pensao',
    title: 'Pensão por Morte',
    sub: 'Cônjuges, filhos e dependentes',
    desc: 'Apoio para dependentes garantirem o benefício corretamente, com a documentação adequada.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path className="illu-pulse" d="M28 46 C18 38 8 30 8 20 C8 14 12 10 18 10 C22 10 26 12 28 16 C30 12 34 10 38 10 C44 10 48 14 48 20 C48 30 38 38 28 46 Z"/>
      </svg>
    ),
  },
  {
    id: 'bpc',
    title: 'BPC / LOAS',
    sub: 'Pessoa com Deficiência · Idoso',
    desc: 'Análise de requisitos e acompanhamento em todo o processo de Benefício de Prestação Continuada.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="28" cy="28" r="20"/>
        <path className="illu-anim-1" d="M20 28 L28 36 L40 22"/>
      </svg>
    ),
  },
  {
    id: 'planejamento',
    title: 'Planejamento Previdenciário',
    sub: 'Estratégia para aposentar melhor',
    desc: 'Estratégias personalizadas para planejamento das futuras contribuições, análise do momento mais adequado para o requerimento do benefício e orientação sobre a documentação necessária.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M8 44 L20 32 L28 38 L48 16"/>
        <polyline points="48 26 48 16 38 16"/>
        <rect x="6" y="44" width="44" height="2" fill="currentColor" stroke="none"/>
      </svg>
    ),
  },
  {
    id: 'requerimentos',
    title: 'Requerimentos Administrativos',
    sub: 'Revisões e ajustes no INSS',
    desc: 'Regularização de valores não pagos, suspensão indevida, benefícios não recebidos e outros ajustes.',
    illu: (
      <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="12" y="8" width="32" height="40" rx="2"/>
        <line x1="18" y1="18" x2="38" y2="18"/>
        <line x1="18" y1="26" x2="38" y2="26"/>
        <line x1="18" y1="34" x2="32" y2="34"/>
        <circle className="illu-pulse" cx="38" cy="42" r="4" fill="currentColor" stroke="none"/>
      </svg>
    ),
  },
];

function Areas() {
  return (
    <section id="areas" className="section-pad paper-tex">
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Serviços Previdenciários</div>
          <h2 className="sec-h">Conheça as áreas em que <b>defendemos seu direito</b></h2>
          <p className="sec-lede center">
            Cada caso tem suas particularidades. Identificamos o benefício certo, montamos a prova
            necessária e acompanhamos você do INSS até a Justiça Federal, se preciso.
          </p>
        </div>
        <div className="areas-grid">
          {AREAS.map((a, i) => (
            <article key={a.id} id={a.id} className="area-card reveal" style={{ transitionDelay: `${(i % 5) * 60}ms` }}>
              <div className="area-illu">{a.illu}</div>
              <h3>{a.title}</h3>
              <div className="sub">{a.sub}</div>
              <p>{a.desc}</p>
              <a className="saiba" href={`areas.html#${a.id}`}>
                Saiba mais {Icon.arrow}
              </a>
            </article>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 48 }} className="reveal">
          <a className="btn btn-primary" href={waMsg()} target="_blank" rel="noopener">
            {Icon.whatsapp}<span>Contato com o escritório</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- DIFERENCIAIS ---------- */
function Diferenciais() {
  const items = [
    { n: '01', ico: Icon.award, title: 'Busca pelo melhor benefício', desc: 'Analisamos todos os cenários possíveis (regras de transição, direito adquirido, atividade especial, rural, enquadramento como PCD, tempo militar, aspirante à vida religiosa, processo trabalhista e etc.) para lutar pelo melhor benefício com maior retorno financeiro.' },
    { n: '02', ico: Icon.shield, title: 'Atuação exclusiva', desc: 'Nosso escritório atua apenas no direito previdenciário, com parcerias em outras áreas do direito. Aqui estamos sempre atentos à jurisprudência atualizada e domínio técnico da legislação previdenciária.' },
    { n: '03', ico: Icon.heart, title: 'Atendimento direto e personalizado', desc: 'Cada caso é analisado de forma estratégica, com acompanhamento direto do Dr. Diego, com foco nas particularidades da sua história previdenciária.' },
  ];
  return (
    <section id="diferenciais" className="section-pad diff-strip">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow on-navy">Diferenciais</div>
          <h2 className="sec-h sec-h-on-navy">
            <b>Por que confiar</b> no nosso escritório?
          </h2>
          <p className="sec-lede on-navy">
            Diferente de escritórios genéricos, aqui você recebe atendimento técnico, dedicado e
            personalizado. Nosso compromisso é com a sua tranquilidade e o seu direito.
          </p>
        </div>
        <div className="diff-grid">
          {items.map((it, i) => (
            <div key={it.n} className="diff-card reveal" style={{ transitionDelay: `${i * 100}ms` }}>
              <div className="n">{it.n}</div>
              <div className="ico">{it.ico}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- COMO FUNCIONA (3 passos animação sequencial) ---------- */
function ComoFunciona() {
  const stepsRef = React.useRef();
  const railRef = React.useRef();
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          // arm rail (line drawing)
          railRef.current && railRef.current.classList.add('armed');
          // sequentially mark steps
          const steps = e.target.querySelectorAll('.step');
          steps.forEach((s, i) => setTimeout(() => s.classList.add('in'), i * 400));
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.4 });
    stepsRef.current && io.observe(stepsRef.current);
    return () => io.disconnect();
  }, []);

  const steps = [
    { n: '01', title: 'Atendimento personalizado', desc: 'Conversamos sobre seu caso, escutamos sua história e analisamos os documentos e dados necessários.' },
    { n: '02', title: 'Estratégia jurídica', desc: 'Identificamos o benefício certo, orientamos sobre a prova e decidimos juntos o caminho a seguir — administrativo ou judicial.' },
    { n: '03', title: 'Acompanhamento até o fim', desc: 'Seguimos juntos até o final do processo.' },
  ];

  return (
    <section id="processo" className="section-pad paper-tex" style={{ background: 'var(--td-paper)' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Como Funciona</div>
          <h2 className="sec-h">Nosso processo <b>em 3 passos</b></h2>
          <p className="sec-lede center"></p>
        </div>

        <div className="steps-wrap" ref={stepsRef}>
          <div className="steps-rail" ref={railRef}><div className="fill"></div></div>
          <div className="steps-grid">
            {steps.map((s) => (
              <div key={s.n} className="step">
                <div className="num-wrap">{s.n}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 56 }} className="reveal">
          <a className="btn btn-primary" href={waMsg()} target="_blank" rel="noopener">
            {Icon.whatsapp}<span>Quero agendar minha consulta</span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Stats, Areas, Diferenciais, ComoFunciona });
