// flipper-demo.jsx — réplica pixel-fiel do Flipper Hub.
// Espelha a app real (apps/web do flipperhub):
//   - Sidebar de DUAS colunas: Icon Rail (60px) + Secondary Panel (196px) = 256px
//   - Drawer de imóvel slide-up FROM BOTTOM (720px wide na app real, full-width aqui)
//   - Tema escuro (default nos screenshots da app)
//   - Phosphor-style icons (regular weight)
//   - Cards de imóvel com flow pills, specs (bed/bath/car), avatar do dono
//   - Steps bar Pendente → Em Andamento → Concluído (clicável)
//   - Tab nav pill-style horizontal no drawer
//   - 9 tabs reais: Geral, Imóvel, Fluxos, Tarefas, Financeiro, Participantes, Reforma, Comercial, Histórico

const { useState } = React;

// ── Phosphor-style icons (regular weight, currentColor) ───────────────────
function PIc({ name, size = 18 }) {
  // Ícones customizados (stroke, viewBox 0 0 24 24) — espelham apps/web/components/icons/
  if (name === 'GarimpoIcon') {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="11" cy="11" r="8"/>
        <path d="m21 21-4.35-4.35"/>
      </svg>
    );
  }
  if (name === 'LeadsIcon') {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M2 11L12 3L22 11"/>
        <path d="M5 9.5V21H15"/>
        <path d="M19 13V21"/>
        <path d="M15 17H23"/>
      </svg>
    );
  }
  const s = { width: size, height: size, viewBox: '0 0 256 256', fill: 'currentColor' };
  switch (name) {
    case 'Telescope':    return <svg {...s}><path d="M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z"/></svg>;
    case 'Buildings':    return <svg {...s}><path d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z"/></svg>;
    case 'HardHat':      return <svg {...s}><path d="M224,152V136a96.37,96.37,0,0,0-64-90.51V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40v5.49A96.37,96.37,0,0,0,32,136v16a16,16,0,0,0-16,16v24a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V168A16,16,0,0,0,224,152Zm-16-16v16H160V62.67A80.36,80.36,0,0,1,208,136ZM144,40V152H112V40ZM48,136A80.36,80.36,0,0,1,96,62.67V152H48Zm176,56H32V168H224v24Z"/></svg>;
    case 'Wrench':       return <svg {...s}><path d="M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z"/></svg>;
    case 'House':        return <svg {...s}><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg>;
    case 'GraphFlow':    return <svg {...s}><path d="M232,128a32,32,0,0,0-56-21l-26.9-15.36a31.41,31.41,0,0,0,0-15.27L176,61a32,32,0,1,0-8-13.86L141.13,62.5a32,32,0,1,0,0,51.07L168,128.93a32.31,32.31,0,0,0,0,15.27l-26.9,15.37a32,32,0,1,0,8,13.86L176,158.07A32,32,0,1,0,232,128ZM200,40a16,16,0,1,1-16,16A16,16,0,0,1,200,40ZM96,128a16,16,0,1,1,16-16A16,16,0,0,1,96,128Zm104,88a16,16,0,1,1,16-16A16,16,0,0,1,200,216Zm0-72a16,16,0,1,1,16-16A16,16,0,0,1,200,144Z"/></svg>;
    case 'CheckSquare':  return <svg {...s}><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"/></svg>;
    case 'Calendar':     return <svg {...s}><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"/></svg>;
    case 'FileText':     return <svg {...s}><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/></svg>;
    case 'ContactRound':return <svg {...s}><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg>;
    case 'Building2':    return <svg {...s}><path d="M232,72H192V40a16,16,0,0,0-16-16H40A16,16,0,0,0,24,40V216a8,8,0,0,0,8,8H224a8,8,0,0,0,8-8V88A16,16,0,0,0,232,72ZM176,40V208H40V40Zm40,168H192V88h24ZM64,72a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H72A8,8,0,0,1,64,72Zm56,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H128A8,8,0,0,1,120,72Zm-56,32a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H72A8,8,0,0,1,64,104Zm56,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H128A8,8,0,0,1,120,104Zm-56,32a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H72A8,8,0,0,1,64,136Zm56,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H128A8,8,0,0,1,120,136Zm-56,40a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H72A8,8,0,0,1,64,176Zm56,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H128A8,8,0,0,1,120,176Z"/></svg>;
    case 'Megaphone':    return <svg {...s}><path d="M240,120a48.05,48.05,0,0,0-48-48H152.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,24,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,151.12,214l11,7.33A16,16,0,0,0,186.5,212l11.77-44.36A48.07,48.07,0,0,0,240,120ZM40,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C126.65,155,82.84,164.07,40,199.93Zm131,8,0,.11-11-7.33V168.46l11.77,44.27Zm21-43.62V88a32,32,0,0,1,0,64Z"/></svg>;
    case 'Sparkle':      return <svg {...s}><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144Zm32-105a8,8,0,0,1,8-8h16v-16a8,8,0,1,1,16,0v16h16a8,8,0,1,1,0,16H224v16a8,8,0,1,1-16,0v-16H192A8,8,0,0,1,184,59.16Zm-71,128a8,8,0,0,1,8-8h8v-8a8,8,0,0,1,16,0v8h8a8,8,0,0,1,0,16h-8v8a8,8,0,0,1-16,0v-8h-8A8,8,0,0,1,113,187.16Z"/></svg>;
    case 'PickAxe':      return <svg {...s}><path d="M229.66,138.34l-72-72a8,8,0,0,0-11.32,11.32L153.37,84.7l-66,66L80.69,144H80a8,8,0,0,0-5.66,2.34l-56,56a8,8,0,0,0,11.32,11.32L80.69,160h.62l6.66,6.66a8,8,0,0,0,11.31,0l78-78,6.69,6.69a8,8,0,0,0,11.32-11.32ZM168,80a32,32,0,1,0-32-32A32,32,0,0,0,168,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,168,32Z"/></svg>;
    case 'Target':       return <svg {...s}><path d="M229.66,98.34a8,8,0,0,1-11.32,11.32L208,99.31V184a16,16,0,0,1-16,16H64a16,16,0,0,1-16-16V64a16,16,0,0,1,16-16h84.69L138.34,37.66a8,8,0,0,1,11.32-11.32l24,24a8,8,0,0,1,0,11.32l-24,24A8,8,0,0,1,138.34,74.34L148.69,64H64V184H192V99.31l-10.34,10.35a8,8,0,0,1-11.32-11.32l24-24a8,8,0,0,1,11.32,0ZM152,128a24,24,0,1,1-24-24A24,24,0,0,1,152,128Zm-16,0a8,8,0,1,0-8,8A8,8,0,0,0,136,128Z"/></svg>;
    case 'Bell':         return <svg {...s}><path d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"/></svg>;
    case 'Chats':        return <svg {...s}><path d="M168,80H88a8,8,0,0,0,0,16h80a8,8,0,0,0,0-16ZM152,112H88a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm75.42,46.59C235.64,144.06,240,127.79,240,112c0-26-12.93-50.31-36.42-68.39C181.59,26.6,152.83,16,120,16,86.79,16,57.93,26.6,36.42,43.61,12.93,61.69,0,86,0,112c0,15.79,4.36,32.06,12.58,46.59L1.86,193.85a8,8,0,0,0,9.71,10.16l38.69-9.67c12.16,5.18,25.71,8.45,40.43,9.4A88.07,88.07,0,0,0,168,232c14.72-.95,28.27-4.22,40.43-9.4l38.69,9.67a8,8,0,0,0,9.71-10.16ZM55.16,178.83l-25.36,6.34,7-23.32a8,8,0,0,0-1-7.06A78.78,78.78,0,0,1,16,112c0-44.86,46.65-80,104-80s104,35.14,104,80a78.78,78.78,0,0,1-19.83,42.79,8,8,0,0,0-1,7.06l7,23.32-25.36-6.34a8,8,0,0,0-5.69.66c-12.78,7.16-28.07,11-43.07,11C123.55,190.49,67.94,185.99,55.16,178.83Z"/></svg>;
    case 'Coin':         return <svg {...s}><circle cx="128" cy="128" r="100" fill="#E0A828"/><path d="M88 100h80M88 128h60M104 156l-24-28 24-28" stroke="white" strokeWidth="14" strokeLinejoin="round" fill="none" strokeLinecap="round"/></svg>;
    case 'Coins':        return <svg {...s}><path d="M184,89.57V84c0-25.08-37.83-44-88-44S8,58.92,8,84v40c0,20.89,26.25,37.49,64,42.46V172c0,25.08,37.83,44,88,44s88-18.92,88-44V132C248,111.3,222.58,94.68,184,89.57ZM232,132c0,13.22-30.79,28-72,28-3.73,0-7.43-.13-11.08-.37C170.49,151.77,184,139,184,124V105.74C213.87,110.19,232,122.27,232,132ZM72,150.25V126.46A183.74,183.74,0,0,0,96,128a183.74,183.74,0,0,0,24-1.54v23.79A163,163,0,0,1,96,152,163,163,0,0,1,72,150.25Zm96-40.32V124c0,8.39-12.41,17.4-32,22.87V123.5C148.91,120.37,159.84,115.71,168,109.93ZM96,56c41.21,0,72,14.78,72,28s-30.79,28-72,28S24,97.22,24,84,54.79,56,96,56ZM24,124V109.93c8.16,5.78,19.09,10.44,32,13.57v23.37C36.41,141.4,24,132.39,24,124Zm64,48v-4.17c2.63.1,5.29.17,8,.17,3.88,0,7.67-.13,11.39-.35A121.92,121.92,0,0,0,120,171.41v23.46C100.41,189.4,88,180.39,88,172Zm48,26.25V174.4a179.48,179.48,0,0,0,24,1.6,183.74,183.74,0,0,0,24-1.54v23.79a165.45,165.45,0,0,1-48,0Zm64-3.38V171.5c12.91-3.13,23.84-7.79,32-13.57V172C232,180.39,219.59,189.4,200,194.87Z"/></svg>;
    case 'ChatText':     return <svg {...s}><path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78l.09-.07L83,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H80a8,8,0,0,0-5.23,1.95L40,224V64H216ZM88,112a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,112Zm0,32a8,8,0,0,1,8-8h64a8,8,0,1,1,0,16H96A8,8,0,0,1,88,144Z"/></svg>;
    case 'Caret':        return <svg {...s}><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg>;
    case 'CaretLeft':    return <svg {...s}><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg>;
    case 'X':            return <svg {...s}><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>;
    case 'MagnifyingGlass':return <svg {...s}><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg>;
    case 'Plus':         return <svg {...s}><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>;
    case 'Funnel':       return <svg {...s}><path d="M227.81,66.76l-.08.09L160,139.17V216a16,16,0,0,1-24.87,13.32l-32-21.34A16,16,0,0,1,96,194.66V139.17L28.27,66.85l-.08-.09A16,16,0,0,1,40,40H216a16,16,0,0,1,11.84,26.76ZM216,56H40l72,76.69V194.66L144,216V132.69Z"/></svg>;
    case 'Squares':      return <svg {...s}><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/></svg>;
    case 'List':         return <svg {...s}><path d="M216,128a8,8,0,0,1-8,8H48a8,8,0,0,1,0-16H208A8,8,0,0,1,216,128ZM48,72H208a8,8,0,0,0,0-16H48a8,8,0,0,0,0,16ZM208,184H48a8,8,0,0,0,0,16H208a8,8,0,0,0,0-16Z"/></svg>;
    case 'Bed':          return <svg {...s}><path d="M232,96H136V72a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V200a8,8,0,0,0,16,0V184H208v16a8,8,0,0,0,16,0V120A24,24,0,0,0,232,96ZM48,80h72v40H48Zm208,88H48V136H232a8,8,0,0,1,8,8Z"/></svg>;
    case 'Bath':         return <svg {...s}><path d="M232,96H56V72a16,16,0,0,1,32,0,8,8,0,0,0,16,0,32,32,0,0,0-64,0v24H24a8,8,0,0,0-8,8v32a40,40,0,0,0,32,39.19V200a16,16,0,0,0,16,16h128a16,16,0,0,0,16-16V175.19A40,40,0,0,0,240,136V104A8,8,0,0,0,232,96Zm-8,40a24,24,0,0,1-24,24H56a24,24,0,0,1-24-24V112H224Z"/></svg>;
    case 'Car':          return <svg {...s}><path d="M240,112H229.2L201.42,49.5A16,16,0,0,0,186.8,40H69.2a16,16,0,0,0-14.62,9.5L26.8,112H16a8,8,0,0,0,0,16h8v80a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V192h96v16a16,16,0,0,0,16,16h24a16,16,0,0,0,16-16V128h8a8,8,0,0,0,0-16ZM69.2,56H186.8l24.89,56H44.31ZM64,208H40V192H64Zm128,0V192h24v16Zm24-32H40V128H216ZM56,152a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H64A8,8,0,0,1,56,152Zm112,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H176A8,8,0,0,1,168,152Z"/></svg>;
    case 'Ruler':        return <svg {...s}><path d="M235.32,73.37,182.63,20.69a16,16,0,0,0-22.63,0L20.68,160a16,16,0,0,0,0,22.63l52.69,52.68a16,16,0,0,0,22.63,0L235.32,96A16,16,0,0,0,235.32,73.37ZM84.69,224,32,171.31l32-32,26.34,26.35a8,8,0,0,0,11.32-11.32L75.31,128,96,107.31l26.34,26.35a8,8,0,0,0,11.32-11.32L107.31,96,128,75.31l26.34,26.35a8,8,0,0,0,11.32-11.32L139.31,64l32-32L224,84.69Z"/></svg>;
    case 'Star':         return <svg {...s}><path d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86A16.46,16.46,0,0,0,21.74,114.76l45,38.83-13.74,58a16.59,16.59,0,0,0,6.06,17.19,16.54,16.54,0,0,0,18.11.76L128,199.65l50.83,29.85a16.55,16.55,0,0,0,18.11-.76,16.59,16.59,0,0,0,6.06-17.19l-13.74-58,45-38.83A16.36,16.36,0,0,0,239.18,97.26Z"/></svg>;
    case 'Gear':         return <svg {...s}><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"/></svg>;
    case 'PaperPlane':   return <svg {...s}><path d="M223.87,114l-168-95.89A16,16,0,0,0,32.93,37.32l31,90.71-31,90.7a16,16,0,0,0,15.18,21.27,16.21,16.21,0,0,0,7.81-2L223.94,142A16,16,0,0,0,223.87,114ZM48,208h0L78.83,118.71l109.66.71L48,208Z"/></svg>;
    case 'Receipt':      return <svg {...s}><path d="M224,40H32A16,16,0,0,0,16,56V216a8,8,0,0,0,12.8,6.4L56,202l27.2,20.4a8,8,0,0,0,9.6,0L120,202l27.2,20.4a8,8,0,0,0,9.6,0L184,202l27.2,20.4A8,8,0,0,0,224,216V56A16,16,0,0,0,224,40ZM192,144H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Zm0-32H64a8,8,0,0,1,0-16H192a8,8,0,0,1,0,16Z"/></svg>;
    case 'Clock':        return <svg {...s}><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg>;
    case 'Activity':     return <svg {...s}><path d="M232,128a8,8,0,0,1-8,8H189l-26.18,52.36a8,8,0,0,1-14.31,0l-44-88L82.18,136H32a8,8,0,0,1,0-16H86.94a8,8,0,0,1,7.16,4.42l36.34,72.69,40-80a8,8,0,0,1,7.15-4.42L224,120A8,8,0,0,1,232,128Z"/></svg>;
    case 'Check':        return <svg {...s}><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>;
    case 'CurrencyDollar': return <svg {...s}><path d="M152,120H136V56h8a32,32,0,0,1,32,32,8,8,0,0,0,16,0,48.05,48.05,0,0,0-48-48h-8V24a8,8,0,0,0-16,0V40h-8a48,48,0,0,0,0,96h8v64H104a32,32,0,0,1-32-32,8,8,0,0,0-16,0,48.05,48.05,0,0,0,48,48h16v16a8,8,0,0,0,16,0V216h16a48,48,0,0,0,0-96Zm-40,0a32,32,0,0,1,0-64h8v64Zm40,80H136V136h16a32,32,0,0,1,0,64Z"/></svg>;
    case 'Waveform':     return <svg {...s}><path d="M56,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM88,24a8,8,0,0,0-8,8V224a8,8,0,0,0,16,0V32A8,8,0,0,0,88,24Zm40,32a8,8,0,0,0-8,8V192a8,8,0,0,0,16,0V64A8,8,0,0,0,128,56Zm40,32a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V96A8,8,0,0,0,168,88Zm40-16a8,8,0,0,0-8,8v96a8,8,0,0,0,16,0V80A8,8,0,0,0,208,72Z"/></svg>;
    case 'Door':         return <svg {...s}><path d="M232,216H208V40a16,16,0,0,0-16-16H64A16,16,0,0,0,48,40V216H24a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16ZM64,40H192V216H64Zm104,92a12,12,0,1,1-12-12A12,12,0,0,1,168,132Z"/></svg>;
    case 'GitBranch':    return <svg {...s}><path d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"/></svg>;
    case 'Handshake':    return <svg {...s}><path d="M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l55.07-55.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41ZM41.53,64,62,74.22,36.43,125.27,16,115.06Zm116,119.13L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm62-57.87-25.52-51L214.47,64,240,115.06Zm-87.75,92.67a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z"/></svg>;
    case 'Certificate':  return <svg {...s}><path d="M128,136a8,8,0,0,1-8,8H72a8,8,0,0,1,0-16h48A8,8,0,0,1,128,136Zm-8-40H72a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Zm112,65.47V224A8,8,0,0,1,220,231l-24-13.74L172,231A8,8,0,0,1,160,224V200H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216a16,16,0,0,1,16,16V86.53a51.88,51.88,0,0,1,0,74.94ZM160,184V161.47A52,52,0,0,1,216,76V56H40V184Zm56-12a51.88,51.88,0,0,1-40,0v38.22l16-9.16a8,8,0,0,1,7.94,0l16,9.16Zm16-48a36,36,0,1,0-36,36A36,36,0,0,0,232,124Z"/></svg>;
    case 'Tag':          return <svg {...s}><path d="M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z"/></svg>;
    case 'Key':          return <svg {...s}><path d="M216.57,39.43A80,80,0,0,0,83.91,120.78L28.69,176A15.86,15.86,0,0,0,24,187.31V216a16,16,0,0,0,16,16H72a8,8,0,0,0,8-8V208H96a8,8,0,0,0,8-8V184h16a8,8,0,0,0,5.66-2.34l9.56-9.57A79.73,79.73,0,0,0,160,176h.1A80,80,0,0,0,216.57,39.43ZM224,98.1c-1.09,34.09-29.75,61.86-63.89,61.9H160a63.7,63.7,0,0,1-23.65-4.51,8,8,0,0,0-8.84,1.68L116.69,168H96a8,8,0,0,0-8,8v16H72a8,8,0,0,0-8,8v16H40V187.31l58.83-58.82a8,8,0,0,0,1.68-8.84A63.72,63.72,0,0,1,96,95.92c0-34.14,27.81-62.8,61.9-63.89A64,64,0,0,1,224,98.1ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"/></svg>;
    case 'ChartBar':     return <svg {...s}><path d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"/></svg>;
    case 'Sliders':      return <svg {...s}><path d="M64,105V40a8,8,0,0,0-16,0v65a32,32,0,0,0,0,62v49a8,8,0,0,0,16,0V167a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,56,152Zm80-95V40a8,8,0,0,0-16,0V57a32,32,0,0,0,0,62v97a8,8,0,0,0,16,0V119a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,128,104Zm104,64a32.06,32.06,0,0,0-24-31V40a8,8,0,0,0-16,0v97a32,32,0,0,0,0,62v17a8,8,0,0,0,16,0V199A32.06,32.06,0,0,0,232,168Zm-32,16a16,16,0,1,1,16-16A16,16,0,0,1,200,184Z"/></svg>;
    case 'Network':      return <svg {...s}><path d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"/></svg>;
    case 'UserCircle':   return <svg {...s}><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"/></svg>;
    case 'SquaresFour':  return <svg {...s}><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"/></svg>;
    case 'Brain':        return <svg {...s}><path d="M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z"/></svg>;
    case 'Calculator':   return <svg {...s}><path d="M80,120h96a8,8,0,0,0,8-8V64a8,8,0,0,0-8-8H80a8,8,0,0,0-8,8v48A8,8,0,0,0,80,120Zm8-48h80v32H88ZM200,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V40A16,16,0,0,0,200,24Zm0,192H56V40H200ZM100,148a12,12,0,1,1-12-12A12,12,0,0,1,100,148Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,140,148Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,180,148Zm-80,40a12,12,0,1,1-12-12A12,12,0,0,1,100,188Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,140,188Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,180,188Z"/></svg>;
    case 'Scales':       return <svg {...s}><path d="M239.43,133l-32-80h0a8,8,0,0,0-9.16-4.84L136,62V40a8,8,0,0,0-16,0V65.58L54.26,80.19A8,8,0,0,0,48.57,85h0v.06L16.57,165a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32a7.92,7.92,0,0,0-.57-3L66.92,93.77,120,82V208H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16H136V78.42L187,67.1,160.57,133a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32A7.92,7.92,0,0,0,239.43,133ZM56,184c-7.53,0-22.76-3.61-23.93-14.64L56,109.54l23.93,59.82C78.76,180.39,63.53,184,56,184Zm144-32c-7.53,0-22.76-3.61-23.93-14.64L200,77.54l23.93,59.82C222.76,148.39,207.53,152,200,152Z"/></svg>;
    case 'Bank':         return <svg {...s}><path d="M24,104H48v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16H208V104h24a8,8,0,0,0,4.19-14.81l-104-64a8,8,0,0,0-8.38,0l-104,64A8,8,0,0,0,24,104Zm40,0H96v64H64Zm80,0v64H112V104Zm48,64H160V104h32ZM128,41.39,203.74,88H52.26ZM248,208a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H240A8,8,0,0,1,248,208Z"/></svg>;
    case 'Scroll':       return <svg {...s}><path d="M96,104a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H104A8,8,0,0,1,96,104Zm8,40h64a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16Zm128,48a32,32,0,0,1-32,32H88a32,32,0,0,1-32-32V64a16,16,0,0,0-32,0c0,5.74,4.83,9.62,4.88,9.66h0A8,8,0,0,1,24,88a7.89,7.89,0,0,1-4.79-1.61h0C18.05,85.54,8,77.61,8,64A32,32,0,0,1,40,32H176a32,32,0,0,1,32,32V168h8a8,8,0,0,1,4.8,1.6C222,170.46,232,178.39,232,192ZM96.26,173.48A8.07,8.07,0,0,1,104,168h88V64a16,16,0,0,0-16-16H67.69A31.71,31.71,0,0,1,72,64V192a16,16,0,0,0,32,0c0-5.74-4.83-9.62-4.88-9.66A7.82,7.82,0,0,1,96.26,173.48ZM216,192a12.58,12.58,0,0,0-3.23-8h-94a26.92,26.92,0,0,1,1.21,8,31.82,31.82,0,0,1-4.29,16H200A16,16,0,0,0,216,192Z"/></svg>;
    case 'Folders':      return <svg {...s}><path d="M224,64H154.67L126.93,43.2a16.12,16.12,0,0,0-9.6-3.2H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H192.89A15.13,15.13,0,0,0,208,200.89V184h16.89A15.13,15.13,0,0,0,240,168.89V80A16,16,0,0,0,224,64ZM192,200H40V88H85.33l29.87,22.4A8,8,0,0,0,120,112h72Zm32-32H208V112a16,16,0,0,0-16-16H122.67L94.93,75.2a16.12,16.12,0,0,0-9.6-3.2H72V56h45.33L147.2,78.4A8,8,0,0,0,152,80h72Z"/></svg>;
    case 'ArrowsCounterClockwise': return <svg {...s}><path d="M88,104H40a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V76.69L62.63,62.06A95.43,95.43,0,0,1,130,33.94h.53a95.36,95.36,0,0,1,67.07,27.33,8,8,0,0,1-11.18,11.44,79.52,79.52,0,0,0-55.89-22.77h-.45A79.56,79.56,0,0,0,73.94,73.37L59.31,88H88a8,8,0,0,1,0,16Zm128,48H168a8,8,0,0,0,0,16h28.69l-14.63,14.63a79.56,79.56,0,0,1-56.13,23.43h-.45a79.52,79.52,0,0,1-55.89-22.77,8,8,0,1,0-11.18,11.44,95.36,95.36,0,0,0,67.07,27.33H126a95.43,95.43,0,0,0,67.36-28.12L208,179.31V208a8,8,0,0,0,16,0V160A8,8,0,0,0,216,152Z"/></svg>;
    case 'HardDrive':    return <svg {...s}><path d="M224,64H32A16,16,0,0,0,16,80v96a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V80A16,16,0,0,0,224,64Zm0,112H32V80H224v96Zm-24-48a12,12,0,1,1-12-12A12,12,0,0,1,200,128Z"/></svg>;
    case 'Package':      return <svg {...s}><path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z"/></svg>;
    case 'ShoppingCart': return <svg {...s}><path d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z"/></svg>;
    case 'BuildingOffice': return <svg {...s}><path d="M248,208H232V96a8,8,0,0,0,0-16H184V48a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16V208H24a8,8,0,0,0,0,16H248a8,8,0,0,0,0-16ZM216,96V208H184V96ZM56,48H168V208H144V160a8,8,0,0,0-8-8H88a8,8,0,0,0-8,8v48H56Zm72,160H96V168h32ZM72,80a8,8,0,0,1,8-8H96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,80Zm48,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H128A8,8,0,0,1,120,80ZM72,120a8,8,0,0,1,8-8H96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,120Zm48,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H128A8,8,0,0,1,120,120Z"/></svg>;
    case 'Users':        return <svg {...s}><path d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"/></svg>;
    case 'Gavel':        return <svg {...s}><path d="M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z"/></svg>;
    case 'MapPin':       return <svg {...s}><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"/></svg>;
    case 'ArrowSquareOut': return <svg {...s}><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg>;
    case 'Heart':        return <svg {...s}><path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"/></svg>;
    case 'EyeSlash':     return <svg {...s}><path d="M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z"/></svg>;
    case 'ShareNetwork':return <svg {...s}><path d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"/></svg>;
    case 'Trash':        return <svg {...s}><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg>;
    case 'CalendarBlank':return <svg {...s}><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg>;
    case 'DotsThree':    return <svg {...s}><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"/></svg>;
    case 'Faders':       return <svg {...s}><path d="M136,120v96a8,8,0,0,1-16,0V120a8,8,0,0,1,16,0Zm64,72a8,8,0,0,0-8,8v16a8,8,0,0,0,16,0V200A8,8,0,0,0,200,192Zm24-32H208V40a8,8,0,0,0-16,0V160H176a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16ZM56,160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168A8,8,0,0,0,56,160Zm24-32H64V40a8,8,0,0,0-16,0v88H32a8,8,0,0,0,0,16H80a8,8,0,0,0,0-16Zm72-48H136V40a8,8,0,0,0-16,0V80H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16Z"/></svg>;
    case 'Info':         return <svg {...s}><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>;
    default:             return <svg {...s}/>;
  }
}

