feat: disable English language with construction modal popup

src/app/globals.css

@@ -36,6 +36,82 @@ h3 { font-size: 1.25rem; line-height: 1.3; }
 p  { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
 .muted { color: var(--color-muted); }
 
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 200;
+}
+.modal-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 201;
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: auto;
+}
+.modal-content {
+  background: #fff;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  text-align: center;
+}
+.modal-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: var(--foreground);
+}
+.modal-description {
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  color: var(--foreground);
+}
+.modal-info {
+  font-size: 0.875rem;
+  color: var(--color-muted);
+  margin-bottom: 1.5rem;
+}
+.modal-button {
+  display: inline-block;
+  background: var(--color-green);
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border-radius: 999px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.modal-button:hover,
+.modal-button:focus-visible {
+  opacity: 0.92;
+  transform: translateY(-2px);
+}
+
+/* Language switcher button */
+.lang-switcher-btn {
+  background: transparent;
+  border: none;
+  font-weight: 700;
+  color: #fff;
+  padding: 0.375rem 0.625rem;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.lang-switcher-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.lang-switcher-btn.current {
+  background: rgba(255, 255, 255, 0.2);
+}
+
 /* Markdown content */
 .markdown-content {
   display: block;

src/components/layout/ConstructionModal.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useEffect, useState } from "react";
+
+type ConstructionModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export function ConstructionModal({ isOpen, onClose }: ConstructionModalProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!mounted || !isOpen) return null;
+
+  return (
+    <>
+      <div className="modal-overlay" onClick={onClose} aria-hidden="true" />
+      <div
+        className="modal-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-description"
+      >
+        <div className="modal-content">
+          <h2 id="modal-title" className="modal-title">🚧 Em Construção</h2>
+          <p id="modal-description" className="modal-description">
+            A versão em inglês (English) está atualmente em construção e será disponibilizada em breve.
+          </p>
+          <p className="modal-info">
+            Por enquanto, o conteúdo completo está disponível em português.
+          </p>
+          <button
+            type="button"
+            onClick={onClose}
+            className="modal-button"
+            aria-label="Fechar diálogo"
+          >
+            Entendido
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/layout/Navigation.tsx

@@ -2,10 +2,12 @@
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
+import { ConstructionModal } from "./ConstructionModal";
 
 export function Navigation() {
   const [expanded, setExpanded] = useState(false);
   const [expandedSubs, setExpandedSubs] = useState<string[]>([]);
+  const [showConstructionModal, setShowConstructionModal] = useState(false);
   const pathname = usePathname();
   const locale = pathname.startsWith("/en") ? "en" : "pt";
   const base = `/${locale}`;
@@ -70,6 +72,7 @@ export function Navigation() {
   );
 
   return (
+    <>
       <nav aria-label="Principal" className="nav">
       <button
         className="nav-toggle"
@@ -89,7 +92,7 @@ export function Navigation() {
                   <span className={isActive(s.path) ? "active nav-label" : "nav-label"}>{s.label}</span>
                   <button
                     className="nav-submenu-toggle"
-                    aria-expanded={expandedSubs.includes(s.key)}
+                    aria-expanded={expandedSubs.includes(s.key) ? "true" : "false"}
                     onClick={(e) => {
                       e.preventDefault();
                       toggleSubmenu(s.key);
@@ -117,10 +120,17 @@ export function Navigation() {
         ))}
         <li className="lang-switcher" role="group" aria-label={locale === "en" ? "Language" : "Idioma"}>
           <Link className={locale === "pt" ? "current" : ""} href="/pt" aria-label="Português">PT</Link>
-          <Link className={locale === "en" ? "current" : ""} href="/en" aria-label="English">EN</Link>
+          <button
+            className={`lang-switcher-btn ${locale === "en" ? "current" : ""}`}
+            onClick={() => setShowConstructionModal(true)}
+            aria-label="English (em construção)"
+          >
+            EN
+          </button>
         </li>
       </ul>
-
       </nav>
+      <ConstructionModal isOpen={showConstructionModal} onClose={() => setShowConstructionModal(false)} />
+    </>
   );
 }