/* ============================================================
   Gorila · Portfolio Connect — Case Study
   Main React application
   Author: Lou Praxedes
   ============================================================ */

const { useState, useEffect, useRef } = React;

/* ------------------------------------------------------------
   Tweakable defaults
   ------------------------------------------------------------ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#6d28d9"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#6d28d9", // deep violet — accessible on white (AAA-LG)
  "#1e4ed8", // gorila blue
  "#15803d", // gorila green
  "#1a1a1c"  // monochrome charcoal
];

/* ------------------------------------------------------------
   Sections registry — drives nav + scroll-spy
   ------------------------------------------------------------ */
const SECTIONS = [
  { id: "contexto",    label: "Contexto" },
  { id: "problema",    label: "Problema" },
  { id: "fluxos",      label: "4 Fluxos" },
  { id: "galeria",     label: "Galeria" },
  { id: "resultados",  label: "Resultados" }
];

const FOUR_FLOWS = [
  {
    id: "recebe",
    num: "01",
    name: <>ORG Pessoal <em>recebe</em> solicitação</>,
    desc: "O fluxo principal. Uma pessoa física é convidada por outro investidor ou por uma empresa de assessoria a compartilhar uma carteira. Inclui criação de conta, autenticação, modal de aceitação com filtro por permissão de owner e confirmação visual da conexão ativa.",
    tags: ["Convite por e-mail", "Owner-only", "Edge cases ricos"],
    featured: true
  },
  {
    id: "envia",
    num: "02",
    name: <>ORG Pessoal ou Empresarial <em>envia</em> solicitação</>,
    desc: "Tanto uma organização pessoal quanto empresarial inicia o convite. Envio manual ou em lote (spreadsheet), respeitando os mesmos limites e permissões. O remetente acompanha cada convite pelo status (pendente, aceito, recusado).",
    tags: ["Manual ou bulk", "Status tracking", "Histórico centralizado"]
  },
  {
    id: "enviadas",
    num: "03",
    name: <>Gerencia <em>conexões enviadas</em> de um portfólio</>,
    desc: "Painel para quem distribui carteiras a muitos clientes — assessor, escritório, gestor familiar. Visualiza convites enviados, reenvia, desfaz conexões existentes, altera permissões em tempo real. Cada ação tem feedback visual imediato.",
    tags: ["Multi-cliente", "Reenvio", "Permissões ao vivo"]
  },
  {
    id: "recebidas",
    num: "04",
    name: <>Gerencia <em>conexões recebidas</em> de cada portfólio</>,
    desc: "Visão centralizada de tudo que foi compartilhado com você. Lista portfólios conectados, status, data, papel (owner/editor) e indicadores de atividade. Separação clara entre ativos, pendentes e removidos — controle absoluto sem ambiguidade.",
    tags: ["Visão consolidada", "Owner/Editor", "Estados granulares"]
  }
];

/* ============================================================
   Top Nav with scroll-spy
   ============================================================ */
function TopNav({ active }) {
  return (
    <nav className="topnav">
      <div className="topnav-inner">
        <a href="../../index.html" aria-label="Lou Praxedes" style={{ display: "inline-flex", alignItems: "center" }}>
          <img src="assets/logo-mark.png" alt="Lou Praxedes" style={{ height: "38px", width: "auto", mixBlendMode: "multiply" }} />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: "34px" }}>
          <a href="../../index.html" style={{ fontFamily: "var(--font-body)", fontSize: "16px", fontWeight: 500, color: "var(--text)", textDecoration: "none", letterSpacing: "-0.01em" }}>Início</a>
          <a href="../../sobre.html" style={{ fontFamily: "var(--font-body)", fontSize: "16px", fontWeight: 500, color: "var(--text)", textDecoration: "none", letterSpacing: "-0.01em" }}>Sobre</a>
          <div style={{ display: "inline-flex", alignItems: "center", background: "var(--bg-soft)", border: "1px solid var(--border)", borderRadius: "999px", padding: "3px" }}>
            <span style={{ fontFamily: "var(--font-body)", fontSize: "13px", fontWeight: 600, letterSpacing: "0.02em", padding: "6px 14px", borderRadius: "999px", background: "var(--text)", color: "var(--bg)" }}>PT</span>
            <span style={{ fontFamily: "var(--font-body)", fontSize: "13px", fontWeight: 600, letterSpacing: "0.02em", padding: "6px 14px", borderRadius: "999px", background: "transparent", color: "var(--text-dim)" }}>EN</span>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* ============================================================
   Hero
   ============================================================ */
function Hero() {
  return (
    <header id="top" className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="hero-meta">
              <span className="pill">GorilaVIEW · FinTech B2B+B2C</span>
              <span className="pill">UX Designer</span>
            </div>
            <h1 className="hero-title">
              Compartilhar carteiras.<br />
              <em>Cruzar mundos.</em>
            </h1>
            <p className="hero-sub">
              Como projetei o <em>Portfolio Connect</em> — um sistema do GorilaVIEW que liga investidores pessoais a escritórios de assessoria, em <em>quatro fluxos</em> que cobrem cada esquina da experiência.
            </p>
            <div className="hero-stats">
              <div className="hero-stat">
                <div className="k">Produto</div>
                <div className="v">GorilaVIEW</div>
              </div>
              <div className="hero-stat">
                <div className="k">Papel</div>
                <div className="v">UX Designer</div>
              </div>
              <div className="hero-stat">
                <div className="k">Entrega</div>
                <div className="v"><em>4</em> fluxos · 27 cenários</div>
              </div>
              <div className="hero-stat">
                <div className="k">Status</div>
                <div className="v">Em produção</div>
              </div>
            </div>
          </div>
          <div className="hero-cover">
            <img
              src="assets/cover.png"
              alt="Composição do projeto Portfolio Connect — wireframes empilhados sobre ilustração de montanha do GorilaVIEW"
            />
          </div>
        </div>
      </div>
    </header>
  );
}

/* ============================================================
   Contexto — about GorilaVIEW + Portfolio Connect
   ============================================================ */
