// Root app — assembles the 5 direction sections inside a DesignCanvas.
// Each Direction* is invoked as a FUNCTION CALL (not <Component />) so it
// returns a React.Fragment that DCSection's dcFlatten can unwrap to find
// the actual DCArtboard children.

function App() {
  return (
    <DesignCanvas>

      <DCSection id="d1" title="Direção 01 · Grid System" subtitle="Tech / SaaS · geométrico, grid visível, neutros frios + roxo pontual">
        {Direction01()}
      </DCSection>

      <DCSection id="d2" title="Direção 02 · Editorial Luxe" subtitle="Premium · serifa display, fotografia, ritmo de revista">
        {Direction02()}
      </DCSection>

      <DCSection id="d3" title="Direção 03 · Soft Boutique" subtitle="Acolhedor · formas orgânicas, gradientes suaves, conversacional">
        {Direction03()}
      </DCSection>

      <DCSection id="d4" title="Direção 04 · Bold Statement" subtitle="Premium tech · tipografia chunky, flood de cor, confiante">
        {Direction04()}
      </DCSection>

      <DCSection id="d5" title="Direção 05 · Quiet Atelier" subtitle="Minimal · muito off-white, roxo pontual, perfume / cosmético">
        {Direction05()}
      </DCSection>

    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);