// plataforma-menu.jsx — shared "Plataforma" megamenu dropdown for all page navs.
// Mounts as <PlataformaMenu /> inside <nav className="nav-links">.

const PLATAFORMA_COLUMNS = [
  {
    title: 'Aquisição & análise',
    items: [
      { href: '/plataforma#garimpo',  label: 'Garimpo e oportunidades' },
      { href: '/plataforma#analise',  label: 'Análise de mercado' },
      { href: '/plataforma#juridico', label: 'Jurídico e documentos' },
    ],
  },
  {
    title: 'Execução',
    items: [
      { href: '/plataforma#reforma',    label: 'Reforma e transformação' },
      { href: '/plataforma#financeiro', label: 'Financeiro por imóvel' },
    ],
  },
  {
    title: 'Saída & resultado',
    items: [
      { href: '/plataforma#crm',          label: 'CRM e comercialização' },
      { href: '/plataforma#fechamento',   label: 'Fechamento e prestação de contas' },
      { href: '/plataforma#inteligencia', label: 'Inteligência operacional' },
    ],
  },
];

function PlataformaMenu({ basePath = '' }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onDocClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDocClick);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDocClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  return (
    <div
      className="nav-dropdown"
      data-open={open ? 'true' : 'false'}
      ref={ref}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <button
        type="button"
        className="nav-dropdown-trigger"
        aria-haspopup="true"
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        Plataforma
        <svg className="nav-dropdown-caret" viewBox="0 0 10 10" aria-hidden="true">
          <path d="M2 4l3 3 3-3" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      <div className="nav-megamenu" role="menu">
        {PLATAFORMA_COLUMNS.map((col) => (
          <div className="nav-mega-col" key={col.title}>
            <h4>{col.title}</h4>
            <ul>
              {col.items.map((item) => (
                <li key={item.href}>
                  <a className="nav-mega-link" href={item.href} role="menuitem">
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

window.PlataformaMenu = PlataformaMenu;