function Contexto() {
  return (
    <section id="contexto" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">01</span>
          <span className="dot"></span>
          <span>Sobre o produto</span>
        </div>
        <h2 className="section-title">
          GorilaVIEW é a plataforma de <em>gestão de patrimônio</em> que une investidor e assessor.
        </h2>
        <p className="section-lede">SaaS B2B+B2C: investidores pessoais acompanham suas carteiras e escritórios gerem centenas de clientes — duas experiências num produto.</p>

        <div className="compare-grid" style={{margin: "32px 0 0"}}>
          <div className="card-soft">
            <div className="kicker">O que o produto faz</div>
            <h3 style={{fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "14px 0 16px", letterSpacing: "-0.01em"}}>
              Consolidação de carteiras multi-corretora
            </h3>
            <p className="muted">Conecta corretoras, custodia documentos, calcula rentabilidade, gera relatórios e organiza grupos econômicos. Para o investidor pessoal: visão única da própria vida financeira. Para o escritório: visão única dos clientes que ele atende.</p>
          </div>
          <div className="card-soft">
            <div className="kicker">Meu papel</div>
            <h3 style={{fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "14px 0 16px", letterSpacing: "-0.01em"}}>
              UX Designer · <em style={{fontStyle: "italic", color: "var(--accent)"}}>do problema ao handoff</em>
            </h3>
            <p className="muted">Conduzi a descoberta com PO, CPO, time de CX e assessores. Desenhei a arquitetura dos quatro fluxos, mapeei casos de borda, validei em sprints com stakeholders e organizei toda a documentação para a transição ao time de UI.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Navegação — Web & Mobile (recreação fiel do produto real)
   ============================================================ */
function Navegacao() {
  const Ic = ({ d, size = 17 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{d.map((p, i) => <path key={i} d={p} />)}</svg>
  );
  const NAV = [
    { ic: ["M3 11l9-8 9 8", "M5 10v10h6v-6h2v6h6V10"], label: "Visão Geral", active: true },
    { ic: ["M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8", "M2 21v-1.5A4.5 4.5 0 0 1 6.5 15H11", "M18 8.5v5", "M20.5 11h-5"], label: "Convidar", chevron: true },
    { ic: ["M4 4h16v16H4z", "M12 9v6", "M9 12h6"], label: "Criar portfólio" },
    { ic: ["M12 3l9 5-9 5-9-5 9-5z", "M3 13l9 5 9-5"], label: "Grupos Econômicos" },
    { ic: ["M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z", "M12 12l8-4.5", "M12 12v9", "M12 12L4 7.5"], label: "Ativos Personalizados" },
    { ic: ["M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1", "M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"], label: "Integração BTG" }
  ];
  const RECENTS = [["AR", "Alexandre Ribeiro"], ["DS", "Douglas Souza"], ["LC", "Luana Chan"], ["RV", "Ricardo Verginelli"], ["MC", "Marly Cláudio"], ["JM", "Joana Miyamoto"], ["FP", "Frederico Padilha"]];
  const PV = "R$ 12.507.173,68";
  const ROWS = [
    ["Alexandre Ribeiro", "+3,78%", "+6,53%", "-3,97%", "+5,35%"],
    ["Alex Gonçalves", "+1,70%", "-8,12%", "+6,29%", "-7,87%"],
    ["Ana Oliveira", "+4,74%", "+3,25%", "-9,92%", "+2,73%"],
    ["Beatriz Souza", "-2,16%", "+1,75%", "-9,88%", "+4,92%"],
    ["Carlos Silva", "+7,05%", "-6,79%", "+8,56%", "-6,27%"],
    ["Daniela Almeida", "+0,83%", "+4,36%", "-2,34%", "+10,12%"],
    ["Douglas Souza", "+3,71%", "-4,94%", "+7,73%", "-8,43%"],
    ["Eduardo Pereira", "+5,74%", "+2,61%", "-4,61%", "+3,28%"]
  ];
  const Pct = ({ v }) => {
    const up = !v.startsWith("-");
    return <span style={{ color: up ? "#1f9d57" : "#e0524d", fontWeight: 500, whiteSpace: "nowrap" }}>{v} {up ? "↑" : "↓"}</span>;
  };
  const Logo = ({ light }) => (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em", color: light ? "#fff" : "#1a1a1c" }}>
      <span style={{ width: 22, height: 22, borderRadius: 6, background: "#1f9d57", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff" }}><Ic d={["M5 13l4 4L19 7"]} size={13} /></span>
      Gorila<span style={{ fontWeight: 400 }}>VIEW</span>
    </span>
  );
  const th = { fontSize: 12.5, fontWeight: 600, color: "#6b7177", textAlign: "right", padding: "0 0 0 8px", whiteSpace: "nowrap" };
  const td = { fontSize: 13, color: "#2a2f34", textAlign: "right", padding: "14px 0 14px 8px", borderBottom: "1px solid #eef0f2", whiteSpace: "nowrap" };
  const sideBtn = (a) => ({ display: "flex", alignItems: "center", gap: 11, padding: "10px 12px", borderRadius: 8, fontSize: 14, color: a ? "#1a1a1c" : "#4a4f54", background: a ? "#eef0f2" : "transparent", fontWeight: a ? 600 : 400, cursor: "default" });
  const flowNode = { background: "#eef1fb", border: "1px solid #d4ddf6", borderRadius: 12, padding: "16px 22px", fontSize: 15, fontWeight: 600, color: "#1e3a8a", textAlign: "center" };
  const stepCard = { flex: 1, minWidth: 200, background: "#fff", border: "1px solid var(--border)", borderRadius: 14, padding: "22px 24px" };
  const conn = { width: 2, height: 30, background: "#cbd5ef", margin: "0 auto" };

  return (
    <section id="navegacao" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">02</span>
          <span className="dot"></span>
          <span>Navegação · Web e Mobile</span>
        </div>
        <h2 className="section-title">
          Uma navegação que escala do <em>investidor pessoal</em> ao escritório com <em>centenas de clientes</em>.
        </h2>
        <p className="section-lede">A Visão Geral é a espinha dorsal: o assessor vê todos os portfólios. Sidebar persistente no desktop; workspace switcher no mobile.</p>

        {/* ---------- WEB ---------- */}
        <div className="kicker" style={{ margin: "44px 0 14px" }}>Desktop · Visão Geral</div>
        <div style={{ overflowX: "auto", borderRadius: 16, border: "1px solid var(--border)", boxShadow: "0 36px 70px -34px rgba(20,20,30,.32)" }}>
          <div style={{ minWidth: 1220, background: "#e9eaec", fontFamily: "var(--font-body)" }}>
            {/* top bar */}
            <div style={{ height: 54, background: "#3b4147", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 22px" }}>
              <Logo light />
              <div style={{ display: "flex", alignItems: "center", gap: 18, color: "#c8ccd0", fontSize: 13.5 }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span style={{ color: "#c8ccd0" }}><Ic d={["M17 17A9.5 9.5 0 0 1 12 19c-5.5 0-9-7-9-7a17 17 0 0 1 4-4.8", "M9.9 5.2A9.5 9.5 0 0 1 12 5c5.5 0 9 7 9 7a17 17 0 0 1-2.3 3.2", "M1 1l22 22"]} size={15} /></span> Esconder dados</span>
                <span style={{ width: 1, height: 22, background: "#565c61" }}></span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 9, color: "#fff" }}>Bruno Müller <span style={{ width: 30, height: 30, borderRadius: "50%", background: "#6b7177", display: "inline-block" }}></span></span>
              </div>
            </div>
            {/* body */}
            <div style={{ display: "flex", alignItems: "stretch" }}>
              {/* sidebar */}
              <aside style={{ width: 236, flex: "0 0 236px", background: "#fff", borderRight: "1px solid #e6e7ea", padding: "16px 14px" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 10px 14px", borderBottom: "1px solid #eef0f2", color: "#3a3f44", fontWeight: 600, fontSize: 14 }}><Ic d={["M3 5h18v14H3z", "M3 6l9 7 9-7"]} size={16} /> Guia Invest <span style={{ marginLeft: "auto", color: "#9aa0a6" }}><Ic d={["M6 9l6 6 6-6"]} size={15} /></span></div>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "#9aa0a6", padding: "16px 10px 8px" }}>Gestão</div>
                {NAV.map((n, i) => (
                  <div key={i} style={sideBtn(n.active)}><span style={{ color: n.active ? "#1a1a1c" : "#7a7f84" }}><Ic d={n.ic} /></span>{n.label}{n.chevron && <span style={{ marginLeft: "auto", color: "#b0b5ba" }}><Ic d={["M6 9l6 6 6-6"]} size={14} /></span>}</div>
                ))}
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "#9aa0a6", padding: "20px 10px 8px" }}>Recentes</div>
                {RECENTS.map(([ini, nm], i) => (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "8px 10px" }}><span style={{ width: 30, height: 30, borderRadius: "50%", background: "#d3d6da", color: "#5a5f64", fontSize: 11, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center" }}>{ini}</span><span style={{ fontSize: 13.5, color: "#4a4f54" }}>{nm}</span></div>
                ))}
              </aside>
              {/* main */}
              <div style={{ flex: 1, padding: "26px 28px", display: "grid", gridTemplateColumns: "1fr 300px", gap: 24, alignItems: "start" }}>
                <div>
                  <h3 style={{ margin: "0 0 20px", fontSize: 22, fontWeight: 600, color: "#1a1a1c" }}>Visão Geral</h3>
                  <div style={{ background: "#fff", border: "1px solid #e3e5e8", borderRadius: 12, padding: "22px 24px" }}>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
                      <span style={{ fontSize: 17, fontWeight: 600, color: "#1a1a1c" }}>Portfolios</span>
                    </div>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginBottom: 18 }}>
                      <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 10, border: "1px solid #dcdfe3", borderRadius: 8, padding: "10px 14px", color: "#9aa0a6", maxWidth: 360 }}><Ic d={["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "M21 21l-4-4"]} size={16} /><span style={{ fontSize: 14 }}>Pesquisar clientes</span></div>
                      <div style={{ display: "flex", alignItems: "center", gap: 12, color: "#9aa0a6", fontSize: 13 }}>0-0 de 0 <span style={{ display: "flex", gap: 8 }}><Ic d={["M11 7l-5 5 5 5", "M18 7l-5 5 5 5"]} size={15} /><Ic d={["M15 7l-5 5 5 5"]} size={15} /><Ic d={["M9 7l5 5-5 5"]} size={15} /><Ic d={["M6 7l5 5-5 5", "M13 7l5 5-5 5"]} size={15} /></span></div>
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr .8fr .8fr .8fr .8fr", alignItems: "center", paddingBottom: 12, borderBottom: "1px solid #e6e8eb" }}>
                      <span style={{ ...th, textAlign: "left", padding: 0 }}>Nome ▾</span><span style={th}>Patrimônio</span><span style={th}>Mês atual</span><span style={th}>Ano Atual</span><span style={th}>12 Meses</span><span style={th}>Início</span>
                    </div>
                    {ROWS.map((r, i) => (
                      <div key={i} style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr .8fr .8fr .8fr .8fr", alignItems: "center" }}>
                        <span style={{ ...td, textAlign: "left", padding: "14px 0", display: "flex", alignItems: "center", gap: 8 }}>{r[0]} <span style={{ color: "#b0b5ba" }}><Ic d={["M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8"]} size={13} /></span></span>
                        <span style={td}>{PV}</span>
                        <span style={td}><Pct v={r[1]} /></span><span style={td}><Pct v={r[2]} /></span><span style={td}><Pct v={r[3]} /></span><span style={td}><Pct v={r[4]} /></span>
                      </div>
                    ))}
                  </div>
                </div>
                {/* right rail */}
                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                  <div style={{ background: "#fff", border: "1px solid #e3e5e8", borderRadius: 12, padding: "20px 22px" }}>
                    <p style={{ margin: "0 0 16px", fontSize: 16, fontWeight: 600, color: "#1a1a1c" }}>Resumo</p>
                    <div style={{ display: "flex", gap: 28 }}>
                      <div><p style={{ margin: "0 0 4px", fontSize: 12, color: "#9aa0a6" }}>Portfólios</p><p style={{ margin: 0, fontSize: 26, fontWeight: 700, color: "#1a1a1c" }}>50</p><p style={{ margin: "6px 0 0", fontSize: 12, color: "#9aa0a6" }}>● 40 conectados</p></div>
                      <div><p style={{ margin: "0 0 4px", fontSize: 12, color: "#9aa0a6" }}>Pendentes</p><p style={{ margin: 0, fontSize: 26, fontWeight: 700, color: "#1a1a1c" }}>5</p></div>
                    </div>
                  </div>
                  <div style={{ background: "#fff", border: "1px solid #e3e5e8", borderRadius: 12, padding: "20px 22px" }}>
                    <p style={{ margin: "0 0 12px", fontSize: 16, fontWeight: 600, color: "#1a1a1c" }}>Patrimônio sob gestão</p>
                    <p style={{ margin: 0, fontSize: 25, fontWeight: 700, letterSpacing: "-0.01em", color: "#1a1a1c" }}>R$ 200.114.778,95</p>
                  </div>
                  <div style={{ background: "#fff", border: "1px solid #e3e5e8", borderRadius: 12, padding: "20px 22px" }}>
                    <p style={{ margin: "0 0 12px", fontSize: 16, fontWeight: 600, color: "#1a1a1c" }}>Atualizações</p>
                    <p style={{ margin: "0 0 8px", fontSize: 12, color: "#9aa0a6" }}>26 de março de 2024</p>
                    <p style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#1a1a1c", lineHeight: 1.3 }}>Organize todos os portfólios em grupos econômicos</p>
                    <p style={{ margin: "0 0 12px", fontSize: 13.5, color: "#6b7177", lineHeight: 1.5 }}>Novidade no GorilaPro, agora será possível organizar portfólios em grupos econômicos e acompanhar a evolução.</p>
                    <span style={{ fontSize: 13.5, color: "#2f6df6", fontWeight: 500 }}>Ler mais ↗</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* modules annotation */}
        <div className="compare-grid" style={{ margin: "26px 0 0" }}>
          <div className="card-soft"><div className="kicker">Sidebar de gestão</div><p className="muted" style={{ margin: "10px 0 0" }}>Seis módulos persistentes — Visão Geral, Convidar, Criar portfólio, Grupos Econômicos, Ativos Personalizados e Integração BTG — sempre acessíveis, sem perder o contexto do escritório atual.</p></div>
          <div className="card-soft"><div className="kicker">Esconder dados &amp; troca de ORG</div><p className="muted" style={{ margin: "10px 0 0" }}>Um toggle de privacidade mascara valores na frente do cliente, e o switcher de workspace permite alternar entre escritórios (ORG) e a conta pessoal sem sair da tela.</p></div>
        </div>

        {/* ---------- MOBILE ---------- */}
        <div className="kicker" style={{ margin: "48px 0 14px" }}>Mobile · Visão Geral</div>
        <div style={{ display: "flex", gap: 40, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ width: 300, flex: "0 0 300px", borderRadius: 34, border: "10px solid #1a1a1c", overflow: "hidden", boxShadow: "0 36px 60px -28px rgba(20,20,30,.4)", background: "#fff" }}>
            <div style={{ height: 30, background: "#23262b", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px", color: "#fff", fontSize: 12 }}><span>9:30</span><span style={{ display: "flex", gap: 5, alignItems: "center" }}><Ic d={["M2 17a14 14 0 0 1 20 0"]} size={11} /><Ic d={["M4 18h4v-4H4z", "M9 18h4v-8H9z", "M14 18h4v-12h-4z"]} size={11} /><span style={{ width: 16, height: 9, border: "1px solid #fff", borderRadius: 2, display: "inline-block", background: "linear-gradient(90deg,#fff 70%,transparent 70%)" }}></span></span></div>
            <div style={{ height: 46, background: "#4a4f54", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px", color: "#fff" }}><span style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600 }}><Ic d={["M3 5h18v14H3z", "M3 6l9 7 9-7"]} size={15} /> Name Workspace <Ic d={["M6 9l6 6 6-6"]} size={13} /></span><span style={{ width: 26, height: 26, borderRadius: "50%", background: "#c9cdd2", color: "#5a5f64", fontSize: 11, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center" }}>G</span></div>
            <div style={{ padding: "16px 16px 0" }}>
              <p style={{ margin: "0 0 14px", fontSize: 17, fontWeight: 600, color: "#1a1a1c" }}>Visão Geral</p>
              <div style={{ display: "flex", alignItems: "center", gap: 9, border: "1px solid #dcdfe3", borderRadius: 8, padding: "9px 12px", color: "#9aa0a6", marginBottom: 6 }}><Ic d={["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "M21 21l-4-4"]} size={15} /><span style={{ fontSize: 13 }}>Pesquisar clientes</span></div>
              <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 2px 10px", borderBottom: "1px solid #e6e8eb", fontSize: 12.5, fontWeight: 600, color: "#6b7177" }}><span>Nome ▾</span><span>Patrimônio</span></div>
            </div>
            <div style={{ maxHeight: 360, overflow: "hidden" }}>
              {ROWS.concat(RECENTS.map(r => [r[1]])).slice(0, 12).map((r, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "14px 16px", borderBottom: "1px solid #eef0f2", fontSize: 13.5 }}><span style={{ color: "#2a2f34" }}>{r[0]}</span><span style={{ color: "#6b7177" }}>R$ ••••••</span></div>
              ))}
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 260 }}>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "0 0 14px", letterSpacing: "-0.01em" }}>A mesma hierarquia, <em style={{ fontStyle: "italic", color: "var(--accent)" }}>repensada para o polegar</em></h3>
            <p className="muted" style={{ margin: 0 }}>No mobile, a sidebar vira um <strong>workspace switcher</strong> no topo e a tabela densa colapsa para duas colunas essenciais — nome e patrimônio. O toggle de privacidade vira o padrão (<em>R$ ••••••</em>), reconhecendo que o assessor abre o app em qualquer lugar.</p>
          </div>
        </div>

        {/* ---------- FLUXO ---------- */}
        <div className="kicker" style={{ margin: "52px 0 18px" }}>Arquitetura de acesso · Fluxo GorilaVIEW</div>
        <div style={{ background: "var(--bg-soft)", border: "1px solid var(--border)", borderRadius: 18, padding: "40px 32px" }}>
          <div style={{ maxWidth: 280, margin: "0 auto" }}><div style={{ ...flowNode, background: "var(--accent-soft)", borderColor: "var(--accent-line)", color: "var(--accent)" }}>Fluxo GorilaVIEW</div></div>
          <div style={conn}></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <div>
              <div style={flowNode}>ORG Paga</div>
              <div style={conn}></div>
              <div style={stepCard}><p style={{ margin: 0, fontSize: 16, fontWeight: 600, color: "var(--text)" }}>Acesso completo</p><p className="muted" style={{ margin: "8px 0 0", fontSize: 14 }}>Visão Geral, gestão de portfólios, grupos econômicos e integrações liberados.</p></div>
            </div>
            <div>
              <div style={flowNode}>ORG Free</div>
              <div style={conn}></div>
              <div style={{ ...flowNode, background: "#fff", border: "1px solid var(--border)", color: "var(--text)" }}>Paywall</div>
              <div style={conn}></div>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                {[["Passo 1", "Apresentação do plano"], ["Passo 2", "Seleção e dados"], ["Passo 3", "Confirmação do upgrade"]].map(([s, t], i) => (
                  <div key={i} style={{ ...stepCard, minWidth: 130, padding: "16px 18px" }}><p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--accent)", letterSpacing: ".04em" }}>{s}</p><p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--text)", lineHeight: 1.35 }}>{t}</p></div>
                ))}
              </div>
            </div>
          </div>
          <p className="muted" style={{ margin: "26px 0 0", fontSize: 13.5, textAlign: "center" }}>Modal do Paywall em 3 passos — recortado do fluxograma do Figma. As ações premium da ORG Free conduzem o usuário ao upgrade sem interromper a navegação.</p>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Problema
   ============================================================ */
function Problema() {
  return (
    <section id="problema" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">02</span>
          <span className="dot"></span>
          <span>O problema</span>
        </div>
        <h2 className="section-title">
          Duas pessoas, uma carteira — e <em>nenhum jeito</em> de compartilhar.
        </h2>
        <p className="section-lede">Cada cliente operava numa ilha. Sem caminho oficial para compartilhar uma carteira, sobravam print, planilha ou senha compartilhada.</p>

        <div className="compare-grid">
          <div className="compare-card">
            <div className="label before">— Antes</div>
            <h3>Carteira presa <em>dentro</em> de uma única conta</h3>
            <p className="muted">Não existia um caminho oficial para que duas pessoas (ou uma pessoa e uma empresa) acessassem a mesma carteira com permissões claras. Cada relacionamento exigia um workaround.</p>
            <div className="compare-list">
              <div className="row"><span className="bullet">▸</span><span className="item-text">Compartilhar senha do GorilaVIEW</span></div>
              <div className="row"><span className="bullet">▸</span><span className="item-text">Exportar PDF e mandar por e-mail</span></div>
              <div className="row"><span className="bullet">▸</span><span className="item-text">Tirar print da tela</span></div>
              <div className="row"><span className="bullet">▸</span><span className="item-text">Recriar a carteira em outra conta</span></div>
              <div className="row" style={{paddingTop: 8, marginTop: 8, borderTop: "1px solid var(--border-soft)", color: "var(--gorila-red)"}}>
                <span>↳ atrito, risco de segurança e custo recorrente de suporte</span>
              </div>
            </div>
          </div>
          <div className="compare-card">
            <div className="label after">— Depois</div>
            <h3>Conexão <em>nativa</em>, com regras claras</h3>
            <p className="muted">O Portfolio Connect transforma o compartilhamento em uma operação de primeira classe. O dono da carteira convida, o convidado aceita, ambos veem a mesma fonte de dados com papéis e permissões explícitos.</p>
            <div className="compare-list after-style">
              <div className="row"><span className="bullet">●</span><span className="item-text">Convite por e-mail, com link</span></div>
              <div className="row"><span className="bullet">●</span><span className="item-text">Aceite no app com seleção de portfólio</span></div>
              <div className="row"><span className="bullet">●</span><span className="item-text">Papel owner/editor explícito</span></div>
              <div className="row"><span className="bullet">●</span><span className="item-text">Gerenciamento centralizado, ambos os lados</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Objetivos
   ============================================================ */
function Objetivos() {
  const items = [
    { k: "UX", title: "Tornar o compartilhamento uma ação de primeira classe", desc: "Substituir o ‘compartilhar senha’ por um convite explícito, com aceite, permissão clara e revogação a qualquer momento." },
    { k: "Produto", title: "Cobrir B2C e B2B com o mesmo mecanismo", desc: "Mesmo fluxo de convite serve para pessoa→pessoa (família, amigos) e para empresa→pessoa (escritório de assessoria atendendo um cliente)." },
    { k: "Plataforma", title: "Antecipar casos de borda já no MVP", desc: "Limite de portfólios gratuitos, convites simultâneos de orgs distintas, portfólio já conectado, recusa explícita — tudo desenhado de saída, sem deixar para o suporte resolver." },
    { k: "Negócio", title: "Reduzir custo de suporte e abrir gancho de upgrade", desc: "Eliminar tickets de ‘compartilhar carteira’ e introduzir paywall amigável no limite gratuito como porta natural para o plano PRO." }
  ];
  return (
    <section id="objetivos" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">03</span>
          <span className="dot"></span>
          <span>Objetivos</span>
        </div>
        <h2 className="section-title">
          Quatro objetivos que <em>guiaram</em> cada decisão.
        </h2>
        <p className="section-lede">UX, produto, plataforma e negócio — alinhados desde a descoberta.</p>
        <div className="results-grid">
          {items.map((it, i) => (
            <div className="result-card" key={i}>
              <div className="icon">{String(i+1).padStart(2,"0")}</div>
              <div className="kicker" style={{marginBottom: 12}}>{it.k}</div>
              <h4>{it.title}</h4>
              <p style={{marginTop: 12}}>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Descoberta & Insights
   ============================================================ */
function Descoberta() {
  return (
    <section id="descoberta" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">04</span>
          <span className="dot"></span>
          <span>Descoberta & Insights</span>
        </div>
        <h2 className="section-title">
          O caminho começou em <em>conversas</em>, não no Figma.
        </h2>
        <p className="section-lede">Entrevistas com PO, CPO, CX e assessores, mais dados de uso e tickets. O problema foi mapeado por persona, frequência e impacto.</p>
        <div className="compare-grid" style={{marginTop: 32}}>
          <div className="card">
            <div className="kicker">Insight 01 · Personas</div>
            <h3 style={{fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "14px 0 16px", letterSpacing: "-0.01em"}}>
              O mesmo fluxo atende <em style={{fontStyle: "italic", color: "var(--accent)"}}>três tipos</em> de relacionamento.
            </h3>
            <p className="muted">Pessoa→pessoa (família, amigos), empresa→pessoa (escritório atendendo um cliente) e pessoa→empresa (cliente autorizando o escritório). Embora as motivações sejam diferentes, o gesto é o mesmo: enviar um convite, aguardar aceite, ver a carteira.</p>
          </div>
          <div className="card">
            <div className="kicker">Insight 02 · Limites</div>
            <h3 style={{fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "14px 0 16px", letterSpacing: "-0.01em"}}>
              <em style={{fontStyle: "italic", color: "var(--accent)"}}>Três portfólios</em> é o ponto natural de paywall.
            </h3>
            <p className="muted">Dados de uso mostraram que usuários no plano Free raramente passam de 2 portfólios em condições normais. O limite de 3 (incluindo convites pendentes) cobre o caso comum e cria gancho honesto para o upgrade no caso de escala.</p>
          </div>
          <div className="card">
            <div className="kicker">Insight 03 · Permissões</div>
            <h3 style={{fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "14px 0 16px", letterSpacing: "-0.01em"}}>
              Só quem é <em style={{fontStyle: "italic", color: "var(--accent)"}}>owner</em> pode compartilhar.
            </h3>
            <p className="muted">Apenas o criador do portfólio pode autorizar uma conexão — quem foi convidado como editor não repassa acesso. Essa regra de propagação evita cadeias de compartilhamento difíceis de auditar.</p>
          </div>
          <div className="card">
            <div className="kicker">Insight 04 · Conflitos</div>
            <h3 style={{fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "14px 0 16px", letterSpacing: "-0.01em"}}>
              Um portfólio <em style={{fontStyle: "italic", color: "var(--accent)"}}>nunca</em> pertence a duas empresas ao mesmo tempo.
            </h3>
            <p className="muted">Para evitar conflitos de quem manda no que, um portfólio só pode estar ativo em uma organização empresarial por vez. Tentativas de duplo vínculo aparecem bloqueadas com tooltip explicativo, antes do erro acontecer.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Os 4 Fluxos — central grid (the big idea)
   ============================================================ */
function Fluxos() {
  return (
    <section id="fluxos" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">03</span>
          <span className="dot"></span>
          <span>A arquitetura · 4 Fluxos</span>
        </div>
        <h2 className="section-title">
          Quatro fluxos. <em>Duas pontas.</em>
        </h2>
        <p className="section-lede">Cada conexão tem duas pontas — envia e recebe — e dois momentos — criar e gerenciar. Quatro fluxos cobrem a matriz.</p>

        <div className="flows-hub">
          <div className="core">
            <div className="core-inner">
              <span className="num">4</span>
              fluxos
            </div>
          </div>
          <div className="core-meta">
            <p>Cada fluxo é um <em>par (ator × momento)</em> que combina quem opera com o que aquela operação precisa fazer.</p>
            <p className="sub">Web e mobile — mesma lógica, layouts adaptados à densidade de cada superfície.</p>
          </div>
        </div>

        <div className="flows-grid">
          {FOUR_FLOWS.map((f) => (
            <div key={f.id} className={"flow-card " + (f.featured ? "featured" : "")}>
              <div className="f-num">FLUXO · {f.num}</div>
              <div className="f-name">{f.name}</div>
              <div className="f-desc">{f.desc}</div>
              <div className="f-tags">
                {f.tags.map(t => <span key={t} className="f-tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Fluxo Principal — deep dive Flow 1
   ============================================================ */
function FluxoPrincipal() {
  const steps = [
    { num: "01", title: "Convite chega por e-mail", desc: "O destinatário recebe um link único. Pode ser um endereço já cadastrado no Gorila ou totalmente novo.", fork: null },
    { num: "02", title: "Autenticar ou criar conta", desc: "Se já é usuário, autentica direto. Se não, cria conta com o e-mail do convite — sem fricção.", fork: null },
    { num: "03", title: "Modal de aceitação", desc: "Após login, o app abre um modal mostrando apenas os portfólios em que o usuário é owner — os únicos elegíveis para conectar.", fork: null },
    { num: "04", title: "Seleciona e confirma", desc: "O usuário escolhe um ou mais portfólios e marca o checkbox de autorização. Clica em compartilhar.", fork: { ok: "Confirma", no: "Recusa" } },
    { num: "05", title: "Visualização compartilhada ativa", desc: "Um ícone específico aparece na lista de portfólios do convidante, indicando que aquele item agora tem acesso de terceiros.", fork: null }
  ];
  return (
    <section id="principal" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">06</span>
          <span className="dot"></span>
          <span>Deep dive · Fluxo Principal</span>
        </div>
        <h2 className="section-title">
          O caminho <em>feliz</em> em cinco passos.
        </h2>
        <p className="section-lede">O Fluxo 1 define o produto: alguém é convidado a compartilhar uma carteira. Envio, gestão e bordas orbitam esse núcleo.</p>

        <div className="flow-steps">
          <div className="kicker">Caminho feliz · Fluxo 1</div>
          <div className="flow-steps-grid">
            {steps.map(s => (
              <div key={s.num} className="flow-step">
                <div className="step-num">PASSO {s.num}</div>
                <div className="step-title">{s.title}</div>
                <p className="step-desc">{s.desc}</p>
                {s.fork && (
                  <div className="step-fork">
                    <div className="fork-row"><span className="ok">●</span><span>Confirma → conexão ativa</span></div>
                    <div className="fork-row"><span className="no">●</span><span>Recusa → toast de retorno</span></div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        <div className="fullbleed-image" style={{marginTop: 72}}>
          <img src="assets/flow-main.png" alt="Fluxo principal do Portfolio Connect — diagrama completo do recebimento da solicitação até a conexão ativa" />
          <div className="kicker" style={{marginTop: 20, textAlign: "center", color: "var(--text-dim)"}}>
            Fonte · fluxograma no Figma</div>
        </div>

        <div className="bridge-notes">
          <div className="bridge-note">
            <div className="note-label stays">— Decisões de UX</div>
            <h4>Atrito mínimo no caminho feliz</h4>
            <ul>
              <li>O link do e-mail abre direto na tela de aceite — sem dashboard, sem onboarding.</li>
              <li>Só portfólios elegíveis (owner) aparecem no modal — evita o erro de tentar conectar algo que não pode.</li>
              <li>Checkbox de autorização explícito antes do botão de compartilhar — consentimento ativo, não passivo.</li>
              <li>Confirmação visual com ícone na lista de portfólios — o usuário sabe imediatamente que a conexão foi feita.</li>
            </ul>
          </div>
          <div className="bridge-note changes">
            <div className="note-label changes">— Decisões de produto</div>
            <h4>Permissões e limites desde o MVP</h4>
            <ul>
              <li>Só owner compartilha — editor recebe acesso mas não propaga.</li>
              <li>Limite de 3 portfólios no plano Free (incluindo pendentes) — paywall antes do limite trava o fluxo.</li>
              <li>Um portfólio só pode estar em uma organização empresarial por vez.</li>
              <li>Recusa também avisa o convidante — não fica silenciosa.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Casos de Borda
   ============================================================ */
function CasosBorda() {
  return (
    <section id="borda" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">07</span>
          <span className="dot"></span>
          <span>Casos de Borda</span>
        </div>
        <h2 className="section-title">
          O que aconteceria <em>se</em>?
        </h2>
        <p className="section-lede">Três cenários críticos desenhados antes da UI — resolver no wireframe custa menos que no ticket de suporte.</p>

        <div className="edge-grid">
          <div className="edge-card">
            <span className="e-tag paywall">⚠ paywall · upgrade</span>
            <h4>Atingiu o limite de 3 portfólios</h4>
            <p>Inclui portfólios criados + convites pendentes + portfólios já conectados. Não tem como conectar o quarto.</p>
            <div className="e-solution">Paywall amigável explicando o limite, listando benefícios do plano PRO e oferecendo upgrade — sem bloquear o resto do produto.</div>
          </div>
          <div className="edge-card">
            <span className="e-tag simul">↯ convites · simultâneos</span>
            <h4>Múltiplas organizações pedindo ao mesmo tempo</h4>
            <p>O usuário recebe convite do Guia Invest e da Vita no mesmo dia, com o mesmo portfólio em jogo.</p>
            <div className="e-solution">Alerta visual no topo da Visão Geral lista todos os convites pendentes. O usuário decide um a um, com contexto de cada solicitante.</div>
          </div>
          <div className="edge-card">
            <span className="e-tag conflict">⊘ conflito · bloqueio</span>
            <h4>Portfólio já conectado a outra empresa</h4>
            <p>A regra é clara: um portfólio só vive em uma organização empresarial por vez.</p>
            <div className="e-solution">A opção aparece desabilitada no modal de seleção, com tooltip explicando a restrição. O erro é evitado antes de acontecer — sem alerta corretivo.</div>
          </div>
        </div>

        <div className="fullbleed-image" style={{marginTop: 72}}>
          <img src="assets/flow-edge-cases.png" alt="Fluxos de casos de borda — paywall, convites simultâneos e conflito de organização" />
          <div className="kicker" style={{marginTop: 20, textAlign: "center", color: "var(--text-dim)"}}>
            Fonte · fluxograma no Figma</div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Galeria — wireframes dos 4 fluxos + telas-chave
   ============================================================ */
const FLOW_GALLERY = [
  {
    num: "01",
    title: "ORG Pessoal recebe solicitação",
    italic: "caminho feliz + borda",
    desc: "Wireframes do Fluxo 1 — do convite ao aceite, incluindo o modal de seleção de portfólio, o paywall do limite de 3 e o estado de recusa. Web e mobile mapeados lado a lado.",
    src: "assets/flow1-pessoal-recebe.png",
    tags: ["Web + Mobile", "Caminho feliz", "Edge cases"]
  },
  {
    num: "02",
    title: "ORG Pessoal ou Empresarial envia solicitação",
    italic: "manual ou em lote",
    desc: "Telas do Fluxo 2 — duas portas de entrada: convite manual (digite o e-mail) ou em lote via spreadsheet. O remetente acompanha o status de cada solicitação enviada.",
    src: "assets/flow2-faz-solicitacao.png",
    tags: ["Manual + bulk", "Status tracking", "Confirmação"]
  },
  {
    num: "03",
    title: "Gerencia conexões enviadas",
    italic: "painel multi-cliente",
    desc: "Wireframes do Fluxo 3 — visão de quem distribui carteiras. Lista de conexões, ações de reenvio e desconexão, gestão de permissões por linha.",
    src: "assets/flow3-gerencia-enviadas.png",
    tags: ["Painel B2B", "Reenvio", "Permissões"]
  },
  {
    num: "04",
    title: "Gerencia conexões recebidas",
    italic: "visão consolidada",
    desc: "Telas do Fluxo 4 — tudo o que foi compartilhado com você. Estados ativos, pendentes e removidos separados claramente. Owner/editor visíveis em cada linha.",
    src: "assets/flow4-gerencia-recebidas.png",
    tags: ["Visão consolidada", "Estados granulares", "Owner/Editor"]
  }
];

const KEY_SCREENS = [
  {
    num: "A",
    title: "Visão Geral · convites pendentes",
    italic: "ponto de chegada",
    desc: "Tela inicial do app com o banner de convites de conexão no topo. É o primeiro toque do usuário com o sistema — o lugar onde ele encontra e decide cada solicitação.",
    src: "assets/screen-preferencias.png",
    tags: ["Convites pendentes", "Banner contextual", "Aceitar/Recusar"]
  },
  {
    num: "B",
    title: "Modal de aceitação · seleção de portfólio",
    italic: "decisão consciente",
    desc: "O modal mostra apenas portfólios em que o usuário é owner. Checkbox de autorização explícito antes de poder compartilhar. Dois CTAs claros: criar portfólio ou cancelar.",
    src: "assets/screen-conect-2x.png",
    tags: ["Owner-only", "Autorização ativa", "Sem ambiguidade"]
  },
  {
    num: "C",
    title: "Convite manual · ORG Empresarial",
    italic: "ponta enviadora",
    desc: "Tela de envio manual: digite o e-mail do convidado, escolha o portfólio e envie. Painel direito mostra resumo da operação. Layout pensado para escala — escritórios convidam muitos clientes.",
    src: "assets/screen-invite.png",
    tags: ["Envio manual", "Visão de escala", "B2B"]
  }
];

function Galeria() {
  return (
    <section id="galeria" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">04</span>
          <span className="dot"></span>
          <span>Galeria · wireframes e telas-chave</span>
        </div>
        <h2 className="section-title">
          Quatro fluxos. <em>Web e mobile</em>, lado a lado.
        </h2>
        <p className="section-lede">Cada fluxo desenhado em web e mobile, da mesma lógica. Clique para abrir em alta resolução.</p>

        <div className="screens-grid">
          {FLOW_GALLERY.map((s, i) => (
            <div key={s.num} className={"screen-row " + (i % 2 === 1 ? "reverse" : "")}>
              <div className="screen-visual">
                <div className="fullbleed-image" style={{margin: 0}}>
                  <img src={s.src} alt={s.title + " — wireframes web e mobile"} />
                </div>
              </div>
              <div className="screen-text">
                <div className="num">Fluxo {s.num}</div>
                <h3>
                  {s.title} <br />
                  <em>· {s.italic}</em>
                </h3>
                <p>{s.desc}</p>
                <div className="tag-list">
                  {s.tags.map(t => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="kicker" style={{marginTop: 80, marginBottom: 24}}>Telas em detalhe · momentos-chave do fluxo</div>

        <div className="screens-grid">
          {KEY_SCREENS.map((s, i) => (
            <div key={s.num} className={"screen-row " + (i % 2 === 0 ? "reverse" : "")}>
              <div className="screen-visual">
                <div className="screen-frame">
                  <img src={s.src} alt={s.title} />
                  <div className="frame-caption">
                    <span>gorilaview · wireframe</span>
                    <span className="state">
                      <span className="dot"></span>
                      {s.num}
                    </span>
                  </div>
                </div>
              </div>
              <div className="screen-text">
                <div className="num">Tela {s.num}</div>
                <h3>
                  {s.title} <br />
                  <em>· {s.italic}</em>
                </h3>
                <p>{s.desc}</p>
                <div className="tag-list">
                  {s.tags.map(t => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Sistema · DS tokens herdados
   ============================================================ */
function Sistema() {
  return (
    <section id="sistema" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">09</span>
          <span className="dot"></span>
          <span>Sistema · linguagem do produto</span>
        </div>
        <h2 className="section-title">
          O wireframe já <em>fala</em> a linguagem do produto.
        </h2>
        <p className="section-lede">Já na fase de UX, os artefatos seguem a paleta, os pesos e a microcopy do GorilaVIEW. No handoff, só sobra o pixel.</p>

        <div className="kicker" style={{marginTop: 56, marginBottom: 16}}>Paleta operacional</div>
        <div className="ds-grid">
          <div className="ds-token">
            <div className="swatch" style={{background: "var(--gorila-black)"}}></div>
            <div className="name">brand / black</div>
            <div className="hex">#1A1A1C · texto + header</div>
          </div>
          <div className="ds-token">
            <div className="swatch" style={{background: "var(--gorila-blue)"}}></div>
            <div className="name">accent / blue</div>
            <div className="hex">#1E4ED8 · CTA + flag</div>
          </div>
          <div className="ds-token">
            <div className="swatch" style={{background: "var(--gorila-green)"}}></div>
            <div className="name">state / aceito</div>
            <div className="hex">#15803D · sucesso</div>
          </div>
          <div className="ds-token">
            <div className="swatch" style={{background: "var(--gorila-amber)"}}></div>
            <div className="name">state / pendente</div>
            <div className="hex">#B45309 · paywall</div>
          </div>
          <div className="ds-token">
            <div className="swatch" style={{background: "var(--gorila-red)"}}></div>
            <div className="name">state / recusado</div>
            <div className="hex">#B91C1C · bloqueio</div>
          </div>
          <div className="ds-token">
            <div className="swatch" style={{background: "var(--gorila-grey-300)"}}></div>
            <div className="name">neutral / chrome</div>
            <div className="hex">#D9D4C8 · borda + base</div>
          </div>
        </div>

        <div className="kicker" style={{marginTop: 64, marginBottom: 16}}>Tipografia da microcopy</div>
        <div className="ds-type-grid">
          <div className="ds-type">
            <div className="sample" style={{fontSize: 28, fontWeight: 500, letterSpacing: "-0.01em"}}>Visão Geral</div>
            <div className="meta">Page · 28 / 500 / -1% tracking</div>
          </div>
          <div className="ds-type">
            <div className="sample" style={{fontSize: 18, fontWeight: 500}}>Convites de conexão</div>
            <div className="meta">Section · 18 / 500</div>
          </div>
          <div className="ds-type">
            <div className="sample" style={{fontSize: 14, color: "var(--text-muted)"}}>Aceite ou recuse solicitações…</div>
            <div className="meta">Body · 14 / 400</div>
          </div>
          <div className="ds-type">
            <div className="sample" style={{fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)"}}>17/08/2024 · pendente</div>
            <div className="meta">Mono caps · 11 / 500 / +8%</div>
          </div>
        </div>

        <div className="bridge-notes" style={{marginTop: 64}}>
          <div className="bridge-note">
            <div className="note-label stays">— Microcopy</div>
            <h4>Verbos curtos, papéis explícitos</h4>
            <ul>
              <li>“Aceitar / Recusar” no banner do convite — duas decisões, sem terceira via.</li>
              <li>“Apenas portfólios criados por você podem ser compartilhados” — explica a regra na hora da escolha, não em FAQ.</li>
              <li>“Estou ciente e autorizo…” — consentimento ativo, exigido antes do botão habilitar.</li>
              <li>“Convite recusado” como toast neutro — informa sem dramatizar.</li>
            </ul>
          </div>
          <div className="bridge-note changes">
            <div className="note-label changes">— Padrões reaproveitados</div>
            <h4>Componentes que já viviam no DS</h4>
            <ul>
              <li>Banner contextual no topo da página — reaproveitado de notificações de sistema.</li>
              <li>Modal com checkbox de autorização — padrão dos fluxos de termos de uso.</li>
              <li>Toast de confirmação — mesmo posicionamento e timing do resto do app.</li>
              <li>Ícone de "compartilhado" na lista — segue o vocabulário visual de status já em uso.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Resultados — validation + qualitative
   ============================================================ */
function Resultados() {
  return (
    <section id="resultados" className="section scroll-mark">
      <div className="container">
        <div className="section-meta">
          <span className="num">05</span>
          <span className="dot"></span>
          <span>Validação & Resultados</span>
        </div>
        <h2 className="section-title">
          Validado em <em>sprint</em>. Lançado em <em>produção</em>.
        </h2>
        <p className="section-lede">Todos os fluxos validados com PO, CPO e stakeholders antes do handoff. Entrega pronta para crescer com o produto.</p>

        <div className="results-grid">
          <div className="result-card">
            <div className="icon">15+</div>
            <h4>Cenários <em>web</em></h4>
            <p>Mais de quinze cenários testados em sprints com PO e CPO — incluindo todos os edge cases, estados de erro e variações de permissão.</p>
          </div>
          <div className="result-card">
            <div className="icon">12+</div>
            <h4>Cenários <em>mobile</em></h4>
            <p>Mais de doze cenários cobrindo as mesmas operações em viewport pequeno — adaptações de modal, drawer e densidade de informação.</p>
          </div>
          <div className="result-card">
            <div className="icon">↑</div>
            <h4>Adoção <em>real</em></h4>
            <p>A solução foi lançada no GorilaVIEW e recebeu feedback positivo dos primeiros clientes B2B (escritórios) e B2C (pessoa física).</p>
          </div>
          <div className="result-card">
            <div className="icon">⌘</div>
            <h4>Handoff <em>limpo</em></h4>
            <p>Documentação completa de regras de negócio, user stories e fluxos para o time de UI. Transição sem retrabalho de UX, só pixel.</p>
          </div>
        </div>

        <div className="pullquote">
          <q>O Portfolio Connect não foi a tela mais bonita do GorilaVIEW. Foi a operação que, depois de lançada, mais reduziu a distância entre quem cuida do dinheiro e quem cuida da pessoa.</q>
          <div className="attr">— Reflexão pessoal, pós-lançamento</div>
        </div>

        <div className="kicker" style={{marginTop: 64, marginBottom: 16}}>Próximos passos</div>
        <p style={{fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.5, maxWidth: 760, color: "var(--text)"}}>
          Acompanhar métricas de uso em produção, observar adoção por persona e iterar nas microinterações conforme o padrão de uso real for emergindo. <em style={{fontStyle: "italic", color: "var(--accent)"}}>Cada nova evidência de comportamento</em> abre uma porta para refino.
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer() {
  return (
    <footer style={{ background:"var(--bg-card)", borderTop:"1px solid var(--border)" }}>
      <div style={{ maxWidth:1180, margin:"0 auto", padding:"40px 24px", display:"grid", gridTemplateColumns:"1fr auto 1fr", alignItems:"center", gap:20 }}>
        <a href="../gorila-view/index.html" style={{ fontSize:16, color:"var(--text-muted)", textDecoration:"none" }}>← GorilaVIEW</a>
        <a href="../../index.html" style={{ fontSize:15, color:"var(--text)", textDecoration:"none", borderBottom:"1px solid var(--text)", paddingBottom:3, justifySelf:"center", whiteSpace:"nowrap" }}>Todos os projetos</a>
        <span></span>
      </div>
      <div style={{ maxWidth:1180, margin:"0 auto", padding:"30px 24px 64px", textAlign:"center", borderTop:"1px solid var(--border)" }}>
        <a href="mailto:loupraxedes@gmail.com" style={{ fontFamily:"var(--font-mono)", fontSize:14, color:"var(--text-muted)", textDecoration:"none", wordBreak:"break-word" }}>loupraxedes@gmail.com</a>
        <p style={{ margin:"18px 0 0", fontFamily:"var(--font-mono)", fontSize:12, letterSpacing:"0.04em", color:"var(--text-muted)" }}>© 2026 Lou Praxedes</p>
      </div>
    </footer>
  );
}

/* ============================================================
   Main App — scroll-spy + lightbox + tweaks
   ============================================================ */
function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { document.documentElement.setAttribute("data-theme", t.theme); }, [t.theme]);
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-soft", t.accent + "1f");
    document.documentElement.style.setProperty("--accent-line", t.accent + "40");
  }, [t.accent]);

  // Scroll-spy
  const [active, setActive] = useState(SECTIONS[0].id);
  useEffect(() => {
    const opts = { rootMargin: "-40% 0% -50% 0%" };
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, opts);
    SECTIONS.forEach(s => {
      const el = document.getElementById(s.id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  // Lightbox — captures clicks on any .fullbleed-image img or .screen-frame img
  const [lightbox, setLightbox] = useState(null);
  const [zoom, setZoom] = useState(1);
  useEffect(() => {
    const onClick = (e) => {
      const img = e.target.closest && e.target.closest('.fullbleed-image img, .screen-frame img');
      if (img) {
        e.preventDefault();
        setLightbox({ src: img.src, alt: img.alt || '' });
        setZoom(1);
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);
  useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLightbox(null);
      else if (e.key === '+' || e.key === '=') setZoom(z => Math.min(z + 0.25, 3));
      else if (e.key === '-' || e.key === '_') setZoom(z => Math.max(z - 0.25, 0.5));
      else if (e.key === '0') setZoom(1);
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [lightbox]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;

  return (
    <>
      <TopNav active={active} />
      <main>
        <Hero />
        <section style={{ background: "#fff", borderTop: "1px solid #ece8e0", borderBottom: "1px solid #ece8e0" }}>
          <div style={{ maxWidth: 1180, margin: "0 auto", padding: "46px 56px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 28 }}>
            {[["4", "Fluxos desenhados"], ["27", "Cenários mapeados"], ["3", "Casos de borda críticos"], ["2", "Plataformas · web e mobile"]].map(function (m, i) {
              return (
                <div key={i} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  <span style={{ fontFamily: "var(--font-display, Geist)", fontSize: 48, fontWeight: 600, letterSpacing: "-0.03em", color: "#1E4ED8", lineHeight: 1 }}>{m[0]}</span>
                  <span className="metric-label" style={{ fontSize: 14, lineHeight: 1.4, color: "#6b6760" }}>{m[1]}</span>
                </div>
              );
            })}
          </div>
        </section>
        <Contexto />
        <Problema />
        <Fluxos />
        <Galeria />
        <Resultados />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tema" />
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={[{ value: "light", label: "Claro" }, { value: "dark", label: "Escuro" }]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakSection label="Acento" />
        <TweakColor
          label="Cor de destaque"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweaksPanel>

      <div
        className={"lightbox" + (lightbox ? " open" : "")}
        onClick={(e) => {
          if (e.target.className && typeof e.target.className === "string" && e.target.className.includes("lightbox")) setLightbox(null);
        }}
      >
        {lightbox && (
          <>
            <button className="lightbox-close" onClick={() => setLightbox(null)} aria-label="Fechar">×</button>
            <div className="lightbox-toolbar">
              <button onClick={() => setZoom(z => Math.max(z - 0.25, 0.5))} aria-label="Diminuir zoom">−</button>
              <span className="zoom-label">{Math.round(zoom * 100)}%</span>
              <button onClick={() => setZoom(z => Math.min(z + 0.25, 3))} aria-label="Aumentar zoom">+</button>
              <button onClick={() => setZoom(1)} aria-label="Resetar zoom" title="Resetar zoom" style={{fontSize: 11}}>1:1</button>
            </div>
            <div className="lightbox-stage">
              <img src={lightbox.src} alt={lightbox.alt} style={{transform: `scale(${zoom})`}} />
            </div>
            <div className="lightbox-caption">{lightbox.alt} · use + e − para zoom · esc para fechar</div>
          </>
        )}
      </div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);