/* global React */
const { useState, useEffect, useRef } = React;

/* =====================================================================
   HOMEPAGE
   ===================================================================== */
function HomePage() {
  useReveal();

  const navLinks = [
  { id: "#inicio", label: { pt: "Início", en: "Home" } },
  { id: "#servicos", label: { pt: "Serviços", en: "Services" } },
  { id: "#sobre", label: { pt: "Sobre", en: "About" } },
  { id: "#como-funciona", label: { pt: "Como funciona", en: "How it works" } },
  { id: "#depoimentos", label: { pt: "Depoimentos", en: "Testimonials" } },
  { id: "#faq", label: "FAQ" },
  { id: "#contato", label: { pt: "Contato", en: "Contact" } }];


  return (
    <ModalProvider>
      <Nav links={navLinks} currentPage="home" />
      <main>
        <Hero />
        <ValueProp />
        <EmNumeros />
        <WhyUs />
        <Depoimentos />
        <Services />
        <ComoFunciona />
        <FAQ />
        <FinalCta />
      </main>
      <Footer />
      <ModalRenderer />
    </ModalProvider>);

}

/* =====================================================================
   HERO, editorial composition with passport stamps + USCIS form snippets
   ===================================================================== */
function Hero() {
  const { setOpen } = useModal();
  const { lang } = useLang();
  return (
    <section id="inicio" className="hero" style={{ paddingTop: 56, paddingBottom: "clamp(72px, 9vw, 120px)" }}>
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "center" }}>
          {/* LEFT: text */}
          <div>
            <div className="reveal flex gap-2 hero-badges-row" style={{ marginBottom: 24, flexWrap: "wrap" }}>
              <span className="hero-badge hero-badge--with-dot" style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                padding: "6px 12px",
                borderRadius: 999,
                border: "1px solid var(--c-navy-12)",
                background: "var(--c-offwhite-warm)",
                fontSize: 10,
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                fontWeight: 600,
                color: "var(--c-navy)"
              }}>
                <span className="hero-badge-dot" style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--c-terracota)" }}></span>
                {tx("Assessoria de imigração", "Immigration consulting", lang)}
              </span>
              <span className="hero-badge" style={{
                display: "inline-flex",
                alignItems: "center",
                padding: "6px 12px",
                borderRadius: 999,
                border: "1px solid var(--c-navy-12)",
                background: "var(--c-offwhite-warm)",
                fontSize: 10,
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                fontWeight: 600,
                color: "var(--c-navy)"
              }}>
                {tx("Especialista em Green Card e vistos", "Green Card & visa specialist", lang)}
              </span>
            </div>
            <h1 className="t-display reveal delay-1">
              {lang === "en" ? (
                <>
                  Immigration to the{" "}
                  <span style={{ color: "var(--c-terracota)", fontStyle: "italic", fontWeight: 400 }}>US</span>,
                  <br />
                  handled with the care{" "}
                  <span style={{ fontStyle: "italic", fontWeight: 400 }}>your case deserves.</span>
                </>
              ) : (
                <>
                  <span className="hero-line-seg">Imigração para os <span style={{ color: "var(--c-terracota)", fontStyle: "italic", fontWeight: 400 }}>EUA</span>,</span>
                  <br className="hero-line-br-desktop" />
                  <span className="hero-line-seg">tratada com o cuidado</span>{" "}
                  <span className="hero-line-seg" style={{ fontStyle: "italic", fontWeight: 400 }}>que o seu caso merece.</span>
                </>
              )}
            </h1>
            <p className="t-lead reveal delay-2 mw-prose mt-8 hero-lead">
              {lang === "en" ? (
                "For immigrants who want to live legally in the United States. Close support at every step of your case, with the security of someone who has walked the path firsthand."
              ) : (
                <>
                  <span className="hero-lead-line">Para imigrantes que querem viver legalmente</span>{" "}
                  <span className="hero-lead-line">nos Estados Unidos. Acompanhamento próximo</span>{" "}
                  <span className="hero-lead-line">em cada etapa do seu processo, com a segurança</span>{" "}
                  <span className="hero-lead-line">de quem entende o caminho por dentro.</span>
                </>
              )}
            </p>
            <div className="flex gap-3 mt-8 reveal delay-3" style={{ flexWrap: "wrap" }}>
              <a href="#servicos" className="btn btn--primary btn--lg">
                {tx("Conhecer os serviços", "See the services", 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>

          {/* RIGHT: editorial composition */}
          <div className="hero-art-wrap reveal delay-2">
            <HeroArt />
          </div>
        </div>
      </div>

      {/* trust strip — DESKTOP: pill horizontal */}
      <div className="container mt-16 trust-strip-desktop">
        <div className="reveal" style={{
          padding: "20px 24px",
          background: "var(--c-offwhite-warm)",
          border: "1px solid var(--c-navy-12)",
          borderRadius: "var(--r-pill)",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 32, flexWrap: "wrap"
        }}>
          <span className="t-caption" style={{ opacity: 1, color: "var(--c-navy)", fontWeight: 500, letterSpacing: "0.06em", fontSize: 11 }}>{tx("ATENDIMENTO EM PORTUGUÊS E INGLÊS", "PORTUGUESE & ENGLISH SERVICE", lang)}</span>
          <span style={{ width: 4, height: 4, background: "var(--c-terracota)", borderRadius: "50%" }}></span>
          <span className="t-caption" style={{ opacity: 1, color: "var(--c-navy)", fontWeight: 500, letterSpacing: "0.06em", fontSize: 11 }}>{tx("SUPORTE INDIVIDUALIZADO", "INDIVIDUAL SUPPORT", lang)}</span>
          <span style={{ width: 4, height: 4, background: "var(--c-terracota)", borderRadius: "50%" }}></span>
          <span className="t-caption" style={{ opacity: 1, color: "var(--c-navy)", fontWeight: 500, letterSpacing: "0.06em", fontSize: 11 }}>{tx("WHATSAPP · E-MAIL · VIDEOCHAMADA", "WHATSAPP · EMAIL · VIDEO CALL", lang)}</span>
          <span style={{ width: 4, height: 4, background: "var(--c-terracota)", borderRadius: "50%" }}></span>
          <span className="t-caption" style={{ opacity: 1, color: "var(--c-navy)", fontWeight: 500, letterSpacing: "0.06em", fontSize: 11 }}>{tx("TRANSPARÊNCIA NO PROCESSO", "PROCESS TRANSPARENCY", lang)}</span>
        </div>
      </div>

      {/* trust strip — MOBILE: marquee (letreiro passando) */}
      <div className="trust-marquee">
        <div className="trust-marquee-row">
          <div className="trust-marquee-track">
            <span>{tx("ATENDIMENTO EM PORTUGUÊS E INGLÊS", "PORTUGUESE & ENGLISH SERVICE", lang)}</span>
            <span className="trust-dot">●</span>
            <span>{tx("SUPORTE INDIVIDUALIZADO", "INDIVIDUAL SUPPORT", lang)}</span>
            <span className="trust-dot">●</span>
            <span>{tx("ATENDIMENTO EM PORTUGUÊS E INGLÊS", "PORTUGUESE & ENGLISH SERVICE", lang)}</span>
            <span className="trust-dot">●</span>
            <span>{tx("SUPORTE INDIVIDUALIZADO", "INDIVIDUAL SUPPORT", lang)}</span>
            <span className="trust-dot">●</span>
          </div>
        </div>
        <div className="trust-marquee-row trust-marquee-row--reverse">
          <div className="trust-marquee-track">
            <span>{tx("WHATSAPP · E-MAIL · VIDEOCHAMADA", "WHATSAPP · EMAIL · VIDEO CALL", lang)}</span>
            <span className="trust-dot">●</span>
            <span>{tx("TRANSPARÊNCIA NO PROCESSO", "PROCESS TRANSPARENCY", lang)}</span>
            <span className="trust-dot">●</span>
            <span>{tx("WHATSAPP · E-MAIL · VIDEOCHAMADA", "WHATSAPP · EMAIL · VIDEO CALL", lang)}</span>
            <span className="trust-dot">●</span>
            <span>{tx("TRANSPARÊNCIA NO PROCESSO", "PROCESS TRANSPARENCY", lang)}</span>
            <span className="trust-dot">●</span>
          </div>
        </div>
      </div>
    </section>);

}

function HeroArt() {
  return (
    <div className="hero-art" style={{ aspectRatio: "1 / 1.18" }}>
      {/* Navy backing */}
      <div style={{
        position: "absolute",
        top: "8%", right: "0%", bottom: "16%", left: "12%",
        background: "var(--c-navy)",
        borderRadius: "var(--r-md)",
        zIndex: 1
      }}>
        {/* embossed "M" mark */}
        <svg viewBox="0 0 200 200" style={{ position: "absolute", top: 24, left: 24, width: 88, height: 88, opacity: 0.18 }}>
          <text x="0" y="160" fontFamily="Libre Baskerville" fontSize="200" fontWeight="700" fill="var(--c-offwhite)">M</text>
        </svg>
      </div>

      {/* Photo of Raísa */}
      <div className="photo-ph" style={{
        position: "absolute",
        top: "0%", right: "8%", width: "62%", aspectRatio: "3 / 4",
        zIndex: 3
      }}>
        <picture>
          <source srcSet="uploads/raisa-moura.avif" type="image/avif" />
          <img
            src="uploads/raisa-moura.jpg"
            alt="Raísa Moura, paralegal de imigração"
            width="986"
            height="1500"
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition: "center",
              display: "block",
              borderRadius: "var(--r-md)"
            }}
            loading="eager"
            decoding="async"
            fetchPriority="high"
          />
        </picture>
      </div>

      {/* Passport stamp top-left */}
      <div className="passport-stamp" style={{
        top: "44%", left: "0%",
        width: 130, height: 130,
        transform: "rotate(-12deg)",
        zIndex: 4
      }}>
        <div style={{ textAlign: "center", padding: 8 }}>
          <div style={{ fontSize: 10, fontWeight: 700, marginBottom: 4 }}>APPROVED</div>
          <div style={{ fontSize: 22, fontFamily: "var(--ff-display)", fontWeight: 700, lineHeight: 1, letterSpacing: 0 }}>I-130</div>
          <div style={{ fontSize: 8, marginTop: 4, opacity: 0.8 }}>USCIS · 2026</div>
        </div>
      </div>

      {/* USCIS form snippet bottom-right */}
      <div className="uscis-form" style={{
        bottom: "0%", right: "0%",
        width: 220,
        zIndex: 4,
        transform: "rotate(3deg)"
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontSize: 7, color: "var(--c-navy)", opacity: 0.6 }}>
          <span>FORM I-485</span>
          <span>USCIS</span>
        </div>
        <div style={{ borderBottom: "1px solid var(--c-navy-12)", paddingBottom: 4, marginBottom: 6 }}>
          <div style={{ fontSize: 7, opacity: 0.55, marginBottom: 2 }}>APPLICANT NAME</div>
          <div style={{ fontSize: 9, fontWeight: 700 }}>MOURA, RAÍSA C.</div>
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <div>
            <div style={{ fontSize: 7, opacity: 0.55 }}>CATEGORY</div>
            <div style={{ fontSize: 9, fontWeight: 700 }}>IR-1 / CR-1</div>
          </div>
          <div>
            <div style={{ fontSize: 7, opacity: 0.55 }}>STATUS</div>
            <div style={{ fontSize: 9, fontWeight: 700, color: "var(--c-terracota)" }}>● APPROVED</div>
          </div>
        </div>
      </div>

      {/* Small passport stamp top-right */}
      <div className="passport-stamp" style={{
        top: "0%", right: "0%",
        width: 78, height: 78,
        transform: "rotate(8deg)",
        zIndex: 4,
        borderColor: "var(--c-navy)",
        color: "var(--c-navy)"
      }}>
        <div style={{ textAlign: "center", fontSize: 7, fontWeight: 700, padding: 4 }}>
          <div>PASSED</div>
          <div style={{ fontSize: 14, marginTop: 2, fontFamily: "var(--ff-display)" }}>EB-3</div>
          <div style={{ fontSize: 6, marginTop: 2, opacity: 0.7 }}>INTERVIEW</div>
        </div>
      </div>

      {/* Document snippet middle-left */}
      <div className="uscis-form" style={{
        top: "20%", left: "0%",
        width: 175,
        zIndex: 2,
        transform: "rotate(-4deg)",
        background: "var(--c-sand-soft)"
      }}>
        <div style={{ fontSize: 7, opacity: 0.55, marginBottom: 4 }}>NOTICE OF ACTION</div>
        <div style={{ fontSize: 8, fontWeight: 700, marginBottom: 6 }}>Petition Approved</div>
        <div style={{ fontSize: 7, opacity: 0.7, lineHeight: 1.5 }}>
          Your I-130 petition for alien<br />
          relative has been approved on<br />
          12/MAR/2026 by USCIS NBC.
        </div>
      </div>

      {/* Decorative airplane / passage line */}
      <svg style={{
        position: "absolute",
        top: "8%", right: "-2%",
        width: 120, height: 120,
        zIndex: 5, opacity: 0.6
      }} viewBox="0 0 120 120" fill="none">
        <path d="M10 90 Q 50 30, 110 20" stroke="var(--c-terracota)" strokeWidth="1" strokeDasharray="3 4" fill="none" />
        <circle cx="10" cy="90" r="3" fill="var(--c-terracota)" />
        <circle cx="110" cy="20" r="3" fill="var(--c-terracota)" />
      </svg>
    </div>);

}