// ── Greeting ────────────────────────────────────────────────────────────────
function fhdGreeting() {
  const h = new Date().getHours();
  if (h < 12) return 'Bom dia';
  if (h < 18) return 'Boa tarde';
  return 'Boa noite';
}
function fhdToday() {
  const d = new Date();
  const dias = ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'];
  const meses = ['janeiro','fevereiro','março','abril','maio','junho','julho','agosto','setembro','outubro','novembro','dezembro'];
  return `${dias[d.getDay()]}, ${d.getDate()} de ${meses[d.getMonth()]} de ${d.getFullYear()}`;
}

// ── Mock fixo (espelha seed-opportunities-test.ts) ──────────────────────────
const FHD_FLOWS = [
  { k: 'ITBI',    s: 'done' },
  { k: 'ESCRIT',  s: 'done' },
  { k: 'REGIST',  s: 'doing' },
  { k: 'BAIXA',   s: 'pend' },
  { k: 'IPTU',    s: 'done' },
  { k: 'CONDOM',  s: 'doing' },
  { k: 'REFORMA', s: 'doing' },
  { k: 'VENDA',   s: 'pend' },
];
const FHD_IMOVEIS = [
  { id: 'paulista-1578', n: '#001', titulo: 'Av. Paulista, 1578',
    tipo: 'Apartamento', cidade: 'São Paulo', uf: 'SP', bairro: 'Bela Vista',
    status: 'EM_ANDAMENTO',
    quartos: 2, suites: 1, banheiros: 2, vagas: 1,
    areaPriv: 85.5, andar: 12, anoConstr: 2014,
    condominio: 1850, iptu: 8500,
    precoAnuncio: 1200000, precoAlvo: 980000, orcamento: 180000, arv: 1480000,
    flowsDone: 5, flowsTotal: 8, margem: 18.4,
    responsavel: { iniciais: 'HF', cor: '#3A82F6' },
  },
  { id: 'haddock-595', n: '#002', titulo: 'Haddock Lobo, 595',
    tipo: 'Cobertura', cidade: 'São Paulo', uf: 'SP', bairro: 'Jardins',
    status: 'PENDENTE',
    quartos: 3, suites: 2, banheiros: 3, vagas: 2,
    areaPriv: 168, andar: 18, anoConstr: 2018,
    condominio: 3200, iptu: 14200,
    precoAnuncio: 2750000, precoAlvo: 2350000, orcamento: 320000, arv: 3100000,
    flowsDone: 1, flowsTotal: 8, margem: 22.6,
    responsavel: { iniciais: 'HF', cor: '#3A82F6' },
  },
  { id: 'pirajá-414', n: '#003', titulo: 'Visc. de Pirajá, 414',
    tipo: 'Apartamento', cidade: 'Rio de Janeiro', uf: 'RJ', bairro: 'Ipanema',
    status: 'EM_ANDAMENTO',
    quartos: 2, suites: 1, banheiros: 2, vagas: 1,
    areaPriv: 92, andar: 6, anoConstr: 2009,
    condominio: 2100, iptu: 11800,
    precoAnuncio: 1680000, precoAlvo: 1420000, orcamento: 220000, arv: 1890000,
    flowsDone: 4, flowsTotal: 8, margem: 16.8,
    responsavel: { iniciais: 'AT', cor: '#7A4FC7' },
  },
  { id: 'pinheiros-498', n: '#004', titulo: 'Rua dos Pinheiros, 498',
    tipo: 'Casa', cidade: 'São Paulo', uf: 'SP', bairro: 'Pinheiros',
    status: 'PAUSADO',
    quartos: 3, suites: 1, banheiros: 3, vagas: 2,
    areaPriv: 142, andar: null, anoConstr: 1998,
    condominio: 0, iptu: 6700,
    precoAnuncio: 1450000, precoAlvo: 1180000, orcamento: 280000, arv: 1620000,
    flowsDone: 2, flowsTotal: 8, margem: 13.4,
    responsavel: { iniciais: 'GM', cor: '#E0A828' },
  },
  { id: 'atlantica-1702', n: '#005', titulo: 'Av. Atlântica, 1702',
    tipo: 'Apartamento', cidade: 'Rio de Janeiro', uf: 'RJ', bairro: 'Copacabana',
    status: 'CONCLUIDO',
    quartos: 3, suites: 1, banheiros: 2, vagas: 1,
    areaPriv: 110, andar: 9, anoConstr: 1985,
    condominio: 2400, iptu: 9800,
    precoAnuncio: 2100000, precoAlvo: 1750000, orcamento: 240000, arv: 2280000,
    flowsDone: 8, flowsTotal: 8, margem: 14.6,
    responsavel: { iniciais: 'HF', cor: '#3A82F6' },
  },
];
const FHD_STATUS_LABEL = { PENDENTE: 'Pendente', EM_ANDAMENTO: 'Em andamento', PAUSADO: 'Pausado', CONCLUIDO: 'Concluído', CANCELADO: 'Cancelado' };
const FHD_STATUS_KLASS = { PENDENTE: 'pendente', EM_ANDAMENTO: 'em-andamento', PAUSADO: 'pausado', CONCLUIDO: 'concluido', CANCELADO: 'cancelado' };

