// pages.jsx — Home, Cursos, Publicações, Sobre, Contato

const COURSES = [
  {
    num: "I",
    title: "Lavagem de Dinheiro e Direito Penal Econômico",
    desc: "Análise das tipologias contemporâneas de branqueamento de capitais — da fase de colocação à integração — sob a perspectiva do magistrado que julga, da Lei nº 9.613/98 à cooperação jurídica internacional.",
    duration: "16 semanas",
    format: "Híbrido",
    level: "Avançado",
  },
  {
    num: "II",
    title: "Contrabando, Descaminho e Crimes de Fronteira",
    desc: "A linha tênue entre o ilícito tributário e o crime organizado transnacional. Estudo aprofundado dos artigos 334 e 334-A do Código Penal, das rotas de fronteira e do tratamento jurisprudencial federal.",
    duration: "12 semanas",
    format: "Presencial",
    level: "Avançado",
  },
  {
    num: "III",
    title: "Crime Organizado e Organizações Criminosas",
    desc: "A Lei nº 12.850/13 sob a leitura de quem aplicou. Colaboração premiada, infiltração de agentes, ação controlada e o desafio probatório nos grandes casos da Justiça Federal.",
    duration: "14 semanas",
    format: "Híbrido",
    level: "Especialização",
  },
  {
    num: "IV",
    title: "Casos Complexos sob a Perspectiva do Juiz Federal",
    desc: "Seminário fechado sobre instrução de macroprocessos: gestão da prova, prazos, dispersão geográfica, perícias financeiras e a fundamentação das decisões em volumes documentais extensos.",
    duration: "8 semanas",
    format: "Presencial",
    level: "Magistratura",
  },
  {
    num: "V",
    title: "Crimes Financeiros e Mercado de Capitais",
    desc: "Manipulação de mercado, uso indevido de informação privilegiada, evasão de divisas e gestão fraudulenta. Diálogo entre a Lei nº 7.492/86, o sistema CVM/BCB e a jurisprudência das varas especializadas.",
    duration: "12 semanas",
    format: "Online ao vivo",
    level: "Avançado",
  },
  {
    num: "VI",
    title: "Cooperação Jurídica Internacional em Matéria Penal",
    desc: "MLATs, extradição, transferência de pessoas condenadas e a coleta de prova no estrangeiro. Estudo do papel da Justiça Federal nos casos transnacionais de criminalidade econômica.",
    duration: "10 semanas",
    format: "Online ao vivo",
    level: "Especialização",
  },
];

const PUBLICATIONS = [
  { year: "2024", title: "A Prova nos Macroprocessos Penais", sub: "Ensaios sobre a instrução criminal em casos de alta complexidade", type: "Livro", area: "Direito Penal" },
  { year: "2023", title: "Lavagem de Dinheiro: 25 Anos da Lei 9.613", sub: "Coletânea — Instituto Jurídico Juiz Odilon", type: "Coletânea", area: "Penal Econômico" },
  { year: "2022", title: "Cooperação Jurídica em Crimes Transnacionais", sub: "Estudo institucional sobre MLATs e a Justiça Federal", type: "Monografia", area: "Internacional" },
  { year: "2021", title: "Crime Organizado e o Juízo de Verossimilhança", sub: "Ensaios reunidos da magistratura federal", type: "Livro", area: "Penal" },
  { year: "2020", title: "Fronteiras Penais: Contrabando e Descaminho", sub: "Tomos I e II — Comentários ao art. 334 do Código Penal", type: "Tratado", area: "Penal Econômico" },
  { year: "2019", title: "A Colaboração Premiada na Lei 12.850", sub: "Apontamentos críticos sob a perspectiva do julgador", type: "Artigo", area: "Penal" },
];

/* ═════════════════════════════════════════════════════════════
   HOME
   ═════════════════════════════════════════════════════════════ */