/* =====================================================================
   VALUE PROP / OPENING
   ===================================================================== */
function ValueProp() {
  const { lang } = useLang();
  return (
    <section className="section section--sand" style={{ paddingTop: "clamp(64px, 8vw, 112px)", paddingBottom: "clamp(32px, 4vw, 56px)" }}>
      <div className="container">
        <div className="grid valueprop-grid" style={{ gridTemplateColumns: "1fr 1.4fr", gap: "clamp(32px, 5vw, 88px)", alignItems: "start" }}>
          <div className="reveal valueprop-left" style={{ position: "sticky", top: 96, alignSelf: "start" }}>
            <div className="t-overline" style={{ marginBottom: 16 }}>{tx("Quem sou eu", "About me", lang)}</div>
            <h2 className="t-h1" style={{ marginBottom: 32 }}>
              {lang === "en" ? (
                <>I'm <span style={{ fontStyle: "italic", fontWeight: 400 }}>Raísa Moura</span>,<br/>
                <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>founder</span> of Moura Immigration.</>
              ) : (
                <>Sou{" "}<span style={{ fontStyle: "italic", fontWeight: 400 }}>Raísa Moura</span>,<br/>
                <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>fundadora</span> da Moura Immigration.</>
              )}
            </h2>
            <div className="photo-ph" style={{ aspectRatio: "4 / 5", maxWidth: 360, borderRadius: "var(--r-md)" }}>
              <picture>
                <source srcSet="uploads/raisa-moura-2.avif" type="image/avif" />
                <img
                  src="uploads/raisa-moura-2.jpg"
                  alt="Raísa Moura, paralegal de imigração"
                  width="900"
                  height="1500"
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                    objectPosition: "center",
                    display: "block",
                    borderRadius: "var(--r-md)"
                  }}
                  loading="lazy"
                  decoding="async"
                />
              </picture>
            </div>
          </div>
          <div>
            <p className="t-lead mb-6 reveal delay-1">
              {lang === "en" ? (
                <>Immigration consulting specialized in the United States, with focus on <span className="hl">Marriage Green Card</span> and <span className="hl">EB-3</span>.</>
              ) : (
                <>Consultoria especializada em imigração para os Estados Unidos, com foco em <span className="hl">Green Card por casamento</span> e <span className="hl">EB-3</span>.</>
              )}
            </p>
            <p className="t-body mb-4 reveal delay-2">
              {lang === "en" ? (
                <>I arrived in the United States in <strong style={{ fontWeight: 600 }}>May 2019</strong> as an au pair, freshly graduated in Forest Engineering from <strong style={{ fontWeight: 600 }}>Universidade Federal de Lavras</strong>. I came looking for a better life, with no idea of the maze the American immigration system would be.</>
              ) : (
                <>Cheguei aos Estados Unidos em <strong style={{ fontWeight: 600 }}>maio de 2019</strong> como au pair, recém-formada em Engenharia Florestal pela <strong style={{ fontWeight: 600 }}>Universidade Federal de Lavras</strong>. Vim em busca de melhores condições de vida, sem fazer ideia do labirinto que seria o sistema imigratório americano.</>
              )}
            </p>
            <p className="t-body mb-4 reveal delay-3">
              {lang === "en" ? (
                <>The first host family in New York didn't work out. I went through a lot before moving to Massachusetts, where I was welcomed by a second family. We lived like relatives for <strong style={{ fontWeight: 600 }}>two and a half years</strong>, and it was that family that ended up sponsoring me for the <span className="hl">EB-3</span>, the work visa that hardly anyone was talking about in the Brazilian community in the US, even though it's one of the most concrete opportunities to get a Green Card.</>
              ) : (
                <>A primeira família em Nova York não deu certo. Passei por muita dificuldade antes de me mudar para Massachusetts, onde fui acolhida por uma segunda família. Convivemos como parentes por <strong style={{ fontWeight: 600 }}>dois anos e meio</strong>, e foi essa família que acabou me patrocinando para o <span className="hl">EB-3</span>, 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.</>
              )}
            </p>
            <p className="t-body mb-4 reveal delay-4">
              {lang === "en" ? (
                <>When I discovered EB-3 in practice, I realized dozens of Brazilians around me could be on the same path but didn't know where to start. I began advising people <strong style={{ fontWeight: 600 }}>for free</strong>, got formal authorization to work as a paralegal, and in <strong style={{ fontWeight: 600 }}>2023</strong> I founded Moura Immigration. Today I run one of the <strong style={{ fontWeight: 600 }}>largest private EB-3 job groups</strong> in the United States.</>
              ) : (
                <>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 <strong style={{ fontWeight: 600 }}>de forma gratuita</strong>, recebi autorização formal para atuar como paralegal, e em <strong style={{ fontWeight: 600 }}>2023</strong> fundei a Moura Immigration. Hoje administro um dos <strong style={{ fontWeight: 600 }}>maiores grupos privados de vagas de EB-3</strong> dos Estados Unidos.</>
              )}
            </p>
            <p className="t-body mb-4 reveal delay-4">
              {lang === "en" ? (
                <>I live in <strong style={{ fontWeight: 600 }}>Boston</strong>, where I personally attend interviews at the John F. Kennedy Federal Building. All the technical work happens digitally, serving clients in any American state and in several Brazilian cities.</>
              ) : (
                <>Moro em <strong style={{ fontWeight: 600 }}>Boston</strong>, onde acompanho pessoalmente as entrevistas no John F. Kennedy Federal Building. Todo o trabalho técnico acontece de forma digital, atendendo clientes em qualquer estado americano e em várias cidades do Brasil.</>
              )}
            </p>
            <p className="t-body t-soft mb-8 reveal delay-4" style={{ fontStyle: "italic" }}>
              {tx(
                "Minha missão é legalizar o máximo de imigrantes nos Estados Unidos, com clareza, responsabilidade e presença em cada etapa.",
                "My mission is to legalize as many immigrants as possible in the United States, with clarity, responsibility, and presence at every step.",
                lang
              )}
            </p>

            {/* Pull quote */}
            <div className="reveal" style={{ marginTop: 48, padding: "32px 36px", background: "var(--c-navy)", color: "var(--c-offwhite)", borderRadius: "var(--r-md)", position: "relative" }}>
              <svg width="40" height="28" viewBox="0 0 28 20" fill="none" style={{ position: "absolute", top: 24, left: 36, opacity: 0.18 }}>
                <path d="M0 20V12c0-6.6 4-11 12-12v4c-4 1-6 4-6 8h6v8H0zm16 0v-8c0-6.6 4-11 12-12v4c-4 1-6 4-6 8h6v8H16z" fill="var(--c-terracota)" />
              </svg>
              <p style={{ fontFamily: "var(--ff-display)", fontSize: "clamp(20px, 2.2vw, 26px)", lineHeight: 1.35, fontStyle: "italic", margin: 0, paddingLeft: 56 }}>
                {lang === "en" ? (
                  <>I don't promise shortcuts.<br/><span style={{ color: "var(--c-terracota)" }}>I build a safe path.</span></>
                ) : (
                  <>Não prometo atalho.<br/><span style={{ color: "var(--c-terracota)" }}>Construo caminho seguro.</span></>
                )}
              </p>
            </div>

            {/* Timeline */}
            <div className="reveal" style={{ marginTop: 56, paddingTop: 40, borderTop: "1px solid var(--c-navy-12)" }}>
              <div className="t-overline mb-6" style={{ color: "var(--c-terracota)" }}>{tx("Trajetória", "Journey", lang)}</div>
              <ol className="raisa-timeline">
                {(lang === "en" ? [
                  { y: "2018", t: "Graduated in Forest Engineering", b: "Universidade Federal de Lavras (UFLA)" },
                  { y: "May 2019", t: "Arrived in the US as au pair", b: "First host family in New York. Didn't work out." },
                  { y: "2019", t: "Moved to Massachusetts", b: "A second family welcomed me. For two and a half years we were family." },
                  { y: "2021", t: "EB-3 sponsorship", b: "The family that welcomed me sponsored my EB-3 Green Card. That's when I discovered the opportunity nobody was talking about." },
                  { y: "2023", t: "Founded Moura Immigration", b: "After advising dozens of people for free, I became a paralegal and built the company." },
                  { y: "Today", t: "600+ immigrants advised", b: "Largest private EB-3 group in the US, support from first visa to citizenship." }
                ] : [
                  { y: "2018", t: "Formada em Engenharia Florestal", b: "Universidade Federal de Lavras (UFLA)" },
                  { y: "Maio 2019", t: "Cheguei aos EUA como au pair", b: "Primeira família em Nova York. Não deu certo." },
                  { y: "2019", t: "Mudança pra Massachusetts", b: "Segunda família me acolheu. Por dois anos e meio fomos família." },
                  { 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 ninguém estava falando." },
                  { y: "2023", t: "Fundei a Moura Immigration", b: "Depois de orientar dezenas de pessoas gratuitamente, virei paralegal e estruturei a empresa." },
                  { y: "Hoje", t: "600+ imigrantes orientados", b: "Maior grupo privado de vagas EB-3 dos EUA, atendimento do primeiro visto à cidadania." }
                ]).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>

            {/* Fora do trabalho */}
            <div className="reveal" style={{ marginTop: 56, paddingTop: 40, borderTop: "1px solid var(--c-navy-12)" }}>
              <div className="t-overline mb-4" style={{ color: "var(--c-terracota)" }}>{tx("Fora do trabalho", "Outside work", lang)}</div>
              <p className="t-body" style={{ marginBottom: 0 }}>
                {lang === "en" ? (
                  <>I married <strong style={{ fontWeight: 600 }}>Thiago Tose</strong> in February 2026. I work out every day, travel whenever I can, and keep my routine going with <a href="https://caffeinearmy.superfiliate.com/RAISAMOURA" target="_blank" rel="noopener noreferrer" style={{ color: "var(--c-terracota)", textDecoration: "underline", fontWeight: 500 }}>SuperCoffee</a>. I'm methodical and committed, and that shows in every case I handle.</>
                ) : (
                  <>Casei com o <strong style={{ fontWeight: 600 }}>Thiago Tose</strong> em fevereiro de 2026. Treino todos os dias, viajo sempre que dá, e mantenho a rotina firme com <a href="https://caffeinearmy.superfiliate.com/RAISAMOURA" target="_blank" rel="noopener noreferrer" style={{ color: "var(--c-terracota)", textDecoration: "underline", fontWeight: 500 }}>SuperCoffee</a>. Sou metódica e comprometida, e isso aparece em cada caso que conduzo.</>
                )}
              </p>
            </div>

            {/* Princípios */}
            <div className="reveal" style={{ marginTop: 56, paddingTop: 40, borderTop: "1px solid var(--c-navy-12)" }}>
              <div className="t-overline mb-6" style={{ color: "var(--c-terracota)" }}>{tx("Princípios que guiam o trabalho", "Principles that guide the work", lang)}</div>
              <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 28 }}>
                {(lang === "en" ? [
                  { t: "Technical honesty", b: "If your case has risk, you hear it before investing. No promises that don't fit reality." },
                  { t: "Direct service", b: "The same person analyzes, advises, and files. No conveyor belt of attendants." },
                  { t: "Clear language", b: "Immigration is full of English terms and legal nuance. I translate that so you understand what's at stake." },
                  { t: "Long support", b: "I don't end at approval. I follow you from the first visa to citizenship, step by step." }
                ] : [
                  { t: "Honestidade técnica", b: "Se o caso tem risco, você ouve isso antes de investir. Sem promessa que não cabe na realidade." },
                  { t: "Atendimento direto", b: "Quem analisa, orienta e peticiona é a mesma pessoa. Sem esteira de atendentes." },
                  { t: "Linguagem clara", b: "Imigração é cheia de termo em inglês e nuance jurídica. Eu traduzo pra você entender o que está em jogo." },
                  { t: "Acompanhamento longo", b: "Não termino na aprovação. Sigo do primeiro visto até a cidadania, etapa por etapa." }
                ]).map((p, i) => (
                  <div key={i} style={{ paddingTop: 16, borderTop: "1px solid var(--c-navy-12)" }}>
                    <h3 style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 18, lineHeight: 1.3, color: "var(--c-navy)", margin: "0 0 8px" }}>{p.t}</h3>
                    <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--c-charcoal)", opacity: 0.85, margin: 0 }}>{p.b}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* Quote de cliente */}
            <div className="reveal" style={{ marginTop: 48, padding: "28px 32px", background: "var(--c-offwhite-warm)", borderRadius: "var(--r-md)", borderLeft: "3px solid var(--c-terracota)" }}>
              <svg width="28" height="20" viewBox="0 0 28 20" fill="none" style={{ marginBottom: 12, opacity: 0.5 }}>
                <path d="M0 20V12c0-6.6 4-11 12-12v4c-4 1-6 4-6 8h6v8H0zm16 0v-8c0-6.6 4-11 12-12v4c-4 1-6 4-6 8h6v8H16z" fill="var(--c-terracota)" />
              </svg>
              <p style={{ fontFamily: "var(--ff-display)", fontSize: 18, lineHeight: 1.5, color: "var(--c-navy)", fontStyle: "italic", margin: "0 0 12px" }}>
                {tx(
                  "O que mais importa para mim é a paz de espírito, e foi por isso que escolhemos a Raísa Moura.",
                  "What matters most to me is peace of mind, and that's why we chose Raísa Moura.",
                  lang
                )}
              </p>
              <div style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--c-charcoal)", opacity: 0.7 }}>
                {tx("Cliente americano · esposo de imigrante brasileira", "American client · husband of a Brazilian immigrant", lang)}
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .valueprop-grid { grid-template-columns: 1fr !important; }
            .valueprop-left { position: static !important; }
          }
          .raisa-timeline {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
          }
          .raisa-timeline::before {
            content: "";
            position: absolute;
            left: 56px;
            top: 8px;
            bottom: 8px;
            width: 1px;
            background: var(--c-navy-12);
          }
          .raisa-timeline li {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 20px;
            position: relative;
            padding-bottom: 28px;
          }
          .raisa-timeline li:last-child { padding-bottom: 0; }
          .raisa-timeline .rt-year {
            font-family: var(--ff-display);
            font-weight: 700;
            font-size: 14px;
            color: var(--c-terracota);
            padding-top: 4px;
            letter-spacing: 0.04em;
            position: relative;
          }
          .raisa-timeline .rt-year::after {
            content: "";
            position: absolute;
            right: -12px;
            top: 10px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--c-terracota);
            border: 2px solid var(--c-sand);
            z-index: 1;
          }
          .raisa-timeline .rt-content { padding-left: 16px; }
          .raisa-timeline h4 {
            font-family: var(--ff-display);
            font-weight: 700;
            font-size: 16px;
            line-height: 1.3;
            color: var(--c-navy);
            margin: 0 0 4px;
          }
          .raisa-timeline p {
            font-size: 13.5px;
            line-height: 1.55;
            color: var(--c-charcoal);
            opacity: 0.78;
            margin: 0;
          }
        `}</style>
      </div>
      <style>{`
        .hl {
          position: relative;
          font-weight: 600;
          color: var(--c-navy);
          white-space: nowrap;
        }
        .hl::after {
          content: "";
          position: absolute;
          left: 0; right: 0;
          bottom: 2px;
          height: 6px;
          background: var(--c-terracota);
          opacity: 0.18;
          border-radius: 2px;
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.9s var(--ease-out);
        }
        .reveal.is-in .hl::after { transform: scaleX(1); }
        .hl:nth-of-type(2)::after { transition-delay: 0.2s; }
      `}</style>
    </section>);

}

function CountUp({ target, suffix = "", duration = 1800 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const startedRef = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(target * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [target, duration]);

  return <span ref={ref}>{val}{suffix}</span>;
}

function EmNumeros() {
  const { lang } = useLang();
  const stats = [
    {
      n: 600, suffix: "+", l: lang === "en" ? "immigrants advised" : "imigrantes orientados", icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
          <circle cx="9" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.5" />
          <path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          <circle cx="17" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.5" />
          <path d="M14 18c0-2.2 1.3-4 3-4s3 1.8 3 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      )
    },
    {
      n: 500, suffix: "+", l: lang === "en" ? "status changes filed and approved" : "mudanças de status concluídas e aprovadas", icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
          <path d="M12 2l8 3v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5l8-3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
          <path d="M8 12l3 3 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      )
    },
    {
      n: 50, suffix: "", l: lang === "en" ? "Green Card interviews attended in Boston" : "entrevistas de Green Card acompanhadas em Boston", icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
          <path d="M12 22s7-6 7-12a7 7 0 10-14 0c0 6 7 12 7 12z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
          <circle cx="12" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.5" />
        </svg>
      )
    },
    {
      n: 120, suffix: "", l: lang === "en" ? "EB-3 cases initiated" : "processos de EB-3 iniciados", icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="7" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="1.5" />
          <path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          <path d="M3 13h18" stroke="currentColor" strokeWidth="1.5" />
        </svg>
      )
    },
  ];
  return (
    <section className="section section--sand em-numeros-section" style={{ paddingTop: "clamp(32px, 4vw, 56px)", paddingBottom: "clamp(64px, 8vw, 112px)" }}>
      <div className="container">
        <div className="reveal text-center mb-12 em-numeros-header" 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" ? (
              <><span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>Journey</span> that backs every piece of advice.</>
            ) : (
              <><span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--c-terracota)" }}>Trajetória</span> que sustenta cada orientação.</>
            )}
          </h2>
        </div>
        <div className="grid grid-4" style={{ gap: 32 }}>
          {stats.map((s, i) => (
            <div key={s.l} className={`reveal delay-${i + 1}`} style={{ paddingTop: 24, borderTop: "1px solid var(--c-navy-12)", position: "relative" }}>
              <div style={{ position: "absolute", top: -1, left: 0, height: 1, background: "var(--c-terracota)", width: 48, animation: "em-num-bar 1.4s var(--ease-out) forwards" }}></div>
              <div style={{ color: "var(--c-terracota)", marginBottom: 12, opacity: 0.9 }}>{s.icon}</div>
              <div style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: "clamp(48px, 5vw, 64px)", lineHeight: 1, color: "var(--c-navy)", marginBottom: 16, letterSpacing: "-0.02em" }}>
                <CountUp target={s.n} suffix={s.suffix} />
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: "var(--c-charcoal)", opacity: 0.78 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes em-num-bar { from { width: 0; } to { width: 48px; } }
      `}</style>
    </section>
  );
}