const FHD_FLUXOS_FULL = [
  { tipo: 'Aquisição Judicial', status: 'Concluído',  data: 'fev/2026' },
  { tipo: 'ITBI',               status: 'Concluído',  data: 'fev/2026' },
  { tipo: 'Escritura',          status: 'Concluído',  data: 'mar/2026' },
  { tipo: 'Registro',           status: 'Em andamento', data: 'abr/2026' },
  { tipo: 'Baixa de Gravame',   status: 'Pendente',   data: '—' },
  { tipo: 'Alteração Tit. IPTU', status: 'Pendente',  data: '—' },
  { tipo: 'Alteração Tit. Condomínio', status: 'Pendente', data: '—' },
  { tipo: 'Reforma',            status: 'Em andamento', data: 'abr → jul/2026' },
  { tipo: 'Venda Online',       status: 'Pendente',   data: 'previsto · jul/2026' },
];

const FHD_TAREFAS = [
  { titulo: 'Aprovar orçamento — bancada da cozinha', prazo: 'Hoje', status: 'aberto' },
  { titulo: 'Visita da arquiteta · 14h',               prazo: 'Sex',  status: 'aberto' },
  { titulo: 'Pagamento medição #3 ao construtor',      prazo: 'Seg',  status: 'aberto' },
  { titulo: 'Revisar matrícula atualizada',            prazo: 'Concluída', status: 'feito' },
];

const FHD_PARTICIPANTES = [
  { nome: 'Henrique Fuhr',          papel: 'Operador · Cotista (60%)', iniciais: 'HF', cor: '#3A82F6' },
  { nome: 'Gabriela Mendes',        papel: 'Cotista (40%)',            iniciais: 'GM', cor: '#7A4FC7' },
  { nome: 'Construtora Vértice',    papel: 'Reforma — empreiteira',    iniciais: 'CV', cor: '#E0A828' },
  { nome: 'Ana Toledo',             papel: 'Arquiteta',                iniciais: 'AT', cor: '#12B76A' },
  { nome: 'Imobiliária Janelas SP', papel: 'Comercial — saída',        iniciais: 'JS', cor: '#EF4444' },
];

const FHD_HISTORICO = [
  { quando: 'Hoje · 09:42',  quem: 'HF', acao: 'anexou nota fiscal · medição #3', meta: 'R$ 38.500' },
  { quando: 'Ontem · 17:08', quem: 'HF', acao: 'aprovou orçamento de marcenaria — Vértice', meta: 'R$ 24.800' },
  { quando: 'Ontem · 11:20', quem: 'AT', acao: 'atualizou planta da suíte', meta: 'v3' },
  { quando: '2d atrás',      quem: 'HF', acao: 'mudou status de Registro para Em andamento', meta: null },
  { quando: '5d atrás',      quem: 'GM', acao: 'comentou: aporte adicional R$ 80K confirmado pra terça', meta: null },
  { quando: '12d atrás',     quem: 'HF', acao: 'criou imóvel · vinculado à oportunidade', meta: '#L-0042' },
];

