function Portfolio() {
  const all = [
    { t: "Venus Love Shop", cat: "Desenvolvimento Web", desc: "Loja virtual completa com catálogo, carrinho e integração com meios de pagamento.", tags: ["E-commerce", "UX/UI", "Responsivo"], url: "https://venusloveshop.com.br" },
    { t: "HNSC", cat: "Desenvolvimento Web", desc: "Site institucional moderno com foco em credibilidade e geração de leads.", tags: ["Institucional", "UX/UI", "SEO"], url: "https://hnsc.com.br" },
    { t: "Fascinart Flores", cat: "Desenvolvimento Web", desc: "E-commerce de floricultura com gestão de pedidos, entregas e catálogo visual.", tags: ["E-commerce", "Floricultura", "Responsivo"], url: "https://fascinartflores.com.br" },
    { t: "Autie Capacitação", cat: "Desenvolvimento Web", desc: "Plataforma educacional para capacitação e inclusão, com cursos e inscrições online.", tags: ["Educação", "Inclusão", "Plataforma"], url: "https://autiecapacitacao.com.br" },
    { t: "Prazer Borboletário", cat: "Desenvolvimento Web", desc: "Site de turismo para borboletário, com galeria de espécies e agenda de visitas.", tags: ["Turismo", "Institucional", "Galeria"], url: "https://prazerborboletario.com.br" },
    { t: "Dashboard de CRM", cat: "Análise de Dados", desc: "Painel com visão 360° do cliente - funil, conversão, churn e LTV em tempo real.", tags: ["Power BI", "CRM", "KPIs", "SQL"] },
    { t: "Dashboard de Vendas", cat: "Análise de Dados", desc: "Performance comercial com metas, ranking, receita por período e projeções.", tags: ["Power BI", "Vendas", "Metas"] },
    { t: "Controle Operacional de Obras", cat: "Análise de Dados", desc: "Gestão de obras com cronograma, custos, avanço físico e indicadores de performance.", tags: ["Power BI", "Construção", "KPIs"] },
    { t: "Automação de Vale Transporte", cat: "Automação", desc: "Cálculo e processamento de vale-transporte sem erros manuais - fechamento em minutos.", tags: ["Python", "RH", "Excel"] },
    { t: "Geração de Confissão de Dívidas", cat: "Automação", desc: "Documentos de confissão gerados a partir de dados estruturados, com saída em PDF.", tags: ["Python", "PDF", "Jurídico"] },
    { t: "Geração e Comparação de Contratos", cat: "Automação", desc: "Contratos personalizados + comparação entre versões, detectando alterações e inconsistências.", tags: ["Python", "NLP", "Compliance"] },
  ];
  const cats = ["Todos", "Desenvolvimento Web", "Análise de Dados", "Automação"];
  const [filter, setFilter] = useState("Todos");
  const [expanded, setExpanded] = useState(false);
  const list = filter === "Todos" ? all : all.filter(p => p.cat === filter);

  const thumb = (cat, seed) => {
    if (cat === "Desenvolvimento Web") return <WebThumb seed={seed} />;
    if (cat === "Análise de Dados") return <DataThumb seed={seed} />;
    return <AutoThumb seed={seed} />;
  };

  return (
    <section className="band" id="portfolio">
      <HexBackdrop />
      <div className="shell">
        <div className="sec-head">
          <div>
            <Eyebrow tone="teal">portfólio</Eyebrow>
            <h2 style={{marginTop: 14}}>Projetos que <span className="text-grad">já estão rodando</span> - dados, sistemas e automações.</h2>
          </div>
          <p>Uma amostra recente. Cada card é um projeto real entregue: site no ar, dashboard em produção ou automação ligada à rotina do cliente.</p>
        </div>

        <div style={{marginTop: 40}}>
          <button
            className={"btn portfolio-toggle " + (expanded ? "btn-ghost" : "btn-teal")}
            onClick={() => setExpanded(e => !e)}
            aria-expanded={expanded}
          >
            {expanded ? "Ocultar projetos" : "Ver projetos"}
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{transition: 'transform .3s', transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)'}}>
              <path d="M3 6L8 11L13 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>

        {expanded && (
          <div className="portfolio-expandable">
            <div className="tabs-row" style={{marginTop: 32, marginBottom: 24}}>
              {cats.map(c => (
                <button key={c} className={c === filter ? "active" : ""} onClick={() => setFilter(c)}>{c}</button>
              ))}
            </div>
            <div className="portfolio-grid">
              {list.map((p, i) => (
                <article key={p.t} className="portfolio-card">
                  <div className="portfolio-thumb">
                    {thumb(p.cat, i)}
                    <div className="portfolio-cat mono">{p.cat}</div>
                  </div>
                  <div className="portfolio-body">
                    <h3>{p.t}</h3>
                    <p style={{fontSize: 14}}>{p.desc}</p>
                    <div style={{display:'flex', gap: 6, flexWrap:'wrap', marginTop: 14}}>
                      {p.tags.map(t => <span key={t} className="mono" style={{fontSize: 10.5, padding: '3px 8px', border: '1px solid var(--line-2)', borderRadius: 3, color: 'var(--ink-2)', letterSpacing: '0.06em'}}>{t}</span>)}
                    </div>
                    {p.url && (
                      <a href={p.url} target="_blank" rel="noreferrer" className="portfolio-link mono">
                        visitar site <span aria-hidden>↗</span>
                      </a>
                    )}
                  </div>
                </article>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// Original SVG thumbnails - each category gets a distinct visual language
function WebThumb({ seed = 0 }) {
  const hues = [
    ["#1E9FD4", "#2BE876"],
    ["#F5C542", "#2BE876"],
    ["#2BE876", "#1E9FD4"],
    ["#1E9FD4", "#F5C542"],
    ["#2BE876", "#F5C542"],
  ];
  const [a, b] = hues[seed % hues.length];
  return (
    <svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id={`wt${seed}`} x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor={a} stopOpacity="0.25"/><stop offset="100%" stopColor={b} stopOpacity="0.08"/>
        </linearGradient>
      </defs>
      <rect width="400" height="240" fill="#0A1D2B"/>
      <rect width="400" height="240" fill={`url(#wt${seed})`}/>
      <rect x="30" y="30" width="340" height="22" rx="4" fill="#0E2433" stroke="rgba(120,200,220,0.18)"/>
      <circle cx="42" cy="41" r="3" fill={a}/><circle cx="52" cy="41" r="3" fill="#F5C542"/><circle cx="62" cy="41" r="3" fill={b}/>
      <rect x="30" y="66" width="220" height="14" rx="2" fill="#E8F4F8" opacity="0.85"/>
      <rect x="30" y="86" width="160" height="8" rx="2" fill="#9FB9C4" opacity="0.5"/>
      <rect x="30" y="100" width="120" height="8" rx="2" fill="#9FB9C4" opacity="0.3"/>
      <rect x="30" y="130" width="100" height="80" rx="4" fill="#0E2433" stroke="rgba(120,200,220,0.15)"/>
      <rect x="140" y="130" width="100" height="80" rx="4" fill="#0E2433" stroke="rgba(120,200,220,0.15)"/>
      <rect x="250" y="130" width="100" height="80" rx="4" fill="#0E2433" stroke="rgba(120,200,220,0.15)"/>
      <rect x="40" y="190" width="60" height="12" rx="2" fill={a} opacity="0.7"/>
    </svg>
  );
}
function DataThumb({ seed = 0 }) {
  const bars = [45, 72, 38, 90, 55, 68, 82, 60];
  const line = [60, 50, 70, 55, 80, 68, 95, 88, 110, 98];
  return (
    <svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="240" fill="#0A1D2B"/>
      <rect width="400" height="240" fill="url(#dtg)"/>
      <defs>
        <linearGradient id="dtg" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stopColor="#1E9FD4" stopOpacity="0.2"/><stop offset="100%" stopColor="#2BE876" stopOpacity="0.05"/></linearGradient>
      </defs>
      {[0,1,2,3].map(i => <line key={i} x1="30" x2="370" y1={50 + i*40} y2={50 + i*40} stroke="rgba(120,200,220,0.08)" strokeDasharray="2 4"/>)}
      {bars.map((h, i) => (
        <rect key={i} x={30 + i*22} y={210 - h*1.4} width="14" height={h*1.4} rx="2" fill={i === (seed%bars.length) ? "#2BE876" : "#1E9FD4"} opacity={i === (seed%bars.length) ? 1 : 0.45}/>
      ))}
      <polyline points={line.map((v, i) => `${220 + i*14},${210 - v}`).join(" ")} fill="none" stroke="#F5C542" strokeWidth="2"/>
      {line.map((v, i) => <circle key={i} cx={220 + i*14} cy={210 - v} r="2" fill="#F5C542"/>)}
      <rect x="30" y="22" width="120" height="10" rx="2" fill="#E8F4F8" opacity="0.8"/>
      <rect x="30" y="38" width="80" height="6" rx="2" fill="#9FB9C4" opacity="0.45"/>
    </svg>
  );
}
function AutoThumb({ seed = 0 }) {
  return (
    <svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="240" fill="#0A1D2B"/>
      <rect width="400" height="240" fill="url(#atg)"/>
      <defs>
        <linearGradient id="atg" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stopColor="#F5C542" stopOpacity="0.15"/><stop offset="100%" stopColor="#2BE876" stopOpacity="0.05"/></linearGradient>
      </defs>
      {/* Flow nodes */}
      <g fill="#0E2433" stroke="rgba(120,200,220,0.25)" strokeWidth="1">
        <rect x="30" y="100" width="78" height="40" rx="4"/>
        <rect x="160" y="40" width="78" height="40" rx="4"/>
        <rect x="160" y="160" width="78" height="40" rx="4"/>
        <rect x="290" y="100" width="78" height="40" rx="4"/>
      </g>
      {/* Connectors */}
      <g fill="none" stroke="#2BE876" strokeWidth="1.5" strokeDasharray="3 3">
        <path d="M108 120 L160 60"/>
        <path d="M108 120 L160 180"/>
        <path d="M238 60 L290 120"/>
        <path d="M238 180 L290 120"/>
      </g>
      {/* Icons inside nodes */}
      <g fill="#F5C542">
        <circle cx="69" cy="120" r="6"/>
        <rect x="192" y="54" width="14" height="12" rx="1.5"/>
        <circle cx="199" cy="180" r="6"/>
        <path d={`M${322 + (seed%3)*3} 114 L329 126 L336 114 L343 126`} stroke="#F5C542" strokeWidth="2" fill="none"/>
      </g>
      <rect x="30" y="22" width="140" height="10" rx="2" fill="#E8F4F8" opacity="0.8"/>
      <rect x="30" y="38" width="90" height="6" rx="2" fill="#9FB9C4" opacity="0.45"/>
    </svg>
  );
}

Object.assign(window, { Portfolio });