/* @component-map
 * App — Main container, layout shell with header
 * Calculator — Dog age calculator form with results
 * History — Saved dog pack history grid
 * @end-component-map */

import { Calculator } from './components/Calculator.jsx';
import { History } from './components/History.jsx';

function App() {
  return (
    <>
      <div className="paw-bg"></div>
      <header className="app-header">
        <div className="header-inner">
          <div className="logo-group">
            <span className="logo-icon">🐾</span>
            <div>
              <h1 className="app-title">Pawsome Age</h1>
              <p className="app-subtitle">Real dog age calculator</p>
            </div>
          </div>
        </div>
      </header>
      <main className="main-content">
        <Calculator />
        <History />
      </main>
    </>
  );
}

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