// ── Sidebar — Icon Rail (60px) + Secondary Panel (196px) ────────────────────
const FHD_GROUPS = [
  { key: 'prospec', label: 'Prospecção',       icon: 'Telescope', items: [
    { k: 'garimpo',  l: 'Garimpo',  ic: 'GarimpoIcon' },
    { k: 'leads',    l: 'Leads',    ic: 'LeadsIcon' },
    { k: 'agente',   l: 'Agente',   ic: 'Brain' },
    { k: 'an-mer',   l: 'Mercado',     ic: 'ChartBar',   sub: true },
    { k: 'an-fin',   l: 'Financeira',  ic: 'Calculator', sub: true },
    { k: 'an-jur',   l: 'Jurídica',    ic: 'Scales',     sub: true },
  ]},
  { key: 'gestao', label: 'Carteira Imóveis', icon: 'Buildings', items: [
    { k: 'imoveis',   l: 'Imóveis',         ic: 'Door' },
    { k: 'fluxos',    l: 'Fluxos',          ic: 'GitBranch' },
    { k: 'fluxos-aq', l: 'Aquisição',       ic: 'Handshake',          sub: true },
    { k: 'fluxos-rg', l: 'Regularização',   ic: 'Certificate',        sub: true },
    { k: 'fluxos-dv', l: 'Dívidas',         ic: 'CurrencyDollar',     sub: true },
    { k: 'fluxos-tt', l: 'Titularidade',    ic: 'Key',                sub: true },
    { k: 'fluxos-vd', l: 'Venda',           ic: 'Tag',                sub: true },
  ]},
  { key: 'reformas', label: 'Reformas',     icon: 'HardHat', items: [
    { k: 'obras',     l: 'Obras',           ic: 'HardHat' },
    { k: 'plantas',   l: 'Plantas Digitais',ic: 'Ruler' },
    { k: 'estoque',   l: 'Estoque',         ic: 'Package' },
    { k: 'compras',   l: 'Compras',         ic: 'ShoppingCart' },
  ]},
  { key: 'fin', label: 'Financeiro',         icon: 'CurrencyDollar', items: [
    { k: 'fin-dash',  l: 'Dashboard',       ic: 'SquaresFour' },
    { k: 'fin-cont',  l: 'Contas Bancárias',ic: 'Bank' },
    { k: 'fin-mov',   l: 'Movimentações',   ic: 'Scroll' },
    { k: 'fin-pc',    l: 'Plano de Contas', ic: 'Folders' },
    { k: 'fin-conc',  l: 'Conciliação',     ic: 'ArrowsCounterClockwise' },
  ]},
  { key: 'tools', label: 'Ferramentas',     icon: 'Wrench', items: [
    { k: 'tarefas',   l: 'Tarefas',         ic: 'CheckSquare' },
    { k: 'cal',       l: 'Calendário',      ic: 'Calendar' },
    { k: 'drive',     l: 'Drive',           ic: 'HardDrive' },
    { k: 'docs',      l: 'Documentos',      ic: 'Scroll' },
  ]},
  { key: 'crm', label: 'CRM',                icon: 'UserCircle', items: [
    { k: 'contatos',  l: 'Contatos',        ic: 'Users' },
    { k: 'empresas',  l: 'Empresas',        ic: 'BuildingOffice' },
  ]},
  { key: 'comm', label: 'Comunicação',      icon: 'Waveform', items: [
    { k: 'chat',      l: 'Conversas',       ic: 'ChatText' },
    { k: 'email',     l: 'Email',           ic: 'PaperPlane' },
    { k: 'meta',      l: 'Meta Ads',        ic: 'Megaphone',  sub: true },
    { k: 'portais',   l: 'Portais',         ic: 'Activity',   sub: true },
  ]},
  { key: 'cfg', label: 'Configurações',     icon: 'Gear', items: [
    { k: 'perfil',    l: 'Meu Perfil',      ic: 'UserCircle' },
    { k: 'org',       l: 'Organização',     ic: 'Building2' },
    { k: 'usuarios',  l: 'Usuários',        ic: 'ContactRound' },
    { k: 'aparen',    l: 'Aparência',       ic: 'Sparkle' },
    { k: 'segur',     l: 'Segurança',       ic: 'Certificate' },
  ]},
];

function FHDIconRail({ activeGroup, onPickGroup, onHome, isHomeActive }) {
  // Ordem real (espelha sidebar-compact/index.tsx do app):
  // Visão Geral · Prospecção · Carteira · Reformas · Financeiro · Ferramentas · CRM · Comunicação · Network · Configurações
  const main = FHD_GROUPS.filter((g) => g.key !== 'cfg');
  const cfg  = FHD_GROUPS.find((g) => g.key === 'cfg');
  return (
    <div className="fhd-rail">
      <button className="fhd-rail-logo" title="Flipper Hub" onClick={onHome}>
        <img src="assets/logo-app-icon-blue.png" alt="" />
      </button>
      <div className="fhd-rail-nav">
        <button className={`fhd-rail-it ${isHomeActive ? 'is-active' : ''}`} onClick={onHome} title="Início">
          <PIc name="House" size={20} />
        </button>
        {main.map((g) => (
          <button key={g.key}
                  className={`fhd-rail-it ${activeGroup === g.key ? 'is-active' : ''}`}
                  onClick={() => onPickGroup(g.key)}
                  title={g.label}>
            <PIc name={g.icon} size={20} />
          </button>
        ))}
        <button className="fhd-rail-it" title="Network Hub">
          <PIc name="Network" size={20} />
        </button>
        {cfg && (
          <button className={`fhd-rail-it ${activeGroup === cfg.key ? 'is-active' : ''}`}
                  onClick={() => onPickGroup(cfg.key)} title={cfg.label}>
            <PIc name={cfg.icon} size={20} />
          </button>
        )}
      </div>
      <div className="fhd-rail-foot">
        <button className="fhd-rail-it" title="Notificações">
          <PIc name="Bell" size={20} />
          <span className="fhd-rail-dot"/>
        </button>
        <button className="fhd-rail-it" title="Conversas">
          <PIc name="ChatText" size={20} />
        </button>
        <button className="fhd-rail-fhc" title="Flipper Coins">
          <PIc name="Coins" size={20} />
        </button>
        <button className="fhd-rail-av" title="Henrique Fuhr">HF</button>
      </div>
    </div>
  );
}

