"use client";
import { useState } from "react";
import { MarkdownRenderer } from "@/components/markdown/MarkdownRenderer";
import { TableOfContents } from "@/components/markdown/TableOfContents";

export default function QuemSomosPage() {
  const [headings, setHeadings] = useState<{
    id: string;
    text: string;
    level: number;
  }[]>([]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-[1fr_300px] gap-8">
      <div>
        <h1 className="text-2xl font-bold">Quem Somos</h1>
        <MarkdownRenderer
          contentPath={"pt/sobre/quem-somos.md"}
          onHeadings={setHeadings}
        />
      </div>
      <aside aria-label="Tabela de conteúdos" className="md:block">
        <TableOfContents headings={headings} />
      </aside>
    </div>
  );
}
