const { useState, useEffect, useRef, useCallback } = React;

function PasswordModal({ onSuccess, onClose }) {
  const [value, setValue] = useState("");
  const [error, setError] = useState(false);
  const [shake, setShake] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    setTimeout(() => inputRef.current && inputRef.current.focus(), 60);
  }, []);

  function handleSubmit(e) {
    e.preventDefault();
    if (value === "123bradesco") {
      onSuccess();
    } else {
      setError(true);
      setShake(true);
      setValue("");
      setTimeout(() => setShake(false), 500);
    }
  }

  function handleBackdrop(e) {
    if (e.target === e.currentTarget) onClose();
  }

  return (
    <div className="pwd-modal-backdrop" onClick={handleBackdrop}>
      <div className="pwd-modal__lock-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
        </div>
      <div className={`pwd-modal${shake ? " pwd-modal--shake" : ""}`}>
        <form onSubmit={handleSubmit} className="pwd-modal__form">
          <input
            ref={inputRef}
            type="password"
            className={`pwd-modal__input${error ? " pwd-modal__input--error" : ""}`}
            value={value}
            onChange={e => { setValue(e.target.value); setError(false); }}
            placeholder="Senha"
            autoComplete="off"
          />
          <button type="submit" className="pwd-modal__btn">→</button>
        </form>
      </div>
    </div>
  );
}
function t(node, lang) {
  if (node == null) return "";
  if (typeof node === "string") return node;
  if (typeof node === "object" && (node.en || node.pt)) return node[lang] || node.en || "";
  return String(node);
}

let _wordCounter = 0;
function resetWordCounter() { _wordCounter = 0; }

function wrapWords(text, prefix) {
  return text.split(/(\s+)/).map((part, i) => {
    if (/\s+/.test(part)) return part;
    const wi = _wordCounter++;
    return (
      <span
        key={`${prefix}-${i}`}
        className="hero__word"
        style={{ '--wi': wi }}
      >
        {part}
      </span>
    );
  });
}

function Wordmark({ size = 17 }) {
  return (
    <span className="topbar__brand" style={{ fontSize: size }}>
      Leandro<span className="period">.</span>
    </span>
  );
}

function LogoGlyph({ size = 48 }) {
  const sw  = size * 0.28;          // stroke weight (vertical + horizontal bar)
  const hx  = size * 0.60;          // horizontal bar total length (from x=0)
  const gap = size * 0.10;          // gap between L and period
  const pw  = sw;                   // period square width = stroke weight
  const w   = hx + gap + pw;        // total svg width
  return (
    <svg
      width={w} height={size}
      viewBox={`0 0 ${w} ${size}`}
      aria-label="Leandro."
      style={{ display: 'block', flexShrink: 0 }}
    >
      {/* Vertical bar */}
      <rect x={0} y={0} width={sw} height={size} fill="var(--fg)" />
      {/* Horizontal bar */}
      <rect x={0} y={size - sw} width={hx} height={sw} fill="var(--fg)" />
      {/* Period — signal green, animates on logo hover */}
      <rect className="logo__period" x={hx + gap} y={size - sw} width={pw} height={sw} fill="var(--signal)" />
    </svg>
  );
}

