/* @component-map
 * App — Main container, layout and view switching
 * HeroSection — Title, description, stats, and progress bar
 * TaskForm — Add/edit task form panel
 * TaskList — Filtered task list with toolbar and actions
 * @end-component-map */

import { HeroSection } from './components/HeroSection.jsx';
import { TaskForm } from './components/TaskForm.jsx';
import { TaskList } from './components/TaskList.jsx';

function App() {
  const [editingTask, setEditingTask] = useState(null);
  const [filter, setFilter] = useState('all');

  return (
    <div className="app">
      <HeroSection filter={filter} />
      <section className="main-grid">
        <TaskForm
          editingTask={editingTask}
          setEditingTask={setEditingTask}
        />
        <TaskList
          filter={filter}
          setFilter={setFilter}
          setEditingTask={setEditingTask}
        />
      </section>
      <div className="footer-note">Synced with your personal Deplixo data store.</div>
    </div>
  );
}

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