function HomePage({ tweaks, onNavigate }) {
  const Hero = tweaks.heroVariant === "contemporaneo" ? HeroContemporaneo : HeroSolene;
  return (
    <main>
      <Hero density={tweaks.density} onNavigate={onNavigate} />

      {/* Manifesto */}
      <section style={{ background: "var(--paper)" }}>
        <div className="container">
          <div className="section-head">
            <div className="meta">
              <span className="eyebrow">§ I — Manifesto</span>
              <span className="micro">Posicionamento institucional</span>
            </div>
            <div>
              <p style={{
                fontFamily: "var(--font-display)",
                fontWeight: 400,
                fontSize: "clamp(28px, 2.8vw, 42px)",
                lineHeight: 1.25,
                letterSpacing: "-0.005em",
                color: "var(--ink)",
                maxWidth: "26ch",
                margin: 0,
              }}>
                O Instituto Jurídico Juiz Odilon reflete a autoridade de uma trajetória construída
                no <em style={{ color: "var(--gold-dim)" }}>centro dos grandes temas</em> do direito
                penal econômico e da criminalidade complexa no Brasil.
              </p>
              <hr className="rule gold" style={{ margin: "40px 0 24px", width: 80 }} />
              <p style={{ color: "var(--ink-72)", fontSize: 17, maxWidth: "52ch" }}>
                Não somos um curso de mercado. Somos um centro de estudos avançados, fundado na
                experiência prática de quem julgou — e segue julgando — os maiores casos da
                Justiça Federal. Cada programa é desenhado para formar juristas que enfrentam
                processos de alta complexidade na realidade do foro.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Áreas de estudo */}
      <section className="tight" style={{ background: "var(--paper)" }}>
        <div className="container">
          <div className="section-head">
            <div className="meta">
              <span className="eyebrow">§ II — Áreas de Estudo</span>
              <span className="micro">Seis linhas de pesquisa</span>
            </div>
            <div>
              <h2 className="display display-m">
                Linhas de pesquisa<br />
                <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>e formação avançada</em>
              </h2>
            </div>
          </div>

          <div className="area-grid">
            {[
              ["I", "Direito Penal Econômico", "Lavagem, evasão, gestão fraudulenta e o sistema dos crimes contra a ordem financeira."],
              ["II", "Crime Organizado", "Lei 12.850, colaboração premiada, infiltração e a prova nos grandes casos."],
              ["III", "Contrabando e Descaminho", "Crimes de fronteira, tipologias do art. 334 e a leitura jurisprudencial federal."],
              ["IV", "Casos Complexos", "Macroprocessos, gestão probatória e a fundamentação no contencioso volumoso."],
              ["V", "Cooperação Internacional", "MLATs, extradição, joint investigations e a Justiça Federal transnacional."],
              ["VI", "Magistratura Aplicada", "A perspectiva de quem julga: técnica decisória e a ética do magistrado federal."],
            ].map(([num, title, desc]) => (
              <div className="area-cell" key={num}>
                <span className="num">{num}</span>
                <h4>{title}</h4>
                <p>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Sobre o Juiz — dark editorial */}
      <section className="section-dark" style={{ position: "relative", overflow: "hidden" }}>
        {tweaks.monogramaPresence !== "minimo" && (
          <div className="section-monogram" style={{
            right: tweaks.monogramaPresence === "destaque" ? "-4%" : "-12%",
            top: "10%",
            opacity: tweaks.monogramaPresence === "destaque" ? 0.10 : 0.05,
          }}>
            IJO
          </div>
        )}
        <div className="container" style={{ position: "relative" }}>
          <div className="editorial">
            <div>
              <div className="hero-portrait" style={{ aspectRatio: "4/5" }}>
                <img src="assets/odilon.png" alt="Juiz Odilon" />
              </div>
              <div className="micro" style={{ marginTop: 16, color: "var(--gold-soft)" }}>
                Retrato institucional · Campo Grande, MS
              </div>
            </div>
            <div>
              <span className="eyebrow on-dark">§ III — O Diretor</span>
              <h2 className="display display-l" style={{ color: "var(--ivory)", marginTop: 20 }}>
                Juiz Odilon<br />
                <em className="serif-italic" style={{ color: "var(--gold)" }}>de Oliveira</em>
              </h2>
              <hr className="rule" style={{ background: "var(--gold-line)", margin: "32px 0", width: 80 }} />
              <p className="lede" style={{ color: "rgba(244,238,221,0.84)" }}>
                Referência nacional no enfrentamento ao crime organizado, contrabando, lavagem de
                dinheiro e crimes financeiros — com trajetória marcada pela magistratura federal e
                pela atuação em casos de alta complexidade.
              </p>
              <p style={{ color: "rgba(244,238,221,0.7)" }}>
                Por mais de três décadas na Justiça Federal, julgou processos que redesenharam a
                resposta institucional brasileira à criminalidade complexa. O Instituto reúne, em
                programas estruturados, a leitura técnica e prática construída no exercício real
                da jurisdição.
              </p>
              <a href="#sobre" className="link-arrow on-dark" style={{ marginTop: 28, display: "inline-flex" }}
                 onClick={(e) => { e.preventDefault(); onNavigate("sobre"); }}>
                Conheça a trajetória <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Pull quote */}
      <section className="section-dark tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <hr className="rule" style={{ background: "var(--gold-line)" }} />
          <div style={{ padding: "80px 0", display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "center" }}>
            <div className="eyebrow on-dark">Posicionamento</div>
            <div>
              <p className="pull-quote">
                <span className="open">“</span>
                Aqui há autoridade jurídica construída por trajetória, estudo e experiência real.
              </p>
              <div className="attrib">Frase-guia institucional</div>
            </div>
          </div>
          <hr className="rule" style={{ background: "var(--gold-line)" }} />
        </div>
      </section>

      {/* Programas em destaque */}
      <section style={{ background: "var(--paper)" }}>
        <div className="container">
          <div className="section-head">
            <div className="meta">
              <span className="eyebrow">§ IV — Programas</span>
              <span className="micro">Edição 2026</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 32 }}>
              <h2 className="display display-l">
                Programas em<br />
                <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>formação</em>
              </h2>
              <a href="#cursos" className="link-arrow"
                 onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>
                Ver todos <span className="arrow">→</span>
              </a>
            </div>
          </div>

          <div className="course-grid">
            {COURSES.slice(0, 4).map((c, i) => (
              <CourseCard key={c.num} course={c} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* Publicações em destaque */}
      <section className="tight" style={{ background: "var(--paper-warm)" }}>
        <div className="container">
          <div className="section-head">
            <div className="meta">
              <span className="eyebrow">§ V — Publicações</span>
              <span className="micro">Acervo editorial</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 32 }}>
              <h2 className="display display-m">
                Acervo de <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>publicações</em>
              </h2>
              <a href="#publicacoes" className="link-arrow"
                 onClick={(e) => { e.preventDefault(); onNavigate("publicacoes"); }}>
                Catálogo completo <span className="arrow">→</span>
              </a>
            </div>
          </div>

          <div className="pub-list">
            {PUBLICATIONS.slice(0, 4).map((p, i) => (
              <PubRow key={i} pub={p} />
            ))}
          </div>
        </div>
      </section>

      {/* CTA institucional final */}
      <section style={{ background: "var(--navy-900)", padding: "140px 0", position: "relative", overflow: "hidden" }}>
        <div className="section-monogram" style={{ left: "-8%", top: "20%", opacity: 0.06 }}>IJO</div>
        <div className="container" style={{ position: "relative", textAlign: "center" }}>
          <Flourish width={120} color="var(--gold)" />
          <h2 className="display display-l" style={{ color: "var(--ivory)", margin: "40px auto 24px", maxWidth: "20ch" }}>
            Explore a <em className="serif-italic" style={{ color: "var(--gold)" }}>formação jurídica</em><br />
            avançada do Instituto.
          </h2>
          <p className="lede" style={{ color: "rgba(244,238,221,0.74)", margin: "0 auto 40px" }}>
            Inscrições abertas para a edição 2026 dos programas de especialização e extensão.
            Vagas limitadas, processo seletivo institucional.
          </p>
          <a href="#cursos" className="btn btn-gold"
             onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>
            Conhecer os programas <span className="arrow">→</span>
          </a>
        </div>
      </section>
    </main>
  );
}