function FHDPanel({ activeGroup, activeView, onPickView }) {
  const g = FHD_GROUPS.find((x) => x.key === activeGroup) || FHD_GROUPS[1];
  return (
    <div className="fhd-panel">
      <div className="fhd-panel-h">
        <span className="fhd-panel-t">{g.label}</span>
      </div>
      <nav className="fhd-panel-nav">
        {g.items.map((it) => (
          <button key={it.k}
                  className={`fhd-panel-it ${it.sub ? 'sub' : ''} ${activeView === it.k ? 'is-active' : ''}`}
                  onClick={() => onPickView(it.k)}>
            {it.ic && <span className="fhd-panel-ic"><PIc name={it.ic} size={16}/></span>}
            <span className="fhd-panel-l">{it.l}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}

// ── PageHeader (icon + title + tabs centradas + actions) ────────────────────
function FHDPageHeader({ icon, title, sub, actions, tabs, activeTab, onTabChange }) {
  return (
    <header className={`fhd-ph ${tabs ? 'has-tabs' : ''}`}>
      <div className="fhd-ph-l">
        {icon && <span className="fhd-ph-ic"><PIc name={icon} size={26}/></span>}
        <div className="fhd-ph-tt">
          <h1 className="fhd-ph-t">{title}</h1>
          {sub && <div className="fhd-ph-s">{sub}</div>}
        </div>
      </div>
      {tabs && (
        <nav className="fhd-ph-tabs">
          {tabs.map((t) => (
            <button key={t.id} className={`fhd-ph-tab ${activeTab === t.id ? 'is-on' : ''}`}
                    onClick={() => onTabChange && onTabChange(t.id)}>{t.l}</button>
          ))}
        </nav>
      )}
      {actions && <div className="fhd-ph-r">{actions}</div>}
    </header>
  );
}

// ── KPI ─────────────────────────────────────────────────────────────────────
function FHDKpi({ label, value, sub, accent }) {
  return (
    <div className="fhd-kpi">
      <div className="fhd-kpi-lbl">{label}</div>
      <div className="fhd-kpi-v">{value}</div>
      {sub && <div className={`fhd-kpi-sub ${accent || ''}`}>{sub}</div>}
    </div>
  );
}

// ── Funil (SVG) ─────────────────────────────────────────────────────────────
function FHDFunil() {
  const bars = [
    { lbl: 'Garimpo',    v: 17, c: '#3A82F6' },
    { lbl: 'Análise',    v: 12, c: '#6090F8' },
    { lbl: 'Aquisição',  v: 6,  c: '#E0A828' },
    { lbl: 'Reforma',    v: 4,  c: '#F59E0B' },
    { lbl: 'Comercial',  v: 2,  c: '#7A4FC7' },
    { lbl: 'Fechado',    v: 1,  c: '#12B76A' },
  ];
  const max = 18;
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Funil de Vendas</span></div>
      <div className="fhd-funil">
        {bars.map((b, i) => (
          <div key={i} className="fhd-funil-col">
            <span className="fhd-funil-num">{b.v}</span>
            <div className="fhd-funil-bar" style={{ height: `${(b.v / max) * 100}%`, background: b.c }}/>
            <div className="fhd-funil-lbl">{b.lbl}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FHDDonut() {
  const slices = [
    { lbl: 'Apartamento', v: 56, c: '#3A82F6' },
    { lbl: 'Casa',        v: 22, c: '#7A4FC7' },
    { lbl: 'Cobertura',   v: 14, c: '#E0A828' },
    { lbl: 'Outros',      v: 8,  c: '#475569' },
  ];
  const r = 50, c = 2 * Math.PI * r;
  let acc = 0;
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Por Tipo de Imóvel</span></div>
      <div className="fhd-donut-wrap">
        <svg viewBox="-65 -65 130 130" className="fhd-donut">
          {slices.map((sl, i) => {
            const dash = (sl.v / 100) * c;
            const off = -((acc / 100) * c);
            acc += sl.v;
            return <circle key={i} cx="0" cy="0" r={r} fill="none" stroke={sl.c} strokeWidth="22"
                          strokeDasharray={`${dash} ${c}`} strokeDashoffset={off} transform="rotate(-90)"/>;
          })}
        </svg>
        <div className="fhd-donut-leg">
          {slices.map((sl, i) => (<div key={i}><span className="lg-dot" style={{ background: sl.c }}/>{sl.lbl} <em>· {sl.v}%</em></div>))}
        </div>
      </div>
    </div>
  );
}

function FHDLeiloesEstado() {
  const bars = [
    { lbl: 'SP', v: 412 },
    { lbl: 'RJ', v: 218 },
    { lbl: 'MG', v: 96  },
    { lbl: 'PR', v: 72  },
    { lbl: 'RS', v: 49  },
  ];
  const max = 450;
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Leilões por Estado</span></div>
      <div className="fhd-hbar">
        {bars.map((b, i) => (
          <div key={i} className="fhd-hbar-row">
            <span className="fhd-hbar-lbl">{b.lbl}</span>
            <div className="fhd-hbar-track"><div className="fhd-hbar-fill" style={{ width: `${(b.v / max) * 100}%` }}/></div>
            <span className="fhd-hbar-num">{b.v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function FHDProximos() {
  const items = [
    { titulo: 'Apto Vila Mariana · 1ª praça',  prazo: 'Ter · 14h', warn: true },
    { titulo: 'Casa Tatuapé · 2ª praça',       prazo: 'Qui · 10h' },
    { titulo: 'Cobertura Botafogo · única',    prazo: 'Sex · 16h' },
  ];
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Próximos Leilões</span></div>
      <ul className="fhd-todo">
        {items.map((it, i) => (
          <li key={i}>
            <span className="fhd-todo-pin"><PIc name="Star" size={11}/></span>
            <span className="fhd-todo-t">{it.titulo}</span>
            <span className={`t-pill ${it.warn ? 'warn' : ''}`}>{it.prazo}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function FHDTarefasPanel() {
  return (
    <div className="fhd-card">
      <div className="fhd-card-h">
        <span className="fhd-card-t">Tarefas</span>
        <div className="fhd-tabs">
          <button className="fhd-tab is-on">Minhas</button>
          <button className="fhd-tab">Todas</button>
        </div>
      </div>
      <ul className="fhd-todo">
        {FHD_TAREFAS.slice(0, 3).map((t, i) => (
          <li key={i} className={t.status === 'feito' ? 'done' : ''}>
            <span className="fhd-todo-check"><PIc name="Check" size={11}/></span>
            <span className="fhd-todo-t">{t.titulo}</span>
            <span className="t-pill">{t.prazo}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ── Tela: Início ────────────────────────────────────────────────────────────
function FHDHome({ onOpen }) {
  return (
    <>
      <FHDPageHeader
        icon="House"
        title={`${fhdGreeting()}, Henrique`}
        sub={fhdToday()}
        actions={<>
          <button className="fhd-btn-ghost"><PIc name="Funnel" size={14}/></button>
          <button className="fhd-btn-primary"><PIc name="Plus" size={13}/> Novo imóvel</button>
        </>}
      />
      <div className="fhd-grid-kpi">
        <FHDKpi label="Leads Ativos"          value="12"      sub="+3 esta semana" accent="pos" />
        <FHDKpi label="Valor em Pipeline"     value="R$ 4,2M" sub="6 operações ativas" />
        <FHDKpi label="Total de Leilões"      value="847"     sub="acompanhados" />
        <FHDKpi label="Margem Real (12m)"     value="+18,4%"  sub="trailing 12 meses" accent="pos" />
      </div>
      <div className="fhd-grid-3">
        <FHDFunil />
        <FHDDonut />
        <FHDLeiloesEstado />
      </div>
      <div className="fhd-grid-2">
        <FHDTarefasPanel />
        <FHDProximos />
      </div>
    </>
  );
}

// ── Card do imóvel (Cards view) ─────────────────────────────────────────────
function FHDPropertyCard({ it, onOpen }) {
  return (
    <button className="fhd-pcard" onClick={() => onOpen(it.id)}>
      <div className="fhd-pcard-img">
        <PIc name="House" size={42}/>
        <span className={`fhd-pill st-${FHD_STATUS_KLASS[it.status]} fhd-pcard-st`}>{FHD_STATUS_LABEL[it.status]}</span>
      </div>
      <div className="fhd-pcard-body">
        <div className="fhd-pcard-id">{it.n} · {it.tipo}</div>
        <div className="fhd-pcard-t">{it.titulo}</div>
        <div className="fhd-pcard-loc">{it.bairro} · {it.cidade}/{it.uf}</div>
        <div className="fhd-pcard-specs">
          <span><PIc name="Ruler" size={12}/>{it.areaPriv}m²</span>
          <span><PIc name="Bed" size={12}/>{it.quartos}</span>
          <span><PIc name="Bath" size={12}/>{it.banheiros}</span>
          <span><PIc name="Car" size={12}/>{it.vagas}</span>
        </div>
        <div className="fhd-pcard-flows">
          {FHD_FLOWS.slice(0, 5).map((f, i) => (
            <span key={i} className={`fhd-flow-pill flow-${f.s}`}>{f.k}</span>
          ))}
          <span className="fhd-flow-more">+{FHD_FLOWS.length - 5}</span>
        </div>
        <div className="fhd-pcard-foot">
          <span className="fhd-pcard-progress">{it.flowsDone}/{it.flowsTotal} fluxos</span>
          <span className="fhd-pcard-margin pos">+{it.margem}%</span>
          <span className="fhd-pcard-av" style={{ background: it.responsavel.cor }}>{it.responsavel.iniciais}</span>
        </div>
      </div>
    </button>
  );
}

// ── Tela: Carteira / Imóveis ────────────────────────────────────────────────
function FHDImoveis({ onOpen }) {
  const [filter, setFilter] = useState('Abertos');
  const [view, setView] = useState('cards');
  const [pageTab, setPageTab] = useState('geral');
  const [search, setSearch] = useState('');
  const tabs = ['Abertos', 'Pendente', 'Em andamento', 'Pausado', 'Concluído', 'Todos'];
  const items = FHD_IMOVEIS.filter((it) => {
    if (filter === 'Todos') return true;
    if (filter === 'Abertos') return ['PENDENTE','EM_ANDAMENTO','PAUSADO'].includes(it.status);
    return FHD_STATUS_LABEL[it.status] === filter;
  });
  return (
    <>
      <FHDPageHeader
        icon="House"
        title="Carteira Imóveis"
        tabs={[
          { id: 'geral',     l: 'Geral' },
          { id: 'dashboard', l: 'Dashboard' },
        ]}
        activeTab={pageTab}
        onTabChange={setPageTab}
      />
      <div className="fhd-toolbar">
        <div className="fhd-searchbar">
          <PIc name="MagnifyingGlass" size={20}/>
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Buscar por nome, cidade ou responsável..."/>
        </div>
        <button className="fhd-icon-btn-sq" title="Filtros"><PIc name="Sliders" size={18}/></button>
        <button className="fhd-btn-primary-sq" title="Novo imóvel"><PIc name="Plus" size={20}/></button>
      </div>
      <div className="fhd-pill-tabs">
        {tabs.map((t) => (
          <button key={t} className={`fhd-pill-tab ${filter === t ? 'is-on' : ''}`} onClick={() => setFilter(t)}>{t}</button>
        ))}
      </div>
      <div className="fhd-toolbar2">
        <div className="fhd-view-toggle">
          <button className={view === 'cards' ? 'is-on' : ''} onClick={() => setView('cards')} title="Cards"><PIc name="Squares" size={16}/></button>
          <button className={view === 'lista' ? 'is-on' : ''} onClick={() => setView('lista')} title="Lista"><PIc name="List" size={16}/></button>
        </div>
        <span className="fhd-counter">{items.length} {items.length === 1 ? 'imóvel' : 'imóveis'}</span>
      </div>
      {view === 'cards' ? (
        <div className="fhd-pcards">
          {items.map((it) => <FHDPropertyCard key={it.id} it={it} onOpen={onOpen}/>)}
        </div>
      ) : (
        <div className="fhd-table">
          <div className="fhd-table-h">
            <div>#</div><div>Imóvel</div><div>Status</div><div>Localização</div><div>Resp.</div><div></div>
          </div>
          {items.map((it) => (
            <button key={it.id} className="fhd-table-r" onClick={() => onOpen(it.id)}>
              <div className="td-id">{it.n}</div>
              <div className="td-nm">
                <div className="fhd-pcard-tic"><PIc name="House" size={16}/></div>
                <div>
                  <div className="fhd-pcard-t">{it.titulo}</div>
                  <div className="fhd-pcard-loc">{it.tipo} · {it.areaPriv}m² · {it.quartos}q/{it.banheiros}b</div>
                </div>
              </div>
              <div><span className={`fhd-pill st-${FHD_STATUS_KLASS[it.status]}`}>{FHD_STATUS_LABEL[it.status]}</span></div>
              <div className="td-lc">{it.bairro} · {it.cidade}/{it.uf}</div>
              <div><span className="fhd-pcard-av sm" style={{ background: it.responsavel.cor }}>{it.responsavel.iniciais}</span></div>
              <div className="td-cv"><PIc name="Caret" size={12}/></div>
            </button>
          ))}
        </div>
      )}
    </>
  );
}

// ── Drawer slide-up (de baixo pra cima) ─────────────────────────────────────
const FHD_TABS = ['Geral','Imóvel','Fluxos','Tarefas','Financeiro','Participantes','Reforma','Comercial','Histórico'];

function FHDStepsBar({ status }) {
  const steps = ['Pendente','Em Andamento','Concluído'];
  const cur = status === 'CONCLUIDO' ? 2 : status === 'PENDENTE' ? 0 : 1;
  return (
    <div className="fhd-steps">
      {steps.map((s, i) => (
        <button key={s} className={`fhd-step ${i < cur ? 'done' : ''} ${i === cur ? 'cur' : ''}`}>
          <span className="fhd-step-dot"/>
          <span className="fhd-step-lbl">{s}</span>
        </button>
      ))}
    </div>
  );
}

function FHDTabGeral({ it }) {
  return (
    <>
      <FHDStepsBar status={it.status}/>
      <div className="fhd-det-grid">
        <div className="fhd-card">
          <div className="fhd-card-h"><span className="fhd-card-t">Resumo da operação</span></div>
          <div className="fhd-stat-row">
            <div><div className="fhd-stat-l">Preço alvo</div><div className="fhd-stat-v">R$ {(it.precoAlvo/1000).toFixed(0)}K</div></div>
            <div><div className="fhd-stat-l">Reforma</div><div className="fhd-stat-v">R$ {(it.orcamento/1000).toFixed(0)}K</div></div>
            <div><div className="fhd-stat-l">ARV</div><div className="fhd-stat-v pos">R$ {(it.arv/1000).toFixed(0)}K</div></div>
            <div><div className="fhd-stat-l">Margem proj.</div><div className="fhd-stat-v pos">+{it.margem}%</div></div>
          </div>
          <div className="fhd-pbar"><div className="fhd-pbar-fill" style={{ width: '62%' }}/></div>
          <div className="fhd-pbar-meta"><span>Aportado vs alvo</span><span>62% de R$ {(it.precoAlvo/1000).toFixed(0)}K</span></div>
        </div>
        <div className="fhd-card">
          <div className="fhd-card-h"><span className="fhd-card-t">Fluxos em curso</span></div>
          <ul className="fhd-tline">
            {FHD_FLUXOS_FULL.slice(0, 5).map((f, i) => (
              <li key={i} className={f.status === 'Concluído' ? 'done' : f.status === 'Em andamento' ? 'cur' : ''}>
                <span/>
                <div><b>{f.tipo}</b><em>{f.status} · {f.data}</em></div>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div className="fhd-det-grid">
        <div className="fhd-card">
          <div className="fhd-card-h"><span className="fhd-card-t">Próximas tarefas</span></div>
          <ul className="fhd-todo">
            {FHD_TAREFAS.filter((t) => t.status === 'aberto').map((t, i) => (
              <li key={i}><span className="fhd-todo-check"><PIc name="Check" size={11}/></span><span className="fhd-todo-t">{t.titulo}</span><span className="t-pill">{t.prazo}</span></li>
            ))}
          </ul>
        </div>
        <div className="fhd-card">
          <div className="fhd-card-h"><span className="fhd-card-t">Decisões pendentes</span></div>
          <ul className="fhd-todo">
            <li><span className="fhd-todo-warn">!</span><span className="fhd-todo-t">Vender ou alugar após reforma?</span><span className="t-pill warn">Decisão</span></li>
            <li><span className="fhd-todo-warn">!</span><span className="fhd-todo-t">Acabamento do banheiro suíte</span><span className="t-pill warn">Decisão</span></li>
          </ul>
        </div>
      </div>
    </>
  );
}

function FHDTabImovel({ it }) {
  const rows = [
    ['Tipo',                 it.tipo],
    ['Endereço',             it.titulo],
    ['Bairro',               it.bairro],
    ['Cidade · UF',          `${it.cidade} / ${it.uf}`],
    ['Área privativa',       `${it.areaPriv} m²`],
    ['Quartos',              `${it.quartos} (${it.suites} suíte${it.suites > 1 ? 's' : ''})`],
    ['Banheiros',            it.banheiros],
    ['Vagas',                it.vagas],
    ['Andar',                it.andar ?? '—'],
    ['Ano de construção',    it.anoConstr],
    ['Condomínio mensal',    it.condominio ? `R$ ${it.condominio.toLocaleString('pt-BR')}` : 'Não há'],
    ['IPTU anual',           `R$ ${it.iptu.toLocaleString('pt-BR')}`],
    ['Estado de conservação','Bom'],
    ['Ocupação',             'Desocupado'],
    ['Situação documental',  'Regular · sem restrições'],
  ];
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Especificações do imóvel</span></div>
      <dl className="fhd-spec">
        {rows.map(([k, v], i) => (<div key={i}><dt>{k}</dt><dd>{v}</dd></div>))}
      </dl>
    </div>
  );
}

function FHDTabFluxos() {
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Fluxos da operação</span><button className="fhd-btn-ghost sm"><PIc name="Plus" size={11}/> Novo</button></div>
      <div className="fhd-flow-list">
        {FHD_FLUXOS_FULL.map((f, i) => (
          <div key={i} className="fhd-flow-row">
            <div className="fhd-flow-l">
              <span className="fhd-flow-ic"><PIc name="GraphFlow" size={14}/></span>
              <span className="fhd-flow-tipo">{f.tipo}</span>
            </div>
            <span className={`fhd-pill st-${f.status === 'Concluído' ? 'concluido' : f.status === 'Em andamento' ? 'em-andamento' : 'pendente'}`}>{f.status}</span>
            <span className="fhd-flow-data">{f.data}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function FHDTabTarefas() {
  return (
    <div className="fhd-card">
      <div className="fhd-card-h">
        <span className="fhd-card-t">Tarefas vinculadas</span>
        <div className="fhd-tabs">
          <button className="fhd-tab is-on">Abertas</button>
          <button className="fhd-tab">Concluídas</button>
        </div>
        <button className="fhd-btn-ghost sm"><PIc name="Plus" size={11}/> Tarefa</button>
      </div>
      <ul className="fhd-todo">
        {FHD_TAREFAS.map((t, i) => (
          <li key={i} className={t.status === 'feito' ? 'done' : ''}>
            <span className="fhd-todo-check"><PIc name="Check" size={11}/></span>
            <span className="fhd-todo-t">{t.titulo}</span>
            <span className="t-pill">{t.prazo}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function FHDTabFinanceiro({ it }) {
  const [sub, setSub] = useState('Extrato');
  return (
    <>
      <div className="fhd-stat-row lg">
        <div><div className="fhd-stat-l">Custo aquisição</div><div className="fhd-stat-v">R$ {(it.precoAlvo/1000).toFixed(0)}K</div></div>
        <div><div className="fhd-stat-l">Reforma orçada</div><div className="fhd-stat-v">R$ {(it.orcamento/1000).toFixed(0)}K</div></div>
        <div><div className="fhd-stat-l">ARV alvo</div><div className="fhd-stat-v">R$ {(it.arv/1000).toFixed(0)}K</div></div>
        <div><div className="fhd-stat-l">Margem proj.</div><div className="fhd-stat-v pos">+{it.margem}%</div></div>
      </div>
      <div className="fhd-tabs row">
        {['Extrato','Fluxo de Caixa','DRE'].map((t) => (
          <button key={t} className={`fhd-tab ${sub === t ? 'is-on' : ''}`} onClick={() => setSub(t)}>{t}</button>
        ))}
      </div>
      {sub === 'Extrato' && (
        <div className="fhd-card">
          <div className="fhd-card-h"><span className="fhd-card-t">Movimentações da operação</span></div>
          <ul className="fhd-fin">
            <li><span className="fhd-fin-d">12/abr</span><span className="fhd-fin-c">Reforma</span><span className="fhd-fin-t">Medição #3 · Vértice</span><span className="fhd-fin-v neg">−R$ 38.500</span></li>
            <li><span className="fhd-fin-d">08/abr</span><span className="fhd-fin-c">Custo capital</span><span className="fhd-fin-t">Juros mês 4</span><span className="fhd-fin-v neg">−R$ 4.200</span></li>
            <li><span className="fhd-fin-d">05/abr</span><span className="fhd-fin-c">Aporte</span><span className="fhd-fin-t">Cotista GM</span><span className="fhd-fin-v pos">+R$ 80.000</span></li>
            <li><span className="fhd-fin-d">02/abr</span><span className="fhd-fin-c">Condomínio</span><span className="fhd-fin-t">Abril</span><span className="fhd-fin-v neg">−R$ 1.850</span></li>
            <li><span className="fhd-fin-d">28/mar</span><span className="fhd-fin-c">ITBI</span><span className="fhd-fin-t">Recolhimento + cartório</span><span className="fhd-fin-v neg">−R$ 38.000</span></li>
            <li><span className="fhd-fin-d">15/mar</span><span className="fhd-fin-c">Aquisição</span><span className="fhd-fin-t">Sinal 30%</span><span className="fhd-fin-v neg">−R$ 294.000</span></li>
          </ul>
        </div>
      )}
      {sub === 'Fluxo de Caixa' && (
        <div className="fhd-card"><div className="fhd-card-h"><span className="fhd-card-t">Fluxo de caixa por período</span></div><div className="fhd-empty-t">— gráfico de barras receita/despesa por mês —</div></div>
      )}
      {sub === 'DRE' && (
        <div className="fhd-card"><div className="fhd-card-h"><span className="fhd-card-t">Demonstrativo do resultado</span></div><div className="fhd-empty-t">— DRE consolidado da operação —</div></div>
      )}
    </>
  );
}

function FHDTabParticipantes() {
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Pessoas e empresas envolvidas</span><button className="fhd-btn-ghost sm"><PIc name="Plus" size={11}/> Adicionar</button></div>
      <div className="fhd-people">
        {FHD_PARTICIPANTES.map((p, i) => (
          <div key={i} className="fhd-person">
            <span className="fhd-person-av" style={{ background: p.cor }}>{p.iniciais}</span>
            <div><div className="fhd-person-n">{p.nome}</div><div className="fhd-person-r">{p.papel}</div></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FHDTabReforma({ it }) {
  return (
    <>
      <div className="fhd-stat-row">
        <div><div className="fhd-stat-l">Orçamento total</div><div className="fhd-stat-v">R$ {(it.orcamento/1000).toFixed(0)}K</div></div>
        <div><div className="fhd-stat-l">Executado</div><div className="fhd-stat-v">R$ 92K</div></div>
        <div><div className="fhd-stat-l">Andamento</div><div className="fhd-stat-v">62%</div></div>
      </div>
      <div className="fhd-card">
        <div className="fhd-card-h"><span className="fhd-card-t">Cronograma da obra</span></div>
        <ul className="fhd-tline">
          <li className="done"><span/><div><b>Demolição & alvenaria</b><em>concluído · fev/2026</em></div></li>
          <li className="done"><span/><div><b>Hidráulica & elétrica</b><em>concluído · mar/2026</em></div></li>
          <li className="cur"><span/><div><b>Acabamentos (pisos, pintura)</b><em>em andamento · 62%</em></div></li>
          <li><span/><div><b>Marcenaria sob medida</b><em>previsto · mai/2026</em></div></li>
          <li><span/><div><b>Vistoria final & limpeza</b><em>previsto · jul/2026</em></div></li>
        </ul>
      </div>
    </>
  );
}

function FHDTabComercial({ it }) {
  return (
    <>
      <div className="fhd-stat-row">
        <div><div className="fhd-stat-l">Anúncio (preço pedido)</div><div className="fhd-stat-v">R$ {(it.precoAnuncio/1000).toFixed(0)}K</div></div>
        <div><div className="fhd-stat-l">Visitas agendadas</div><div className="fhd-stat-v">7</div></div>
        <div><div className="fhd-stat-l">Propostas ativas</div><div className="fhd-stat-v">2</div></div>
      </div>
      <div className="fhd-card">
        <div className="fhd-card-h"><span className="fhd-card-t">Propostas em negociação</span></div>
        <ul className="fhd-todo">
          <li><span className="fhd-todo-t">Carlos Menezes — via Janelas SP</span><span className="fhd-fin-v">R$ 1,15M</span><span className="t-pill warn">Aguardando</span></li>
          <li><span className="fhd-todo-t">Luiza Andrade — direto</span><span className="fhd-fin-v">R$ 1,08M</span><span className="t-pill">Contraproposta</span></li>
        </ul>
      </div>
    </>
  );
}

function FHDTabHistorico() {
  return (
    <div className="fhd-card">
      <div className="fhd-card-h"><span className="fhd-card-t">Atividade da operação</span></div>
      <ul className="fhd-hist">
        {FHD_HISTORICO.map((h, i) => (
          <li key={i}>
            <span className="fhd-hist-av">{h.quem}</span>
            <div className="fhd-hist-body">
              <div className="fhd-hist-acao">
                <strong>{h.quem}</strong> {h.acao}
                {h.meta && <span className="fhd-hist-meta">· {h.meta}</span>}
              </div>
              <div className="fhd-hist-quando">{h.quando}</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function FHDDrawer({ id, onClose }) {
  const it = FHD_IMOVEIS.find((x) => x.id === id) || FHD_IMOVEIS[0];
  const [tab, setTab] = useState('Geral');
  return (
    <div className="fhd-drawer-overlay" onClick={onClose}>
      <div className="fhd-drawer" onClick={(e) => e.stopPropagation()}>
        <div className="fhd-drawer-h">
          <div className="fhd-drawer-hl">
            <span className="fhd-drawer-ic"><PIc name="House" size={20}/></span>
            <div>
              <div className="fhd-drawer-id">{it.n} · {it.tipo}</div>
              <h2 className="fhd-drawer-t">{it.titulo}</h2>
              <div className="fhd-drawer-s">{it.bairro} · {it.cidade}/{it.uf} · {it.areaPriv}m² · {it.quartos}q/{it.banheiros}b</div>
            </div>
          </div>
          <div className="fhd-drawer-hr">
            <span className={`fhd-pill st-${FHD_STATUS_KLASS[it.status]}`}>{FHD_STATUS_LABEL[it.status]}</span>
            <button className="fhd-icon-btn" title="Configurações"><PIc name="Gear" size={14}/></button>
            <button className="fhd-icon-btn" onClick={onClose} title="Fechar"><PIc name="X" size={14}/></button>
          </div>
        </div>
        <div className="fhd-drawer-tabs">
          {FHD_TABS.map((t) => (
            <button key={t} className={`fhd-tab pill ${tab === t ? 'is-on' : ''}`} onClick={() => setTab(t)}>{t}</button>
          ))}
        </div>
        <div className="fhd-drawer-body">
          {tab === 'Geral'         && <FHDTabGeral it={it}/>}
          {tab === 'Imóvel'        && <FHDTabImovel it={it}/>}
          {tab === 'Fluxos'        && <FHDTabFluxos/>}
          {tab === 'Tarefas'       && <FHDTabTarefas/>}
          {tab === 'Financeiro'    && <FHDTabFinanceiro it={it}/>}
          {tab === 'Participantes' && <FHDTabParticipantes/>}
          {tab === 'Reforma'       && <FHDTabReforma it={it}/>}
          {tab === 'Comercial'     && <FHDTabComercial it={it}/>}
          {tab === 'Histórico'     && <FHDTabHistorico/>}
        </div>
      </div>
    </div>
  );
}

// ── Placeholders ────────────────────────────────────────────────────────────
const FHD_PLACEHOLDERS = {
  garimpo:  { icon: 'PickAxe',     title: 'Garimpo',      sub: 'Oportunidades em leilões e mercado direto' },
  leads:    { icon: 'Target',      title: 'Leads',        sub: 'Pipeline de prospecção, etapas e probabilidade' },
  agente:   { icon: 'Sparkle',     title: 'Agente IA',    sub: 'Encontra oportunidades enquanto você dorme' },
  fluxos:   { icon: 'GraphFlow',   title: 'Fluxos',       sub: 'Aquisição, regularização, dívidas, titularidade, venda' },
  'fluxos-aq': { icon: 'GraphFlow', title: 'Fluxos · Aquisição', sub: 'ITBI, escritura, registro, financiamento' },
  'fluxos-rg': { icon: 'GraphFlow', title: 'Fluxos · Regularização', sub: 'Baixa de gravame, alteração titularidade IPTU & condomínio' },
  'fluxos-vd': { icon: 'GraphFlow', title: 'Fluxos · Venda', sub: 'Anúncio, agenciamento, IPCV, transferência' },
  obras:    { icon: 'HardHat',     title: 'Obras',        sub: 'Cronograma, orçamento, prestadores, evidências' },
  plantas:  { icon: 'FileText',    title: 'Plantas Digitais', sub: 'Editor 3D + LiDAR para layout e mobiliário' },
  estoque:  { icon: 'Buildings',   title: 'Estoque',      sub: 'Materiais, reserva por obra, compras pendentes' },
  compras:  { icon: 'Receipt',     title: 'Compras',      sub: 'Pedidos, NFs, recebimentos, conciliação' },
  'fin-dash': { icon: 'Coins',     title: 'Financeiro · Dashboard', sub: 'Visão consolidada da operação' },
  'fin-mov':  { icon: 'Activity', title: 'Movimentações', sub: 'Extrato consolidado por imóvel ou geral' },
  'fin-pc':   { icon: 'List',     title: 'Plano de Contas', sub: 'Categorias e subcategorias da operação' },
  'fin-conc': { icon: 'Check',    title: 'Conciliação',   sub: 'Bancos, cartões e movimentações automáticas' },
  'fin-dre':  { icon: 'Receipt',  title: 'DRE',           sub: 'Demonstrativo do resultado por imóvel ou consolidado' },
  tarefas:  { icon: 'CheckSquare',title: 'Tarefas',      sub: 'Tudo que precisa de você, organizado' },
  cal:      { icon: 'Calendar',   title: 'Calendário',   sub: 'Visitas, leilões, prazos, medições' },
  docs:     { icon: 'FileText',   title: 'Documentos',   sub: 'Matrículas, escrituras, contratos, NFs' },
  drive:    { icon: 'FileText',   title: 'Drive',        sub: 'Arquivos da operação, sincronizados' },
  contatos: { icon: 'ContactRound',title: 'Contatos',    sub: 'Pessoas em todas as operações' },
  empresas: { icon: 'Building2',  title: 'Empresas',     sub: 'Empreiteiras, imobiliárias, parceiros' },
  email:    { icon: 'PaperPlane', title: 'Email',        sub: 'Inbox unificada, vinculada aos imóveis' },
  chat:     { icon: 'Chats',      title: 'Conversas',    sub: 'WhatsApp, Telegram e chat interno' },
  meta:     { icon: 'Megaphone',  title: 'Meta Ads',     sub: 'Campanhas, leads e anúncios' },
  portais:  { icon: 'Megaphone',  title: 'Portais',      sub: 'OLX, Zap, Viva Real — anúncios sincronizados' },
  perfil:   { icon: 'Gear',       title: 'Meu Perfil',   sub: 'Conta, preferências, segurança' },
  org:      { icon: 'Gear',       title: 'Organização',  sub: 'Workspace, faturamento, integrações' },
  usuarios: { icon: 'ContactRound',title: 'Usuários',    sub: 'Convites, permissões, auditoria' },
};

function FHDPlaceholder({ icon, title, sub }) {
  return (
    <>
      <FHDPageHeader icon={icon} title={title} sub={sub} actions={<button className="fhd-btn-primary"><PIc name="Plus" size={13}/> Novo</button>}/>
      <div className="fhd-placeholder">
        <div className="fhd-placeholder-ic"><PIc name={icon} size={32}/></div>
        <div className="fhd-placeholder-t">Esta seção está disponível na plataforma</div>
        <div className="fhd-placeholder-s">Volte para Início ou abra a Carteira de Imóveis pra explorar a demo.</div>
      </div>
    </>
  );
}

// ── Tela: Garimpo Leilões (réplica da app real) ─────────────────────────────
// Imagens via Unsplash (free, sem API key) — fotos de imóveis/terrenos brasileiros
const U = (id) => `https://images.unsplash.com/photo-${id}?w=480&h=320&fit=crop&q=75&auto=format`;
const FHD_LEILOES = [
  { id: 'foz-1889',     cidade: 'Foz do Iguaçu', uf: 'PR', tipo: 'Terreno',     desc: 'Fração Ideal de 10% do Lote Com Área de 650...', end: 'Rua Aristides Araújo, 1889',     area: 650,    discount: null, av: null,         leilao1: { date: '29/04/2026 às 14:30', price: 33000,    past: true  }, leilao2: null,                              incl: '30/04/2026', img: U('1500382017468-9049fed747ef') },
  { id: 'cwb-1395',     cidade: 'Curitiba',      uf: 'PR', tipo: 'Apartamento', desc: 'Apto 54m² no Juvevê | Ed. Mont Blanc | Eixo ...', end: 'Avenida João Gualberto, 1395', area: 38,     discount: 39,   av: 180000,       leilao1: { date: '29/04/2026 às 13:56', price: 110000,   past: true  }, leilao2: null,                              incl: '30/04/2026', img: U('1545324418-cc1a3fa10c00') },
  { id: 'pru-cb',       cidade: 'Prudentópolis', uf: 'PR', tipo: 'Terreno',     desc: 'Um Terreno Rural, Situado em "cachoeira Bran...', end: '',                              area: null,   discount: null, av: null,         leilao1: { date: '28/04/2026 às 07:00', price: 391651.87,past: true  }, leilao2: null,                              incl: '30/04/2026', img: U('1500382088902-d04265d4c7c1') },
  { id: 'sa-marumbi',   cidade: 'Santo André',   uf: 'SP', tipo: 'Sobrados',    desc: 'Sobrado - Jardim do Mirante - A.t. 96,83m² - ...', end: 'Rua Marumbi',                  area: 198,    discount: 37,   av: 334000,       leilao1: { date: '28/04/2026 às 07:00', price: 211000,   past: true  }, leilao2: null,                              incl: '30/04/2026', img: U('1564013799919-ab600027ffc6') },
  { id: 'cdh-maggioni', cidade: 'Cordilheira Alta', uf: 'SC', tipo: 'Terreno',  desc: 'Lote, 337.06 M2, Cordilheira Alta / Sc',          end: 'Rua Carlos Maggioni',         area: 337,    discount: null, av: null,         leilao1: { date: '04/05/2026 às 07:30', price: 75838.50, past: false }, leilao2: null,                              incl: '30/04/2026', img: U('1574279606130-09958dc756f7') },
  { id: 'jua-rrod',     cidade: 'Juara',         uf: 'MT', tipo: 'Casa',        desc: 'Casa, 300.0 M2, Juara / Mt',                      end: 'Rua Ricardo Souza Rodrigues, 27', area: 153, beds: 4, discount: null, av: null, leilao1: { date: '04/05/2026 às 07:30', price: 539910,    past: false }, leilao2: null,                              incl: '30/04/2026', img: U('1568605114967-8130f3a36994') },
  { id: 'cdh-frei',     cidade: 'Cordilheira Alta', uf: 'SC', tipo: 'Terreno',  desc: 'Lote, 300.0 M2, Cordilheira Alta / Sc',           end: 'Rua Frei Bruno',              area: 300,    discount: null, av: null,         leilao1: { date: '04/05/2026 às 07:30', price: 67500,    past: false }, leilao2: null,                              incl: '30/04/2026', img: U('1542621334-a254cf47733d') },
  { id: 'jac-jose',     cidade: 'Jacareí',       uf: 'SP', tipo: 'Casa',        desc: 'Casa, 137.5 M2, Jacareí / Sp',                    end: 'Avenida José Geraldo de Melo, 38', area: 51, beds: 1, discount: null, av: null, leilao1: { date: '04/05/2026 às 07:30', price: 200000,   past: false }, leilao2: null,                              incl: '30/04/2026', img: U('1556228720-195a672e8a03') },
  { id: 'ita-se270',    cidade: "Itaporanga d'Ajuda", uf: 'SE', tipo: 'Terreno', desc: 'Lote, 65545.0 M2, Itaporanga D\'ajuda / Se',     end: 'Rodovia Se 270, 270',         area: 65545,  discount: null, av: null,         leilao1: { date: '04/05/2026 às 07:30', price: 2295000,  past: false }, leilao2: { date: '28/05/2026 às 07:30' },   incl: '30/04/2026', img: U('1582979512210-99b6a53386f9') },
  { id: 'ala-saoluiz',  cidade: 'Alagoinhas',    uf: 'BA', tipo: 'Terreno',     desc: 'Lote, 4004.15 M2, Alagoinhas / Ba',               end: 'Rua São Luiz',                 area: 4004,   discount: null, av: null,         leilao1: { date: '04/05/2026 às 07:30', price: 510000,   past: false }, leilao2: null,                              incl: '30/04/2026', img: U('1500382017468-9049fed747ef') },
];

const FHD_THUMB_URLS = {
  apt:   U('1545324418-cc1a3fa10c00'),
  house: U('1568605114967-8130f3a36994'),
  land:  U('1500382017468-9049fed747ef'),
};
function fhdBRL(v) {
  if (v == null) return '';
  return 'R$ ' + v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function FHDLeilaoCard({ it }) {
  return (
    <article className="fhl-card">
      <div className="fhl-img-wrap">
        <img src={it.img} alt={`${it.cidade} - ${it.uf}`} className="fhl-img" loading="lazy"
             onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
        <a className="fhl-img-badge" onClick={(e) => e.preventDefault()}>
          Leilão SFI <PIc name="ArrowSquareOut" size={11}/>
        </a>
        <div className="fhl-img-bottom">
          <span className="fhl-img-type">{it.tipo}</span>
          <div className="fhl-img-actions">
            <button title="Criar lead"><PIc name="Plus" size={13}/></button>
            <button title="Favoritar"><PIc name="Heart" size={13}/></button>
            <button title="Enviar"><PIc name="PaperPlaneTilt" size={13}/></button>
            <button title="Ocultar"><PIc name="EyeSlash" size={13}/></button>
            <button title="Descartar"><PIc name="Trash" size={13}/></button>
          </div>
        </div>
      </div>
      <div className="fhl-body">
        <div className="fhl-t-row">
          <span className="fhl-t">{it.cidade} - {it.uf}</span>
          {it.discount && <span className="fhl-disc">{it.discount}%</span>}
        </div>
        <div className="fhl-desc">{it.desc}</div>
        {it.end && <div className="fhl-end">{it.end}</div>}
        {(it.area != null || it.beds != null) && (
          <div className="fhl-specs">
            {it.area != null && <span><PIc name="Ruler" size={12}/> {it.area.toLocaleString('pt-BR')}m²</span>}
            {it.beds != null && <span><PIc name="Bed" size={12}/> {it.beds}</span>}
          </div>
        )}
      </div>
      <div className="fhl-prices">
        {it.av != null && (
          <div className="fhl-price-row">
            <span className="fhl-price-lbl">Avaliação</span>
            <span className="fhl-price-v">{fhdBRL(it.av)}</span>
          </div>
        )}
        {it.leilao1 && (
          <div className={`fhl-price-row ${it.leilao1.past ? 'past' : ''}`}>
            <div className="fhl-price-lbl-block">
              <div className="fhl-price-lbl">1º Leilão</div>
              <div className="fhl-price-date">{it.leilao1.date}</div>
            </div>
            <span className="fhl-price-v">{fhdBRL(it.leilao1.price)}</span>
          </div>
        )}
      </div>
      <div className="fhl-foot">Incluído em {it.incl}</div>
    </article>
  );
}

function FHDPaginatedTabs({ tabs, active, onChange }) {
  return (
    <nav className="fhd-ph-tabs">
      {tabs.map((t) => (
        <button key={t.id} className={`fhd-ph-tab ${active === t.id ? 'is-on' : ''}`}
                onClick={() => onChange && onChange(t.id)}>{t.l}</button>
      ))}
    </nav>
  );
}

function FHDGarimpoLeiloes() {
  const [tab, setTab] = useState('pesquisa');
  const [search, setSearch] = useState('');
  return (
    <>
      <FHDPageHeader
        icon="Gavel"
        title={<span className="fhl-title-row">Garimpo Leilões <PIc name="Caret" size={14}/></span>}
        tabs={[
          { id: 'pesquisa',   l: 'Pesquisa' },
          { id: 'dashboard',  l: 'Dashboard' },
          { id: 'alertas',    l: 'Alertas' },
          { id: 'leiloeiros', l: 'Leiloeiros' },
        ]}
        activeTab={tab}
        onTabChange={setTab}
        actions={<button className="fhd-icon-btn-sq" title="Buscar"><PIc name="MagnifyingGlass" size={18}/></button>}
      />
      <div className="fhd-toolbar">
        <div className="fhd-searchbar">
          <PIc name="MagnifyingGlass" size={20}/>
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Filtro e pesquisa"/>
          <PIc name="Info" size={18}/>
        </div>
        <button className="fhd-icon-btn-sq fhd-filter-on" title="Filtros"><PIc name="Faders" size={18}/></button>
      </div>
      <div className="fhd-toolbar2">
        <div className="fhd-toolbar2-l">
          <button className="fhd-chip-btn"><PIc name="SquaresFour" size={14}/> Cards</button>
          <button className="fhd-chip-btn"><PIc name="CalendarBlank" size={13}/> Data Inclusão ↓</button>
        </div>
        <span className="fhd-counter-pill">{FHD_LEILOES.length * 3375} <span>imóveis</span></span>
      </div>
      <div className="fhl-grid">
        {FHD_LEILOES.map((it) => <FHDLeilaoCard key={it.id} it={it}/>)}
      </div>
    </>
  );
}

// ── Tela: Leads Leilões (Kanban) ────────────────────────────────────────────
const FHD_LEADS_COLS = [
  { id: 'pendente',    label: 'Pendente',          color: '#F59E0B', tint: 'warn',    count: 35 },
  { id: 'analise',     label: 'Em Análise',        color: '#06B6D4', tint: 'cyan',    count: 0  },
  { id: 'aguardando',  label: 'Aguardando Leilão', color: '#10B981', tint: 'success', count: 3  },
];
const FHD_LEADS = {
  pendente: [
    { id: '#183', nome: 'GARTEN RESIDENCE',     status: { kind: 'warn', icon: 'Hourglass', text: '5d p/ 1º leilão' }, leiloeiro: 'Anderson Lopes de Paula',     atualizado: '16/04/2026, 17:15', resp: { iniciais: 'HF', nome: 'Henrique Führ', cor: '#3A82F6' }, img: 'apt' },
    { id: '#182', nome: 'COND PORT SAINT GERMAIN', status: { kind: 'success', icon: 'Check',  text: 'Leilão encerrado' }, leiloeiro: 'Antônio Magno Jacob da Rocha', atualizado: '16/04/2026, 16:52', resp: { iniciais: 'HF', nome: 'Henrique Führ', cor: '#3A82F6' }, img: 'house' },
    { id: '#181', nome: 'COND FIGUEIREDO',      status: { kind: 'success', icon: 'Hourglass', text: '18d p/ 1º leilão' }, leiloeiro: '',                          atualizado: '16/04/2026, 16:30', resp: { iniciais: 'HF', nome: 'Henrique Führ', cor: '#3A82F6' }, img: 'apt' },
  ],
  analise: [],
  aguardando: [
    { id: '#150', nome: 'COND. RESID. CALIFORNIA Xx', status: { kind: 'orange', icon: 'Tag',    text: 'Venda direta - disponível' }, leiloeiro: '', atualizado: '11/03/2026, 14:39', resp: { iniciais: 'HF', nome: 'Henrique Führ', cor: '#3A82F6' }, img: 'apt' },
    { id: '#148', nome: 'CONDOMÍNIO RESIDENCIAL PORTO SÃO GABRIEL', status: { kind: 'success', icon: 'Check', text: 'Leilão encerrado' }, leiloeiro: 'Cristiane de Almeida Rabelo Gois', atualizado: '11/03/2026, 14:34', resp: { iniciais: 'HF', nome: 'Henrique Führ', cor: '#3A82F6' }, img: 'apt' },
    { id: '#106', nome: 'EDIFÍCIO ITAMARACÁ',  status: { kind: 'success', icon: 'Check', text: 'Venda encerrada' }, leiloeiro: '', atualizado: '11/03/2026, 14:22', resp: { iniciais: 'HF', nome: 'Henrique Führ', cor: '#3A82F6' }, img: 'apt' },
  ],
};

function FHDLeadCard({ it }) {
  return (
    <article className="fhk-card">
      <header className="fhk-h">
        <span className="fhk-id">{it.id}</span>
        <span className="fhk-t">{it.nome}</span>
        <img src={FHD_THUMB_URLS[it.img] || FHD_THUMB_URLS.apt} alt="" className="fhk-thumb" loading="lazy"/>
      </header>
      <span className={`fhk-status fhk-st-${it.status.kind}`}>
        <PIc name={it.status.icon} size={12}/> {it.status.text}
      </span>
      <div className="fhk-row">
        <div className="fhk-row-lbl">Origem</div>
        <div className="fhk-row-v"><span className="fhk-dot" style={{ background: '#3A82F6' }}/> Garimpo Leilões</div>
      </div>
      {it.leiloeiro && (
        <div className="fhk-row">
          <div className="fhk-row-lbl">Leiloeiro</div>
          <div className="fhk-row-v"><span className="fhk-pill">{it.leiloeiro}</span></div>
        </div>
      )}
      <div className="fhk-row">
        <div className="fhk-row-lbl">Atualizado em</div>
        <div className="fhk-row-v">{it.atualizado}</div>
      </div>
      <div className="fhk-row">
        <div className="fhk-row-lbl">Leilão Vinculado</div>
        <div className="fhk-row-v fhk-link"><PIc name="Gavel" size={13}/> Acessar leilão</div>
      </div>
      <div className="fhk-row">
        <div className="fhk-row-lbl">Responsável</div>
        <div className="fhk-row-v"><span className="fhk-av" style={{ background: it.resp.cor }}>{it.resp.iniciais}</span> {it.resp.nome}</div>
      </div>
    </article>
  );
}

function FHDLeadsLeiloes() {
  const [tab, setTab] = useState('geral');
  const [search, setSearch] = useState('');
  return (
    <>
      <FHDPageHeader
        icon="Gavel"
        title={<span className="fhl-title-row">Leads Leilões <PIc name="Caret" size={14}/></span>}
        tabs={[
          { id: 'geral',     l: 'Geral' },
          { id: 'dashboard', l: 'Dashboard' },
          { id: 'metas',     l: 'Metas' },
        ]}
        activeTab={tab}
        onTabChange={setTab}
        actions={<button className="fhd-icon-btn-sq" title="Buscar"><PIc name="MagnifyingGlass" size={18}/></button>}
      />
      <div className="fhd-toolbar">
        <div className="fhd-searchbar fhd-searchbar-chips">
          <span className="fhd-chip-active">Grupo de etapa: Em Andamento <PIc name="X" size={11}/></span>
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="+ pesquisa"/>
          <PIc name="X" size={16}/>
        </div>
        <button className="fhd-icon-btn-sq fhd-filter-on" title="Filtros">
          <PIc name="Faders" size={18}/>
          <span className="fhd-filter-badge">1</span>
        </button>
        <button className="fhd-btn-primary-sq" title="Novo lead"><PIc name="Plus" size={20}/></button>
      </div>
      <div className="fhd-toolbar2">
        <button className="fhd-chip-btn fhd-chip-btn-on"><PIc name="Kanban" size={14}/> Kanban</button>
        <div className="fhd-toolbar2-r">
          <button className="fhd-icon-btn-ghost" title="Configurar"><PIc name="Gear" size={14}/></button>
          <span className="fhd-counter-pill">38 <span>leads</span></span>
        </div>
      </div>
      <div className="fhk-board">
        {FHD_LEADS_COLS.map((col) => (
          <div key={col.id} className="fhk-col" data-color={col.tint}>
            <div className="fhk-col-h" style={{ borderTopColor: col.color }}>
              <span className="fhk-col-dot" style={{ background: col.color }}/>
              <span className="fhk-col-l">{col.label}</span>
              <span className="fhk-col-c">{col.count}</span>
            </div>
            <div className="fhk-col-body">
              {(FHD_LEADS[col.id] || []).map((lead) => <FHDLeadCard key={lead.id} it={lead}/>)}
              {(FHD_LEADS[col.id] || []).length === 0 && (
                <div className="fhk-empty">
                  <div className="fhk-empty-ic"><PIc name="FileText" size={20}/></div>
                  <div>Nenhum lead</div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

// ── App raiz ────────────────────────────────────────────────────────────────
function FlipperDemo() {
  const [activeGroup, setActiveGroup] = useState('home');
  const [activeView, setActiveView] = useState('home');
  const [openProperty, setOpenProperty] = useState(null);

  // Quando troca de grupo, abre o primeiro item do grupo automaticamente.
  const onPickGroup = (k) => {
    setActiveGroup(k);
    const g = FHD_GROUPS.find((x) => x.key === k);
    if (g && g.items[0]) setActiveView(g.items[0].k);
    setOpenProperty(null);
  };

  let content;
  if (activeView === 'home')         content = <FHDHome onOpen={() => { setActiveGroup('gestao'); setActiveView('imoveis'); }}/>;
  else if (activeView === 'imoveis') content = <FHDImoveis onOpen={(id) => setOpenProperty(id)}/>;
  else if (activeView === 'garimpo') content = <FHDGarimpoLeiloes/>;
  else if (activeView === 'leads')   content = <FHDLeadsLeiloes/>;
  else                                content = <FHDPlaceholder {...(FHD_PLACEHOLDERS[activeView] || FHD_PLACEHOLDERS.agente)}/>;

  const goHome = () => { setActiveGroup('home'); setActiveView('home'); setOpenProperty(null); };

  return (
    <div className="fhd-app fhd-light" onClick={(e) => e.stopPropagation()}>
      <FHDIconRail activeGroup={activeGroup} onPickGroup={onPickGroup} onHome={goHome} isHomeActive={activeGroup === 'home'}/>
      {activeGroup !== 'home' && <FHDPanel activeGroup={activeGroup} activeView={activeView} onPickView={setActiveView}/>}
      <div className="fhd-canvas">
        <div className="fhd-canvas-body">{content}</div>
      </div>
      {openProperty && <FHDDrawer id={openProperty} onClose={() => setOpenProperty(null)}/>}
    </div>
  );
}

window.FlipperDemo = FlipperDemo;