/* Internal pages, Serviços, Sobre, Contato */
const { useState: useS, useEffect: useE, useMemo: useM } = React;

/* ============ SERVIÇOS ============ */
function ServicosPage() {
  useReveal();
  const { lang } = useLang();
  const links = [
    { id: "servicos.html", page: "servicos", label: { pt: "Serviços", en: "Services" }, href: "servicos.html" },
    { id: "sobre.html", page: "sobre", label: { pt: "Sobre", en: "About" }, href: "sobre.html" },
    { id: "contato.html", page: "contato", label: { pt: "Contato", en: "Contact" }, href: "contato.html" },
    { id: "index.html", page: "home", label: { pt: "Início", en: "Home" }, href: "index.html" },
  ];
  const { setOpen } = { setOpen: (k) => window.__openModal?.(k) };

  /* Featured services (Marriage Green Card + EB-3): detailed layout with bullet list */
  const featured = lang === "en" ? [
    {
      id: "green-card", num: "01", form: "I-130 · I-485 · DS-260",
      title: "Marriage Green Card",
      lead: "For those married to or about to marry a US citizen or Green Card holder.",
      body: "I handle the process from filing to interview, curating evidence and assembling the full package. There's a path for those who want to do most of it themselves with technical review, and a path for those who want to hand everything to me. The consistency of your story matters as much as the documents you submit.",
      bullets: [
        "I-130 Petition (Petition for Alien Relative), the family link USCIS evaluates first",
        "I-485 status adjustment in the US or consular processing (DS-260) abroad",
        "Curation of documentary evidence of the relationship (financial, photos, witness statements, joint life)",
        "USCIS interview preparation (Stokes interview included when applicable)",
        "Risk assessment: public charge, immigration history, prior overstays or visa denials",
        "Full support through Work Permit (EAD), Travel Permit (AP), and the final approval",
      ],
    },
    {
      id: "eb3", num: "02", form: "PERM · I-140 · I-485 / DS-260",
      title: "EB-3, work visa",
      lead: "For those who want to migrate for real through a US job offer.",
      body: "I work with people still researching all the way to those with a job offer in hand ready to close. EB-3 is a long process, so what I deliver is security on the path, not a promise of a short timeline. Before anything else, we evaluate whether EB-3 actually makes sense for your profile, or whether another category is more suitable.",
      bullets: [
        "Official EB-3 eligibility form, reviewed by me personally",
        "EB-3 Skilled, Professional, or Other Worker, the strategic choice for your profile",
        "Validation of the job offer and the petitioning employer (legitimacy and capacity to sponsor)",
        "PERM (Labor Certification), I-140, and I-485 or DS-260 status adjustment",
        "Guidance for dependents (spouse with EAD and children under 21)",
        "Long-term strategy after approval: removal of conditions, renewal, naturalization",
      ],
    },
  ] : [
    {
      id: "green-card", num: "01", form: "I-130 · I-485 · DS-260",
      title: "Green Card por casamento",
      lead: "Para quem é casado ou vai se casar com cidadão americano ou portador de Green Card.",
      body: "Conduzo o processo do peticionamento à entrevista, com curadoria de evidências e montagem completa do pacote. Tem caminho pra quem quer fazer parte do processo por conta própria com revisão técnica, e tem caminho pra quem quer entregar tudo nas minhas mãos. A consistência da sua história importa tanto quanto os documentos que você apresenta.",
      bullets: [
        "Petição I-130 (Petition for Alien Relative), o vínculo familiar que o USCIS analisa primeiro",
        "Ajuste de status I-485 nos EUA ou processamento consular (DS-260) no Brasil",
        "Curadoria de documentação probatória da relação (financeira, fotos, declarações, vida em comum)",
        "Preparação para entrevista no USCIS (Stokes interview inclusa quando aplicável)",
        "Avaliação de riscos: public charge, histórico migratório, overstays e negações anteriores",
        "Acompanhamento completo: Work Permit (EAD), Travel Permit (AP) e aprovação final",
      ],
    },
    {
      id: "eb3", num: "02", form: "PERM · I-140 · I-485 / DS-260",
      title: "EB-3, visto de trabalho",
      lead: "Para quem quer migrar pra valer através de uma oferta de emprego nos EUA.",
      body: "Atendo desde quem ainda está pesquisando até quem já tem oferta na mão e precisa fechar o processo. EB-3 é processo longo. Por isso, o que entrego é segurança no caminho, não promessa de prazo curto. Antes de qualquer coisa, a gente avalia se o EB-3 faz sentido pro seu perfil, ou se outra categoria é mais adequada.",
      bullets: [
        "Formulário oficial de elegibilidade EB-3, com análise pessoal minha",
        "EB-3 Skilled, Professional ou Other Worker, a escolha estratégica pro seu perfil",
        "Validação da oferta de emprego e do empregador peticionador (legitimidade e capacidade de patrocínio)",
        "PERM (Labor Certification), I-140 e ajuste de status I-485 ou DS-260",
        "Orientação para dependentes (cônjuge com EAD e filhos menores de 21 anos)",
        "Estratégia de longo prazo pós-aprovação: removal of conditions, renovação, naturalização",
      ],
    },
  ];

  /* Other services grouped by life moment */
  const groups = lang === "en" ? [
    {
      kicker: "To start your journey",
      items: [
        {
          id: "consulares", form: "DS-160",
          title: "Consular visas (B1/B2, F-1, J-1)",
          body: "Full preparation for the US Consulate interview in Brazil. I work with three profiles: tourism (B1/B2), student (F-1), and exchange or Au Pair (J-1).",
          bullets: [
            "DS-160 filing, scheduling, and consular fee guidance",
            "Mock interview with realistic questions for your case",
            "Document curation: financial ties, employment, return intent",
            "F-1 specific: SEVP-certified institution selection, I-20, SEVIS payment",
            "J-1 specific: program sponsor validation, post-program planning",
            "Risk assessment for past denials, overstays, or 214(b) refusals",
          ],
        },
      ],
    },
    {
      kicker: "To keep your status while the case runs",
      items: [
        {
          id: "ead", form: "I-765",
          title: "Work Permit (EAD)",
          body: "Filing or renewal of work authorization while your immigration case is pending. Without an EAD, working legally in the US during the wait isn't possible.",
          bullets: [
            "I-765 filing aligned with the main case",
            "Renewal before expiration to avoid work interruption",
            "Combo Card request (EAD + Advance Parole) when applicable",
            "Support if there's a delay or RFE on the EAD",
          ],
        },
        {
          id: "travel", form: "I-131",
          title: "Travel Permit (Advance Parole)",
          body: "Filing or renewal of international travel authorization during your case. Without Advance Parole, leaving the US with a pending case can mean abandoning the entire process.",
          bullets: [
            "I-131 filing tied to the main case",
            "Travel risk assessment based on immigration history",
            "Guidance on when to travel and when to wait",
            "Combo Card (EAD + AP) when the timeline allows",
          ],
        },
        {
          id: "i751", form: "I-751",
          title: "Removal of Conditions (Green Card renewal)",
          body: "Converting the 2-year conditional Green Card into the permanent 10-year Green Card. The window to file is 90 days before expiration and the process needs to prove the marriage is still real.",
          bullets: [
            "I-751 filing (jointly or with waiver if divorce/abuse)",
            "New round of documentary evidence of the relationship",
            "Preparation for a second interview when called",
            "Timeline planning so you don't go out of status",
          ],
        },
      ],
    },
    {
      kicker: "To regularize or recover a case",
      items: [
        {
          id: "status", form: "I-539",
          title: "Change of status",
          body: "For those already in the US who need to transition between visa categories, most often from tourist (B2) to student (F-1) or to another non-immigrant category. Done before the current status expires.",
          bullets: [
            "I-539 filing with the technical reasoning USCIS expects",
            "Risk assessment of intent and short-stay history",
            "Sponsor/institution coordination when applicable",
            "Alternative plan if change of status isn't viable",
          ],
        },
        {
          id: "motion", form: "I-290B",
          title: "Motion to Reopen / Reconsider",
          body: "For those whose case was denied or closed and who want to bring back new facts, new evidence, or formally contest the decision. Tight 30-day deadline from the notification.",
          bullets: [
            "Technical review of the denial reason in the notice",
            "Strategy: motion to reopen, motion to reconsider, or appeal",
            "Drafting of the legal grounds and assembly of new evidence",
            "Filing within the formal deadline",
          ],
        },
        {
          id: "rfe", form: "RFE",
          title: "Response to Request for Evidence (RFE)",
          body: "For those who received a formal USCIS request and need to put together a technical response within the deadline. An RFE isn't a denial: it's the chance to fix what's missing before the decision.",
          bullets: [
            "Reading and interpretation of exactly what USCIS is asking",
            "Curation of complementary evidence",
            "Drafting of the technical response letter",
            "Filing within the deadline stated in the notice",
          ],
        },
      ],
    },
    {
      kicker: "To complete the cycle",
      items: [
        {
          id: "naturalizacao", form: "N-400 · N-600",
          title: "Naturalization (US citizenship)",
          body: "Full application for American citizenship for those who already meet residency time and other requirements. Closing the cycle that began with the first visa.",
          bullets: [
            "Eligibility analysis: residency time, physical presence, good moral character",
            "N-400 filing for residents and N-600 for children of citizens",
            "Civics test and English interview preparation",
            "Citizenship oath ceremony support",
          ],
        },
      ],
    },
  ] : [
    {
      kicker: "Pra começar a sua jornada",
      items: [
        {
          id: "consulares", form: "DS-160",
          title: "Vistos consulares (B1/B2, F-1, J-1)",
          body: "Preparação completa para a entrevista no Consulado dos EUA no Brasil. Atendo três perfis: turismo (B1/B2), estudante (F-1) e intercâmbio ou Au Pair (J-1).",
          bullets: [
            "Preenchimento do DS-160, agendamento e orientação sobre taxa consular",
            "Simulação de entrevista com perguntas realistas pro seu caso",
            "Curadoria de documentos: vínculos financeiros, emprego, intenção de retorno",
            "Específico F-1: escolha de instituição SEVP-certified, I-20 e pagamento do SEVIS",
            "Específico J-1: validação do sponsor do programa e planejamento pós-programa",
            "Avaliação de risco pra histórico de negação, overstay ou 214(b)",
          ],
        },
      ],
    },
    {
      kicker: "Pra manter o seu status enquanto o processo corre",
      items: [
        {
          id: "ead", form: "I-765",
          title: "Autorização de trabalho (EAD)",
          body: "Solicitação ou renovação da autorização de trabalho enquanto o seu processo imigratório está em andamento. Sem o EAD, trabalhar legalmente nos EUA durante a espera não é possível.",
          bullets: [
            "Solicitação do I-765 alinhada com o caso principal",
            "Renovação antes do vencimento pra evitar interrupção no trabalho",
            "Pedido de Combo Card (EAD + Advance Parole) quando aplicável",
            "Acompanhamento se houver atraso ou RFE no EAD",
          ],
        },
        {
          id: "travel", form: "I-131",
          title: "Autorização de viagem (Advance Parole)",
          body: "Solicitação ou renovação da autorização de viagem internacional durante o seu processo. Sem o Advance Parole, sair dos EUA com um caso pendente pode significar abandonar todo o processo.",
          bullets: [
            "Solicitação do I-131 vinculada ao caso principal",
            "Avaliação de risco de viagem baseada no histórico migratório",
            "Orientação sobre quando viajar e quando esperar",
            "Combo Card (EAD + AP) quando o cronograma permite",
          ],
        },
        {
          id: "i751", form: "I-751",
          title: "Renovação do Green Card (Removal of Conditions)",
          body: "Conversão do Green Card condicional de 2 anos para o permanente de 10 anos. A janela pra peticionar é de 90 dias antes do vencimento e o processo precisa provar que o casamento continua real.",
          bullets: [
            "Solicitação do I-751 (em conjunto ou com waiver em caso de divórcio/abuso)",
            "Nova rodada de evidências documentais da relação",
            "Preparação pra uma segunda entrevista quando convocada",
            "Planejamento de prazos pra você não ficar fora de status",
          ],
        },
      ],
    },
    {
      kicker: "Pra regularizar ou recuperar um caso",
      items: [
        {
          id: "status", form: "I-539",
          title: "Mudança de status",
          body: "Para quem já está nos EUA e precisa transicionar entre categorias de visto, mais frequentemente de turista (B2) para estudante (F-1) ou outra categoria de não-imigrante. Feita antes do status atual vencer.",
          bullets: [
            "Solicitação do I-539 com o argumento técnico que o USCIS espera",
            "Avaliação de risco de intenção e histórico de estadias curtas",
            "Coordenação com sponsor/instituição quando aplicável",
            "Plano alternativo caso a mudança de status não seja viável",
          ],
        },
        {
          id: "motion", form: "I-290B",
          title: "Reabertura de caso (Motion to Reopen / Reconsider)",
          body: "Para quem teve um caso negado ou arquivado e quer trazer fatos novos, novas evidências ou contestar formalmente a decisão. Prazo apertado de 30 dias após a notificação.",
          bullets: [
            "Análise técnica do motivo da negação no notice",
            "Estratégia: motion to reopen, motion to reconsider ou recurso",
            "Redação do fundamento legal e montagem de novas evidências",
            "Peticionamento dentro do prazo formal",
          ],
        },
        {
          id: "rfe", form: "RFE",
          title: "Resposta a Pedido de Evidências (RFE)",
          body: "Para quem recebeu uma solicitação formal do USCIS e precisa montar uma resposta técnica dentro do prazo. Um RFE não é negação: é a chance de corrigir o que falta antes da decisão.",
          bullets: [
            "Leitura e interpretação do que exatamente o USCIS está pedindo",
            "Curadoria das evidências complementares",
            "Redação da carta técnica de resposta",
            "Peticionamento dentro do prazo informado no notice",
          ],
        },
      ],
    },
    {
      kicker: "Pra concluir o ciclo",
      items: [
        {
          id: "naturalizacao", form: "N-400 · N-600",
          title: "Naturalização (cidadania americana)",
          body: "Aplicação completa para a cidadania americana pra quem já cumpre o tempo de residência e os demais requisitos. Fechando o ciclo que começou com o primeiro visto.",
          bullets: [
            "Análise de elegibilidade: tempo de residência, presença física, good moral character",
            "Peticionamento do N-400 para residentes e N-600 para filhos de cidadãos",
            "Preparação para o teste de civics e entrevista em inglês",
            "Acompanhamento até a cerimônia de juramento (oath ceremony)",
          ],
        },
      ],
    },
  ];

  /* Individual consultation (final CTA-style card) */
  const individual = lang === "en"
    ? { kicker: "To decide the best path", title: "Individual Consultation", form: "60 min · Video call · US$ 150", body: "60-minute session with me, over video call. For those unsure which path to take, or who want to understand their own scenario before starting any case. The focus is on answering your questions in depth and clarifying your next step." }
    : { kicker: "Pra decidir o melhor caminho", title: "Sessão de Atendimento Individual", form: "60 min · Videochamada · US$ 150", body: "Sessão de 60 minutos comigo, em videochamada. Para quem está em dúvida sobre qual caminho seguir, ou quer entender o próprio cenário antes de iniciar qualquer processo. O foco é tirar dúvidas com profundidade e clarear o seu próximo passo." };

  return (
    <ModalProvider>
      <Nav links={links} currentPage="servicos" />
      <main>
        {/* HERO */}
        <section className="section" style={{ paddingBottom: 32 }}>
          <div className="container">
            <div className="reveal" style={{ maxWidth: 920 }}>
              <div className="t-overline mb-3"><span style={{ display: "inline-block", width: 24, height: 1, background: "var(--c-terracota)", verticalAlign: "middle", marginRight: 12 }}></span>{tx("Serviços", "Services", lang)}</div>
              <h1 className="t-display mb-6">
                {lang === "en" ? (
                  <>The full immigration cycle,{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>from first visa to citizenship.</span></>
                ) : (
                  <>Todo o ciclo migratório,{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>do primeiro visto à cidadania.</span></>
                )}
              </h1>
              <p className="t-lead mw-prose mb-4">
                {tx(
                  "As duas frentes principais são Green Card por casamento e EB-3. Em volta delas, ofereço suporte completo pra cada momento do seu cenário migratório.",
                  "The two main focus areas are Marriage Green Card and EB-3. Around them, I offer full support for every moment of your immigration scenario.",
                  lang
                )}
              </p>
              <p className="t-body t-soft mw-prose">
                {tx(
                  "Cada caminho tem seu próprio peso técnico, seu cronograma e seus riscos. Aqui está o detalhe completo de como conduzo cada um.",
                  "Each path has its own technical weight, timeline, and risks. Here's the full detail of how I handle each one.",
                  lang
                )}
              </p>
            </div>
          </div>
        </section>

        {/* GROUP HEADER: Featured (Green Card + EB-3) */}
        <section className="section section--sand" style={{ paddingBottom: 24 }}>
          <div className="container">
            <div className="reveal" style={{ maxWidth: 760 }}>
              <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{tx("Pra construir uma vida estável nos EUA", "To build a stable life in the US", lang)}</div>
              <h2 className="t-h2">{tx("As duas frentes principais.", "The two main focus areas.", lang)}</h2>
            </div>
          </div>
        </section>

        {/* FEATURED SERVICES: Green Card + EB-3 with detailed bullets */}
        {featured.map((s, i) => (
          <section key={s.id} id={s.id} className={`section ${i % 2 === 0 ? "section--sand" : ""}`} style={{ scrollMarginTop: 100, paddingTop: i === 0 ? 24 : undefined }}>
            <div className="container">
              <div className="reveal grid servicos-featured-grid" style={{ gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "start" }}>
                <div>
                  <div className="flex items-center gap-3 mb-6">
                    <span style={{ fontFamily: "var(--ff-display)", fontSize: 14, fontWeight: 700, color: "var(--c-terracota)" }}>{s.num}</span>
                    <span className="t-overline" style={{ color: "var(--c-navy)", opacity: 0.6 }}>{s.form}</span>
                  </div>
                  <h2 className="t-h1 mb-4">{s.title}</h2>
                  <p className="t-lead mb-4">{s.lead}</p>
                  <p className="t-body t-soft mb-8">{s.body}</p>
                  <div className="flex gap-3" style={{ flexWrap: "wrap" }}>
                    {s.id === "eb3" ? (
                      <button className="btn btn--accent" onClick={() => setOpen("eb3")}>{tx("Verificar elegibilidade EB-3", "Check EB-3 eligibility", lang)}<svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg></button>
                    ) : null}
                    <a className="btn btn--primary" href="contato.html">{tx("Conversar sobre meu caso", "Talk about my case", lang)}<svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg></a>
                  </div>
                </div>
                <div className="card" style={{ background: i % 2 === 0 ? "var(--c-offwhite)" : "var(--c-offwhite-warm)", padding: 32 }}>
                  <div className="t-overline mb-4">{tx("O que está incluído", "What's included", lang)}</div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                    {s.bullets.map((b, j) => (
                      <li key={j} style={{ padding: "14px 0", borderBottom: j < s.bullets.length - 1 ? "1px solid var(--c-navy-12)" : "none", display: "flex", gap: 14, fontSize: 15, lineHeight: 1.55 }}>
                        <span style={{ width: 22, height: 22, flexShrink: 0, borderRadius: "50%", background: "var(--c-navy)", color: "var(--c-offwhite)", display: "grid", placeItems: "center", fontFamily: "var(--ff-display)", fontSize: 11, marginTop: 1 }}>{String(j + 1).padStart(2, "0")}</span>
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </section>
        ))}

        {/* OTHER GROUPS */}
        {groups.map((g, gi) => (
          <section key={gi} className={`section ${gi % 2 === 0 ? "" : "section--sand"}`} style={{ paddingTop: 56, paddingBottom: 56 }}>
            <div className="container">
              <div className="reveal mb-12" style={{ maxWidth: 760 }}>
                <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{g.kicker}</div>
              </div>
              <div className="reveal grid servicos-other-grid" style={{ gridTemplateColumns: g.items.length === 1 ? "1fr" : "repeat(auto-fit, minmax(320px, 1fr))", gap: 24 }}>
                {g.items.map((it) => (
                  <div key={it.id} id={it.id} className="servicos-card" style={{ scrollMarginTop: 100, background: gi % 2 === 0 ? "var(--c-offwhite-warm)" : "var(--c-offwhite)", border: "1px solid var(--c-navy-12)", borderRadius: "var(--r-lg)", padding: 32, display: "flex", flexDirection: "column" }}>
                    <div className="t-overline mb-3" style={{ color: "var(--c-navy)", opacity: 0.55 }}>{it.form}</div>
                    <h3 className="t-h3 mb-3" style={{ fontSize: 22 }}>{it.title}</h3>
                    <p className="t-body t-soft mb-6" style={{ fontSize: 14.5, lineHeight: 1.6 }}>{it.body}</p>
                    <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", borderTop: "1px solid var(--c-navy-12)" }}>
                      {it.bullets.map((b, j) => (
                        <li key={j} style={{ padding: "12px 0", borderBottom: "1px solid var(--c-navy-12)", display: "flex", gap: 12, fontSize: 13.5, lineHeight: 1.55 }}>
                          <span style={{ width: 5, height: 5, flexShrink: 0, borderRadius: "50%", background: "var(--c-terracota)", marginTop: 8 }}></span>
                          {b}
                        </li>
                      ))}
                    </ul>
                    <a className="btn btn--outline" style={{ marginTop: "auto", fontSize: 13 }} href="contato.html">
                      {tx("Falar sobre o meu caso", "Talk about my case", lang)}
                      <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </a>
                  </div>
                ))}
              </div>
            </div>
          </section>
        ))}

        {/* INDIVIDUAL CONSULTATION (final CTA card) */}
        <section id="individual" className="section section--navy" style={{ scrollMarginTop: 100 }}>
          <div className="container">
            <div className="reveal grid servicos-individual-grid" style={{ gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 5vw, 72px)", alignItems: "center" }}>
              <div>
                <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{individual.kicker}</div>
                <h2 className="t-h1 mb-4" style={{ color: "var(--c-offwhite)" }}>{individual.title}</h2>
                <div className="t-overline mb-6" style={{ color: "rgba(244,243,236,0.6)" }}>{individual.form}</div>
                <p className="t-body" style={{ color: "rgba(244,243,236,0.82)", lineHeight: 1.7 }}>{individual.body}</p>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <button className="btn btn--accent btn--lg" onClick={() => setOpen("agenda")}>
                  {tx("Agendar com a Raísa", "Book with Raísa", lang)}
                  <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
                <button className="btn btn--outline btn--lg" style={{ color: "var(--c-offwhite)", borderColor: "rgba(244,243,236,0.3)" }} onClick={() => setOpen("eb3")}>
                  {tx("Verificar elegibilidade EB-3", "Check EB-3 eligibility", lang)}
                  <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ModalRenderer />
    </ModalProvider>
  );
}

/* ============ SOBRE ============ */
function SobrePage() {
  useReveal();
  const { lang } = useLang();
  const links = [
    { id: "servicos.html", page: "servicos", label: { pt: "Serviços", en: "Services" }, href: "servicos.html" },
    { id: "sobre.html", page: "sobre", label: { pt: "Sobre", en: "About" }, href: "sobre.html" },
    { id: "contato.html", page: "contato", label: { pt: "Contato", en: "Contact" }, href: "contato.html" },
    { id: "index.html", page: "home", label: { pt: "Início", en: "Home" }, href: "index.html" },
  ];
  const principles = lang === "en" ? [
    { k: "Direct service", t: "The same person analyzes, advises, and files your case. You don't get stuck on a conveyor belt of attendants." },
    { k: "100% digital operation", t: "WhatsApp, email and Google Meet. Works for anyone in Brazil or in any US state." },
    { k: "Portuguese language", t: "Immigration is full of English terms. I translate it into language you understand, without leaving you lost in jargon." },
    { k: "Realistic guidance", t: "If your case has risk, you hear it from me before paying anything. If there's a path, I show it." },
    { k: "Presence at the critical moment", t: "I live in Boston and personally accompany Green Card interviews at the John F. Kennedy Federal Building when needed." },
    { k: "Support through citizenship", t: "I don't drop the case at approval. I follow you from EAD to conditional Green Card, renewal, and naturalization." },
  ] : [
    { k: "Atendimento direto", t: "Quem analisa, orienta e peticiona é a mesma pessoa. Você não cai numa esteira de atendentes." },
    { k: "Operação 100% digital", t: "WhatsApp, e-mail e Google Meet. Funciona pra quem está no Brasil ou em qualquer estado dos EUA." },
    { k: "Linguagem em português", t: "Imigração é cheia de termo em inglês. Eu traduzo isso pra uma linguagem que você entende, sem te deixar perdido em jargão." },
    { k: "Orientação realista", t: "Se o seu caso tem risco, você ouve isso de mim antes de pagar qualquer coisa. Se tem caminho, eu mostro." },
    { k: "Presença no momento crítico", t: "Moro em Boston e acompanho pessoalmente entrevistas de Green Card no John F. Kennedy Federal Building quando preciso." },
    { k: "Acompanhamento até a cidadania", t: "Não largo o caso na aprovação. Sigo com você do EAD ao Green Card condicional, renovação e naturalização." },
  ];

  const timeline = lang === "en" ? [
    { y: "2018", t: "Forest Engineering degree (UFLA)", b: "Graduated from Universidade Federal de Lavras, in Minas Gerais." },
    { y: "May 2019", t: "Arrived in the US as au pair", b: "First host family in New York. It didn't work out and the first months were tough." },
    { y: "2019", t: "Moved to Massachusetts", b: "A second family welcomed me. For two and a half years we lived as a family." },
    { y: "2021", t: "EB-3 sponsorship", b: "The host family sponsored my EB-3 Green Card. That's how I discovered the opportunity nobody was talking about in the Brazilian community." },
    { y: "2022", t: "Started advising for free", b: "Dozens of Brazilians around me were on the same path without knowing where to start. I started helping informally." },
    { y: "2023", t: "Founded Moura Immigration", b: "I got formal authorization to work as an immigration paralegal and built the company." },
    { y: "Today", t: "600+ immigrants advised", b: "I run one of the largest private EB-3 job groups in the US, with support from the first visa to citizenship." },
  ] : [
    { y: "2018", t: "Formada em Engenharia Florestal (UFLA)", b: "Graduada pela Universidade Federal de Lavras, em Minas Gerais." },
    { y: "Maio 2019", t: "Cheguei aos EUA como au pair", b: "Primeira família em Nova York. Não deu certo e os primeiros meses foram difíceis." },
    { y: "2019", t: "Mudança pra Massachusetts", b: "Uma segunda família me acolheu. Por dois anos e meio convivemos como parentes." },
    { y: "2021", t: "Sponsorship pro EB-3", b: "A família que me acolheu patrocinou meu Green Card por EB-3. Ali descobri a oportunidade que praticamente ninguém comentava com a comunidade brasileira." },
    { y: "2022", t: "Comecei a orientar de graça", b: "Dezenas de brasileiros ao meu redor estavam no mesmo caminho, sem saber por onde começar. Comecei a ajudar de forma informal." },
    { y: "2023", t: "Fundei a Moura Immigration", b: "Recebi autorização formal para atuar como paralegal de imigração e estruturei a empresa." },
    { y: "Hoje", t: "600+ imigrantes orientados", b: "Administro um dos maiores grupos privados de vagas de EB-3 dos EUA, com acompanhamento do primeiro visto à cidadania." },
  ];

  const numbers = lang === "en" ? [
    { n: "600+", l: "immigrants advised" },
    { n: "500+", l: "status changes filed and approved" },
    { n: "120+", l: "EB-3 cases initiated" },
    { n: "50+", l: "Green Card interviews attended in Boston" },
  ] : [
    { n: "600+", l: "imigrantes orientados" },
    { n: "500+", l: "mudanças de status concluídas e aprovadas" },
    { n: "120+", l: "processos de EB-3 iniciados" },
    { n: "50+", l: "entrevistas de Green Card acompanhadas em Boston" },
  ];
  return (
    <ModalProvider>
      <Nav links={links} currentPage="sobre" />
      <main>
        <section className="section">
          <div className="container">
            <div className="reveal grid" style={{ gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "center" }}>
              <div>
                <div className="t-overline mb-3"><span style={{ display: "inline-block", width: 24, height: 1, background: "var(--c-terracota)", verticalAlign: "middle", marginRight: 12 }}></span>{tx("Sobre a Raísa", "About Raísa", lang)}</div>
                <h1 className="t-display mb-6">
                  {lang === "en" ? (
                    <>I'm an immigration paralegal and <span style={{ fontStyle: "italic", fontWeight: 400 }}>founder</span> of Moura Immigration.</>
                  ) : (
                    <>Sou paralegal de imigração e <span style={{ fontStyle: "italic", fontWeight: 400 }}>fundadora</span> da Moura Immigration.</>
                  )}
                </h1>
                <p className="t-lead mb-4">
                  {tx(
                    "Trabalho com brasileiros que querem morar legalmente nos Estados Unidos. Conduzo cada processo de perto.",
                    "I work with people who want to live legally in the United States. I personally conduct every case.",
                    lang
                  )}
                </p>
                <p className="t-body">
                  {tx(
                    "Quando você fala comigo, está falando com a pessoa que vai assinar embaixo do seu caso, não com um atendente que repassa pra outra pessoa.",
                    "When you talk to me, you're talking to the person who will sign off on your case, not to an agent who passes it to someone else.",
                    lang
                  )}
                </p>
              </div>
              <div style={{ aspectRatio: "4 / 5", borderRadius: "var(--r-md)", overflow: "hidden" }}>
                <picture>
                  <source srcSet="uploads/raisa-moura-2.avif" type="image/avif" />
                  <img
                    src="uploads/raisa-moura-2.jpg"
                    alt={tx("Raísa Moura, paralegal de imigração e fundadora da Moura Immigration", "Raísa Moura, immigration paralegal and founder of Moura Immigration", lang)}
                    width="900"
                    height="1500"
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: "cover",
                      objectPosition: "center",
                      display: "block",
                    }}
                    loading="eager"
                    decoding="async"
                    fetchPriority="high"
                  />
                </picture>
              </div>
            </div>
          </div>
        </section>

        {/* HISTÓRIA - narrative */}
        <section className="section section--sand">
          <div className="container">
            <div className="reveal" style={{ maxWidth: 820, margin: "0 auto" }}>
              <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{tx("Minha história", "My story", lang)}</div>
              <h2 className="t-h1 mb-8">
                {lang === "en" ? (
                  <>From au pair in 2019 to{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>immigration paralegal</span>{" "}
                  in 2023.</>
                ) : (
                  <>De au pair em 2019 a{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>paralegal de imigração</span>{" "}
                  em 2023.</>
                )}
              </h2>
              <div className="t-body" style={{ fontSize: 16.5, lineHeight: 1.75, display: "flex", flexDirection: "column", gap: 18 }}>
                <p>
                  {tx(
                    "Sou mineira, formada em Engenharia Florestal pela Universidade Federal de Lavras em 2018. Em maio de 2019 cheguei aos Estados Unidos como au pair, no programa J-1. A primeira família, em Nova York, não deu certo, e os primeiros meses foram pesados.",
                    "I'm from Minas Gerais, with a Forest Engineering degree from Universidade Federal de Lavras (2018). In May 2019, I arrived in the US as an au pair on the J-1 program. The first host family in New York didn't work out, and the first months were tough.",
                    lang
                  )}
                </p>
                <p>
                  {tx(
                    "Foi em Massachusetts que tudo virou. Uma segunda família me acolheu de verdade, e por dois anos e meio convivemos como parentes. Quando o programa de au pair acabou, foram eles que me patrocinaram para o EB-3, o visto de trabalho que praticamente ninguém comentava com a comunidade brasileira nos EUA, mesmo sendo uma das oportunidades mais concretas de conseguir o Green Card.",
                    "Massachusetts changed everything. A second host family truly welcomed me, and for two and a half years we lived as family. When the au pair program ended, they sponsored me for the EB-3, the work visa almost no one was talking about in the Brazilian community in the US, even though it's one of the most concrete paths to a Green Card.",
                    lang
                  )}
                </p>
                <p>
                  {tx(
                    "Quando descobri o EB-3 na prática, percebi que dezenas de brasileiros ao meu redor podiam estar no mesmo caminho, mas não sabiam por onde começar. Comecei a orientar pessoas de forma gratuita, recebi autorização formal para atuar como paralegal, e em 2023 fundei a Moura Immigration.",
                    "When I lived the EB-3 process myself, I realized dozens of Brazilians around me could be on the same path but didn't know where to start. I started advising people for free, got formal authorization to work as an immigration paralegal, and in 2023 I founded Moura Immigration.",
                    lang
                  )}
                </p>
                <p>
                  {tx(
                    "Hoje administro um dos maiores grupos privados de vagas de EB-3 dos Estados Unidos. Moro em Boston, onde acompanho pessoalmente as entrevistas no John F. Kennedy Federal Building. Todo o atendimento técnico, no entanto, é 100% online — por Google Meet, WhatsApp e e-mail — pra funcionar pra quem está em qualquer lugar do Brasil ou em qualquer estado americano.",
                    "Today I run one of the largest private EB-3 job groups in the US. I'm based in Boston, where I personally attend Green Card interviews at the John F. Kennedy Federal Building. All the technical work, however, is 100% online — via Google Meet, WhatsApp, and email — so it works for anyone in Brazil or in any US state.",
                    lang
                  )}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* NÚMEROS */}
        <section className="section">
          <div className="container">
            <div className="reveal text-center mb-12" style={{ maxWidth: 720, margin: "0 auto 48px" }}>
              <div className="t-overline mb-3">{tx("Em números", "By the numbers", lang)}</div>
              <h2 className="t-h1">
                {lang === "en" ? (
                  <>The track record that{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>backs the work.</span></>
                ) : (
                  <>O histórico que{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>sustenta o trabalho.</span></>
                )}
              </h2>
            </div>
            <div className="grid sobre-numbers-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
              {numbers.map((n) => (
                <div key={n.l} className="reveal" style={{ textAlign: "center", padding: "32px 16px", border: "1px solid var(--c-navy-12)", borderRadius: "var(--r-md)", background: "var(--c-offwhite-warm)" }}>
                  <div style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: "clamp(36px, 4.5vw, 52px)", color: "var(--c-navy)", lineHeight: 1, marginBottom: 12, letterSpacing: "-0.02em" }}>{n.n}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.5, color: "var(--c-charcoal)", opacity: 0.78 }}>{n.l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* TRAJETÓRIA */}
        <section className="section section--sand">
          <div className="container">
            <div className="reveal mb-12" style={{ maxWidth: 760 }}>
              <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{tx("Trajetória", "Journey", lang)}</div>
              <h2 className="t-h1">{tx("Os passos que me trouxeram até aqui.", "The steps that brought me here.", lang)}</h2>
            </div>
            <ol className="raisa-timeline reveal">
              {timeline.map((s, i) => (
                <li key={i}>
                  <div className="rt-year">{s.y}</div>
                  <div className="rt-content">
                    <h4>{s.t}</h4>
                    <p>{s.b}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* MISSÃO */}
        <section className="section">
          <div className="container">
            <div className="reveal" style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
              <div className="t-overline mb-3">{tx("Missão", "Mission", lang)}</div>
              <blockquote className="quote-block" style={{ fontSize: "clamp(26px, 3.4vw, 40px)" }}>
                {tx(
                  "Brasileiro nenhum precisa abrir mão de uma vida regular nos EUA por falta de orientação. Eu mostro o caminho, faço o peticionamento técnico e acompanho cada etapa até o final.",
                  "No one needs to give up a regular life in the US because of a lack of guidance. I show the path, handle the technical filing, and follow every step to the end.",
                  lang
                )}
              </blockquote>
            </div>
          </div>
        </section>

        {/* PRINCÍPIOS */}
        <section className="section section--sand">
          <div className="container">
            <div className="reveal mb-12" style={{ maxWidth: 760 }}>
              <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{tx("Princípios", "Principles", lang)}</div>
              <h2 className="t-h1">{tx("Como eu trabalho.", "How I work.", lang)}</h2>
            </div>
            <div className="grid grid-2 gap-8 reveal">
              {principles.map((p) => (
                <div key={p.k} style={{ paddingTop: 24, borderTop: "1px solid var(--c-navy-12)" }}>
                  <h3 className="t-h3 mb-3">{p.k}</h3>
                  <p className="t-body t-soft">{p.t}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="section section--navy">
          <div className="container text-center">
            <div className="reveal" style={{ maxWidth: 720, margin: "0 auto" }}>
              <h2 className="t-h1 mb-6">{tx("Quer conversar comigo por vídeo?", "Want to talk to me over video?", lang)}</h2>
              <p className="t-lead mb-8" style={{ color: "rgba(244,243,236,0.78)" }}>
                {tx(
                  "Sessão de 60 minutos por US$ 150, em Google Meet. Você me conta o seu cenário, eu te oriento sobre o que faz sentido pro seu caso e desenhamos o plano.",
                  "60-minute session for US$ 150, over Google Meet. You tell me your scenario, I guide you on what makes sense for your case, and we design the plan.",
                  lang
                )}
              </p>
              <button className="btn btn--accent btn--lg" onClick={() => window.__openModal?.("agenda")}>
                {tx("Agendar sessão", "Book a session", lang)}
                <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ModalRenderer />
    </ModalProvider>
  );
}

/* ============ CONTATO ============ */
function ContatoPage() {
  useReveal();
  const { lang } = useLang();
  const links = [
    { id: "servicos.html", page: "servicos", label: { pt: "Serviços", en: "Services" }, href: "servicos.html" },
    { id: "sobre.html", page: "sobre", label: { pt: "Sobre", en: "About" }, href: "sobre.html" },
    { id: "contato.html", page: "contato", label: { pt: "Contato", en: "Contact" }, href: "contato.html" },
    { id: "index.html", page: "home", label: { pt: "Início", en: "Home" }, href: "index.html" },
  ];

  return (
    <ModalProvider>
      <Nav links={links} currentPage="contato" />
      <main>
        <section className="section" style={{ paddingBottom: 48 }}>
          <div className="container">
            <div className="reveal" style={{ maxWidth: 880 }}>
              <div className="t-overline mb-3"><span style={{ display: "inline-block", width: 24, height: 1, background: "var(--c-terracota)", verticalAlign: "middle", marginRight: 12 }}></span>{tx("Contato", "Contact", lang)}</div>
              <h1 className="t-display mb-6">
                {lang === "en" ? (
                  <>Three paths,{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400 }}>one for each moment.</span></>
                ) : (
                  <>Três caminhos,{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400 }}>cada um pra um momento.</span></>
                )}
              </h1>
              <p className="t-lead mw-prose">{tx("Escolhe o que melhor encaixa no seu cenário. Os três chegam até mim ou até a equipe.", "Pick the one that best fits your scenario. All three reach me or the team.", lang)}</p>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 32 }}>
          <div className="container">
            <ContactCardsBlock />
          </div>
        </section>

        <section className="section section--sand">
          <div className="container">
            <div className="reveal" style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
              <div className="t-overline mb-3">{tx("Outros canais", "Other channels", lang)}</div>
              <h2 className="t-h2 mb-4">{tx("Onde mais me encontra.", "Where else to reach me.", lang)}</h2>
              <p className="t-body t-soft mb-8 mw-prose" style={{ margin: "0 auto 32px" }}>
                {tx(
                  "Pra dúvidas rápidas ou pra acompanhar conteúdo sobre imigração no dia a dia.",
                  "For quick questions or to follow daily content about immigration.",
                  lang
                )}
              </p>
              <div className="grid grid-3 gap-4" style={{ textAlign: "left" }}>
                <a href="https://instagram.com/raisamoura" target="_blank" rel="noopener noreferrer" className="card" style={{ background: "var(--c-offwhite)", padding: 24, textDecoration: "none", color: "inherit", border: "1px solid var(--c-navy-12)", borderRadius: "var(--r-md)", display: "block" }}>
                  <div className="t-overline mb-2" style={{ fontSize: 11, color: "var(--c-terracota)" }}>Instagram</div>
                  <div style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 17, color: "var(--c-navy)" }}>@raisamoura</div>
                </a>
                <a href="https://wa.me/15084006674" target="_blank" rel="noopener noreferrer" className="card" style={{ background: "var(--c-offwhite)", padding: 24, textDecoration: "none", color: "inherit", border: "1px solid var(--c-navy-12)", borderRadius: "var(--r-md)", display: "block" }}>
                  <div className="t-overline mb-2" style={{ fontSize: 11, color: "var(--c-terracota)" }}>WhatsApp</div>
                  <div style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 17, color: "var(--c-navy)" }}>(508) 400-6674</div>
                </a>
                <a href="mailto:rmouraimmigration@gmail.com" className="card" style={{ background: "var(--c-offwhite)", padding: 24, textDecoration: "none", color: "inherit", border: "1px solid var(--c-navy-12)", borderRadius: "var(--r-md)", display: "block" }}>
                  <div className="t-overline mb-2" style={{ fontSize: 11, color: "var(--c-terracota)" }}>E-mail</div>
                  <div style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 15, color: "var(--c-navy)", wordBreak: "break-all" }}>rmouraimmigration@gmail.com</div>
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ModalRenderer />
    </ModalProvider>
  );
}

function ContactCardsBlock() {
  const { setOpen } = useModal();
  const { lang } = useLang();
  const channels = lang === "en" ? [
    { kicker: "To get started", title: "Session with Raísa", body: "60 min · US$ 150 · Google Meet. Marriage Green Card, EB-3, change of status, post-Au Pair life, consular visas and renewal.", cta: "Book with Raísa", action: () => setOpen("agenda"), tone: "primary", icon: "calendar" },
    { kicker: "To check eligibility", title: "EB-3 Eligibility", body: "Official form. Raísa reviews it personally and the team reaches out if your profile fits.", cta: "Check eligibility", action: () => setOpen("eb3"), tone: "accent", icon: "checklist" },
    { kicker: "For first contact", title: "Talk to the Moura team", body: "First questions about services, partnerships, press, and administrative matters. The team guides you on the next step.", cta: "Contact the team", action: () => setOpen("equipe"), tone: "outline", icon: "team" },
  ] : [
    { kicker: "Pra quem quer começar", title: "Reunião com a Raísa", body: "60min · US$ 150 · Google Meet. Green Card por casamento, EB-3, mudança de status, vida pós-Au Pair, vistos consulares e renovação.", cta: "Agendar com a Raísa", action: () => setOpen("agenda"), tone: "primary", icon: "calendar" },
    { kicker: "Pra testar elegibilidade", title: "Elegibilidade EB-3", body: "Formulário oficial. A Raísa analisa pessoalmente e a equipe entra em contato se o perfil for compatível.", cta: "Verificar elegibilidade", action: () => setOpen("eb3"), tone: "accent", icon: "checklist" },
    { kicker: "Pro primeiro contato", title: "Falar com a equipe Moura", body: "Primeiras dúvidas sobre serviços, parcerias, imprensa e questões administrativas. A equipe te orienta sobre o próximo passo.", cta: "Contatar a equipe", action: () => setOpen("equipe"), tone: "outline", icon: "team" },
  ];
  return (
    <div className="grid grid-3 gap-6 reveal">
      {channels.map((c, i) => (
        <div key={i} style={{
          background: c.tone === "primary" ? "var(--c-navy)" : "var(--c-offwhite-warm)",
          color: c.tone === "primary" ? "var(--c-offwhite)" : "var(--c-charcoal)",
          border: c.tone === "primary" ? "none" : "1px solid var(--c-navy-12)",
          borderRadius: "var(--r-lg)", padding: 36, display: "flex", flexDirection: "column", minHeight: 320,
        }}>
          <div style={{ width: 48, height: 48, borderRadius: 12, background: c.tone === "primary" ? "rgba(244,243,236,0.12)" : "var(--c-sand)", display: "grid", placeItems: "center", marginBottom: 24 }}>
            <ChannelIcon kind={c.icon} color={c.tone === "primary" ? "var(--c-terracota)" : "var(--c-navy)"} />
          </div>
          <div className="t-overline mb-3" style={{ color: c.tone === "primary" ? "var(--c-terracota)" : "var(--c-navy)", fontSize: 11, opacity: c.tone === "primary" ? 1 : 0.6 }}>{c.kicker}</div>
          <h3 style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 20, lineHeight: 1.25, margin: "0 0 14px", color: c.tone === "primary" ? "var(--c-offwhite)" : "var(--c-navy)" }}>{c.title}</h3>
          <p style={{ fontSize: 14, lineHeight: 1.6, margin: "0 0 28px", opacity: c.tone === "primary" ? 0.78 : 0.85, flex: 1 }}>{c.body}</p>
          <button className={`btn ${c.tone === "primary" ? "btn--accent" : c.tone === "accent" ? "btn--primary" : "btn--outline"}`} onClick={c.action}>
            {c.cta}<svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      ))}
    </div>
  );
}