/* ─── Course card subcomponent ─────────────────────────── */
function CourseCard({ course, index }) {
  return (
    <article className="course-card">
      <span className="course-num">{course.num}</span>
      <div className="course-body">
        <h3>{course.title}</h3>
        <p>{course.desc}</p>
        <div className="course-meta">
          <span><span className="dot"></span>{course.duration}</span>
          <span><span className="dot"></span>{course.format}</span>
          <span><span className="dot"></span>{course.level}</span>
        </div>
      </div>
      <span className="course-arrow">→</span>
    </article>
  );
}

/* ─── Publication row ──────────────────────────────────── */
function PubRow({ pub }) {
  return (
    <div className="pub-row">
      <div className="pub-year">{pub.year}</div>
      <div className="pub-title">
        {pub.title}
        <small>{pub.sub}</small>
      </div>
      <div className="pub-meta">{pub.type}</div>
      <div className="pub-meta">{pub.area}</div>
      <div className="pub-arrow">→</div>
    </div>
  );
}

/* ═════════════════════════════════════════════════════════════
   CURSOS
   ═════════════════════════════════════════════════════════════ */
function CursosPage({ onNavigate }) {
  const [filter, setFilter] = useState("Todos");
  const areas = ["Todos", "Avançado", "Especialização", "Magistratura"];
  const filtered = filter === "Todos" ? COURSES : COURSES.filter((c) => c.level === filter);

  return (
    <main>
      <PageHead
        crumbs={["Instituto", "Cursos"]}
        title="Formação jurídica<br /><em>avançada</em>"
        sub="Seis programas estruturados em torno das áreas de maior complexidade do direito penal econômico — desenhados a partir da experiência prática da magistratura federal."
      />

      <section style={{ background: "var(--paper)" }}>
        <div className="container">
          {/* filtros */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 64, flexWrap: "wrap", gap: 24 }}>
            <div style={{ display: "flex", gap: 8 }}>
              {areas.map((a) => (
                <button
                  key={a}
                  onClick={() => setFilter(a)}
                  style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: 11,
                    fontWeight: 600,
                    letterSpacing: "0.18em",
                    textTransform: "uppercase",
                    padding: "10px 18px",
                    border: `1px solid ${filter === a ? "var(--ink)" : "var(--line)"}`,
                    background: filter === a ? "var(--ink)" : "transparent",
                    color: filter === a ? "var(--paper)" : "var(--ink-72)",
                    transition: "all .3s ease",
                  }}
                >
                  {a}
                </button>
              ))}
            </div>
            <div className="micro">{filtered.length} programas · Edição 2026</div>
          </div>

          <div className="course-grid">
            {filtered.map((c) => (
              <CourseCard key={c.num} course={c} />
            ))}
          </div>
        </div>
      </section>

      {/* Modalidades */}
      <section className="section-dark tight">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 64 }}>
            {[
              ["Presencial", "Encontros no Instituto, em Campo Grande, com seminários fechados e estudo de caso conduzido pelo Juiz Odilon."],
              ["Híbrido", "Aulas síncronas semanais combinadas com módulos presenciais intensivos no Instituto."],
              ["Online ao vivo", "Programas inteiramente remotos, com seminários síncronos e biblioteca digital exclusiva."],
            ].map(([t, d], i) => (
              <div key={i}>
                <div className="hero-eyebrow" style={{ marginBottom: 16 }}>Modalidade · {String(i + 1).padStart(2, "0")}</div>
                <h3 className="display display-s" style={{ color: "var(--ivory)", marginBottom: 16 }}>{t}</h3>
                <p style={{ color: "rgba(244,238,221,0.7)", fontSize: 15, lineHeight: 1.6 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaInstitucional onNavigate={onNavigate} />
    </main>
  );
}

/* ═════════════════════════════════════════════════════════════
   PUBLICAÇÕES
   ═════════════════════════════════════════════════════════════ */
function PublicacoesPage({ onNavigate }) {
  const [area, setArea] = useState("Todas");
  const areas = ["Todas", "Direito Penal", "Penal Econômico", "Internacional", "Penal"];
  const filtered = area === "Todas" ? PUBLICATIONS : PUBLICATIONS.filter((p) => p.area === area);

  return (
    <main>
      <PageHead
        crumbs={["Instituto", "Publicações"]}
        title="Acervo<br /><em>editorial</em>"
        sub="Livros, coletâneas, monografias e artigos produzidos no âmbito do Instituto e por seu corpo de pesquisadores associados."
      />

      <section style={{ background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 64, flexWrap: "wrap", gap: 24 }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {areas.map((a) => (
                <button
                  key={a}
                  onClick={() => setArea(a)}
                  style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: 11,
                    fontWeight: 600,
                    letterSpacing: "0.18em",
                    textTransform: "uppercase",
                    padding: "10px 18px",
                    border: `1px solid ${area === a ? "var(--ink)" : "var(--line)"}`,
                    background: area === a ? "var(--ink)" : "transparent",
                    color: area === a ? "var(--paper)" : "var(--ink-72)",
                    transition: "all .3s ease",
                  }}
                >
                  {a}
                </button>
              ))}
            </div>
            <div className="micro">{filtered.length} títulos no acervo</div>
          </div>

          <div className="pub-list">
            {filtered.map((p, i) => <PubRow key={i} pub={p} />)}
          </div>
        </div>
      </section>

      {/* Featured */}
      <section className="tight" style={{ background: "var(--paper-warm)" }}>
        <div className="container">
          <div className="section-head">
            <div className="meta">
              <span className="eyebrow">Destaque</span>
              <span className="micro">Lançamento institucional</span>
            </div>
            <div>
              <h2 className="display display-m">Em destaque <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>no acervo</em></h2>
            </div>
          </div>
          <div className="editorial">
            <div style={{ aspectRatio: "3/4", maxWidth: 480 }}>
              <Placeholder label="Capa do livro · A Prova nos Macroprocessos" />
            </div>
            <div>
              <span className="eyebrow">2024 · Livro</span>
              <h3 className="display display-m" style={{ marginTop: 16 }}>
                A Prova nos<br />
                <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>Macroprocessos Penais</em>
              </h3>
              <hr className="rule gold" style={{ width: 80, margin: "28px 0" }} />
              <p style={{ color: "var(--ink-72)", fontSize: 17 }}>
                Ensaios reunidos sobre a instrução criminal em casos de alta complexidade — da
                gestão do volume probatório à fundamentação das decisões em processos com dezenas
                de réus e milhares de páginas.
              </p>
              <p style={{ color: "var(--ink-72)", fontSize: 15 }}>
                Editado pelo Instituto, com prefácio do Juiz Odilon e contribuições de
                magistrados, procuradores e advogados criminalistas atuantes em macroprocessos
                federais.
              </p>
              <a href="#" className="link-arrow" style={{ marginTop: 16, display: "inline-flex" }}>
                Solicitar exemplar institucional <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      <CtaInstitucional onNavigate={onNavigate} />
    </main>
  );
}

/* ═════════════════════════════════════════════════════════════
   SOBRE
   ═════════════════════════════════════════════════════════════ */
function SobrePage({ onNavigate }) {
  return (
    <main>
      <PageHead
        crumbs={["Instituto", "Sobre o Juiz"]}
        title="Trajetória,<br />estudo, <em>legado</em>."
        sub="A presença pública e a obra jurisdicional do Juiz Odilon de Oliveira — referência nacional no enfrentamento à criminalidade complexa."
      />

      {/* Bio editorial */}
      <section style={{ background: "var(--paper)" }}>
        <div className="container">
          <div className="editorial">
            <div>
              <div style={{ aspectRatio: "4/5" }}>
                <img src="assets/odilon.png" alt="Juiz Odilon" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.15) contrast(1.04)" }} />
              </div>
              <div className="micro" style={{ marginTop: 16 }}>Retrato institucional</div>
            </div>
            <div>
              <span className="eyebrow">§ Biografia</span>
              <h2 className="display display-l" style={{ marginTop: 20 }}>
                Juiz Odilon<br />
                <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>de Oliveira</em>
              </h2>
              <hr className="rule gold" style={{ width: 80, margin: "32px 0" }} />
              <p className="lede">
                Magistrado federal com trajetória dedicada ao enfrentamento ao crime organizado,
                contrabando, descaminho, lavagem de dinheiro e crimes financeiros.
              </p>
              <p style={{ color: "var(--ink-72)", fontSize: 17 }}>
                Sua atuação se desenvolveu no centro dos casos de maior complexidade jurídica do
                país — processos com dezenas de réus, perícias internacionais e volumes
                probatórios extensos, julgados no exercício real da jurisdição federal.
              </p>
              <p style={{ color: "var(--ink-72)", fontSize: 17 }}>
                Não se trata de um nome de marketing. É a autoridade construída sobre décadas de
                estudo e prática — magistrado, professor de pensamento jurídico aplicado e
                referência institucional em temas penais complexos.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section-dark">
        <div className="container">
          <div className="section-head">
            <div className="meta">
              <span className="eyebrow on-dark">§ Trajetória</span>
              <span className="micro" style={{ color: "var(--gold-soft)" }}>Marcos institucionais</span>
            </div>
            <div>
              <h2 className="display display-l" style={{ color: "var(--ivory)" }}>
                Marcos da <em className="serif-italic" style={{ color: "var(--gold)" }}>magistratura</em>
              </h2>
            </div>
          </div>

          <div style={{ borderTop: "1px solid var(--gold-line)" }}>
            {[
              ["1989", "Ingresso na Magistratura Federal", "Aprovação em concurso público para a Justiça Federal e início da carreira jurisdicional."],
              ["1995", "Vara Especializada em Crimes Financeiros", "Atuação em casos pioneiros de evasão de divisas e gestão fraudulenta no sistema financeiro nacional."],
              ["2003", "Casos de Crime Organizado Transnacional", "Condução de macroprocessos envolvendo organizações criminosas com operação em rotas de fronteira."],
              ["2012", "Implementação da Lei 12.850", "Decisões pioneiras na aplicação da nova lei de organizações criminosas — colaboração premiada e infiltração."],
              ["2020", "Fundação do Núcleo de Estudos", "Reunião de juristas e magistrados em torno do estudo aplicado da criminalidade complexa."],
              ["2026", "Instituto Jurídico Juiz Odilon", "Consolidação do programa de formação jurídica avançada como instituto autônomo."],
            ].map(([year, t, d], i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "140px 1fr 2fr",
                gap: 40,
                padding: "40px 0",
                borderBottom: "1px solid var(--gold-line)",
                alignItems: "start",
              }}>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, color: "var(--gold)" }}>
                  {year}
                </div>
                <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 22, color: "var(--ivory)", margin: 0, lineHeight: 1.2 }}>
                  {t}
                </h4>
                <p style={{ color: "rgba(244,238,221,0.7)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pull quote */}
      <section className="tight" style={{ background: "var(--paper-warm)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "center" }}>
            <Flourish width={100} color="var(--gold-dim)" />
            <p className="pull-quote" style={{ color: "var(--ink)", maxWidth: "28ch" }}>
              <span className="open" style={{ color: "var(--gold-dim)" }}>“</span>
              O direito penal econômico exige, antes de tudo, leitura institucional do caso. Sem isso, a técnica vira retórica.
            </p>
          </div>
          <div className="attrib" style={{ color: "var(--gold-dim)", marginLeft: "calc(33% + 40px)" }}>
            Juiz Odilon de Oliveira · Aula inaugural, 2024
          </div>
        </div>
      </section>

      <CtaInstitucional onNavigate={onNavigate} />
    </main>
  );
}

/* ═════════════════════════════════════════════════════════════
   CONTATO
   ═════════════════════════════════════════════════════════════ */
function ContatoPage() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ nome: "", email: "", oab: "", area: "Lavagem de dinheiro", msg: "" });

  return (
    <main>
      <PageHead
        crumbs={["Instituto", "Contato"]}
        title="Fale com o<br /><em>Instituto</em>"
        sub="Para informações sobre programas, parcerias institucionais, processo seletivo ou solicitação de publicações."
      />

      <section style={{ background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 100 }}>
            <div>
              <span className="eyebrow">Endereço institucional</span>
              <h3 className="display display-s" style={{ marginTop: 16 }}>Sede do Instituto</h3>
              <p style={{ color: "var(--ink-72)", marginTop: 16 }}>
                Rua Jamil Félix Nagles, 493<br />
                Campo Grande · MS
              </p>
              <hr className="rule" style={{ margin: "32px 0" }} />

              <span className="eyebrow">Secretaria</span>
              <p style={{ color: "var(--ink-72)", marginTop: 16, fontSize: 16 }}>
                secretaria@institutojuizodilon.com.br<br />
                +55 (67) 9647-7545
              </p>
              <hr className="rule" style={{ margin: "32px 0" }} />

              <span className="eyebrow">Processos seletivos</span>
              <p style={{ color: "var(--ink-72)", marginTop: 16, fontSize: 16 }}>
                selecao@institutojuizodilon.com.br
              </p>
              <hr className="rule" style={{ margin: "32px 0" }} />

              <span className="eyebrow">Imprensa</span>
              <p style={{ color: "var(--ink-72)", marginTop: 16, fontSize: 16 }}>
                imprensa@institutojuizodilon.com.br
              </p>
            </div>

            <div>
              {!submitted ? (
                <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
                  <span className="eyebrow">Formulário institucional</span>
                  <h3 className="display display-s" style={{ marginTop: 16, marginBottom: 40 }}>
                    Envie sua <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>mensagem</em>
                  </h3>

                  <div className="form-row">
                    <div className="field">
                      <label>Nome completo</label>
                      <input value={form.nome} onChange={(e) => setForm({ ...form, nome: e.target.value })} required />
                    </div>
                    <div className="field">
                      <label>E-mail institucional</label>
                      <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field">
                      <label>OAB (se aplicável)</label>
                      <input value={form.oab} onChange={(e) => setForm({ ...form, oab: e.target.value })} placeholder="UF/000000" />
                    </div>
                    <div className="field">
                      <label>Área de interesse</label>
                      <select value={form.area} onChange={(e) => setForm({ ...form, area: e.target.value })}>
                        <option>Lavagem de dinheiro</option>
                        <option>Contrabando e descaminho</option>
                        <option>Crime organizado</option>
                        <option>Casos complexos</option>
                        <option>Crimes financeiros</option>
                        <option>Parceria institucional</option>
                      </select>
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field field-full">
                      <label>Mensagem</label>
                      <textarea
                        value={form.msg}
                        onChange={(e) => setForm({ ...form, msg: e.target.value })}
                        placeholder="Descreva brevemente o motivo do contato."
                        rows={5}
                      />
                    </div>
                  </div>
                  <button type="submit" className="btn btn-filled" style={{ marginTop: 24 }}>
                    Enviar mensagem <span className="arrow">→</span>
                  </button>
                </form>
              ) : (
                <div style={{ padding: "80px 0" }}>
                  <Flourish width={80} color="var(--gold-dim)" />
                  <h3 className="display display-m" style={{ marginTop: 32, textAlign: "center" }}>
                    Mensagem <em className="serif-italic" style={{ color: "var(--gold-dim)" }}>recebida</em>
                  </h3>
                  <p style={{ textAlign: "center", color: "var(--ink-72)", marginTop: 16, maxWidth: "44ch", marginLeft: "auto", marginRight: "auto" }}>
                    A Secretaria do Instituto entrará em contato em até três dias úteis.
                    Agradecemos seu interesse.
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ═════════════════════════════════════════════════════════════
   CTA INSTITUCIONAL (rodapé reutilizável)
   ═════════════════════════════════════════════════════════════ */
function CtaInstitucional({ onNavigate }) {
  return (
    <section style={{ background: "var(--navy-900)", padding: "120px 0", position: "relative", overflow: "hidden" }}>
      <div className="section-monogram" style={{ right: "-10%", top: "10%", opacity: 0.05 }}>IJO</div>
      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <Flourish width={100} color="var(--gold)" />
        <h2 className="display display-l" style={{ color: "var(--ivory)", margin: "32px auto 20px", maxWidth: "22ch" }}>
          Explore a <em className="serif-italic" style={{ color: "var(--gold)" }}>formação jurídica</em> avançada.
        </h2>
        <p className="lede" style={{ color: "rgba(244,238,221,0.74)", margin: "0 auto 36px" }}>
          Inscrições abertas para a edição 2026.
        </p>
        <a href="#cursos" className="btn btn-gold"
           onClick={(e) => { e.preventDefault(); onNavigate("cursos"); }}>
          Conhecer programas <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, {
  HomePage, CursosPage, PublicacoesPage, SobrePage, ContatoPage,
  CourseCard, PubRow, CtaInstitucional, COURSES, PUBLICATIONS,
});