/* =====================================================================
   SERVICES, organized by life moment
   ===================================================================== */
function Services() {
  const { setOpen } = useModal();
  const { lang } = useLang();
  const groups = lang === "en" ? [
    { kicker: "To start your journey", items: [
      { title: "Consular visas (B1/B2, F-1, J-1)", body: "Full preparation for the US Consulate interview in Brazil: DS-160 form, scheduling, mock interview, and document curation. Covers tourism (B1/B2), student (F-1), and exchange/Au Pair (J-1).", forms: "DS-160" }
    ] },
    { kicker: "To build a stable life in the US", featured: true, items: [
      { title: "Marriage Green Card", 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.", forms: "I-130 · I-485 · DS-260" },
      { title: "EB-3, work visa", 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.", forms: "PERM · I-140 · I-485 / DS-260" }
    ] },
    { kicker: "To keep your status while the case runs", items: [
      { title: "Work Permit (EAD)", body: "Filing or renewal of work authorization during your immigration case.", forms: "I-765" },
      { title: "Travel Permit", body: "Filing or renewal of international travel authorization during your case.", forms: "I-131" },
      { title: "Removal of Conditions", body: "Converting the 2-year conditional Green Card into the permanent 10-year (Removal of Conditions).", forms: "I-751" }
    ] },
    { kicker: "To regularize or recover a case", items: [
      { title: "Change of status", body: "For those already in the US who need to transition between categories, especially tourist (B2) and student (F-1).", forms: "I-539" },
      { title: "Motion to Reopen", body: "For those whose case was denied or closed and want to present new facts or evidence.", forms: "I-290B" },
      { title: "RFE response (Request for Evidence)", body: "For those who received a formal USCIS request and need to assemble a technical response within the deadline.", forms: "RFE" }
    ] },
    { kicker: "To complete the cycle", items: [
      { title: "Naturalization", body: "Full application for American citizenship.", forms: "N-400 · N-600" }
    ] },
    { kicker: "To decide the best path", individual: true, items: [
      { title: "Individual Consultation", 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.", forms: "60 min · Video call" }
    ] }
  ] : [
    { kicker: "Pra começar a sua jornada", items: [
      { title: "Vistos consulares (B1/B2, F-1, J-1)", body: "Preparação completa para a entrevista no Consulado dos EUA no Brasil: formulário DS-160, agendamentos, simulação de entrevista e curadoria de documentos. Atende turismo (B1/B2), estudante (F-1) e intercâmbio/Au Pair (J-1).", forms: "DS-160" }
    ] },
    { kicker: "Pra construir uma vida estável nos EUA", featured: true, items: [
      { title: "Green Card por casamento", body: "Acompanho 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.", forms: "I-130 · I-485 · DS-260" },
      { title: "EB-3, visto de trabalho", 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.", forms: "PERM · I-140 · I-485 / DS-260" }
    ] },
    { kicker: "Pra manter o seu status enquanto o processo corre", items: [
      { title: "Autorização de trabalho (Work Permit)", body: "Solicitação ou renovação da autorização de trabalho durante o processo imigratório.", forms: "I-765" },
      { title: "Autorização de viagem (Travel Permit)", body: "Solicitação ou renovação da autorização de viagem internacional durante o processo.", forms: "I-131" },
      { title: "Renovação do Green Card", body: "Conversão do Green Card condicional de 2 anos para o permanente de 10 (Removal of Conditions).", forms: "I-751" }
    ] },
    { kicker: "Pra regularizar ou recuperar um caso", items: [
      { title: "Mudança de status", body: "Para quem já está nos EUA e precisa transicionar entre categorias, principalmente turista (B2) e estudante (F-1).", forms: "I-539" },
      { title: "Reabertura de caso (Motion to Reopen)", body: "Para quem teve um caso negado ou arquivado e quer apresentar novos fatos ou evidências.", forms: "I-290B" },
      { 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.", forms: "RFE" }
    ] },
    { kicker: "Pra concluir o ciclo", items: [
      { title: "Naturalização", body: "Aplicação completa para a cidadania americana.", forms: "N-400 · N-600" }
    ] },
    { kicker: "Pra decidir o melhor caminho", individual: true, items: [
      { title: "Sessão de Atendimento Individual", 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.", forms: "60 min · Videochamada" }
    ] }
  ];

  return (
    <section id="servicos" className="section">
      <div className="container">
        <div className="grid reveal" style={{ gridTemplateColumns: "1.3fr 1fr", gap: "clamp(32px, 5vw, 72px)", alignItems: "end", marginBottom: 64 }}>
          <div>
            <div className="t-overline mb-3">{tx("O que eu faço", "What I do", lang)}</div>
            <h2 className="t-h1">
              {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></>
              )}
            </h2>
          </div>
          <div style={{ paddingLeft: "clamp(0px, 2vw, 24px)", borderLeft: "1px solid var(--c-navy-12)" }}>
            <p className="t-lead" style={{ marginBottom: 0 }}>
              {lang === "en" ? (
                <>The two main focus areas are <strong style={{ fontWeight: 600 }}>Marriage Green Card</strong> and <strong style={{ fontWeight: 600 }}>EB-3</strong>.</>
              ) : (
                <>As duas frentes principais são <strong style={{ fontWeight: 600 }}>Green Card por casamento</strong> e <strong style={{ fontWeight: 600 }}>EB-3</strong>.</>
              )}
            </p>
            <p className="t-body t-soft mt-3" style={{ marginBottom: 0 }}>
              {tx(
                "Em volta delas, ofereço suporte completo pra cada momento do seu cenário migratório.",
                "Around them, I offer full support for every moment of your immigration scenario.",
                lang
              )}
            </p>
          </div>
        </div>

        <div className="services-stack reveal">
          {groups.map((g, gi) => (
            <div key={gi} className="services-group" style={{ marginBottom: gi < groups.length - 1 ? 56 : 0 }}>
              <div className="services-group__head">
                <span className="services-group__num">{String(gi + 1).padStart(2, "0")}</span>
                <span className="services-group__kicker">{g.kicker}</span>
              </div>
              <div className={`services-grid ${g.items.length === 1 ? "services-grid--single" : g.items.length === 2 ? "services-grid--two" : "services-grid--three"}`}>
                {g.items.map((s, i) => (
                  <article
                    key={i}
                    className={`service-card ${g.featured ? "service-card--featured" : ""} ${g.individual ? "service-card--individual" : ""}`}
                  >
                    <div className="service-card__forms">{s.forms}</div>
                    <h3 className="service-card__title">{s.title}</h3>
                    <p className="service-card__body">{s.body}</p>
                    {g.individual && (
                      <button className="btn btn--accent mt-6" onClick={() => setOpen("agenda")} style={{ alignSelf: "flex-start" }}>
                        {tx("Agendar uma 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>
                    )}
                  </article>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .services-group__head {
          display: flex;
          align-items: baseline;
          gap: 16px;
          padding-bottom: 20px;
          margin-bottom: 28px;
          border-bottom: 1px solid var(--c-navy-12);
        }
        .services-group__num {
          font-family: var(--ff-display);
          font-weight: 700;
          font-size: 13px;
          color: var(--c-terracota);
          letter-spacing: 0.08em;
        }
        .services-group__kicker {
          font-family: var(--ff-display);
          font-style: italic;
          font-weight: 400;
          font-size: clamp(20px, 2.4vw, 28px);
          color: var(--c-navy);
          line-height: 1.2;
        }
        .services-grid {
          display: grid;
          gap: 20px;
        }
        .services-grid--single { grid-template-columns: 1fr; }
        .services-grid--two { grid-template-columns: 1fr 1fr; }
        .services-grid--three { grid-template-columns: repeat(3, 1fr); }
        @media (max-width: 880px) {
          .services-grid--two,
          .services-grid--three { grid-template-columns: 1fr !important; }
        }
        .service-card {
          background: var(--c-offwhite-warm);
          border: 1px solid var(--c-navy-12);
          border-radius: var(--r-md);
          padding: 28px;
          display: flex;
          flex-direction: column;
          transition: all 0.3s var(--ease-out);
          position: relative;
          overflow: hidden;
        }
        .service-card::before {
          content: "";
          position: absolute;
          left: 0; top: 0; bottom: 0;
          width: 0;
          background: var(--c-terracota);
          transition: width 0.3s var(--ease-out);
        }
        .service-card:hover {
          border-color: var(--c-navy);
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(26,46,79,0.06);
        }
        .service-card:hover::before { width: 3px; }
        .service-card__forms {
          font-family: var(--ff-display);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.08em;
          color: var(--c-terracota);
          margin-bottom: 14px;
        }
        .service-card__title {
          font-family: var(--ff-display);
          font-weight: 700;
          font-size: 20px;
          line-height: 1.25;
          color: var(--c-navy);
          margin: 0 0 14px;
          text-wrap: balance;
        }
        .service-card__body {
          font-size: 14.5px;
          line-height: 1.6;
          color: var(--c-charcoal);
          opacity: 0.82;
          margin: 0;
          flex: 1;
        }
        .service-card--featured {
          background: var(--c-navy);
          border-color: var(--c-navy);
          padding: 36px 32px;
        }
        .service-card--featured .service-card__title { color: var(--c-offwhite); font-size: 24px; }
        .service-card--featured .service-card__body { color: rgba(244,243,236,0.82); font-size: 15px; }
        .service-card--featured .service-card__forms { color: var(--c-terracota); }
        .service-card--featured:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,46,79,0.18); }
        .service-card--featured::before { background: var(--c-terracota); }
        .service-card--individual {
          background: var(--c-sand);
          border-color: var(--c-terracota);
          padding: 36px 32px;
        }
      `}</style>
    </section>);

}

/* =====================================================================
   SOBRE A RAÍSA
   ===================================================================== */
function SobreRaisa() {
  return (
    <section id="sobre" className="section" style={{ background: "var(--c-offwhite-warm)" }}>
      <div className="container">
        <div className="grid reveal" style={{ gridTemplateColumns: "0.85fr 1.15fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "center" }}>
          <div className="photo-ph" style={{ aspectRatio: "4 / 5" }}>
            <div style={{ textAlign: "center", padding: 24 }}>
              <svg className="ph-icon" viewBox="0 0 64 64" fill="none">
                <circle cx="32" cy="22" r="10" stroke="var(--c-navy)" strokeWidth="1.5" />
                <path d="M12 56c0-11 9-20 20-20s20 9 20 20" stroke="var(--c-navy)" strokeWidth="1.5" />
              </svg>
              <div className="ph-label">RETRATO RAÍSA MOURA</div>
            </div>
          </div>
          <div>
            <div className="t-overline mb-3">Sobre a Raísa</div>
            <h2 className="t-h1 mb-6">
              Sou paralegal de imigração e <span style={{ fontStyle: "italic", fontWeight: 400 }}>fundadora</span> da Moura Immigration Management.
            </h2>
            <p className="t-lead mb-4">
              Trabalho com brasileiros que querem morar legalmente nos Estados Unidos. Conduzo cada processo de perto.
            </p>
            <p className="t-body mb-4">
              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.
            </p>
            <blockquote className="quote-block mt-8" style={{ paddingLeft: 24, borderLeft: "2px solid var(--c-terracota)" }}>
              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.
            </blockquote>
            <a href="sobre.html" className="btn btn--ghost mt-8" style={{ paddingLeft: 0 }}>
              Conhecer a Raísa
              <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>);

}

/* =====================================================================
   WHY US, dark navy section, single dramatic moment
   ===================================================================== */
function WhyUs() {
  const { lang } = useLang();
  const reasons = lang === "en" ? [
    { kicker: "01", title: "Direct service with me, from start to finish", body: "You don't get stuck on a conveyor belt of attendants. The same person analyzes, advises, and files your case." },
    { kicker: "02", title: "100% digital operation", body: "Doesn't matter if you're in Brazil or anywhere in the US. Everything happens over WhatsApp, email, and video calls." },
    { kicker: "03", title: "Portuguese language, technical reasoning", body: "Immigration is full of English terms and legal nuance. I translate it into language you understand, without leaving you lost in jargon." },
    { kicker: "04", title: "Realistic guidance, no false promises.", body: "If your case has risk, you hear it from me before you spend a dollar. If there's a path, I'll show it to you." },
    { kicker: "05", title: "Focus on staying legal, not on shortcuts", body: "I don't work with shortcuts that compromise your future in the US. Public charge, Medicaid misuse, inconsistent declarations — everything gets reviewed beforehand." },
    { kicker: "06", title: "Support all the way to citizenship, not just approval", body: "Immigration has many stages: EAD, conditional Green Card, renewal, naturalization. I stay with you through the entire process, I don't drop you along the way." }
  ] : [
    { kicker: "01", title: "Atendimento direto comigo, do início ao fim", body: "Você não cai numa esteira de atendentes. Quem analisa, orienta e peticiona é a mesma pessoa." },
    { kicker: "02", title: "Operação 100% digital", body: "Não importa se você está no Brasil ou nos EUA, em qualquer estado. Tudo é feito por WhatsApp, e-mail e videochamada." },
    { kicker: "03", title: "Linguagem em português, raciocínio técnico", body: "Imigração é cheia de termo em inglês e nuance jurídica. Eu traduzo isso pra uma linguagem que você entende, sem te deixar perdido em jargão." },
    { kicker: "04", title: "Orientação realista, sem promessas falsas.", body: "Se o seu caso tem risco, você ouve isso de mim antes de fazer qualquer investimento. Se tem um caminho, eu mostrarei ele para você." },
    { kicker: "05", title: "Foco em quem quer ficar legal, não em atalho", body: "Não trabalho com receitas que comprometem o seu futuro nos EUA. Public charge, uso indevido de Medicaid, declarações inconsistentes, tudo é avaliado antes." },
    { kicker: "06", title: "Acompanhamento até a cidadania, não só até a aprovação", body: "Imigração tem várias etapas: EAD, Green Card condicional, renovação, naturalização. Eu sigo com você no processo inteiro, sem te deixar pelo caminho." }
  ];

  return (
    <section className="section section--navy">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 760, marginBottom: 64 }}>
          <div className="t-overline mb-3">{tx("Por que com a Moura Immigration", "Why with Moura Immigration", lang)}</div>
          <h2 className="t-h1">
            {lang === "en" ? (
              <><span style={{ fontStyle: "italic", fontWeight: 400 }}>Six things</span> you won't find in any other firm.</>
            ) : (
              <><span style={{ fontStyle: "italic", fontWeight: 400 }}>Seis coisas</span> que você não vai encontrar em qualquer escritório.</>
            )}
          </h2>
        </div>
        <div className="grid grid-2 gap-8" style={{ gap: 48 }}>
          {reasons.map((r, i) =>
          <div key={r.kicker} className={`reveal whyus-card delay-${(i % 4) + 1}`} style={{ paddingTop: 28, borderTop: "1px solid rgba(244,243,236,0.18)" }}>
              <div className="flex justify-between items-start gap-4 mb-3">
                <span style={{
                fontFamily: "var(--ff-display)",
                fontSize: 14,
                fontWeight: 700,
                color: "var(--c-terracota)",
                letterSpacing: "0.06em"
              }}>{r.kicker}</span>
                <h3 style={{
                fontFamily: "var(--ff-display)",
                fontWeight: 700,
                fontSize: 22,
                lineHeight: 1.25,
                color: "var(--c-offwhite)",
                margin: 0,
                flex: 1,
                textWrap: "balance"
              }}>{r.title}</h3>
              </div>
              <p style={{
              fontSize: 15, lineHeight: 1.65,
              color: "rgba(244,243,236,0.78)",
              margin: 0,
              paddingLeft: 36
            }}>{r.body}</p>
            </div>
          )}
        </div>
      </div>
      <style>{`
        .whyus-card { transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
        .whyus-card:hover { border-top-color: var(--c-terracota); transform: translateY(-2px); }
      `}</style>
    </section>);

}

/* =====================================================================
   COMO FUNCIONA, process steps
   ===================================================================== */
function ComoFunciona() {
  const { setOpen } = useModal();
  const { lang } = useLang();
  const steps = lang === "en" ? [
    { n: "01", title: "First contact", body: "Depends on what you need. For EB-3: start with the eligibility form. For Marriage Green Card and other services: message the team on WhatsApp. Still unsure about your path: book an Individual Consultation.",
      branches: [
        { label: "EB-3 Form", action: () => setOpen("eb3") },
        { label: "Team WhatsApp", href: "https://api.whatsapp.com/send/?phone=15084006674&text&type=phone_number&app_absent=0" },
        { label: "Individual Session", action: () => setOpen("agenda") }
      ] },
    { n: "02", title: "Case analysis", body: "I understand your scenario (current status, goal, timeline) and show which technical path fits you, with transparency about timing and risks." },
    { n: "03", title: "Process starts", body: "Once approved, the technical work begins: filing, organizing evidence, assembling the package and supporting you all the way to approval." }
  ] : [
    { n: "01", title: "Primeiro contato", body: "Depende do que você precisa. Pra EB-3: começa pelo formulário de elegibilidade. Pra Green Card por casamento e demais serviços: fala com a equipe pelo WhatsApp. Ainda em dúvida sobre o seu caminho: agenda uma Sessão de Atendimento Individual.",
      branches: [
        { label: "Formulário EB-3", action: () => setOpen("eb3") },
        { label: "WhatsApp da equipe", href: "https://api.whatsapp.com/send/?phone=15084006674&text&type=phone_number&app_absent=0" },
        { label: "Sessão Individual", action: () => setOpen("agenda") }
      ] },
    { n: "02", title: "Análise do seu caso", body: "Eu entendo o seu cenário (status atual, objetivo, prazo) e mostro qual caminho técnico cabe pra você, com transparência sobre prazos e riscos." },
    { n: "03", title: "Início do processo", body: "A partir do aceite, começa o trabalho técnico: peticionamento, organização de evidências, montagem do pacote e acompanhamento até a aprovação." }
  ];


  return (
    <section id="como-funciona" className="section">
      <div className="container">
        <div className="reveal mb-16" style={{ maxWidth: 760 }}>
          <div className="t-overline mb-3">{tx("Como funciona", "How it works", lang)}</div>
          <h2 className="t-h1" style={{ paddingBottom: 12 }}>
            {lang === "en" ? (
              <>Three{" "}<span style={{ fontStyle: "italic", fontWeight: 400 }}>simple</span> steps, from first contact to approval.</>
            ) : (
              <>Três etapas{" "}<span style={{ fontStyle: "italic", fontWeight: 400 }}>simples</span>, do primeiro contato à aprovação.</>
            )}
          </h2>
        </div>
        <div className="grid grid-3 gap-6 reveal" style={{ gap: 24 }}>
          {steps.map((s) =>
          <div key={s.n} className="card process-step" style={{
            background: "var(--c-offwhite)",
            border: "1px solid var(--c-navy-12)",
            padding: 32,
            minHeight: 280,
            position: "relative",
            display: "flex",
            flexDirection: "column"
          }}>
              <div style={{
              fontFamily: "var(--ff-display)",
              fontWeight: 700,
              fontSize: 56,
              lineHeight: 1,
              color: "var(--c-sand)",
              marginBottom: 24
            }}>{s.n}</div>
              <h3 className="t-h3 mb-3" style={{ fontSize: 22 }}>{s.title}</h3>
              <p className="t-small mb-4" style={{ color: "var(--c-charcoal)", opacity: 0.85, fontSize: 15, lineHeight: 1.6, flex: 1 }}>{s.body}</p>
              {s.branches && (
                <div className="branch-grid mt-4">
                  {s.branches.map((b, i) => (
                    b.href ? (
                      <a key={i} href={b.href} target="_blank" rel="noopener noreferrer" className="branch-pill">
                        <span>{b.label}</span>
                        <svg width="10" height="10" 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>
                    ) : (
                      <button key={i} onClick={b.action} className="branch-pill">
                        <span>{b.label}</span>
                        <svg width="10" height="10" 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>
      </div>
      <style>{`
        .process-step { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
        .process-step:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,46,79,0.08); }
        .branch-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .branch-pill {
          display: flex; align-items: center; justify-content: space-between; gap: 6px;
          width: 100%;
          padding: 10px 16px;
          border-radius: 999px;
          background: var(--c-sand);
          border: 1px solid var(--c-navy-12);
          color: var(--c-navy);
          font-size: 13px;
          font-weight: 500;
          cursor: pointer;
          text-decoration: none;
          font-family: inherit;
          text-align: left;
          transition: all 0.2s var(--ease-out);
        }
        .branch-pill:hover {
          background: var(--c-navy);
          color: var(--c-offwhite);
          border-color: var(--c-navy);
        }
      `}</style>
    </section>);

}

/* =====================================================================
   DEPOIMENTOS, drag carousel
   ===================================================================== */
function Depoimentos() {
  const { lang } = useLang();
  const T = (field) => field && typeof field === "object" ? (field[lang] || field.pt) : field;
  const [openDepo, setOpenDepo] = useState(null);

  useEffect(() => {
    if (!openDepo) return;
    const handler = (e) => { if (e.key === "Escape") setOpenDepo(null); };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [openDepo]);
  const items = [
  {
    kind: { pt: "Acompanhamento como tradutora na entrevista de Green Card", en: "Translator during Green Card interview" },
    city: { pt: "Boston, EUA", en: "Boston, USA" },
    author: { pt: "Cliente americano, esposo de imigrante brasileira", en: "American client, husband of a Brazilian immigrant" },
    headline: { pt: "O que mais importa para mim é a paz de espírito, e foi por isso que escolhemos a Raísa Moura.", en: "What matters most to me is peace of mind, and that's why we chose Raísa Moura." },
    preview: { pt: "Minha esposa é brasileira e precisávamos de uma tradutora para a entrevista de Green Card em Boston. Eu não podia entrar com ela. Foi muito importante encontrar a pessoa certa para estar com ela quando eu não pudesse.", en: "My wife is Brazilian and we needed a translator for the Green Card interview in Boston. I couldn't go in with her. It was very important to find the right person to be with her when I couldn't." },
    body: { pt: [
      "Minha esposa é brasileira, e estávamos solicitando o Green Card dela. Nosso advogado havia explicado que precisaríamos fazer uma entrevista presencial no John F. Kennedy Building, em Boston, e que precisaríamos de um tradutor, já que minha esposa ainda não fala inglês fluentemente. Disseram que eu não poderia entrar com ela. Eu não gostava da ideia de ela passar por aquilo sozinha, então era muito importante para mim encontrar a pessoa certa para estar com ela quando eu não pudesse.",
      "Foi minha esposa quem encontrou o contato da Raísa Moura. Depois de conversar com vários candidatos, ela se sentiu mais segura com a Raísa. Os três sentamos em uma chamada de vídeo para discutir o que estávamos buscando, como imaginávamos o dia e o que daria a maior chance de sucesso.",
      "A Raísa foi muito tranquilizadora e prestativa, explicando suas experiências pessoais e profissionais, percorrendo o processo conosco e nos contando sobre seu histórico de trabalho. Mesmo em situações estressantes, saber que você tem pessoas competentes e profissionais trabalhando para garantir o seu sucesso traz essa segurança.",
      "Eu nunca tinha estado naquele prédio, mas a Raísa já conhecia e nos ajudou inclusive a achar estacionamento. Apesar de termos chegado cedo, esperamos mais de uma hora para sermos atendidos. A Raísa não se abalou e ficou conversando com a gente até nos chamarem. Naquele momento, fiquei muito grato pela escolha. Foi tranquilizador saber que ela seria não só a tradutora da minha esposa, mas também alguém para apoiá-la e segurar a mão dela quando eu não pudesse estar lá.",
      "Nossa história tem um final feliz. O mais feliz de todos. Que, na verdade, é um começo. E somos gratos por termos escolhido a Raísa para fazer parte dele."
    ], en: [
      "My wife is Brazilian, and we were applying for her Green Card. Our attorney explained we'd need to do an in-person interview at the John F. Kennedy Building in Boston, and we'd need a translator since my wife doesn't speak English fluently yet. They told me I couldn't go in with her. I didn't like the idea of her going through that alone, so it was very important to find the right person to be with her when I couldn't.",
      "It was my wife who found Raísa Moura's contact. After talking to several candidates, she felt most secure with Raísa. The three of us sat down on a video call to discuss what we were looking for, how we imagined the day, and what would give us the best chance of success.",
      "Raísa was very reassuring and helpful, explaining her personal and professional experiences, walking us through the process, and telling us about her work history. Even in stressful situations, knowing you have competent, professional people working to guarantee your success brings that kind of peace.",
      "I had never been to that building, but Raísa already knew it and even helped us find parking. Even though we arrived early, we waited over an hour to be called. Raísa stayed calm and talked with us the whole time. At that moment, I was very grateful for our choice. It was reassuring to know she would be not just my wife's translator, but also someone to support her and hold her hand when I couldn't be there.",
      "Our story has a happy ending. The happiest of all. Which is, in fact, a beginning. And we are grateful we chose Raísa to be a part of it."
    ] }
  },
  {
    kind: { pt: "Visto de estudante (F-1) aprovado após RFE", en: "Student visa (F-1) approved after RFE" },
    city: { pt: "EUA", en: "USA" },
    author: "Thays Bernardi",
    headline: { pt: "Quem me deu a notícia de que o visto foi aprovado foi a própria Raísa.", en: "It was Raísa herself who told me my visa was approved." },
    preview: { pt: "Eu havia entrado com o visto por meio de outro paralegal, que fez o meu caso de qualquer jeito. Quando recebi a RFE, decidi fechar com a Raísa.", en: "I had filed my visa through another paralegal who handled my case carelessly. When I got the RFE, I decided to work with Raísa." },
    body: { pt: [
      "Hoje tive uma excelente notícia: meu visto de estudante foi aprovado depois de uma RFE.",
      "Eu havia entrado com o visto por meio de um paralegal, indicação de uma pessoa da faculdade, que fez o meu caso de qualquer jeito. Quando recebi a RFE, mesmo ele se dispondo a responder sem custo, eu não quis. Decidi fechar com a Raísa.",
      "Senti muita confiança nela pelo que via no grupo: a dedicação, a forma como atende, sempre solícita, sempre tirando dúvidas, fazendo lives, sempre transparente. Antes de fechar, eu já havia chamado a Raísa várias vezes no particular para tirar todo tipo de dúvida, e ela sempre respondia, dispondo do tempo e do conhecimento dela sem ganhar nada. Nunca me pressionou nem me deixou desconfortável no sentido de eu precisar fechar algo com ela.",
      "Quando avisei que tinha recebido a RFE, no mesmo dia ela fez uma chamada de vídeo comigo. A ligação, que era para ser rápida, durou quase uma hora. Ela foi me mostrando coisas que eu nem havia pensado. Me mandava mensagem às vezes quase meia-noite.",
      "Na minha RFE, pediram o máximo do que costumam pedir. Eu estava muito apreensiva, mas Deus colocou a Raísa no meu caminho. Ela fez tudo com tanta dedicação que fiquei impressionada quando me enviou a RFE com 114 páginas.",
      "Inclusive, quem me deu a notícia de que o visto foi aprovado foi a própria Raísa, porque era ela quem entrava no site da imigração para conferir."
    ], en: [
      "Today I got great news: my student visa was approved after an RFE.",
      "I had filed my visa through a paralegal recommended by someone at college, and he handled my case carelessly. When I got the RFE, even though he offered to respond at no extra cost, I didn't want to. I decided to work with Raísa.",
      "I trusted her a lot based on what I saw in the group: her dedication, the way she handles things, always helpful, always answering questions, doing lives, always transparent. Before I hired her, I had already messaged Raísa several times privately to ask all sorts of questions, and she always answered, giving her time and knowledge for free. She never pressured me or made me uncomfortable about needing to close a deal.",
      "When I told her I had received the RFE, she made a video call with me that same day. The call, which was supposed to be quick, lasted almost an hour. She showed me things I hadn't even thought of. She would message me sometimes near midnight.",
      "On my RFE, they asked for the maximum they usually ask for. I was very anxious, but God put Raísa on my path. She did everything with so much dedication that I was impressed when she sent me the RFE response with 114 pages.",
      "And it was Raísa herself who told me my visa was approved, because she was the one checking the immigration site."
    ] }
  },
  {
    kind: { pt: "EB-3, cliente em processo", en: "EB-3, client in process" },
    city: "",
    author: "Daiana Silva",
    headline: { pt: "Tem diferença entre mentir e passar segurança sendo otimista.", en: "There's a difference between lying and giving confidence by being optimistic." },
    preview: { pt: "Conheci a Raísa em novembro de 2023, e posso dizer com toda certeza que ela sempre teve boa vontade e foi honesta em tudo. O EB-3 leva tempo mesmo, requer paciência, dinheiro e planejamento.", en: "I met Raísa in November 2023, and I can say with full certainty that she has always been willing and honest about everything. EB-3 really takes time, requires patience, money, and planning." },
    body: { pt: [
      "Eu chorei muitos dias também. Não se iluda. Mas continuei otimista de que a hora chegaria.",
      "Conheci a Raísa em novembro de 2023, e posso dizer com toda certeza que ela sempre teve boa vontade e foi honesta em tudo. Ela sempre fala que é para ser otimista, e não que o processo vai levar 'menos tempo' ou no máximo dois anos. Tem diferença entre mentir e passar segurança sendo otimista. O EB-3 leva tempo mesmo, requer muita paciência, dinheiro e planejamento.",
      "Mas qualquer processo imigratório é assim: não tem caminho fácil. É melhor fazer um que você sabe que no final vai dar certo, com segurança no processo e sem ter feito nada errado para conseguir o Green Card."
    ], en: [
      "I cried for many days too. Don't kid yourself. But I stayed optimistic that the time would come.",
      "I met Raísa in November 2023, and I can say with full certainty that she has always been willing and honest about everything. She always says it's about being optimistic, not that the process will take 'less time' or two years max. There's a difference between lying and giving confidence by being optimistic. EB-3 really takes time, requires a lot of patience, money, and planning.",
      "But any immigration process is like that: there's no easy path. It's better to do one you know will work out in the end, with security in the process and without doing anything wrong to get the Green Card."
    ] }
  },
  {
    kind: { pt: "Resposta de Evidência (RFE) aprovada em três dias", en: "Request For Evidence (RFE) approved in three days" },
    city: "",
    author: "Viviane Agnoletto",
    headline: { pt: "Raísa é perfeita, sem defeitos. Fez minha vida mil vezes mais fácil. Fez a imigração me responder em três dias.", en: "Raísa is flawless. She made my life a thousand times easier. She got immigration to respond in three days." },
    preview: { pt: "Raísa é perfeita, sem defeitos. Fez minha vida mil vezes mais fácil. Fez a imigração me responder em três dias.", en: "Raísa is flawless. She made my life a thousand times easier. She got immigration to respond in three days." },
    body: { pt: [
      "Raísa é perfeita, sem defeitos. Fez minha vida mil vezes mais fácil. Fez a imigração me responder em três dias."
    ], en: [
      "Raísa is flawless. She made my life a thousand times easier. She got immigration to respond in three days."
    ] }
  },
  {
    kind: { pt: "Green Card por casamento", en: "Marriage Green Card" },
    city: "",
    author: "Tori",
    headline: { pt: "A Raísa Moura é a minha salva-vidas.", en: "Raísa Moura is my lifesaver." },
    preview: { pt: "A Raísa Moura é a minha salva-vidas. Eu e meu marido só temos elogios para falar sobre ela. Inclusive, a Raísa sabia quando eu seria pedida em casamento antes de mim.", en: "Raísa Moura is my lifesaver. My husband and I only have great things to say about her. In fact, Raísa knew when I'd be proposed to before I did." },
    body: { pt: [
      "A Raísa Moura é a minha salva-vidas. Eu e meu marido só temos elogios para falar sobre ela.",
      "Inclusive, a Raísa sabia quando eu seria pedida em casamento antes de mim. Meu marido planejou com ela a data para enviar a documentação, mas não queria estragar a surpresa."
    ], en: [
      "Raísa Moura is my lifesaver. My husband and I only have great things to say about her.",
      "In fact, Raísa knew when I'd be proposed to before I did. My husband planned with her the date to submit the documentation, but he didn't want to ruin the surprise."
    ] }
  },
  {
    kind: { pt: "Work Permit (EAD) aprovada", en: "Work Permit (EAD) approved" },
    city: "",
    author: "T. Rocha",
    headline: { pt: "Estou feliz demais por minha Work Permit ter chegado tão rápido.", en: "I'm so happy my Work Permit arrived so fast." },
    preview: { pt: "Muito obrigada por todo o suporte que você tem dado para a gente. Obrigada pela paciência e por responder as mensagens na hora em que precisávamos.", en: "Thank you so much for all the support you've given us. Thank you for your patience and for answering our messages right when we needed it." },
    body: { pt: [
      "Raísa, muito obrigada por todo o suporte que você tem dado para a gente. Estou feliz demais por minha Work Permit ter chegado tão rápido.",
      "Obrigada pela paciência e por responder as mensagens na hora em que precisávamos. Indico de olhos fechados. Que Deus continue abençoando o seu trabalho."
    ], en: [
      "Raísa, thank you so much for all the support you've given us. I'm so happy my Work Permit arrived so fast.",
      "Thank you for your patience and for answering our messages right when we needed it. I recommend her with my eyes closed. May God continue to bless your work."
    ] }
  },
  {
    kind: { pt: "Cliente, gratidão geral", en: "Client, general gratitude" },
    city: "",
    author: "Vitoria Barbosa",
    headline: { pt: "Se não fosse essa mulher, eu estaria perdida na vida.", en: "If it weren't for this woman, I'd be lost in life." },
    preview: { pt: "A Raísa é maravilhosa. Se não fosse essa mulher, eu estaria perdida na vida. Raísa, você é incrível.", en: "Raísa is wonderful. If it weren't for this woman, I'd be lost in life. Raísa, you are amazing." },
    body: { pt: [
      "A Raísa é maravilhosa. Se não fosse essa mulher, eu estaria perdida na vida. Raísa, você é incrível."
    ], en: [
      "Raísa is wonderful. If it weren't for this woman, I'd be lost in life. Raísa, you are amazing."
    ] }
  },
  {
    kind: { pt: "Submissão de evidência em processo imigratório", en: "Evidence submission in immigration case" },
    city: "",
    author: "Barbara Luysa",
    headline: { pt: "Você é incrível no seu trabalho. Indico de olhos fechados.", en: "You're amazing at your job. I recommend you with my eyes closed." },
    preview: { pt: "Muítissimo obrigada por tudo nesse processo. Você é incrível no seu trabalho.", en: "Thank you so much for everything in this process. You're amazing at your job." },
    body: { pt: [
      "Muítissimo obrigada por tudo nesse processo. Você é incrível no seu trabalho. Indico de olhos fechados."
    ], en: [
      "Thank you so much for everything in this process. You're amazing at your job. I recommend you with my eyes closed."
    ] }
  }];


  const trackRef = useRef(null);
  const didDragRef = useRef(false);
  const [idx, setIdx] = useState(0);
  const [isDragging, setIsDragging] = useState(false);

  const scrollToIdx = (i) => {
    const t = trackRef.current;
    if (!t) return;
    const card = t.children[i];
    if (card) card.scrollIntoView({ behavior: "smooth", inline: "start", block: "nearest" });
    setIdx(i);
  };

  const handleCardClick = (it) => {
    if (didDragRef.current) return;
    setOpenDepo(it);
  };

  // Track scroll → update active dot
  useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    const onScroll = () => {
      const cw = t.children[0]?.offsetWidth || 1;
      const newIdx = Math.round(t.scrollLeft / (cw + 24));
      setIdx(Math.min(items.length - 1, Math.max(0, newIdx)));
    };
    t.addEventListener("scroll", onScroll, { passive: true });
    return () => t.removeEventListener("scroll", onScroll);
  }, [items.length]);

  // Drag-to-scroll (mouse only — touch uses native scroll-snap which doesn't block vertical scroll)
  useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    let startX, scrollLeft, dragging = false;
    const DRAG_THRESHOLD = 5; // px

    const down = (e) => {
      if (e.button !== undefined && e.button !== 0) return; // only left click
      dragging = true;
      didDragRef.current = false;
      startX = e.pageX - t.offsetLeft;
      scrollLeft = t.scrollLeft;
    };
    const move = (e) => {
      if (!dragging) return;
      const x = e.pageX - t.offsetLeft;
      const delta = x - startX;
      if (Math.abs(delta) > DRAG_THRESHOLD) {
        didDragRef.current = true;
        setIsDragging(true);
        if (e.cancelable) e.preventDefault();
      }
      t.scrollLeft = scrollLeft - delta;
    };
    const up = () => {
      if (!dragging) return;
      dragging = false;
      setIsDragging(false);
      setTimeout(() => { didDragRef.current = false; }, 50);
    };
    t.addEventListener("mousedown", down);
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    return () => {
      t.removeEventListener("mousedown", down);
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
    };
  }, []);

  return (
    <section id="depoimentos" className="section section--sand">
      <div className="container">
        <div className="flex justify-between items-end gap-8 mb-6 reveal" style={{ flexWrap: "wrap" }}>
          <div>
            <div className="t-overline mb-3">{tx("Quem já passou pelo processo comigo", "Who went through the process with me", lang)}</div>
            <h2 className="t-h1" style={{ maxWidth: 720 }}>
              {lang === "en" ? (
                <>Real stories of those who made it{" "}
                <span style={{ fontStyle: "italic", fontWeight: 400 }}>to the other side.</span></>
              ) : (
                <>Histórias reais de quem chegou{" "}
                <span style={{ fontStyle: "italic", fontWeight: 400 }}>do outro lado.</span></>
              )}
            </h2>
          </div>
          <div className="flex gap-2">
            <button className="carousel-btn" onClick={() => scrollToIdx(Math.max(0, idx - 1))} disabled={idx === 0}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 4l-4 4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
            <button className="carousel-btn" onClick={() => scrollToIdx(Math.min(items.length - 1, idx + 1))} disabled={idx === items.length - 1}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
          </div>
        </div>

        <div ref={trackRef} className="no-scrollbar reveal" style={{
          display: "flex",
          gap: 24,
          overflowX: "auto",
          scrollSnapType: "x mandatory",
          paddingBottom: 8,
          cursor: isDragging ? "grabbing" : "grab",
          userSelect: isDragging ? "none" : "auto"
        }}>
          {items.map((it, i) =>
          <div key={i} className="depo-card" style={{
            flex: "0 0 min(420px, 84%)",
            scrollSnapAlign: "start",
            background: "var(--c-offwhite)",
            border: "1px solid var(--c-navy-12)",
            borderRadius: "var(--r-lg)",
            padding: 32,
            display: "flex",
            flexDirection: "column",
            minHeight: 360,
            cursor: isDragging ? "grabbing" : "pointer",
            transition: "all 0.25s var(--ease-out)",
            userSelect: "none"
          }} onClick={() => handleCardClick(it)}>
              <div className="t-caption mb-3" style={{ color: "var(--c-terracota)", opacity: 1, letterSpacing: "0.06em", fontSize: 10, textTransform: "uppercase", fontWeight: 600, textWrap: "balance" }}>{T(it.kind)}</div>
              <svg width="32" height="22" viewBox="0 0 32 22" fill="none" style={{ marginBottom: 16, opacity: 0.4 }}>
                <path d="M0 22V14C0 6.5 4.5 1 12 0v4C7 4.5 5 7 5 11h7v11H0zm20 0V14c0-7.5 4.5-13 12-14v4c-5 .5-7 3-7 7h7v11H20z" fill="var(--c-terracota)" />
              </svg>
              <p style={{
              fontFamily: "var(--ff-display)",
              fontStyle: "italic",
              fontSize: 17,
              lineHeight: 1.4,
              color: "var(--c-navy)",
              fontWeight: 700,
              margin: 0,
              marginBottom: 16
            }}>{T(it.headline)}</p>
              <p style={{
              fontSize: 14, lineHeight: 1.6,
              color: "var(--c-charcoal)",
              opacity: 0.78,
              margin: 0,
              marginBottom: 20,
              flex: 1
            }}>{T(it.preview)}</p>
              <div style={{ paddingTop: 20, borderTop: "1px solid var(--c-navy-12)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                <div>
                  <div style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 14, color: "var(--c-navy)" }}>{T(it.author)}</div>
                  {it.city && <div className="t-small t-soft">{T(it.city)}</div>}
                </div>
                <span style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 600, color: "var(--c-terracota)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                  {tx("Ler completo", "Read more", lang)}
                  <svg width="10" height="10" 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>
                </span>
              </div>
            </div>
          )}
        </div>

        {/* Dot indicators */}
        <div className="flex gap-2 mt-8 depo-dots" style={{ justifyContent: "center" }}>
          {items.map((_, i) =>
          <button key={i} onClick={() => scrollToIdx(i)} aria-label={`Slide ${i + 1}`} className="depo-dot" data-active={i === idx} />
          )}
        </div>

      </div>

      <style>{`
        .carousel-btn {
          width: 44px; height: 44px;
          border-radius: 50%;
          border: 1px solid var(--c-navy);
          color: var(--c-navy);
          background: transparent;
          display: grid; place-items: center;
          cursor: pointer;
          transition: all 0.2s var(--ease-out);
        }
        .carousel-btn:hover:not(:disabled) {
          background: var(--c-navy); color: var(--c-offwhite);
        }
        .carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .depo-card:hover { border-color: var(--c-navy); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,46,79,0.08); }
        .depo-modal-overlay {
          position: fixed; inset: 0; z-index: 1000;
          background: rgba(26,46,79,0.45);
          backdrop-filter: blur(8px);
          display: grid; place-items: center;
          padding: 24px;
          animation: depo-fade-in 0.25s var(--ease-out);
        }
        @keyframes depo-fade-in { from { opacity: 0; } to { opacity: 1; } }
        .depo-modal {
          background: var(--c-offwhite);
          border-radius: var(--r-lg);
          max-width: 720px;
          width: 100%;
          max-height: 88vh;
          overflow-y: auto;
          padding: 48px;
          position: relative;
          animation: depo-slide-up 0.3s var(--ease-out);
        }
        @keyframes depo-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 720px) {
          .depo-modal-overlay { padding: 0; }
          .depo-modal { max-height: 100vh; border-radius: 0; padding: 64px 20px 32px; }
        }
        .depo-modal__close {
          position: absolute; top: 20px; right: 20px;
          width: 40px; height: 40px;
          border-radius: 50%;
          border: 1px solid var(--c-navy-12);
          background: var(--c-offwhite-warm);
          display: grid; place-items: center;
          cursor: pointer;
          transition: all 0.2s var(--ease-out);
          color: var(--c-navy);
          z-index: 10;
        }
        .depo-modal__close:hover { background: var(--c-navy); color: var(--c-offwhite); border-color: var(--c-navy); }
        /* Mobile: close fica fixo no canto superior direito da tela, sempre visivel */
        @media (max-width: 720px) {
          .depo-modal__close {
            position: fixed !important;
            top: 14px !important;
            right: 14px !important;
            width: 44px !important;
            height: 44px !important;
            background: var(--c-navy) !important;
            color: var(--c-offwhite) !important;
            border: none !important;
            box-shadow: 0 4px 14px rgba(26,46,79,0.25) !important;
          }
        }
        .depo-modal__kind {
          font-family: var(--ff-display);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.08em;
          color: var(--c-terracota);
          text-transform: uppercase;
          margin-bottom: 16px;
        }
        .depo-modal__headline {
          font-family: var(--ff-display);
          font-style: italic;
          font-weight: 700;
          font-size: clamp(20px, 2.4vw, 26px);
          line-height: 1.3;
          color: var(--c-navy);
          margin: 0 0 28px;
          padding-bottom: 24px;
          border-bottom: 1px solid var(--c-navy-12);
        }
        .depo-modal__body p {
          font-size: 15.5px;
          line-height: 1.75;
          color: var(--c-charcoal);
          margin: 0 0 18px;
        }
        .depo-modal__author {
          margin-top: 24px;
          padding-top: 20px;
          border-top: 1px solid var(--c-navy-12);
          font-family: var(--ff-display);
          font-weight: 700;
          font-size: 15px;
          color: var(--c-navy);
        }
      `}</style>

      {openDepo && (
        <div className="depo-modal-overlay" onClick={() => setOpenDepo(null)}>
          <div className="depo-modal" onClick={(e) => e.stopPropagation()}>
            <button className="depo-modal__close" onClick={() => setOpenDepo(null)} aria-label={tx("Fechar", "Close", lang)}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
            </button>
            <div className="depo-modal__kind">{T(openDepo.kind)}</div>
            <h3 className="depo-modal__headline">"{T(openDepo.headline)}"</h3>
            <div className="depo-modal__body">
              {T(openDepo.body).map((p, i) => <p key={i}>{p}</p>)}
            </div>
            <div className="depo-modal__author">
              {T(openDepo.author)}{openDepo.city && <span style={{ fontWeight: 400, opacity: 0.6 }}> · {T(openDepo.city)}</span>}
            </div>
          </div>
        </div>
      )}
    </section>);

}

/* =====================================================================
   CONTACT CTAS, 3 channels
   ===================================================================== */
function ContactCtas() {
  const channels = [
  {
    kicker: "Conteúdo no dia a dia",
    title: "Instagram",
    handle: "@raisamoura",
    body: "Explicações sobre vistos, atualizações do USCIS e respostas pras dúvidas que mais aparecem.",
    cta: "Abrir Instagram",
    href: "https://instagram.com/raisamoura",
    icon: "instagram"
  },
  {
    kicker: "Conversa direta com a equipe",
    title: "WhatsApp",
    handle: "(508) 400-6674",
    body: "Fala com a equipe pra entender qual é o caminho do seu caso. Resposta em horário comercial (EST).",
    cta: "Chamar no WhatsApp",
    href: "https://wa.me/15084006674",
    icon: "whatsapp"
  },
  {
    kicker: "Pra contato escrito",
    title: "E-mail",
    handle: "rmouraimmigration@gmail.com",
    body: "Pra documentos, parcerias e questões que pedem um histórico em texto, escreve direto pra mim.",
    cta: "Enviar e-mail",
    href: "mailto:rmouraimmigration@gmail.com",
    icon: "email"
  }];

  return (
    <section id="contato" className="section">
      <div className="container">
        <div className="reveal text-center" style={{ maxWidth: 720, margin: "0 auto 56px" }}>
          <div className="t-overline mb-3">Onde me encontra</div>
          <h2 className="t-h1">
            Três{" "}
            <span style={{ fontStyle: "italic", fontWeight: 400 }}>canais diretos,</span>
            <br />escolhe o que faz sentido pra você.
          </h2>
        </div>
        <div className="grid grid-3 gap-6 reveal">
          {channels.map((c, i) =>
          <a key={i} href={c.href} target={c.href.startsWith("http") ? "_blank" : undefined} rel="noopener noreferrer" className="contact-card">
              <div className="contact-card__icon">
                <ChannelIcon kind={c.icon} color="var(--c-navy)" />
              </div>
              <div className="t-overline" style={{ fontSize: 11, opacity: 0.6, marginBottom: 12 }}>{c.kicker}</div>
              <h3 className="contact-card__title">{c.title}</h3>
              <div className="contact-card__handle">{c.handle}</div>
              <p className="contact-card__body">{c.body}</p>
              <span className="contact-card__cta">
                {c.cta}
                <svg className="arrow" viewBox="0 0 16 16" fill="none" width="14" height="14">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
            </a>
          )}
        </div>
      </div>
      <style>{`
        .contact-card {
          display: flex; flex-direction: column;
          background: var(--c-offwhite-warm);
          border: 1px solid var(--c-navy-12);
          border-radius: var(--r-lg);
          padding: 36px;
          min-height: 340px;
          color: var(--c-charcoal);
          text-decoration: none;
          transition: all 0.3s var(--ease-out);
          position: relative;
          overflow: hidden;
        }
        .contact-card::before {
          content: "";
          position: absolute; left: 0; top: 0; bottom: 0;
          width: 3px; background: var(--c-terracota);
          transform: scaleY(0); transform-origin: top;
          transition: transform 0.35s var(--ease-out);
        }
        .contact-card:hover { border-color: var(--c-navy); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,46,79,0.08); }
        .contact-card:hover::before { transform: scaleY(1); }
        .contact-card__icon {
          width: 48px; height: 48px; border-radius: 12px;
          background: var(--c-sand);
          display: grid; place-items: center;
          margin-bottom: 28px;
        }
        .contact-card__title {
          font-family: var(--ff-display);
          font-weight: 700; font-size: 24px;
          color: var(--c-navy);
          margin: 0 0 6px;
        }
        .contact-card__handle {
          font-family: var(--ff-display);
          font-style: italic;
          font-size: 17px;
          color: var(--c-terracota);
          margin-bottom: 18px;
        }
        .contact-card__body {
          font-size: 15px; line-height: 1.6;
          margin: 0 0 28px;
          flex: 1; opacity: 0.85;
        }
        .contact-card__cta {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--ff-display);
          font-weight: 700; font-size: 14px;
          color: var(--c-navy);
          letter-spacing: 0.02em;
        }
        .contact-card:hover .contact-card__cta .arrow { transform: translateX(4px); }
        .contact-card .arrow { transition: transform 0.3s var(--ease-out); }
      `}</style>
    </section>);

}

function ChannelIcon({ kind, color }) {
  const props = { width: 22, height: 22, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "instagram") return (
    <svg viewBox="0 0 24 24" {...props}>
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="0.6" fill={color} stroke="none" />
    </svg>);
  if (kind === "whatsapp") return (
    <svg viewBox="0 0 24 24" {...props}>
      <path d="M3 21l1.6-4.5A8.5 8.5 0 1 1 7.5 19.4L3 21z" />
      <path d="M8.5 9.5c.2 2 2 4 4 4.2.6.1 1.4-.3 1.8-.8.3-.4-.3-.9-.8-1.1-.4-.2-.9.2-1.2-.1-.6-.6-1-1-1.6-1.6-.3-.3.1-.8-.1-1.2-.2-.5-.7-1.1-1.1-.8-.5.4-.9 1.2-.8 1.8z" fill={color} stroke="none" />
    </svg>);
  return (
    <svg viewBox="0 0 24 24" {...props}>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3 7l9 6 9-6" />
    </svg>);
}

/* =====================================================================
   FAQ, accordion
   ===================================================================== */
function FAQ() {
  const { lang } = useLang();
  const items = lang === "en" ? [
    { q: "Do you work with people in Brazil or only those already in the US?", a: "Both scenarios. Everything is digital, with clients in every American state and in several Brazilian cities." },
    { q: "How do I know if I'm eligible for a Marriage Green Card?", a: "If you are married to or will marry a US citizen, you're generally eligible. The nuances come up in each person's immigration history (current status, travel, previous marriages, etc.). An individual analysis is part of the first conversation." },
    { q: "How long does EB-3 take?", a: "EB-3 is a long process that requires patience, planning, and resources. I don't promise short timelines, I deliver security on the path. In the first conversation I lay out what to expect for your specific scenario." },
    { q: "What is the Individual Consultation?", a: "It's a 60-minute session with me over video call. The goal is to clear your head about the process: ask questions about EB-3, marriage, change of status, life after Au Pair, or any scenario specific to your case. You leave the session knowing the realistic path for you and whether it makes sense to continue with me. No documental deliverable, just direct guidance." },
    { q: "Are you a law firm?", a: "No. I'm a consultant specialized in immigration management. For services that require a licensed attorney, I work in partnership with trusted immigration lawyers." },
    { q: "Are USCIS fees included?", a: "No. Official US government fees are paid separately, directly to USCIS." },
    { q: "Can it be done urgently?", a: "Yes. All services can be done on an urgent basis, with an Emergency Fee." }
  ] : [
    { q: "Atende quem está no Brasil ou só quem já está nos EUA?", a: "Atendo os dois cenários. Tudo é digital, com clientes em todos os estados americanos e em várias cidades do Brasil." },
    { q: "Como sei se sou elegível para um Green Card por casamento?", a: "Se você é casado(a) ou vai se casar com cidadão(ã) americano(a), em geral é elegível. As nuances aparecem no histórico migratório de cada um (status atual, viagens, casamentos anteriores, etc.). A análise individual é parte da primeira conversa." },
    { q: "E o EB-3, leva quanto tempo?", a: "EB-3 é processo longo, que requer paciência, planejamento e recursos. Eu não vendo prazo curto, vendo segurança no caminho. Na primeira conversa eu apresento o que esperar do seu cenário específico." },
    { q: "O que é a Sessão de Atendimento Individual?", a: "É uma sessão de 60 minutos comigo, em videochamada. O objetivo é clarear a sua cabeça sobre o processo: tirar dúvidas sobre EB-3, casamento, mudança de status, vida pós-Au Pair, ou qualquer cenário específico do seu caso. Você sai da sessão sabendo qual o caminho realista pra você, e se faz sentido seguir comigo nos próximos passos. Não tem entregável documental, é orientação direta." },
    { q: "Você é uma firma de advocacia?", a: "Não. Sou consultora especializada em gestão imigratória. Para serviços que exigem advogado licenciado, atuo em parceria com advogadas de imigração de confiança." },
    { q: "As taxas do USCIS estão incluídas?", a: "Não. As taxas oficiais do governo americano são pagas separadamente, direto ao USCIS." },
    { q: "Tem como fazer com urgência?", a: "Tem. Todos os serviços podem ser realizados em regime de urgência, mediante cobrança de Emergency Fee." }
  ];

  const [openIdx, setOpenIdx] = useState(-1);

  return (
    <section id="faq" className="section">
      <div className="container">
        <div className="grid reveal" style={{ gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="t-overline mb-3">FAQ</div>
            <h2 className="t-h1">
              {lang === "en" ? (
                <>Frequently{" "}<span style={{ fontStyle: "italic", fontWeight: 400 }}>asked.</span></>
              ) : (
                <>Perguntas{" "}<span style={{ fontStyle: "italic", fontWeight: 400 }}>frequentes.</span></>
              )}
            </h2>
            <p className="t-body t-soft mt-6 mw-prose">
              {tx(
                "Não encontrou o que procurava? Entra em contato pela página de Contato, qualquer dúvida específica do seu caso eu respondo direto.",
                "Didn't find what you're looking for? Reach out through the Contact page, any specific question about your case I'll answer directly.",
                lang
              )}
            </p>
          </div>
          <div>
            {items.map((it, i) => {
              const isOpen = openIdx === i;
              return (
                <div key={i} style={{
                  borderTop: "1px solid var(--c-navy-12)",
                  borderBottom: i === items.length - 1 ? "1px solid var(--c-navy-12)" : "none"
                }}>
                  <button onClick={() => setOpenIdx(isOpen ? -1 : i)} style={{
                    width: "100%",
                    padding: "24px 0",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 16,
                    background: "transparent",
                    border: "none",
                    cursor: "pointer",
                    textAlign: "left"
                  }}>
                    <span style={{
                      fontFamily: "var(--ff-display)",
                      fontWeight: 700,
                      fontSize: 18,
                      color: "var(--c-navy)",
                      lineHeight: 1.35,
                      textWrap: "balance"
                    }}>{it.q}</span>
                    <span style={{
                      width: 32, height: 32, borderRadius: "50%",
                      border: "1px solid var(--c-navy)",
                      display: "grid", placeItems: "center",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                      transition: "transform 0.3s var(--ease-out)",
                      flexShrink: 0,
                      color: "var(--c-navy)"
                    }}>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                        <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                      </svg>
                    </span>
                  </button>
                  <div style={{
                    overflow: "hidden",
                    maxHeight: isOpen ? 400 : 0,
                    opacity: isOpen ? 1 : 0,
                    transition: "max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out)"
                  }}>
                    <p className="t-body t-soft" style={{ paddingBottom: 24, paddingRight: 56, margin: 0 }}>
                      {it.a}
                    </p>
                  </div>
                </div>);

            })}
          </div>
        </div>
      </div>
    </section>);

}

/* =====================================================================
   FINAL CTA
   ===================================================================== */
function FinalCta() {
  const { setOpen } = useModal();
  const { lang } = useLang();
  const paths = lang === "en" ? [
    { kicker: "For initial questions", title: "Message the team on WhatsApp", body: "Green Card, status change, visas, and more. The team guides you on the next step of your case.", cta: "Open WhatsApp", action: () => window.open("https://wa.me/15084006674", "_blank"), icon: "whatsapp" },
    { kicker: "To start an EB-3", title: "EB-3 Eligibility Form", body: "Fill out in 2 minutes so I can understand your profile and validate if there's a path through EB-3 Skilled or Non-Skilled.", cta: "Start form", action: () => setOpen("eb3"), icon: "form" },
    { kicker: "If you're unsure", title: "Book a session", body: "60-minute Individual Consultation with me over video, to clarify your path and define the next step.", cta: "Book session", action: () => setOpen("agenda"), icon: "calendar" }
  ] : [
    { kicker: "Pra dúvidas iniciais", title: "Falar com a equipe no WhatsApp", body: "Green Card, mudança de status, vistos e demais. A equipe te orienta sobre o próximo passo do seu caso.", cta: "Chamar no WhatsApp", action: () => window.open("https://wa.me/15084006674", "_blank"), icon: "whatsapp" },
    { kicker: "Pra começar um EB-3", title: "Formulário de elegibilidade EB-3", body: "Responde em 2 minutos pra eu entender o seu perfil e validar se há caminho via EB-3 Skilled ou Non-Skilled.", cta: "Iniciar formulário", action: () => setOpen("eb3"), icon: "form" },
    { kicker: "Pra quem está em dúvida", title: "Agendar uma sessão", body: "Sessão de Atendimento Individual de 60 minutos comigo, em vídeo, pra clarear o seu caminho e definir o próximo passo.", cta: "Agendar sessão", action: () => setOpen("agenda"), icon: "calendar" }
  ];

  return (
    <section className="section section--sand" style={{ paddingBlock: "clamp(72px, 10vw, 144px)" }}>
      <div className="container">
        <div className="reveal text-center" style={{ maxWidth: 860, margin: "0 auto 64px" }}>
          <div className="t-overline mb-6">{tx("Último passo", "Final step", lang)}</div>
          <h2 className="t-display" style={{ fontSize: "clamp(34px, 5vw, 64px)" }}>
            {lang === "en" ? (
              <>Immigrating legally is a big decision, and you{" "}
              <span style={{ fontStyle: "italic", color: "var(--c-terracota)", fontWeight: 400 }}>don't have to make it without direction.</span></>
            ) : (
              <>Imigrar legalmente é uma decisão grande, e você{" "}
              <span style={{ fontStyle: "italic", color: "var(--c-terracota)", fontWeight: 400 }}>não precisa tomar essa decisão sem direcionamento.</span></>
            )}
          </h2>
          <p className="t-lead mt-6" style={{ maxWidth: 640, margin: "24px auto 0" }}>
            {tx(
              "Cada caso tem um ponto de partida diferente. Esses são os caminhos:",
              "Each case has a different starting point. These are the paths:",
              lang
            )}
          </p>
        </div>

        <div className="grid grid-3 gap-6 reveal">
          {paths.map((p, i) => (
            <button key={i} onClick={p.action} className="path-card">
              <div className="path-card__icon">
                <PathIcon kind={p.icon} />
              </div>
              <div className="t-overline" style={{ fontSize: 10, opacity: 0.65, marginBottom: 12 }}>{p.kicker}</div>
              <h3 className="path-card__title">{p.title}</h3>
              <p className="path-card__body">{p.body}</p>
              <span className="path-card__cta">
                {p.cta}
                <svg className="arrow" viewBox="0 0 16 16" fill="none" width="14" height="14">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
            </button>
          ))}
        </div>
      </div>

      <style>{`
        .path-card {
          display: flex; flex-direction: column; text-align: left;
          background: var(--c-offwhite);
          border: 1px solid var(--c-navy-12);
          border-radius: var(--r-lg);
          padding: 36px; min-height: 320px;
          cursor: pointer; font: inherit; color: var(--c-charcoal);
          transition: all 0.3s var(--ease-out);
          position: relative; overflow: hidden;
        }
        .path-card::after {
          content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
          background: var(--c-terracota);
          transform: scaleX(0); transform-origin: left;
          transition: transform 0.35s var(--ease-out);
        }
        .path-card:hover { border-color: var(--c-navy); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,46,79,0.08); }
        .path-card:hover::after { transform: scaleX(1); }
        .path-card__icon {
          width: 52px; height: 52px; border-radius: 14px;
          background: var(--c-sand);
          display: grid; place-items: center; margin-bottom: 28px;
        }
        .path-card__title {
          font-family: var(--ff-display); font-weight: 700;
          font-size: 22px; line-height: 1.25;
          color: var(--c-navy);
          margin: 0 0 16px; text-wrap: balance;
        }
        .path-card__body {
          font-size: 15px; line-height: 1.6;
          margin: 0 0 32px; opacity: 0.85; flex: 1;
        }
        .path-card__cta {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--ff-display);
          font-weight: 700; font-size: 14px;
          color: var(--c-navy); letter-spacing: 0.02em;
        }
        .path-card:hover .arrow { transform: translateX(4px); }
        .path-card .arrow { transition: transform 0.3s var(--ease-out); }
      `}</style>
    </section>);

}

function PathIcon({ kind }) {
  const p = { width: 24, height: 24, fill: "none", stroke: "var(--c-navy)", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "whatsapp") return (
    <svg viewBox="0 0 24 24" {...p}>
      <path d="M3 21l1.6-4.5A8.5 8.5 0 1 1 7.5 19.4L3 21z" />
    </svg>);
  if (kind === "form") return (
    <svg viewBox="0 0 24 24" {...p}>
      <rect x="5" y="3" width="14" height="18" rx="2" />
      <path d="M9 8h6M9 12h6M9 16h4" />
    </svg>);
  return (
    <svg viewBox="0 0 24 24" {...p}>
      <rect x="3" y="5" width="18" height="16" rx="2" />
      <path d="M3 10h18M8 3v4M16 3v4" />
      <circle cx="12" cy="15" r="1.5" fill="var(--c-navy)" stroke="none" />
    </svg>);
}

Object.assign(window, { HomePage });