/* ============ POLÍTICA DE PRIVACIDADE ============ */
const PRIVACY_CONTENT = {
  pt: {
    overline: "Privacidade",
    title: "Política de",
    titleAccent: "Privacidade",
    subtitle: "Como a Moura Immigration Management LLC trata os dados pessoais que você compartilha conosco, em conformidade com a LGPD (Brasil) e a CCPA (Estados Unidos).",
    updatedLabel: "Última atualização:",
    updated: "10 de maio de 2026",
    summaryTitle: "Resumo em 30 segundos",
    summary: [
      "Coletamos só os dados que você nos envia voluntariamente (formulários e contato).",
      "Usamos esses dados pra orientar seu caso de imigração e te dar retorno.",
      "Não vendemos, alugamos ou compartilhamos seus dados com terceiros pra fins comerciais.",
      "Você pode pedir acesso, correção ou exclusão dos seus dados a qualquer momento."
    ],
    dataTitle: "Quais dados coletamos",
    dataIntro: "Coletamos apenas as informações que você nos fornece diretamente, ao preencher um dos nossos formulários, agendar uma consulta ou entrar em contato:",
    dataItems: [
      ["Identificação:", " nome completo, e-mail, WhatsApp, Instagram."],
      ["Histórico migratório:", " país de nascimento, país atual, status nos EUA, vistos anteriores, processos passados."],
      ["Documentos:", " situação de passaporte e vistos."],
      ["Cenário e objetivos:", " motivação, prioridades e disponibilidade financeira."]
    ],
    useTitle: "Como usamos seus dados",
    useItems: [
      "Avaliar a viabilidade técnica e financeira do seu caso de imigração.",
      "Entrar em contato com retorno individualizado e orientação.",
      "Cumprir obrigações legais e regulatórias relacionadas à prestação de serviços.",
      "Aprimorar nossos serviços e atendimento (de forma anonimizada)."
    ],
    shareTitle: "Compartilhamento",
    shareIntro: "Não vendemos, alugamos ou compartilhamos seus dados com terceiros pra fins comerciais ou publicitários. Compartilhamos somente quando estritamente necessário para a execução do serviço:",
    shareItems: [
      "Advogados parceiros, exclusivamente para análise técnica do seu caso, sob acordo de confidencialidade.",
      "Autoridades governamentais (USCIS e órgãos congêneres), apenas com sua autorização explícita e dentro do escopo do seu processo.",
      "Provedores de infraestrutura (Google, hospedagem) para armazenar de forma segura, sem nenhum acesso humano por parte deles."
    ],
    retentionTitle: "Retenção e segurança",
    retentionBody: "Seus dados são armazenados pelo tempo necessário ao seu atendimento e às obrigações legais aplicáveis. Após esse período, são eliminados ou anonimizados. Adotamos medidas técnicas razoáveis para proteger as informações contra acesso não autorizado.",
    lgpdKicker: "Brasil",
    lgpdTitle: "Seus direitos sob a LGPD",
    lgpdIntro: "Se você está no Brasil ou é cidadão brasileiro, a Lei Geral de Proteção de Dados (Lei nº 13.709/2018) te garante os seguintes direitos sobre seus dados pessoais:",
    lgpdRights: [
      ["Confirmação e acesso", " aos dados que tratamos sobre você."],
      ["Correção", " de dados incompletos, inexatos ou desatualizados."],
      ["Anonimização, bloqueio ou eliminação", " de dados desnecessários ou tratados em desconformidade com a LGPD."],
      ["Portabilidade", " dos dados a outro fornecedor de serviço."],
      ["Eliminação", " dos dados pessoais tratados com base no seu consentimento."],
      ["Informação", " sobre com quem compartilhamos seus dados."],
      ["Revogação do consentimento", " a qualquer momento."]
    ],
    lgpdLegal: "Base legal do tratamento: consentimento (art. 7º, I) e execução de contrato (art. 7º, V).",
    ccpaKicker: "Estados Unidos · Califórnia",
    ccpaTitle: "Seus direitos sob a CCPA",
    ccpaIntro: "Se você reside na Califórnia, o California Consumer Privacy Act (CCPA, conforme alterado pela CPRA) te garante os seguintes direitos:",
    ccpaRights: [
      ["Right to Know:", " saber quais categorias de dados pessoais coletamos, as fontes, o uso e com quem compartilhamos."],
      ["Right to Delete:", " solicitar a exclusão dos dados pessoais que coletamos."],
      ["Right to Correct:", " corrigir informações imprecisas."],
      ["Right to Opt-Out:", " desativar a venda ou compartilhamento dos seus dados (não vendemos seus dados, você já está protegido por padrão)."],
      ["Right to Non-Discrimination:", " não sofrer tratamento diferenciado por exercer seus direitos."],
      ["Right to Limit:", " limitar o uso de informações pessoais sensíveis."]
    ],
    ccpaNote: "Não vendemos informações pessoais nem realizamos profiling automatizado para tomada de decisões significativas.",
    contactTitle: "Como exercer seus direitos",
    contactIntro: "Para qualquer solicitação relacionada aos seus dados pessoais (acesso, correção, eliminação, portabilidade ou revogação do consentimento), entre em contato:",
    contactEmailLabel: "E-mail:",
    contactWhatsAppLabel: "WhatsApp:",
    contactCompanyLabel: "Empresa:",
    contactNote: "Responderemos em até",
    contactNoteEnd: "(LGPD) ou",
    contactNoteEnd2: "(CCPA), conforme a legislação aplicável ao seu caso.",
    contactDays1: "15 dias úteis",
    contactDays2: "45 dias corridos",
    updatesTitle: "Atualizações desta política",
    updatesBody: "Esta política pode ser atualizada periodicamente. A data da última revisão consta no topo. Recomendamos consulta regular. Mudanças materiais serão comunicadas pelos canais de contato cadastrados."
  },
  en: {
    overline: "Privacy",
    title: "Privacy",
    titleAccent: "Policy",
    subtitle: "How Moura Immigration Management LLC handles the personal data you share with us, in compliance with LGPD (Brazil) and CCPA (United States).",
    updatedLabel: "Last updated:",
    updated: "May 10, 2026",
    summaryTitle: "30-second summary",
    summary: [
      "We only collect data you voluntarily provide (forms and contact).",
      "We use this data to advise on your immigration case and respond to you.",
      "We do not sell, rent, or share your data with third parties for commercial purposes.",
      "You can request access, correction, or deletion of your data at any time."
    ],
    dataTitle: "What data we collect",
    dataIntro: "We only collect information you provide directly when filling out one of our forms, scheduling a consultation, or getting in touch:",
    dataItems: [
      ["Identification:", " full name, email, WhatsApp, Instagram."],
      ["Immigration history:", " country of birth, current country, US status, prior visas, past cases."],
      ["Documents:", " status of passport and visas."],
      ["Scenario and goals:", " motivation, priorities, and financial availability."]
    ],
    useTitle: "How we use your data",
    useItems: [
      "Assess the technical and financial viability of your immigration case.",
      "Contact you with individualized response and guidance.",
      "Comply with legal and regulatory obligations related to service provision.",
      "Improve our services and support (in anonymized form)."
    ],
    shareTitle: "Sharing",
    shareIntro: "We do not sell, rent, or share your data with third parties for commercial or advertising purposes. We only share when strictly necessary for service execution:",
    shareItems: [
      "Partner attorneys, exclusively for technical analysis of your case, under confidentiality agreements.",
      "Government authorities (USCIS and equivalent bodies), only with your explicit authorization and within the scope of your case.",
      "Infrastructure providers (Google, hosting) for secure storage, with no human access from them."
    ],
    retentionTitle: "Retention and security",
    retentionBody: "Your data is stored for as long as necessary for your service and applicable legal obligations. After this period, it is deleted or anonymized. We adopt reasonable technical measures to protect information against unauthorized access.",
    lgpdKicker: "Brazil",
    lgpdTitle: "Your rights under LGPD",
    lgpdIntro: "If you are in Brazil or a Brazilian citizen, Brazil's General Data Protection Law (Law No. 13.709/2018) grants you the following rights over your personal data:",
    lgpdRights: [
      ["Confirmation and access", " to the data we process about you."],
      ["Correction", " of incomplete, inaccurate, or outdated data."],
      ["Anonymization, blocking, or deletion", " of unnecessary data or data processed in noncompliance with LGPD."],
      ["Portability", " of data to another service provider."],
      ["Deletion", " of personal data processed based on your consent."],
      ["Information", " about who we share your data with."],
      ["Consent revocation", " at any time."]
    ],
    lgpdLegal: "Legal basis for processing: consent (art. 7, I) and contract execution (art. 7, V).",
    ccpaKicker: "United States · California",
    ccpaTitle: "Your rights under CCPA",
    ccpaIntro: "If you reside in California, the California Consumer Privacy Act (CCPA, as amended by CPRA) grants you the following rights:",
    ccpaRights: [
      ["Right to Know:", " know which categories of personal data we collect, the sources, the use, and with whom we share it."],
      ["Right to Delete:", " request deletion of the personal data we collected."],
      ["Right to Correct:", " correct inaccurate information."],
      ["Right to Opt-Out:", " disable the sale or sharing of your data (we do not sell your data, you are already protected by default)."],
      ["Right to Non-Discrimination:", " not be treated differently for exercising your rights."],
      ["Right to Limit:", " limit the use of sensitive personal information."]
    ],
    ccpaNote: "We do not sell personal information nor perform automated profiling for significant decision-making.",
    contactTitle: "How to exercise your rights",
    contactIntro: "For any request regarding your personal data (access, correction, deletion, portability, or consent revocation), contact us:",
    contactEmailLabel: "Email:",
    contactWhatsAppLabel: "WhatsApp:",
    contactCompanyLabel: "Company:",
    contactNote: "We will respond within",
    contactNoteEnd: "(LGPD) or",
    contactNoteEnd2: "(CCPA), as applicable to your case.",
    contactDays1: "15 business days",
    contactDays2: "45 calendar days",
    updatesTitle: "Updates to this policy",
    updatesBody: "This policy may be updated periodically. The last revision date is shown at the top. We recommend regular consultation. Material changes will be communicated through the registered contact channels."
  }
};