function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {}, ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setSeen(true);
          io.disconnect();
        }
      });
    }, { rootMargin: "-40px 0px -40px 0px", threshold: 0.05 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${seen ? "is-in" : ""} ${className}`}
      style={{ transitionDelay: `${delay}ms`, ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

function TopBar({ lang, setLang, onNavigate, route }) {
  const I = window.I18N;
  const [open, setOpen] = useState(false);
  const [activeId, setActiveId] = useState(route.kind === "home" ? "home" : null);
  const [highlight, setHighlight] = useState({ top: 0, height: 0, visible: false });
  const wrapRef = useRef(null);
  const dropRef = useRef(null);
  const closeTimer = useRef(null);
  const isHome = route.kind === "home";

  // Track active section by scroll position (intersection observer)
  useEffect(() => {
    if (!isHome) { setActiveId(null); return; }
    const ids = ["home", "works", "about", "contact"];
    const els = ids.map((id) => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      // Pick the entry closest to viewport top that's intersecting
      const visible = entries.filter((e) => e.isIntersecting);
      if (visible.length) {
        visible.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        setActiveId(visible[0].target.id);
      }
    }, { rootMargin: "-40% 0px -50% 0px", threshold: 0 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [isHome, route]);

  // Close on outside click
  useEffect(() => {
    if (!open) return;
    const onDown = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("touchstart", onDown);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("touchstart", onDown);
    };
  }, [open]);

  // Hover open/close
  const openMenu = () => {
    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
    setOpen(true);
  };
  const scheduleClose = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setOpen(false), 180);
  };

  const go = (id) => {
    setOpen(false);
    if (!isHome) {
      onNavigate({ kind: "home", anchor: id });
    } else {
      setTimeout(() => {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 40);
    }
  };

  const handleItemEnter = useCallback((e) => {
    if (!dropRef.current) return;
    const dropTop = dropRef.current.getBoundingClientRect().top;
    const { top, height } = e.currentTarget.getBoundingClientRect();
    setHighlight({ top: top - dropTop, height, visible: true });
  }, []);

  const handleDropLeave = useCallback(() => {
    setHighlight((h) => ({ ...h, visible: false }));
  }, []);

  const items = [
    { id: "home",    label: lang === "pt" ? "Home" : "Home",    num: "01" },
    { id: "works",   label: t(I.nav.works, lang),               num: "02" },
    { id: "about",   label: t(I.nav.about, lang),               num: "03" },
    { id: "contact", label: t(I.nav.contact, lang),             num: "04" },
  ];

  return (
    <header className="topbar">
      <div className="topbar__inner">
        <a
          href="#"
          onClick={(e) => { e.preventDefault(); onNavigate({ kind: "home", anchor: "home" }); }}
          aria-label="Ir para início"
          className="topbar__logo"
          style={{ display: 'flex', alignItems: 'center' }}
        >
          <LogoGlyph size={34} />
        </a>

        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <div
          ref={wrapRef}
          className={`menu-wrap${open ? " is-open" : ""}`}
          onMouseEnter={openMenu}
          onMouseLeave={scheduleClose}
        >
          <button
            className="menu-pill"
            onClick={() => setOpen((v) => !v)}
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
          >
            <span className="menu-pill__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24">
                <line x1="5" y1="9" x2="19" y2="9" />
                <line x1="5" y1="15" x2="19" y2="15" />
              </svg>
            </span>
            <span className="menu-pill__lbl">Menu</span>
          </button>

          <div
            ref={dropRef}
            className="menu-dropdown"
            role="menu"
            aria-hidden={!open}
            onMouseLeave={handleDropLeave}
          >
            {/* Sliding pill that moves to the hovered item */}
            <div
              className="menu-highlight"
              aria-hidden="true"
              style={{
                top: highlight.top,
                height: highlight.height,
                opacity: highlight.visible ? 1 : 0,
              }}
            />

            {items.map((it, idx) => (
              <button
                key={it.id}
                className={`menu-dropdown__item${activeId === it.id ? " is-active" : ""}`}
                onClick={() => go(it.id)}
                role="menuitem"
                onMouseEnter={handleItemEnter}
                style={{ transitionDelay: open ? `${idx * 50 + 40}ms` : "0ms" }}
              >
                {it.label}
              </button>
            ))}

          </div>
        </div>

        <button
          className="lang-toggle"
          onClick={() => setLang(lang === "en" ? "pt" : "en")}
          aria-label="Toggle language"
        >
          <b style={{ opacity: lang === "en" ? 1 : 0.4 }}>EN</b>
          <span className="lang-toggle__sep">/</span>
          <b style={{ opacity: lang === "pt" ? 1 : 0.4 }}>PT</b>
        </button>

        </div>
      </div>
    </header>
  );
}

function Hero({ lang, onScrollTo }) {
  const I = window.I18N.hero;
  const [time, setTime] = useState(() => formatSPTime(lang));

  useEffect(() => {
    setTime(formatSPTime(lang));
    const id = setInterval(() => setTime(formatSPTime(lang)), 60_000);
    return () => clearInterval(id);
  }, [lang]);

  return (
    <section id="home" className="s-home">
      <div className="col">
        <div className="hero__mid">
          <Reveal>
            <div className="hero__eyebrow">
              <span className="hero__dot" />
              <span className="mono">{t(I.eyebrow, lang)} · {time} · GMT−3</span>
            </div>
          </Reveal>
          <Reveal delay={60}>
            <h1 key={lang} className="hero__head">
              <span className="hero__emphasis">{(resetWordCounter(), wrapWords(t(I.head_a, lang), 'a'))}<span className="period">.</span></span><span className="hero__secondary">{wrapWords(t(I.head_b, lang), 'b')}</span>
            </h1>
          </Reveal>
        </div>

        <div className="hero__end">
          <button className="hero__scroll" onClick={() => onScrollTo("works")} aria-label="Scroll to works">
            <span className="hero__scroll__chevrons" aria-hidden="true">
              <span className="hero__scroll__chevron"><svg viewBox="0 0 22 14"><polyline points="2,2 11,12 20,2" /></svg></span>
              <span className="hero__scroll__chevron"><svg viewBox="0 0 22 14"><polyline points="2,2 11,12 20,2" /></svg></span>
            </span>
          </button>
        </div>
      </div>
    </section>
  );
}

function formatSPTime(lang) {
  try {
    if (lang === "en") {
      return new Intl.DateTimeFormat("en-US", {
        timeZone: "America/Sao_Paulo",
        hour: "numeric",
        minute: "2-digit",
        hour12: true,
      }).format(new Date()); // ex: "2:30 PM"
    }
    return new Intl.DateTimeFormat("pt-BR", {
      timeZone: "America/Sao_Paulo",
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
    }).format(new Date()); // ex: "14:30"
  } catch (e) {
    return "--:--";
  }
}

function ThumbDashboard() {
  return (
    <svg viewBox="0 0 480 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect width="480" height="600" fill="var(--bg-panel)" />

      {/* Top status bar */}
      <rect x="0" y="0" width="480" height="56" fill="var(--bg)" />
      <rect x="24" y="22" width="120" height="12" rx="3" fill="var(--fg)" opacity="0.7" />
      <circle cx="156" cy="28" r="3" fill="var(--signal)" />
      <rect x="380" y="18" width="76" height="20" rx="10" fill="var(--signal)" />

      {/* Sidebar */}
      <rect x="0" y="56" width="92" height="544" fill="var(--bg)" />
      {[100, 130, 160, 190, 220, 250].map((y, i) => (
        <g key={i}>
          <rect x="20" y={y} width="14" height="14" rx="3" fill={i === 1 ? "var(--signal)" : "var(--fg)"} opacity={i === 1 ? 1 : 0.4} />
          <rect x="40" y={y + 4} width={36 + (i % 3) * 8} height="6" rx="2" fill="var(--fg)" opacity={i === 1 ? 0.9 : 0.45} />
        </g>
      ))}

      {/* Stats row */}
      <g transform="translate(112, 80)">
        {[0, 1, 2].map(i => (
          <g key={i} transform={`translate(${i * 116}, 0)`}>
            <rect width="104" height="72" rx="10" fill="none" stroke="var(--fg)" strokeOpacity="0.18" />
            <rect x="14" y="14" width="30" height="4" rx="2" fill="var(--fg)" opacity="0.45" />
            <rect x="14" y="28" width={i === 0 ? 64 : 48} height="18" rx="3" fill="var(--fg)" opacity={i === 0 ? 1 : 0.78} />
            <rect x="14" y="54" width="32" height="4" rx="2" fill={i === 0 ? "var(--signal)" : "var(--fg)"} opacity={i === 0 ? 1 : 0.25} />
          </g>
        ))}
      </g>

      {/* Bar chart */}
      <g transform="translate(112, 176)">
        <rect width="344" height="208" rx="12" fill="none" stroke="var(--fg)" strokeOpacity="0.18" />
        <rect x="18" y="20" width="140" height="6" rx="2" fill="var(--fg)" opacity="0.7" />
        <rect x="18" y="34" width="84" height="4" rx="2" fill="var(--fg)" opacity="0.4" />
        {[0,1,2,3,4,5,6,7].map((i) => {
          const h = [54, 86, 70, 110, 82, 134, 100, 70][i];
          const c = i === 5 ? "var(--signal)" : "var(--fg)";
          const o = i === 5 ? 1 : 0.3 + (i % 3) * 0.1;
          return <rect key={i} x={36 + i * 38} y={180 - h} width="26" height={h} rx="4" fill={c} opacity={o} />;
        })}
        <line x1="24" y1="182" x2="320" y2="182" stroke="var(--fg)" strokeOpacity="0.16" />
      </g>

      {/* Bottom list */}
      <g transform="translate(112, 404)">
        <rect width="344" height="172" rx="12" fill="none" stroke="var(--fg)" strokeOpacity="0.18" />
        <rect x="18" y="20" width="120" height="6" rx="2" fill="var(--fg)" opacity="0.7" />
        {[0,1,2].map(i => (
          <g key={i} transform={`translate(18, ${44 + i * 42})`}>
            <rect width="308" height="32" rx="8" fill="none" stroke="var(--fg)" strokeOpacity="0.14" />
            <circle cx="20" cy="16" r="6" fill="var(--fg)" opacity={i === 0 ? 0.85 : 0.35} />
            <rect x="36" y="10" width={110 + i * 16} height="5" rx="2" fill="var(--fg)" opacity="0.65" />
            <rect x="36" y="20" width="60" height="4" rx="2" fill="var(--fg)" opacity="0.35" />
            <rect x="260" y="10" width={i === 0 ? 36 : 44} height="12" rx="6" fill={i === 0 ? "var(--signal)" : "none"} stroke="var(--fg)" strokeOpacity={i === 0 ? 0 : 0.3} />
          </g>
        ))}
      </g>
    </svg>
  );
}

function ThumbMobile() {
  return (
    <svg viewBox="0 0 480 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect width="480" height="600" fill="var(--bg-panel)" />

      {/* Background grid */}
      {[1,2,3,4,5,6,7].map((i) => (
        <line key={`v${i}`} x1={i * 60} y1="0" x2={i * 60} y2="600" stroke="var(--fg)" strokeOpacity="0.04" />
      ))}

      {/* Phone */}
      <g transform="translate(140, 60)">
        <rect width="200" height="480" rx="32" fill="var(--graphite)" stroke="var(--fg)" strokeOpacity="0.22" />
        {/* notch */}
        <rect x="78" y="14" width="44" height="6" rx="3" fill="var(--soot)" />

        {/* status bar */}
        <text x="22" y="40" fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg)" opacity="0.7" letterSpacing="1">9:41</text>
        <rect x="160" y="32" width="20" height="9" rx="2" fill="var(--fg)" opacity="0.5" />

        {/* header */}
        <rect x="20" y="60" width="60" height="6" rx="2" fill="var(--fg)" opacity="0.45" />
        <rect x="20" y="74" width="120" height="14" rx="3" fill="var(--fg)" opacity="0.95" />

        {/* Featured banner */}
        <rect x="20" y="104" width="160" height="80" rx="12" fill="var(--signal)" />
        <rect x="32" y="120" width="40" height="5" rx="2" fill="var(--graphite)" opacity="0.5" />
        <rect x="32" y="134" width="100" height="10" rx="3" fill="var(--graphite)" />
        <rect x="32" y="150" width="76" height="6" rx="2" fill="var(--graphite)" opacity="0.65" />
        <rect x="32" y="166" width="50" height="12" rx="6" fill="var(--graphite)" opacity="0.18" />

        {/* List rows */}
        {[0,1,2,3].map(i => (
          <g key={i} transform={`translate(20, ${200 + i * 56})`}>
            <rect width="160" height="48" rx="10" fill="none" stroke="var(--fg)" strokeOpacity="0.16" />
            <rect x="12" y="12" width="24" height="24" rx="6" fill="var(--fg)" opacity={i === 0 ? 0.6 : 0.28} />
            <rect x="46" y="14" width={70 + i * 10} height="5" rx="2" fill="var(--fg)" opacity="0.7" />
            <rect x="46" y="26" width="44" height="4" rx="2" fill="var(--fg)" opacity="0.4" />
            <circle cx="146" cy="24" r="3" fill={i === 0 ? "var(--signal)" : "var(--fg)"} opacity={i === 0 ? 1 : 0.3} />
          </g>
        ))}

        {/* bottom tab bar */}
        <rect x="20" y="436" width="160" height="32" rx="16" fill="var(--soot)" />
        {[0,1,2,3].map(i => (
          <circle key={i} cx={42 + i * 39} cy="452" r="4" fill={i === 0 ? "var(--signal)" : "var(--fg)"} opacity={i === 0 ? 1 : 0.4} />
        ))}
      </g>
    </svg>
  );
}

function ThumbTotem({ src }) {
  return (
    <div className="thumb-totem">
      {/* Fundo borrado */}
      <img src={src} className="thumb-totem__bgimg" alt="" aria-hidden="true" draggable="false" />
      {/* Imagem inclinada sangrada */}
      <img src={src} className="thumb-totem__tilt" alt="" aria-hidden="true" draggable="false" />
    </div>
  );
}

function ThumbVideo({ src }) {
  const videoRef = useRef(null);
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.playbackRate = 0.85;
    }
  }, []);
  return (
    <video
      ref={videoRef}
      className="thumb-video-file"
      src={src}
      autoPlay
      loop
      muted
      playsInline
      preload="auto"
    />
  );
}

function ThumbBYU() {
  return (
    <div className="thumb-byu">
      <img
        src="assets/2-works/BYU/work-app-elc-apply/byu-login.png"
        alt=""
        className="thumb-byu__cover"
        aria-hidden="true"
        draggable="false"
      />
    </div>
  );
}

function ThumbCampaign() {
  return (
    <svg viewBox="0 0 480 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect width="480" height="600" fill="var(--bg-panel)" />

      {/* Top bar */}
      <rect x="0" y="0" width="480" height="52" fill="var(--bg)" />
      <rect x="24" y="20" width="100" height="12" rx="3" fill="var(--fg)" opacity="0.75" />
      <rect x="380" y="16" width="76" height="20" rx="10" fill="none" stroke="var(--fg)" strokeOpacity="0.3" />

      {/* Three columns (kanban) */}
      {[0, 1, 2].map((col) => (
        <g key={col} transform={`translate(${24 + col * 148}, 76)`}>
          {/* column header */}
          <rect width="136" height="28" rx="8" fill={col === 0 ? "var(--signal)" : "var(--graphite)"} opacity={col === 0 ? 1 : 1} />
          <rect x="12" y="11" width={60 + col * 6} height="6" rx="2" fill={col === 0 ? "var(--graphite)" : "var(--fg)"} opacity={col === 0 ? 0.7 : 0.6} />
          <rect x="106" y="9" width="18" height="10" rx="5" fill={col === 0 ? "var(--graphite)" : "var(--fg)"} opacity={col === 0 ? 0.3 : 0.25} />

          {/* cards */}
          {[0, 1, 2, 3].map((row) => {
            const visible = [4, 3, 3][col];
            if (row >= visible) return null;
            const h = [86, 102, 74, 96][(row + col) % 4];
            return (
              <g key={row} transform={`translate(0, ${36 + row * 102})`}>
                <rect width="136" height={h} rx="10" fill="var(--graphite)" stroke="var(--fg)" strokeOpacity={col === 0 && row === 0 ? 0.4 : 0.14} />
                <rect x="12" y="12" width={50 + (row * 8)} height="4" rx="2" fill="var(--fg)" opacity="0.35" />
                <rect x="12" y="22" width={92 + (row % 2) * 16} height="6" rx="2" fill="var(--fg)" opacity="0.85" />
                <rect x="12" y="34" width={68 + (row % 3) * 12} height="5" rx="2" fill="var(--fg)" opacity="0.55" />
                <rect x="12" y={h - 22} width="48" height="12" rx="6" fill={col === 0 && row === 0 ? "var(--signal)" : "none"} stroke="var(--fg)" strokeOpacity={col === 0 && row === 0 ? 0 : 0.22} />
                <circle cx="112" cy={h - 16} r="4" fill="var(--fg)" opacity="0.3" />
                <circle cx="122" cy={h - 16} r="4" fill="var(--fg)" opacity="0.5" />
              </g>
            );
          })}
        </g>
      ))}
    </svg>
  );
}

function ThumbBradescoVideo() {
  return (
    <div className="thumb-video">
      <img
        src="assets/2-works/Bradesco/marca/VERTICAL/DIGITAL/Bradesco_V_White_RGB.png"
        alt=""
        className="thumb-video__logo"
        aria-hidden="true"
        draggable="false"
      />
    </div>
  );
}

function Works({ lang, onOpenCase }) {
  const I = window.I18N.works;
  const [lockedCard, setLockedCard] = useState(null);

  const cards = [
    {
      live: true,
      onClick: () => onOpenCase("regulatory-app"),
      overlayTitle: t(I.p2.title, lang).replace(/\.$/, ""),
      overlayTag: t(I.p2.tag1, lang),
      desc: t(I.p2.desc, lang),
      thumb: <ThumbTotem src="assets/2-works/Bradesco/work-tiu-diu/tiu-menu.jpg" />,
      ctaLabel: t(I.cta, lang),
    },
    {
      live: true,
      onClick: () => onOpenCase("campaign-management"),
      overlayTitle: t(I.p3.title, lang).replace(/\.$/, ""),
      overlayTag: t(I.p3.tag1, lang),
      desc: t(I.p3.desc, lang),
      thumb: <ThumbBYU />,
      ctaLabel: t(I.cta, lang),
    },
    {
      live: true,
      locked: true,
      onClick: () => onOpenCase("marketing-materials"),
      overlayTitle: t(I.p1.title, lang).replace(/\.$/, ""),
      overlayTag: t(I.p1.tag1, lang),
      desc: t(I.p1.desc, lang),
      thumb: <ThumbBradescoVideo />,
      metric: { n: "96%", l: t(I.p1.m1l, lang) },
      ctaLabel: t(I.cta, lang),
    },
  ];

  return (
    <section id="works" className="s-works">
      <div className="col">
        <Reveal>
          <div className="eyebrow">
            <span>↳ {t(I.eyebrow, lang)}</span>
            <span className="count eyebrow--signal">{t(I.range, lang)}</span>
          </div>
        </Reveal>

        <div className="works-grid">
          {cards.map((c, i) => (
            <Reveal as="div" key={i} delay={i * 80}>
              <button
                type="button"
                className={`work-card ${c.live ? "work-card--live" : "work-card--soon"}${c.locked ? " work-card--locked" : ""}`}
                onClick={c.locked ? () => setLockedCard(c) : c.onClick}
                disabled={!c.live}
                aria-label={c.overlayTitle}
              >
                <div className="work-card__img">
                  <div className="work-card__img-inner">{c.thumb}</div>
                  {c.locked && (
                    <div className="work-card__lock">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                      </svg>
                    </div>
                  )}
                </div>
                <div className="work-card__body">
                  <span className="work-card__overlay-tag">{c.overlayTag}</span>
                  <p className="work-card__overlay-title">{c.overlayTitle}</p>
                  <p className="work-card__desc">{c.desc}</p>
                </div>
              </button>
            </Reveal>
          ))}
        </div>

        {lockedCard && (
          <PasswordModal
            onSuccess={() => { setLockedCard(null); lockedCard.onClick(); }}
            onClose={() => setLockedCard(null)}
          />
        )}
      </div>
    </section>
  );
}

function AvatarSigil() {
  return (
    <svg viewBox="0 0 120 120" aria-hidden="true">
      <rect width="120" height="120" fill="var(--bg-panel)" />
      {/* Subtle 3x3 grid */}
      {[1, 2].map((i) => (
        <line key={`v${i}`} x1={(120 / 3) * i} y1="0" x2={(120 / 3) * i} y2="120" stroke="var(--hairline)" strokeWidth="1" />
      ))}
      {[1, 2].map((i) => (
        <line key={`h${i}`} x1="0" y1={(120 / 3) * i} x2="120" y2={(120 / 3) * i} stroke="var(--hairline)" strokeWidth="1" />
      ))}
      {/* L. monogram */}
      <text
        x="60" y="78"
        textAnchor="middle"
        fontFamily="var(--font-sans)"
        fontWeight="900"
        fontSize="56"
        letterSpacing="-3"
        fill="var(--fg)"
      >
        L<tspan fill="var(--signal)">.</tspan>
      </text>
    </svg>
  );
}

function About({ lang }) {
  const I = window.I18N.about;
  return (
    <section id="about" className="s-about">
      <div className="col">
        <Reveal>
          <div className="eyebrow">
            <span>↳ {t(I.eyebrow, lang)}</span>
            <span className="count eyebrow--signal">{t(I.eyebrowMeta, lang)}</span>
          </div>
        </Reveal>

        <div className="about__layout">

          {/* Esquerda — foto retrato */}
          <div className="about__photo-col">
            <div className="about__avatar">
              <img src="assets/3-about/leandro2.JPG" alt="Leandro Gomes" className="about__photo" />
            </div>
          </div>

          {/* Direita — conteúdo empilhado */}
          <div className="about__content">

            <Reveal delay={40}>
              <p className="about__headline">{t(I.headline, lang)}</p>
            </Reveal>

            <Reveal delay={80}>
              <p className="about__bio">
                {t(I.bio_a, lang)}<strong>{t(I.bio_em1, lang)}</strong>{t(I.bio_b, lang)}<strong>{t(I.bio_em2, lang)}</strong>{t(I.bio_c, lang)}<strong>{t(I.bio_em3, lang)}</strong>{t(I.bio_d, lang)}
              </p>
            </Reveal>

            <Reveal delay={120}>
              <div className="about__block">
                <div className="about__block-lbl">{t(I.lblExperience, lang)}</div>
                <div className="exp-list">
                  {I.exp.map((row, i) => (
                    <div className="exp-row" key={i}>
                      <div className="exp-row__time">{t(row.time, lang)}</div>
                      <div className="exp-row__body">
                        <span className="exp-row__role">{t(row.role, lang)}</span>
                        <span style={{ color: "var(--fg-quiet)" }}> · </span>
                        <span className="exp-row__where">{t(row.where, lang)}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>

            <Reveal delay={160}>
              <div className="about__block">
                <div className="about__block-lbl">{t(I.lblSkills, lang)}</div>
                <div className="pill-list">
                  {I.skills.map((s, i) => (
                    <span className="pill" key={i}>{t(s, lang)}</span>
                  ))}
                </div>
              </div>
            </Reveal>

            <div className="about__divider" />

            <Reveal delay={200}>
              <div className="about__block">
                <div className="about__block-lbl">{t(I.lblEducation, lang)}</div>
                <div className="exp-list exp-list--no-top">
                  {I.edu.map((row, i) => (
                    <div className="exp-row" key={i}>
                      <div className="exp-row__time">{t(row.time, lang)}</div>
                      <div className="exp-row__body">
                        <span className="exp-row__role">{t(row.role, lang)}</span>
                        <span style={{ color: "var(--fg-quiet)" }}> · </span>
                        <span className="exp-row__where">{t(row.where, lang)}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>

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

function Contact({ lang }) {
  const I = window.I18N.contact;
  return (
    <section id="contact" className="s-contact" data-surface="paper">
      <div className="col">
        <Reveal>
          <div className="eyebrow">
            <span>↳ {t(I.eyebrow, lang)}</span>
          </div>
        </Reveal>

        <Reveal delay={40}>
          <h2 className="contact__impact">
            {t(I.impact, lang).replace(/\.$/, '')}<span className="period">.</span>
          </h2>
        </Reveal>

        <Reveal delay={100}>
          <div className="contact__social">
            {/* LinkedIn */}
            <a className="contact__social-link" href="https://linkedin.com/in/leandro-gomess" target="_blank" rel="noreferrer" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="4" />
                <line x1="7" y1="17" x2="7" y2="11" />
                <circle cx="7" cy="8" r="0.5" fill="currentColor" stroke="none" />
                <path d="M11 17v-4a2 2 0 0 1 4 0v4" />
                <line x1="11" y1="11" x2="11" y2="17" />
              </svg>
            </a>

            {/* Gmail */}
            <a className="contact__social-link" href="mailto:leco.gomess@gmail.com" aria-label="Email">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="5" width="20" height="14" rx="2" />
                <path d="M2 7l10 7 10-7" />
              </svg>
            </a>

          </div>
        </Reveal>

      </div>
    </section>
  );
}

function PageFooter({ lang }) {
  const I = window.I18N.footer;
  return (
    <footer className="footer" data-surface="paper">
      <div className="col footer__inner">
        <div className="footer__copy-stack">
          <span className="footer__copy">{t(I.copy, lang)}</span>
          <span className="footer__copy footer__copy--quiet">{t(I.rights, lang)}</span>
        </div>
        <span className="footer__copy" style={{ color: "var(--fg-quiet)" }}>{t(I.built, lang)}</span>
        <div className="footer__links">
          <a href="#" aria-disabled="true" style={{ opacity: 0.4, pointerEvents: "none" }}>{t(I.resumeLbl, lang)}</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  TopBar, Hero, Works, About, Contact, PageFooter, Reveal, Wordmark, t,
  ThumbDashboard, ThumbMobile, ThumbCampaign,
  LogoGlyph
});