function PrivacidadePage() {
  useReveal();
  const { lang, setLang } = useLang();
  const t = PRIVACY_CONTENT[lang];
  const links = [
    { id: "servicos.html", page: "servicos", label: lang === "pt" ? "Serviços" : "Services", href: "servicos.html" },
    { id: "sobre.html", page: "sobre", label: lang === "pt" ? "Sobre" : "About", href: "sobre.html" },
    { id: "contato.html", page: "contato", label: lang === "pt" ? "Contato" : "Contact", href: "contato.html" },
    { id: "index.html", page: "home", label: lang === "pt" ? "Início" : "Home", href: "index.html" },
  ];
  return (
    <ModalProvider>
      <Nav links={links} currentPage="privacidade" />
      <main>
        <section className="section" style={{ paddingBottom: 32 }}>
          <div className="container">
            <div className="reveal" style={{ maxWidth: 880 }}>
              <div className="flex items-center justify-between mb-3" style={{ flexWrap: "wrap", gap: 16 }}>
                <div className="t-overline"><span style={{ display: "inline-block", width: 24, height: 1, background: "var(--c-terracota)", verticalAlign: "middle", marginRight: 12 }}></span>{t.overline}</div>
                <div className="lang-toggle" style={{ display: "inline-flex", background: "var(--c-sand)", borderRadius: 999, padding: 3, gap: 2 }}>
                  {["pt", "en"].map((l) => (
                    <button
                      key={l}
                      onClick={() => setLang(l)}
                      style={{
                        padding: "6px 14px",
                        borderRadius: 999,
                        border: "none",
                        cursor: "pointer",
                        fontSize: 12,
                        fontWeight: 600,
                        letterSpacing: "0.08em",
                        textTransform: "uppercase",
                        fontFamily: "var(--ff-sans)",
                        background: lang === l ? "var(--c-navy)" : "transparent",
                        color: lang === l ? "var(--c-offwhite)" : "var(--c-navy)",
                        transition: "all 0.2s var(--ease-out)"
                      }}
                    >
                      {l === "pt" ? "PT" : "EN"}
                    </button>
                  ))}
                </div>
              </div>
              <h1 className="t-display mb-6">
                {t.title}{" "}
                <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>{t.titleAccent}</span>.
              </h1>
              <p className="t-lead mw-prose">{t.subtitle}</p>
              <p className="t-caption mt-4" style={{ opacity: 0.65 }}>{t.updatedLabel} {t.updated}</p>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 32 }}>
          <div className="container">
            <div className="reveal" style={{ maxWidth: 760 }}>

              <div style={{ padding: "20px 24px", background: "var(--c-sand)", borderRadius: "var(--r-md)", marginBottom: 48, borderLeft: "3px solid var(--c-terracota)" }}>
                <div className="t-overline mb-3" style={{ fontSize: 11 }}>{t.summaryTitle}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8, fontSize: 14, lineHeight: 1.55, color: "var(--c-navy)" }}>
                  {t.summary.map((s, i) => <li key={i}>✓ {s}</li>)}
                </ul>
              </div>

              <h2 className="t-h2 mb-4">{t.dataTitle}</h2>
              <p className="t-body mb-4">{t.dataIntro}</p>
              <ul style={{ paddingLeft: 24, marginBottom: 32, fontSize: 15, lineHeight: 1.7, color: "var(--c-charcoal)" }}>
                {t.dataItems.map((it, i) => <li key={i}><strong>{it[0]}</strong>{it[1]}</li>)}
              </ul>

              <h2 className="t-h2 mb-4">{t.useTitle}</h2>
              <ul style={{ paddingLeft: 24, marginBottom: 32, fontSize: 15, lineHeight: 1.7, color: "var(--c-charcoal)" }}>
                {t.useItems.map((it, i) => <li key={i}>{it}</li>)}
              </ul>

              <h2 className="t-h2 mb-4">{t.shareTitle}</h2>
              <p className="t-body mb-4">{t.shareIntro}</p>
              <ul style={{ paddingLeft: 24, marginBottom: 32, fontSize: 15, lineHeight: 1.7, color: "var(--c-charcoal)" }}>
                {t.shareItems.map((it, i) => <li key={i}>{it}</li>)}
              </ul>

              <h2 className="t-h2 mb-4">{t.retentionTitle}</h2>
              <p className="t-body mb-4">{t.retentionBody}</p>

              <div id="lgpd" style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--c-navy-12)" }}>
                <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{t.lgpdKicker}</div>
                <h2 className="t-h2 mb-4">{t.lgpdTitle}</h2>
                <p className="t-body mb-4">{t.lgpdIntro}</p>
                <ul style={{ paddingLeft: 24, marginBottom: 24, fontSize: 15, lineHeight: 1.7, color: "var(--c-charcoal)" }}>
                  {t.lgpdRights.map((r, i) => <li key={i}><strong>{r[0]}</strong>{r[1]}</li>)}
                </ul>
                <p className="t-body t-soft" style={{ fontSize: 13 }}>{t.lgpdLegal}</p>
              </div>

              <div id="ccpa" style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--c-navy-12)" }}>
                <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>{t.ccpaKicker}</div>
                <h2 className="t-h2 mb-4">{t.ccpaTitle}</h2>
                <p className="t-body mb-4">{t.ccpaIntro}</p>
                <ul style={{ paddingLeft: 24, marginBottom: 24, fontSize: 15, lineHeight: 1.7, color: "var(--c-charcoal)" }}>
                  {t.ccpaRights.map((r, i) => <li key={i}><strong>{r[0]}</strong>{r[1]}</li>)}
                </ul>
                <p className="t-body t-soft" style={{ fontSize: 13 }}>{t.ccpaNote}</p>
              </div>

              <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--c-navy-12)" }}>
                <h2 className="t-h2 mb-4">{t.contactTitle}</h2>
                <p className="t-body mb-4">{t.contactIntro}</p>
                <div style={{ padding: "20px 24px", background: "var(--c-sand)", borderRadius: "var(--r-md)", marginBottom: 24 }}>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10, fontSize: 14, color: "var(--c-navy)" }}>
                    <li><strong>{t.contactEmailLabel}</strong> <a href="mailto:rmouraimmigration@gmail.com" style={{ color: "var(--c-terracota)" }}>rmouraimmigration@gmail.com</a></li>
                    <li><strong>{t.contactWhatsAppLabel}</strong> <a href="tel:+15084006674" style={{ color: "var(--c-terracota)" }}>(508) 400-6674</a></li>
                    <li><strong>{t.contactCompanyLabel}</strong> Moura Immigration Management LLC</li>
                  </ul>
                </div>
                <p className="t-body t-soft" style={{ fontSize: 13 }}>
                  {t.contactNote} <strong>{t.contactDays1}</strong> {t.contactNoteEnd} <strong>{t.contactDays2}</strong> {t.contactNoteEnd2}
                </p>
              </div>

              <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--c-navy-12)" }}>
                <h2 className="t-h2 mb-4">{t.updatesTitle}</h2>
                <p className="t-body">{t.updatesBody}</p>
              </div>

            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ModalRenderer />
    </ModalProvider>
  );
}

Object.assign(window, { ServicosPage, SobrePage, ContatoPage, PrivacidadePage });